156 lines
4.7 KiB
Vue
156 lines
4.7 KiB
Vue
<template>
|
||
<view>
|
||
<view class="posAll bac5" v-if="ifMask">
|
||
<view class="animated width100 " :class="ifAnimated?'bounceInUp':'bounceOutDown'" style="position: absolute;bottom: 0;">
|
||
<view class="bacf pad-zy20 pad-x20" style="border-radius: 30rpx 30rpx 0 0;">
|
||
<view class="disjbac pad-sx20">
|
||
<view class="fon28 bold colb">优惠券</view>
|
||
<view @tap="executeEv(0)" class="icon icon-del-white fon24" style="color: #b2b2b2;"></view>
|
||
</view>
|
||
<view class="fon20" style="color: #616161;">已选中推荐优惠，使用优惠券{{couponCount}}张，共抵扣<span class="col-e42417">￥{{$toolAll.tools.addXiaoShu(couponPrice)}}</span></view>
|
||
</view>
|
||
<view class="pad20 overflow-s" style="background-color: #f2f2f2;max-height: 720rpx;">
|
||
<view @tap="chooseCoupon(item.id,index)" class="radius12 bacf boxshow2 pad-sx20 fon24" :class="index<(dataList.length-1)?'mar-x20':''" v-for="(item,index) in dataList" :key="index">
|
||
<view class="disac">
|
||
<view class="flexs bold col-e42417 dis pad-z20" style="min-width: 180rpx;color:#e42417;">
|
||
<view class="">￥</view>
|
||
<view class="fon66" style="margin-top: -10rpx;">{{item.amount}}</view>
|
||
</view>
|
||
<view class="width100 pad-zy20">
|
||
<view class="line-h40">
|
||
<view class="">{{item.name}}</view>
|
||
<view class="fon20" style="color: #747474;" v-if="item.begin_at">有限期：{{item.begin_at.slice(0,10).split('-').join('.')}}-{{item.end_at.slice(0,10).split('-').join('.')}}</view>
|
||
</view>
|
||
</view>
|
||
<view class="disjcac flexs mar-zy20" :class="item.ifcheck?'coupon-active':'coupon-mo'">
|
||
<image src="/static/public/icon-choose.png" mode="" style="width: 18rpx;height: 18rpx;"></image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="col9 fon24 disjcac pad-sx50" v-if="!dataList.length">暂无可用优惠券</view>
|
||
</view>
|
||
<view class="bacf pad-sx20 disjcac boxshowt">
|
||
<view @tap="executeEv(1)" class="disjcac fon24" style="width: 380rpx;height: 70rpx;border-radius: 35rpx;background-color: #f37617;color: #FFFFFF;">
|
||
确定
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name:"custom-coupon",
|
||
props:{
|
||
currentPrice:{
|
||
type:Number | String,
|
||
default:0 | '0'
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
dataList:[],
|
||
ifMask:false,//控制蒙层
|
||
ifAnimated:false,//控制白色弹框内容
|
||
couponPrice:0,//选中优惠券金额
|
||
couponId:'',//选中优惠券id
|
||
couponCount:0,//选中优惠券数量
|
||
couponIndex:0,//当前选中项
|
||
};
|
||
},
|
||
mounted() {
|
||
this.getCoupon();
|
||
},
|
||
methods:{
|
||
// 执行动画
|
||
executeEv(index){
|
||
if(index){
|
||
if(this.couponId){
|
||
this.$emit('confrimEv',{coupon_id:this.couponId,coupon_price:this.couponPrice});
|
||
} else {
|
||
this.$emit('confrimEv',{coupon_id:0,coupon_price:0});
|
||
}
|
||
} else {
|
||
if(!this.$parent.couponInfo.coupon_id){
|
||
this.setCoupon(false,this.couponIndex);
|
||
}
|
||
}
|
||
this.ifAnimated=false;
|
||
setTimeout(()=>{
|
||
this.ifMask = false;
|
||
},600)
|
||
},
|
||
// 查询是否选中
|
||
checkChoose(){
|
||
console.log(this.couponId,666666);
|
||
let exitIndex = this.dataList.findIndex(item=>item.id==this.couponId);
|
||
if(exitIndex!=-1){
|
||
this.dataList[exitIndex].ifcheck = true;
|
||
this.setCoupon(true,exitIndex);
|
||
}
|
||
},
|
||
// 存储优惠券的值
|
||
setCoupon(flag,index){
|
||
if(this.dataList.length){
|
||
this.couponIndex = index;
|
||
this.dataList[index].ifcheck = flag;
|
||
this.couponPrice = flag?this.dataList[index].amount:0;//选中优惠券金额
|
||
this.couponId = flag?this.dataList[index].id:'';//选中优惠券id
|
||
this.couponCount = flag?1:0;//选中优惠券数量
|
||
}
|
||
},
|
||
// 选择优惠券
|
||
chooseCoupon(id,index){
|
||
if(this.currentPrice >= this.dataList[index].condition){
|
||
if(this.dataList[index].ifcheck){
|
||
this.setCoupon(false,index);
|
||
} else {
|
||
this.dataList.forEach(item=>{
|
||
item.ifcheck = false;
|
||
})
|
||
this.setCoupon(true,index);
|
||
}
|
||
} else {
|
||
this.$toolAll.tools.showToast('不满足使用条件');
|
||
}
|
||
},
|
||
// 获取待使用优惠券列表
|
||
getCoupon(){
|
||
this.dataList = [];
|
||
let params = {
|
||
status:'normal',
|
||
page:1,
|
||
size:100
|
||
}
|
||
this.$requst.get('/api/user/coupon-list',params).then(res=>{
|
||
if(res.code==0){
|
||
if(res.data.list.length){
|
||
res.data.list.forEach(item=>{
|
||
let obj = {
|
||
...item,
|
||
ifcheck:false
|
||
}
|
||
this.dataList.push(obj);
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.coupon-mo,.coupon-active{
|
||
border: 2rpx solid #c3c3c3;
|
||
width: 29rpx;
|
||
height: 29rpx;
|
||
border-radius: 100%;
|
||
}
|
||
.coupon-active{
|
||
border-color: #f37617;
|
||
background-color: #f37617;
|
||
}
|
||
</style> |