Skip to content

M
mayi-mp-shop
Commit 38c90cb2 by hxx
Options

优惠券改造

parent 02267fd5
Showing with 124 additions and 146 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 != 2" v-if="item.receiveTag == 1"
:key="index" :key="index"
> >
<div class="coupon-sort9" <div class="coupon-sort9"
...@@ -54,35 +54,17 @@ ...@@ -54,35 +54,17 @@
</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 <div class="coupon-remark" style="position: relative;" v-if="item.receiveStartTime && item.receiveEndTime">
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-receive__wrapper"> <div class="coupon-receive__wrapper">
<template v-if="item.receiveTag == 0"> <template v-if="item.receiveTag == 1">
{{ item.receiveStartTime }} 开始 {{ item.receiveEndTime }} 前可领
</template>
<template v-else>
{{ item.receiveEndTime }} 结束
</template> </template>
</div> </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" style="width:100%" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}">
<div v-if="item.periodOfValidityType == 0"> <div v-if="item.periodOfValidityType == 0">
<p {{ item.validText }}
v-if="typeof (item.effectiveDate) != 'undefined' && item.effectiveDate != null && item.effectiveDate != ''"
>
<span>始：{{ item.effectiveDate }}</span>
</p>
<p
v-if="typeof (item.expiryDate) != 'undefined' && item.expiryDate != null && item.expiryDate != ''"
>
<span>终：{{ item.expiryDate }}</span>
</p>
</div> </div>
<template v-if="item.periodOfValidityType == 1"> <template v-if="item.periodOfValidityType == 1">
领到券当日开始{{ item.effectiveDaysFromToday }}天内有效 领到券当日开始{{ item.effectiveDaysFromToday }}天内有效
...@@ -109,7 +91,7 @@ ...@@ -109,7 +91,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 != 2" v-if="item.receiveTag == 1"
:key="index" :key="index"
> >
<div class="coupon-sort8" <div class="coupon-sort8"
...@@ -164,7 +146,7 @@ ...@@ -164,7 +146,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 != 2" v-if="item.receiveTag == 1"
:key="index" :key="index"
> >
<div class="coupon-sort7" <div class="coupon-sort7"
...@@ -207,7 +189,7 @@ ...@@ -207,7 +189,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 != 2" v-if="item.receiveTag == 1"
:key="index" :key="index"
> >
<div class="coupon-sort6" <div class="coupon-sort6"
...@@ -246,35 +228,24 @@ ...@@ -246,35 +228,24 @@
<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 <div class="coupon-remark" style="position: relative;" v-if="item.receiveStartTime && item.receiveEndTime">
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-receive__wrapper"> <div class="coupon-receive__wrapper">
<template v-if="item.receiveTag == 0"> <template v-if="item.receiveTag == 1">
{{ item.receiveStartTime }} 开始 {{ item.receiveEndTime }} 前可领
</template>
<template v-else>
{{ item.receiveEndTime }} 结束
</template> </template>
</div> </div>
</div> </div>
<div class="receive" v-if="item.receiveTag != 0" :style="{
'color':datas.componentData.color && datas.componentData.color.hotColor,
'background':datas.componentData.color && datas.componentData.color.type == 1 ? 'rgba(255,255,255,.8)' : 'linear-gradient(0deg,#FFE590 50%, #FFF0D1 100%)'
}">
<div>立即</div>
<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" :style="{'display':datas.componentData.isSlide ? 'block' : ''}">
<div v-if="item.periodOfValidityType == 0"> <div class="coupon-expire" v-if="item.periodOfValidityType == 0">
<p {{ item.validText }}
v-if="typeof (item.effectiveDate) != 'undefined' && item.effectiveDate != null && item.effectiveDate != ''"
>
<span>始：{{ item.effectiveDate }}</span>
</p>
<p
v-if="typeof (item.expiryDate) != 'undefined' && item.expiryDate != null && item.expiryDate != ''"
>
<span>终：{{ item.expiryDate }}</span>
</p>
</div> </div>
<template v-if="item.periodOfValidityType == 1" > <template v-if="item.periodOfValidityType == 1" >
领到券当日开始{{ item.effectiveDaysFromToday }}天内有效 领到券当日开始{{ item.effectiveDaysFromToday }}天内有效
...@@ -288,13 +259,6 @@ ...@@ -288,13 +259,6 @@
</div> </div>
</div> </div>
</div> </div>
<div class="receive" v-if="item.receiveTag != 0" :style="{
'color':datas.componentData.color && datas.componentData.color.hotColor,
'background':datas.componentData.color && datas.componentData.color.type == 1 ? 'rgba(255,255,255,.8)' : 'linear-gradient(0deg,#FFE590 50%, #FFF0D1 100%)'
}">
<div>立即</div>
<div>领取</div>
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -304,7 +268,7 @@ ...@@ -304,7 +268,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 != 2" v-if="item.receiveTag == 1"
:key="index" :key="index"
> >
<div class="coupon-sort5" <div class="coupon-sort5"
...@@ -351,7 +315,7 @@ ...@@ -351,7 +315,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 != 2" v-if="item.receiveTag == 1"
:key="index" :key="index"
> >
<div class="coupon-sort4" <div class="coupon-sort4"
...@@ -400,7 +364,7 @@ ...@@ -400,7 +364,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 != 2" v-if="item.receiveTag == 1"
:key="index" :key="index"
> >
<div <div
...@@ -442,7 +406,7 @@ ...@@ -442,7 +406,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 != 2" v-if="item.receiveTag == 1"
:key="index" :key="index"
> >
<div <div
...@@ -487,7 +451,7 @@ ...@@ -487,7 +451,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 != 2" v-if="item.receiveTag == 1"
:key="index" :key="index"
> >
<div <div
...@@ -524,36 +488,23 @@ ...@@ -524,36 +488,23 @@
</div> </div>
</div> </div>
<div class="box-r"> <div class="box-r">
<div class="coupon-title__wrapper">
<div class="coupon-box-title line-clamp1">{{item.couponName}}</div> <div class="coupon-box-title line-clamp1">{{item.couponName}}</div>
<div <div class="coupon-receive" v-if="item.receiveTag != 0"
class="coupon-remark line-clamp1" :style="{'background' : datas.componentData.color && datas.componentData.color.name}"
v-if="!item.receiveStartTime && !item.receiveEndTime" >立即领取</div>
>
{{item.backRemark}}
</div> </div>
<div class="coupon-remark" style="position: relative;" v-else> <div class="coupon-remark" style="position: relative;" v-if="item.receiveStartTime && item.receiveEndTime">
<div class="coupon-receive__wrapper"> <div class="coupon-receive__wrapper">
<template v-if="item.receiveTag == 0"> <template v-if="item.receiveTag == 1">
{{ item.receiveStartTime }} 开始 {{ item.receiveEndTime }} 前可领
</template>
<template v-else>
{{ item.receiveEndTime }} 结束
</template> </template>
</div> </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" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}">
<div v-if="item.periodOfValidityType == 0"> <div style="display: flex;align-items: center;" v-if="item.periodOfValidityType == 0">
<template {{ item.validText }}
v-if="typeof (item.effectiveDate) != 'undefined' && item.effectiveDate != null && item.effectiveDate != ''"
>
<span>始：{{ item.effectiveDate }}</span>
</template>
<template
v-if="typeof (item.expiryDate) != 'undefined' && item.expiryDate != null && item.expiryDate != ''"
>
<span>终：{{ item.expiryDate }}</span>
</template>
</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>
...@@ -561,9 +512,6 @@ ...@@ -561,9 +512,6 @@
领到券开始到当月月底有效 领到券开始到当月月底有效
</template> </template>
</div> </div>
<div class="coupon-receive" v-if="item.receiveTag != 0"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>立即领取</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -637,6 +585,12 @@ export default { ...@@ -637,6 +585,12 @@ export default {
item.randomMoneyMinimum = this.keepSelfNum(item.randomMoneyMinimum); item.randomMoneyMinimum = this.keepSelfNum(item.randomMoneyMinimum);
item.randomMoneyMaximum = this.keepSelfNum(item.randomMoneyMaximum); item.randomMoneyMaximum = this.keepSelfNum(item.randomMoneyMaximum);
} }
if (item.receiveEndTime) {
item.receiveEndTime = this.formatDate(item.receiveEndTime);
}
if (item.periodOfValidityType == 0) {
item.validText = this.validText(item);
}
item.receiveTag = this.isShowRangeCoupon(item); item.receiveTag = this.isShowRangeCoupon(item);
}) })
...@@ -754,6 +708,7 @@ export default { ...@@ -754,6 +708,7 @@ export default {
const nowTimestamp = new Date().getTime(); const nowTimestamp = new Date().getTime();
if (nowTimestamp < startTimestamp) return 0; if (nowTimestamp < startTimestamp) return 0;
if (nowTimestamp > endTimestamp) return 2; if (nowTimestamp > endTimestamp) return 2;
return 1;
}, },
keepSelfNum(num) { keepSelfNum(num) {
let r; let r;
...@@ -764,6 +719,20 @@ export default { ...@@ -764,6 +719,20 @@ export default {
r = 0; r = 0;
} }
return num.toFixed(r); return num.toFixed(r);
},
formatDate(date) {
return date.split(' ')[0];
},
validText(item) {
let effectiveDate = '', expiryDate = '';
if (typeof (item.effectiveDate) != 'undefined' && item.effectiveDate != null && item.effectiveDate != '') {
effectiveDate = item.effectiveDate.split(' ')[0].trim();
}
if (typeof (item.expiryDate) != 'undefined' && item.expiryDate != null && item.expiryDate != '') {
expiryDate = item.expiryDate.split(' ')[0].trim();
}
return `有效期：${effectiveDate} ~ ${expiryDate}`;
} }
}, },
}; };
...@@ -1084,15 +1053,34 @@ export default { ...@@ -1084,15 +1053,34 @@ export default {
} }
.box-r{ .box-r{
flex: 1; flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: white; background-color: white;
padding: 12px; padding: 12px;
box-sizing: border-box; box-sizing: border-box;
.coupon-title__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
.coupon-box-title{ .coupon-box-title{
flex: 1;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
line-height: 20px; line-height: 20px;
margin-bottom: 7px; }
.coupon-receive{
width: 82px;
height: 24px;
border-radius: 12px;
text-align: center;
line-height: 24px;
color: white;
font-size: 11px;
}
} }
.coupon-remark{ .coupon-remark{
color: #999; color: #999;
...@@ -1101,26 +1089,13 @@ export default { ...@@ -1101,26 +1089,13 @@ export default {
height: 16px; height: 16px;
} }
.box-r-bottom{ .box-r-bottom{
margin-top: 16px;
width: 100%;
overflow: hidden;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
.coupon-time{ .coupon-time{
font-size: 11px; flex: 1;
color: #333; color: #333;
float: left; font-size: 12px;
}
.coupon-receive{
float: right;
width: 82px;
height: 24px;
border-radius: 12px;
text-align: center;
line-height: 24px;
color: white;
font-size: 11px;
} }
} }
} }
...@@ -1264,51 +1239,59 @@ export default { ...@@ -1264,51 +1239,59 @@ export default {
} }
.box-r{ .box-r{
width: 232px; width: 232px;
height: 100%;
position: absolute; position: absolute;
top: 0; top: 0;
right: 0; right: 0;
bottom: 0;
box-sizing: border-box; box-sizing: border-box;
-webkit-mask: radial-gradient(circle at -35% 50%, transparent 30%, white 1px); -webkit-mask: radial-gradient(circle at -35% 50%, transparent 30%, white 1px);
mask: radial-gradient(circle at -35% 50%, transparent 30%, white 1px); mask: radial-gradient(circle at -35% 50%, transparent 30%, white 1px);
padding-left: 28px; padding: 12px 12px 12px 28px;
.box-r-info{ .box-r-info{
color: white; color: white;
width: 120px; position: relative;
height: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
.receive{
position: absolute;
right: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 54px;
height: 54px;
border-radius: 50%;
font-size: 13px;
font-weight: bold;
}
.coupon-box-title{ .coupon-box-title{
font-size: 14px; font-size: 14px;
line-height: 20px; line-height: 20px;
margin-top: 14px;
} }
.coupon-remark{ .coupon-remark{
font-size: 12px; font-size: 12px;
line-height: 16px; line-height: 16px;
height: 16px; height: 16px;
margin-top: 7px;
.coupon-receive__wrapper {
white-space: nowrap;
font-size: 10px;
}
} }
.coupon-time{ .coupon-time{
font-size: 11px; font-size: 11px;
line-height: 15px; line-height: 15px;
margin-top: 18px;
.coupon-expire {
/* display: flex; */
white-space: nowrap;
/* FIXME: 多主题适配样式 */
/* transform: scale(.9);
margin-left: -10px; */
} }
} }
.receive{
position: absolute;
width: 54px;
height: 54px;
border-radius: 50%;
top: 25px;
right: 14px;
font-size: 13px;
font-weight: bold;
text-align: center;
line-height: 18px;
padding-top: 8px;
box-sizing: border-box;
} }
} }
} }
...@@ -1485,6 +1468,7 @@ export default { ...@@ -1485,6 +1468,7 @@ export default {
right: 0; right: 0;
} }
.box-content{ .box-content{
display: flex;
width: calc(100% - 10px); width: calc(100% - 10px);
height: 100px; height: 100px;
background-color: white; background-color: white;
...@@ -1523,7 +1507,6 @@ export default { ...@@ -1523,7 +1507,6 @@ export default {
height: 100%; height: 100%;
text-align: center; text-align: center;
position: relative; position: relative;
float: left;
box-sizing: border-box; box-sizing: border-box;
padding-top: 14px; padding-top: 14px;
.limit{ .limit{
...@@ -1542,41 +1525,36 @@ export default { ...@@ -1542,41 +1525,36 @@ export default {
} }
} }
.content-r{ .content-r{
float: left; display: flex;
width: 140px; flex-direction: column;
justify-content: space-between;
box-sizing: border-box; box-sizing: border-box;
padding-left: 20px; padding: 12px 0;
padding-top: 10px; margin-left: 12px;
.coupon-box-title{ .coupon-box-title{
font-size: 14px; font-size: 14px;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
line-height: 20px;
} }
.coupon-remark{ .coupon-remark{
font-size: 12px;
color: #666; color: #666;
line-height: 16px; font-size: 12px;
height: 16px;
margin-top: 7px;
.coupon-receive__wrapper {
white-space: nowrap;
font-size: 10px;
}
} }
.coupon-time{ .coupon-time{
font-size: 11px; white-space: nowrap;
color: #666; color: #666;
line-height: 15px; font-size: 12px;
margin-top: 19px;
} }
} }
.receive{ .receive{
position: absolute;
top: 15px;
right: 15px;
font-size: 14px; font-size: 14px;
color: #333; color: #333;
font-weight: bold; font-weight: bold;
text-align: center; text-align: center;
margin-top: 30px;
} }
} }
} }
......
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