mirror of
https://github.com/crmeb/CRMEB.git
synced 2026-01-06 04:18:11 +00:00
704 lines
15 KiB
Vue
704 lines
15 KiB
Vue
<template>
|
|
<!-- 促销列表 -->
|
|
<view class="index-product-wrapper" v-show="!isSortType" :style="[bottomBgColor]">
|
|
<view :style="{ height: navBdH + 'px' }" class="nav-bd-box">
|
|
<view
|
|
class="nav-bd"
|
|
:class="{
|
|
'nav-bd2': dataConfig.styleConfig.tabVal == 1,
|
|
'nav-bd3': dataConfig.styleConfig.tabVal == 2,
|
|
'nav-bd4': dataConfig.styleConfig.tabVal == 3,
|
|
'nav-bd5': dataConfig.styleConfig.tabVal == 4
|
|
}"
|
|
:style="{
|
|
position: sticky ? 'fixed' : 'static',
|
|
top: positionTop + 'px',
|
|
background: sticky ? '#FFFFFF' : 'none'
|
|
}"
|
|
>
|
|
<scroll-view class="scroll-view" scroll-x="true">
|
|
<view class="item" v-for="(item, index) in explosiveMoney" :index="index" :class="{ on: index == ProductNavindex }" @click="ProductNavTab(item, index)">
|
|
<view v-if="dataConfig.styleConfig.tabVal == 4" class="image-wrap">
|
|
<image :src="item.image" class="image"></image>
|
|
</view>
|
|
<view class="txt" :style="[index == ProductNavindex ? textColor : {}]">{{ item.chiild[0].val }}</view>
|
|
<view v-if="[1, 2].includes(dataConfig.styleConfig.tabVal)" class="line" :style="[index == ProductNavindex ? lineColor : {}]"></view>
|
|
<view class="label" v-if="dataConfig.styleConfig.tabVal == 0 && item.chiild[1].val" :style="[index == ProductNavindex ? decorateColor : {}]">
|
|
{{ item.chiild[1].val }}
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<goodList ref="goodLists" v-if="goodDataConfig" :dataConfig="goodDataConfig" @detail="goDetail"></goodList>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
// import {
|
|
// getProductslist
|
|
// } from '@/api/store.js';
|
|
import goodList from './goodList.vue';
|
|
export default {
|
|
name: 'promotionList',
|
|
props: {
|
|
dataConfig: {
|
|
type: Object,
|
|
default: () => {}
|
|
},
|
|
isSortType: {
|
|
type: String | Number,
|
|
default: 0
|
|
},
|
|
productVideoStatus: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
positionTop: {
|
|
type: Number,
|
|
default: 0
|
|
}
|
|
},
|
|
components: {
|
|
goodList
|
|
},
|
|
data() {
|
|
return {
|
|
tempArr: [],
|
|
iSshowH: false,
|
|
ProductNavindex: 0,
|
|
explosiveMoney: this.dataConfig.tabConfig.list,
|
|
numConfig: this.dataConfig.tabConfig.list[0].numConfig.val,
|
|
// imgStyle: this.dataConfig.imgStyle.type,
|
|
mbConfig: 0,
|
|
themeColor: '',
|
|
titleShow: 0, //标题是否显示
|
|
opriceShow: 0, //划线价是否显示
|
|
priceShow: 0, //价格是否显示
|
|
couponShow: 0, //优惠券标签是否显示
|
|
titleConfig: 0, //标题位置
|
|
fontColor: '',
|
|
labelColor: '',
|
|
txtColor: '',
|
|
infoColor: '',
|
|
goodType: this.dataConfig.tabConfig.list[0].tabVal,
|
|
loadend: false,
|
|
loading: false,
|
|
limit: this.$config.LIMIT,
|
|
page: 1,
|
|
canPlay: false,
|
|
autoplay: false,
|
|
activeValue: this.dataConfig.tabConfig.list[0],
|
|
goodDataConfig: null,
|
|
sticky: false,
|
|
navBdH: 0
|
|
};
|
|
},
|
|
computed: {
|
|
decorateColor() {
|
|
if (this.dataConfig.toneConfig.tabVal) {
|
|
let color = this.dataConfig.decorateColor.color;
|
|
let background = `linear-gradient(90deg, ${color[0].item} 0%, ${color[1].item} 100%)`;
|
|
if (this.dataConfig.styleConfig.tabVal == 2) {
|
|
color = this.dataConfig.decorateColor2.color;
|
|
background = color[0].item;
|
|
}
|
|
return {
|
|
background: background
|
|
};
|
|
} else {
|
|
return {
|
|
background: `linear-gradient(90deg, var(--view-gradient) 0%, var(--view-theme) 100%)`
|
|
};
|
|
}
|
|
},
|
|
textColor() {
|
|
if (this.dataConfig.toneConfig.tabVal) {
|
|
let color = this.dataConfig.textColor.color[0].item;
|
|
let bgColor = this.dataConfig.decorateColor.color;
|
|
let background = '';
|
|
if ([0, 1, 2].includes(this.dataConfig.styleConfig.tabVal)) {
|
|
color = this.dataConfig.textColor.color[0].item;
|
|
console.log(this.dataConfig, color);
|
|
} else if ([3, 4].includes(this.dataConfig.styleConfig.tabVal)) {
|
|
color = '#ffffff';
|
|
background = `linear-gradient(90deg, ${bgColor[0].item} 0%, ${bgColor[1].item} 100%)`;
|
|
} else if (this.dataConfig.styleConfig.tabVal == 1) {
|
|
color = '#282828';
|
|
}
|
|
return {
|
|
color: color,
|
|
background: background
|
|
};
|
|
} else {
|
|
if (this.dataConfig.styleConfig.tabVal == 1) {
|
|
return {
|
|
color: '#282828'
|
|
};
|
|
} else if ([3, 4].includes(this.dataConfig.styleConfig.tabVal)) {
|
|
return {
|
|
background: 'linear-gradient(90deg, var(--view-gradient) 0, var(--view-theme) 100%)',
|
|
color: '#ffffff'
|
|
};
|
|
} else {
|
|
return {
|
|
color: 'var(--view-theme)'
|
|
};
|
|
}
|
|
}
|
|
},
|
|
bottomBgColor() {
|
|
return {
|
|
padding: `${this.dataConfig.topConfig.val * 2}rpx ${this.dataConfig.prConfig.val * 2}rpx ${this.dataConfig.bottomConfig.val * 2}rpx`,
|
|
'margin-top': `${this.dataConfig.mbConfig.val * 2}rpx`,
|
|
background: this.dataConfig.bottomBgColor.color[0].item
|
|
};
|
|
},
|
|
lineColor() {
|
|
let diy = this.dataConfig.toneConfig.tabVal;
|
|
let type = this.dataConfig.styleConfig.tabVal;
|
|
let color = this.dataConfig.decorateColor.color;
|
|
let bgColor = `linear-gradient(90deg, ${color[0].item} 0%, ${color[1].item} 100%)`;
|
|
if (type == 1) {
|
|
return {
|
|
background: diy ? bgColor : 'linear-gradient(90deg, var(--view-gradient) 0, var(--view-theme) 100%)'
|
|
};
|
|
} else if (type == 2) {
|
|
return {
|
|
'border-bottom-color': diy ? this.dataConfig.textColor2.color[0].item : 'var(--view-theme)'
|
|
};
|
|
}
|
|
}
|
|
},
|
|
watch: {
|
|
activeValue: {
|
|
handler(value) {
|
|
let that = this;
|
|
let type = that.goodType == 0 ? 3 : that.goodType;
|
|
let goodDataConfig = {
|
|
styleConfig: {
|
|
tabVal: 1
|
|
},
|
|
goodsList: this.activeValue.goodsList,
|
|
brandList: this.activeValue.brandConfig,
|
|
classList: {
|
|
classVal: this.activeValue.selectConfig.activeValue
|
|
},
|
|
goodsLabel: this.activeValue.goodsLabel,
|
|
typeConfig: {
|
|
activeValue: type
|
|
},
|
|
goodsSort: {
|
|
tabVal: this.activeValue.goodsSort
|
|
},
|
|
numberConfig: {
|
|
val: that.numConfig
|
|
},
|
|
bntStyleConfig: this.dataConfig.bntStyleConfig,
|
|
cartConfig: this.dataConfig.cartConfig,
|
|
bntConfig: this.dataConfig.bntConfig,
|
|
filletImg: {
|
|
type: 0,
|
|
val: 8
|
|
},
|
|
checkboxInfo: {
|
|
type: [0, 1, 2, 3, 4, 5]
|
|
},
|
|
toneConfig: {
|
|
tabVal: 0
|
|
},
|
|
toneCartConfig: this.dataConfig.toneCartConfig,
|
|
bntBgColor: this.dataConfig.bntBgColor,
|
|
goodsName: {
|
|
tabVal: 1
|
|
},
|
|
goodsNameColor: {
|
|
color: [
|
|
{
|
|
item: '#333333'
|
|
}
|
|
]
|
|
},
|
|
goodsPriceColor: {
|
|
color: [
|
|
{
|
|
item: 'var(--view-theme)'
|
|
}
|
|
]
|
|
},
|
|
topConfig: {
|
|
val: 0
|
|
},
|
|
prConfig: {
|
|
val: 0
|
|
},
|
|
bottomConfig: {
|
|
val: 0
|
|
},
|
|
mbConfig: {
|
|
val: 0
|
|
},
|
|
bottomBgColor: {
|
|
color: [
|
|
{
|
|
item: ''
|
|
}
|
|
]
|
|
},
|
|
fillet: this.dataConfig.fillet,
|
|
name: 'promotionList'
|
|
};
|
|
that.goodDataConfig = goodDataConfig;
|
|
},
|
|
immediate: true
|
|
},
|
|
goodType: {
|
|
handler(value) {
|
|
//value !== undefined && this.getGroomList();
|
|
},
|
|
immediate: true
|
|
},
|
|
tempArr() {
|
|
// #ifndef APP-PLUS
|
|
this.$nextTick(() => {
|
|
if (this.productVideoStatus) {
|
|
uni.getNetworkType({
|
|
success: (res) => {
|
|
if (['wifi', 'unknown'].includes(res.networkType)) {
|
|
// 监听
|
|
this.observeVideo();
|
|
}
|
|
if (['2g', '3g', '4g', '5g'].includes(res.networkType)) {
|
|
if (this.$store.state.app.autoplay) {
|
|
// 监听
|
|
this.observeVideo();
|
|
} else {
|
|
this.$eventHub.$emit('confirm_video_status');
|
|
}
|
|
}
|
|
}
|
|
});
|
|
}
|
|
});
|
|
// #endif
|
|
}
|
|
},
|
|
created() {
|
|
// #ifndef APP-PLUS
|
|
this.$eventHub.$on('product_video_observe', () => {
|
|
this.observeVideo();
|
|
});
|
|
// #endif
|
|
// this.getGroomList();
|
|
let that = this;
|
|
let type = that.goodType == 0 ? 3 : that.goodType;
|
|
let goodDataConfig = {
|
|
styleConfig: {
|
|
tabVal: 1
|
|
},
|
|
goodsList: this.activeValue.goodsList,
|
|
brandList: this.activeValue.brandConfig,
|
|
classList: {
|
|
classVal: this.activeValue.selectConfig.activeValue
|
|
},
|
|
goodsLabel: this.activeValue.goodsLabel,
|
|
typeConfig: {
|
|
activeValue: type
|
|
},
|
|
goodsSort: {
|
|
tabVal: this.activeValue.goodsSort
|
|
},
|
|
numberConfig: {
|
|
val: that.numConfig
|
|
},
|
|
bntStyleConfig: this.dataConfig.bntStyleConfig,
|
|
cartConfig: this.dataConfig.cartConfig,
|
|
bntConfig: this.dataConfig.bntConfig,
|
|
filletImg: {
|
|
type: 0,
|
|
val: 8
|
|
},
|
|
checkboxInfo: {
|
|
type: [0, 1, 2, 3, 4, 5]
|
|
},
|
|
toneConfig: {
|
|
tabVal: 0
|
|
},
|
|
toneCartConfig: this.dataConfig.toneCartConfig,
|
|
bntBgColor: this.dataConfig.bntBgColor,
|
|
goodsName: {
|
|
tabVal: 1
|
|
},
|
|
goodsNameColor: {
|
|
color: [
|
|
{
|
|
item: '#333333'
|
|
}
|
|
]
|
|
},
|
|
goodsPriceColor: {
|
|
color: [
|
|
{
|
|
item: 'var(--view-theme)'
|
|
}
|
|
]
|
|
},
|
|
topConfig: {
|
|
val: 0
|
|
},
|
|
prConfig: {
|
|
val: 0
|
|
},
|
|
bottomConfig: {
|
|
val: 0
|
|
},
|
|
mbConfig: {
|
|
val: 0
|
|
},
|
|
bottomBgColor: {
|
|
color: [
|
|
{
|
|
item: ''
|
|
}
|
|
]
|
|
},
|
|
fillet: this.dataConfig.fillet,
|
|
name: 'promotionList'
|
|
};
|
|
that.goodDataConfig = goodDataConfig;
|
|
},
|
|
mounted() {
|
|
let view = uni.createSelectorQuery().in(this).select('.nav-bd');
|
|
let views = uni.createSelectorQuery().in(this).select('.nav-bd-box');
|
|
view
|
|
.boundingClientRect((data) => {
|
|
this.navBdH = data.height;
|
|
})
|
|
.exec();
|
|
if (!this.dataConfig.slideConfig.tabVal) {
|
|
uni.$on('onPageScroll', () => {
|
|
views
|
|
.boundingClientRect((data) => {
|
|
this.sticky = data.top <= this.positionTop;
|
|
})
|
|
.exec();
|
|
});
|
|
}
|
|
},
|
|
methods: {
|
|
observeVideo() {
|
|
this.autoplay = true;
|
|
// let observer = uni.createIntersectionObserver(this, { observeAll: true });
|
|
// observer.relativeToViewport().observe('.video', res => {
|
|
// if (res.intersectionRatio) {
|
|
// uni.createVideoContext(res.id, this).play();
|
|
// } else{
|
|
// uni.createVideoContext(res.id, this).pause();
|
|
// }
|
|
// });
|
|
},
|
|
// 促销列表的点击事件；
|
|
changeTab(item) {
|
|
this.goodType = item.tabVal;
|
|
this.activeValue = item;
|
|
// this.tempArr = [];
|
|
// this.page = 1;
|
|
// this.loadend = false;
|
|
// let onloadH = true;
|
|
// this.getGroomList(onloadH);
|
|
},
|
|
// 精品推荐
|
|
getGroomList(onloadH) {
|
|
let that = this;
|
|
let type = that.goodType == 0 ? 3 : that.goodType;
|
|
if (that.loadend) return false;
|
|
if (that.loading) return false;
|
|
if (onloadH) {
|
|
that.$set(that, 'iSshowH', true);
|
|
}
|
|
let datas = {
|
|
page: that.page,
|
|
limit: this.numConfig
|
|
};
|
|
if (type == 1) {
|
|
datas.ids = that.activeValue.goodsList.ids.join();
|
|
} else if (type == 2) {
|
|
datas.brand_id = that.activeValue.brandConfig.brandVal.join();
|
|
} else if (type == 3) {
|
|
datas.cate_id = that.activeValue.selectConfig.activeValue.join();
|
|
} else if (type == 4) {
|
|
datas.store_label_id = that.activeValue.goodsLabel.activeValue.join();
|
|
}
|
|
getProductslist(datas)
|
|
.then(({ data }) => {
|
|
that.$set(that, 'iSshowH', false);
|
|
let maxPage = Math.ceil(this.numConfig / this.limit);
|
|
let list = data,
|
|
loadend = list.length < that.limit || that.page >= maxPage;
|
|
let tempArr = that.$util.SplitArray(list, that.tempArr);
|
|
that.$set(that, 'tempArr', tempArr.slice(0, this.numConfig));
|
|
that.loadend = loadend;
|
|
that.loadTitle = loadend ? '没有更多内容啦~' : '加载更多';
|
|
that.page = that.page + 1;
|
|
that.loading = false;
|
|
})
|
|
.catch((res) => {
|
|
that.loading = false;
|
|
that.loadTitle = '加载更多';
|
|
});
|
|
},
|
|
// 首发新品切换
|
|
ProductNavTab(item, index) {
|
|
this.ProductNavindex = index;
|
|
this.changeTab(item);
|
|
},
|
|
goDetail(item) {
|
|
this.$emit('detail', item);
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
// 这里可以自行配置
|
|
$border-radius: 10px;
|
|
|
|
.index-product-wrapper {
|
|
&.on {
|
|
min-height: 1500rpx;
|
|
}
|
|
|
|
.nav-bd {
|
|
position: relative;
|
|
top: 0;
|
|
right: 0;
|
|
left: 0;
|
|
z-index: 99;
|
|
|
|
&.nav-bd2 {
|
|
.item {
|
|
position: relative;
|
|
padding: 18rpx 0;
|
|
margin-right: 56rpx;
|
|
|
|
&:first-child {
|
|
// margin-left: 24rpx;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
&.on {
|
|
.txt {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
|
|
// .line {
|
|
// background: linear-gradient(90deg, var(--view-gradient) 0, var(--view-theme) 100%);
|
|
// }
|
|
}
|
|
|
|
.txt {
|
|
position: relative;
|
|
z-index: 1;
|
|
font-size: 28rpx;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
bottom: 22rpx;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 8rpx;
|
|
border-radius: 4rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.nav-bd3 {
|
|
.item {
|
|
position: relative;
|
|
padding: 18rpx 0;
|
|
margin-right: 56rpx;
|
|
|
|
&:first-child {
|
|
// margin-left: 24rpx;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
&.on {
|
|
.txt {
|
|
font-weight: 500;
|
|
font-size: 32rpx;
|
|
color: #e93323;
|
|
}
|
|
|
|
// .line {
|
|
// border-bottom-color: var(--view-theme);
|
|
// }
|
|
}
|
|
|
|
.txt {
|
|
font-size: 28rpx;
|
|
line-height: 44rpx;
|
|
}
|
|
|
|
.line {
|
|
position: absolute;
|
|
bottom: 8rpx;
|
|
left: 50%;
|
|
width: 64rpx;
|
|
height: 64rpx;
|
|
border: 4rpx solid transparent;
|
|
border-radius: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.nav-bd4 {
|
|
.item {
|
|
padding: 16rpx 0;
|
|
margin-right: 16rpx;
|
|
|
|
&:first-child {
|
|
// margin-left: 20rpx;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 20rpx;
|
|
}
|
|
|
|
&.on {
|
|
.txt {
|
|
background: linear-gradient(90deg, #ff7931 0%, #e93323 100%);
|
|
font-size: 26rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.txt {
|
|
height: 48rpx;
|
|
padding: 0 20rpx;
|
|
border-radius: 24rpx;
|
|
font-size: 28rpx;
|
|
line-height: 48rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
&.nav-bd5 {
|
|
padding-left: 20rpx;
|
|
.item {
|
|
padding: 20rpx 0;
|
|
margin-right: 16rpx;
|
|
|
|
&:first-child {
|
|
// margin-left: 24rpx;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 24rpx;
|
|
}
|
|
|
|
&.on {
|
|
.image-wrap {
|
|
border-color: var(--view-theme);
|
|
background: #ffffff;
|
|
}
|
|
|
|
.txt {
|
|
// background: linear-gradient(90deg, #FF7931 0%, #E93323 100%);
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.image-wrap {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 104rpx;
|
|
height: 104rpx;
|
|
border: 3rpx solid transparent;
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.image {
|
|
width: 92rpx;
|
|
height: 92rpx;
|
|
border: 1rpx solid #eeeeee;
|
|
border-radius: 50%;
|
|
}
|
|
|
|
.txt {
|
|
height: 40rpx;
|
|
padding: 0 12rpx;
|
|
border-radius: 20rpx;
|
|
margin-top: 8rpx;
|
|
font-size: 24rpx;
|
|
line-height: 40rpx;
|
|
color: #333333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.scroll-view {
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.item {
|
|
display: inline-block;
|
|
padding: 20rpx 0 14rpx;
|
|
margin-right: 66rpx;
|
|
text-align: center;
|
|
|
|
&:first-child {
|
|
// margin-left: 36rpx;
|
|
}
|
|
|
|
&:last-child {
|
|
margin-right: 36rpx;
|
|
}
|
|
|
|
&.on {
|
|
.txt {
|
|
font-weight: 500;
|
|
color: #e93323;
|
|
}
|
|
|
|
.label {
|
|
background: linear-gradient(90deg, #ff7931 0%, #e93323 100%);
|
|
font-size: 22rpx;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
|
|
.txt {
|
|
font-size: 30rpx;
|
|
line-height: 42rpx;
|
|
color: #282828;
|
|
}
|
|
|
|
.label {
|
|
display: inline-block;
|
|
height: 38rpx;
|
|
padding: 0 12rpx;
|
|
border-radius: 19rpx;
|
|
margin-top: 6rpx;
|
|
font-size: 24rpx;
|
|
line-height: 38rpx;
|
|
color: #999999;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|