zh_order_food_xcx/pages-takeout/confirm-mod/coupon.vue

<template>
	<view>
		<uni-popup ref="popupCoupon" type="bottom">
			<view class="pop-coupon box-border-box p-24">
				<view class="text-align-center fs-36 fw-600 box-title mb-32">
					选择优惠券
					<uni-icons @click="closeCoupon" class="box-close" type="closeempty" size="20"></uni-icons>
				</view>
				
				<view class="flex-justify-around">
					<view @click="setType(1)" class="fs-28 fw-600 mb-24" :class="type == 1?'fc-41ABF5':''">可用优惠券({{expressCouponData.coupon.length}})</view>
					<view @click="setType(2)" class="fs-28 fw-600 mb-24" :class="type == 2?'fc-41ABF5':''">可领优惠券({{expressCouponData.receive.length}})</view>
				</view>
				
				
				<view class="scroll-view-css" v-if="type == 1">
					<view v-if="expressCouponData.coupon.length === 0" class="scroll-view-css">
						<EnBlank :customSrc='true'>
							<template v-slot:blankImg>
								<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
							</template>
						</EnBlank>
					</view>
					<scroll-view v-else :scroll-y="true" class="scroll-view-css">
						<view class="item-box display-flex mb-20" v-for="(item,i) in expressCouponData.coupon" :key="i" @click="setFun(item)">
							<view class="item-left flex-direction align-items-center flex-justify-center bgc-FCE7E2">
								<view class="align-items-center">
									<view class="fs-30 fw-600 fc-FB3D03">￥</view>
									<view class="fs-48 fw-600 fc-FB3D03">{{item.money}}</view>
								</view>
								<view class="fs-24" :class="item.type == 0?'fc-6':'fc-9'">
									{{item.desc}}
								</view>
								<view class="ball"></view>
								<view class="ball-two"></view>
							</view>
							<view class="item-hr"></view>
							<view class="item-right flex-1 bgc-f">
								<view class="fs-28 fw-600 mb-12 ticket-name text-overflow-ellipsis w382">
									{{item.name}}
								</view>
								<view class="fs-24 mb-12 fc-FB3D03">
									{{item.start_time}} - {{item.end_time}}
								</view>
							</view>
							
							<image v-if="coupon_id==item.id" class="s-icon" src="@/static/img/common/y-select.png" mode=""></image>
							<image v-else class="s-icon"src="@/static/img/common/n-select.png" mode=""></image>
						</view>
					</scroll-view>
				</view>
				
				<view class="scroll-view-css" v-else>
					<view v-if="expressCouponData.receive.length === 0" class="scroll-view-css">
						<EnBlank :customSrc='true'>
							<template v-slot:blankImg>
								<image class="black-custom-img" src="@/static/img/common/no-order.png" mode=""></image>
							</template>
						</EnBlank>
					</view>
					<view v-else class="scroll-view-css">
						<view class=" display-flex mb-20" v-for="(item,i) in expressCouponData.receive" :key="i">
							<view class="item-right flex-direction flex-justify-center flex-1 bgc-f">
								<view class="fs-28 mb-12 ticket-name text-overflow-ellipsis fc-3 fw-600">
									{{item.name}}
								</view>
								<view class="fs-24 fc-6 mb-12">
									有效时间：{{item.start_time}} - {{item.end_time}}
								</view>
								<view class="flex-justify-space">
									<view class="fs-24 fc-6">
										券类型：{{item.scene == 1?'外卖券':'代取券'}}
									</view>
								</view>
							</view>
							<view class="item-hr"></view>
							<view class="item-left flex-direction align-items-center flex-justify-center bgc-FCE7E2">
								<view class="align-items-center">
									<view class="fs-30 fw-600 fc-FB3D03">￥</view>
									<view class="fs-48 fw-600 fc-FB3D03">{{item.money}}</view>
								</view>
								<view class="fs-24 mb-18 fc-6">
									{{item.desc}}
								</view>
								<view class="but-box fs-28 fc-f" @click="getFun(item)">立即领取</view>
								<view class="ball"></view>
								<view class="ball-two"></view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	import {getExpressCoupon} from '@/api/express.js';
	import {receiveCoupon} from '@/api/coupon.js';
	import tools from "@/service/tools";
	
	export default {
		components:{EnBlank},
		data(){
			return{
				type:1,//1可用类型 2可领类型
				coupon_id:1,
				dataType:'',//1外卖 2代取 3干洗
				isAJAX:false,
				
				// 代取优惠券
				expressCouponData:{
					coupon:[],//可用
					receive:[],//可领
				},
			}
		},
		methods:{
			getList(e,id){
				if(id){
					this.coupon_id = id;
				}else{
					this.coupon_id = '';
				}
				this.dataType = Number(e)
				if(e == 1){
					
				}else if(e == 2){
					this.getExpressCoupon()
				}
			},
			
			// 代取 获取优惠券
			getExpressCoupon(){
				let operate_id = uni.getStorageSync('operate_id');
				getExpressCoupon({operate_id:operate_id}).then((res)=>{
					if(res.code === 1){
						this.expressCouponData = res.data;
						this.openPop();
					}
				})
			},
			
			
			setType(type){
				if(type != this.type){
					this.type = type
				}
			},
			openPop(){
				this.$refs.popupCoupon.open();
			},
			closeCoupon(){
				this.$refs.popupCoupon.close();
			},
			
			setFun(item){
				this.$emit('giveCouPon',item);
				this.closeCoupon();
			},
			
			getFun(item){
				if(this.isAJAX){
					return
				}
				this.isAJAX = true;
				receiveCoupon({grant_id:item.grant_id,coupon_id:item.coupon_id}).then((res)=>{
					if(res.code === 1){
						this.isAJAX = false;
						tools.success('领取成功');
						this.resetList();
					}else{
						this.isAJAX = false;
						tools.success('领取失败');
					}
				})
			},
			
			resetList(){
				if(this.dataType == 1){
					
				}else if(this.dataType == 2){
					this.getExpressCoupon()
				}
			},
		},
	}
</script>

<style scoped lang="scss">
	.w382{
		width: 382rpx;
	}
	.item-box{
		position: relative;
		.s-icon{
			width: 32rpx;
			height: 32rpx;
			position: absolute;
			top: 45%;
			right: 24rpx;
		}
	}
	
	
	.pop-coupon{
		width: 100%;
		height: 70vh;
		background-color: #F5F4F9;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		padding-top: 32rpx !important;
		display: flex;
		flex-direction: column;
		.box-title{
			position: relative;
			.box-close{
				position: absolute;
				right: 22rpx;
			}
		}
		.item-right {
			padding: 24rpx;
			box-sizing: border-box;
			border-radius: 20rpx 0 0 20rpx;
			position: relative;
		}
		.item-hr {
			width: 0px;
			height: auto;
			border-right: 1rpx dashed #FB7850;
		}
		
		.item-hr-two {
			width: 0px;
			height: auto;
			border-right: 1rpx dashed #999;
		}
		
		.item-left {
			width: 200rpx;
			height: auto;
			padding: 20rpx 24rpx;
			box-sizing: border-box;
			position: relative;
			border-radius: 0 20rpx 20rpx 0;
		}
		.but-box {
			width: 152rpx;
			height: 52rpx;
			line-height: 52rpx;
			text-align: center;
			background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
			border-radius: 200rpx;
		}
		.ball {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			position: absolute;
			top: -12rpx;
			left: -12rpx;
			background: #F5F5F5;
			z-index: 2;
		}
		
		.ball-two {
			width: 24rpx;
			height: 24rpx;
			border-radius: 50%;
			position: absolute;
			background: #F5F5F5;
			z-index: 10;
			bottom: -12rpx;
			left: -12rpx;
		}
	}
</style>