uniapp-shunfengche/my/youhui/index.vue

<template>
	<view>
		<view class="flex align-center justify-between  bg padding">
			<view v-for="(item,index) in list" :key="index" :class="tabIndex==item.id?'active':'act'"
				@click="change(item.id)">
				{{item.name}}
				<view class="ban" v-if="tabIndex==item.id"></view>
			</view>
		</view>
		<view class="empty" v-if="moneylist.length==0">
			<view
				style="display: block; width: 90%; margin: 0 auto; position: fixed;top: 35%;left: 0rpx;right: 0rpx;text-align: center;">
				<image v-if="globalImages" :src="globalImages + 'images/static/image/emety.png'" style="width: 300rpx;height: 300rpx;"></image>
				<view style="color: #CCCCCC;">暂无内容</view>
			</view>
		</view>
		<view class="popup_money" v-else>
			<view class="data_select">
				<view class="money_box" v-for="(item,index) in moneylist" :key="index">
					<view class="box_tit">
						<view style="width: 170rpx; height: 170rpx; border-radius: 15rpx; background: linear-gradient(to bottom right, #ff5900, #fd1818);margin-right: 30rpx;">
							<view class="money_price"><text>￥</text>{{item.money}}</view>
							<view style="color: #fff; font-size: 24rpx; text-align: center;">满￥{{item.minMoney}}可用</view>
						</view>
						<view style="padding: 40rpx 0;">
							<!-- 优惠券类型 0全部可用 1即时代驾 2朋友代叫 3预约代驾 -->
							<view class="money_name">{{item.couponName}}</view>
							<view style="margin-top: 15rpx; color: #999;" v-if="item.couponType==0">通用</view>
							<view style="margin-top: 15rpx; color: #999;" v-if="item.couponType==1">即时代驾</view>
							<view style="margin-top: 15rpx; color: #999;" v-if="item.couponType==2">朋友代叫</view>
							<view style="margin-top: 15rpx; color: #999;" v-if="item.couponType==3">预约代驾</view>
						</view>
					</view>
					<view class="money_line" style="margin-top: 20rpx;">
						<u-line direction="row" color="#E6E6E6" border-style="dashed" />
					</view>
					<view class="box_bottom">
						<!-- <view class="money_use">满{{item.minMoney}}元可使用</view> -->
						<view class="money_use" v-if="item.expirationTime">有效期至{{item.expirationTime}}</view>
						<view class="money_use" v-else>永久有效</view>
						<view class="money_btn">
							<view class="lj_use" @click="goIndex" v-if="item.status==0">
								立即使用
							</view>
							<view class="lj_use2" v-if="item.status==1">
								已使用
							</view>
							<view class="lj_use3" v-if="item.status==2">
								不可使用
							</view>
						</view>
					</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	import { waitForGlobalImages } from '@/utils/globalImageLoader'
	export default {
		data() {
			return {
				list: [{
					id: 3,
					name: '全部'
				}, {
					id: 0,
					name: '可使用'
				}, {
					id: 1,
					name: '已使用'
				}, {
					id: 2,
					name: '已失效'
				}],
				tabIndex: '3',
				page: 1,
				limit: 10,
				moneylist: [],
				globalImages: '',
			}
		},
		onLoad() {
			this.hongbao()
			waitForGlobalImages().then((path) => {
				console.log('✅ 全局图片路径:', path)
				this.globalImages = path
			  })
		},
		methods: {
			goIndex(){
				uni.switchTab({
					url:'/pages/index/index'
				})
			},
			change(index) {
				this.tabIndex = index
				this.page = 1
				this.hongbao()
			},
			//获取登录用户的所有红包
			hongbao() {
				let data = {
					page: this.page,
					limit: this.limit,
					status: this.tabIndex
				}
				this.$Request.getT('/app/couponUser/getMyCouponList', data).then(res => {
					console.log(res)
					if (res.code === 0) {
						if (this.page == 1) {
							this.moneylist = res.data.records
						}
						if (this.page > 1) {
							if (res.data.records.length > 0) {
								this.moneylist = this.moneylist.concat(res.data.records)

							}
						}
						// console.log(this.hongbao)
						this.totalPage = res.data
					}
				});

			}
		},
		onReachBottom: function() {
			if (this.page < this.totalPage) {
				this.page = this.page + 1;
				this.hongbao();
			}

		},
		onPullDownRefresh: function() {
			this.page = 1;
			this.hongbao();
		},
	}
</script>

<style lang="less">
	page {
		background-color: #F5F5F5;
	}

	.bg {
		background: #FFFFFF;
	}

	.act {
		color: #999999;
		font-size: 30upx;
	}

	.active {
		color: #fe6b01;
		// font-size: 38upx;
		// font-weight: bold;
		position: relative;

	}

	.ban {
		width: 50%;
		height: 5rpx;
		background: #fe6b01;
		opacity: 0.7;
		position: absolute;
		top: 55rpx;
		margin-left: 25%;
	}

	.empty {
		width: 100%;
		background: #ffffff;
		/* #ifdef MP-WEIXIN */
		height: 93vh;
		/* #endif */
		/* #ifndef MP-WEIXIN */
		height: 100vh;
		/* #endif */
	}

	.popup_money {
		height: 800upx;
		width: 100%;
		position: relative;
	}

	.u-drawer-bottom {
		background-color: #FAF7F5 !important;
	}

	.money_box {
		width: 93%;
		margin: 0 auto;
		background: #ffffff;
		border-radius: 14upx;
		height: 350rpx;
		margin-bottom: 20upx;
		margin-top: 20rpx;
		padding-top: 40rpx;
	}

	.box_tit {
		width: 90%;
		margin: 0 auto;
		height: 175upx;
		display: flex;
	}

	.money_name {
		flex: 1;
		display: flex;
		justify-content: left;
		align-items: center;
		font-size: 32rpx;
		letter-spacing: 2upx;
	}

	.money_price {
		width: 100%;
		height: 115rpx;
		text-align: center;
		font-size: 58upx;
		font-weight: bold;
		color: #fff;
		line-height: 115rpx;
	}

	.money_data {
		color: #999999;
		font-size: 24rpx;
		width: 90%;
		margin: 0 auto;
		margin-top: -8upx;
	}

	.u-line {
		width: 90% !important;
		border-bottom-width: 6upx !important;
		margin: 0 auto !important;
		margin-top: 22upx !important;
		margin-bottom: 22upx !important;
	}

	.box_bottom {
		width: 90%;
		margin: 0 auto;
		display: flex;
		height: 40upx;
	}

	.money_use {
		flex: 1;
		color: #999999;
		font-size: 24rpx;
		display: flex;
		justify-content: left;
		align-items: center;
	}

	.lj_use {
		width: 150rpx;
		border: 2rpx solid #fe6b01;
		color: #fff;
		text-align: center;
		line-height: 48rpx;
		border-radius: 40rpx;
		font-size: 23rpx;
		background: #fe6b01;
	}
	.lj_use2 {
		width: 150rpx;
		border: 2rpx solid #f5f5f5;
		color: #999;
		text-align: center;
		line-height: 48rpx;
		border-radius: 40rpx;
		font-size: 23rpx;
		background: #f5f5f5;
	}
	.lj_use3 {
		width: 150rpx;
		border: 2rpx solid #f56c6c;
		color: #fff;
		text-align: center;
		line-height: 48rpx;
		border-radius: 40rpx;
		font-size: 23rpx;
		background: #f56c6c;
	}
</style>