martial-arts/components/custom-coupon.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>