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.couponName}}</text>
								<text style="margin-top: 10rpx;">状态：{{item.getStatus}}</text>
								<text style="margin-top: 10rpx;">领取时间：{{item.getStatus}}</text>
								<text style="margin-top: 10rpx;">有效期：{{item.validEndTime}}</text>
								<view
									style="display: flex;justify-content: flex-start;flex-direction: row;width: 100%;margin-top: 10rpx;">
									<text class="code">券码：{{ item.redeemCodeStr}}</text>
								</view>
							</view>
							<view
								style="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="{color: item.status == 'WAIT_ACTIVATED' ? '#023F8F' : item.status == 'WAIT_USE' ? 'orange' : item.status == 'USED' ? 'green' : 'gray'}">{{item.status == 'WAIT_ACTIVATED' ? '待激活' : item.status == 'WAIT_USE' ? '待领取' : 
          item.status == 'USED' ? '已领取' : '已失效'}}</text>
								<button v-if="item.status != 'EXPIRED'"
									:style="{backgroundColor: item.status == 'WAIT_ACTIVATED' ? '#023F8F' : item.status == 'WAIT_USE' ? 'orange' : item.status == 'USED' ? 'green' : '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) => {
		//卡券渠道类型获取单项权益列表
		request("bbce0fdfba9b41dabfcb2f19f9a35c97", {
			type: 2,
			data: {
				mobile: getItem('mobile'),
				loginSource: '69af303ba2eb4608a099163f0d2a5dbd',
				singleEquityId: options.singleEquityId,
				couponAgencyType: options.couponAgencyType,
				couponId: options.couponId
			},
			method: "POST",
			showLoading: true,
		}).then((item) => {
			let res = JSON.parse(item.bizContent)
			console.log(res, '=========');
			let newCodes = res.data;
			if (newCodes) {
				newCodes.forEach(item => {
					item.getStatus = getStatusValue(item.status)
					item.redeemCodeStr = desensitize(item.redeemCode)
					item.validEndTime = item.validEndTime.replace(/T/g, " ");
				});
				exchangeCodes.value = exchangeCodes.value.concat(newCodes)
				page.value = page.value + 1
			}
		})
	})

	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: "自卡卷领取后，有效期截止一年后失效",
				success: function(res) {
					if (res.confirm) {
						request("a6bd3d8c855548eb8015655ea8d9287b", {
							type: 2,
							data: {
								mobile: "18385442054",
								notificationType: 'USE',
								cardIds: [item.id]
							},
							method: "POST",
							showLoading: true,
						}).then((item) => {
							uni.setClipboardData({
								data: code,
								success: function() {
									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>