<template>
<div class="domain" v-if="show">
<div class="content">
<p class="name">{{datas.length}}张优惠券已入账</p>
<div class="items">
<div class="item" v-for="(item,index) in datas" :key="index">
<div class="bg">
<img src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/GzNidMGrec.png" alt />
</div>
<div class="item-content">
<div class="left">
<p v-if="item.preferentialType!=1"><span>￥</span><span class="price">{{item.preferentialMoney}}</span></p>
<p v-else><span class="price">{{item.preferentialDiscount}}</span><span>折</span></p>
<p v-if="item.thresholdType==1">满{{item.meetMoneyUse}}可用</p>
<p v-else>无门槛</p>
</div>
<div class="right">
<p class="info" v-if="item.applyGoodsType==1">仅限部分商品可用</p>
<p class="info" v-else-if="item.applyGoodsType==2">仅限部分分类可用</p>
<p class="info" v-else-if="item.applyGoodsType==3">仅限部分标签可用</p>
<p class="info" v-else>全品类通用</p>
<p class="time">{{item.effectiveDate}}-{{item.expiryDate}}</p>
</div>
</div>
</div>
</div>
<div class="btn" @click="closeHandle">
<img src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/2Gdt7ST6Ej.png" alt />
<span>立即使用</span>
</div>
<div class="bg1">
<img class="bgimg" src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/product/HisJf5dtea.png" alt />
</div>
<div class="close" @click="closeHandle">
<div></div>
</div>
</div>
</div>
</template>
<script>
import promote from "@/api/coupon.js"
export default {
data() {
return {
show: false,
datas: [
// {
// couponName: "发券神器用",
// effectiveDate: "2019-11-01 11:11:33",
// expiryDate: "2019-11-11 11:11:33",
// instruction: "",
// meetMoneyUse: "300.000000",
// preferentialDiscount: "0.000000",
// preferentialMoney: "10.000000",
// preferentialType: "0",
// receiveId: "33943",
// thresholdType: "1",
// userId: "63200",
// applyGoodsType: "0",
// },
// {
// couponName: "发券神器用",
// effectiveDate: "2019-11-01 11:11:33",
// expiryDate: "2019-11-11 11:11:33",
// instruction: "",
// meetMoneyUse: "300.000000",
// preferentialDiscount: "0.000000",
// preferentialMoney: "10.000000",
// preferentialType: "0",
// receiveId: "33944",
// thresholdType: "1",
// userId: "63200",
// applyGoodsType: "1",
// },
// {
// couponName: "发券神器用",
// effectiveDate: "2019-11-04 09:31:09",
// expiryDate: "2019-11-14 09:31:09",
// instruction: "",
// meetMoneyUse: "300.000000",
// preferentialDiscount: "0.000000",
// preferentialMoney: "10.000000",
// preferentialType: "0",
// receiveId: "33945",
// thresholdType: "1",
// userId: "63200",
// applyGoodsType: "2",
// },
// {
// couponName: "发券神器用",
// effectiveDate: "2019-11-04 09:31:09",
// expiryDate: "2019-11-14 09:31:09",
// instruction: "",
// meetMoneyUse: "300.000000",
// preferentialDiscount: "0.000000",
// preferentialMoney: "10.000000",
// preferentialType: "0",
// receiveId: "33946",
// thresholdType: "1",
// userId: "63200",
// applyGoodsType: "3",
// },
// {
// couponName: "前端10-28",
// effectiveDate: "2019-11-04 09:31:10",
// expiryDate: "2020-02-12 09:31:10",
// instruction: "",
// meetMoneyUse: "0.000000",
// preferentialDiscount: "9.900000",
// preferentialMoney: "0.000000",
// preferentialType: "1",
// receiveId: "33947",
// thresholdType: "0",
// userId: "63200",
// applyGoodsType: "0",
// }
]
};
},
onLoad(){
if(wx.getStorageSync('sessionid')){
this.init();
}
},
filters:{
filterTime(val){
let time1=val.split(" ")[0].split("-").join('.');
return time1;
},
},
methods: {
init(){
promote.queryDialogCoupons().then((response)=>{
if(response.data.code==200){
console.log('发券神器',response)
response.data.data.forEach(item => {
item.preferentialMoney = Number(item.preferentialMoney)
item.preferentialDiscount = Number(item.preferentialDiscount)
item.meetMoneyUse = Number(item.meetMoneyUse)
item.effectiveDate = item.effectiveDate.split(" ")[0].split("-").join('.');
item.expiryDate = item.expiryDate.split(" ")[0].split("-").join('.');
})
this.datas=response.data.data;
if(response.data.data.toString().length<=0){
this.show=false
}else{
this.show=true
}
}
})
// if(this.$store.state.showSendingCoupon){
// this.$store.dispatch('showCouponPop',false)
// }
},
closeHandle() {
this.show = false;
}
}
};
</script>
<style lang="scss" scoped>
.domain {
z-index: 999;
position: fixed;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: rgba(#000000, 0.75);
.content {
text-align: center;
position: absolute;
width: 100%;
margin: auto;
top: 10%;
.name{
position: absolute;
width: 100%;
color: #FFFFFF;
text-align: center;
top: 75px;
font-size: 17px;
}
.items {
position: absolute;
width: 100%;
height: 260px;
overflow-y: auto;
overflow-x: hidden;
top: 109px;
padding-top: 5px;
.item {
position: relative;
left: 30px;
height: 100px;
overflow: hidden;
.bg {
position: absolute;
width: 280px;
top: -30px;
height: 130px;
img{
height: 130px;
}
}
.item-content {
position: absolute;
display: flex;
left: 26px;
height: 95px;
.left {
display: flex;
flex-direction: column;
justify-content: center;
width: 93px;
height: 100%;
color: #fff;
font-weight: bold;
text-align: center;
font-size: 15px;
.price{
font-size: 25px;
}
}
.right{
width: 40vw;
height: 95px;
display: flex;
flex-direction: column;
justify-content: center;
.info{
font-size: 16px;
color: #333;
font-weight:bold;
}
.time{
font-size:12px;
color: #A3A3A3;
margin-top: 10px;
}
}
}
}
}
i {
color: #ff7422;
font-size: 24px;
}
.bg1 {
width: 343px;
margin-left: 12px;
.bgimg{
width: 100%;
height: 436px;
}
}
.btn {
position: absolute;
width: 70%;
left: 50px;
bottom: 16px;
img{
height: 40px;
}
span {
font-size: 18px;
color: #f53610;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
}
.close {
position: absolute;
bottom: -36px;
width: 100%;
div{
width: 20px;
height: 20px;
border-radius: 50px;
border: 1px solid #ff7422;
position: relative;
margin: 0 auto;
&::before{
content: "";
width: 16px;
height: 1px;
background-color:#ff7422;
position: absolute;
top: 10px;
left: 3px;
transform: rotate(-45deg);
transform-origin: center center;
}
&::after{
content: "";
width: 16px;
height: 1px;
background-color:#ff7422;
position: absolute;
top: 10px;
left: 3px;
transform: rotate(45deg);
transform-origin: center center;
}
}
}
}
}
</style>