Skip to content

M
mayi-mp-shop
Commit a23bc750 by hxx
Options

优惠券优化

parent dc75955f
Showing with 60 additions and 19 deletions
src/components/activity/coupon.vue
...@@ -12,7 +12,7 @@ ...@@ -12,7 +12,7 @@
<template v-for="(item,index) in couponList"> <template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box9 clearfix" class="coupon-box coupon-box9 clearfix"
v-if="item.receiveTag" v-if="item.receiveTag != 2"
:key="index" :key="index"
> >
<div class="coupon-sort9" <div class="coupon-sort9"
...@@ -54,9 +54,21 @@ ...@@ -54,9 +54,21 @@
</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" v-if="!item.receiveEndTime">{{item.backRemark}}</div> <div
class="coupon-remark line-clamp1"
v-if="!item.receiveStartTime && !item.receiveEndTime"
>
{{item.backRemark}}
</div>
<div class="coupon-remark" style="position: relative;" v-else> <div class="coupon-remark" style="position: relative;" v-else>
<div class="coupon-receive__wrapper">{{ item.receiveEndTime }} 结束</div> <div class="coupon-receive__wrapper">
<template v-if="item.receiveTag == 0">
{{ item.receiveStartTime }} 开始
</template>
<template v-else>
{{ item.receiveEndTime }} 结束
</template>
</div>
</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' : ''}">
...@@ -97,7 +109,7 @@ ...@@ -97,7 +109,7 @@
<template v-for="(item,index) in couponList"> <template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box8 clearfix" class="coupon-box coupon-box8 clearfix"
v-if="item.receiveTag" v-if="item.receiveTag != 2"
:key="index" :key="index"
> >
<div class="coupon-sort8" <div class="coupon-sort8"
...@@ -152,7 +164,7 @@ ...@@ -152,7 +164,7 @@
<template v-for="(item,index) in couponList"> <template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box7 clearfix" class="coupon-box coupon-box7 clearfix"
v-if="item.receiveTag" v-if="item.receiveTag != 2"
:key="index" :key="index"
> >
<div class="coupon-sort7" <div class="coupon-sort7"
...@@ -195,7 +207,7 @@ ...@@ -195,7 +207,7 @@
<template v-for="(item,index) in couponList"> <template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box6 clearfix" class="coupon-box coupon-box6 clearfix"
v-if="item.receiveTag" v-if="item.receiveTag != 2"
:key="index" :key="index"
> >
<div class="coupon-sort6" <div class="coupon-sort6"
...@@ -234,9 +246,21 @@ ...@@ -234,9 +246,21 @@
<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" v-if="!item.receiveEndTime">{{item.backRemark}}</div> <div
class="coupon-remark line-clamp1"
v-if="!item.receiveStartTime && !item.receiveEndTime"
>
{{item.backRemark}}
</div>
<div class="coupon-remark" style="position: relative;" v-else> <div class="coupon-remark" style="position: relative;" v-else>
<div class="coupon-receive__wrapper">{{ item.receiveEndTime }} 结束</div> <div class="coupon-receive__wrapper">
<template v-if="item.receiveTag == 0">
{{ item.receiveStartTime }} 开始
</template>
<template v-else>
{{ item.receiveEndTime }} 结束
</template>
</div>
</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' : ''}">
...@@ -280,7 +304,7 @@ ...@@ -280,7 +304,7 @@
<template v-for="(item,index) in couponList"> <template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box5 clearfix" class="coupon-box coupon-box5 clearfix"
v-if="item.receiveTag" v-if="item.receiveTag != 2"
:key="index" :key="index"
> >
<div class="coupon-sort5" <div class="coupon-sort5"
...@@ -327,7 +351,7 @@ ...@@ -327,7 +351,7 @@
<template v-for="(item,index) in couponList"> <template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box4 clearfix" class="coupon-box coupon-box4 clearfix"
v-if="item.receiveTag" v-if="item.receiveTag != 2"
:key="index" :key="index"
> >
<div class="coupon-sort4" <div class="coupon-sort4"
...@@ -376,7 +400,7 @@ ...@@ -376,7 +400,7 @@
<template v-for="(item,index) in couponList"> <template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box1 clearfix" class="coupon-box coupon-box1 clearfix"
v-if="item.receiveTag" v-if="item.receiveTag != 2"
:key="index" :key="index"
> >
<div <div
...@@ -418,7 +442,7 @@ ...@@ -418,7 +442,7 @@
<template v-for="(item,index) in couponList"> <template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box2 clearfix" class="coupon-box coupon-box2 clearfix"
v-if="item.receiveTag" v-if="item.receiveTag != 2"
:key="index" :key="index"
> >
<div <div
...@@ -463,7 +487,7 @@ ...@@ -463,7 +487,7 @@
<template v-for="(item,index) in couponList"> <template v-for="(item,index) in couponList">
<div <div
class="coupon-box coupon-box3 clearfix" class="coupon-box coupon-box3 clearfix"
v-if="item.receiveTag" v-if="item.receiveTag != 2"
:key="index" :key="index"
> >
<div <div
...@@ -501,9 +525,21 @@ ...@@ -501,9 +525,21 @@
</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" v-if="!item.receiveEndTime">{{item.backRemark}}</div> <div
class="coupon-remark line-clamp1"
v-if="!item.receiveStartTime && !item.receiveEndTime"
>
{{item.backRemark}}
</div>
<div class="coupon-remark" style="position: relative;" v-else> <div class="coupon-remark" style="position: relative;" v-else>
<div class="coupon-receive__wrapper">{{ item.receiveEndTime }} 结束</div> <div class="coupon-receive__wrapper">
<template v-if="item.receiveTag == 0">
{{ item.receiveStartTime }} 开始
</template>
<template v-else>
{{ item.receiveEndTime }} 结束
</template>
</div>
</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' : ''}">
...@@ -600,8 +636,8 @@ export default { ...@@ -600,8 +636,8 @@ export default {
if (item.preferentialType == 2) { if (item.preferentialType == 2) {
item.randomMoneyMinimum = this.keepSelfNum(item.randomMoneyMinimum); item.randomMoneyMinimum = this.keepSelfNum(item.randomMoneyMinimum);
item.randomMoneyMaximum = this.keepSelfNum(item.randomMoneyMaximum); item.randomMoneyMaximum = this.keepSelfNum(item.randomMoneyMaximum);
item.receiveTag = this.isShowRangeCoupon(item);
} }
item.receiveTag = this.isShowRangeCoupon(item);
}) })
...@@ -703,11 +739,14 @@ export default { ...@@ -703,11 +739,14 @@ export default {
}, },
// 判断当前优惠券是否在领取时间范围内 // 判断当前优惠券是否在领取时间范围内
isShowRangeCoupon(item) { isShowRangeCoupon(item) {
if (!item.receiveStartTime && !item.receiveEndTime) return true; // 0: 未到领取时间 1: 领取时间内 2: 超过领取时间
// 1. 如果没有设置领取开始时间和结束时间
if (!item.receiveStartTime && !item.receiveEndTime) return 1;
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();
return nowTimestamp >= startTimestamp && nowTimestamp <= endTimestamp; if (nowTimestamp < startTimestamp) return 0;
if (nowTimestamp > endTimestamp) return 2;
}, },
keepSelfNum(num) { keepSelfNum(num) {
let r; let r;
...@@ -1058,10 +1097,12 @@ export default { ...@@ -1058,10 +1097,12 @@ export default {
margin-top: 16px; margin-top: 16px;
width: 100%; width: 100%;
overflow: hidden; overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
.coupon-time{ .coupon-time{
font-size: 11px; font-size: 11px;
color: #333; color: #333;
width: 110px;
float: left; float: left;
} }
.coupon-receive{ .coupon-receive{
......
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