Skip to content

M
mayi-mp-shop
Commit dc75955f by hxx
Options

优惠券优化

parent 80e75cae
Showing with 431 additions and 385 deletions
src/components/activity/coupon.vue
...@@ -9,23 +9,157 @@ ...@@ -9,23 +9,157 @@
<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">
<div <template v-for="(item,index) in couponList">
class="coupon-box coupon-box9 clearfix" <div
v-for="(item,index) in couponList" class="coupon-box coupon-box9 clearfix"
:key="index" v-if="item.receiveTag"
> :key="index"
<div class="coupon-sort9" >
@click="receiveCoupon(item.couponCode,item)" <div class="coupon-sort9"
@click="receiveCoupon(item.couponCode,item)"
>
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
<div class="box-content">
<div class="content-l" :style="{
padding: item.preferentialType == 2 && 0,
display: item.preferentialType == 2 && 'flex',
'align-items': item.preferentialType == 2 && 'center',
'justify-content': item.preferentialType == 2 && 'center',
'flex-direction': item.preferentialType == 2 && 'column'
}">
<div v-if="item.preferentialType==0">
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span><span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialMoney}}</span>
</div>
<div v-else-if="item.preferentialType==1">
<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">
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span>
<span
class="price"
style="font-size:14px;"
:style="{'color': datas.componentData.color && datas.componentData.color.hotColor}"
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div>
<div class="limit">
<span v-if="item.thresholdType == 0">不限制</span>
<span
v-if="item.thresholdType == 1"
style="width:100%;"
class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span>
</div>
</div>
<div class="content-r">
<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" 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">
<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>
<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>
</div>
<div class="receive">
<div>立即</div>
<div>领取</div>
</div>
</div>
</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-if="item.receiveTag"
:key="index"
>
<div class="coupon-sort8"
@click="receiveCoupon(item.couponCode,item)"
>
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
<div class="box-content">
<div class="content-l" :style="{
padding: item.preferentialType == 2 && 0,
display: item.preferentialType == 2 && 'flex',
'align-items': item.preferentialType == 2 && 'center',
'justify-content': item.preferentialType == 2 && 'center',
'flex-direction': item.preferentialType == 2 && 'column'
}">
<div v-if="item.preferentialType==0">
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span><span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialMoney}}</span>
</div>
<div v-else-if="item.preferentialType==1">
<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">
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span>
<span
class="price"
style="font-size:13px;"
:style="{'color': datas.componentData.color && datas.componentData.color.hotColor}"
>
{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}
</span>
</div>
<div class="limit">
<span v-if="item.thresholdType == 0">不限制</span>
<span
v-if="item.thresholdType == 1"
style="width:100%;"
class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span>
</div>
</div>
<div class="content-r">
<div>立即</div>
<div>领取</div>
</div>
</div>
</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-if="item.receiveTag"
:key="index"
> >
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div> <div class="coupon-sort7"
<div class="box-content"> @click="receiveCoupon(item.couponCode,item)"
<div class="content-l" :style="{ >
padding: item.preferentialType == 2 && 0, <div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
display: item.preferentialType == 2 && 'flex', <div class="box-content">
'align-items': item.preferentialType == 2 && 'center',
'justify-content': item.preferentialType == 2 && 'center',
'flex-direction': item.preferentialType == 2 && 'column'
}">
<div v-if="item.preferentialType==0"> <div v-if="item.preferentialType==0">
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span><span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialMoney}}</span> <span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span><span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialMoney}}</span>
</div> </div>
...@@ -33,11 +167,11 @@ ...@@ -33,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:14px" 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>
...@@ -45,407 +179,255 @@ ...@@ -45,407 +179,255 @@
<span v-if="item.thresholdType == 0">不限制</span> <span v-if="item.thresholdType == 0">不限制</span>
<span <span
v-if="item.thresholdType == 1" v-if="item.thresholdType == 1"
style="width:100%;" style="width:100%;padding:0 10px;box-sizing:border-box;"
class="line-clamp1" class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span> >满{{ item.meetMoneyUse }}可用</span>
</div> </div>
</div>
<div class="content-r"> <div class="receive">立即领取</div>
<div class="coupon-box-title line-clamp1">{{item.couponName}}</div>
<div class="coupon-remark line-clamp1">{{item.backRemark}}</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">
<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>
<template v-if="item.periodOfValidityType == 1">
领到券当日开始{{ item.effectiveDaysFromToday }}天内有效
</template>
<template v-if="item.periodOfValidityType == 2">
领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效
</template>
</div>
</div>
</div>
<div class="receive">
<div>立即</div>
<div>领取</div>
</div> </div>
</div> </div>
</div> </div>
</div> </template>
</template> </template>
<template v-if="datas.componentData.style==4 && datas.componentData.sort == 2"> <template v-if="datas.componentData.style==3 && datas.componentData.sort == 1">
<div <template v-for="(item,index) in couponList">
class="coupon-box coupon-box8 clearfix" <div
v-for="(item,index) in couponList" class="coupon-box coupon-box6 clearfix"
v-if="item.receiveTag"
:key="index" :key="index"
>
<div class="coupon-sort8"
@click="receiveCoupon(item.couponCode,item)"
> >
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div> <div class="coupon-sort6"
<div class="box-content"> @click="receiveCoupon(item.couponCode,item)"
<div class="content-l" :style="{ :style="{'background' : datas.componentData.color && datas.componentData.color.hotColor}"
padding: item.preferentialType == 2 && 0, >
display: item.preferentialType == 2 && 'flex', <div class="box-l" :style="{'background' : datas.componentData.color && datas.componentData.color.type == 1 ? datas.componentData.color.name : 'linear-gradient(270deg,#FFE590 50%, #FFF0D1 100%)',display: item.preferentialType == 2 && 'flex','padding-top': item.preferentialType == 2 && 0,'align-items': item.preferentialType == 2 && 'center'}">
'align-items': item.preferentialType == 2 && 'center', <div style="width:90px;text-align:center;">
'justify-content': item.preferentialType == 2 && 'center',
'flex-direction': item.preferentialType == 2 && 'column'
}">
<div v-if="item.preferentialType==0"> <div v-if="item.preferentialType==0">
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span><span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialMoney}}</span> <span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span><span class="price" style="font-size:24px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialMoney}}</span>
</div> </div>
<div v-else-if="item.preferentialType==1"> <div v-else-if="item.preferentialType==1">
<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;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>
</div> </div>
<div class="limit"> <div class="limit" style="font-size:11px;margin-top:6px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">
<span v-if="item.thresholdType == 0">不限制</span> <span v-if="item.thresholdType == 0">不限制</span>
<span <span
v-if="item.thresholdType == 1" v-if="item.thresholdType == 1"
style="width:100%;" style="width:100%;box-sizing:border-box;"
class="line-clamp1" class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span> >满{{ item.meetMoneyUse }}可用</span>
</div> </div>
</div>
</div> </div>
<div class="content-r"> <div class="box-r" :style="{'background' : datas.componentData.color && datas.componentData.color.name}">
<div>立即</div> <div class="box-r-info">
<div>领取</div> <div class="coupon-box-title line-clamp1">{{item.couponName}}</div>
</div> <div class="coupon-remark line-clamp1" v-if="!item.receiveEndTime">{{item.backRemark}}</div>
</div> <div class="coupon-remark" style="position: relative;" v-else>
</div> <div class="coupon-receive__wrapper">{{ item.receiveEndTime }} 结束</div>
</div> </div>
</template> <div class="box-r-bottom">
<template v-if="datas.componentData.style==4 && datas.componentData.sort == 3"> <div class="coupon-time line-clamp1" :style="{'display':datas.componentData.isSlide ? 'block' : ''}">
<div <div v-if="item.periodOfValidityType == 0">
class="coupon-box coupon-box7 clearfix" <p
v-for="(item,index) in couponList" v-if="typeof (item.effectiveDate) != 'undefined' && item.effectiveDate != null && item.effectiveDate != ''"
:key="index" >
> <span>始：{{ item.effectiveDate }}</span>
<div class="coupon-sort7" </p>
@click="receiveCoupon(item.couponCode,item)" <p
> v-if="typeof (item.expiryDate) != 'undefined' && item.expiryDate != null && item.expiryDate != ''"
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div> >
<div class="box-content"> <span>终：{{ item.expiryDate }}</span>
<div v-if="item.preferentialType==0"> </p>
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span><span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialMoney}}</span> </div>
</div> <template v-if="item.periodOfValidityType == 1" >
<div v-else-if="item.preferentialType==1"> 领到券当日开始{{ item.effectiveDaysFromToday }}天内有效
<span class="price" style="font-size:24px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialDiscount}}</span> </template>
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">折</span> <template v-if="item.periodOfValidityType == 2">
</div> 领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效
<div v-else-if="item.preferentialType==2&&item.receiveTag"> </template>
<span style="font-size:13px;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">￥</span> <template v-if="item.periodOfValidityType == 3">
<span 领到券开始到当月月底有效
class="price" </template>
style="font-size:13px"
:style="{'color': datas.componentData.color && datas.componentData.color.hotColor}"
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div>
<div class="limit">
<span v-if="item.thresholdType == 0">不限制</span>
<span
v-if="item.thresholdType == 1"
style="width:100%;padding:0 10px;box-sizing:border-box;"
class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span>
</div>
<div class="receive">立即领取</div>
</div>
</div>
</div>
</template>
<template v-if="datas.componentData.style==3 && datas.componentData.sort == 1">
<div
class="coupon-box coupon-box6 clearfix"
v-for="(item,index) in couponList"
:key="index"
>
<div class="coupon-sort6"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.hotColor}"
>
<div class="box-l" :style="{'background' : datas.componentData.color && datas.componentData.color.type == 1 ? datas.componentData.color.name : 'linear-gradient(270deg,#FFE590 50%, #FFF0D1 100%)',display: item.preferentialType == 2 && 'flex','padding-top': item.preferentialType == 2 && 0,'align-items': item.preferentialType == 2 && 'center'}">
<div style="width:90px;text-align:center;">
<div v-if="item.preferentialType==0">
<span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span><span class="price" style="font-size:24px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialMoney}}</span>
</div>
<div v-else-if="item.preferentialType==1">
<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">
<span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span>
<span
class="price"
style="font-size:13px"
:style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">
{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}
</span>
</div>
<div class="limit" style="font-size:11px;margin-top:6px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">
<span v-if="item.thresholdType == 0">不限制</span>
<span
v-if="item.thresholdType == 1"
style="width:100%;box-sizing:border-box;"
class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span>
</div>
</div>
</div>
<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="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> </div>
<template v-if="item.periodOfValidityType == 1" >
领到券当日开始{{ item.effectiveDaysFromToday }}天内有效
</template>
<template v-if="item.periodOfValidityType == 2">
领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效
</template>
</div> </div>
</div> </div>
</div> <div class="receive" :style="{
<div class="receive" :style="{ 'color':datas.componentData.color && datas.componentData.color.hotColor,
'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%)'
'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>
</div> </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">
<div <template v-for="(item,index) in couponList">
class="coupon-box coupon-box5 clearfix" <div
v-for="(item,index) in couponList" class="coupon-box coupon-box5 clearfix"
:key="index" v-if="item.receiveTag"
> :key="index"
<div class="coupon-sort5"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
> >
<div class="box-l"> <div class="coupon-sort5"
<div v-if="item.preferentialType==0"> @click="receiveCoupon(item.couponCode,item)"
<span style="font-size:13px;">￥</span><span class="price" style="font-size:24px;">{{item.preferentialMoney}}</span> :style="{'background' : datas.componentData.color && datas.componentData.color.name}"
</div> >
<div v-else-if="item.preferentialType==1"> <div class="box-l">
<span class="price" style="font-size:24px;">{{item.preferentialDiscount}}</span> <div v-if="item.preferentialType==0">
<span style="font-size:13px;color:white;">折</span> <span style="font-size:13px;">￥</span><span class="price" style="font-size:24px;">{{item.preferentialMoney}}</span>
</div> </div>
<div v-else-if="item.preferentialType==2&&item.receiveTag"> <div v-else-if="item.preferentialType==1">
<span style="font-size:13px;">￥</span> <span class="price" style="font-size:24px;">{{item.preferentialDiscount}}</span>
<span <span style="font-size:13px;color:white;">折</span>
class="price" </div>
style="font-size:15px" <div v-else-if="item.preferentialType==2">
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span> <span style="font-size:13px;">￥</span>
</div> <span
<div class="limit" style="font-size:11px;margin-top:6px;"> class="price"
<span v-if="item.thresholdType == 0">不限制</span> style="font-size:15px;"
<span >{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
v-if="item.thresholdType == 1" </div>
style="width:100%;padding:0 10px;box-sizing:border-box;" <div class="limit" style="font-size:11px;margin-top:6px;">
class="line-clamp1" <span v-if="item.thresholdType == 0">不限制</span>
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}" <span
>满{{ item.meetMoneyUse }}可用</span> v-if="item.thresholdType == 1"
style="width:100%;padding:0 10px;box-sizing:border-box;"
class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span>
</div>
</div> </div>
</div> <div class="box-r">
<div class="box-r"> <div class="receive"
<div class="receive" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor,'background':datas.componentData.color && datas.componentData.color.type == 1 ? 'rgba(255,255,255,0.8)' : 'linear-gradient(0deg,#FFE590 50%, #FFF0D1 100%)'}">
:style="{'color':datas.componentData.color && datas.componentData.color.hotColor,'background':datas.componentData.color && datas.componentData.color.type == 1 ? 'rgba(255,255,255,0.8)' : 'linear-gradient(0deg,#FFE590 50%, #FFF0D1 100%)'}"> <div>立即</div>
<div>立即</div> <div>领取</div>
<div>领取</div> </div>
</div> </div>
</div> </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">
<div <template v-for="(item,index) in couponList">
class="coupon-box coupon-box4 clearfix" <div
v-for="(item,index) in couponList" class="coupon-box coupon-box4 clearfix"
:key="index" v-if="item.receiveTag"
>
<div class="coupon-sort4"
@click="receiveCoupon(item.couponCode,item)"
>
<div class="box-bg" :style="{'background' : datas.componentData.color && datas.componentData.color.hotColor}">
</div>
<div class="box-content" style="padding-top:20px;" :style="{'background' : datas.componentData.color && datas.componentData.color.type == 1 ? 'linear-gradient(180deg,#EEF3FF 1px,'+(datas.componentData.color && datas.componentData.color.color)+' 50%)': 'linear-gradient(0deg,#FFE590 50%, #FFF0D1 100%)'}">
<div v-if="item.preferentialType==0">
<span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span><span class="price" style="font-size:24px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialMoney}}</span>
</div>
<div v-else-if="item.preferentialType==1">
<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">
<span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span>
<span
class="price"
style="font-size:14px"
:style="{'color':datas.componentData.color && datas.componentData.color.hotColor}"
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div>
<div class="limit" style="font-size:11px;margin-top:6px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">
<span v-if="item.thresholdType == 0">不限制</span>
<span
v-if="item.thresholdType == 1"
style="width:100%;padding:0 10px;box-sizing:border-box;"
class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span>
</div>
</div>
<div class="box-bottom" :style="{'background' : datas.componentData.color && datas.componentData.color.name}">
<div
class="box-bottom-btn"
:style="{'color': datas.componentData.color && datas.componentData.color.hotColor,'background': datas.componentData.color && datas.componentData.color.type == 1 ? 'linear-gradient(180deg,'+(datas.componentData.color && datas.componentData.color.color)+' 1px, white 50%)' : 'linear-gradient(0deg,#FFE590 50%, #FFF0D1 100%)'}"
>立即领取</div>
</div>
</div>
</div>
</template>
<template v-if="datas.componentData.style==1 && datas.componentData.sort == 3">
<div
class="coupon-box coupon-box1 clearfix"
v-for="(item,index) in couponList"
:key="index" :key="index"
> >
<div <div class="coupon-sort4"
class="coupon-sort1"
@click="receiveCoupon(item.couponCode,item)" @click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
> >
<div v-if="item.preferentialType==0"> <div class="box-bg" :style="{'background' : datas.componentData.color && datas.componentData.color.hotColor}">
<span style="font-size:13px;color:white;">￥</span><span class="price" style="font-size:24px">{{item.preferentialMoney}}</span>
</div> </div>
<div v-else-if="item.preferentialType==1"> <div class="box-content" style="padding-top:20px;" :style="{'background' : datas.componentData.color && datas.componentData.color.type == 1 ? 'linear-gradient(180deg,#EEF3FF 1px,'+(datas.componentData.color && datas.componentData.color.color)+' 50%)': 'linear-gradient(0deg,#FFE590 50%, #FFF0D1 100%)'}">
<span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span> <div v-if="item.preferentialType==0">
<span style="font-size:13px;color:white">折</span> <span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span><span class="price" style="font-size:24px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">{{item.preferentialMoney}}</span>
</div> </div>
<div v-else-if="item.preferentialType==2 && item.receiveTag"> <div v-else-if="item.preferentialType==1">
<span style="font-size:12px;color:white;">￥</span> <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: 14px;">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span> <span style="font-size:13px;color:white;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">折</span>
</div> </div>
<div class="limit"> <div v-else-if="item.preferentialType==2">
<span v-if="item.thresholdType == 0">不限制</span> <span style="font-size:13px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">￥</span>
<span <span
v-if="item.thresholdType == 1" class="price"
style="width:100%;" style="font-size:14px;"
class="line-clamp1" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}" >{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
>满{{ item.meetMoneyUse }}可用</span> </div>
<div class="limit" style="font-size:11px;margin-top:6px;" :style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">
<span v-if="item.thresholdType == 0">不限制</span>
<span
v-if="item.thresholdType == 1"
style="width:100%;padding:0 10px;box-sizing:border-box;"
class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span>
</div>
</div> </div>
<div class="box-bottom" :style="{'background' : datas.componentData.color && datas.componentData.color.name}">
<div class="receive"> <div
立即领取 class="box-bottom-btn"
:style="{'color': datas.componentData.color && datas.componentData.color.hotColor,'background': datas.componentData.color && datas.componentData.color.type == 1 ? 'linear-gradient(180deg,'+(datas.componentData.color && datas.componentData.color.color)+' 1px, white 50%)' : 'linear-gradient(0deg,#FFE590 50%, #FFF0D1 100%)'}"
>立即领取</div>
</div> </div>
</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 == 3">
<div <template v-for="(item,index) in couponList">
class="coupon-box coupon-box2 clearfix"
v-for="(item,index) in couponList"
:key="index"
>
<div <div
class="coupon-sort2" class="coupon-box coupon-box1 clearfix"
@click="receiveCoupon(item.couponCode,item)" v-if="item.receiveTag"
:key="index"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
> >
<div class="box-l"> <div
<div v-if="item.preferentialType==0"> class="coupon-sort1"
<span style="font-size:13px;color:white;">￥</span><span class="price" style="font-size:24px">{{item.preferentialMoney}}</span> @click="receiveCoupon(item.couponCode,item)"
</div>
<div v-else-if="item.preferentialType==1"> :style="{'background' : datas.componentData.color && datas.componentData.color.name}"
<span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span> >
<span style="font-size:13px;color:white">折</span> <div v-if="item.preferentialType==0">
</div> <span style="font-size:13px;color:white;">￥</span><span class="price" style="font-size:24px">{{item.preferentialMoney}}</span>
<div v-else-if="item.preferentialType==2 && item.receiveTag"> </div>
<span style="font-size:12px;color:white;">￥</span> <div v-else-if="item.preferentialType==1">
<span class="price">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span> <span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span>
</div> <span style="font-size:13px;color:white">折</span>
<div class="limit"> </div>
<span v-if="item.thresholdType == 0">不限制</span> <div v-else-if="item.preferentialType==2">
<span <span style="font-size:12px;color:white;">￥</span>
v-if="item.thresholdType == 1" <span class="price" style="font-size: 14px;">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
style="width:100%;" </div>
class="line-clamp1" <div class="limit">
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}" <span v-if="item.thresholdType == 0">不限制</span>
>满{{ item.meetMoneyUse }}可用</span> <span
v-if="item.thresholdType == 1"
style="width:100%;"
class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span>
</div>
<div class="receive">
立即领取
</div>
</div> </div>
</div>
<div class="box-r">
<div>立</div>
<div>即</div>
<div>领</div>
<div>取</div>
</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 == 2">
<div <template v-for="(item,index) in couponList">
class="coupon-box coupon-box3 clearfix"
v-for="(item,index) in couponList"
:key="index"
>
<div <div
class="coupon-sort3" class="coupon-box coupon-box2 clearfix"
@click="receiveCoupon(item.couponCode,item)" v-if="item.receiveTag"
:key="index"
> >
<div class="box-l" <div
class="coupon-sort2"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
> >
<div class="inner-div" :style="{'--bg-color':datas.componentData.color && datas.componentData.color.color}"></div> <div class="box-l">
<div class="inner-r" :style="{'background' : datas.componentData.color && datas.componentData.color.name,padding: item.preferentialType == 2 && 0,display: item.preferentialType == 2 && 'flex','flex-direction': item.preferentialType == 2 && 'column','justify-content': item.preferentialType == 2 && 'center'}">
<div v-if="item.preferentialType==0"> <div v-if="item.preferentialType==0">
<span style="font-size:13px;color:white;">￥</span><span class="price" style="font-size:24px">{{item.preferentialMoney}}</span> <span style="font-size:13px;color:white;">￥</span><span class="price" style="font-size:24px">{{item.preferentialMoney}}</span>
</div> </div>
...@@ -453,11 +435,9 @@ ...@@ -453,11 +435,9 @@
<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">
<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">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}
</span>
</div> </div>
<div class="limit"> <div class="limit">
<span v-if="item.thresholdType == 0">不限制</span> <span v-if="item.thresholdType == 0">不限制</span>
...@@ -469,34 +449,90 @@ ...@@ -469,34 +449,90 @@
>满{{ item.meetMoneyUse }}可用</span> >满{{ item.meetMoneyUse }}可用</span>
</div> </div>
</div> </div>
<div class="box-r">
<div>立</div>
<div>即</div>
<div>领</div>
<div>取</div>
</div>
</div> </div>
<div class="box-r"> </div>
<div class="coupon-box-title line-clamp1">{{item.couponName}}</div> </template>
<div class="coupon-remark line-clamp1">{{item.backRemark}}</div> </template>
<div class="box-r-bottom"> <template v-if="datas.componentData.style==1 && datas.componentData.sort == 1">
<div class="coupon-time line-clamp1" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"> <template v-for="(item,index) in couponList">
<div v-if="item.periodOfValidityType == 0"> <div
<template class="coupon-box coupon-box3 clearfix"
v-if="typeof (item.effectiveDate) != 'undefined' && item.effectiveDate != null && item.effectiveDate != ''" v-if="item.receiveTag"
> :key="index"
<span>始：{{ item.effectiveDate }}</span> >
</template> <div
<template class="coupon-sort3"
v-if="typeof (item.expiryDate) != 'undefined' && item.expiryDate != null && item.expiryDate != ''" @click="receiveCoupon(item.couponCode,item)"
> >
<span>终：{{ item.expiryDate }}</span> <div class="box-l"
>
<div class="inner-div" :style="{'--bg-color':datas.componentData.color && datas.componentData.color.color}"></div>
<div class="inner-r" :style="{'background' : datas.componentData.color && datas.componentData.color.name,padding: item.preferentialType == 2 && 0,display: item.preferentialType == 2 && 'flex','flex-direction': item.preferentialType == 2 && 'column','justify-content': item.preferentialType == 2 && 'center'}">
<div v-if="item.preferentialType==0">
<span style="font-size:13px;color:white;">￥</span><span class="price" style="font-size:24px">{{item.preferentialMoney}}</span>
</div>
<div v-else-if="item.preferentialType==1">
<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" 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 }}
</span>
</div>
<div class="limit">
<span v-if="item.thresholdType == 0">不限制</span>
<span
v-if="item.thresholdType == 1"
style="width:100%;"
class="line-clamp1"
:style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
>满{{ item.meetMoneyUse }}可用</span>
</div>
</div>
</div>
<div class="box-r">
<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" 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">
<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>
<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> </template>
</div> </div>
<template v-if="item.periodOfValidityType == 1">领到券当日开始{{ item.effectiveDaysFromToday }}天内有效</template> <div class="coupon-receive"
<template v-if="item.periodOfValidityType == 2">领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效</template> :style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>立即领取</div>
</div> </div>
<div class="coupon-receive"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>立即领取</div>
</div> </div>
</div> </div>
</div> </div>
</div> </template>
</template> </template>
</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