<template>
<div class="mask">
<div class="option" @click="yu_mask"></div>
<div class="coupons" @click="yu_mask">
<p><img src="@/assets/img/accout/yh2.png" alt />Coupons</p>
<p>X</p>
</div>
<div class="coupons_box">
<div class="centera" v-for="(item,index) in parys" :key="index">
<!-- <p class="header">{{item.store_name}}</p> -->
<ul class="aaa">
<li v-for="(cou,e) in item.Couponinfo" :key="e" class="cou_center">
<div class="cou_mj">
<div class="money">
<p class="fh">{{GLOBA.money_tag}}</p>
<p class="txt">{{cou.Coupon_amount}}</p>
</div>
</div>
<div class="cou_time">
<p class="cou1">{{item.store_name}}</p>
<p class="cou2">{{cou.Coupon_order_amount}} available</p>
<p class="cou3">Time：{{cou.Coupon_begin_time}}~{{cou.Coupon_end_time}}</p>
</div>
<div class="check_box" @click="coupons_selected(item,index,cou,e)">
<p class="checkb self-centered" :class="{‘check‘: cou.checked}"></p>
</div>
<div class="if_checkb" v-show="cou.show"></div>
</li>
</ul>
</div>
</div>
<div class="confirm_but" @click="confirm_but">Confirm</div>
</div>
</template>
<script>
export default {
props: ["parys"],
data() {
return {
coupons_list: [],
ifcoupons:true,
};
},
created() {
this.coupons_default()
},
activated(){
this.if_coupons()
},
methods: {
coupons_default() {
let store_num = 0
this.parys.forEach(its => {
let ship_price = its.sys_info ? its.sys_info[0].ship_price : 0
let total_price = its.store_total_price ? its.store_total_price : its.order_goods_price
if (its.store_id) {
store_num += its.Couponinfo[0].Coupon_amount
}
its.goodall_price = total_price - ship_price
})
this.parys.forEach(element => {
if (!element.store_id) {
element.Couponinfo.forEach(iet => {
if (iet.Coupon_order_amount > element.order_goods_price - store_num) {
iet.show = true
} else {
iet.show = false
}
})
}
});
for (let i = 0; i < this.parys.length; i++) {
this.parys[i].Couponinfo.some((iem, e) => {
if (!iem.show) {
this.coupons_selected(this.parys[i], i, iem, e)
return true;
}
})
}
sessionStorage.setItem(‘coupon_info‘, JSON.stringify(this.parys))
setTimeout(()=>{
this.ifcoupons = false
},2000)
},
if_coupons(){
if (!this.ifcoupons) {
let coupons_info= JSON.parse(sessionStorage.getItem(‘coupon_info‘) || ‘[]‘)
console.log(coupons_info,99)
coupons_info.some((item,n) =>{
item.Couponinfo.some((ie,i) =>{
if (ie.checked) {
this.parys[n].Couponinfo.forEach(it =>{
it.checked = false
})
this.parys[n].Couponinfo[i].checked = true
return true
}
})
})
}
},
coupons_selected(item, i, coupon, e) {
console.log(item,i,coupon,e)
if (typeof coupon.checked == "undefined") {
this.$set(coupon, "checked", true);
} else {
coupon.checked = !coupon.checked;
}
item.Couponinfo.forEach(k =>{
console.log(k)
if (k.id != coupon.id) {
if (typeof k.checked == "undefined") {
this.$set(k, "checked", false);
} else {
k.checked = false;
}
}
})
//
let store_price = 0
let coupon_amount = 0
let coupon_price = 0
let all_price = 0
this.parys.forEach(it => {
if (it.store_id) {
it.Couponinfo.forEach(im =>{
if(im.checked){
store_price += im.Coupon_amount
}
})
}else{
all_price = it.goodall_price
it.Couponinfo.forEach(ie =>{
if(ie.checked){
coupon_price = ie.Coupon_amount
}
})
}
})
this.parys.forEach(ent => {
ent.preferential_price = (coupon_price/all_price)*ent.goodall_price
if (ent.store_id) {
ent.Couponinfo.forEach(ie => {
if (ie.Coupon_order_amount > ent.goodall_price - ent.preferential_price) {
ie.show = true
} else {
ie.show = false
}
})
}else{
ent.Couponinfo.forEach(iet => {
if (iet.Coupon_order_amount > ent.goodall_price - store_price) {
iet.show = true
} else {
iet.show = false
}
})
}
});
//
},
confirm_but() {
this.coupons_list = []
this.parys.forEach(a =>{
a.Couponinfo.forEach(es =>{
if(es.checked){
es.store_id = a.store_id
this.coupons_list.push(es)
}
})
})
sessionStorage.setItem(‘coupon_info‘, JSON.stringify(this.parys))
this.$emit("confirm_but", this.coupons_list);
},
yu_mask() {
this.$emit("yu_mask");
},
}
};
</script>
<style lang="scss" scoped>
.mask {
width: 100%;
height: 100vh;
z-index: 333;
background: rgba(0, 0, 0, 0.5);
position: fixed;
top: 0;
left: 0;
.option {
width: 100%;
height: 3.2rem;
}
.coupons {
display: flex;
justify-content: center;
background-color: #fff;
height: 0.8rem;
width: 100vw;
padding: 0 0.3rem;
box-sizing: border-box;
border-bottom: 0.5px solid #f7f7f7;
border-bottom: 1px solid #ccc;
position: relative;
p:nth-child(1) {
font-family: "Calibri-Bold";
font-weight: Bold;
font-size: 0.3rem;
color: #017EC2;
line-height: 0.8rem;
img{
width: 15%;
margin-right: 0.2rem;
margin-top: -2px;
vertical-align: middle;
}
}
p:nth-child(2) {
font-family: "Calibri";
font-weight: 400;
font-size: 0.3rem;
color: #ccc;
width: 1rem;
text-align: center;
line-height: 0.7rem;
position: absolute;
right: 0;
}
}
.confirm_but {
width: 100vw;
height: 1rem;
line-height: 1rem;
text-align: center;
background-color: #008EDD;
font-family: "Calibri-Bold";
font-weight: Bold;
font-size: 0.34rem;
color: #fff;
}
.coupons_box {
width: 100vw;
height: calc(100vh - 5rem);
overflow: hidden;
overflow-x: hidden;
overflow-y: scroll;
background-color: #f7f7f7;
padding: 15px;
padding-top: 0px;
box-sizing: border-box;
}
.centera {
.header {
height: 0.6rem;
line-height: 0.6rem;
text-align: center;
font-size: 0.28rem;
position: relative;
background: #e9e9e9;
color: #017EC2;
font-weight: bold;
}
.aaa {
width: 100%;
.cou_center {
box-shadow: 2px 2px 10px #e2e2e2;
width: 100%;
height: 1.6rem;
display: flex;
justify-content: space-between;
margin-top: 0.1rem;
position: relative;
.if_checkb{
position: absolute;
top: 0;
left: 0;
z-index: 20;
background: rgba(0, 0, 0, 0.3);
width: 100%;
height: 100%;
}
.cou_mj {
background-color:#33B6FF;
width: 30%;
height: 100%;
.money {
width: 100%;
height: 100%;
line-height: 1.6rem;
text-align: center;
font-size: 0.9rem;
font-weight: bold;
color: #fff;
display: flex;
justify-content: center;
.fh {
font-size: 0.1rem;
font-weight: bold;
line-height: 0.82rem;
}
}
.cou_ke {
font-size: 0.2rem;
text-align: center;
height: 40%;
line-height: 0.5rem;
font-weight: 400;
}
}
.cou_time {
width: 50%;
height: 100%;
font-size: 0.26rem;
padding: 0.2rem 0;
box-sizing: border-box;
color: #fff;
background-color: #33B6FF;
.cou1 {
font-size: 0.4rem;
font-weight: bold;
}
.cou2 {
font-size: 0.3rem;
margin-top: 0.06rem;
}
.cou3 {
color: #fff;
font-weight: bold;
margin-top: 0.06rem;
font-size: 0.23rem;
}
}
}
}
}
}
.check_box {
height: 100%;
width: 20%;
position: relative;
border-left: 2px dotted #33B6FF;
background: #fff;
.checkb{
width: 0.4rem;
height: 0.4rem;
border-radius: 50%;
border: 1px solid #999999;
box-sizing: border-box;
}
.check {
background-color: #33b6ff;
border: none;
}
.check::after {
display: block;
/* content: "\2714"; */
font-size: 0.28rem;
color: #fff;
font-weight: 600;
text-align: center;
line-height: 0.4rem;
}
}
</style>
优惠券选择
原文：https://www.cnblogs.com/xiao-wu-gui/p/12201608.html
