zhywpt-sp/subpackage/service/equity/equity.vue

<template>
	<view class="container" style="background-color: #F4F6FA;">

		<image style="width: 100%;" mode="widthFix"
			src="https://qtzl.etcjz.cn/default-bucket/20240322/7380a0422a1e49fdb2fefc9d_beijing.png"></image>

		<view style="position: absolute;width: 100%;top: 30%;">
			<view class="top" style="display: flex;flex-direction: column; justify-content: center;padding: 20px 40px;">

				<view style="margin-bottom: 20px;font-size: 38rpx; text-align: center;font-family: Microsoft Yahei;">
					我的权益</view>
				<!-- <view v-if="exchangeCodes.length > 0" style="text-align: center;">暂无权益内容</view> @scrolltolower="loadMore" -->
				<scroll-view scroll-y="true">
					<view v-for="(item, index) in exchangeCodes" :key="index" class="item" @click="click">
						<view style="display: flex;flex-direction: row;flex: 1;">
							<view style="display: flex;flex-direction: column;margin: 10px;">
								<text>权益名称：{{item.equityInfoItems[0].productName}}</text>
								<text style="margin-top: 10rpx;">车牌号：{{item.vehiclePlate}}</text>
								<text v-if="{{item.drawTime}}" style="margin-top: 10rpx;">领取时间：{{item.drawTime}}</text>
								<text style="margin-top: 10rpx;">领取时间：{{item.getStatus}}</text>
								<text style="margin-top: 10rpx;">有效期：{{ item.periodOfValidity }}</text>
								<view
									style="display: flex;justify-content: flex-start;flex-direction: row;width: 100%;margin-top: 10rpx;">
									<text v-if="{{item.redeemCodeStr}}" class="code">券码：{{ item.redeemCodeStr}}</text>
								</view>
							</view>
							<view
								style="margin: 10px;border-radius: 0 8px 8px 0 ;justify-content: center;text-align: center; display: flex;flex-direction: column;background: white;flex: 1;">
								<text class="text-w"
									style="{{ item.status == 'WAIT_ACTIVATED' ? 'color: #023F8F;' : item.status == 'WAIT_USE' ? 'color: orange;' : item.status == 'USED' ? 'color: green;' : 'color: gray;'}}">{{item.status == 'WAIT_ACTIVATED' ? '待激活' : item.status == 'WAIT_USE' ? '待领取' : 
							          item.status == 'USED' ? '已领取' : '已失效'}}</text>
								<button wx:if="{{item.status != 'EXPIRED'}}"
									style="{{ item.status == 'WAIT_ACTIVATED' ? 'background-color: #023F8F;' : item.status == 'WAIT_USE' ? 'background-color: orange;' : item.status == 'USED' ? 'background-color: green;' : 'background-color: gray;'}}"
									class="copy-btn" data-code="{{item}}" @click="copyCode">
									{{item.status == 'WAIT_ACTIVATED' ? '去激活' : item.status == 'WAIT_USE' ? '立即领取' : 
							          item.status == 'USED' ? '复制' : ''}}</button>
							</view>
						</view>
					</view>
				</scroll-view>

			</view>
		</view>

		<!-- <view style="width: 100%; text-align: center;margin-top: 20rpx; ">暂无更多数据内容!</view> -->
	</view>
</template>
<script setup lang='ts'>
	import {
		ref
	} from 'vue';
	import {
		request
	} from "@/utils/network/request.js";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getItem
	} from "@/utils/storage";

	let singleEquityId = ref('')
	let couponAgencyType = ref('')
	let couponId = ref('')
	let exchangeCodes: any = ref([])
	let page = ref('')

	onLoad((options) => {
		couponId.value = options.couponId
		singleEquityId.value = options.singleEquityId
		couponAgencyType.value = options.couponAgencyType
		loadExchangeCodes();
	})
	
	function loadExchangeCodes(){
		//卡券渠道类型获取单项权益列表
		request("bbce0fdfba9b41dabfcb2f19f9a35c97", {
			type: 2,
			data: {
				mobile: getItem('mobile'),
				loginSource: '69af303ba2eb4608a099163f0d2a5dbd',
				singleEquityId:singleEquityId.value,
				couponAgencyType: couponAgencyType.value,
				couponId: couponId.value
			},
			method: "POST",
			showLoading: true,
		}).then((item) => {
			let res = JSON.parse(item.bizContent)
			console.log(res, '=========');
			let newCodes = res.data;
			if (newCodes) {
				newCodes.forEach(item => {
					//1 不能领取  0 可以领取 1(不能领取原因 notUseCase)
					// WAIT_GET
					item.status = item.equityInfoItems[0].isUse == '0' && item.equityInfoItems[0]
						.couponStatus == 'WAIT_GET' ? 'WAIT_USE' :
						item.equityInfoItems[0].isUse == '1' && item.equityInfoItems[0]
						.couponStatus == 'WAIT_GET' ? 'WAIT_ACTIVATED' : item.equityInfoItems[0]
						.couponStatus == 'USED' ? 'USED' : '';
					//WAIT_ACTIVATED(待激活)  WAIT_USE(待领取使用)  USED(已使用)  EXPIRED(已过期)  OUINGSYNREE
					console.log(item.equityInfoItems[0].periodOfValidity,
						item.equityInfoItems[0].isUse, item.equityInfoItems[0].notUseCase,
						item.status, item.equityInfoItems[0].couponStatus, '=================',
						item.vehiclePlate);
					// item.status = item.equityInfoItems[0].couponStatus == 'WAIT_GET' ? 'WAIT_ACTIVATED' : item.equityInfoItems[0].couponStatus
					item.getStatus = that.getStatusValue(item.status)
					item.redeemCodeStr = item.equityInfoItems[0].couponInfoItem && that
						.desensitize(item.equityInfoItems[0].couponInfoItem.redeemCode)
					item.periodOfValidity = item.equityInfoItems[0].periodOfValidity ? item
						.equityInfoItems[0].periodOfValidity.split('T')[0] : '激活领取后展示'
					item.redeemCode = item.equityInfoItems[0].couponInfoItem && item
						.equityInfoItems[0].couponInfoItem.redeemCode
					item.drawTime = item.equityInfoItems[0].drawTime && item.equityInfoItems[0]
						.drawTime.split('T')[0]
					// item.periodOfValidity = item.equityInfoItems[0].periodOfValidity.replace(/T/g, " ");
					// item.periodOfValidity = item.equityInfoItems[0].periodOfValidity.split('T')[0]
				});
				exchangeCodes.value = newCodes
			}
		})
	}

	function click() {
		let that = this
		wx.navigateTo({
			url: '/subpackage/service/equityInfo/equityInfo?singleEquityId=' + that.data.singleEquityId +
				"&couponAgencyType=" + that.data.couponAgencyType + "&couponId=" + that.data.couponId,
		})
	}

	function copyCode(e) {
		console.log(e.currentTarget);
		let item = e.currentTarget.dataset.code;
		// 复制兑换码到剪贴板 
		let code = e.currentTarget.dataset.code.redeemCode;
		if (item.status == 'WAIT_ACTIVATED') { //待激活
			wx.showModal({
				title: '温馨提示',
				content: "激活后，可领取卡卷",
				confirmText: "去激活",
				success: function(res) {
					if (res.confirm) {
						wx.navigateTo({
							url: '/pages/etc/explain/index',
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		} else if (item.status == 'WAIT_USE') { //待领取使用
			wx.showModal({
				title: '温馨提示',
				content: "请在领取后120天内使用，超期失效",
				success: function(res) {
					if (res.confirm) {
						request("a6bd3d8c855548eb8015655ea8d9287b", {
							type: 2,
							data: {
								mobile: getItem('mobile') + "",
								notificationType: 'USE',
								cardIds: [item.id],
								couponId: couponId.value,
								equityId: item.equityId,
								orderId: item.orderId
							},
							method: "POST",
							showLoading: true,
						}).then((item) => {
							// uni.setClipboardData({
							// 	data: code,
							// 	success: function() {
							// 		uni.showToast({
							// 			title: '已复制兑换码',
							// 			icon: 'success',
							// 		});
							// 	},
							// });
							loadExchangeCodes();
							uni.showToast({
								title: '领取成功',
								icon: 'success',
							});
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
			// 已使用 USED  
			// 已过期 EXPIRED 
		} else if (item.status == 'USED') { //已使用
			uni.setClipboardData({
				data: code,
				success: function() {
					uni.showToast({
						title: '已复制兑换码',
						icon: 'success',
					});
				},
			});
		} else if (item.status == 'EXPIRED') { //已过期

		}
	}

	function desensitize(str) {
		if (typeof str !== 'string') return str;
		if (str.length <= 6) return str;
		return '*'.repeat(str.length - 4) + str.slice(-4);
	}

	function getStatusValue(key) {
		const statusMap = {
			WAIT_GET: "待领取",
			WAIT_ACTIVATED: "待激活",
			WAIT_USE: "待使用",
			USED: "已使用",
			EXPIRED: "已过期"
		};
		// 定义状态对象
		return statusMap[key] || "状态未知";
	}
</script>
<style lang='scss' scoped>
	/* index.wxss */
	.container {
		width: 100%;
		height: 96vh;
	}

	.item {
		display: flex;
		margin-top: 10px;
		width: 100%;
		align-items: center;
		justify-content: space-around;
		/* background-color: rgba(204, 204, 204, 0.2); 淡灰色，透明度为 50% */
		background-color: white;
		/* 淡灰色，透明度为 50% */
		border-bottom: 1rpx solid #e0e0e0;
		border-radius: 8px;
		font-size: 14px;
	}

	.code {
		flex: 1;
		height: 100%;
		color: #333;
	}

	.copy-btn {
		background-color: #4caf50;
		color: #fff;
		border: none;
		min-width: 120rpx;
		margin-top: 20px;
		border-radius: 10rpx;
		font-size: 24rpx;
		/* 调整字体大小 */
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
	}

	.copy-btn:hover {
		background-color: #388e3c;
	}


	.text-w {
		font-weight: bold;
	}
</style>