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 @@
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box9 clearfix"
v-if="item.receiveTag != 2"
v-if="item.receiveTag == 1"
:key="index"
>
<div class="coupon-sort9"
......@@ -54,35 +54,17 @@
</div>
<div class="content-r">
<div class="coupon-box-title line-clamp1">{{item.couponName}}</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-if="item.receiveStartTime && item.receiveEndTime">
<div class="coupon-receive__wrapper">
<template v-if="item.receiveTag == 0">
{{ item.receiveStartTime }} 开始
</template>
<template v-else>
{{ item.receiveEndTime }} 结束
<template v-if="item.receiveTag == 1">
{{ item.receiveEndTime }} 前可领
</template>
</div>
</div>
<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">
<p
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>
{{ item.validText }}
</div>
<template v-if="item.periodOfValidityType == 1">
领到券当日开始{{ item.effectiveDaysFromToday }}天内有效
......@@ -109,7 +91,7 @@
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box8 clearfix"
v-if="item.receiveTag != 2"
v-if="item.receiveTag == 1"
:key="index"
>
<div class="coupon-sort8"
......@@ -164,7 +146,7 @@
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box7 clearfix"
v-if="item.receiveTag != 2"
v-if="item.receiveTag == 1"
:key="index"
>
<div class="coupon-sort7"
......@@ -207,7 +189,7 @@
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box6 clearfix"
v-if="item.receiveTag != 2"
v-if="item.receiveTag == 1"
:key="index"
>
<div class="coupon-sort6"
......@@ -246,35 +228,24 @@
<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"
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-if="item.receiveStartTime && item.receiveEndTime">
<div class="coupon-receive__wrapper">
<template v-if="item.receiveTag == 0">
{{ item.receiveStartTime }} 开始
</template>
<template v-else>
{{ item.receiveEndTime }} 结束
<template v-if="item.receiveTag == 1">
{{ item.receiveEndTime }} 前可领
</template>
</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="coupon-time line-clamp1" :style="{'display':datas.componentData.isSlide ? 'block' : ''}">
<div v-if="item.periodOfValidityType == 0">
<p
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 class="coupon-time" :style="{'display':datas.componentData.isSlide ? 'block' : ''}">
<div class="coupon-expire" v-if="item.periodOfValidityType == 0">
{{ item.validText }}
</div>
<template v-if="item.periodOfValidityType == 1" >
领到券当日开始{{ item.effectiveDaysFromToday }}天内有效
......@@ -288,13 +259,6 @@
</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>
......@@ -304,7 +268,7 @@
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box5 clearfix"
v-if="item.receiveTag != 2"
v-if="item.receiveTag == 1"
:key="index"
>
<div class="coupon-sort5"
......@@ -351,7 +315,7 @@
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box4 clearfix"
v-if="item.receiveTag != 2"
v-if="item.receiveTag == 1"
:key="index"
>
<div class="coupon-sort4"
......@@ -400,7 +364,7 @@
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box1 clearfix"
v-if="item.receiveTag != 2"
v-if="item.receiveTag == 1"
:key="index"
>
<div
......@@ -442,7 +406,7 @@
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box2 clearfix"
v-if="item.receiveTag != 2"
v-if="item.receiveTag == 1"
:key="index"
>
<div
......@@ -487,7 +451,7 @@
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box3 clearfix"
v-if="item.receiveTag != 2"
v-if="item.receiveTag == 1"
:key="index"
>
<div
......@@ -524,36 +488,23 @@
</div>
</div>
<div class="box-r">
<div class="coupon-title__wrapper">
<div class="coupon-box-title line-clamp1">{{item.couponName}}</div>
<div
class="coupon-remark line-clamp1"
v-if="!item.receiveStartTime && !item.receiveEndTime"
>
{{item.backRemark}}
<div class="coupon-receive" v-if="item.receiveTag != 0"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>立即领取</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">
<template v-if="item.receiveTag == 0">
{{ item.receiveStartTime }} 开始
</template>
<template v-else>
{{ item.receiveEndTime }} 结束
<template v-if="item.receiveTag == 1">
{{ item.receiveEndTime }} 前可领
</template>
</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">
<template
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 class="coupon-time" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}">
<div style="display: flex;align-items: center;" v-if="item.periodOfValidityType == 0">
{{ item.validText }}
</div>
<template v-if="item.periodOfValidityType == 1">领到券当日开始{{ item.effectiveDaysFromToday }}天内有效</template>
<template v-if="item.periodOfValidityType == 2">领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效</template>
......@@ -561,9 +512,6 @@
领到券开始到当月月底有效
</template>
</div>
<div class="coupon-receive" v-if="item.receiveTag != 0"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>立即领取</div>
</div>
</div>
</div>
......@@ -637,6 +585,12 @@ export default {
item.randomMoneyMinimum = this.keepSelfNum(item.randomMoneyMinimum);
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);
})
......@@ -754,6 +708,7 @@ export default {
const nowTimestamp = new Date().getTime();
if (nowTimestamp < startTimestamp) return 0;
if (nowTimestamp > endTimestamp) return 2;
return 1;
},
keepSelfNum(num) {
let r;
......@@ -764,6 +719,20 @@ export default {
r = 0;
}
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 {
}
.box-r{
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
background-color: white;
padding: 12px;
box-sizing: border-box;
.coupon-title__wrapper {
display: flex;
align-items: center;
justify-content: space-between;
.coupon-box-title{
flex: 1;
font-size: 14px;
color: #333;
font-weight: bold;
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{
color: #999;
......@@ -1101,26 +1089,13 @@ export default {
height: 16px;
}
.box-r-bottom{
margin-top: 16px;
width: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: space-between;
.coupon-time{
font-size: 11px;
flex: 1;
color: #333;
float: left;
}
.coupon-receive{
float: right;
width: 82px;
height: 24px;
border-radius: 12px;
text-align: center;
line-height: 24px;
color: white;
font-size: 11px;
font-size: 12px;
}
}
}
......@@ -1264,51 +1239,59 @@ export default {
}
.box-r{
width: 232px;
height: 100%;
position: absolute;
top: 0;
right: 0;
bottom: 0;
box-sizing: border-box;
-webkit-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{
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{
font-size: 14px;
line-height: 20px;
margin-top: 14px;
}
.coupon-remark{
font-size: 12px;
line-height: 16px;
height: 16px;
margin-top: 7px;
.coupon-receive__wrapper {
white-space: nowrap;
font-size: 10px;
}
}
.coupon-time{
font-size: 11px;
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 {
right: 0;
}
.box-content{
display: flex;
width: calc(100% - 10px);
height: 100px;
background-color: white;
......@@ -1523,7 +1507,6 @@ export default {
height: 100%;
text-align: center;
position: relative;
float: left;
box-sizing: border-box;
padding-top: 14px;
.limit{
......@@ -1542,41 +1525,36 @@ export default {
}
}
.content-r{
float: left;
width: 140px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
padding-left: 20px;
padding-top: 10px;
padding: 12px 0;
margin-left: 12px;
.coupon-box-title{
font-size: 14px;
color: #333;
font-weight: bold;
line-height: 20px;
}
.coupon-remark{
font-size: 12px;
color: #666;
line-height: 16px;
height: 16px;
margin-top: 7px;
.coupon-receive__wrapper {
white-space: nowrap;
font-size: 10px;
}
font-size: 12px;
}
.coupon-time{
font-size: 11px;
white-space: nowrap;
color: #666;
line-height: 15px;
margin-top: 19px;
font-size: 12px;
}
}
.receive{
position: absolute;
top: 15px;
right: 15px;
font-size: 14px;
color: #333;
font-weight: bold;
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