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 @@
<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">
<div
class="coupon-box coupon-box9 clearfix"
v-for="(item,index) in couponList"
:key="index"
>
<div class="coupon-sort9"
@click="receiveCoupon(item.couponCode,item)"
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box9 clearfix"
v-if="item.receiveTag"
:key="index"
>
<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="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 class="coupon-sort7"
@click="receiveCoupon(item.couponCode,item)"
>
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
<div class="box-content">
<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>
......@@ -33,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:14px"
style="font-size:13px;"
:style="{'color': datas.componentData.color && datas.componentData.color.hotColor}"
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div>
......@@ -45,407 +179,255 @@
<span v-if="item.thresholdType == 0">不限制</span>
<span
v-if="item.thresholdType == 1"
style="width:100%;"
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="content-r">
<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 class="receive">立即领取</div>
</div>
</div>
</div>
</div>
</template>
</template>
<template v-if="datas.componentData.style==4 && datas.componentData.sort == 2">
<div
class="coupon-box coupon-box8 clearfix"
v-for="(item,index) in couponList"
<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-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 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>
<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>
<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>
<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}"
>
style="font-size:13px;"
:style="{'color':datas.componentData.color && datas.componentData.color.hotColor}">
{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}
</span>
</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 == 1"
style="width:100%;"
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="content-r">
<div>立即</div>
<div>领取</div>
</div>
</div>
</div>
</div>
</template>
<template v-if="datas.componentData.style==4 && datas.componentData.sort == 3">
<div
class="coupon-box coupon-box7 clearfix"
v-for="(item,index) in couponList"
:key="index"
>
<div class="coupon-sort7"
@click="receiveCoupon(item.couponCode,item)"
>
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
<div class="box-content">
<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&&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">
<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 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.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">
<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>
<template v-if="item.periodOfValidityType == 1" >
领到券当日开始{{ item.effectiveDaysFromToday }}天内有效
</template>
<template v-if="item.periodOfValidityType == 2">
领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效
</template>
</div>
</div>
</div>
<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,.8)' : 'linear-gradient(0deg,#FFE590 50%, #FFF0D1 100%)'
}">
<div>立即</div>
<div>领取</div>
<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,.8)' : 'linear-gradient(0deg,#FFE590 50%, #FFF0D1 100%)'
}">
<div>立即</div>
<div>领取</div>
</div>
</div>
</div>
</div>
</div>
</template>
</template>
<template v-if="datas.componentData.style==3 && datas.componentData.sort == 2">
<div
class="coupon-box coupon-box5 clearfix"
v-for="(item,index) in couponList"
:key="index"
>
<div class="coupon-sort5"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box5 clearfix"
v-if="item.receiveTag"
:key="index"
>
<div class="box-l">
<div v-if="item.preferentialType==0">
<span style="font-size:13px;">￥</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&&item.receiveTag">
<span style="font-size:13px;">￥</span>
<span
class="price"
style="font-size:15px"
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div>
<div class="limit" style="font-size:11px;margin-top:6px;">
<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 class="coupon-sort5"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>
<div class="box-l">
<div v-if="item.preferentialType==0">
<span style="font-size:13px;">￥</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">
<span style="font-size:13px;">￥</span>
<span
class="price"
style="font-size:15px;"
>{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div>
<div class="limit" style="font-size:11px;margin-top:6px;">
<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-r">
<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%)'}">
<div>立即</div>
<div>领取</div>
<div class="box-r">
<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%)'}">
<div>立即</div>
<div>领取</div>
</div>
</div>
</div>
</div>
</div>
</template>
</template>
<template v-if="datas.componentData.style==3 && datas.componentData.sort == 3">
<div
class="coupon-box coupon-box4 clearfix"
v-for="(item,index) in couponList"
:key="index"
>
<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"
<template v-for="(item,index) in couponList">
<div
class="coupon-box coupon-box4 clearfix"
v-if="item.receiveTag"
:key="index"
>
<div
class="coupon-sort1"
>
<div class="coupon-sort4"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>
<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 class="box-bg" :style="{'background' : datas.componentData.color && datas.componentData.color.hotColor}">
</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 && item.receiveTag">
<span style="font-size:12px;color:white;">￥</span>
<span class="price" style="font-size: 14px;">{{ 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 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">
<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="receive">
立即领取
<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>
</div>
</template>
</template>
<template v-if="datas.componentData.style==1 && datas.componentData.sort == 2">
<div
class="coupon-box coupon-box2 clearfix"
v-for="(item,index) in couponList"
:key="index"
>
<template v-if="datas.componentData.style==1 && datas.componentData.sort == 3">
<template v-for="(item,index) in couponList">
<div
class="coupon-sort2"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
class="coupon-box coupon-box1 clearfix"
v-if="item.receiveTag"
:key="index"
>
<div class="box-l">
<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 && item.receiveTag">
<span style="font-size:12px;color:white;">￥</span>
<span class="price">{{ 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
class="coupon-sort1"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>
<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">
<span style="font-size:12px;color:white;">￥</span>
<span class="price" style="font-size: 14px;">{{ 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 class="receive">
立即领取
</div>
</div>
</div>
<div class="box-r">
<div>立</div>
<div>即</div>
<div>领</div>
<div>取</div>
</div>
</div>
</div>
</template>
</template>
<template v-if="datas.componentData.style==1 && datas.componentData.sort == 1">
<div
class="coupon-box coupon-box3 clearfix"
v-for="(item,index) in couponList"
:key="index"
>
<template v-if="datas.componentData.style==1 && datas.componentData.sort == 2">
<template v-for="(item,index) in couponList">
<div
class="coupon-sort3"
@click="receiveCoupon(item.couponCode,item)"
class="coupon-box coupon-box2 clearfix"
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="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 class="box-l">
<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>
......@@ -453,11 +435,9 @@
<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">
<span style="font-size:12px;color:white;">￥</span>
<span class="price" style="font-size:12px;">
{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}
</span>
<span class="price">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div>
<div class="limit">
<span v-if="item.thresholdType == 0">不限制</span>
......@@ -469,34 +449,90 @@
>满{{ item.meetMoneyUse }}可用</span>
</div>
</div>
<div class="box-r">
<div>立</div>
<div>即</div>
<div>领</div>
<div>取</div>
</div>
</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="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>
</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-if="item.receiveTag"
:key="index"
>
<div
class="coupon-sort3"
@click="receiveCoupon(item.couponCode,item)"
>
<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>
</div>
<template v-if="item.periodOfValidityType == 1">领到券当日开始{{ item.effectiveDaysFromToday }}天内有效</template>
<template v-if="item.periodOfValidityType == 2">领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效</template>
<div class="coupon-receive"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>立即领取</div>
</div>
<div class="coupon-receive"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>立即领取</div>
</div>
</div>
</div>
</div>
</template>
</template>
</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