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 @@ ...@@ -19,15 +19,28 @@
> >
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div> <div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
<div class="box-content"> <div class="box-content">
<div class="content-l"> <div class="content-l" :style="{
<div v-if="item.preferentialType!=1"> 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> <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> <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;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">折</span>
</div> </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"> <div class="limit">
<span v-if="item.thresholdType == 0">不限制</span> <span v-if="item.thresholdType == 0">不限制</span>
<span <span
...@@ -83,15 +96,30 @@ ...@@ -83,15 +96,30 @@
> >
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div> <div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
<div class="box-content"> <div class="box-content">
<div class="content-l"> <div class="content-l" :style="{
<div v-if="item.preferentialType!=1"> 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> <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> <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;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">折</span>
</div> </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"> <div class="limit">
<span v-if="item.thresholdType == 0">不限制</span> <span v-if="item.thresholdType == 0">不限制</span>
<span <span
...@@ -121,14 +149,21 @@ ...@@ -121,14 +149,21 @@
> >
<div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div> <div class="box-bg" :style="{'background': datas.componentData.color && datas.componentData.color.hotColor}"></div>
<div class="box-content"> <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> <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> <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;" :style="{'color': datas.componentData.color && datas.componentData.color.hotColor}">折</span>
</div> </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"> <div class="limit">
<span v-if="item.thresholdType == 0">不限制</span> <span v-if="item.thresholdType == 0">不限制</span>
<span <span
...@@ -154,16 +189,24 @@ ...@@ -154,16 +189,24 @@
@click="receiveCoupon(item.couponCode,item)" @click="receiveCoupon(item.couponCode,item)"
:style="{'background' : datas.componentData.color && datas.componentData.color.hotColor}" :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 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> <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> <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;color:white;" :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">
<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}"> <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
...@@ -224,14 +267,20 @@ ...@@ -224,14 +267,20 @@
:style="{'background' : datas.componentData.color && datas.componentData.color.name}" :style="{'background' : datas.componentData.color && datas.componentData.color.name}"
> >
<div class="box-l"> <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> <span style="font-size:13px;">￥</span><span class="price" style="font-size:24px;">{{item.preferentialMoney}}</span>
</div> </div>
<div v-else> <div v-else-if="item.preferentialType==1">
<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">
<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;"> <div class="limit" style="font-size:11px;margin-top:6px;">
<span v-if="item.thresholdType == 0">不限制</span> <span v-if="item.thresholdType == 0">不限制</span>
<span <span
...@@ -265,14 +314,21 @@ ...@@ -265,14 +314,21 @@
</div> </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 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> <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> <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;color:white;" :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">
<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}"> <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
...@@ -304,14 +360,17 @@ ...@@ -304,14 +360,17 @@
:style="{'background' : datas.componentData.color && datas.componentData.color.name}" :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> <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-if="item.preferentialType==1">
<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">
<span style="font-size:12px;color:white;">￥</span>
<span class="price" style="font-size: 14px;">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div>
<div class="limit"> <div class="limit">
<span v-if="item.thresholdType == 0">不限制</span> <span v-if="item.thresholdType == 0">不限制</span>
<span <span
...@@ -342,13 +401,17 @@ ...@@ -342,13 +401,17 @@
:style="{'background' : datas.componentData.color && datas.componentData.color.name}" :style="{'background' : datas.componentData.color && datas.componentData.color.name}"
> >
<div class="box-l"> <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> <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-if="item.preferentialType==1">
<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">
<span style="font-size:12px;color:white;">￥</span>
<span class="price">{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}</span>
</div>
<div class="limit"> <div class="limit">
<span v-if="item.thresholdType == 0">不限制</span> <span v-if="item.thresholdType == 0">不限制</span>
<span <span
...@@ -382,14 +445,20 @@ ...@@ -382,14 +445,20 @@
> >
<div class="inner-div" :style="{'--bg-color':datas.componentData.color && datas.componentData.color.color}"></div> <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 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!=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> <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-if="item.preferentialType==1">
<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;">
<span style="font-size:12px;color:white;">￥</span>
<span class="price" style="font-size:12px;">
{{ item.randomMoneyMinimum }}-{{ item.randomMoneyMaximum }}
</span>
</div>
<div class="limit"> <div class="limit">
<span v-if="item.thresholdType == 0">不限制</span> <span v-if="item.thresholdType == 0">不限制</span>
<span <span
...@@ -492,13 +561,17 @@ export default { ...@@ -492,13 +561,17 @@ export default {
item.preferentialDiscount = parseFloat(item.preferentialDiscount).toFixed(2) item.preferentialDiscount = parseFloat(item.preferentialDiscount).toFixed(2)
} }
item.meetMoneyUse = parseFloat(item.meetMoneyUse).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.') console.log(res.data.data,'res.datada.')
this.couponList = res.data.data.filter((item,index)=>{return item.publicFlag != 0}); this.couponList = res.data.data.filter((item,index)=>{return item.publicFlag != 0});
if(this.couponList.length==0){ if(this.couponList.length==0){
console.log('hideCoupon') console.log('hideCoupon')
this.showList=false; this.showList=false;
...@@ -591,16 +664,22 @@ export default { ...@@ -591,16 +664,22 @@ export default {
}; };
this.$router.push({ name: "login-accountLogin", query }); this.$router.push({ name: "login-accountLogin", query });
} }
}
}, },
filters: { isShowRangeCoupon(item) {
// 格式化为两位小数 const startTimestamp = new Date(item.receiveStartTime).getTime();
formatTwoDecimal(data) { const endTimestamp = new Date(item.receiveEndTime).getTime();
if (typeof data != "undefined" && data != "") { const nowTimestamp = new Date().getTime();
return nowTimestamp >= startTimestamp && nowTimestamp <= endTimestamp;
},
return num.toFixed(2); 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