GuangYuYuan-shanghu/src/pages/my/coupon.vue

<template>
	<view class="coupon-page">
		<view class="list-container">
			<view v-for="(item, index) in couponList" :key="index"
				:class="['coupon-box']">
				<view class="coupon-card">
					<view v-if="query.title == 'select'" :class="{ 'radio-selected': item.selected, 'radio-select': !item.selected }" @click="handleSelect(item, index)">
						<image v-show="item.selected" src="../../static/other/selected.png"></image>
					</view>
					<view class="left-content">
						<view class="coupon-title">
							<view>{{ item.couponName }}</view>
							<!-- <view v-if="item.discountType == 3">满{{ item.thresholdAmount }}减{{ item.discountValue }}</view>
							<view v-else>满{{ item.thresholdAmount }}可用</view> -->
						</view>
						<view class="coupon-time">
							<view v-if="item.validityType == 2">领券{{item.validDays }}天后失效</view>
							<view v-else-if="item.validityType == 3">长期有效</view>
							<view v-else>有效期至{{ item.expirationTimeString }}</view>
						</view>
						<view class="coupon-msg">
							<view v-if="item.couponType== '1'">满减券*1</view>
							<view v-if="item.couponType== '2'">折扣券*1</view>
							<view v-if="item.couponType== '3'">兑换券*1</view>
							<view class="icon-circle" @click="item.showMsg = !item.showMsg">
								详细信息
								<view :class="{ 'circle': item.showMsg, 'default': !item.showMsg }"></view>
							</view>
						</view>
					</view>

					<view class="right-action">
						<view class="amount-box" v-if="item.couponType == '1'">
							<text class="unit">¥</text>
							<text class="val">{{ item.discountValue }}</text>
						</view>
						<view class="amount-box" v-else-if="item.couponType == '2'">
							<text class="val">{{ item.ruleDiscountRate }}</text>
							<text class="unit">折</text>
						</view>
						<view class="amount-box" v-else>
							<text class="val">兑换</text>
						</view>

						<view class="action-btn active" @click.stop="goIdentify(item)">去使用</view>
					</view>
				</view>
				<view class="coupon-message" v-show="item.showMsg">
					<view class="message-item">
						<view>券类型：{{ item.couponType== '1'?'兑换券':item.couponType== '2'?'折扣券':item.couponType== '3'?'满减券':'' }}</view>
						<view v-if="item.locality">限定地区：仅{{ item.locality }}地区使用</view>
						<view v-if="item.relatedName">限定项目：{{ item.relatedName }}</view>
						<view>限定手机：仅限登录手机号为{{ getPhone() }}使用</view>
					</view>
				</view>
			</view>

			<u-empty v-if="couponList.length === 0" mode="coupon" marginTop="100"></u-empty>
		</view>
		<view v-if="couponList.length != 0" class="usedRecord" @click="toRecord">使用记录<u-icon name="arrow-right" size="28rpx" top="1" color="#333"></u-icon></view>
	</view>
</template>

<script>
	import {
		getCoupon
	} from '@/api/index';
	export default {
		data() {
			return {
				query: {},
				couponList: [],
			}
		},
		onLoad(query) {
			this.query = query;
			getApp().globalData.couponSelected = {}
		},
		onShow() {
			this.getData();
		},
		methods: {
			getPhone() {
				const phone = uni.getStorageSync('phone')
				const phoneStr = `${phone.slice(0,3)}****${phone.slice(7,11)}`
				return phoneStr
			},
			getData() {
				let params = {
					receiveOpenId: uni.getStorageSync('wx_copenid')
				}
				getCoupon(params).then(res => {
					if (res.data.code == 200) {
						if(res.data.data && res.data.data.length > 0) {
							this.couponList = res.data.data.map(item => {
								return {
									...item,
									selected: false,
									showMsg: false
								}
							})
						}
					}
				});
			},
			goIdentify(item) {
				if (this.query.title == 'select') {
                    uni.setStorageSync('couponData', item);
					uni.navigateBack();
					// uni.navigateTo({
					// 	url: `/pages/identify/pay_order?couponId=${item.id}&couponMoney=${item.discountValue}`
					// })
					// uni.$emit('returnData', item)
				} else {
					uni.switchTab({
						url: '/pages/identify/identify'
					})
				}
			},
			handleSelect(item, index) {
				this.couponList[index].selected = !this.couponList[index].selected
				this.couponList.map((sub, ind) => {
					if(sub.id != item.id) {
						sub.selected = false
					}
				})
				const selectObj = this.couponList.filter(a => a.selected)
				if(selectObj) {
					uni.navigateBack(-1)
					getApp().globalData.couponSelected = selectObj
				}
			},
			toRecord() {
				uni.navigateTo({
					url: '/pages/my/record',
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.coupon-page {
	min-height: 100vh;
	background: linear-gradient(to bottom, #d7f3f9, #f3f3f3);

	.list-container {
		padding: 20rpx 24rpx;
		height: calc(100vh - 4vh);
		.coupon-box{
			margin-bottom: 24rpx;
			position: relative;
			border-radius: 16rpx;
			background-color: #fff;
		}
		.coupon-card {
			display: flex;
			align-items: center;
			flex-wrap: wrap;
			overflow: hidden;
			transition: opacity 0.3s;
			.radio-select{
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				margin-left: 20rpx;
				border: 2rpx solid #869198;
			}
			.radio-selected{
				width: 36rpx;
				height: 36rpx;
				border-radius: 50%;
				margin-left: 20rpx;
				image{
					display: block;
					width: 36rpx;
					height: 36rpx;
					border-radius: 50%;
				}
			}
			.left-content {
				flex: 1;
				padding: 30rpx;
				border-right: 2rpx dashed #eee;

				.coupon-title {
					font-size: 30rpx;
					font-weight: bold;
					color: #333;
					margin-bottom: 10rpx;
				}

				.coupon-time {
					font-size: 22rpx;
					color: #999;
					margin-bottom: 20rpx;
				}
				.coupon-msg{
					color: #333;
					display: flex;
					align-items: center;
					justify-content: space-between;
					font-size: 24rpx;
					.icon-circle{
						color: #999;
						display: flex;
						align-items: center;
						justify-content: space-between;
						.circle{
							width: 0;
							height: 0;
							border-left: 10rpx solid transparent;
							border-right: 10rpx solid transparent;
							border-bottom: 16rpx solid #999;
							transform: rotate(180deg);
						}
						.default{
							width: 0;
							height: 0;
							border-left: 10rpx solid transparent;
							border-right: 10rpx solid transparent;
							border-bottom: 16rpx solid #999;
						}
					}
				}
			}

			.right-action {
				width: 220rpx;
				padding: 28rpx;
				display: flex;
				align-items: center;
				flex-direction: column;
				justify-content: center;
				background-color: #E8FBFA;
				border-radius: 0 16rpx 16rpx 0;
				.amount-box {
					color: #03C8BE;
					margin-bottom: 16rpx;

					.unit {
						font-size: 24rpx;
						margin-right: 4rpx;
					}

					.val {
						font-size: 50rpx;
						font-weight: bold;
					}
				}

				.action-btn {
					width: 140rpx;
					height: 54rpx;
					border-radius: 40rpx;
					font-size: 24rpx;
					display: flex;
					align-items: center;
					justify-content: center;

					&.active {
						background-color: #03C8BE;
						color: #fff;
					}

					&.disabled {
						background-color: transparent;
						border: 2rpx solid #03C8BE;
						color: #03C8BE;
					}
				}
			}
		}
		.coupon-message{
			border-top: 1rpx solid #EEEEEE;
			padding: 30rpx;
			color: #999;
			font-size: 24rpx;
		}
	}
	.usedRecord{
		height: 4vh;
		text-align: center;
		color: #333;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
}
</style>