Coupon flow refined

This commit is contained in:
Vion 2022-01-24 18:01:51 +08:00
parent ab70862f63
commit de8d67fc51
8 changed files with 215 additions and 75 deletions

View File

@ -4,12 +4,6 @@ body {
line-height: 1.5;
color: #666;
}
div[data-js-modal-menu] {
display:none;
}
aside div[data-js-modal-menu] {
display:block;
}
.el-message-box .el-button--primary{
background-color: #e1001a !important;
color:#fff;
@ -532,7 +526,12 @@ picture {
max-width: 768px;
margin: 0 auto;
}
div[data-js-modal-menu] {
display:none;
}
aside div[data-js-modal-menu] {
display:block;
}
html {
font-size: 16px;
}

View File

@ -451,7 +451,6 @@
}
span {
font-size: 45px;
font-weight: bold;
}
strong {
font-style: normal;

View File

@ -236,6 +236,7 @@ color: #333333;
font-style: normal;
display: flex;
justify-content: space-between;
align-items: baseline;
span {
font-size: 14px;
@ -251,6 +252,10 @@ color: #333333;
}
}
}
.ts-right-arr {
line-height:1rem;
height:1.5rem;
}
}

View File

@ -231,6 +231,5 @@ import Myheader from "~/components/header.vue";
<style lang="less" scoped>
//
@import url("../../assets/css/global.less");
@import url("../../assets/css/discount.less");
</style>

View File

@ -8,7 +8,16 @@ ul li ol li em strong i {
}
.settlement {
}
.rc-merchandise {
li {
align-items: baseline;
}
}
.discountInfo {
i,em {
font-size:.875rem;
}
}
.rc-discount {
position: relative;
width: 100%;
@ -38,7 +47,7 @@ ul li ol li em strong i {
font-size: 12px;
}
span {
font-size: 26px;
font-size: 45px;
}
strong {
font-style: normal;
@ -418,7 +427,7 @@ ul li ol li em strong i {
justify-content: flex-end;
flex-direction: column;
align-items: self-end;
text-align: right;
i {
font-style: normal;
color: #333333;
@ -430,8 +439,16 @@ ul li ol li em strong i {
font-style: normal;
color: #e1001a;
font-size: 26px;
display:inline-block;
width:5rem;
}
.discountInfo {
i,em {
font-size:1rem;
}
}
span {
display: block;
width: 164px;

View File

@ -88,8 +88,12 @@
<div class="rc-foot">
<div class="rc-foo">
<div>
<div class="discountInfo" v-if="discountAmount">
<i>优惠金额:</i>
<em>{{ discountAmount }}</em>
</div>
<i>合计金额:</i>
<em>{{ sumPrice }}</em>
<em>{{ discountedSumPrice }}</em>
</div>
<div style="font-weight: bold">
<span @click="preJiesuan()">提交订单</span>
@ -147,7 +151,7 @@
</div>
</div>
</el-dialog>
<el-dialog :visible.sync="dialogInfo1" class="pop_coupon">
<el-dialog :visible.sync="dialogInfo1" class="pop_coupon" :close-on-click-modal="false">
<div class="ts-no-data" v-if="drawlist.length<=0">您还没有优惠券可在商品的详情页面中领取</div>
<div class="rs-dis">
<div
@ -155,26 +159,33 @@
v-for="(item, index) in drawlist"
:key="index"
>
<img :src="userimage" alt="" />
<div class="rc-contair">
<div class="rc-left">
<div v-if="item.couponAmount">
<i></i><span>{{ item.couponAmount }}</span>
</div>
</div>
<div class="rc-right">
<i>
{{ item.couponDesc }}
</i>
<div v-show="item.validTo">
<span>有效期</span>
<em>{{ item.validTo }}</em>
</div>
<div class="rc-footer">
<span @click="pickCoupon(item)">立即使用</span>
</div>
</div>
</div>
<img :src="userimage" alt="" />
<div class="rc-contair">
<div class="rc-left" :style='usercolor'>
<div>
<i v-if="(item.couponTypeId!='4' && item.couponAmount>0)">
</i>
<span>
{{item.couponTypeId=='4'?parseInt(((item.discount)*10))+'折':item.couponAmount}}
</span>
</div>
<strong>{{ item.couponName }}</strong>
</div>
<div class="rc-right">
<i :style='usercolor'>
{{ item.couponName }}
</i>
<div class="rc-userfont">
<strong>有效期</strong>
<span>{{item.validFrom}}</span>
<em>{{item.validTo}}</em>
</div>
<div class="rc-footer">
<span @click="pickCoupon(item)">立即使用</span>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
@ -201,6 +212,7 @@ export default {
path:'/personal/settlement'
}
],
usercolor:{color:'#e1001a'},
userimage: require("../../assets/image/unused.png"),
curCoupon:{couponName:'未选择可用优惠券'},
drawlist:[],
@ -239,14 +251,71 @@ export default {
promotion: "¥167.00",
payment: "¥0.00 ",
},
discountAmount:0
};
},
computed: {
//
sumPrice() {
return this.goldmedal.reduce((pre, cur) => {
return pre + cur.buyCount * cur.productPrice;
}, 0);
sumPrice() {
return this.goldmedal.reduce((pre, cur) => {
return pre + cur.buyCount * cur.productPrice;
}, 0);
},
//
discountedSumPrice() {
let total = 0;
if(this.curCoupon.couponId) {
//Coupon Calculation
let couponUsed=false;
for(let itemInCart of this.goldmedal) {
if((!this.curCoupon.productCodes || this.curCoupon.productCodes.indexOf(itemInCart.productCode)>-1) && !couponUsed) {
if(this.curCoupon.minQuantity && this.curCoupon.minQuantity>itemInCart.buyCount) {
//Check minQuantity
total+=(itemInCart.buyCount * itemInCart.productPrice);
} else if(this.curCoupon.minPrice && this.curCoupon.minPrice > (itemInCart.buyCount * itemInCart.productPrice)) {
//Check minPrice
total+=(itemInCart.buyCount * itemInCart.productPrice);
} else {
//Into coupon discount calculation
switch(this.curCoupon.couponTypeId) {
case 1: //Amount deduct
total = total + (itemInCart.productPrice * itemInCart.buyCount - this.curCoupon.couponAmount);
this.discountAmount = this.curCoupon.couponAmount;
couponUsed=true;
break;
case 2: //Amount deduct with minPrice restriction
case 6:
total = total + (itemInCart.productPrice * itemInCart.buyCount) - this.curCoupon.couponAmount;
this.discountAmount = this.curCoupon.couponAmount;
couponUsed=true;
break;
case 3: //Limited product % discount
case 4: //% discount
total = total + (itemInCart.productPrice * itemInCart.buyCount) * (1-this.curCoupon.discount);
this.discountAmount = (itemInCart.productPrice * itemInCart.buyCount) * this.curCoupon.discount;
couponUsed=true;
break;
default:
total += itemInCart.productPrice * itemInCart.buyCount;
break;
}
//Into coupon discount calculation end
}
} else {
total += itemInCart.productPrice * itemInCart.buyCount;
}
}
} else {
//Normal Calculation
total=this.goldmedal.reduce((pre, cur) => {
return pre + cur.buyCount * cur.productPrice;
}, 0);
}
if(this.discountAmount)
this.discountAmount = this.discountAmount.toFixed(2);
if(!total)
total=0;
total = total.toFixed(2);
return total;
},
},
methods: {
@ -278,14 +347,34 @@ export default {
async userdraw(mobile) {
let data = await getdraw(mobile);
let _self = this;
let curTime = new Date().getTime();
let valDateFromTime=0;
let valDateToTime=0;
let dateChecked=true;
if (data) {
//TODO check status = 0
this.drawlist=[];
data.data.forEach((item) => {
if(item.status==0) {
_self.drawlist.push(item);
for(let itemInCart of this.goldmedal) {
for(let myCoupon of data.data) {
valDateFromTime=0;
valDateToTime=0;
dateChecked=true;
if(myCoupon.fValidFrom) {
valDateFromTime = new Date(myCoupon.fValidFrom).getTime();
}
if(myCoupon.fValidTo) {
valDateToTime = new Date(myCoupon.fValidTo).getTime();
}
if(valDateFromTime && curTime < valDateFromTime) {
dateChecked=false;
}
if(valDateToTime && curTime > valDateToTime) {
dateChecked=false;
}
if(dateChecked && myCoupon.status == 0 && (myCoupon.productCodes.indexOf(itemInCart.productCode)>-1 || !myCoupon.productCodes)) {
_self.drawlist.push(myCoupon);
}
}
});
}
}
},
pickCoupon(item){
@ -450,8 +539,8 @@ export default {
let res = await generateOrderWX(postData);
if (res.success) {
let userPayData = {
orderId: res.data,
userprice: this.sumPrice,
orderId: res.data.orderNumber,
userprice: parseFloat(res.data.orderAmount).toFixed(2),
userinformation:
postData[0].orderAddress.addressUserName +
" " +

View File

@ -19,7 +19,7 @@
<el-col :span="6" class="ready_right">
<div class="inline_right">
<p>付款金额:</p>
<p class="price">{{ userPayData.userprice }}</p>
<p class="price" v-if="userPayData.userprice">{{ userPayData.userprice }}</p>
</div>
<div class="inline_right">
<p>收货信息:</p>

View File

@ -208,8 +208,8 @@
<FixRight></FixRight>
<Myfooter v-on:litentop="showmesg"></Myfooter>
</div>
<el-dialog :visible.sync="dialogInfo1" @close="userclose" class="pop_coupon">
<div class="ts-no-data" v-if="usernewlist.length<=0">您还没有优惠券可在商品的详情页面中领取</div>
<el-dialog :visible.sync="dialogInfo1" @close="userclose" class="pop_coupon" :close-on-click-modal="false">
<div class="ts-no-data" v-if="usernewlist.length<=0">目前还没有可用的优惠券</div>
<div class="rs-dis">
<div
class="rc-discount"
@ -217,25 +217,32 @@
:key="index"
>
<img :src="userimage" alt="" />
<div class="rc-contair">
<div class="rc-left">
<div v-if="item.couponAmount">
<i></i><span>{{ item.couponAmount }}</span>
</div>
</div>
<div class="rc-right">
<i>
{{ item.couponDesc }}
</i>
<div v-show="item.validTo">
<span>有效期</span>
<em>{{ item.validTo }}</em>
</div>
<div class="rc-footer">
<span @click="usergetconf(item)">立即领取</span>
</div>
</div>
</div>
<div class="rc-contair">
<div class="rc-left">
<div>
<i v-if="(item.couponTypeId!='4' && item.couponAmount>0)">
</i>
<span>
{{item.couponTypeId=='4'?parseInt(((item.discount)*10))+'折':item.couponAmount}}
</span>
</div>
<strong>{{ item.couponName }}</strong>
</div>
<div class="rc-right">
<i>
{{ item.couponName }}
</i>
<div class="rc-userfont">
<strong>有效期</strong>
<span>{{item.validFrom}}</span>
<em>{{item.validTo}}</em>
</div>
<div class="rc-footer">
<span @click="usergetconf(item)">立即领取</span>
</div>
</div>
</div>
</div>
</div>
</el-dialog>
@ -472,6 +479,7 @@ export default {
userclose() {
this.userlist = [];
this.dialogInfo1=false;
},
async userquery() {
let data = await goodsmessage(this.productCode);
@ -518,7 +526,7 @@ export default {
let alllist = [];
this.userlist = this.alldraw.data;
this.userlist.forEach((element, index) => {
if (typeof element.productCodes == "string") {
if (typeof element.productCodes == "string" || !element.productCodes) {
userlist.push(element);
// let s=element.productCodes.split(',');
// console.log(s.indexOf(this.productCode) != -1 )
@ -527,12 +535,36 @@ export default {
});
let menualist = [];
userlist.filter((item) => {
item.productCodes = item.productCodes.split(",");
item.productCodes.forEach((element) => {
if (element == this.curItem.productCode && item.activityId !== 10) {
menualist.push(item);
}
});
let valDateFromTime=0;
let valDateToTime=0;
let curTime = new Date().getTime();
let dateChecked=true;
if(item.fValidFrom) {
valDateFromTime = new Date(item.fValidFrom).getTime();
}
if(item.fValidTo) {
valDateToTime = new Date(item.fValidTo).getTime();
}
if(valDateFromTime && curTime < valDateFromTime) {
dateChecked=false;
}
if(valDateToTime && curTime > valDateToTime) {
dateChecked=false;
}
if(dateChecked) {
if(!item.productCodes) {
menualist.push(item);
} else {
item.productCodes = item.productCodes.split(",");
item.productCodes.forEach((element) => {
if (element == this.curItem.productCode && item.activityId !== 10) {
menualist.push(item);
}
});
}
} else {
//Expired coupons
}
});
this.usernewlist = menualist;
}