Skip to content

M
mayi-mp-shop
Commit 43889e92 by 李嘉林
Options

横向标签

parent 49d9c61b
Showing with 1117 additions and 90 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 == 2 && !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 {
.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 @@
<div v-if="item.componentCode == 'official-account' && item.componentInfo.visible == 1">
<official-account></official-account>
</div>
<div v-if="item.componentCode == 'transverse-label' && item.componentInfo.visible == 1">
<transverse-label :datas="item" :componentIndex="index"></transverse-label>
</div>
</div>
<bottomCont></bottomCont>
......@@ -95,6 +98,7 @@ 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 transverseLabel from '@/components/basicTool/transverse-label/index.vue'
import text from '@/components/content/text'
import imgText from '@/components/content/imgText'
import coupon from '@/components/activity/coupon'
......@@ -125,7 +129,8 @@ export default {
'text-text':text,
'img-text':imgText,
coupon,
integralTurntable
integralTurntable,
transverseLabel
},
onShareAppMessage(res) {
let shareVal={};
......
src/pages/home/main.json
{
"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",
......
static/nativeComponents/GoodsList/index.js
......@@ -19,7 +19,8 @@ const componentOptions = {
classificationLoadNum: 10,
queryProductInfoLoading: false,
loading: false,
finished: false
finished: false,
goodsList:[],
},
// 数据监听器
observers: {},
......@@ -32,9 +33,7 @@ const componentOptions = {
moved() {},
detached() {}
},
attached() {
},
attached() {},
definitionFilter() {},
// 页面生命周期
pageLifetimes: {
......@@ -226,7 +225,7 @@ const componentOptions = {
item.productImgUrl = DFSImg(item.productImgUrl, 400, 400, 1);
item.minPrice = Number(item.minPrice).toFixed(2);
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.minPriceAfterRecommendedCardPriceTable = item.minPriceAfterRecommendedCardPriceTable
? Number(item.minPriceAfterRecommendedCardPriceTable)
......@@ -245,7 +244,8 @@ const componentOptions = {
}
});
this.setData({
"datas.componentData.goodsList": goodsList
"datas.componentData.goodsList": goodsList,
goodsList
});
if (type == 1) {
// 初始化
......@@ -342,7 +342,12 @@ const componentOptions = {
this.getProductList(1, 2);
},
viewMore() {
let { goodsType,style, categoryName, categoryId } = this.data.datas.componentData;
let {
goodsType,
style,
categoryName,
categoryId
} = this.data.datas.componentData;
let linkVal = "";
if (goodsType != 1) {
if (style == "list") {
......@@ -355,7 +360,7 @@ const componentOptions = {
}
$themeToLink({
type: 1,
link:linkVal,
link: linkVal
});
}
}
......
static/nativeComponents/GoodsList/index.wxml
......@@ -25,14 +25,14 @@
style="margin-left:{{-datas.componentData.proGap*2}}rpx;"
>
<view
wx:for="{{datas.componentData.goodsList}}"
wx:for="{{goodsList}}"
wx:key="index"
class="goods-item"
style="width:{{100/datas.componentData.columnNum}}%;padding-left:{{datas.componentData.proGap*2}}rpx"
>
<goods-item
datas="{{datas}}"
items="{{datas.componentData.goodsList[index]}}"
items="{{goodsList[index]}}"
indexs="{{index}}"
></goods-item>
</view>
......
static/nativeComponents/TimeLimitedDiscount/index.js
......@@ -123,15 +123,22 @@ const componentOptions = {
days: 0,
hours: 0,
minute: 0,
second: 0
second: 0,
goodsList:[],
},
// 数据监听器
observers: {},
// 组件方法
methods: {
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 _this = this;
if (activityCode == "") {
return;
}
......@@ -146,13 +153,14 @@ const componentOptions = {
if (dimension == 0 && copyData.goodsItems.length == 0) {
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");
this.setData({ endTime: endTimeData });
let _this = this;
this.setData({ deleteFlag });
console.log("------------155")
console.log("------------155");
// setTimeout(() => {
// xcsoft.countdown(_this.data.datas.componentData.endTime, function (time) {
// console.log("--------------157")
......@@ -171,10 +179,11 @@ const componentOptions = {
// }, 100);
copyData.goodsItems.forEach((item, index) => {
item.productImgUrl = DFSImg(item.imgUrl);
item.productImgUrl1 = DFSImg(item.imgUrl);
item.minPrice = parseFloat(item.discountPrice);
item.maxPrice = parseFloat(item.salePrice);
});
this.setData({
_this.setData({
goodsList: copyData.goodsItems,
selectActivityValue: copyData.singleItemActivityName
});
......@@ -191,30 +200,44 @@ const componentOptions = {
});
}
if (ids.length == 0) {
this.setData({ isLoading:false });
this.setData({ isLoading: false });
return;
}
promoteApi.query_single_item_activity_list_by_ids(ids).then(res => {
if (res.data.code == 200) {
let list = res.data.data ||[];
let list = res.data.data || [];
if (list.length > 0) {
let hideNum = 0;
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;
hideNum += 1;
} else {
item.isEnd = false;
}
item.startTimeTimeStamp = new Date(item.startTime.replace(/-/g, "/")).getTime() - new Date().getTime();
item.endTimeTimeStamp = 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');
})
item.startTimeTimeStamp =
new Date(item.startTime.replace(/-/g, "/")).getTime() -
new Date().getTime();
item.endTimeTimeStamp =
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 });
if (hideNum == actList.length) {
this.setData({ hideAll:true });
this.setData({ hideAll: true });
}
}
}
......@@ -224,12 +247,28 @@ const componentOptions = {
this.setData({ timeData: e.detail });
},
onclickProduct(e) {
console.log(e.currentTarget.dataset.items,'-------------------------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}` });
console.log(
e.currentTarget.dataset.items,
"-------------------------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) {
let { terminalGoodsMixId, terminalGoodsId, goodsId } = e.currentTarget.dataset.items;
let {
terminalGoodsMixId,
terminalGoodsId,
goodsId
} = e.currentTarget.dataset.items;
$themeToLink({
type: 1,
link: `/order/orderConfirm?productGoodsMixId=${terminalGoodsMixId}&productGoodsId=${terminalGoodsId}&goodsId=${goodsId}&qty=1&goodsString=null`
......
static/nativeComponents/TimeLimitedDiscount/index.wxml
......@@ -44,11 +44,11 @@
<view
class="goodsPicture"
bindtap="onclickProduct"
data-items="{{datas.componentData.goodsList[index]}}"
data-items="{{goodsList[index]}}"
style="padding:{{datas.componentData.imgSize}}"
>
<image mode="widthFix" src="{{datas.componentData.goodsList[index]['productImgUrl']}}"></image>
<view class="whiteBg" wx:if="{{datas.componentData.goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
<image mode="widthFix" src="{{goodsList[index]['productImgUrl1']}}"></image>
<view class="whiteBg" wx:if="{{goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
<view class="cover">
<text>商品</text>
<text>售罄</text>
......@@ -58,20 +58,20 @@
</view>
<view class="info">
<view class="name">
{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['productName']:'名称'}}
{{goodsList[index]!=null?goodsList[index]['productName']:'名称'}}
</view>
<view class="allPrice">
<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: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> -->
<view class="price">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</view>
<view class="price">￥{{goodsList[index]!=null?goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{goodsList[index]!=null?goodsList[index]['maxPrice']:0}}</view>
</view>
<view
class="btn"
style="background:#333;"
data-items="{{datas.componentData.goodsList[index]}}"
data-items="{{goodsList[index]}}"
catchtap="onclickOrder"
>
立即抢购
......@@ -86,20 +86,20 @@
<view class="goods1" wx:elif="{{datas.componentData.style==='across'}}">
<view
class="goods-item"
wx:for="{{datas.componentData.goodsList}}"
wx:for="{{goodsList}}"
wx:key="index"
>
<view class="items">
<view class="imgBox slidebox2">
<view
class="goodsPicture"
wx:if="{{datas.componentData.goodsList[index]!=null}}"
wx:if="{{goodsList[index]!=null}}"
style="padding:{{datas.componentData.imgSize}}"
data-items="{{datas.componentData.goodsList[index]}}"
data-items="{{goodsList[index]}}"
bindtap="onclickProduct"
>
<image mode="widthFix" src="{{datas.componentData.goodsList[index]['productImgUrl']}}"></image>
<view class="whiteBg" wx:if="{{datas.componentData.goodsList[index].oversoldFlag==0&&datas.componentData.goodsList[index].saleQty-0<=0}}">
<image mode="widthFix" src="{{goodsList[index]['productImgUrl']}}"></image>
<view class="whiteBg" wx:if="{{goodsList[index].oversoldFlag==0&&goodsList[index].saleQty-0<=0}}">
<view class="cover">
<text>商品</text>
<text>售罄</text>
......@@ -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: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> -->
<view class="price">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{datas.componentData.goodsList[index]!=null?datas.componentData.goodsList[index]['maxPrice']:0}}</view>
<view class="price">￥{{goodsList[index]!=null?goodsList[index]['minPrice']:0}}</view>
<view class="delPrice">￥{{goodsList[index]!=null?goodsList[index]['maxPrice']:0}}</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 {
import { isDef } from '../common/validator';
VantComponent({
mixins: [touch],
classes: ['nav-class', 'tab-class', 'tab-active-class', 'line-class'],
classes: ["nav-class", "tab-class", "tab-active-class", "line-class"],
relation: {
name: 'tab',
type: 'descendant',
current: 'tabs',
name: "tab",
type: "descendant",
current: "tabs",
linked(target) {
target.index = this.children.length - 1;
this.updateTabs();
......@@ -25,7 +25,7 @@ VantComponent({
return child;
});
this.updateTabs();
},
}
},
props: {
sticky: Boolean,
......@@ -40,16 +40,24 @@ VantComponent({
this.children.forEach((child, index) =>
child.updateRender(index === this.data.currentIndex, this)
);
},
}
},
lineWidth: {
type: [String, Number],
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: {
type: [String, Number],
value: -1,
value: -1
},
active: {
type: [String, Number],
......@@ -58,41 +66,41 @@ VantComponent({
if (name !== this.getCurrentName()) {
this.setCurrentIndexByName(name);
}
},
}
},
type: {
type: String,
value: 'line',
value: "line"
},
ellipsis: {
type: Boolean,
value: true,
value: true
},
duration: {
type: Number,
value: 0.3,
value: 0.3
},
zIndex: {
type: Number,
value: 1,
value: 1
},
swipeThreshold: {
type: Number,
value: 5,
observer(value) {
this.setData({
scrollable: this.children.length > value || !this.data.ellipsis,
scrollable: this.children.length > value || !this.data.ellipsis
});
},
}
},
offsetTop: {
type: Number,
value: 0,
value: 0
},
lazyRender: {
type: Boolean,
value: true,
},
value: true
}
},
data: {
tabs: [],
......@@ -101,24 +109,35 @@ VantComponent({
currentIndex: 0,
container: null,
skipTransition: true,
lineOffsetLeft: 0,
lineOffsetLeft: 0
},
mounted() {
this.getElementInfo();
requestAnimationFrame(() => {
this.setData({
container: () => this.createSelectorQuery().select('.van-tabs'),
container: () => this.createSelectorQuery().select(".van-tabs")
});
this.resize(true);
this.scrollIntoView();
});
},
methods: {
getElementInfo() {
let that = this;
wx
.createSelectorQuery()
.in(this)
.selectAll(".van-tab")
.boundingClientRect()
.exec((rect = []) =>
that.triggerEvent("getEleInfo", { rect, vanTabsThis: this })
);
},
updateTabs() {
const { children = [], data } = this;
this.setData({
tabs: children.map((child) => child.data),
scrollable:
this.children.length > data.swipeThreshold || !data.ellipsis,
tabs: children.map(child => child.data),
scrollable: this.children.length > data.swipeThreshold || !data.ellipsis
});
this.setCurrentIndexByName(data.active || this.getCurrentName());
},
......@@ -131,18 +150,18 @@ VantComponent({
this.$emit(eventName, {
index: currentChild.index,
name: currentChild.getComputedName(),
title: currentChild.data.title,
title: currentChild.data.title
});
},
onTap(event) {
const { index } = event.currentTarget.dataset;
const child = this.children[index];
if (child.data.disabled) {
this.trigger('disabled', child);
this.trigger("disabled", child);
} else {
this.setCurrentIndex(index);
nextTick(() => {
this.trigger('click');
this.trigger("click");
});
}
},
......@@ -150,7 +169,7 @@ VantComponent({
setCurrentIndexByName(name) {
const { children = [] } = this;
const matched = children.filter(
(child) => child.getComputedName() === name
child => child.getComputedName() === name
);
if (matched.length) {
this.setCurrentIndex(matched[0].index);
......@@ -181,9 +200,9 @@ VantComponent({
nextTick(() => {
this.resize();
this.scrollIntoView();
this.trigger('input');
this.trigger("input");
if (shouldEmitChange) {
this.trigger('change');
this.trigger("change");
}
});
},
......@@ -194,26 +213,55 @@ VantComponent({
}
},
resize(skipTransition = false) {
if (this.data.type !== 'line') {
console.log("resize")
if (this.data.type !== "line") {
return;
}
const { currentIndex, ellipsis } = this.data;
Promise.all([
getAllRect(this, '.van-tab'),
getRect(this, '.van-tabs__line'),
getAllRect(this, ".van-tab"),
getRect(this, ".van-tabs__line")
]).then(([rects = [], lineRect]) => {
const rect = rects[currentIndex];
if (rect == null) {
return;
}
let lineOffsetLeft = rects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
lineOffsetLeft +=
(rect.width - lineRect.width) / 2 + (ellipsis ? 0 : 8);
let lineWidths = 0;
let lineOffsetLeft = 0;
if (this.data.lineLengthType == 1) {
if (this.data.linePosition == 2) {
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({
lineWidth: lineWidths,
lineOffsetLeft,
skipTransition,
skipTransition
});
});
},
......@@ -224,20 +272,20 @@ VantComponent({
return;
}
Promise.all([
getAllRect(this, '.van-tab'),
getRect(this, '.van-tabs__nav'),
getAllRect(this, ".van-tab"),
getRect(this, ".van-tabs__nav")
]).then(([tabRects, navRect]) => {
const tabRect = tabRects[currentIndex];
const offsetLeft = tabRects
.slice(0, currentIndex)
.reduce((prev, curr) => prev + curr.width, 0);
this.setData({
scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2,
scrollLeft: offsetLeft - (navRect.width - tabRect.width) / 2
});
});
},
onTouchScroll(event) {
this.$emit('scroll', event.detail);
this.$emit("scroll", event.detail);
},
onTouchStart(event) {
if (!this.data.swipeable) return;
......@@ -252,7 +300,7 @@ VantComponent({
if (!this.data.swipeable) return;
const { direction, deltaX, offsetX } = this;
const minSwipeDistance = 50;
if (direction === 'horizontal' && offsetX >= minSwipeDistance) {
if (direction === "horizontal" && offsetX >= minSwipeDistance) {
const index = this.getAvaiableTab(deltaX);
if (index !== -1) {
this.setCurrentIndex(index);
......@@ -278,6 +326,6 @@ VantComponent({
}
}
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