zh_order_food_xcx/pages-my/ticket-centre.vue

<template>
	<view class="flex-common-css">
		<Nav title=" " titleColor="" bgckgroundBox='transparent' leftColor='#fff'></Nav>
		<image class="lqzx-bg" src="@/static/img/my/lqzx-bg.png" mode=""></image>
		<image @click="goToUrl" class="wdyhq" src="@/static/img/my/wdyhq.png" mode=""></image>
		<view class="lqzx-blank"></view>
		
		<view v-if="itemData.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" @scrolltolower="scrolltolower">
			<view class="liat-box ">
				<view class="item-box display-flex mb-20" v-for="(item,index) in itemData" :key="index">
					<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">
							有效时间：{{item.start_time}} - {{item.end_time}}
						</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="receive(item)">立即领取</view>
						<view class="ball"></view>
						<view class="ball-two"></view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {couponGrant,receiveCoupon} from '@/api/coupon.js';
	import tools from "@/service/tools";
	import EnBlank from "@/components/en-utils/en-blank/en-blank";
	export default {
		components: {EnBlank},
		data() {
			return {
				itemData: [],
				isAJAX:false,
			};
		},
		onShow(){
			this.getList();
		},
		methods: {
			getList(){
				let operate_id = uni.getStorageSync('operate_id');
				couponGrant({operate_id:operate_id}).then((res)=>{
					if(res.code === 1){
						this.itemData = res.data;
					}
				})
			},
			
			goToUrl() {
				uni.navigateTo({
					url:'/pages-my/my-ticket'
				})
			},
			scrolltolower() {},
			receive(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.getList();
					}else{
						this.isAJAX = false;
						tools.success('领取失败');
					}
				})
			}
		},
	}
</script>

<style lang="scss" scoped>
	.lqzx-bg {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 489rpx;
	}

	.lqzx-blank {
		width: 100%;
		height: 272rpx;
	}

	.wdyhq {
		position: fixed;
		top: 204rpx;
		right: 0;
		width: 52rpx;
		height: 152rpx;
	}

	.liat-box {
		border-radius: 50rpx 50rpx 0 0;
		background: linear-gradient(180deg, #FBE9E4 0%, #F5F4F9 10%, #F5F4F9 100%);
		border-image: linear-gradient(180deg, rgba(255, 255, 255, 0.78), rgba(255, 255, 255, 0)) 2 2;
		padding: 24rpx;
		box-sizing: border-box;
	}

	.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;
	}

	.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;
	}

	.item-right {
		padding: 24rpx;
		box-sizing: border-box;
		border-radius: 20rpx 0 0 20rpx;
		position: relative;
	}

	.but-box {
		width: 152rpx;
		height: 52rpx;
		line-height: 52rpx;
		text-align: center;
		background: linear-gradient(225deg, #FB3D03 0%, #FF6901 100%);
		border-radius: 200rpx;
	}
</style>