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