<template>
|
<view class="activity-wrap coreshop-padding-10 coreshop-margin-10 coreshop-bg-white coreshop-border-radius-trbl-18" v-if="count">
|
<view class="coreshop-padding-bottom-10 coreshop-padding-top-10 groupon-title coreshop-min-height-30">
|
<view class="title-box coreshop-flex coreshop-justify-between">
|
<view class="coreshop-font-16 coreshop-text-black coreshop-font-weight-bold">每日拼团</view>
|
<u-icon name="arrow-right-double" size="12" label="查看更多" labelSize="12" labelPos="left" @tap="goPinTuanList()"></u-icon>
|
</view>
|
</view>
|
<view class="coreshop-divider">
|
<view class="complete"></view>
|
</view>
|
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
|
<view class="goods-box coreshop-flex coreshop-justify-between coreshop-text-black">
|
<view class="min-goods" v-for="(item, index) in coreshopData.parameters.list" :key="index" @tap="goPinTuanDetail(item.id)">
|
<view class="img-box">
|
<image class="img" :src="item.goodThumbnail" mode=""></image>
|
</view>
|
<view class="item-card-bottom coreshop-padding-10">
|
<view class="goods-title u-line-1">{{ item.name }}</view>
|
<view class="price coreshop-margin-bottom-5">{{item.pinTuanPrice}}</view>
|
|
<view class="coreshop-flex coreshop-align-center coreshop-flex-direction-row coreshop-justify-between">
|
<view class="original-price">￥{{ item.pinTuanPrice + item.discountAmount }}</view>
|
<view class="coreshop-font-10">
|
<u-tag :text="'限购'+item.maxNums" type="warning" plain plainFill size="mini" v-if="item.maxNums>0"></u-tag>
|
<u-tag text="不限购" type="success" plain plainFill size="mini" v-if="item.maxNums==0"></u-tag>
|
</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
name: "coreshopPinTuan",
|
props: {
|
coreshopData: {
|
required: false,
|
}
|
},
|
data() {
|
return {
|
goodsList: [],
|
swiperCurrent: 0
|
};
|
},
|
created() {
|
let that = this;
|
if (that.coreshopData.parameters.list.length > 0) {
|
let arr = that.sortData(that.coreshopData.parameters.list, 4);
|
that.goodsList = arr;
|
}
|
},
|
computed: {
|
count() {
|
return (this.coreshopData.parameters.list.length > 0)
|
}
|
},
|
methods: {
|
swiperChange(e) {
|
this.swiperCurrent = e.detail.current;
|
},
|
// 数据分层
|
sortData(oArr, length) {
|
let arr = [];
|
let minArr = [];
|
oArr.forEach(c => {
|
if (minArr.length === length) {
|
minArr = [];
|
}
|
if (minArr.length === 0) {
|
arr.push(minArr);
|
}
|
minArr.push(c);
|
});
|
return arr;
|
}
|
},
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.activity-wrap { background-color: #fff; min-height: 150px; background: linear-gradient(#faecca 20%, #ffffff 30%, #ffffff 100%);
|
.groupon-title { background: url($apiFilesUrl+'/static/images/pinTuan/groupon_title_bg.png') no-repeat; background-position: center top; background-size: 100% auto; }
|
.title-box {
|
.title-text { font-size: 16px; font-weight: bold; color: #333333; }
|
.more-box {
|
.more-text { font-size: 11px; font-weight: 500; color: #333333; }
|
.more-icon { font-size: 12px; color: #333333; }
|
}
|
}
|
|
.scroll-box,
|
.goods-box { min-height: 190px; width: 100%; }
|
}
|
|
// 商品卡片
|
.min-goods { background: #fffaef; box-shadow: 0px 3.5px 4px 0.5px rgba(162, 117, 27, 0.24); border-radius: 5px; margin-right: 15px !important;
|
.img-box { width: 140px; height: 140px; overflow: hidden; position: relative; border-radius: 5px 5px 0 0;
|
.img { width: 140px; height: 140px; background-color: #ccc; }
|
}
|
.item-card-bottom { min-height: 75px; background: url($apiFilesUrl+'/static/images/pinTuan/groupon_goods_bg.png') no-repeat; background-position: bottom center; background-size: 100% 100%; }
|
.goods-title { font-size: 13px; font-weight: 500; color: #000000; line-height: 13px; margin-bottom: 5px; }
|
.price { font-size: 15px; font-weight: 500; color: #ff0000;
|
&::before { content: '￥'; font-size: 12px; }
|
}
|
.original-price { font-size: 20rpx; font-weight: 500; text-decoration: line-through; color: #c4c4c4; }
|
.groupon-num-box {
|
.avatar-box { direction: rtl; unicode-bidi: bidi-override; height: 30rpx;
|
.avatar-img { width: 30rpx; height: 30rpx; border-radius: 50%; background-color: #f5f5f5; }
|
}
|
.groupon-num-text { font-size: 18rpx; font-weight: 500; color: #e9b461; }
|
}
|
}
|
</style>
|
