Skip to content

M
mayi-mp-shop
Commit 4360b853 by hxx
Options

优惠券组件升级

parent 22320d2f
Showing with 118 additions and 39 deletions
src/components/activity/coupon.vue
......@@ -19,15 +19,28 @@
>
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
<div class="box-content">
<div class="content-l">
<div v-if="item.preferentialType!=1">
<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>
<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: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
......@@ -83,15 +96,30 @@
>
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
<div class="box-content">
<div class="content-l">
<div v-if="item.preferentialType!=1">
<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>
<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
......@@ -121,14 +149,21 @@
>
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
<div class="box-content">
<div v-if="item.preferentialType!=1">
<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>
<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
......@@ -154,16 +189,24 @@
@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 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!=1">
<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>
<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
......@@ -224,14 +267,20 @@
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>
<div class="box-l">
<div v-if="item.preferentialType!=1">
<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>
<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
......@@ -265,14 +314,21 @@
</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">
<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>
<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
......@@ -304,14 +360,17 @@
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>
<div v-if="item.preferentialType!=1">
<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>
<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
......@@ -342,13 +401,17 @@
:style="{'background' : datas.componentData.color && datas.componentData.color.name}"
>
<div class="box-l">
<div v-if="item.preferentialType!=1">
<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>
<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
......@@ -382,14 +445,20 @@
>
<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">
<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>
<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" 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
......@@ -492,13 +561,17 @@ export default {
item.preferentialDiscount = parseFloat(item.preferentialDiscount).toFixed(2)
}
item.meetMoneyUse = parseFloat(item.meetMoneyUse).toFixed(2)
if (item.preferentialType == 2) {
item.randomMoneyMinimum = this.keepSelfNum(item.randomMoneyMinimum);
item.randomMoneyMaximum = this.keepSelfNum(item.randomMoneyMaximum);
item.receiveTag = this.isShowRangeCoupon(item);
}
})
console.log(res.data.data,'res.datada.')
this.couponList = res.data.data.filter((item,index)=>{return item.publicFlag != 0});
if(this.couponList.length==0){
console.log('hideCoupon')
this.showList=false;
......@@ -591,16 +664,22 @@ export default {
};
this.$router.push({ name: "login-accountLogin", query });
}
}
},
filters: {
// 格式化为两位小数
formatTwoDecimal(data) {
if (typeof data != "undefined" && data != "") {
return num.toFixed(2);
}
isShowRangeCoupon(item) {
const startTimestamp = new Date(item.receiveStartTime).getTime();
const endTimestamp = new Date(item.receiveEndTime).getTime();
const nowTimestamp = new Date().getTime();
return nowTimestamp >= startTimestamp && nowTimestamp <= endTimestamp;
},
keepSelfNum(num) {
let r;
num = Number(num);
try {
r = num.toString().split(".")[1].length;
} catch (e) {
r = 0;
}
return num.toFixed(r);
}
},
};
......
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