zh_order_food_xcx/pages-my/my-ticket.vue

<template>
	<view class="my-ticket flex-common-css iPhone-bottom">
		<Nav title="我的优惠券" titleColor="#333" bgckgroundBox='#fff'></Nav>
		<view class="tab-box flex-justify-around bgc-f ">
			<view class="tab-but flex-1 flex-direction align-items-center" 
				v-for="(item, index) in tabList" :key="index" @click="tabStitle(item.status)">
				<view class="fs-32 mb-18" :class="status==item.status?'fc-41ABF5':'fc-3'">
					{{item.name}}
				</view>
				<view v-show="status==item.status" class="tab-hr bgc-41ABF5"></view>
			</view>
		</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="list-box">
				<view class="item-box display-flex mb-20" v-for="(item,index) in itemData" :key="index">
					<view class="item-left flex-direction align-items-center flex-justify-center"
						:class="status == 1?'bgc-FCE7E2':'bgc-E6E6E6'">
						<view class="align-items-center">
							<view class="fs-30 fw-600" :class="status == 1?'fc-FB3D03':'fc-9'">￥</view>
							<view class="fs-48 fw-600" :class="status == 1?'fc-FB3D03':'fc-9'">{{item.money}}</view>
						</view>
						<view class="fs-24" :class="status == 1?'fc-6':'fc-9'">{{item.desc}}</view>
						<view class="ball"></view>
						<view class="ball-two"></view>
					</view>
					<view class="item-hr" :class="status == 1?'':'item-hr-two'"></view>
					<view class="item-right flex-1 bgc-f">
						<view class="fs-28 mb-12 ticket-name text-overflow-ellipsis"
							:class="status == 1?'fc-3':'fc-9'">
							{{item.name}}
						</view>
						<view class="fs-24 mb-12" :class="status == 1?'fc-FB3D03':'fc-9'">
							{{item.time_str}}
						</view>
						<view class="flex-justify-space">
							<view class="fs-24" :class="status == 1?'fc-3':'fc-9'">
								券类型：{{item.scene == 1?'外卖券':'代取券'}}
							</view>
							<view class="align-items-center" @click="goToUrl(1,item)">
								<view class="fs-24 fc-9">规则</view>
								<image class="toRight" src="@/static/img/toRight.png" mode=""></image>
							</view>
						</view>
						<view class="item-but fc-FB3D03" v-if="status == 1" @click="goToUrl(0,item)">去使用</view>
						<image class="item-img" src="@/static/img/my/ysy.png" mode="" v-else-if="status == 2"></image>
						<image class="item-img" src="@/static/img/my/ysx.png" mode="" v-else></image>
					</view>
				</view>
			</view>
		</scroll-view>
		<view class="bot-but flex-justify-center align-items-center bgc-f" @click="goToUrl(2)">
			<view class="fc-41ABF5 fs-32 fw-600 mr-8">去领券中心</view>
			<image class="toRight" src="@/static/img/my/to-right.png" mode=""></image>
		</view>
	</view>
</template>

<script>
	import {couponMember} 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 {
				tabList: [{name:'待使用',status:1}, {name:'已使用',status:2},{name:'已过期',status:3},],
				status: 1,
				page:1,
				itemData: [],
				total:0,
			};
		},
		onShow() {
			this.page = 1;
			this.itemData = [];
			this.getList();
		},
		methods: {
			getList(){
				couponMember({page:this.page,status:this.status}).then((res)=>{
					if(res.code === 1){
						this.itemData = [...this.itemData,...res.data.items];
						this.total = res.data.total;
					}
				})
			},
			tabStitle(status) {
				if(this.status != status){
					this.status = status
					this.page = 1;
					this.itemData = [];
					this.getList();
				}
				
			},
			scrolltolower() {
				if(this.itemData.length < this.total){
					this.page += 1;
					this.getList();
				}
			},
			goToUrl(type,item) {
				if(type == 0) {
					// 去使用
					if(item.scene == 1){
						// 去外卖
					}else{
						uni.navigateTo({
							url:'/pages-takeout/replace-take'
						})
					}
				}else if(type == 1) {
					// 规则
					uni.navigateTo({
						url:'/pages-my/rule-info?id=' + item.id
					})
				}else {
					// 领券中心
					uni.navigateTo({
						url:'/pages-my/ticket-centre'
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.tab-box {
		padding: 22rpx 0 4rpx 0;
	}

	.tab-hr {
		width: 40rpx;
		height: 4rpx;
		border-radius: 2rpx;
	}

	.list-box {
		padding: 24rpx 20rpx 4rpx;
		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: 34rpx 36rpx 44rpx;
		box-sizing: border-box;
		position: relative;
		border-radius: 20rpx 0 0 20rpx;
	}

	.ball {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		position: absolute;
		top: -12rpx;
		right: -12rpx;
		background: #F5F5F5;
		z-index: 10;
	}

	.ball-two {
		width: 24rpx;
		height: 24rpx;
		border-radius: 50%;
		position: absolute;
		background: #F5F5F5;
		z-index: 10;
		bottom: -12rpx;
		right: -12rpx;
	}

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

	.ticket-name {
		max-width: 280rpx;
	}

	.toRight {
		width: 32rpx;
		height: 32rpx;
	}

	.item-but {
		width: 124rpx;
		height: 52rpx;
		text-align: center;
		line-height: 52rpx;
		border: 1rpx solid #FB3D03;
		border-radius: 200rpx;
		position: absolute;
		bottom: 55%;
		right: 24rpx;
	}

	.item-img {
		width: 88rpx;
		height: 88rpx;
		position: absolute;
		bottom: 40%;
		right: 24rpx;
	}

	.bot-but {
		padding: 22rpx 0;
	}
</style>