Skip to content

M
mayi-mp-shop
Commit 84fa9b90 by 程智春
Options

优惠券组件

parent d6f14167
Showing with 1079 additions and 140 deletions
src/components/activity/coupon.vue
...@@ -6,143 +6,429 @@ ...@@ -6,143 +6,429 @@
</div> </div>
<!-- 优惠券列表 --> <!-- 优惠券列表 -->
<div class="couponBg"> <div class="couponBg">
<div class="coupon" :class="'coupon'+datas.componentData.style"> <div class="coupon" :class="render?'coupon'+datas.componentData.style:''">
<div class="couponList clearfix"> <div class="couponList clearfix" :style="{'white-space':datas.componentData.isSlide ? 'nowrap' : 'normal'}">
<template v-if="datas.componentData.style==4 && datas.componentData.sort == 1">
<div <div
class="item clearfix" class="coupon-box coupon-box9 clearfix"
v-for="(item,index) in datas.componentData.couponList" v-for="(item,index) in datas.componentData.couponList"
:key="index" :key="index"
> >
<img <div class="coupon-sort9"
class="img" @click="receiveCoupon(item.couponCode,item)"
:class="'imgWidth'+datas.componentData.style" >
:src="datas.componentData.couponStyleList[datas.componentData.style-1]" <div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
alt <div class="box-content">
/> <div class="content-l">
<div v-if="datas.componentData.style==1" class="info info1" @click="receiveCoupon(item.couponCode,item)">
<div v-if="item.preferentialType!=1"> <div v-if="item.preferentialType!=1">
<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>
class="price"
v-if="(item.preferentialMoney-0)%1==0"
>{{item.preferentialMoney | keepIntNum}}</span>
<span class="price" v-else>{{parseFloat(item.preferentialMoney)}}</span>
<span style="font-size:10px;color:#e74745;">元</span>
</div> </div>
<div v-else> <div v-else>
<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 class="limit">
<span v-if="item.thresholdType == 0">不限制</span>
<span <span
class="price" v-if="item.thresholdType == 1"
v-if="(item.preferentialDiscount-0)%1==0" style="width:100%;"
>{{item.preferentialDiscount | keepIntNum}}</span> class="line-clamp1"
<span class="price" v-else>{{parseFloat(item.preferentialDiscount)}}</span> :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}"
<span style="font-size:10px;color:#e74745;">折</span> >订单满{{ item.meetMoneyUse }}元</span>
</div> </div>
<p class="name line-clamp1">{{item.couponName}}</p> </div>
<p class="describe line-clamp2">{{item.info}}</p> <div class="content-r">
<p class="btn">立即领取</p> <div class="coupon-box-title line-clamp1">{{item.couponName}}</div>
</div> <div class="coupon-remark line-clamp1">{{item.remark}}</div>
<div v-else-if="datas.componentData.style==2" class="info info2" @click="receiveCoupon(item.couponCode,item)"> <div class="box-r-bottom">
<p class="name line-clamp1">{{item.couponName}}</p> <div class="coupon-time line-clamp1" style="width:100%" :style="{'display':datas.componentData.isSlide ? 'inline-block' : ''}">
<div v-if="item.preferentialType!=1" class="priceItem"> <div v-if="item.periodOfValidityType == 0">
<div <p
class="price" v-if="typeof (item.effectiveDate) != 'undefined' && item.effectiveDate != null && item.effectiveDate != ''"
:class="{'priceCopy':String(item.preferentialMoney-0).length>3}"
v-if="(item.preferentialMoney-0)%1==0"
> >
<span>{{item.preferentialMoney | keepIntNum}}</span> <span>始：{{ item.effectiveDate }}</span>
<span </p>
class="label" <p
:class="{'labelCopy':String(item.preferentialMoney-0).length>3}" v-if="typeof (item.expiryDate) != 'undefined' && item.expiryDate != null && item.expiryDate != ''"
> >
<i>元</i> <span>终：{{ item.expiryDate }}</span>
</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>
</template>
<template v-if="datas.componentData.style==4 && datas.componentData.sort == 2">
<div <div
class="price" class="coupon-box coupon-box8 clearfix"
:class="{'priceCopy':String(item.preferentialMoney-0).length>3}" v-for="(item,index) in datas.componentData.couponList"
v-else :key="index"
> >
<span>{{parseFloat(item.preferentialMoney)}}</span> <div class="coupon-sort8"
<span @click="receiveCoupon(item.couponCode,item)"
class="label"
:class="{'labelCopy':String(item.preferentialMoney-0).length>3}"
> >
<i>元</i> <div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
</span> <div class="box-content">
<div class="content-l">
<div v-if="item.preferentialType!=1">
<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>
<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 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>
<div v-else class="priceItem"> </div>
</div>
</template>
<template v-if="datas.componentData.style==4 && datas.componentData.sort == 3">
<div <div
class="price" class="coupon-box coupon-box7 clearfix"
:class="{'priceCopy':String(item.preferentialDiscount-0).length>3}" v-for="(item,index) in datas.componentData.couponList"
v-if="(item.preferentialDiscount-0)%1==0" :key="index"
> >
<span>{{item.preferentialDiscount | keepIntNum}}</span> <div class="coupon-sort7"
<span @click="receiveCoupon(item.couponCode,item)"
class="label"
:class="{'labelCopy':String(item.preferentialMoney-0).length>3}"
> >
<i>折</i> <div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
</span> <div class="box-content">
<div v-if="item.preferentialType!=1">
<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>
<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 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>
</div>
</template>
<template v-if="datas.componentData.style==3 && datas.componentData.sort == 1">
<div <div
class="price" class="coupon-box coupon-box6 clearfix"
:class="{'priceCopy':String(item.preferentialDiscount-0).length>3}" v-for="(item,index) in datas.componentData.couponList"
v-else :key="index"
> >
<span>{{parseFloat(item.preferentialDiscount)}}</span> <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%)'}">
<div style="width:90px;text-align:center;">
<div v-if="item.preferentialType!=1">
<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>
<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 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 <span
class="label" v-if="item.thresholdType == 1"
:class="{'labelCopy':String(item.preferentialMoney-0).length>3}" 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.remark}}</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 != ''"
> >
<i>折</i> <span>始：{{ item.effectiveDate }}</span>
</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>
<p class="describe line-clamp2">{{item.info}}</p>
</div> </div>
<div v-else-if="datas.componentData.style==3" class="info info3" @click="receiveCoupon(item.couponCode,item)"> </div>
<div v-if="item.preferentialType!=1"> <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>
</template>
<template v-if="datas.componentData.style==3 && datas.componentData.sort == 2">
<div <div
class="price" class="coupon-box coupon-box5 clearfix"
:class="{'priceCopy':String(item.preferentialMoney-0).length>2}" v-for="(item,index) in datas.componentData.couponList"
v-if="(item.preferentialMoney-0)%1==0" :key="index"
>
<div class="coupon-sort5"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
> >
<span style="font-size:10px;">￥</span> <div class="box-l">
<span class="isPrice">{{item.preferentialMoney | keepIntNum}}</span> <div v-if="item.preferentialType!=1">
<span style="font-size:13px;">￥</span><span class="price" style="font-size:24px;">{{item.preferentialMoney}}</span>
</div>
<div v-else>
<span class="price" style="font-size:24px;">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;color:white;">折</span>
</div> </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 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>
</template>
<template v-if="datas.componentData.style==3 && datas.componentData.sort == 3">
<div <div
class="price" class="coupon-box coupon-box4 clearfix"
:class="{'priceCopy':String(item.preferentialMoney-0).length>2}" v-for="(item,index) in datas.componentData.couponList"
v-else :key="index"
> >
<span style="font-size:10px;">￥</span> <div class="coupon-sort4"
<span class="isPrice">{{parseFloat(item.preferentialMoney)}}</span> @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!=1">
<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>
<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 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="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 datas.componentData.couponList"
:key="index"
>
<div
class="coupon-sort1"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>
<div v-if="item.preferentialType!=1">
<span style="font-size:13px;color:white;">￥</span><span class="price" style="font-size:24px">{{item.preferentialMoney}}</span>
</div> </div>
<div v-else> <div v-else>
<span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;color:white">折</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>
</template>
<template v-if="datas.componentData.style==1 && datas.componentData.sort == 2">
<div <div
class="price" class="coupon-box coupon-box2 clearfix"
:class="{'priceCopy':String(item.preferentialDiscount-0).length>2}" v-for="(item,index) in datas.componentData.couponList"
v-if="(item.preferentialDiscount-0)%1==0" :key="index"
>
<div
class="coupon-sort2"
@click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
> >
<span class="isPrice">{{item.preferentialDiscount | keepIntNum}}</span> <div class="box-l">
<span style="font-size:10px;">折</span> <div v-if="item.preferentialType!=1">
<span style="font-size:13px;color:white;">￥</span><span class="price" style="font-size:24px">{{item.preferentialMoney}}</span>
</div>
<div v-else>
<span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;color:white">折</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>立</div>
<div>即</div>
<div>领</div>
<div>取</div>
</div>
</div>
</div>
</template>
<template v-if="datas.componentData.style==1 && datas.componentData.sort == 1">
<div
class="coupon-box coupon-box3 clearfix"
v-for="(item,index) in datas.componentData.couponList"
:key="index"
>
<div <div
class="price" class="coupon-sort3"
:class="{'priceCopy':String(item.preferentialDiscount-0).length>2}" @click="receiveCoupon(item.couponCode,item)"
v-else >
<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}">
<div v-if="item.preferentialType!=1">
<span style="font-size:13px;color:white;">￥</span><span class="price" style="font-size:24px">{{item.preferentialMoney}}</span>
</div>
<div v-else>
<span class="price" style="font-size:24px">{{item.preferentialDiscount}}</span>
<span style="font-size:13px;color:white">折</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">{{item.remark}}</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 class="isPrice">{{parseFloat(item.preferentialDiscount)}}</span> <span>终：{{ item.expiryDate }}</span>
<span style="font-size:10px;">折</span> </template>
</div>
<template v-if="item.periodOfValidityType == 1">领到券当日开始{{ item.effectiveDaysFromToday }}天内有效</template>
<template v-if="item.periodOfValidityType == 2">领到券次日开始{{ item.effectiveDaysFromTomorrow }}天内有效</template>
</div> </div>
<div class="coupon-receive"
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>立即领取</div>
</div> </div>
<div class="right">
<p class="name line-clamp1">{{item.couponName}}</p>
<p class="btn">立即领取</p>
</div> </div>
</div> </div>
</div> </div>
</template>
</div> </div>
</div> </div>
</div> </div>
...@@ -154,6 +440,10 @@ import coupon from '@/api/coupon' ...@@ -154,6 +440,10 @@ import coupon from '@/api/coupon'
export default { export default {
name: "coupon", name: "coupon",
props: { props: {
render: {
type: Boolean,
default: false
},
datas: { datas: {
type: Object, type: Object,
default: { default: {
...@@ -172,27 +462,57 @@ export default { ...@@ -172,27 +462,57 @@ export default {
showList: true, //展示优惠券组件 showList: true, //展示优惠券组件
}; };
}, },
created(){
this.datas.componentData.couponList.forEach((item,index) => {
if((item.preferentialMoney-0)%1==0){
this.$set(this.datas.componentData.couponList[index],'preferentialMoney',parseInt(item.preferentialMoney))
}else{
this.$set(this.datas.componentData.couponList[index],'preferentialMoney',parseFloat(item.preferentialMoney))
}
if((item.preferentialDiscount-0)%1==0){
this.$set(this.datas.componentData.couponList[index],'preferentialDiscount',parseInt(item.preferentialDiscount))
}else{
this.$set(this.datas.componentData.couponList[index],'preferentialDiscount',parseFloat(item.preferentialDiscount))
}
this.$set(this.datas.componentData.couponList[index],'meetMoneyUse',parseFloat(item.meetMoneyUse).toFixed(2))
})
console.log(this.datas.componentData.couponList,'datas.componentData.couponList1111')
},
mounted() { mounted() {
if (this.render) {
try {
this.$on('getEnvInfo',([val])=>{
console.log(val,'ggggggggggggg',typeof val)
this.api=val;
this.getList(); this.getList();
}, })
watch:{ } catch (error) {}
// 'datas.componentData.couponList' : function(newVal){ } else {
// if(newVal){ }
// if(newVal.length){
// this.showList=true;
// }else{
// this.showList=false;
// }
// }
// }
}, },
components: {}, components: {},
methods: { methods: {
getList() { getList() {
let query = this.datas.componentData.selectionIds; let query = this.datas.componentData.selectionIds;
coupon.queryCouponIdsList(query).then(res => { this.api(query).then(res => {
if (res.data.code == 200&&res.data.data.length!=0) {
this.datas.componentData.couponList = res.data.data.filter((item,index)=>{return item.publicFlag != 0}); if (res.code == 200&&res.data.length!=0) {
res.data.forEach(item => {
if((item.preferentialMoney-0)%1==0){
item.preferentialMoney = parseInt(item.preferentialMoney)
}else{
item.preferentialMoney = parseFloat(item.preferentialMoney).toFixed(2)
}
})
this.datas.componentData.couponList = res.data.filter((item,index)=>{return item.publicFlag != 0});
if(this.datas.componentData.couponList.length==0){ if(this.datas.componentData.couponList.length==0){
this.showList=false; this.showList=false;
} }
...@@ -202,7 +522,7 @@ export default { ...@@ -202,7 +522,7 @@ export default {
}); });
}, },
// 领取优惠券 // 领取优惠券
receiveCoupon(code,item) { receiveCoupon(code, item) {
this.usingIntegrals = (item.consumeIntegral - 0).toFixed(0); this.usingIntegrals = (item.consumeIntegral - 0).toFixed(0);
this.couponCode = code; this.couponCode = code;
this.couItem = item; this.couItem = item;
...@@ -212,30 +532,6 @@ export default { ...@@ -212,30 +532,6 @@ export default {
} else { } else {
this.useCoupon(1); this.useCoupon(1);
} }
// if (!this.$store.state.sessionId) {
// this.toEnvPage();
// return;
// }
// this.usingIntegrals = (item.consumeIntegral - 0).toFixed(0);
// this.couponCode = code;
// this.couItem = item;
// if (item.receiveCostType == 1) {
// // this.showGetCouponPop = true;
// this.$dialog
// .confirm({
// confirmButtonColor:"#CA173B",
// message: `是否消耗${this.usingIntegrals}积分领取`
// })
// .then(() => {
// this.useCoupon(2);
// })
// .catch(() => {
// // on cancel
// });
// return;
// } else {
// this.useCoupon(1);
// }
}, },
useCoupon(val) { useCoupon(val) {
coupon.receive_coupon(this.couponCode).then(res => { coupon.receive_coupon(this.couponCode).then(res => {
...@@ -289,7 +585,17 @@ export default { ...@@ -289,7 +585,17 @@ export default {
this.$router.push({ name: "login-accountLogin", query }); this.$router.push({ name: "login-accountLogin", query });
} }
} }
},
filters: {
// 格式化为两位小数
formatTwoDecimal(data) {
if (typeof data != "undefined" && data != "") {
return num.toFixed(2);
} }
}
},
}; };
</script> </script>
...@@ -326,9 +632,9 @@ export default { ...@@ -326,9 +632,9 @@ export default {
font-size: 16px; font-size: 16px;
padding: 10px; padding: 10px;
.tops { .tops {
padding: 0px 0px 10px 10px; padding: 0px 0px 10px 0;
h3 { h3 {
font-size: 18px; font-size: 17px;
color: #333; color: #333;
} }
} }
...@@ -337,15 +643,15 @@ export default { ...@@ -337,15 +643,15 @@ export default {
overflow: hidden; overflow: hidden;
.couponList { .couponList {
overflow-x: auto; overflow-x: auto;
white-space: nowrap;
overflow-y: hidden; overflow-y: hidden;
.item { .item {
padding: 25px 20px; // padding: 25px 20px;
display: inline-block; // display: inline-block;
vertical-align: top; // vertical-align: top;
white-space: initial; // white-space: initial;
padding-bottom: 40px; // padding-bottom: 40px;
position: relative; // position: relative;
.img { .img {
transform: scale(1.3); transform: scale(1.3);
} }
...@@ -464,6 +770,639 @@ export default { ...@@ -464,6 +770,639 @@ export default {
} }
} }
} }
.coupon-box1{
width: 33.3%;
height: 130px;
display: inline-block;
position: relative;
padding: 0 5px;
box-sizing: border-box;
.coupon-sort1{
width: 100%;
height: 100%;
color: white;
border-radius: 2px;
position: relative;
overflow: hidden;
box-sizing: border-box;
text-align: center;
padding-top: 18px;
-webkit-mask: radial-gradient(circle at 6px 6px, transparent 6px, red -10px);
mask: radial-gradient(circle at 6px 6px, transparent 6px, red -10px);
-webkit-mask-position: -6px 88px;
mask-position: -6px 88px;
.limit{
font-size: 13px;
line-height: 18.5px;
margin: 10px 0;
padding: 0 10px;
box-sizing: border-box;
}
.receive{
line-height: 36px;
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 36px;
border-top: 1px dashed white;
font-size: 13px;
font-weight: bold;
}
}
}
.coupon-box2{
width: 50%;
height: 105px;
display: inline-block;
position: relative;
padding: 0 5px;
box-sizing: border-box;
.coupon-sort2{
width: 100%;
height: 100%;
color: white;
position: relative;
overflow: hidden;
box-sizing: border-box;
display: flex;
-webkit-mask: radial-gradient(circle at 6px 6px, transparent 6px, red -10px);
mask: radial-gradient(circle at 6px 6px, transparent 6px, red -10px);
-webkit-mask-position: 124px -6px;
mask-position: 124px -6px;
.box-l{
width: 130px;
height: 100%;
text-align: center;
box-sizing: border-box;
padding-top: 20px;
.limit{
margin-top: 14px;
padding: 0 10px;
box-sizing: border-box;
}
}
.box-r{
flex: 1;
width: 20%;
height: 100%;
border-left: 1px dashed white;
font-size: 13px;
text-align: center;
line-height: 16px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
position: relative;
}
}
}
.coupon-box3{
width: 100%;
height: 105px;
display: inline-block;
position: relative;
padding: 0 5px;
box-sizing: border-box;
.coupon-sort3{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
display: flex;
border-top-right-radius: 2px;
border-bottom-right-radius: 2px;
.box-l{
width: 105px;
position: relative;
overflow: hidden;
.inner-div{
width: 5px;
height: 100%;
float: left;
&:after {
content: '';
position: absolute;
top: 0px;
bottom: 0px;
left: -5px;
width: 10px;
height: 100%;
background: radial-gradient(circle, transparent, transparent 4px, var(--bg-color) 5px);
background-size: 10px 10px;
}
}
.inner-r{
width: 100px;
float: left;
height: 100%;
color:white;
text-align: center;
box-sizing: border-box;
padding: 20px 10px 0;
.limit{
margin-top: 14px;
font-size: 12px;
}
}
}
.box-r{
flex: 1;
background-color: white;
padding: 12px;
box-sizing: border-box;
.coupon-box-title{
font-size: 14px;
color: #333;
font-weight: bold;
line-height: 20px;
margin-bottom: 7px;
}
.coupon-remark{
color: #999;
font-size: 12px;
line-height: 16px;
height: 16px;
}
.box-r-bottom{
margin-top: 16px;
width: 100%;
overflow: hidden;
.coupon-time{
font-size: 11px;
color: #333;
width: 110px;
float: left;
}
.coupon-receive{
float: right;
width: 82px;
height: 24px;
border-radius: 12px;
text-align: center;
line-height: 24px;
color: white;
font-size: 11px;
}
}
}
}
}
.coupon-box4{
width: 33.3%;
height: 133px;
display: inline-block;
position: relative;
padding: 0 5px;
box-sizing: border-box;
.coupon-sort4{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
.box-bg{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 110px;
border-radius: 4px;
}
.box-content{
width: calc(100% - 10px);
height: 100%;
position: absolute;
top: 0;
left: 5px;
text-align: center;
-webkit-mask: radial-gradient(circle at top center, transparent 6px, red 6px);
mask: radial-gradient(circle at top center, transparent 6px, red 6px);
}
.box-bottom{
position: absolute;
width: 100%;
bottom: 0;
left: 0;
height: 50px;
-webkit-mask: radial-gradient(circle at 50% -240%, transparent 76%, white 1px);
mask: radial-gradient(circle at 50% -240%, transparent 76%, white 1px);
.box-bottom-btn{
width: 80px;
height: 20px;
border-radius: 12px;
line-height: 20px;
text-align: center;
font-size: 11px;
margin: 22px auto;
}
}
}
}
.coupon-box5{
width: 50%;
height: 86px;
display: inline-block;
position: relative;
padding: 0 5px;
box-sizing: border-box;
.coupon-sort5{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
border-radius: 4px;
display: flex;
.box-l{
text-align: center;
width: 108px;
height: 100%;
color: white;
padding-top: 16px;
}
.box-r{
flex: 1;
height: 100%;
position: relative;
&::after{
content: "";
position: absolute;
background-color: rgba(255,255,255,.3);
width: 120px;
height: 120px;
border-radius: 50%;
top: -17px;
left: 21px;
}
.receive{
width: 43px;
height: 43px;
font-size: 11px;
font-weight: bold;
border-radius: 50%;
text-align: center;
box-sizing: border-box;
padding-top: 5px;
position: absolute;
left: 0;
top:21px;
z-index: 10;
}
}
}
}
.coupon-box6{
width: 100%;
height: 105px;
display: inline-block;
position: relative;
padding: 0 5px;
box-sizing: border-box;
.coupon-sort6{
width: 100%;
height: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
border-radius: 6px;
padding: 7px;
.box-l{
width: 100%;
height: 100%;
border-radius: 4px;
-webkit-mask: radial-gradient(circle at 6px 6px, transparent 6px, red -10px);
mask: radial-gradient(circle at 6px 6px, transparent 6px, red -10px);
-webkit-mask-position: -6px 40px;
mask-position: -6px 40px;
box-sizing: border-box;
padding-top: 16px;
padding-left: 10px;
}
.box-r{
width: 232px;
height: 100%;
position: absolute;
top: 0;
right: 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;
.box-r-info{
color: white;
width: 120px;
.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-time{
font-size: 11px;
line-height: 15px;
margin-top: 18px;
}
}
.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;
}
}
}
}
.coupon-box7{
width: 33.3%;
height: 121px;
display: inline-block;
position: relative;
padding: 0 5px;
box-sizing: border-box;
.coupon-sort7{
height: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
.box-bg{
width: calc(100% - 5px);
height: 116px;
position: absolute;
bottom: 0;
right: 0;
}
.box-content{
width: calc(100% - 5px);
height: 116px;
background-color: white;
box-sizing: border-box;
border: 1px solid #979797;
z-index: 10;
position: absolute;
top: 0;
left: 0;
text-align: center;
padding-top: 12px;
.limit{
font-size: 12px;
color: #666;
margin-top: 8px;
}
.receive{
margin-top: 14px;
line-height: 32px;
font-size: 12px;
font-weight: bold;
color: #333;
position: relative;
&::after{
content: "";
width: 50%;
height: 1px;
border-top: 1px dashed #666;
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
}
}
}
}
}
.coupon-box8{
width: 50%;
height: 93px;
display: inline-block;
position: relative;
padding: 0 5px;
box-sizing: border-box;
.coupon-sort8{
height: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
.box-bg{
width: calc(100% - 5px);
height: 86px;
position: absolute;
bottom: 0;
right: 0;
}
.box-content{
width: calc(100% - 5px);
height: 86px;
background-color: white;
box-sizing: border-box;
border: 1px solid #979797;
z-index: 10;
position: absolute;
top: 0;
left: 0;
-webkit-mask: radial-gradient(circle at 6px 6px, transparent 6px, red -10px);
mask: radial-gradient(circle at 6px 6px, transparent 6px, red -10px);
-webkit-mask-position: 100px -6px;
mask-position: 100px -6px;
&::before{
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #979797;
position: absolute;
top: -6px;
left: 99px;
}
&::after{
content: "";
width: 10px;
height: 10px;
border-radius: 50%;
border: 1px solid #979797;
position: absolute;
bottom: -6px;
left: 99px;
}
.content-l{
width: 106px;
height: 100%;
text-align: center;
box-sizing: border-box;
padding-top: 12px;
position: relative;
float:left;
&::after{
content: "";
width: 1px;
height: 60%;
border-left: 1px dashed #666;
position: absolute;
right: 0;
top: 20%;
}
.limit{
font-size: 12px;
color: #666;
margin-top: 6px;
}
}
.content-r{
width: calc(100% - 106px);
float: left;
font-size: 12px;
color: #333;
font-weight: bold;
text-align: center;
padding-top: 25px;
height: 100%;
box-sizing: border-box;
position: relative;
}
}
}
}
.coupon-box9{
width: 100%;
height: 110px;
display: inline-block;
position: relative;
padding: 0 5px;
box-sizing: border-box;
.coupon-sort9{
height: 100%;
position: relative;
overflow: hidden;
box-sizing: border-box;
.box-bg{
width: calc(100% - 10px);
height: 100px;
position: absolute;
bottom: 0;
right: 0;
}
.box-content{
width: calc(100% - 10px);
height: 100px;
background-color: white;
box-sizing: border-box;
border: 1px solid #979797;
z-index: 10;
position: absolute;
top: 0;
left: 0;
-webkit-mask: radial-gradient(circle at 6px 6px, transparent 6px, red -10px);
mask: radial-gradient(circle at 6px 6px, transparent 6px, red -10px);
-webkit-mask-position: 102px -6px;
mask-position: 102px -6px;
&::before{
content: "";
width: 11px;
height: 11px;
border-radius: 50%;
border: 1px solid #979797;
position: absolute;
top: -6px;
left: 100px;
}
&::after{
content: "";
width: 11px;
height: 11px;
border-radius: 50%;
border: 1px solid #979797;
position: absolute;
bottom: -6px;
left: 100px;
}
.content-l{
width: 108px;
height: 100%;
text-align: center;
position: relative;
float: left;
box-sizing: border-box;
padding-top: 14px;
.limit{
font-size: 12px;
color: #666;
margin-top: 6px;
}
&::after{
content: "";
width: 1px;
height: 60%;
border-left: 1px dashed #979797;
position: absolute;
top: 20%;
right: 0;
}
}
.content-r{
float: left;
width: 140px;
box-sizing: border-box;
padding-left: 20px;
padding-top: 10px;
.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-time{
font-size: 11px;
color: #666;
line-height: 15px;
margin-top: 19px;
}
}
.receive{
font-size: 14px;
color: #333;
font-weight: bold;
text-align: center;
margin-top: 30px;
}
}
}
}
} }
} }
.coupon1 { .coupon1 {
......
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