Skip to content

M
mayi-mp-shop
Commit dc75955f by hxx
Options

优惠券优化

parent 80e75cae
Showing with 73 additions and 27 deletions
src/components/activity/coupon.vue
...@@ -9,9 +9,10 @@ ...@@ -9,9 +9,10 @@
<div class="coupon" :class="render?'coupon'+datas.componentData.style:''"> <div class="coupon" :class="render?'coupon'+datas.componentData.style:''">
<div class="couponList clearfix" :style="{'white-space':datas.componentData.isSlide ? 'nowrap' : 'normal'}"> <div class="couponList clearfix" :style="{'white-space':datas.componentData.isSlide ? 'nowrap' : 'normal'}">
<template v-if="datas.componentData.style==4 && datas.componentData.sort == 1"> <template v-if="datas.componentData.style==4 && datas.componentData.sort == 1">
<template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box9 clearfix" class="coupon-box coupon-box9 clearfix"
v-for="(item,index) in couponList" v-if="item.receiveTag"
:key="index" :key="index"
> >
<div class="coupon-sort9" <div class="coupon-sort9"
...@@ -33,11 +34,11 @@ ...@@ -33,11 +34,11 @@
<span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span> <span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">折</span> <span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">折</span>
</div> </div>
<div v-else-if="item.preferentialType==2&&item.receiveTag"> <div v-else-if="item.preferentialType==2">
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span> <span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span>
<span <span
class="price" class="price"
style="font-size:14px" style="font-size:14px;"
:style="{'color': datas.componentData.color && datas.componentData.color.hotColor}" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}"
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span> >{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div> </div>
...@@ -53,7 +54,10 @@ ...@@ -53,7 +54,10 @@
</div> </div>
<div class="content-r"> <div class="content-r">
<div class="coupon-box-title line-clamp1">{{item.couponName}}</div> <div class="coupon-box-title line-clamp1">{{item.couponName}}</div>
<div class="coupon-remark line-clamp1">{{item.backRemark}}</div> <div class="coupon-remark line-clamp1" v-if="!item.receiveEndTime">{{item.backRemark}}</div>
<div class="coupon-remark" style="position: relative;" v-else>
<div class="coupon-receive__wrapper">{{ item.receiveEndTime }} 结束</div>
</div>
<div class="box-r-bottom"> <div class="box-r-bottom">
<div class="coupon-time line-clamp1" style="width:100%" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"> <div class="coupon-time line-clamp1" style="width:100%" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}">
<div v-if="item.periodOfValidityType == 0"> <div v-if="item.periodOfValidityType == 0">
...@@ -74,6 +78,9 @@ ...@@ -74,6 +78,9 @@
<template v-if="item.periodOfValidityType == 2"> <template v-if="item.periodOfValidityType == 2">
领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效 领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效
</template> </template>
<template v-if="item.periodOfValidityType == 3">
领到券开始到当月月底有效
</template>
</div> </div>
</div> </div>
</div> </div>
...@@ -85,10 +92,12 @@ ...@@ -85,10 +92,12 @@
</div> </div>
</div> </div>
</template> </template>
</template>
<template v-if="datas.componentData.style==4 && datas.componentData.sort == 2"> <template v-if="datas.componentData.style==4 && datas.componentData.sort == 2">
<template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box8 clearfix" class="coupon-box coupon-box8 clearfix"
v-for="(item,index) in couponList" v-if="item.receiveTag"
:key="index" :key="index"
> >
<div class="coupon-sort8" <div class="coupon-sort8"
...@@ -110,11 +119,11 @@ ...@@ -110,11 +119,11 @@
<span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span> <span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">折</span> <span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">折</span>
</div> </div>
<div v-else-if="item.preferentialType==2&&item.receiveTag"> <div v-else-if="item.preferentialType==2">
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span> <span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span>
<span <span
class="price" class="price"
style="font-size:13px" style="font-size:13px;"
:style="{'color': datas.componentData.color && datas.componentData.color.hotColor}" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}"
> >
{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }} {{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}
...@@ -138,10 +147,12 @@ ...@@ -138,10 +147,12 @@
</div> </div>
</div> </div>
</template> </template>
</template>
<template v-if="datas.componentData.style==4 && datas.componentData.sort == 3"> <template v-if="datas.componentData.style==4 && datas.componentData.sort == 3">
<template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box7 clearfix" class="coupon-box coupon-box7 clearfix"
v-for="(item,index) in couponList" v-if="item.receiveTag"
:key="index" :key="index"
> >
<div class="coupon-sort7" <div class="coupon-sort7"
...@@ -156,11 +167,11 @@ ...@@ -156,11 +167,11 @@
<span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span> <span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">折</span> <span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">折</span>
</div> </div>
<div v-else-if="item.preferentialType==2&&item.receiveTag"> <div v-else-if="item.preferentialType==2">
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span> <span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span>
<span <span
class="price" class="price"
style="font-size:13px" style="font-size:13px;"
:style="{'color': datas.componentData.color && datas.componentData.color.hotColor}" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}"
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span> >{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div> </div>
...@@ -179,10 +190,12 @@ ...@@ -179,10 +190,12 @@
</div> </div>
</div> </div>
</template> </template>
</template>
<template v-if="datas.componentData.style==3 && datas.componentData.sort == 1"> <template v-if="datas.componentData.style==3 && datas.componentData.sort == 1">
<template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box6 clearfix" class="coupon-box coupon-box6 clearfix"
v-for="(item,index) in couponList" v-if="item.receiveTag"
:key="index" :key="index"
> >
<div class="coupon-sort6" <div class="coupon-sort6"
...@@ -198,11 +211,11 @@ ...@@ -198,11 +211,11 @@
<span class="price" style="font-size:24px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span> <span class="price" style="font-size:24px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;color:white;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">折</span> <span style="font-size:13px;color:white;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">折</span>
</div> </div>
<div v-else-if="item.preferentialType==2&&item.receiveTag"> <div v-else-if="item.preferentialType==2">
<span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span> <span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span>
<span <span
class="price" class="price"
style="font-size:13px" style="font-size:13px;"
:style="{'color':datas.componentData.color && datas.componentData.color.hotColor}"> :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">
{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }} {{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}
</span> </span>
...@@ -221,7 +234,10 @@ ...@@ -221,7 +234,10 @@
<div class="box-r" :style="{'background' : datas.componentData.color && datas.componentData.color.name}"> <div class="box-r" :style="{'background' : datas.componentData.color && datas.componentData.color.name}">
<div class="box-r-info"> <div class="box-r-info">
<div class="coupon-box-title line-clamp1">{{item.couponName}}</div> <div class="coupon-box-title line-clamp1">{{item.couponName}}</div>
<div class="coupon-remark line-clamp1">{{item.backRemark}}</div> <div class="coupon-remark line-clamp1" v-if="!item.receiveEndTime">{{item.backRemark}}</div>
<div class="coupon-remark" style="position: relative;" v-else>
<div class="coupon-receive__wrapper">{{ item.receiveEndTime }} 结束</div>
</div>
<div class="box-r-bottom"> <div class="box-r-bottom">
<div class="coupon-time line-clamp1" :style="{'display':datas.componentData.isSlide ? 'block' : ''}"> <div class="coupon-time line-clamp1" :style="{'display':datas.componentData.isSlide ? 'block' : ''}">
<div v-if="item.periodOfValidityType == 0"> <div v-if="item.periodOfValidityType == 0">
...@@ -242,6 +258,9 @@ ...@@ -242,6 +258,9 @@
<template v-if="item.periodOfValidityType == 2"> <template v-if="item.periodOfValidityType == 2">
领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效 领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效
</template> </template>
<template v-if="item.periodOfValidityType == 3">
领到券开始到当月月底有效
</template>
</div> </div>
</div> </div>
</div> </div>
...@@ -256,10 +275,12 @@ ...@@ -256,10 +275,12 @@
</div> </div>
</div> </div>
</template> </template>
</template>
<template v-if="datas.componentData.style==3 && datas.componentData.sort == 2"> <template v-if="datas.componentData.style==3 && datas.componentData.sort == 2">
<template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box5 clearfix" class="coupon-box coupon-box5 clearfix"
v-for="(item,index) in couponList" v-if="item.receiveTag"
:key="index" :key="index"
> >
<div class="coupon-sort5" <div class="coupon-sort5"
...@@ -274,11 +295,11 @@ ...@@ -274,11 +295,11 @@
<span class="price" style="font-size:24px;">{{item.preferentialDiscount}}</span> <span class="price" style="font-size:24px;">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;color:white;">折</span> <span style="font-size:13px;color:white;">折</span>
</div> </div>
<div v-else-if="item.preferentialType==2&&item.receiveTag"> <div v-else-if="item.preferentialType==2">
<span style="font-size:13px;">￥</span> <span style="font-size:13px;">￥</span>
<span <span
class="price" class="price"
style="font-size:15px" style="font-size:15px;"
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span> >{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div> </div>
<div class="limit" style="font-size:11px;margin-top:6px;"> <div class="limit" style="font-size:11px;margin-top:6px;">
...@@ -301,10 +322,12 @@ ...@@ -301,10 +322,12 @@
</div> </div>
</div> </div>
</template> </template>
</template>
<template v-if="datas.componentData.style==3 && datas.componentData.sort == 3"> <template v-if="datas.componentData.style==3 && datas.componentData.sort == 3">
<template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box4 clearfix" class="coupon-box coupon-box4 clearfix"
v-for="(item,index) in couponList" v-if="item.receiveTag"
:key="index" :key="index"
> >
<div class="coupon-sort4" <div class="coupon-sort4"
...@@ -321,11 +344,11 @@ ...@@ -321,11 +344,11 @@
<span class="price" style="font-size:24px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span> <span class="price" style="font-size:24px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;color:white;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">折</span> <span style="font-size:13px;color:white;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">折</span>
</div> </div>
<div v-else-if="item.preferentialType==2&&item.receiveTag"> <div v-else-if="item.preferentialType==2">
<span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span> <span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span>
<span <span
class="price" class="price"
style="font-size:14px" style="font-size:14px;"
:style="{'color':datas.componentData.color && datas.componentData.color.hotColor}" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}"
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span> >{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div> </div>
...@@ -348,10 +371,12 @@ ...@@ -348,10 +371,12 @@
</div> </div>
</div> </div>
</template> </template>
</template>
<template v-if="datas.componentData.style==1 && datas.componentData.sort == 3"> <template v-if="datas.componentData.style==1 && datas.componentData.sort == 3">
<template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box1 clearfix" class="coupon-box coupon-box1 clearfix"
v-for="(item,index) in couponList" v-if="item.receiveTag"
:key="index" :key="index"
> >
<div <div
...@@ -367,7 +392,7 @@ ...@@ -367,7 +392,7 @@
<span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span> <span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;color:white">折</span> <span style="font-size:13px;color:white">折</span>
</div> </div>
<div v-else-if="item.preferentialType==2 && item.receiveTag"> <div v-else-if="item.preferentialType==2">
<span style="font-size:12px;color:white;">￥</span> <span style="font-size:12px;color:white;">￥</span>
<span class="price" style="font-size: 14px;">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span> <span class="price" style="font-size: 14px;">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div> </div>
...@@ -388,10 +413,12 @@ ...@@ -388,10 +413,12 @@
</div> </div>
</div> </div>
</template> </template>
</template>
<template v-if="datas.componentData.style==1 && datas.componentData.sort == 2"> <template v-if="datas.componentData.style==1 && datas.componentData.sort == 2">
<template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box2 clearfix" class="coupon-box coupon-box2 clearfix"
v-for="(item,index) in couponList" v-if="item.receiveTag"
:key="index" :key="index"
> >
<div <div
...@@ -408,7 +435,7 @@ ...@@ -408,7 +435,7 @@
<span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span> <span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;color:white">折</span> <span style="font-size:13px;color:white">折</span>
</div> </div>
<div v-else-if="item.preferentialType==2 && item.receiveTag"> <div v-else-if="item.preferentialType==2">
<span style="font-size:12px;color:white;">￥</span> <span style="font-size:12px;color:white;">￥</span>
<span class="price">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span> <span class="price">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div> </div>
...@@ -431,10 +458,12 @@ ...@@ -431,10 +458,12 @@
</div> </div>
</div> </div>
</template> </template>
</template>
<template v-if="datas.componentData.style==1 && datas.componentData.sort == 1"> <template v-if="datas.componentData.style==1 && datas.componentData.sort == 1">
<template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box3 clearfix" class="coupon-box coupon-box3 clearfix"
v-for="(item,index) in couponList" v-if="item.receiveTag"
:key="index" :key="index"
> >
<div <div
...@@ -453,7 +482,7 @@ ...@@ -453,7 +482,7 @@
<span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span> <span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;color:white">折</span> <span style="font-size:13px;color:white">折</span>
</div> </div>
<div v-else-if="item.preferentialType == 2 && item.receiveTag" style="display: flex;justify-content: center;align-items: center;"> <div v-else-if="item.preferentialType == 2" style="display: flex;justify-content: center;align-items: center;">
<span style="font-size:12px;color:white;">￥</span> <span style="font-size:12px;color:white;">￥</span>
<span class="price" style="font-size:12px;"> <span class="price" style="font-size:12px;">
{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }} {{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}
...@@ -472,7 +501,10 @@ ...@@ -472,7 +501,10 @@
</div> </div>
<div class="box-r"> <div class="box-r">
<div class="coupon-box-title line-clamp1">{{item.couponName}}</div> <div class="coupon-box-title line-clamp1">{{item.couponName}}</div>
<div class="coupon-remark line-clamp1">{{item.backRemark}}</div> <div class="coupon-remark line-clamp1" v-if="!item.receiveEndTime">{{item.backRemark}}</div>
<div class="coupon-remark" style="position: relative;" v-else>
<div class="coupon-receive__wrapper">{{ item.receiveEndTime }} 结束</div>
</div>
<div class="box-r-bottom"> <div class="box-r-bottom">
<div class="coupon-time line-clamp1" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"> <div class="coupon-time line-clamp1" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}">
<div v-if="item.periodOfValidityType == 0"> <div v-if="item.periodOfValidityType == 0">
...@@ -489,6 +521,9 @@ ...@@ -489,6 +521,9 @@
</div> </div>
<template v-if="item.periodOfValidityType == 1">领到券当日开始{{ item.effectiveDaysFromToday }}天内有效</template> <template v-if="item.periodOfValidityType == 1">领到券当日开始{{ item.effectiveDaysFromToday }}天内有效</template>
<template v-if="item.periodOfValidityType == 2">领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效</template> <template v-if="item.periodOfValidityType == 2">领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效</template>
<template v-if="item.periodOfValidityType == 3">
领到券开始到当月月底有效
</template>
</div> </div>
<div class="coupon-receive" <div class="coupon-receive"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}" :style="{'background' : datas.componentData.color && datas.componentData.color.name}"
...@@ -498,6 +533,7 @@ ...@@ -498,6 +533,7 @@
</div> </div>
</div> </div>
</template> </template>
</template>
</div> </div>
</div> </div>
</div> </div>
...@@ -665,7 +701,9 @@ export default { ...@@ -665,7 +701,9 @@ export default {
this.$router.push({ name: "login-accountLogin", query }); this.$router.push({ name: "login-accountLogin", query });
} }
}, },
// 判断当前优惠券是否在领取时间范围内
isShowRangeCoupon(item) { isShowRangeCoupon(item) {
if (!item.receiveStartTime && !item.receiveEndTime) return true;
const startTimestamp = new Date(item.receiveStartTime).getTime(); const startTimestamp = new Date(item.receiveStartTime).getTime();
const endTimestamp = new Date(item.receiveEndTime).getTime(); const endTimestamp = new Date(item.receiveEndTime).getTime();
const nowTimestamp = new Date().getTime(); const nowTimestamp = new Date().getTime();
...@@ -1199,6 +1237,10 @@ export default { ...@@ -1199,6 +1237,10 @@ export default {
line-height: 16px; line-height: 16px;
height: 16px; height: 16px;
margin-top: 7px; margin-top: 7px;
.coupon-receive__wrapper {
white-space: nowrap;
font-size: 10px;
}
} }
.coupon-time{ .coupon-time{
font-size: 11px; font-size: 11px;
...@@ -1469,6 +1511,10 @@ export default { ...@@ -1469,6 +1511,10 @@ export default {
line-height: 16px; line-height: 16px;
height: 16px; height: 16px;
margin-top: 7px; margin-top: 7px;
.coupon-receive__wrapper {
white-space: nowrap;
font-size: 10px;
}
} }
.coupon-time{ .coupon-time{
font-size: 11px; font-size: 11px;
......
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