Commit 79db4c64 by 程智春

Merge branch 'nativehome_tst' of http://code.mayi888.com/chengmo/mayi-mp-shop into nativehome_tst

parents c753b873 f2d09ecb
const app = getApp(); const app = getApp();
console.log(app, "apppppppppp");
Component({ Component({
pageLifetimes: {
show() {
console.log("哈哈哈哈");
if (typeof this.getTabBar === "function" && this.getTabBar()) {
this.getTabBar().setData({
selected: 1
});
}
}
},
data: { data: {
selected: 0, selected: 0,
color: "#7A7E83", color: "#7A7E83",
...@@ -84,21 +72,9 @@ Component({ ...@@ -84,21 +72,9 @@ Component({
}); });
}; };
} }
console.log(this.data.themeColor, "themeColor");
if (typeof this.getTabBar === "function" && this.getTabBar()) {
this.getTabBar().setData({
selected: 1
});
}
this.setData({ this.setData({
mmm: Math.ceil(app.globalData.footerVal.componentData.list.length / 2 - 1) mmm: Math.ceil(app.globalData.footerVal.componentData.list.length / 2 - 1)
}); });
console.log(
Math.ceil(app.globalData.footerVal.componentData.list.length / 2 - 1),
this.data.selected
);
console.log(this.data.mmm, "ready");
}, },
attached() { attached() {
let that = this; let that = this;
...@@ -108,24 +84,13 @@ Component({ ...@@ -108,24 +84,13 @@ Component({
that.data.selected && that.data.selected &&
app.globalData.footerVal.componentData["styleSelectionNum"] == 1; app.globalData.footerVal.componentData["styleSelectionNum"] == 1;
console.log(733333, mm);
that.setData({ that.setData({
componentData: app.globalData.footerVal.componentData, componentData: app.globalData.footerVal.componentData,
list: app.globalData.footerVal.componentData.list, list: app.globalData.footerVal.componentData.list,
mm: mm mm: mm
}); });
console.log(
"777777",
Math.ceil(this.data.list.length / 2 - 1),
this.data.selected,
this.data.componentData["styleSelectionNum"]
);
} else { } else {
console.log(73333381);
app.footerCallBack = function(params) { app.footerCallBack = function(params) {
console.log("back");
console.log(params,app.globalData.footerVal.componentData)
params.componentData.selectIconColor = app.globalData.footerVal.componentData.selectIconBackground == 1 ? 'val(--main-color)':params.componentData.selectIconColor params.componentData.selectIconColor = app.globalData.footerVal.componentData.selectIconBackground == 1 ? 'val(--main-color)':params.componentData.selectIconColor
that.setData({ that.setData({
componentData: params.componentData, componentData: params.componentData,
...@@ -137,20 +102,8 @@ Component({ ...@@ -137,20 +102,8 @@ Component({
Math.ceil(params.componentData.list.length / 2 - 1) == Math.ceil(params.componentData.list.length / 2 - 1) ==
that.data.selected && that.data.selected &&
params.componentData["styleSelectionNum"] == 1; params.componentData["styleSelectionNum"] == 1;
console.log("87777777", mm);
console.log(that.data.componentData,'componentData')
}; };
} }
// ----------webview 变化
console.log("启动1111", this.getTabBar());
app.webviewCallBack = function(state, params) {
console.log("webview变化", state, params);
};
//
this.setData({ this.setData({
mm: mm:
Math.ceil(this.data.list.length / 2 - 1) == this.data.selected && Math.ceil(this.data.list.length / 2 - 1) == this.data.selected &&
...@@ -158,21 +111,11 @@ Component({ ...@@ -158,21 +111,11 @@ Component({
}); });
}, },
methods: { methods: {
init() {},
switchTab(e) { switchTab(e) {
const { index } = e.currentTarget.dataset; const { index } = e.currentTarget.dataset;
console.log("755555555", this.data.list[index].link);
app.$themeToLink(this.data.list[index]["link"], 1); app.$themeToLink(this.data.list[index]["link"], 1);
// this.toPage(this.data.list[index].link,index)
// this.setData({
// selected: index
// })
}, },
toPage(data, index) { toPage(data, index) {
console.log("index98", index, this);
// index=index==0?index+1:index
// 跳转 // 跳转
if (data.link == "/") { if (data.link == "/") {
wx.switchTab({ wx.switchTab({
...@@ -182,9 +125,6 @@ Component({ ...@@ -182,9 +125,6 @@ Component({
wx.switchTab({ wx.switchTab({
url: `/pages/tabBar${index}/main` url: `/pages/tabBar${index}/main`
}); });
// ?from=tabbar&backpath=${
// data.link
// }
} }
} }
} }
......
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
<!-- {{index}}{{selected}}--{{Math.ceil(5/2-1)}}--{{mm}} --> <!-- {{index}}{{selected}}--{{Math.ceil(5/2-1)}}--{{mm}} -->
<!-- &&componentData['styleSelectionNum']==1 --> <!-- &&componentData['styleSelectionNum']==1 -->
<!-- 图标 --> <!-- 图标 -->
<view class="item" class="{{index == selected ? 'current' : ''}}"> <view class="item {{index == selected ? 'current' : ''}}">
<view> <view>
<view wx:if="{{item.iconType==0||!item.iconType}}"> <view wx:if="{{item.iconType==0||!item.iconType}}">
<view class="antt {{item.icon}}" style="font-size:{{componentData.defaultIcon==1 ? '36rpx' : (componentData.defaultIconSize*2 + 'rpx')}};color:{{index==selected?componentData.selectIconColor:componentData.defaultIconColor}}"></view> <view class="antt {{item.icon}}" style="font-size:{{componentData.defaultIcon==1 ? '36rpx' : (componentData.defaultIconSize*2 + 'rpx')}};color:{{index==selected?componentData.selectIconColor:componentData.defaultIconColor}}"></view>
......
...@@ -1198,12 +1198,7 @@ ...@@ -1198,12 +1198,7 @@
} }
.tab-bar-item .item{ .tab-bar-item .item{
display: flex;
flex-direction: column;
justify-content: space-between;
align-items: center;
position: relative; position: relative;
height: 100%;
} }
.isItem { .isItem {
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
"extEnable":true, "extEnable":true,
"extAppid":"wxae95a07ffdf11548", "extAppid":"wxae95a07ffdf11548",
"ext":{ "ext":{
"mixid":"antgood", "mixid":"xyyx",
"shopid":67 "shopid":133
} }
} }
\ No newline at end of file
...@@ -11,9 +11,9 @@ export default { ...@@ -11,9 +11,9 @@ export default {
process.env.NODE_ENV == "production" || process.env.NODE_ENV == "production" ||
JSON.stringify(extConfig) == "{}" JSON.stringify(extConfig) == "{}"
) { ) {
extConfig = { mixid: "antgood", shopid: 67 }; // extConfig = { mixid: "antgood", shopid: 67 };
// extConfig = { "mixid":"xyyx", extConfig = { "mixid":"xyyx",
// "shopid":133 }; "shopid":133 };
} }
console.log("1444444444", extConfig); console.log("1444444444", extConfig);
this.$store.commit("setExtConfig", extConfig.mixid); this.$store.commit("setExtConfig", extConfig.mixid);
......
const app = getApp();
export default {
computed: {
getBorderRadius() {
return this.datas.componentData.borderRadius == undefined
? 0.625
: this.datas.componentData.borderRadius;
},
goodsSort() {
return this.datas.componentData.goodsSort || 0;
},
// 会员价
vipPrice() {
return this.datas.componentData.vipPrice || false;
},
whetherFindDistributionCommission() {
return this.datas.componentData.whetherFindDistributionCommission ? 1 : 0;
},
categoryId() {
return this.datas.componentData.categoryId
? this.datas.componentData.categoryId
: "";
},
// 关注人数样式
followerColor() {
return this.datas.componentData.followerColor
? this.datas.componentData.followerColor
: "#ff9933";
},
// 佣金文字颜色
commissionColor() {
return this.datas.componentData.commissionColor
? this.datas.componentData.commissionColor
: "#ff9051";
},
//佣金背景颜色
commissionBgColor() {
return this.datas.componentData.commissionBgColor
? this.datas.componentData.commissionBgColor
: "";
},
// 按钮图标
btnIcon() {
return this.datas.componentData.btnIcon
? this.datas.componentData.btnIcon
: "";
},
// 按钮类型
btnType() {
return this.datas.componentData.btnType
? this.datas.componentData.btnType
: 6;
},
// 按钮颜色
btnColor() {
return this.datas.componentData.btnColor
? this.datas.componentData.btnColor
: "var(--main-color)";
},
// 按钮文案
btnTest() {
return this.datas.componentData.btnTest
? this.datas.componentData.btnTest
: "立即购买";
},
getItemNum() {
return this.datas.componentData.goodsList;
},
getPaddingList() {
return this.datas.componentData.paddingList;
},
getColumnWidth() {
if (this.datas.componentData.columnNum == 1) {
return "100%";
} else if (this.datas.componentData.columnNum == 2) {
return "50%";
} else {
return "33.3%";
}
},
getPayFontSize() {
if (this.datas.componentData.columnNum == 1) {
return "12px";
} else if (this.datas.componentData.columnNum == 2) {
return "10px";
} else {
return "8px";
}
},
getListPadding() {
if (this.datas.componentData.columnNum == 1) {
return "";
} else if (this.datas.componentData.columnNum == 2) {
return (
"0 " +
this.datas.componentData.proGap / 2 +
"px" +
" 0 " +
this.datas.componentData.proGap / 2 +
"px"
);
} else {
return "33.3%";
}
},
whetherShowSoldOutGoods() {
// 商城端接口的获取商城配置信息
// if (this.render) {
// return this.$store.state.setShopConfig.whetherShowSoldOutGoods || 1;
// } else {
// return 1;
// }
return 1;
},
goodsType() {
return this.datas.componentData.goodsType || 0;
},
// 展示标题图片
titleIcon() {
return app.DFSImg(this.datas.componentData.titleIcon, 400, 400) || "";
},
// 展示角标
angleSign() {
return this.datas.componentData.angleSign || false;
},
// 角标尺寸
angleSignSize() {
return this.datas.componentData.angleSignSize || 25;
},
// 展示角标图片
angleSignImg() {
return this.datas.componentData.angleSignImg || "";
},
// 展示营销标签
marketingTag() {
return this.datas.componentData.marketingTag || false;
},
// 展示营销标签类型
marketingStyle() {
return this.datas.componentData.marketingStyle || 0;
},
// 营销标签列表
marketingTagList() {
return this.datas.componentData.marketingTagList || [];
},
cardShadowSize() {
return this.datas.componentData.cardShadowSize
? this.datas.componentData.cardShadowSize
: 3;
}
}
};
\ No newline at end of file
...@@ -30,7 +30,7 @@ ...@@ -30,7 +30,7 @@
<span class="tagName">{{ item.tagName }}</span> <span class="tagName">{{ item.tagName }}</span>
</div> </div>
</div> </div>
<image :src="info.coverUrl" mode="widthFix"></image> <image :src="info.coverUrl" mode="widthFix" lazy-load></image>
</div> </div>
<div class="infoText"> <div class="infoText">
<p <p
...@@ -70,7 +70,7 @@ ...@@ -70,7 +70,7 @@
<span class="tagName">{{ item.tagName }}</span> <span class="tagName">{{ item.tagName }}</span>
</div> </div>
</div> </div>
<image :src="info.coverUrl" mode="widthFix"></image> <image :src="info.coverUrl" lazy-load mode="widthFix"></image>
</div> </div>
</div> </div>
</template> </template>
......
<!--
tabbar
-->
<template>
<div>
<web-view :src="pageUrl" @error="handleError"></web-view>
<div style="width:100%;height:90vh;display:flex;justify-content: center;align-items: center;">
<van-loading size="40px" type="spinner"></van-loading>
</div>
</div>
</template>
<script>
import {
getUrlofLink,
getUrlofQuery,
setTabBarActive,
checkTabbarPage,
} from "../utils/mayi.js";
export default {
props: {
index: {
type: Number,
default: 1,
},
},
data() {
return {
link: process.env.BASE_URL,
page: "/",
params: "?mixid=" + this.$store.state.mixid,
ss: "",
};
},
computed: {
pageUrl() {
return (
this.link +
this.page +
this.params +
`&native_test=1&tabbar=2&location_obj=${wx.getStorageSync(
"location"
)}` +
this.ss
);
},
},
onLoad(options) {
let ss = wx.getStorageSync("sessionid");
this.ss = ss ? `&sessionid=${ss}` : "";
// tabbar 跳转
let homeIndex = checkTabbarPage("/");
homeIndex != 0 && homeIndex == this.index && (this.index = 0);
if (this.mpApp.globalData.footerVal.componentData.list[this.index].link) {
this.page = getUrlofLink(
this.mpApp.globalData.footerVal.componentData.list[this.index].link
);
// this.params+='&'+getUrlofQuery( this.mpApp.globalData.footerVal.componentData.list[this.index].link)
this.mpApp.globalData.tabBarPageLink = "";
}
console.log(49, this.pageUrl);
},
onShow() {
let ss = wx.getStorageSync("sessionid");
if (!this.ss && ss) {
this.ss = `&sessionid=${ss}`;
} else if (!ss) {
// this.params+="&logOut=true"
} else {
this.params += `&timestamp=${new Date().getTime()}`;
}
setTabBarActive.bind(this)(this.index);
},
methods: {
handleError(data) {
wx.showLoading({
title: "网页加载失败 请右上角刷新",
});
},
},
};
</script>
\ No newline at end of file
...@@ -84,6 +84,10 @@ ...@@ -84,6 +84,10 @@
<div v-if="item.componentCode == 'merchants-list' && item.componentInfo.visible == 1"> <div v-if="item.componentCode == 'merchants-list' && item.componentInfo.visible == 1">
<merchants-list :class="'merchants-list' +index" :datas="item"></merchants-list> <merchants-list :class="'merchants-list' +index" :datas="item"></merchants-list>
</div> </div>
<div v-if="item.componentCode == 'spell-group' && item.componentInfo.visible == 1">
<spell-group :datas="item"></spell-group>
</div>
</div> </div>
<bottomCont></bottomCont> <bottomCont></bottomCont>
</div> </div>
...@@ -105,6 +109,7 @@ import text from '@/components/content/text' ...@@ -105,6 +109,7 @@ import text from '@/components/content/text'
import imgText from '@/components/content/imgText' import imgText from '@/components/content/imgText'
import coupon from '@/components/activity/coupon' import coupon from '@/components/activity/coupon'
import integralTurntable from '@/components/activity/integralTurntable' import integralTurntable from '@/components/activity/integralTurntable'
import spellGroup from '@/components/activity/spellGroup'
import { setTabBarActive, checkTabbarPage,themeColor } from "../../utils/mayi.js"; import { setTabBarActive, checkTabbarPage,themeColor } from "../../utils/mayi.js";
import { throttle } from "../../utils/index.js" import { throttle } from "../../utils/index.js"
const app = getApp(); const app = getApp();
...@@ -134,7 +139,8 @@ export default { ...@@ -134,7 +139,8 @@ export default {
coupon, coupon,
integralTurntable, integralTurntable,
transverseLabel, transverseLabel,
information information,
spellGroup
}, },
onShareAppMessage(res) { onShareAppMessage(res) {
let shareVal={}; let shareVal={};
...@@ -241,7 +247,7 @@ export default { ...@@ -241,7 +247,7 @@ export default {
methods: { methods: {
init(pageList) { init(pageList) {
this.getCartNum()
setTabBarActive.bind(this)(checkTabbarPage('/')); setTabBarActive.bind(this)(checkTabbarPage('/'));
this.pageInfo = pageList.filter((item) => item.pageCode == 1)[0]; this.pageInfo = pageList.filter((item) => item.pageCode == 1)[0];
...@@ -256,12 +262,6 @@ export default { ...@@ -256,12 +262,6 @@ export default {
}, },
scrolls(el){ scrolls(el){
// this.setFooterShow(el); // this.setFooterShow(el);
// if(this.$mp.page && this.$mp.page.selectComponent(".goodsListItem")){
// this.$mp.page.selectComponent(".goodsListItem").getScroll(el);
// }
// if(this.$mp.page && this.$mp.page.selectComponent(".merchants-list")){
// this.$mp.page.selectComponent(".merchants-list").getScroll(el);
// }
if (this.pageData) { if (this.pageData) {
for (let i = 0; i < this.pageData.length; i++) { for (let i = 0; i < this.pageData.length; i++) {
const element = this.pageData[i] const element = this.pageData[i]
...@@ -285,6 +285,7 @@ export default { ...@@ -285,6 +285,7 @@ export default {
}, },
setFooterShow(el){ setFooterShow(el){
// return
let afterScrollTop = el.scrollTop; let afterScrollTop = el.scrollTop;
let delta = afterScrollTop - this.beforeScrollTop; let delta = afterScrollTop - this.beforeScrollTop;
let {showFlag} = this.$mp.page.getTabBar().data; let {showFlag} = this.$mp.page.getTabBar().data;
...@@ -298,7 +299,9 @@ export default { ...@@ -298,7 +299,9 @@ export default {
this.beforeScrollTop = afterScrollTop; this.beforeScrollTop = afterScrollTop;
return; return;
} }
this.$mp.page.getTabBar().setData({'showFlag':delta>0?'down':'up'}) this.$mp.page.getTabBar().animation({'showFlag':delta>0?'down':'up'})
console.log(showFlag,'set296' )
// this.$mp.page.getTabBar().setData({'showFlag':delta>0?'down':'up'})
}, },
scrolltolower(){ scrolltolower(){
console.log("scrolltolower") console.log("scrolltolower")
......
...@@ -19,7 +19,8 @@ ...@@ -19,7 +19,8 @@
"photo-gallery":"/static/nativeComponents/PhotoGallery/index", "photo-gallery":"/static/nativeComponents/PhotoGallery/index",
"live-broadcast":"/static/nativeComponents/LiveBroadcast/index", "live-broadcast":"/static/nativeComponents/LiveBroadcast/index",
"share-picture":"/static/nativeComponents/SharePicture/index", "share-picture":"/static/nativeComponents/SharePicture/index",
"merchants-list":"/static/nativeComponents/MerchantsList/index" "merchants-list":"/static/nativeComponents/MerchantsList/index",
"spell-group-heap-item":"/static/nativeComponents/spellGroup/heapItem/index"
}, },
"enablePullDownRefresh":true, "enablePullDownRefresh":true,
"backgroundColor":"#f5f5f5" "backgroundColor":"#f5f5f5"
......
<!--
tabbar
-->
<template> <template>
<div> <tabbarPage :index="1"></tabbarPage>
<web-view :src="pageUrl" @error="handleError"></web-view>
<div style="width:100%;height:90vh;display:flex;justify-content: center;align-items: center;">
<van-loading size="40px" type="spinner"></van-loading>
</div>
</div>
</template> </template>
<script> <script>
import { import tabbarPage from "../../components/tabbarPage.vue";
getUrlofLink,
setTabBarActive,
checkTabbarPage,
} from "../../utils/mayi.js";
export default { export default {
data() { components: {
return { tabbarPage,
link: process.env.BASE_URL,
page: "/",
params: "?mixid=" + this.$store.state.mixid,
index: 1,
ss: "",
};
},
computed: {
pageUrl() {
return this.link + this.page + this.params + `&native_test=1&tabbar=1&location_obj=${wx.getStorageSync("location")}` + this.ss;
},
},
onLoad(options) {
let ss = wx.getStorageSync("sessionid");
this.ss = ss ? `&sessionid=${ss}` : "";
// tabbar 跳转
let homeIndex = checkTabbarPage("/");
homeIndex != 0 && homeIndex == this.index && (this.index = 0);
if (this.mpApp.globalData.footerVal.componentData.list[this.index].link) {
this.page = getUrlofLink(
this.mpApp.globalData.footerVal.componentData.list[this.index].link
);
this.mpApp.globalData.tabBarPageLink = "";
}
},
onShow() {
let ss = wx.getStorageSync("sessionid");
if (!this.ss && ss) {
this.ss = `&sessionid=${ss}`;
}else if(!ss){
// !this.params.includes('logOut=true') && (this.params+="&logOut=true")
}else{
this.params+=`&timestamp=${new Date().getTime()}`
}
setTabBarActive.bind(this)(this.index);
console.log('----',this.pageUrl)
},
methods: {
handleError(data) {
wx.showLoading({
title: "网页加载失败 请右上角刷新",
});
},
}, },
}; };
</script> </script>
<style lang="scss" scoped></style>
<!--
tabbar
-->
<template> <template>
<div> <tabbarPage :index="2"></tabbarPage>
<web-view :src="pageUrl" @error="handleError"></web-view>
<div style="width:100%;height:90vh;display:flex;justify-content: center;align-items: center;">
<van-loading size="40px" type="spinner"></van-loading>
</div>
</div>
</template> </template>
<script> <script>
import { import tabbarPage from "../../components/tabbarPage.vue";
getUrlofLink,
setTabBarActive,
checkTabbarPage,
} from "../../utils/mayi.js";
export default { export default {
data() { components: {
return { tabbarPage,
link: process.env.BASE_URL,
page: "/",
params: "?mixid=" + this.$store.state.mixid ,
index: 2,
ss: "",
};
},
computed: {
pageUrl() {
return this.link + this.page + this.params+ `&native_test=1&tabbar=2&location_obj=${wx.getStorageSync("location")}` + this.ss;
},
},
onLoad(options) {
let ss = wx.getStorageSync("sessionid");
this.ss = ss ? `&sessionid=${ss}` : "";
// tabbar 跳转
let homeIndex = checkTabbarPage("/");
homeIndex != 0 && homeIndex==this.index && (this.index = 0);
if (this.mpApp.globalData.footerVal.componentData.list[this.index].link) {
this.page = getUrlofLink(
this.mpApp.globalData.footerVal.componentData.list[this.index].link
);
this.mpApp.globalData.tabBarPageLink = "";
}
},
onShow() {
let ss = wx.getStorageSync("sessionid");
if (!this.ss && ss) {
this.ss = `&sessionid=${ss}`;
}else if(!ss){
// this.params+="&logOut=true"
}else{
this.params+=`&timestamp=${new Date().getTime()}`
}
setTabBarActive.bind(this)(this.index);
console.log('----',this.pageUrl)
},
methods: {
handleError(data) {
wx.showLoading({
title: "网页加载失败 请右上角刷新",
});
},
}, },
}; };
</script> </script>
<style lang="scss" scoped></style>
<!--
tabbar
-->
<template> <template>
<div> <tabbarPage :index="3"></tabbarPage>
<web-view :src="pageUrl" @error="handleError"></web-view>
<div style="width:100%;height:90vh;display:flex;justify-content: center;align-items: center;">
<van-loading size="40px" type="spinner"></van-loading>
</div>
</div>
</template> </template>
<script> <script>
import { import tabbarPage from "../../components/tabbarPage.vue";
getUrlofLink,
setTabBarActive,
checkTabbarPage,
} from "../../utils/mayi.js";
export default { export default {
data() { components: {
return { tabbarPage,
link: process.env.BASE_URL,
page: "/",
params: "?mixid=" + this.$store.state.mixid,
index: 3,
ss: "",
};
},
computed: {
pageUrl() {
return this.link + this.page + this.params + `&native_test=1&tabbar=3&location_obj=${wx.getStorageSync("location")}` + this.ss;
},
},
onLoad(options) {
let ss = wx.getStorageSync("sessionid");
this.ss = ss ? `&sessionid=${ss}` : "";
// tabbar 跳转
let homeIndex = checkTabbarPage("/");
homeIndex != 0 && homeIndex==this.index && (this.index = 0);
if (this.mpApp.globalData.footerVal.componentData.list[this.index].link) {
let p= getUrlofLink(this.mpApp.globalData.footerVal.componentData.list[this.index].link);
let pl=p.split('?')
if (pl[1]) {
this.page=pl[0]
this.params+='&'+pl[1]
}else{
this.page = p
}
this.mpApp.globalData.tabBarPageLink = "";
}
},
onShow() {
let ss = wx.getStorageSync("sessionid");
if (!this.ss && ss) {
this.ss = `&sessionid=${ss}`;
}else if(!ss){
// this.params+="&logOut=true"
}else{
this.params+=`&timestamp=${new Date().getTime()}`
}
setTabBarActive.bind(this)(this.index);
console.log('----',this.pageUrl)
},
methods: {
handleError(data) {
wx.showLoading({
title: "网页加载失败 请右上角刷新",
});
},
}, },
}; };
</script> </script>
<style lang="scss" scoped></style>
<!--
tabbar
-->
<template> <template>
<div> <tabbarPage :index="4"></tabbarPage>
<web-view :src="pageUrl" @error="handleError"></web-view>
<div style="width:100%;height:90vh;display:flex;justify-content: center;align-items: center;">
<van-loading size="40px" type="spinner"></van-loading>
</div>
</div>
</template> </template>
<script> <script>
import { import tabbarPage from "../../components/tabbarPage.vue";
getUrlofLink,
setTabBarActive,
checkTabbarPage,
} from "../../utils/mayi.js";
export default { export default {
data() { components: {
return { tabbarPage,
link: process.env.BASE_URL,
page: "/",
params: "?mixid=" + this.$store.state.mixid,
index: 4,
ss: "",
};
},
computed: {
pageUrl() {
return this.link + this.page + this.params + `&native_test=1&tabbar=4&location_obj=${wx.getStorageSync("location")}` + this.ss;
},
},
onLoad(options) {
let ss = wx.getStorageSync("sessionid");
this.ss = ss ? `&sessionid=${ss}` : "";
// tabbar 跳转
let homeIndex = checkTabbarPage("/");
homeIndex != 0 && homeIndex==this.index && (this.index = 0);
if (this.mpApp.globalData.footerVal.componentData.list[this.index].link) {
let p= getUrlofLink(this.mpApp.globalData.footerVal.componentData.list[this.index].link);
let pl=p.split('?')
if (pl[1]) {
this.page=pl[0]
this.params+='&'+pl[1]
}else{
this.page = p
}
this.mpApp.globalData.tabBarPageLink = "";
}
},
onShow() {
let ss = wx.getStorageSync("sessionid");
if (!this.ss && ss) {
this.ss = `&sessionid=${ss}`;
}else if(!ss){
// this.params+="&logOut=true"
}else{
this.params+=`&timestamp=${new Date().getTime()}`
}
setTabBarActive.bind(this)(this.index);
console.log('----',this.pageUrl)
},
methods: {
handleError(data) {
wx.showLoading({
title: "网页加载失败 请右上角刷新",
});
},
}, },
}; };
</script> </script>
<style lang="scss" scoped></style>
import cart from "@/api/cart" import cart from "@/api/cart"
import classificationApi from "@/api/classification"; import classificationApi from "@/api/classification";
// 登录白名单 name // 登录白名单 name
export const noLoginList = ["index", "media-video", "goods-goodsInfo", "goods-commodityMenu", "goodsSearch-goodsSearch", "chooseStores", "activty-receivingGift", "activty", "login-register", "login-phoneLogin", "login-authInformation", "login-forgetPassWord", "login-accountLogin", "login-wxRegister", "pay-payList", "comment-evaluateList", "goods-commonProblemList", "article-articlePage", "article-articleList", "goods-posters", "liveBroadcast", "liveBroadcast-list", "personalCenter-coupon-getCoupon", "buyerShow-showDetail", "goods-addGoodsList", "personalCenter-CDkey-exchange", "giftCards-linkReceive", "giftCoupon-preview", "smartForm", "shopCart-shareShopCart", "groupBuying-beInvite", "brandTopics", 'personalCenter-spokesmanCenter', 'personalCenter-spokesmanCenter-mine-spokesmanHomePage','liveBroadcast-lived', 'personalCenter-spokesmanCenter-mine-getBusinessCard','changeAdr']; export const noLoginList = ["index", "media-video", "goods-goodsInfo", "goods-commodityMenu", "goodsSearch-goodsSearch", "chooseStores", "activty-receivingGift", "activty", "login-register", "login-phoneLogin", "login-authInformation", "login-forgetPassWord", "login-accountLogin", "login-wxRegister", "pay-payList", "comment-evaluateList", "goods-commonProblemList", "article-articlePage", "article-articleList", "goods-posters", "liveBroadcast", "liveBroadcast-list", "personalCenter-coupon-getCoupon", "buyerShow-showDetail", "goods-addGoodsList", "personalCenter-CDkey-exchange", "giftCards-linkReceive", "giftCoupon-preview", "smartForm", "shopCart-shareShopCart", "groupBuying-beInvite", "brandTopics", 'personalCenter-spokesmanCenter', 'personalCenter-spokesmanCenter-mine-spokesmanHomePage', 'liveBroadcast-lived', 'personalCenter-spokesmanCenter-mine-getBusinessCard', 'changeAdr'];
// path // path
export const noLoginListPath = noLoginList.map(item=>{ export const noLoginListPath = noLoginList.map(item => {
item=item.replace(/-/g,'/') item = item.replace(/-/g, '/')
item='/'+item item = '/' + item
item=="/index" && (item="/") item == "/index" && (item = "/")
return item return item
}) })
// 有底部栏页面
export const containFooterPage=["/","/goods/commodityMenu","/shopCart/shoppingCart","/personalCenter"]
// 主题色 // 主题色
export let themeColor = { export let themeColor = {
"--main-color": "#ffffff", "--main-color": "#ffffff",
"--minor-color": "#ffffff" "--minor-color": "#ffffff"
} }
// 获取link 中页面地址(link兼容 有object或者string) // 获取link 中页面地址(link兼容 有object或者string)
export function getUrlofLink(data) { export function getUrlofLink(data) {
return data.link return data.link.split('?')[0]
}
export function getUrlofQuery(data) {
return data.link.split('?')[1] || ''
} }
// 全局跳转 data:link数据 option:是否为底部栏触发 // 全局跳转 data:link数据 option:是否为底部栏触发
export function $themeToLink(data, option) { export function $themeToLink(data, option) {
let app = getApp(); let app = getApp();
let type = data.type; let type = data.type;
console.log('299999',data,noLoginListPath)
// 点击底部栏-- // 登录拦截和底部导航栏拦截(非功能项)
if (type!=2) { if (type != 2) {
// 登录拦截 // 登录拦截
let parseLink = getUrlofLink(data); let parseLink = getUrlofLink(data);
let aa=noLoginListPath.includes(parseLink) || parseLink.substr(0,7)=="/goods/" let aa = noLoginListPath.includes(parseLink) || parseLink.substr(0, 7) == "/goods/" || parseLink.includes('/brandTopics');
console.log(parseLink,aa,'parseLinkparseLinkparseLink',parseLink,noLoginListPath) console.log(noLoginListPath.includes(parseLink),'3535')
if (!aa && !wx.getStorageSync("sessionid")) { if (!aa && !wx.getStorageSync("sessionid")) {
let url = `/pages/login/main?back=${parseLink}`; let url = `/pages/login/main?back=${parseLink}`;
wx.navigateTo({url}); wx.navigateTo({ url });
return return
} }
//判断是否市跳转到tabbar页面 替换首页位置 //判断是否市跳转到tabbar页面 替换首页位置
let isTabbarIndex = checkTabbarPage(parseLink); let isTabbarIndex = checkTabbarPage(parseLink);
console.log('44',isTabbarIndex) if (isTabbarIndex >= 0) {
if (isTabbarIndex>=0) { if(!containFooterPage.includes(parseLink)){
toPage(data)
return
}
isTabbarIndex = isTabbarIndex == 0 ? checkTabbarPage('/') : isTabbarIndex isTabbarIndex = isTabbarIndex == 0 ? checkTabbarPage('/') : isTabbarIndex
wx.switchTab({ wx.switchTab({
url: parseLink == '/' ? '/pages/home/main' : `/pages/tabBar${isTabbarIndex}/main`, url: parseLink == '/' ? '/pages/home/main' : `/pages/tabBar${isTabbarIndex}/main`,
}) })
return return
} }
// console.log(option, data,'---',parseLink == '/' ? '/pages/home/main' : `/pages/tabBar${isTabbarIndex}/main`)
// return
} }
...@@ -110,20 +111,19 @@ export function $themeToLink(data, option) { ...@@ -110,20 +111,19 @@ export function $themeToLink(data, option) {
} }
} }
export function $themeAddToCard(item, callback) { export function $themeAddToCard(item, callback) {
let app = getApp();
let errorMsg = ""; let errorMsg = "";
if (item.productNature == 5) { if (item.productNature == 5) {
errorMsg="电子卡券不可加入购物车"; errorMsg = "电子卡券不可加入购物车";
} }
if (item.productNature == 3) { if (item.productNature == 3) {
errorMsg="会员卡不可加入购物车"; errorMsg = "会员卡不可加入购物车";
} }
if (item.productNature == 2) { if (item.productNature == 2) {
errorMsg="虚拟商品不可加入购物车"; errorMsg = "虚拟商品不可加入购物车";
} }
if (errorMsg) { if (errorMsg) {
wx.showToast({ wx.showToast({
title:errorMsg, title: errorMsg,
icon: 'none', icon: 'none',
}); });
} }
...@@ -145,21 +145,20 @@ function toPage(backPath, backParams = "") { ...@@ -145,21 +145,20 @@ function toPage(backPath, backParams = "") {
}); });
} }
// check 链接是否为底部导航栏页面 返回索引 // check 链接是否为底部导航栏页面 返回索引
export function checkTabbarPage(link) { export function checkTabbarPage(link) {
let app = getApp() let app = getApp()
if (!app.globalData.footerVal) return -1 if (!app.globalData.footerVal) return -1
let footerVal = app.globalData.footerVal.componentData.list; let footerVal = app.globalData.footerVal.componentData.list;
let isFooter = footerVal.findIndex(item => { let isFooter = footerVal.findIndex(item => {
return item.link.link == link return getUrlofLink(item.link) == link.split('?')[0]
}) })
return isFooter return isFooter
} }
// 当前底部栏选中项 // 当前底部栏选中项
export function setTabBarActive(data) { export function setTabBarActive(data) {
console.log(this, 'this', data) console.log(data,'sssssssssss',this.$mp.page.getTabBar(),data)
if (data < 0 || !this.$mp.page) return if (data < 0 || !this.$mp.page) return
if (typeof this.$mp.page.getTabBar === 'function' && if (typeof this.$mp.page.getTabBar === 'function' &&
this.$mp.page.getTabBar()) { this.$mp.page.getTabBar()) {
...@@ -173,7 +172,7 @@ export function setTabBarActive(data) { ...@@ -173,7 +172,7 @@ export function setTabBarActive(data) {
// 遍历所有组件有显示条件的id 是否包含地区导航组件 // 遍历所有组件有显示条件的id 是否包含地区导航组件
export function checkShowConditionIds(list) { export function checkShowConditionIds(list) {
let allCondition = []; let allCondition = [];
let isAreaNavigation=false; let isAreaNavigation = false;
list.forEach(element => { list.forEach(element => {
pollCondition(element) pollCondition(element)
}); });
...@@ -199,16 +198,16 @@ export function checkShowConditionIds(list) { ...@@ -199,16 +198,16 @@ export function checkShowConditionIds(list) {
} }
// 有地区导航组件 // 有地区导航组件
if (object.componentCode == 'area-navigation') { if (object.componentCode == 'area-navigation') {
isAreaNavigation=true isAreaNavigation = true
} }
} }
} }
return { return {
allCondition:[...new Set(allCondition)], allCondition: [...new Set(allCondition)],
isAreaNavigation isAreaNavigation
} }
} }
export function $themeArticleLike(item, callback){ export function $themeArticleLike(item, callback) {
let query = { articleId: item.id }; let query = { articleId: item.id };
classificationApi.addLike(query).then(res => { classificationApi.addLike(query).then(res => {
if (res.data.code == "200") { if (res.data.code == "200") {
...@@ -218,7 +217,6 @@ export function $themeArticleLike(item, callback){ ...@@ -218,7 +217,6 @@ export function $themeArticleLike(item, callback){
callback("false"); callback("false");
} }
} else { } else {
Toast(res.data.msg);
} }
}); });
} }
\ No newline at end of file
/* Logo 字体 */
@font-face {
font-family: "iconfont logo";
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834');
src: url('https://at.alicdn.com/t/font_985780_km7mi63cihi.eot?t=1545807318834#iefix') format('embedded-opentype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.woff?t=1545807318834') format('woff'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.ttf?t=1545807318834') format('truetype'),
url('https://at.alicdn.com/t/font_985780_km7mi63cihi.svg?t=1545807318834#iconfont') format('svg');
}
.logo {
font-family: "iconfont logo";
font-size: 160px;
font-style: normal;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
/* tabs */
.nav-tabs {
position: relative;
}
.nav-tabs .nav-more {
position: absolute;
right: 0;
bottom: 0;
height: 42px;
line-height: 42px;
color: #666;
}
#tabs {
border-bottom: 1px solid #eee;
}
#tabs li {
cursor: pointer;
width: 100px;
height: 40px;
line-height: 40px;
text-align: center;
font-size: 16px;
border-bottom: 2px solid transparent;
position: relative;
z-index: 1;
margin-bottom: -1px;
color: #666;
}
#tabs .active {
border-bottom-color: #f00;
color: #222;
}
.tab-container .content {
display: none;
}
/* 页面布局 */
.main {
padding: 30px 100px;
width: 960px;
margin: 0 auto;
}
.main .logo {
color: #333;
text-align: left;
margin-bottom: 30px;
line-height: 1;
height: 110px;
margin-top: -50px;
overflow: hidden;
*zoom: 1;
}
.main .logo a {
font-size: 160px;
color: #333;
}
.helps {
margin-top: 40px;
}
.helps pre {
padding: 20px;
margin: 10px 0;
border: solid 1px #e7e1cd;
background-color: #fffdef;
overflow: auto;
}
.icon_lists {
width: 100% !important;
overflow: hidden;
*zoom: 1;
}
.icon_lists li {
width: 100px;
margin-bottom: 10px;
margin-right: 20px;
text-align: center;
list-style: none !important;
cursor: default;
}
.icon_lists li .code-name {
line-height: 1.2;
}
.icon_lists .icon {
display: block;
height: 100px;
line-height: 100px;
font-size: 42px;
margin: 10px auto;
color: #333;
-webkit-transition: font-size 0.25s linear, width 0.25s linear;
-moz-transition: font-size 0.25s linear, width 0.25s linear;
transition: font-size 0.25s linear, width 0.25s linear;
}
.icon_lists .icon:hover {
font-size: 100px;
}
.icon_lists .svg-icon {
/* 通过设置 font-size 来改变图标大小 */
width: 1em;
/* 图标和文字相邻时,垂直对齐 */
vertical-align: -0.15em;
/* 通过设置 color 来改变 SVG 的颜色/fill */
fill: currentColor;
/* path 和 stroke 溢出 viewBox 部分在 IE 下会显示
normalize.css 中也包含这行 */
overflow: hidden;
}
.icon_lists li .name,
.icon_lists li .code-name {
color: #666;
}
/* markdown 样式 */
.markdown {
color: #666;
font-size: 14px;
line-height: 1.8;
}
.highlight {
line-height: 1.5;
}
.markdown img {
vertical-align: middle;
max-width: 100%;
}
.markdown h1 {
color: #404040;
font-weight: 500;
line-height: 40px;
margin-bottom: 24px;
}
.markdown h2,
.markdown h3,
.markdown h4,
.markdown h5,
.markdown h6 {
color: #404040;
margin: 1.6em 0 0.6em 0;
font-weight: 500;
clear: both;
}
.markdown h1 {
font-size: 28px;
}
.markdown h2 {
font-size: 22px;
}
.markdown h3 {
font-size: 16px;
}
.markdown h4 {
font-size: 14px;
}
.markdown h5 {
font-size: 12px;
}
.markdown h6 {
font-size: 12px;
}
.markdown hr {
height: 1px;
border: 0;
background: #e9e9e9;
margin: 16px 0;
clear: both;
}
.markdown p {
margin: 1em 0;
}
.markdown>p,
.markdown>blockquote,
.markdown>.highlight,
.markdown>ol,
.markdown>ul {
width: 80%;
}
.markdown ul>li {
list-style: circle;
}
.markdown>ul li,
.markdown blockquote ul>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown>ul li p,
.markdown>ol li p {
margin: 0.6em 0;
}
.markdown ol>li {
list-style: decimal;
}
.markdown>ol li,
.markdown blockquote ol>li {
margin-left: 20px;
padding-left: 4px;
}
.markdown code {
margin: 0 3px;
padding: 0 5px;
background: #eee;
border-radius: 3px;
}
.markdown strong,
.markdown b {
font-weight: 600;
}
.markdown>table {
border-collapse: collapse;
border-spacing: 0px;
empty-cells: show;
border: 1px solid #e9e9e9;
width: 95%;
margin-bottom: 24px;
}
.markdown>table th {
white-space: nowrap;
color: #333;
font-weight: 600;
}
.markdown>table th,
.markdown>table td {
border: 1px solid #e9e9e9;
padding: 8px 16px;
text-align: left;
}
.markdown>table th {
background: #F7F7F7;
}
.markdown blockquote {
font-size: 90%;
color: #999;
border-left: 4px solid #e9e9e9;
padding-left: 0.8em;
margin: 1em 0;
}
.markdown blockquote p {
margin: 0;
}
.markdown .anchor {
opacity: 0;
transition: opacity 0.3s ease;
margin-left: 8px;
}
.markdown .waiting {
color: #ccc;
}
.markdown h1:hover .anchor,
.markdown h2:hover .anchor,
.markdown h3:hover .anchor,
.markdown h4:hover .anchor,
.markdown h5:hover .anchor,
.markdown h6:hover .anchor {
opacity: 1;
display: inline-block;
}
.markdown>br,
.markdown>p>br {
clear: both;
}
.hljs {
display: block;
background: white;
padding: 0.5em;
color: #333333;
overflow-x: auto;
}
.hljs-comment,
.hljs-meta {
color: #969896;
}
.hljs-string,
.hljs-variable,
.hljs-template-variable,
.hljs-strong,
.hljs-emphasis,
.hljs-quote {
color: #df5000;
}
.hljs-keyword,
.hljs-selector-tag,
.hljs-type {
color: #a71d5d;
}
.hljs-literal,
.hljs-symbol,
.hljs-bullet,
.hljs-attribute {
color: #0086b3;
}
.hljs-section,
.hljs-name {
color: #63a35c;
}
.hljs-tag {
color: #333333;
}
.hljs-title,
.hljs-attr,
.hljs-selector-id,
.hljs-selector-class,
.hljs-selector-attr,
.hljs-selector-pseudo {
color: #795da3;
}
.hljs-addition {
color: #55a532;
background-color: #eaffea;
}
.hljs-deletion {
color: #bd2c00;
background-color: #ffecec;
}
.hljs-link {
text-decoration: underline;
}
/* 代码高亮 */
/* PrismJS 1.15.0
https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript */
/**
* prism.js default theme for JavaScript, CSS and HTML
* Based on dabblet (http://dabblet.com)
* @author Lea Verou
*/
code[class*="language-"],
pre[class*="language-"] {
color: black;
background: none;
text-shadow: 0 1px white;
font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace;
text-align: left;
white-space: pre;
word-spacing: normal;
word-break: normal;
word-wrap: normal;
line-height: 1.5;
-moz-tab-size: 4;
-o-tab-size: 4;
tab-size: 4;
-webkit-hyphens: none;
-moz-hyphens: none;
-ms-hyphens: none;
hyphens: none;
}
pre[class*="language-"]::-moz-selection,
pre[class*="language-"] ::-moz-selection,
code[class*="language-"]::-moz-selection,
code[class*="language-"] ::-moz-selection {
text-shadow: none;
background: #b3d4fc;
}
pre[class*="language-"]::selection,
pre[class*="language-"] ::selection,
code[class*="language-"]::selection,
code[class*="language-"] ::selection {
text-shadow: none;
background: #b3d4fc;
}
@media print {
code[class*="language-"],
pre[class*="language-"] {
text-shadow: none;
}
}
/* Code blocks */
pre[class*="language-"] {
padding: 1em;
margin: .5em 0;
overflow: auto;
}
:not(pre)>code[class*="language-"],
pre[class*="language-"] {
background: #f5f2f0;
}
/* Inline code */
:not(pre)>code[class*="language-"] {
padding: .1em;
border-radius: .3em;
white-space: normal;
}
.token.comment,
.token.prolog,
.token.doctype,
.token.cdata {
color: slategray;
}
.token.punctuation {
color: #999;
}
.namespace {
opacity: .7;
}
.token.property,
.token.tag,
.token.boolean,
.token.number,
.token.constant,
.token.symbol,
.token.deleted {
color: #905;
}
.token.selector,
.token.attr-name,
.token.string,
.token.char,
.token.builtin,
.token.inserted {
color: #690;
}
.token.operator,
.token.entity,
.token.url,
.language-css .token.string,
.style .token.string {
color: #9a6e3a;
background: hsla(0, 0%, 100%, .5);
}
.token.atrule,
.token.attr-value,
.token.keyword {
color: #07a;
}
.token.function,
.token.class-name {
color: #DD4A68;
}
.token.regex,
.token.important,
.token.variable {
color: #e90;
}
.token.important,
.token.bold {
font-weight: bold;
}
.token.italic {
font-style: italic;
}
.token.entity {
cursor: help;
}
const app = getApp();
const { goodsApi, DFSImg, $themeToLink, $themeAddToCard } = app;
const componentOptions = {
// 组件选项
options: {
multipleSlots: true
},
behaviors: [],
properties: {
datas: {
type: Object
},
items: {
type: Object
},
indexs: {
type: Number
}
},
// 组件数据
data: {
isPageHidden: false, // 页面是否处于隐藏状态
timeData: {}
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {},
getSaleTime(val) {
return new Date(val.replace(/-/g, "/")).getTime() - new Date().getTime();
},
showVipPrice(index) {
// 索引 0 显示价格 1显示名称
let showFlag = false;
let vipPrice = this.items["minPriceAfterRecommendedCardPriceTable"];
if (vipPrice && Number(vipPrice) < Number(this.items["minPrice"])) {
showFlag = true;
}
console.log(showFlag, "------------760");
return showFlag;
},
showVipTag(index) {
// 索引 0 显示价格 1显示名称
let showFlag = false;
let vipPrice = this.items["minPriceAfterRecommendedCardPriceTable"];
let showTag = this.items["recommendedCardMinPricePriceTableName"];
if (
vipPrice &&
showTag &&
Number(vipPrice) <= Number(this.items["minPrice"])
) {
showFlag = true;
}
return showFlag;
},
onChange(e) {
this.setData({ timeData: e.detail });
},
onclickProduct() {
let { goodsType } = this.data.datas.componentData;
let {
productId,
terminalProductId,
terminalGoodsMixId
} = this.data.items;
let linkVal = "";
if (goodsType == 0) {
linkVal = `/goods/${productId}?terminalProductId=${terminalProductId}`;
} else if (goodsType == 1) {
linkVal = `/pointShop/goodsDetail?productId${productId}&terminalProductId=${terminalProductId}&terminalGoodsMixId=${terminalGoodsMixId}`;
}
$themeToLink({
type: 1,
link: linkVal
});
},
onclickBuynow() {
let { btnType } = this.data.datas.componentData;
let {
minProductGoodsMixid,
minProductGoodsId,
minGoodsId
} = this.data.items;
let linkVal = "";
if (btnType < 6) {
// 加入购物车
console.log("加入购物车");
$themeAddToCard(this.data.items);
} else {
// 进入确认订单
linkVal = `/order/orderConfirm?productGoodsMixId=${minProductGoodsMixid}&productGoodsId=${minProductGoodsId}&goodsId=${minGoodsId}&qty=1&goodsString=null&source=3`;
}
console.log(linkVal, "-------90");
$themeToLink({ type: 1, link: linkVal });
},
toMerchants() {
let { orgId } = this.data.items;
$themeToLink({ type: 1, link: `/merchantsDetail/${orgId}` });
},
},
// 组件生命周期
lifetimes: {
created() {},
attached() {
this.init();
},
ready() {},
moved() {},
detached() {}
},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
// 页面被展示
show() {
const { isPageHidden } = this.data;
// show事件发生前,页面不是处于隐藏状态时
if (!isPageHidden) {
return;
}
// 重新执行定时器等操作
},
// 页面被隐藏
hide() {
this.setData({
isPageHidden: true
});
// 清除定时器等操作
},
// 页面尺寸变化时
resize() {}
}
};
Component(componentOptions)
{ {
"component": true, "component": true,
"usingComponents": { "usingComponents": {
"van-icon": "../icon/index" "van-count-down":"/static/vant/count-down/index"
} }
} }
<!-- 商品列表item -->
<view
class="goodsItem {{datas.componentData.style==='rowList'?'goodsRowList':''}} {{datas.componentData.style==='heap'?'goodsRowList goodsHeapItem':''}}"
style="--proGap2:{{datas.componentData.proGap*2}}rpx;"
bindtap="onclickProduct"
>
<view class="goods-item-child {{datas.componentData['borderColorShow']?'goods-item-child-bd':''}}" style="border-radius:{{datas.componentData.borderRadius}}em;--border_color:{{datas.componentData['borderColor']}};box-shadow:{{datas.componentData['cardShadow']?'0rpx 0rpx 10rpx '+datas.componentData['cardShadowSize']*2+'rpx #ccc':''}};">
<!-- 商品图片 -->
<view class="imgBox" style="background-color:{{datas.componentData['backgroundColorShow']?datas.componentData['backgroundColor']:''}}">
<view
class="goodsPicture"
wx:if="{{items!=null}}"
style="padding:{{datas.componentData.imgSize}}"
>
<!-- 显示拼团数 -->
<view class="have-group" wx:if="{{datas.componentData['haveGroupShow']&& (items && items['groupBuyFlag'] == '1')}}">{{items.haveGroupNum?items.haveGroupNum:0}}人已团</view>
<!-- 商品角标 -->
<view
class="angleSign"
style="width:{{datas.componentData.angleSignSize}}%;height:{{datas.componentData.angleSignSize}}%;"
wx:if="{{datas.componentData['angleSign'] && datas.componentData['angleSignImg']}}"
>
<image mode="widthFix" src="{{datas.componentData['angleSignImg']}}" />
</view>
<!-- 商品主图 -->
<image
lazy-load
mode="{{datas.componentData.style==='rowList' || datas.componentData.style==='heap'?'aspectFit':'widthFix'}}"
class="productImgUrl"
wx:if="{{datas.componentData.goodsImgType == 1}}"
src="{{items.productImgUrl}}"
/>
<image
lazy-load
mode="{{datas.componentData.style==='rowList' || datas.componentData.style==='heap'?'aspectFit':'widthFix'}}"
class="productImgUrl"
wx:else
src="{{items.coverImage}}"
/>
<!-- 售罄遮罩 -->
<view class="whiteBg" wx:if="{{items&&items.oversoldFlag==0&&items.totalQty-0<=0}}">
<view class="cover">
<image mode="aspectFit" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/f254fe62-6dda-46f6-a2f4-a7b2aa0474df.png" />
</view>
</view>
</view>
</view>
<!-- 商品详情 -->
<view class="info" style="text-align:{{datas.componentData['initcharAlign']}};">
<view class="info-top flex">
<view
class="name"
wx:if="{{datas.componentData['nameShow']}}"
style="color:{{datas.componentData['nameColor']}};font-weight:{{datas.componentData['nameFontWeight']}};font-size:{{datas.componentData['nameFontSize']}}em;height:2.8em;"
>
{{items!=null?items['productName']:'名称'}}
</view>
<view
class="follower-wrap"
wx:if="{{datas.componentData['followerShow']}}"
style="padding-left:{{datas.componentData.columnNum == 3 ? '0' : '20rpx'}}"
>
<view class="follower-num" style="color:{{datas.componentData['followerColor']?datas.componentData['followerColor']:'#ff9933'}};">
{{items!=null? items['totalCollectionCount']:0}}
</view>
<view class="follower-text">关注人数</view>
</view>
</view>
<!-- 已售 -->
<view class="Sold">
<text wx:if="{{datas.componentData['alSaleShow']}}">已售{{items!=null ? items['totalSalesCount'] :0}}件</text>
<text wx:if="{{datas.componentData['alSaleShow'] && datas.componentData['collectShow']}}">/</text>
<text wx:if="{{datas.componentData['collectShow']}}">剩余{{items!=null && items['qty']!=undefined ? (items['qty'] > 0 ? items['qty']: items.oversoldFlag==1?'数量充足':'数量不足') : ''}}<text wx:if="{{items!=null && (items['qty'] ? items['qty'] >= 0 : items['saleQty'] >= 0) && items.oversoldFlag!=1}}">件</text>
</text>
</view>
<!-- 标签 -->
<view class="marketing flex" wx:if="{{datas.componentData['marketingTag']&&datas.componentData['marketingStyle']==0&&items.marketingTag}}">
<view
class="item"
wx:for="{{items.marketingTag}}"
wx:key="index"
>
{{item.label}}
</view>
</view>
<!-- 底部 -->
<view class="bottom" wx:if="{{datas.componentData['goodsType'] !=1}}">
<!-- 价格 -->
<view class="priceItem flex">
<view
class="price flex"
style="color:{{datas.componentData['priceColor']}};font-size:{{datas.componentData['priceFontSize']}}em;"
wx:if="{{datas.componentData['priceShow']}}"
>
<text wx:if="{{items!=null && (items['groupBuyFlag'] == '0' ||items['groupBuyFlag'] == '1')}}">
¥{{items!=null ? items['goodsMinPrice']:0}}
</text>
<text style="font-size:24rpx;color:#999;text-decoration:line-through;" wx:if="{{items!=null&&datas.componentData['priceMarking']&&items['minGoodsSuggestedRetailPrice']&&(items['goodsMinPrice']-0<items['minGoodsSuggestedRetailPrice']-0)&&datas.componentData['columnNum']<3}}">
¥{{items['minGoodsSuggestedRetailPrice']}}
</text>
</view>
<view class="vipPrice2 flex" wx:if="{{datas.componentData.vipPrice}}">
<view class="left" wx:if="{{items.showVipPrice==true}}">
¥{{items['minPriceAfterRecommendedCardPriceTable']}}
</view>
<view class="vipIcon line-clamp1" wx:if="{{items.showVipTag==true}}">
{{items["recommendedCardMinPricePriceTableName"]}}
</view>
</view>
</view>
<!-- 收益样式一 -->
<block wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}">
<view
class="showCommission"
style="color:{{datas.componentData.commissionColor}};border-color:{{datas.componentData.commissionColor}};"
wx:if="{{datas.componentData.commissionStyle==0}}"
>
<view class="commission-box" style="background-color:{{datas.componentData.commissionBgColor}}">
<text>收益</text>
<text>¥{{items['minProductGoodsCommission']}}</text>
</view>
</view>
</block>
<view wx:if="{{(items&&items.totalQty-0>0||items&&items.oversoldFlag==1)&& datas.componentData['paynow']}}" catchtap="onclickBuynow">
<text wx:if="{{datas.componentData.btnType<6}}" style="color:{{datas.componentData.btnColor}}" class="buy-now-icon iconfont-common {{datas.componentData.btnIcon}}"></text>
<view
wx:else
class="buy-now"
style="background-color:{{datas.componentData.btnColor}};font-size:24rpx;"
>
{{datas.componentData.btnTest}}
</view>
</view>
</view>
<!-- 底部展示标签列表 -->
<block wx:if="{{items!=null}}">
<view class="marketing flex" wx:if="{{datas.componentData.marketingTag&&datas.componentData.marketingStyle==1&&items.marketingTag}}">
<view
class="item"
wx:for="{{items.marketingTag}}"
wx:key="index"
>
{{item.label}}
</view>
</view>
</block>
<!-- 收益样式二 -->
<block wx:if="{{items!=null&&items['minProductGoodsCommission']&&items['minProductGoodsCommission']-0>0.01}}">
<view
class="showCommissionTwo flex"
wx:if="{{datas.componentData.commissionStyle==1}}"
style="color:{{datas.componentData.commissionColor}};border-color:{{datas.componentData.commissionColor}};"
>
<view class="commission-box" style="background-color:{{datas.componentData.commissionBgColor}}">
<text class="iconfont-common common-iconfenxiang"></text>
<text style="padding:0 8rpx;">赚¥</text>
<text style="font-size:32rpx;">{{items['minProductGoodsCommission']}}</text>
</view>
</view>
</block>
</view>
</view>
</view>
@import "/static/font/common_icon.wxss";
.flex{
display: flex;
}
.goods-item-child-bd{
border: 1px solid var(--border_color);
}
image{
width: 100%;
display: block;
}
.goodsItem{
margin-bottom: var(--proGap2);
white-space: initial;
}
.goods-item-child {
position: relative;
overflow: hidden;
background: #fff;
}
.goodsRowList .goods-item-child{
display: flex;
align-items: flex-start;
}
.goodsRowList .goods-item-child .imgBox{
width: auto;
width: 180rpx;
height: 180rpx;
margin: 20rpx;
overflow: hidden;
border-radius: 12rpx;
-webkit-border-radius: 12rpx;
-moz-border-radius: 12rpx;
-ms-border-radius: 12rpx;
-o-border-radius: 12rpx;
}
.goodsRowList .goods-item-child .info{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-around;
}
.goodsHeapItem{
width: 100%;
}
.merchantsEntrance{
padding: 8rpx 20rpx;
}
.merchantsEntrance .left{
align-items: center;
}
.merchantsEntrance .left .logo{
width: 52rpx;
height: 52rpx;
border-radius: 8rpx;
-webkit-border-radius: 8rpx;
-moz-border-radius: 8rpx;
-ms-border-radius: 8rpx;
-o-border-radius: 8rpx;
overflow: hidden;
background: #f5f5f5;
margin-right: 20rpx;
}
.imgBox{
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
}
.goodsPicture{
width: 100%;
height: 100%;
position: relative;
box-sizing: border-box;
}
.goodsPicture .have-group{
position: absolute;
bottom: 20rpx;
left: 12rpx;
padding: 8rpx 16rpx;
background-color: rgba(0,0,0,.6);
color: white;
font-size: 24rpx;
border-radius: 8rpx;
-webkit-border-radius: 8rpx;
-moz-border-radius: 8rpx;
-ms-border-radius: 8rpx;
-o-border-radius: 8rpx;
}
.goodsPicture .productImgUrl{
width: 100%;
height: 100%;
}
.goodsPicture .saleWay{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
display: flex;
justify-content: center;
z-index: 2;
color: #fff;
}
.goodsPicture .saleWay .saleWayBg{
background: var(--main-color);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
opacity: 0.5;
}
.goodsPicture .saleWay .saleTime{
position: relative;
z-index: 2;
padding: 4rpx 0;
}
.goodsPicture .saleWay .saleTime text{
color: #fff;
}
.goodsPicture .angleSign{
position: absolute;
top: 0;
left: 0;
}
.whiteBg {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(#fff, 0.7);
}
.whiteBg .cover {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-radius: 50%;
background-size: cover;
}
.whiteBg .cover img {
width: 100%;
height: 100%;
object-fit: contain;
}
.info{
padding: 10rpx 20rpx 24rpx;
position: relative;
background-color: white;
}
.info .info-top{
overflow: hidden;
justify-content: space-between;
}
.info .name{
flex: 1;
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
line-height: 1.4em;
position: relative;
}
.info .follower-wrap{
position: relative;
font-size: 0.8em;
color: #999;
text-align: center;
height: 70rpx;
border-left: 1px solid #999;
}
.info .follower-wrap .follower-num{
text-align: center;
font-size: 1em;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.info .follower-wrap .follower-text{
color: #999;
font-size: 0.7em;
text-align: center;
width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.vipPrice1{
align-items: flex-end;
margin-top: 12rpx;
font-size: 24rpx;
}
.vipPrice1 .vipIcon{
min-width: 64rpx;
padding: 2rpx 4rpx;
height: 28rpx;
background: #333;
font-size: 20rpx;
line-height: 28rpx;
text-align: center;
color: #d7c7a1;
border-top-left-radius: 4rpx;
border-bottom-left-radius: 12rpx;
}
.vipPrice1 .right{
height: 28rpx;
color: #333;
font-weight: bold;
background: linear-gradient( 227deg, rgba(212, 195, 142, 1), rgba(252, 232, 162, 1) );
border-radius: 0rpx 12rpx 12rpx 0rpx;
font-size: 20rpx;
text-align: center;
padding: 0 8rpx 0 4rpx;
-webkit-border-radius: 0rpx 12rpx 12rpx 0rpx;
-moz-border-radius: 0rpx 12rpx 12rpx 0rpx;
-ms-border-radius: 0rpx 12rpx 12rpx 0rpx;
-o-border-radius: 0rpx 12rpx 12rpx 0rpx;
}
.priceItem {
align-items: flex-end;
}
.priceItem .price{
align-items: center;
}
.vipPrice2{
align-items: flex-end;
margin-top: 12rpx;
font-size: 24rpx;
}
.vipPrice2 .left{
color: #333;
font-weight: bold;
margin-left: 8rpx;
}
.vipPrice2 .vipIcon{
margin-left: 8rpx;
min-width: 64rpx;
padding: 2rpx 8rpx;
height: 28rpx;
background: #333;
font-size: 20rpx;
line-height: 28rpx;
text-align: center;
color: #d7c7a1;
border-radius: 12rpx;
border-top-left-radius: 2rpx;
-webkit-border-radius: 12rpx;
-moz-border-radius: 12rpx;
-ms-border-radius: 12rpx;
-o-border-radius: 12rpx;
}
.Sold{
overflow: hidden;
color: #999;
}
.Sold text{
font-size: 24rpx;
}
.buy-now-icon{
color: var(--main-color);
}
.buy-now {
color: #ffffff;
position: absolute;
right: 0;
bottom: 0;
border-radius: 30rpx;
background-color: var(--main-color);
width: 140rpx;
white-space: nowrap;
padding: 8rpx 20rpx;
display: flex;
justify-content: center;
align-items: center;
-webkit-border-radius: 30rpx;
-moz-border-radius: 30rpx;
-ms-border-radius: 30rpx;
-o-border-radius: 30rpx;
}
.buy-now-icon {
position: absolute;
right: 0;
bottom: 0;
font-size: 36rpx;
}
.showCommission {
width: auto;
display: inline-block;
margin-top: 8rpx;
border: 1px solid transparent;
border-radius: 12rpx;
font-size: 10px;
overflow: hidden;
-webkit-border-radius: 12rpx;
-moz-border-radius: 12rpx;
-ms-border-radius: 12rpx;
-o-border-radius: 12rpx;
}
.showCommission .commission-box {
box-sizing: border-box;
padding: 0 10rpx;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.showCommissionTwo {
align-items: center;
justify-content: center;
margin-top: 16rpx;
width: 100%;
height: 52rpx;
font-size: 24rpx;
border: 1px solid transparent;
border-radius: 26px;
overflow: hidden;
}
.showCommissionTwo .commission-box {
width: 100%;
height: 100%;
padding-left: 20rpx;
display: flex;
justify-content: center;
align-items: center;
}
.showCommissionTwo i {
font-size: 28rpx;
margin-right: 8rpx;
}
.marketing {
align-items: center;
flex-wrap: wrap;
}
.marketing .item {
margin-top: 8rpx;
margin-right: 8rpx;
font-size: 20rpx;
padding: 0 12rpx;
border: 2rpx solid #ff5500;
color: #ff5500;
border-radius: 40rpx;
-webkit-border-radius: 40rpx;
-moz-border-radius: 40rpx;
-ms-border-radius: 40rpx;
-o-border-radius: 40rpx;
}
.bottom {
position: relative;
}
.price {
font-weight: 600;
margin-top: 12rpx;
}
\ No newline at end of file
import TouchEvent from "./utils/touchEvent";
const componentOptions = {
// 组件选项
options: {
multipleSlots: true
},
behaviors: [],
properties: {
datas: {
type:Object
},
goodsList: {
type:Array
}
},
// 组件数据
data: {
isPageHidden: false, // 页面是否处于隐藏状态
isLoading: false,
swiperCurIndex: 0,
slideClass: "",
lockSwipe: false
},
// 数据监听器
observers: {},
// 组件生命周期
lifetimes: {
created() {
new TouchEvent(this, "touchCard", {
swipe: evt => {
//在touch结束触发,evt.direction代表滑动的方向 ['Up','Right','Down','Left']
if (evt.direction === "Left") this.next(evt);
if (evt.direction === "Right") this.prev(evt);
}
});
},
attached() {}
},
// 组件方法
methods: {
next(e) {
if (this.data.lockSwipe) return;
this.data.lockSwipe = true;
if (-this.data.swiperCurIndex >= this.data.goodsList.length - 1) {
return (this.data.lockSwipe = false);
}
const index = e.currentTarget.dataset["index"];
this.setData(
{ ["goodsList[" + index + "].slideClass"]: " ani-slide-up" },
() => {
this.setData({
swiperCurIndex: --this.data.swiperCurIndex
});
}
);
setTimeout(() => {
this.data.lockSwipe = false;
this.setData({
["goodsList[" + index + "].slideClass"]: ""
});
}, 590);
},
prev(e) {
const index = e.currentTarget.dataset["index"] - 1;
if (this.data.lockSwipe || index < 0) return;
this.data.lockSwipe = true;
this.setData({
["goodsList[" + index + "].slideClass"]: " ani-slide-down",
swiperCurIndex: ++this.data.swiperCurIndex
});
setTimeout(() => {
this.data.lockSwipe = false;
this.setData({
["goodsList[" + index + "].slideClass"]: ""
});
}, 590);
}
},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
// 页面被展示
show() {
const { isPageHidden } = this.data;
// show事件发生前,页面不是处于隐藏状态时
if (!isPageHidden) {
return;
}
// 重新执行定时器等操作
},
// 页面被隐藏
hide() {
this.setData({
isPageHidden: true
});
// 清除定时器等操作
},
// 页面尺寸变化时
resize() {}
}
};
Component(componentOptions);
{ {
"component": true, "component": true,
"usingComponents": { "usingComponents": {
"van-icon": "../icon/index", "goods-item": "../GoodsItem/index"
"van-popup": "../popup/index",
"van-loading": "../loading/index"
} }
} }
<view class="container center">
<view class="card-swiper">
<view
wx:for="{{goodsList}}"
wx:key="index"
data-index="{{index}}"
class="{{'card-swiper-item curdistance' + (swiperCurIndex + index) + (!!item.slideClass? item.slideClass: '')}}"
bindtouchstart="touchCard.start"
bindtouchmove="touchCard.move"
bindtouchend="touchCard.end"
bindtouchcancel="touchCard.cancel"
>
<goods-item
style="width:100%"
datas="{{datas}}"
items="{{goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</view>
</view>
</view>
.container{
width: 100%;
height: 200rpx;
padding: 0 0 20rpx;
}
/**index.wxss**/
.card-swiper{
position: relative;
width: 100%;
height: 100%;
color: #666;
font-size: 28rpx;
}
.card-swiper-item{
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
left: 0;
width: 92%;
transition: all .3s ease-out;
z-index: 0;
display: none;
overflow: hidden;
}
.card-swiper .card-swiper-item.curdistance0{
z-index: 10;
display: flex;
}
.card-swiper .card-swiper-item.curdistance1{
display: flex;
z-index: 9;
transform: scale(.95);
opacity: .7;
left: 40rpx;
}
.card-swiper .card-swiper-item.curdistance2{
display: flex;
z-index: 8;
transform: scale(.9);
opacity: .4;
left: 80rpx;
}
.ani-slide-up{
display: flex;
animation: slideUp .6s ease-out;
z-index: 11;
/* transform: rotate(25deg); */
}
.ani-slide-down{
display: flex;
animation: slideUp .6s ease-in;
animation-direction: reverse;
}
@keyframes slideUp{
0% {
}
70% {
opacity: 1;
}
100% {
transform: translateX(-1000rpx);
opacity: 0;
-webkit-transform: translateX(-1000rpx);
-moz-transform: translateX(-1000rpx);
-ms-transform: translateX(-1000rpx);
-o-transform: translateX(-1000rpx);
}
}
\ No newline at end of file
var defaultOption = {
touchStart: function () { },
touchMove: function () { },
touchEnd: function () { },
touchCancel: function () { },
multipointStart: function () { },
multipointEnd: function () { },
tap: function () { },
doubleTap: function () { },
longTap: function () { },
singleTap: function () { },
rotate: function () { },
pinch: function () { },
pressMove: function () { },
swipe: function () { }
}
export default class YrobotTouch {
constructor(pageOBJ, name, option = {}) {
this.preV = { x: null, y: null };
this.pinchStartLen = null;
this.scale = 1;
this.isDoubleTap = false;
this.delta = null;
this.last = null;
this.now = null;
this.tapTimeout = null;
this.singleTapTimeout = null;
this.longTapTimeout = null;
this.swipeTimeout = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
this.preTapPosition = { x: null, y: null };
this.lastZoom = 1;
this.tempZoom = 1;
try {
if (this._checkBeforeCreate(pageOBJ, name)) {
this._name = name
this._option = { ...defaultOption, ...option }
pageOBJ[name] = this
this._bindFunc(pageOBJ)
}
} catch (error) {
console.error(error)
}
}
_checkBeforeCreate(pageOBJ, name) {
if (!pageOBJ || !name) {
throw new Error('YrobotTouch实例化时,必须传入page对象和引用名')
return false
}
if (pageOBJ[name]) {
throw new Error('YrobotTouch实例化error: ' + name + ' 已经存在page中')
return false
}
return true
}
_bindFunc(pageOBJ) {
let funcNames = ['start', 'move', 'end', 'cancel']
for (let funcName of funcNames)
pageOBJ[this._name + '.' + funcName] = this[funcName].bind(this)
}
start(evt) {
if (!evt.touches) return;
this.now = Date.now();
this.x1 = evt.touches[0].pageX == null ? evt.touches[0].x : evt.touches[0].pageX;
this.y1 = evt.touches[0].pageY == null ? evt.touches[0].y : evt.touches[0].pageY;
this.delta = this.now - (this.last || this.now);
this._option.touchStart(evt);
if (this.preTapPosition.x !== null) {
this.isDoubleTap = (this.delta > 0 && this.delta <= 250 && Math.abs(this.preTapPosition.x - this.x1) < 30 && Math.abs(this.preTapPosition.y - this.y1) < 30);
}
this.preTapPosition.x = this.x1;
this.preTapPosition.y = this.y1;
this.last = this.now;
let preV = this.preV,
len = evt.touches.length;
if (len > 1) {
this._cancelLongTap();
this._cancelSingleTap();
let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
let v = { x: otx - this.x1, y: oty - this.y1 };
preV.x = v.x;
preV.y = v.y;
this.pinchStartLen = getLen(preV);
this._option.multipointStart(evt);
}
this.longTapTimeout = setTimeout(function () {
evt.type = "longTap";
this._option.longTap(evt);
}.bind(this), 750);
}
move(evt) {
if (!evt.touches) return;
let preV = this.preV,
len = evt.touches.length,
currentX = evt.touches[0].pageX == null ? evt.touches[0].x : evt.touches[0].pageX,
currentY = evt.touches[0].pageY == null ? evt.touches[0].y : evt.touches[0].pageY;
this.isDoubleTap = false;
if (len > 1) {
let otx = evt.touches[1].pageX == null ? evt.touches[1].x : evt.touches[1].pageX;
let oty = evt.touches[1].pageY == null ? evt.touches[1].y : evt.touches[1].pageY;
let v = { x: otx - currentX, y: oty - currentY };
if (preV.x !== null) {
if (this.pinchStartLen > 0) {
evt.singleZoom = getLen(v) / this.pinchStartLen;
evt.zoom = evt.singleZoom * this.lastZoom;
this.tempZoom = evt.zoom;
evt.type = "pinch";
this._option.pinch(evt);
}
evt.angle = getRotateAngle(v, preV);
evt.type = "rotate";
this._option.rotate(evt);
}
preV.x = v.x;
preV.y = v.y;
} else {
if (this.x2 !== null) {
evt.deltaX = currentX - this.x2;
evt.deltaY = currentY - this.y2;
} else {
evt.deltaX = 0;
evt.deltaY = 0;
}
this._option.pressMove(evt);
}
this._option.touchMove(evt);
this._cancelLongTap();
this.x2 = currentX;
this.y2 = currentY;
if (len > 1) {
// evt.preventDefault();
}
}
end(evt) {
if (!evt.changedTouches) return;
this._cancelLongTap();
let self = this;
evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2); //在结束钩子都加入方向判断,但触发swipe瞬时必须位移大于30
if (evt.touches.length < 2) {
this.lastZoom = this.tempZoom;
this._option.multipointEnd(evt);
}
this._option.touchEnd(evt);
//swipe
if ((this.x2 && Math.abs(this.x1 - this.x2) > 30) ||
(this.y2 && Math.abs(this.y1 - this.y2) > 30)) {
// evt.direction = this._swipeDirection(this.x1, this.x2, this.y1, this.y2);
this.swipeTimeout = setTimeout(function () {
evt.type = "swipe";
self._option.swipe(evt);
}, 0)
} else {
this.tapTimeout = setTimeout(function () {
evt.type = "tap";
self._option.tap(evt);
// trigger double tap immediately
if (self.isDoubleTap) {
evt.type = "doubleTap";
self._option.doubleTap(evt);
clearTimeout(self.singleTapTimeout);
self.isDoubleTap = false;
}
}, 0)
if (!self.isDoubleTap) {
self.singleTapTimeout = setTimeout(function () {
self._option.singleTap(evt);
}, 250);
}
}
this.preV.x = 0;
this.preV.y = 0;
this.scale = 1;
this.pinchStartLen = null;
this.x1 = this.x2 = this.y1 = this.y2 = null;
}
cancel(evt) {
clearTimeout(this.singleTapTimeout);
clearTimeout(this.tapTimeout);
clearTimeout(this.longTapTimeout);
clearTimeout(this.swipeTimeout);
this._option.touchCancel(evt);
}
_cancelLongTap() {
clearTimeout(this.longTapTimeout);
}
_cancelSingleTap() {
clearTimeout(this.singleTapTimeout);
}
_swipeDirection(x1, x2, y1, y2) {
return Math.abs(x1 - x2) >= Math.abs(y1 - y2) ? (x1 - x2 > 0 ? 'Left' : 'Right') : (y1 - y2 > 0 ? 'Up' : 'Down')
}
destroy() {
if (this.singleTapTimeout) clearTimeout(this.singleTapTimeout);
if (this.tapTimeout) clearTimeout(this.tapTimeout);
if (this.longTapTimeout) clearTimeout(this.longTapTimeout);
if (this.swipeTimeout) clearTimeout(this.swipeTimeout);
this._option.rotate = null;
this._option.touchStart = null;
this._option.multipointStart = null;
this._option.multipointEnd = null;
this._option.pinch = null;
this._option.swipe = null;
this._option.tap = null;
this._option.doubleTap = null;
this._option.longTap = null;
this._option.singleTap = null;
this._option.pressMove = null;
this._option.touchMove = null;
this._option.touchEnd = null;
this._option.touchCancel = null;
this.preV = this.pinchStartLen = this.scale = this.isDoubleTap = this.delta = this.last = this.now = this.tapTimeout = this.singleTapTimeout = this.longTapTimeout = this.swipeTimeout = this.x1 = this.x2 = this.y1 = this.y2 = this.preTapPosition = this.rotate = this.touchStart = this.multipointStart = this.multipointEnd = this.pinch = this.swipe = this.tap = this.doubleTap = this.longTap = this.singleTap = this.pressMove = this.touchMove = this.touchEnd = this.touchCancel = null;
return null;
}
}
function getLen(v) {
return Math.sqrt(v.x * v.x + v.y * v.y);
}
function dot(v1, v2) {
return v1.x * v2.x + v1.y * v2.y;
}
function getAngle(v1, v2) {
let mr = getLen(v1) * getLen(v2);
if (mr === 0) return 0;
let r = dot(v1, v2) / mr;
if (r > 1) r = 1;
return Math.acos(r);
}
function cross(v1, v2) {
return v1.x * v2.y - v2.x * v1.y;
}
function getRotateAngle(v1, v2) {
let angle = getAngle(v1, v2);
if (cross(v1, v2) > 0) {
angle *= -1;
}
return angle * 180 / Math.PI;
}
\ No newline at end of file
import { VantComponent } from '../common/component';
import { button } from '../mixins/button';
import { openType } from '../mixins/open-type';
VantComponent({
mixins: [button, openType],
props: {
show: Boolean,
title: String,
cancelText: String,
description: String,
round: {
type: Boolean,
value: true,
},
zIndex: {
type: Number,
value: 100,
},
actions: {
type: Array,
value: [],
},
overlay: {
type: Boolean,
value: true,
},
closeOnClickOverlay: {
type: Boolean,
value: true,
},
closeOnClickAction: {
type: Boolean,
value: true,
},
safeAreaInsetBottom: {
type: Boolean,
value: true,
},
},
methods: {
onSelect(event) {
const { index } = event.currentTarget.dataset;
const item = this.data.actions[index];
if (item && !item.disabled && !item.loading) {
this.$emit('select', item);
if (this.data.closeOnClickAction) {
this.onClose();
}
}
},
onCancel() {
this.$emit('cancel');
},
onClose() {
this.$emit('close');
},
onClickOverlay() {
this.$emit('click-overlay');
this.onClose();
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<van-popup
show="{{ show }}"
position="bottom"
round="{{ round }}"
z-index="{{ zIndex }}"
overlay="{{ overlay }}"
custom-class="van-action-sheet"
safe-area-inset-bottom="{{ safeAreaInsetBottom }}"
close-on-click-overlay="{{ closeOnClickOverlay }}"
bind:close="onClickOverlay"
>
<view wx:if="{{ title }}" class="van-action-sheet__header">
{{ title }}
<van-icon
name="cross"
custom-class="van-action-sheet__close"
bind:click="onClose"
/>
</view>
<view wx:if="{{ description }}" class="van-action-sheet__description van-hairline--bottom">
{{ description }}
</view>
<view wx:if="{{ actions && actions.length }}">
<!-- button外包一层view,防止actions动态变化,导致渲染时button被打散 -->
<button
wx:for="{{ actions }}"
wx:key="index"
open-type="{{ item.openType }}"
style="{{ item.color ? 'color: ' + item.color : '' }}"
class="{{ utils.bem('action-sheet__item', { disabled: item.disabled || item.loading }) }} {{ item.className || '' }}"
hover-class="van-action-sheet__item--hover"
data-index="{{ index }}"
bind:tap="onSelect"
bindgetuserinfo="bindGetUserInfo"
bindcontact="bindContact"
bindgetphonenumber="bindGetPhoneNumber"
binderror="bindError"
bindlaunchapp="bindLaunchApp"
bindopensetting="bindOpenSetting"
lang="{{ lang }}"
session-from="{{ sessionFrom }}"
send-message-title="{{ sendMessageTitle }}"
send-message-path="{{ sendMessagePath }}"
send-message-img="{{ sendMessageImg }}"
show-message-card="{{ showMessageCard }}"
app-parameter="{{ appParameter }}"
>
<block wx:if="{{ !item.loading }}">
{{ item.name }}
<view wx:if="{{ item.subname }}" class="van-action-sheet__subname" >{{ item.subname }}</view>
</block>
<van-loading wx:else custom-class="van-action-sheet__loading" size="22px" />
</button>
</view>
<slot />
<block wx:if="{{ cancelText }}">
<view class="van-action-sheet__gap" />
<view
class="van-action-sheet__cancel"
hover-class="van-action-sheet__cancel--hover"
hover-stay-time="70"
bind:tap="onCancel"
>
{{ cancelText }}
</view>
</block>
</van-popup>
@import '../common/index.wxss';.van-action-sheet{max-height:90%!important;max-height:var(--action-sheet-max-height,90%)!important;color:#323233;color:var(--action-sheet-item-text-color,#323233)}.van-action-sheet__cancel,.van-action-sheet__item{padding:14px 16px;text-align:center;font-size:16px;font-size:var(--action-sheet-item-font-size,16px);line-height:22px;line-height:var(--action-sheet-item-line-height,22px);background-color:#fff;background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__cancel--hover,.van-action-sheet__item--hover{background-color:#f2f3f5;background-color:var(--active-color,#f2f3f5)}.van-action-sheet__cancel:after,.van-action-sheet__item:after{border-width:0}.van-action-sheet__cancel{color:#646566;color:var(--action-sheet-cancel-text-color,#646566)}.van-action-sheet__gap{display:block;height:8px;height:var(--action-sheet-cancel-padding-top,8px);background-color:#f7f8fa;background-color:var(--action-sheet-cancel-padding-color,#f7f8fa)}.van-action-sheet__item--disabled{color:#c8c9cc;color:var(--action-sheet-item-disabled-text-color,#c8c9cc)}.van-action-sheet__item--disabled.van-action-sheet__item--hover{background-color:#fff;background-color:var(--action-sheet-item-background,#fff)}.van-action-sheet__subname{margin-top:8px;margin-top:var(--padding-xs,8px);font-size:12px;font-size:var(--action-sheet-subname-font-size,12px);color:#969799;color:var(--action-sheet-subname-color,#969799);line-height:20px;line-height:var(--action-sheet-subname-line-height,20px)}.van-action-sheet__header{text-align:center;font-weight:500;font-weight:var(--font-weight-bold,500);font-size:16px;font-size:var(--action-sheet-header-font-size,16px);line-height:48px;line-height:var(--action-sheet-header-height,48px)}.van-action-sheet__description{text-align:center;padding:20px 16px;padding:20px var(--padding-md,16px);color:#969799;color:var(--action-sheet-description-color,#969799);font-size:14px;font-size:var(--action-sheet-description-font-size,14px);line-height:20px;line-height:var(--action-sheet-description-line-height,20px)}.van-action-sheet__close{position:absolute!important;top:0;right:0;line-height:inherit!important;padding:0 16px;padding:var(--action-sheet-close-icon-padding,0 16px);font-size:22px!important;font-size:var(--action-sheet-close-icon-size,22px)!important;color:#c8c9cc;color:var(--action-sheet-close-icon-color,#c8c9cc)}.van-action-sheet__loading{display:-webkit-flex!important;display:flex!important}
\ No newline at end of file
import { VantComponent } from '../common/component';
VantComponent({
field: true,
relation: {
name: 'checkbox',
type: 'descendant',
current: 'checkbox-group',
linked(target) {
this.updateChild(target);
},
},
props: {
max: Number,
value: {
type: Array,
observer: 'updateChildren',
},
disabled: {
type: Boolean,
observer: 'updateChildren',
},
},
methods: {
updateChildren() {
(this.children || []).forEach((child) => this.updateChild(child));
},
updateChild(child) {
const { value, disabled } = this.data;
child.setData({
value: value.indexOf(child.data.name) !== -1,
parentDisabled: disabled,
});
},
},
});
@import '../common/index.wxss';
\ No newline at end of file
import { VantComponent } from '../common/component';
function emit(target, value) {
target.$emit('input', value);
target.$emit('change', value);
}
VantComponent({
field: true,
relation: {
name: 'checkbox-group',
type: 'ancestor',
current: 'checkbox',
},
classes: ['icon-class', 'label-class'],
props: {
value: Boolean,
disabled: Boolean,
useIconSlot: Boolean,
checkedColor: String,
labelPosition: String,
labelDisabled: Boolean,
shape: {
type: String,
value: 'round',
},
iconSize: {
type: null,
value: 20,
},
},
data: {
parentDisabled: false,
},
methods: {
emitChange(value) {
if (this.parent) {
this.setParentValue(this.parent, value);
} else {
emit(this, value);
}
},
toggle() {
const { parentDisabled, disabled, value } = this.data;
if (!disabled && !parentDisabled) {
this.emitChange(!value);
}
},
onClickLabel() {
const { labelDisabled, parentDisabled, disabled, value } = this.data;
if (!disabled && !labelDisabled && !parentDisabled) {
this.emitChange(!value);
}
},
setParentValue(parent, value) {
const parentValue = parent.data.value.slice();
const { name } = this.data;
const { max } = parent.data;
if (value) {
if (max && parentValue.length >= max) {
return;
}
if (parentValue.indexOf(name) === -1) {
parentValue.push(name);
emit(parent, parentValue);
}
} else {
const index = parentValue.indexOf(name);
if (index !== -1) {
parentValue.splice(index, 1);
emit(parent, parentValue);
}
}
},
},
});
<wxs src="../wxs/utils.wxs" module="utils" />
<wxs src="./index.wxs" module="computed" />
<view class="van-checkbox custom-class">
<view class="van-checkbox__icon-wrap" bindtap="toggle">
<slot wx:if="{{ useIconSlot }}" name="icon" />
<van-icon
wx:else
name="success"
size="0.8em"
class="{{ utils.bem('checkbox__icon', [shape, { disabled: disabled || parentDisabled, checked: value }]) }}"
style="{{ computed.iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) }}"
custom-class="icon-class"
custom-style="line-height: 1.25em;"
/>
</view>
<view class="label-class {{ utils.bem('checkbox__label', [labelPosition, { disabled: disabled || parentDisabled }]) }}" bindtap="onClickLabel">
<slot />
</view>
</view>
/* eslint-disable */
var style = require('../wxs/style.wxs');
var addUnit = require('../wxs/add-unit.wxs');
function iconStyle(checkedColor, value, disabled, parentDisabled, iconSize) {
var styles = {
'font-size': addUnit(iconSize),
};
if (checkedColor && value && !disabled && !parentDisabled) {
styles['border-color'] = checkedColor;
styles['background-color'] = checkedColor;
}
return style(styles);
}
module.exports = {
iconStyle: iconStyle,
};
@import '../common/index.wxss';.van-checkbox{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;overflow:hidden;-webkit-user-select:none;user-select:none}.van-checkbox__icon-wrap,.van-checkbox__label{line-height:20px;line-height:var(--checkbox-size,20px)}.van-checkbox__icon-wrap{-webkit-flex:none;flex:none}.van-checkbox__icon{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;box-sizing:border-box;width:1em;height:1em;color:transparent;text-align:center;transition-property:color,border-color,background-color;font-size:20px;font-size:var(--checkbox-size,20px);border:1px solid #c8c9cc;border:1px solid var(--checkbox-border-color,#c8c9cc);transition-duration:.2s;transition-duration:var(--checkbox-transition-duration,.2s)}.van-checkbox__icon--round{border-radius:100%}.van-checkbox__icon--checked{color:#fff;color:var(--white,#fff);background-color:#1989fa;background-color:var(--checkbox-checked-icon-color,#1989fa);border-color:#1989fa;border-color:var(--checkbox-checked-icon-color,#1989fa)}.van-checkbox__icon--disabled{background-color:#ebedf0;background-color:var(--checkbox-disabled-background-color,#ebedf0);border-color:#c8c9cc;border-color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__icon--disabled.van-checkbox__icon--checked{color:#c8c9cc;color:var(--checkbox-disabled-icon-color,#c8c9cc)}.van-checkbox__label{word-wrap:break-word;margin-left:10px;margin-left:var(--checkbox-label-margin,10px);color:#323233;color:var(--checkbox-label-color,#323233)}.van-checkbox__label--left{float:left;margin:0 10px 0 0;margin:0 var(--checkbox-label-margin,10px) 0 0}.van-checkbox__label--disabled{color:#c8c9cc;color:var(--checkbox-disabled-label-color,#c8c9cc)}.van-checkbox__label:empty{margin:0}
\ No newline at end of file
/// <reference types="miniprogram-api-typings" />
import { Weapp } from './weapp';
declare type RecordToAny<T> = {
[K in keyof T]: any;
};
export declare type CombinedComponentInstance<Data, Props, Methods> = Methods &
WechatMiniprogram.Component.TrivialInstance &
Weapp.FormField & {
data: Data & RecordToAny<Props>;
};
export interface VantComponentOptions<Data, Props, Methods, Instance> {
data?: Data;
field?: boolean;
classes?: string[];
mixins?: string[];
props?: Props & Weapp.PropertyOption;
relation?: Weapp.RelationOption<Instance> & {
type: 'ancestor' | 'descendant';
name: string;
current: string;
};
relations?: {
[componentName: string]: Weapp.RelationOption<Instance>;
};
methods?: Methods & Weapp.MethodOption<Instance>;
beforeCreate?: (this: Instance) => void;
created?: (this: Instance) => void;
mounted?: (this: Instance) => void;
destroyed?: (this: Instance) => void;
}
export {};
/// <reference types="miniprogram-api-typings" />
export declare namespace Weapp {
export interface FormField {
data: {
name: string;
value: any;
};
}
/**
* relation定义,miniprogram-api-typings缺少this定义
*/
export interface RelationOption<Instance> {
/** 目标组件的相对关系 */
type: 'parent' | 'child' | 'ancestor' | 'descendant';
/** 关系生命周期函数,当关系被建立在页面节点树中时触发,触发时机在组件attached生命周期之后 */
linked?(
this: Instance,
target: WechatMiniprogram.Component.TrivialInstance
): void;
/** 关系生命周期函数,当关系在页面节点树中发生改变时触发,触发时机在组件moved生命周期之后 */
linkChanged?(
this: Instance,
target: WechatMiniprogram.Component.TrivialInstance
): void;
/** 关系生命周期函数,当关系脱离页面节点树时触发,触发时机在组件detached生命周期之后 */
unlinked?(
this: Instance,
target: WechatMiniprogram.Component.TrivialInstance
): void;
/** 如果这一项被设置,则它表示关联的目标节点所应具有的behavior,所有拥有这一behavior的组件节点都会被关联 */
target?: string;
}
/**
* obverser定义,miniprogram-api-typings缺少this定义
*/
type Observer<Instance, T> = (
this: Instance,
newVal: T,
oldVal: T,
changedPath: Array<string | number>
) => void;
/**
* methods定义,miniprogram-api-typings缺少this定义
*/
export interface MethodOption<Instance> {
[name: string]: (this: Instance, ...args: any[]) => any;
}
export interface ComputedOption<Instance> {
[name: string]: (this: Instance) => any;
}
type PropertyType =
| StringConstructor
| NumberConstructor
| BooleanConstructor
| ArrayConstructor
| ObjectConstructor
| FunctionConstructor
| null;
export interface PropertyOption {
[name: string]:
| PropertyType
| PropertyType[]
| {
/** 属性类型 */
type: PropertyType | PropertyType[];
/** 属性初始值 */
value?: any;
/** 属性值被更改时的响应函数 */
observer?:
| string
| Observer<WechatMiniprogram.Component.TrivialInstance, any>;
/** 属性的类型(可以指定多个) */
optionalTypes?: PropertyType[];
};
}
export {};
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment