Skip to content

M
mayi-mp-shop
Commit b04dfd16 by 程智春
Options

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

parents 9f433a9c 4ee97352
Showing with 1119 additions and 105 deletions
src/components/basicTool/transverse-label/index.vue 0 → 100644
<template>
<!-- 横向标签 -->
<div class="transverse-label" :class="['transverse-label' + componentIndex]"
:style="{
'--default-tab-text-size':defaultTabTextSize+'px',
'--default-tab-background-bolor':defaultTabBackgroundColor,
'--default-tab-underline-color':defaultTabUnderlineColor,
'--select-tab-text-color':selectTabTextColor,
'--select-tab-text-size':selectTabTextSize+'px',
'--select-tab-background-color':selectTabBackgroundColor,
'--select-tab-underline-color':selectTabUnderlineColor,
'--tab-background-color':tabBackgroundColor
}"
>
<!-- v-if="tabSlideArrow==1&&isScroll" -->
<div
ref="floatArrow"
class="floatArrow"
:class="[
'floatArrow' + componentIndex,
tabSlideArrow == 1 && tabList.length>5 ? '' : 'hideArrow',
]"
>
<div class="left" @click="moveTab(-1)">
<i class="ant-fanhui-line"></i>
</div>
<div class="right" @click="moveTab(1)">
<i class="ant-fanhui-line"></i>
</div>
</div>
<van-tabs
v-if="showVanTabs"
:tab-class="['vanTab','defaultFontSize',tabStyle==1?'defTabAfter':'defaultTabUnderlineAfter']"
:tab-active-class="['activeTab','selectFontSize',tabStyle==1?'selTabAfter':'selTabUnderLineAfter']"
:custom-class="['customClass',tabStyle==1?'selectTabBackgroundColor':'selectTabUnderlineColor',tabShadow == 1 && tabStyle == 1 ? 'tabShadow' : '']"
ref="vanTabs"
v-model="active"
@change="changeTab"
@getEleInfo="getEleInfo"
:animated="true"
:ellipsis="false"
:title-active-color="selectTabTextColor"
:title-inactive-color="defaultTabTextColor"
:line-position="tabLayout"
:line-length-type="tabStyle==2?tabUnderline:1"
:class="[
'defaultTabsStyle',
'defaultTabsStyle' + componentIndex,
tabStyle == 1 ? 'tabStyle1' : 'tabStyle2',
stickyTop ? 'stickyTop' : '',
'tabLayout' + tabLayout,
]"
>
<van-tab
ref="vanTab"
v-for="(item, index) in tabList"
:key="index"
:title="item.title"
>
<div
class="item"
:class="{ 'min-height': item.contentList.length == 0 }"
v-for="(item1, index1) in item.contentList"
:key="index1"
>
<div v-if="item1.componentCode=='banner' && item1.componentInfo.visible == 1">
<banner :datas="item1"></banner>
</div>
<div v-else-if="item1.componentCode=='goods-list' && item1.componentInfo.visible == 1" style="height:100%;">
<goods-list class="goodsListItem" :datas="item1"></goods-list>
</div>
<div v-else-if="item1.componentCode == 'area-navigation' && item1.componentInfo.visible == 1">
<area-navigation :datas="item1" :changeLocation="changeLocation"></area-navigation>
</div>
<div v-else-if="item1.componentCode == 'cube-nav' && item1.componentInfo.visible == 1">
<cube-nav :datas="item1"></cube-nav>
</div>
<div v-else-if="item1.componentCode == 'time-limited-discount' && item1.componentInfo.visible == 1">
<time-limited-discount :datas="item1"></time-limited-discount>
</div>
<div v-if="item1.componentCode == 'links' && item1.componentInfo.visible == 1">
<links :datas="item1"></links>
</div>
<div v-if="item1.componentCode == 'interval' && item1.componentInfo.visible == 1">
<interval :datas="item1"></interval>
</div>
<div v-if="item1.componentCode == 'partition' && item1.componentInfo.visible == 1">
<partition :datas="item1"></partition>
</div>
<div v-if="item1.componentCode == 'shop-popup' && item1.componentInfo.visible == 1">
<shop-popup :datas="item1"></shop-popup>
</div>
<div v-if="item1.componentCode == 'float-button' && item1.componentInfo.visible == 1">
<float-button :datas="item1"></float-button>
</div>
<div v-if="item1.componentCode == 'text-text' && item1.componentInfo.visible == 1">
<text-text :datas="item1"></text-text>
</div>
<div v-if="item1.componentCode == 'img-text' && item1.componentInfo.visible == 1">
<img-text :datas="item1"></img-text>
</div>
<div v-if="item1.componentCode == 'goods-search' && item1.componentInfo.visible == 1">
<goods-search :datas="item1"></goods-search>
</div>
<div v-if="item1.componentCode == 'notice' && item1.componentInfo.visible == 1">
<notice :datas="item1"></notice>
</div>
<div v-if="item1.componentCode == 'pop-up' && item1.componentInfo.visible == 1">
<pop-up :datas="item1"></pop-up>
</div>
<div v-if="item1.componentCode == 'coupon' && item1.componentInfo.visible == 1">
<coupon :datas="item1"></coupon>
</div>
<div v-if="item1.componentCode == 'integral-turntable' && item1.componentInfo.visible == 1">
<integralTurntable :datas="item1"></integralTurntable>
</div>
<div v-if="item1.componentCode == 'speedy-nav' && item1.componentInfo.visible == 1">
<speedy-nav :datas="item1"></speedy-nav>
</div>
<div v-if="item1.componentCode == 'video-player' && item1.componentInfo.visible == 1" >
<video-player :datas="item1" :indexs="index"></video-player>
</div>
<!-- <component
:is="item1.componentCode"
:datas="item1"
:render="$props.render"
class="component-el"
:ref="item1.componentCode + index1"
></component> -->
</div>
</van-tab>
</van-tabs>
</div>
</template>
<script type="text/ecmascript-6">
import links from "@/components/basicTool/link/index.vue";
import interval from "@/components/basicTool/interval/index.vue";
import partition from "@/components/basicTool/partition/index.vue";
import shopPopup from "@/components/basicTool/shop-popup/index.vue";
import text from "@/components/content/text";
import imgText from "@/components/content/imgText";
import coupon from "@/components/activity/coupon";
import integralTurntable from "@/components/activity/integralTurntable";
let rect='',vanTabsThis=[];
export default {
name: "transverse-label",
props: {
render: {
type: Boolean,
default: false,
},
datas: {
type: Object,
default: {},
},
componentIndex: {
type: Number,
default: 0,
},
},
data() {
return {
active: 0,
lineWidth: 0,
isScroll: false,
tabInfoList:[],
showVanTabs:true,
};
},
components: {
links,
interval,
partition,
shopPopup,
"text-text": text,
"img-text": imgText,
coupon,
integralTurntable,
},
computed: {
tabList: {
get() {
return this.datas.componentData.tabList.filter(
(item) => item.visible == undefined || item.visible == 1
);
},
set(newVal) {
this.datas.componentData.tabList = newVal;
},
},
tabStyle() {
return this.datas.componentData.tabStyle;
},
stickyTop() {
return this.datas.componentData.stickyTop;
},
tabBackgroundColor() {
return this.datas.componentData.tabBackgroundColor || "#fff";
},
tabLayout: {
get() {
return this.datas.componentData.tabLayout;
},
set(newVal) {
this.datas.componentData.tabLayout = newVal;
},
},
disabledCenter: {
get() {
return this.datas.componentData.disabledCenter;
},
set(newVal) {
this.datas.componentData.disabledCenter = newVal;
},
},
tabUnderline() {
return this.datas.componentData.tabUnderline;
},
tabShadow() {
return this.datas.componentData.tabShadow;
},
tabSlideArrow() {
return this.datas.componentData.tabSlideArrow;
},
defaultTabText() {
return this.datas.componentData.defaultTabText;
},
defaultTabTextColor() {
if(this.defaultTabText==1){
if(this.tabStyle==1){
return "var(--main-color)"
} else {
return "rgba(0,0,0,0.4)"
}
} else {
if(this.datas.componentData.defaultTabTextColor){
return this.datas.componentData.defaultTabTextColor;
}
}
},
defaultTabTextSize() {
if(this.defaultTabText==1){
return 14
}else {
return this.datas.componentData.defaultTabTextSize;
}
},
defaultTabBackground() {
return this.datas.componentData.defaultTabBackground;
},
defaultTabBackgroundColor() {
if(this.defaultTabBackground==2){
return this.datas.componentData.defaultTabBackgroundColor;
} else {
return "";
}
},
defaultTabUnderline() {
return this.datas.componentData.defaultTabUnderline;
},
defaultTabUnderlineColor() {
if(this.defaultTabUnderline==2){
return this.datas.componentData.defaultTabUnderlineColor;
} else {
return "";
}
},
selectTabText() {
return this.datas.componentData.selectTabText;
},
selectTabTextColor() {
if(this.selectTabText==1){
if(this.tabStyle==1){
return "#fff"
}else {
return "#333"
}
} else {
if(this.datas.componentData.selectTabTextColor){
return this.datas.componentData.selectTabTextColor;
}
}
},
selectTabTextSize() {
if(this.selectTabText==1){
return 14
} else {
return this.datas.componentData.selectTabTextSize;
}
},
selectTabBackground() {
return this.datas.componentData.selectTabBackground;
},
selectTabBackgroundColor() {
if(this.selectTabBackground ==2){
return this.datas.componentData.selectTabBackgroundColor;
} else {
return "var(--main-color)";
}
},
selectTabUnderline() {
return this.datas.componentData.selectTabUnderline;
},
selectTabUnderlineColor() {
if(this.selectTabUnderline==2){
return this.datas.componentData.selectTabUnderlineColor;
} else {
return "var(--main-color)";
}
},
},
watch: {
active() {
this.timeOutInitTabs();
},
tabList: {
handler() {
this.timeOutInitTabs();
},
deep: true,
},
tabStyle() {
this.timeOutInitTabs();
},
tabLayout() {
this.timeOutInitTabs(true);
},
tabUnderline() {
this.timeOutInitTabs();
},
tabSlideArrow() {
this.timeOutInitTabs();
},
defaultTabText() {
this.timeOutInitTabs();
},
defaultTabTextSize() {
this.timeOutInitTabs();
},
selectTabText() {
this.timeOutInitTabs();
},
selectTabTextSize() {
this.timeOutInitTabs();
},
},
created() {},
mounted() {
this.$nextTick(() => {
this.getAllTabWidth();
});
},
methods: {
//TODO 这个方法是在vant源码中触发，为解决外部无法获取vant组件中的dom元素信息
getEleInfo(res){
rect=res.mp.detail.rect;
vanTabsThis[this.componentIndex]=res.mp.detail.vanTabsThis;
console.log(vanTabsThis,'------------------vanTabsThis')
this.tabInfoList=rect[0]||[];
this.initTabs(0);
},
changeTab(res) {
this.active=res.target.index;
},
timeOutInitTabs(notGetAllTabWidth) {
setTimeout(() => {
if (!notGetAllTabWidth) {
this.getAllTabWidth();
}
}, 16.7);
},
initTabs(index=0) {
return;
// 如果为样式二且为长下划线或为样式一使用wid
let wid =this.tabInfoList[index].width;
console.log(wid,'---------------------wid')
this.lineWidth =
(this.tabUnderline == 1 && this.tabStyle == 2) || this.tabStyle == 1
? wid +12
: undefined;
},
getElementInfo(sel="",callback) {
let _query = wx.createSelectorQuery();
_query.select(sel).boundingClientRect();
_query.exec((res) => {
callback(res);
});
},
getAllTabWidth() {
// let bodyWidth = document.querySelector(
// `.transverse-label${this.componentIndex}`
// ).offsetWidth;
// let childTabWidth = 0;
// if (
// !document
// .querySelector(`.transverse-label${this.componentIndex}`)
// .querySelectorAll(".van-tab")
// ) {
// return;
// }
// document
// .querySelector(`.transverse-label${this.componentIndex}`)
// .querySelectorAll(".van-tab")
// .forEach((item) => {
// childTabWidth += item.clientWidth;
// });
// if (bodyWidth < childTabWidth) {
// // this.tabLayout = 1;
// this.disabledCenter = true;
// this.isScroll = true;
// } else {
// this.disabledCenter = false;
// this.isScroll = false;
// }
// setTimeout(() => {
// let floatArrow = document.querySelector(
// `.floatArrow${this.componentIndex}`
// );
// console.log(floatArrow, "---------------------------------240");
// document
// .querySelector(`.defaultTabsStyle${this.componentIndex}`)
// .querySelector(".van-tabs__wrap")
// .appendChild(floatArrow);
// }, 16.7);
},
getinitModelList(str) {
return !this.render ? this.$store.state.commonComponentModel[str] : {};
},
moveTab(num) {
console.log(num,'------------433')
console.log(vanTabsThis,'-----------------434')
if (num > 0) {
if (this.active == this.tabList.length) {
this.active == 0;
} else {
this.active++;
}
} else if (num < 0) {
if (this.active == 0) {
this.active = this.tabList.length - 1;
} else {
this.active--;
}
}
vanTabsThis[this.componentIndex].setCurrentIndex(this.active);
console.log(this.active,'---------------------447')
},
},
};
</script>
<style lang="scss" scoped>
.transverse-label {
position: relative;
.min-height {
height: 100px;
text-align: center;
line-height: 100px;
color: #999;
font-size: 14px;
}
}
</style>
<style lang="scss">
.transverse-label {
.van-tab {
// padding: 0;
z-index: 98;
}
.floatArrow {
position: absolute;
top: 0;
width: 100%;
height: 40px;
display: flex;
justify-content: space-between;
align-items: center;
pointer-events: none;
z-index: 100;
& > div {
pointer-events: all;
width: 28px;
height: 100%;
background: rgba(0, 0, 0, 0.4);
display: flex;
justify-content: center;
align-items: center;
i {
font-size: 50rpx;
color: #fff;
}
}
.right {
i {
transform: rotateZ(180deg);
}
}
}
.hideArrow {
opacity: 0;
z-index: -9999;
}
.van-tabs__wrap {
background: var(--tab-background-color)!important;
}
.van-tabs__scroll{
background: var(--tab-background-color)!important;
}
.tabStyle1 {
.van-tabs__line {
height: 30px;
bottom: 6px;
border-radius: 38px;
}
}
.tabShadow {
.van-tabs__line {
box-shadow: 0px 0px 4px 1px #c2c2c2;
}
}
.tabStyle2 {
.van-tabs__line {
bottom: 4px;
}
}
.stickyTop {
.van-tabs__wrap {
position: sticky;
top: 0;
z-index: 100;
}
}
.tabLayout1 {
.van-tab {
flex: none!important;
}
}
.tabLayout2 {
.van-tabs__nav {
justify-content: center;
}
.van-tab {
flex: none!important;
}
}
// 新版样式
.defTabAfter{
position: relative;
&::after{
content: "";
position:absolute;
bottom: 4px;
left: 0;
right: 0;
top: 4px;
border-radius: 34px;
background: var(--default-tab-background-bolor);
z-index: -1;
}
}
.selTabAfter{
&::after{
transition: background 0.1s;
background: transparent;
}
}
.defaultTabUnderlineAfter{
position: relative;
&::after{
content: "";
position:absolute;
bottom: 4px;
left: 0;
right: 0;
height: 4px;
background: var(--default-tab-underline-color);
z-index: -1;
}
}
.selTabUnderLineAfter{
&::after{
transition: background 0.15s;
background: transparent;
}
}
.defaultFontSize{
font-size: var(--default-tab-text-size);
}
.selectFontSize{
font-size: var(--select-tab-text-size);
}
.selectTabBackgroundColor {
.van-tabs__line {
background: var(--select-tab-background-color) !important;
}
}
.selectTabUnderlineColor {
.van-tabs__line {
background: var(--select-tab-underline-color) !important;
}
}
}
</style>
src/components/basicTool/transverse-label/main.json 0 → 100644
{
"usingComponents": {
"van-tabs": "/static/vant/tabs/index",
"van-tab": "/static/vant/tab/index",
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index",
"area-navigation":"/static/nativeComponents/AreaNavigation/index",
"cube-nav":"/static/nativeComponents/CubeNav/index",
"float-button":"/static/nativeComponents/FloatButton/index",
"goods-search":"/static/nativeComponents/GoodsSearch/index",
"notice":"/static/nativeComponents/Notice/index",
"pop-up":"/static/nativeComponents/PopUp/index",
"share-popup":"/static/nativeComponents/SharePopup/index",
"speedy-nav":"/static/nativeComponents/SpeedyNav/index",
"video-player":"/static/nativeComponents/VideoPlayer/index"
},
"enablePullDownRefresh":true,
"styleIsolation": "apply-shared"
}
\ No newline at end of file
src/pages/home/index.vue
...@@ -66,6 +66,9 @@ ...@@ -66,6 +66,9 @@
<div v-if="item.componentCode == 'official-account' && item.componentInfo.visible == 1"> <div v-if="item.componentCode == 'official-account' && item.componentInfo.visible == 1">
<official-account></official-account> <official-account></official-account>
</div> </div>
<div v-if="item.componentCode == 'transverse-label' && item.componentInfo.visible == 1">
<transverse-label :datas="item" :componentIndex="index"></transverse-label>
</div>
<div v-if="item.componentCode == 'photo-gallery' && item.componentInfo.visible == 1"> <div v-if="item.componentCode == 'photo-gallery' && item.componentInfo.visible == 1">
<photo-gallery :datas="item"></photo-gallery> <photo-gallery :datas="item"></photo-gallery>
</div> </div>
...@@ -76,21 +79,7 @@ ...@@ -76,21 +79,7 @@
<share-picture :datas="item"></share-picture> <share-picture :datas="item"></share-picture>
</div> </div>
</div> </div>
<bottomCont></bottomCont>
<bottomCont></bottomCont>
<!-- </scroll-view> -->
<!-- <image
src="http://cdn.mayi888.com/public/jpg/33ff0efc-96b5-4044-a65a-07799dfe98e1.jpg?x-oss-process=image/resize,limit_1,w_750"
></image>
<van-button type="primary">按钮</van-button>
-->
<!-- ----瀑布流开始---- -->
<!-- <waterfall-flow id="waterfallFlow"></waterfall-flow> -->
<!-- ----瀑布流结束---- -->
<!-- <banner id="banner" :datas="componentsList[0]"></banner>
<div class="domain">abc
<van-button type="primary">按钮</van-button> -->
</div> </div>
<share-popup></share-popup> <share-popup></share-popup>
</div> </div>
...@@ -104,6 +93,7 @@ import links from '@/components/basicTool/link/index.vue' ...@@ -104,6 +93,7 @@ import links from '@/components/basicTool/link/index.vue'
import interval from '@/components/basicTool/interval/index.vue' import interval from '@/components/basicTool/interval/index.vue'
import partition from '@/components/basicTool/partition/index.vue' import partition from '@/components/basicTool/partition/index.vue'
import shopPopup from '@/components/basicTool/shop-popup/index.vue' import shopPopup from '@/components/basicTool/shop-popup/index.vue'
import transverseLabel from '@/components/basicTool/transverse-label/index.vue'
import text from '@/components/content/text' 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'
...@@ -134,7 +124,8 @@ export default { ...@@ -134,7 +124,8 @@ export default {
'text-text':text, 'text-text':text,
'img-text':imgText, 'img-text':imgText,
coupon, coupon,
integralTurntable integralTurntable,
transverseLabel
}, },
onShareAppMessage(res) { onShareAppMessage(res) {
let shareVal={}; let shareVal={};
......
src/pages/home/main.json
{ {
"usingComponents": { "usingComponents": {
"van-tabs": "/static/vant/tabs/index",
"van-tab": "/static/vant/tab/index",
"banner": "/static/nativeComponents/Banner/index", "banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index", "goods-list": "/static/nativeComponents/GoodsList/index",
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index", "time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
......
static/nativeComponents/GoodsList/index.js
...@@ -19,7 +19,8 @@ const componentOptions = { ...@@ -19,7 +19,8 @@ const componentOptions = {
classificationLoadNum: 10, classificationLoadNum: 10,
queryProductInfoLoading: false, queryProductInfoLoading: false,
loading: false, loading: false,
finished: false finished: false,
goodsList:[],
}, },
// 数据监听器 // 数据监听器
observers: {}, observers: {},
...@@ -32,9 +33,7 @@ const componentOptions = { ...@@ -32,9 +33,7 @@ const componentOptions = {
moved() {}, moved() {},
detached() {} detached() {}
}, },
attached() { attached() {},
},
definitionFilter() {}, definitionFilter() {},
// 页面生命周期 // 页面生命周期
pageLifetimes: { pageLifetimes: {
...@@ -226,7 +225,7 @@ const componentOptions = { ...@@ -226,7 +225,7 @@ const componentOptions = {
item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1); item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
item.minPrice = Number(item.minPrice).toFixed(2); item.minPrice = Number(item.minPrice).toFixed(2);
item.qty = Number(item.qty); item.qty = Number(item.qty);
item.saleQty = item.saleQty?Number(item.saleQty):1; item.saleQty = item.saleQty ? Number(item.saleQty) : 1;
item.totalCollectionCount = Number(item.totalCollectionCount) || 0; item.totalCollectionCount = Number(item.totalCollectionCount) || 0;
item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable item.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable
? Number(item.minPriceAfterRecommendedCardPriceTable) ? Number(item.minPriceAfterRecommendedCardPriceTable)
...@@ -245,7 +244,8 @@ const componentOptions = { ...@@ -245,7 +244,8 @@ const componentOptions = {
} }
}); });
this.setData({ this.setData({
"datas.componentData.goodsList": goodsList "datas.componentData.goodsList": goodsList,
goodsList
}); });
if (type == 1) { if (type == 1) {
// 初始化 // 初始化
...@@ -342,7 +342,12 @@ const componentOptions = { ...@@ -342,7 +342,12 @@ const componentOptions = {
this.getProductList(1, 2); this.getProductList(1, 2);
}, },
viewMore() { viewMore() {
let { goodsType,style, categoryName, categoryId } = this.data.datas.componentData; let {
goodsType,
style,
categoryName,
categoryId
} = this.data.datas.componentData;
let linkVal = ""; let linkVal = "";
if (goodsType != 1) { if (goodsType != 1) {
if (style == "list") { if (style == "list") {
...@@ -355,7 +360,7 @@ const componentOptions = { ...@@ -355,7 +360,7 @@ const componentOptions = {
} }
$themeToLink({ $themeToLink({
type: 1, type: 1,
link:linkVal, link: linkVal
}); });
} }
} }
......
static/nativeComponents/GoodsList/index.wxml
...@@ -25,14 +25,14 @@ ...@@ -25,14 +25,14 @@
style="margin-left:{{-datas.componentData.proGap*2}}rpx;" style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
> >
<view <view
wx:for="{{datas.componentData.goodsList}}" wx:for="{{goodsList}}"
wx:key="index" wx:key="index"
class="goods-item" class="goods-item"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx" style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
> >
<goods-item <goods-item
datas="{{datas}}" datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}" items="{{goodsList[index]}}"
indexs="{{index}}" indexs="{{index}}"
></goods-item> ></goods-item>
</view> </view>
......
static/nativeComponents/TimeLimitedDiscount/index.js
...@@ -123,15 +123,22 @@ const componentOptions = { ...@@ -123,15 +123,22 @@ const componentOptions = {
days: 0, days: 0,
hours: 0, hours: 0,
minute: 0, minute: 0,
second: 0 second: 0,
goodsList:[],
}, },
// 数据监听器 // 数据监听器
observers: {}, observers: {},
// 组件方法 // 组件方法
methods: { methods: {
init() { init() {
let { goodsList, activityCode, selectActivityValue, dimension } = this.data.datas.componentData; let {
goodsList,
activityCode,
selectActivityValue,
dimension
} = this.data.datas.componentData;
let { deleteFlag, endTimeData } = this.data; let { deleteFlag, endTimeData } = this.data;
let _this = this;
if (activityCode == "") { if (activityCode == "") {
return; return;
} }
...@@ -146,13 +153,14 @@ const componentOptions = { ...@@ -146,13 +153,14 @@ const componentOptions = {
if (dimension == 0 && copyData.goodsItems.length == 0) { if (dimension == 0 && copyData.goodsItems.length == 0) {
deleteFlag = true; deleteFlag = true;
} }
endTimeData = new Date(copyData.endTime.replace(/-/g, "/")).getTime() - new Date().getTime(); endTimeData =
new Date(copyData.endTime.replace(/-/g, "/")).getTime() -
new Date().getTime();
console.log(endTimeData, "----------------------150"); console.log(endTimeData, "----------------------150");
this.setData({ endTime: endTimeData }); this.setData({ endTime: endTimeData });
let _this = this;
this.setData({ deleteFlag }); this.setData({ deleteFlag });
console.log("------------155") console.log("------------155");
// setTimeout(() => { // setTimeout(() => {
// xcsoft.countdown(_this.data.datas.componentData.endTime, function (time) { // xcsoft.countdown(_this.data.datas.componentData.endTime, function (time) {
// console.log("--------------157") // console.log("--------------157")
...@@ -171,10 +179,11 @@ const componentOptions = { ...@@ -171,10 +179,11 @@ const componentOptions = {
// }, 100); // }, 100);
copyData.goodsItems.forEach((item, index) => { copyData.goodsItems.forEach((item, index) => {
item.productImgUrl = DFSImg(item.imgUrl); item.productImgUrl = DFSImg(item.imgUrl);
item.productImgUrl1 = DFSImg(item.imgUrl);
item.minPrice = parseFloat(item.discountPrice); item.minPrice = parseFloat(item.discountPrice);
item.maxPrice = parseFloat(item.salePrice); item.maxPrice = parseFloat(item.salePrice);
}); });
this.setData({ _this.setData({
goodsList: copyData.goodsItems, goodsList: copyData.goodsItems,
selectActivityValue: copyData.singleItemActivityName selectActivityValue: copyData.singleItemActivityName
}); });
...@@ -191,30 +200,44 @@ const componentOptions = { ...@@ -191,30 +200,44 @@ const componentOptions = {
}); });
} }
if (ids.length == 0) { if (ids.length == 0) {
this.setData({ isLoading:false }); this.setData({ isLoading: false });
return; return;
} }
promoteApi.query_single_item_activity_list_by_ids(ids).then(res => { promoteApi.query_single_item_activity_list_by_ids(ids).then(res => {
if (res.data.code == 200) { if (res.data.code == 200) {
let list = res.data.data ||[]; let list = res.data.data || [];
if (list.length > 0) { if (list.length > 0) {
let hideNum = 0; let hideNum = 0;
list.forEach((item, index) => { list.forEach((item, index) => {
if (new Date(item.endTime.replace(/-/g, "/")).getTime() - new Date().getTime() <= 0) { if (
new Date(item.endTime.replace(/-/g, "/")).getTime() -
new Date().getTime() <=
0
) {
item.isEnd = true; item.isEnd = true;
hideNum += 1; hideNum += 1;
} else { } else {
item.isEnd = false; item.isEnd = false;
} }
item.startTimeTimeStamp = new Date(item.startTime.replace(/-/g, "/")).getTime() - new Date().getTime(); item.startTimeTimeStamp =
item.endTimeTimeStamp = new Date(item.endTime.replace(/-/g, "/")).getTime() - new Date().getTime(); new Date(item.startTime.replace(/-/g, "/")).getTime() -
item.singleItemActivityCoverImage = DFSImg(item.singleItemActivityCoverImage); new Date().getTime();
item.isStart = new Date(item.startTime.replace(/-/g, "/")).getTime() > new Date().getTime() ? true : false; item.endTimeTimeStamp =
console.log(item.isEnd,'-----------------------213'); new Date(item.endTime.replace(/-/g, "/")).getTime() -
}) new Date().getTime();
item.singleItemActivityCoverImage = DFSImg(
item.singleItemActivityCoverImage
);
item.isStart =
new Date(item.startTime.replace(/-/g, "/")).getTime() >
new Date().getTime()
? true
: false;
console.log(item.isEnd, "-----------------------213");
});
this.setData({ "datas.componentData.actList": list }); this.setData({ "datas.componentData.actList": list });
if (hideNum == actList.length) { if (hideNum == actList.length) {
this.setData({ hideAll:true }); this.setData({ hideAll: true });
} }
} }
} }
...@@ -224,12 +247,28 @@ const componentOptions = { ...@@ -224,12 +247,28 @@ const componentOptions = {
this.setData({ timeData: e.detail }); this.setData({ timeData: e.detail });
}, },
onclickProduct(e) { onclickProduct(e) {
console.log(e.currentTarget.dataset.items,'-------------------------226'); console.log(
let { terminalProductId, terminalGoodsMixId, productId } = e.currentTarget.dataset.items; e.currentTarget.dataset.items,
$themeToLink({ type: 1, link: `/goods/${productId}?limitedLime=true&endTime=${this.data.datas.componentData.endTime}&terminalProductId="${terminalProductId}&terminalGoodsMixId=${terminalGoodsMixId}` }); "-------------------------226"
);
let {
terminalProductId,
terminalGoodsMixId,
productId
} = e.currentTarget.dataset.items;
$themeToLink({
type: 1,
link: `/goods/${productId}?limitedLime=true&endTime=${
this.data.datas.componentData.endTime
}&terminalProductId="${terminalProductId}&terminalGoodsMixId=${terminalGoodsMixId}`
});
}, },
onclickOrder(e) { onclickOrder(e) {
let { terminalGoodsMixId, terminalGoodsId, goodsId } = e.currentTarget.dataset.items; let {
terminalGoodsMixId,
terminalGoodsId,
goodsId
} = e.currentTarget.dataset.items;
$themeToLink({ $themeToLink({
type: 1, type: 1,
link: `/order/orderConfirm?productGoodsMixId=${terminalGoodsMixId}&productGoodsId=${terminalGoodsId}&goodsId=${goodsId}&qty=1&goodsString=null` link: `/order/orderConfirm?productGoodsMixId=${terminalGoodsMixId}&productGoodsId=${terminalGoodsId}&goodsId=${goodsId}&qty=1&goodsString=null`
......
static/nativeComponents/TimeLimitedDiscount/index.wxml
...@@ -44,11 +44,11 @@ ...@@ -44,11 +44,11 @@
<view <view
class="goodsPicture" class="goodsPicture"
bindtap="onclickProduct" bindtap="onclickProduct"
data-items="{{datas.componentData.goodsList[index]}}" data-items="{{goodsList[index]}}"
style="padding:{{datas.componentData.imgSize}}" style="padding:{{datas.componentData.imgSize}}"
> >
<image mode="widthFix" src="{{datas.componentData.goodsList[index]['productImgUrl']}}"></image> <image mode="widthFix" src="{{goodsList[index]['productImgUrl1']}}"></image>
<view class="whiteBg" wx:if="{{datas.componentData.goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}"> <view class="whiteBg" wx:if="{{goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
<view class="cover"> <view class="cover">
<text>商品</text> <text>商品</text>
<text>售罄</text> <text>售罄</text>
...@@ -58,20 +58,20 @@ ...@@ -58,20 +58,20 @@
</view> </view>
<view class="info"> <view class="info">
<view class="name"> <view class="name">
{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['productName']:'名称'}} {{goodsList[index]!=null?goodsList[index]['productName']:'名称'}}
</view> </view>
<view class="allPrice"> <view class="allPrice">
<view> <view>
<!-- <text class="price" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text> <!-- <text class="price" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="price" wx:else>￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text> <text class="price" wx:else>￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="delPrice" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</text> --> <text class="delPrice" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</text> -->
<view class="price">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</view> <view class="price">￥{{goodsList[index]!=null?goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</view> <view class="delPrice">￥{{goodsList[index]!=null?goodsList[index]['maxPrice']:0}}</view>
</view> </view>
<view <view
class="btn" class="btn"
style="background:#333;" style="background:#333;"
data-items="{{datas.componentData.goodsList[index]}}" data-items="{{goodsList[index]}}"
catchtap="onclickOrder" catchtap="onclickOrder"
> >
立即抢购 立即抢购
...@@ -86,20 +86,20 @@ ...@@ -86,20 +86,20 @@
<view class="goods1" wx:elif="{{datas.componentData.style==='across'}}"> <view class="goods1" wx:elif="{{datas.componentData.style==='across'}}">
<view <view
class="goods-item" class="goods-item"
wx:for="{{datas.componentData.goodsList}}" wx:for="{{goodsList}}"
wx:key="index" wx:key="index"
> >
<view class="items"> <view class="items">
<view class="imgBox slidebox2"> <view class="imgBox slidebox2">
<view <view
class="goodsPicture" class="goodsPicture"
wx:if="{{datas.componentData.goodsList[index]!=null}}" wx:if="{{goodsList[index]!=null}}"
style="padding:{{datas.componentData.imgSize}}" style="padding:{{datas.componentData.imgSize}}"
data-items="{{datas.componentData.goodsList[index]}}" data-items="{{goodsList[index]}}"
bindtap="onclickProduct" bindtap="onclickProduct"
> >
<image mode="widthFix" src="{{datas.componentData.goodsList[index]['productImgUrl']}}"></image> <image mode="widthFix" src="{{goodsList[index]['productImgUrl']}}"></image>
<view class="whiteBg" wx:if="{{datas.componentData.goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}"> <view class="whiteBg" wx:if="{{goodsList[index].oversoldFlag==0&&goodsList[index].saleQty-0<=0}}">
<view class="cover"> <view class="cover">
<text>商品</text> <text>商品</text>
<text>售罄</text> <text>售罄</text>
...@@ -111,8 +111,8 @@ ...@@ -111,8 +111,8 @@
<!-- <text class="price" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text> <!-- <text class="price" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="price" wx:else>￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text> <text class="price" wx:else>￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</text>
<text class="delPrice" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</text> --> <text class="delPrice" wx:if="{{((hours-0)+(minute-0)+(second-0))!=0}}">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</text> -->
<view class="price">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</view> <view class="price">￥{{goodsList[index]!=null?goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</view> <view class="delPrice">￥{{goodsList[index]!=null?goodsList[index]['maxPrice']:0}}</view>
</view> </view>
</view> </view>
</view> </view>
......
static/nativeComponents/TransverseLabel/ComponentsList/index.js 0 → 100644
const componentOptions = {
// 组件选项
options: {
multipleSlots: true
},
behaviors: [],
properties: {
datas: {
type: Object
}
},
// 组件数据
data: {
isPageHidden: false // 页面是否处于隐藏状态
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {}
},
// 组件生命周期
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)
static/nativeComponents/TransverseLabel/ComponentsList/index.json 0 → 100644
{
"component": true,
"usingComponents": {
"banner": "/static/nativeComponents/Banner/index",
"goods-list": "/static/nativeComponents/GoodsList/index",
"time-limited-discount": "/static/nativeComponents/TimeLimitedDiscount/index",
"waterfall-flow": "/static/nativeComponents/module/WaterfallFlow/index",
"van-button": "/static/vant/button/index",
"area-navigation": "/static/nativeComponents/AreaNavigation/index",
"cube-nav": "/static/nativeComponents/CubeNav/index",
"float-button": "/static/nativeComponents/FloatButton/index",
"goods-search": "/static/nativeComponents/GoodsSearch/index",
"notice": "/static/nativeComponents/Notice/index",
"pop-up": "/static/nativeComponents/PopUp/index",
"share-popup": "/static/nativeComponents/SharePopup/index",
"speedy-nav": "/static/nativeComponents/SpeedyNav/index",
"video-player": "/static/nativeComponents/VideoPlayer/index",
"transverse-label": "/static/nativeComponents/TransverseLabel/index"
}
}
\ No newline at end of file
static/nativeComponents/TransverseLabel/ComponentsList/index.wxml 0 → 100644
<!-- 组件集合 -->
<view class="ComponentsList">
<block wx:for="{{datas}}">
<block wx:if="{{item.componentCode=='banner' && item.componentInfo.visible == 1}}">
<banner datas="{{item}}"></banner>
</block>
<block wx:elif="{{item.componentCode=='goods-list' && item.componentInfo.visible == 1}}">
<goods-list class="goodsListItem" datas="{{item}}"></goods-list>
</block>
<block wx:elif="{{item.componentCode=='area-navigation' && item.componentInfo.visible == 1}}">
<area-navigation datas="{{item}}" :changeLocation="changeLocation"></area-navigation>
</block>
<block wx:elif="{{item.componentCode=='cube-nav' && item.componentInfo.visible == 1}}">
<cube-nav datas="{{item}}"></cube-nav>
</block>
<block wx:elif="{{item.componentCode=='time-limited-discount' && item.componentInfo.visible == 1}}">
<time-limited-discount datas="{{item}}"></time-limited-discount>
</block>
<block wx:elif="{{item.componentCode=='links' && item.componentInfo.visible == 1}}">
<links datas="{{item}}"></links>
</block>
<block wx:elif="{{item.componentCode=='interval' && item.componentInfo.visible == 1}}">
<interval datas="{{item}}"></interval>
</block>
<block wx:elif="{{item.componentCode=='partition' && item.componentInfo.visible == 1}}">
<partition datas="{{item}}"></partition>
</block>
<block wx:elif="{{item.componentCode=='shop-popup' && item.componentInfo.visible == 1}}">
<shop-popup datas="{{item}}"></shop-popup>
</block>
<block wx:elif="{{item.componentCode=='float-button' && item.componentInfo.visible == 1}}">
<float-button datas="{{item}}"></float-button>
</block>
<block wx:elif="{{item.componentCode=='text-text' && item.componentInfo.visible == 1}}">
<text-text datas="{{item}}"></text-text>
</block>
<block wx:elif="{{item.componentCode=='img-text' && item.componentInfo.visible == 1}}">
<img-text datas="{{item}}"></img-text>
</block>
<block wx:elif="{{item.componentCode=='goods-search' && item.componentInfo.visible == 1}}">
<goods-search datas="{{item}}"></goods-search>
</block>
<block wx:elif="{{item.componentCode=='notice' && item.componentInfo.visible == 1}}">
<notice datas="{{item}}"></notice>
</block>
<block wx:elif="{{item.componentCode=='pop-up' && item.componentInfo.visible == 1}}">
<pop-up datas="{{item}}"></pop-up>
</block>
<block wx:elif="{{item.componentCode=='coupon' && item.componentInfo.visible == 1}}">
<coupon datas="{{item}}"></coupon>
</block>
<block wx:elif="{{item.componentCode=='integral-turntable' && item.componentInfo.visible == 1}}">
<integralTurntable datas="{{item}}"></integralTurntable>
</block>
<block wx:elif="{{item.componentCode=='speedy-nav' && item.componentInfo.visible == 1}}">
<speedy-nav datas="{{item}}"></speedy-nav>
</block>
<block wx:elif="{{item.componentCode=='video-player' && item.componentInfo.visible == 1}}">
<video-player datas="{{item}}" :indexs="index"></video-player>
</block>
<block wx:elif="{{item.componentCode=='official-account' && item.componentInfo.visible == 1}}">
<official-account></official-account>
</block>
</block>
</view>
static/nativeComponents/TransverseLabel/index.js 0 → 100644
const componentOptions = {
// 组件选项
options: {
multipleSlots: true,
styleIsolation: "shared"
},
behaviors: [],
properties: {
datas: {
type: Object
}
},
// 组件数据
data: {
isPageHidden: false, // 页面是否处于隐藏状态
active: 0
},
// 数据监听器
observers: {},
// 组件方法
methods: {
init() {},
onChange(event) {}
},
// 组件生命周期
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)
static/nativeComponents/TransverseLabel/index.json 0 → 100644
{
"component": true,
"usingComponents": {
"van-tabs":"/static/vant/tabs/index",
"van-tab":"/static/vant/tab/index",
"components-list":"./ComponentsList/index"
}
}
static/nativeComponents/TransverseLabel/index.wxml 0 → 100644
<view class="TransverseLabel" style="--defaultTabTextColor:{{datas.componentData.defaultTabTextColor}};--defaultTabTextSize:{{datas.componentData.defaultTabTextSize*2}}rpx;--defaultTabBackgroundColor:{{datas.componentData.defaultTabBackgroundColor}};--defaultTabUnderlineColor:{{datas.componentData.defaultTabUnderlineColor}};--selectTabTextColor:{{datas.componentData.selectTabTextColor}};--selectTabTextSize:{{datas.componentData.selectTabTextSize*2}}rpx;--selectTabBackgroundColor:{{datas.componentData.selectTabBackgroundColor}};--selectTabUnderlineColor:{{datas.componentData.selectTabUnderlineColor}};--tabBackgroundColor:{{datas.componentData.tabBackgroundColor}};">
<van-tabs
custom-class="vanTabs {{datas.componentData.tabStyle==1?'tabStyle1':'tabStyle2'}}"
nav-class="tabNav tabLayout{{datas.componentData.tabLayout}}"
tab-class="vanTab"
tab-active-class="vanActiveTab"
active="{{ active }}"
animated="{{true}}"
sticky="{{datas.componentData.stickyTop}}"
swipeable="{{true}}"
bind:change="onChange"
line-width="{{50}}"
color="{{'#333'}}"
>
<van-tab
title="{{item.title}}"
wx:for="{{datas.componentData.tabList}}"
wx:if="{{item.visible==undefined||item.visible==1}}"
>
<components-list datas="{{item.contentList}}"></components-list>
</van-tab>
</van-tabs>
</view>
static/nativeComponents/TransverseLabel/index.wxss 0 → 100644
.vanTabs{
position: relative;
}
.vanTab .van-ellipsis{
padding: 0 20rpx;
margin: 0 12rpx;
}
.van-tab {
position: relative;
z-index: 98;
}
/* 样式1 */
.tabStyle1 .van-tabs__line {
width: 100%;
height: 30px;
bottom: 7px;
border-radius: 38px;
}
.tabStyle1 .tabTitle {
color: var(--main-color);
}
.tabStyle1 .selectTitle {
color: #fff;
}
.tabStyle1 .defaultTabTextSize {
font-size: var(--defaultTabTextSize);
}
.tabStyle1 .defaultTabTextColor {
color: var(--defaultTabTextColor);
}
.tabStyle1 .selectTabTextSize {
font-size: var(--selectTabTextSize);
}
.tabStyle1 .selectTabTextColor {
color: var(--selectTabTextColor);
}
/* 样式2 */
.tabStyle2 .van-tabs__line{
}
/* 标签背景色 */
.tabNav {
background: var(--tabBackgroundColor);
}
/* 布局 */
.tabLayout1 .van-tab{
flex: none;
}
.tabLayout2{
justify-content: center;
}
.tabLayout2 .van-tab{
flex: none;
}
\ No newline at end of file
static/vant/tabs/index.js
...@@ -10,11 +10,11 @@ import { ...@@ -10,11 +10,11 @@ import {
import { isDef } from '../common/validator'; import { isDef } from '../common/validator';
VantComponent({ VantComponent({
mixins: [touch], mixins: [touch],
classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'], classes: ["nav-class", "tab-class", "tab-active-class", "line-class"],
relation: { relation: {
name: 'tab', name: "tab",
type: 'descendant', type: "descendant",
current: 'tabs', current: "tabs",
linked(target) { linked(target) {
target.index = this.children.length - 1; target.index = this.children.length - 1;
this.updateTabs(); this.updateTabs();
...@@ -25,7 +25,7 @@ VantComponent({ ...@@ -25,7 +25,7 @@ VantComponent({
return child; return child;
}); });
this.updateTabs(); this.updateTabs();
}, }
}, },
props: { props: {
sticky: Boolean, sticky: Boolean,
...@@ -40,16 +40,24 @@ VantComponent({ ...@@ -40,16 +40,24 @@ VantComponent({
this.children.forEach((child, index) => this.children.forEach((child, index) =>
child.updateRender(index === this.data.currentIndex, this) child.updateRender(index === this.data.currentIndex, this)
); );
}, }
}, },
lineWidth: { lineWidth: {
type: [String, Number], type: [String, Number],
value: 40, value: 40,
observer: 'resize', // observer: "resize"
},
lineLengthType: {
type: [String, Number],
value: 1 // 1默认自适应 2短自适应 3 固定宽度取值lineWidth
},
linePosition: {
type: [String, Number],
value: 1 // 1默认右对齐 2居中 3铺满
}, },
lineHeight: { lineHeight: {
type: [String, Number], type: [String, Number],
value: -1, value: -1
}, },
active: { active: {
type: [String, Number], type: [String, Number],
...@@ -58,41 +66,41 @@ VantComponent({ ...@@ -58,41 +66,41 @@ VantComponent({
if (name !== this.getCurrentName()) { if (name !== this.getCurrentName()) {
this.setCurrentIndexByName(name); this.setCurrentIndexByName(name);
} }
}, }
}, },
type: { type: {
type: String, type: String,
value: 'line', value: "line"
}, },
ellipsis: { ellipsis: {
type: Boolean, type: Boolean,
value: true, value: true
}, },
duration: { duration: {
type: Number, type: Number,
value: 0.3, value: 0.3
}, },
zIndex: { zIndex: {
type: Number, type: Number,
value: 1, value: 1
}, },
swipeThreshold: { swipeThreshold: {
type: Number, type: Number,
value: 5, value: 5,
observer(value) { observer(value) {
this.setData({ this.setData({
scrollable: this.children.length > value || !this.data.ellipsis, scrollable: this.children.length > value || !this.data.ellipsis
}); });
}, }
}, },
offsetTop: { offsetTop: {
type: Number, type: Number,
value: 0, value: 0
}, },
lazyRender: { lazyRender: {
type: Boolean, type: Boolean,
value: true, value: true
}, }
}, },
data: { data: {
tabs: [], tabs: [],
...@@ -101,24 +109,35 @@ VantComponent({ ...@@ -101,24 +109,35 @@ VantComponent({
currentIndex: 0, currentIndex: 0,
container: null, container: null,
skipTransition: true, skipTransition: true,
lineOffsetLeft: 0, lineOffsetLeft: 0
}, },
mounted() { mounted() {
this.getElementInfo();
requestAnimationFrame(() => { requestAnimationFrame(() => {
this.setData({ this.setData({
container: () => this.createSelectorQuery().select('.van-tabs'), container: () => this.createSelectorQuery().select(".van-tabs")
}); });
this.resize(true); this.resize(true);
this.scrollIntoView(); this.scrollIntoView();
}); });
}, },
methods: { methods: {
getElementInfo() {
let that = this;
wx
.createSelectorQuery()
.in(this)
.selectAll(".van-tab")
.boundingClientRect()
.exec((rect = []) =>
that.triggerEvent("getEleInfo", { rect, vanTabsThis: this })
);
},
updateTabs() { updateTabs() {
const { children = [], data } = this; const { children = [], data } = this;
this.setData({ this.setData({
tabs: children.map((child) => child.data), tabs: children.map(child => child.data),
scrollable: scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
this.children.length > data.swipeThreshold || !data.ellipsis,
}); });
this.setCurrentIndexByName(data.active || this.getCurrentName()); this.setCurrentIndexByName(data.active || this.getCurrentName());
}, },
...@@ -131,18 +150,18 @@ VantComponent({ ...@@ -131,18 +150,18 @@ VantComponent({
this.$emit(eventName, { this.$emit(eventName, {
index: currentChild.index, index: currentChild.index,
name: currentChild.getComputedName(), name: currentChild.getComputedName(),
title: currentChild.data.title, title: currentChild.data.title
}); });
}, },
onTap(event) { onTap(event) {
const { index } = event.currentTarget.dataset; const { index } = event.currentTarget.dataset;
const child = this.children[index]; const child = this.children[index];
if (child.data.disabled) { if (child.data.disabled) {
this.trigger('disabled', child); this.trigger("disabled", child);
} else { } else {
this.setCurrentIndex(index); this.setCurrentIndex(index);
nextTick(() => { nextTick(() => {
this.trigger('click'); this.trigger("click");
}); });
} }
}, },
...@@ -150,7 +169,7 @@ VantComponent({ ...@@ -150,7 +169,7 @@ VantComponent({
setCurrentIndexByName(name) { setCurrentIndexByName(name) {
const { children = [] } = this; const { children = [] } = this;
const matched = children.filter( const matched = children.filter(
(child) => child.getComputedName() === name child => child.getComputedName() === name
); );
if (matched.length) { if (matched.length) {
this.setCurrentIndex(matched[0].index); this.setCurrentIndex(matched[0].index);
...@@ -181,9 +200,9 @@ VantComponent({ ...@@ -181,9 +200,9 @@ VantComponent({
nextTick(() => { nextTick(() => {
this.resize(); this.resize();
this.scrollIntoView(); this.scrollIntoView();
this.trigger('input'); this.trigger("input");
if (shouldEmitChange) { if (shouldEmitChange) {
this.trigger('change'); this.trigger("change");
} }
}); });
}, },
...@@ -194,26 +213,55 @@ VantComponent({ ...@@ -194,26 +213,55 @@ VantComponent({
} }
}, },
resize(skipTransition = false) { resize(skipTransition = false) {
if (this.data.type !== 'line') { console.log("resize")
if (this.data.type !== "line") {
return; return;
} }
const { currentIndex, ellipsis } = this.data; const { currentIndex, ellipsis } = this.data;
Promise.all([ Promise.all([
getAllRect(this, '.van-tab'), getAllRect(this, ".van-tab"),
getRect(this, '.van-tabs__line'), getRect(this, ".van-tabs__line")
]).then(([rects = [], lineRect]) => { ]).then(([rects = [], lineRect]) => {
const rect = rects[currentIndex]; const rect = rects[currentIndex];
if (rect == null) { if (rect == null) {
return; return;
} }
let lineOffsetLeft = rects let lineWidths = 0;
.slice(0, currentIndex) let lineOffsetLeft = 0;
.reduce((prev, curr) => prev + curr.width, 0); if (this.data.lineLengthType == 1) {
lineOffsetLeft += if (this.data.linePosition == 2) {
(rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8); lineOffsetLeft = rect.left;
} else {
lineOffsetLeft = rects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
lineOffsetLeft += 8;
}
lineWidths = rect.width;
} else if (this.data.lineLengthType == 2) {
// 宽度*80%
if (this.data.linePosition == 2) {
lineOffsetLeft = rect.left+rect.width*0.2;
} else {
lineOffsetLeft = rects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
lineOffsetLeft += rect.width * 0.2;
lineOffsetLeft += 8;
}
lineWidths = rect.width * 0.6;
} else {
// 有问题暂不支持固定宽度
// lineOffsetLeft = rects
// .slice(0, currentIndex)
// .reduce((prev, curr) => prev + curr.width, 0);
// lineOffsetLeft += this.data.lineWidth / 2;
// lineWidths = this.data.lineWidth;
}
this.setData({ this.setData({
lineWidth: lineWidths,
lineOffsetLeft, lineOffsetLeft,
skipTransition, skipTransition
}); });
}); });
}, },
...@@ -224,20 +272,20 @@ VantComponent({ ...@@ -224,20 +272,20 @@ VantComponent({
return; return;
} }
Promise.all([ Promise.all([
getAllRect(this, '.van-tab'), getAllRect(this, ".van-tab"),
getRect(this, '.van-tabs__nav'), getRect(this, ".van-tabs__nav")
]).then(([tabRects, navRect]) => { ]).then(([tabRects, navRect]) => {
const tabRect = tabRects[currentIndex]; const tabRect = tabRects[currentIndex];
const offsetLeft = tabRects const offsetLeft = tabRects
.slice(0, currentIndex) .slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0); .reduce((prev, curr) => prev + curr.width, 0);
this.setData({ this.setData({
scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2, scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2
}); });
}); });
}, },
onTouchScroll(event) { onTouchScroll(event) {
this.$emit('scroll', event.detail); this.$emit("scroll", event.detail);
}, },
onTouchStart(event) { onTouchStart(event) {
if (!this.data.swipeable) return; if (!this.data.swipeable) return;
...@@ -252,7 +300,7 @@ VantComponent({ ...@@ -252,7 +300,7 @@ VantComponent({
if (!this.data.swipeable) return; if (!this.data.swipeable) return;
const { direction, deltaX, offsetX } = this; const { direction, deltaX, offsetX } = this;
const minSwipeDistance = 50; const minSwipeDistance = 50;
if (direction === 'horizontal' && offsetX >= minSwipeDistance) { if (direction === "horizontal" && offsetX >= minSwipeDistance) {
const index = this.getAvaiableTab(deltaX); const index = this.getAvaiableTab(deltaX);
if (index !== -1) { if (index !== -1) {
this.setCurrentIndex(index); this.setCurrentIndex(index);
...@@ -278,6 +326,6 @@ VantComponent({ ...@@ -278,6 +326,6 @@ VantComponent({
} }
} }
return -1; return -1;
}, }
}, }
}); });
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