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.stop="click(item)">
						<view style="display: flex;flex-direction: column;flex: 1;margin: 10px;">
							<view style="display: flex;flex-direction: column;">

								<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 v-for="(list, index) in item.equityInfoItems">
								<view v-if="list.equityType == 'COUPONS'">
									<div class="horizontal-line"></div>
									<view style="display: flex;flex-direction: column;">
										<text style="width: 100%;">权益名称：{{list.productName}}</text>
										<view
											style="display: flex;flex-direction: row;min-height: 60rpx;justify-content: space-between;text-align: baseline;">
											<text class="text-w" style="flex: 1;margin-top: 5rpx;"
												:style="functBackName(list) == 'WAIT_ACTIVATED' ? 'color: #023F8F;' : functBackName(list) == 'WAIT_USE' ? 'color: orange;' : functBackName(list) == 'USED' ? 'color: green;' : 'color: gray;'">卡卷状态：{{functBackName(list) == 'WAIT_ACTIVATED' ? '待激活' : functBackName(list) == 'WAIT_USE' ? '待领取' : functBackName(list) ==  'USED' ? '已领取' : '已失效'}}</text>
											<button v-if="functBackName(list) != 'EXPIRED' && list && list.equityType !='ZFB'"
												:style="functBackName(list) == 'WAIT_ACTIVATED' ? 'background-color: #023F8F;' : functBackName(list) == 'WAIT_USE' ? 'background-color: orange;' : functBackName(list) == 'USED' ? 'background-color: green;' : 'background-color: gray;'"
												class="copy-btn" data-code="{{item}}" @click.stop="copyCode(list)">
												{{functBackName(list) == 'WAIT_ACTIVATED' ? '去激活' : functBackName(list) == 'WAIT_USE' ? '立即领取' : 
												        functBackName(list) == 'USED' ? '复制' : '已失效'}}</button>
										</view>
									</view>
								</view>
								<view v-if="list.equityType == 'ZFB'">
									<div class="horizontal-line"></div>
									<view style="display: flex;flex-direction: column;">
										<text style="width: 100%;">权益名称：{{list.productName}}</text>
										<view
											style="display: flex;flex-direction: row;min-height: 60rpx;justify-content: space-between;text-align: baseline;">
											<text class="text-w" style="flex: 1;margin-top: 5rpx;color: #4caf50;">
												卡卷状态：正常
											</text>
											<button style="background-color: #4caf50;" class="copy-btn"
												data-code="{{item}}" @click.stop="copyCode(list)">
												去使用
											</button>
										</view>
									</view>
								</view>
							</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: getItem("loginSource"),
				singleEquityId: singleEquityId.value,
				equityId: singleEquityId.value,
				couponAgencyType: couponAgencyType.value,
				couponId: couponId.value
			},
			method: "POST",
			showLoading: true,
		}).then((item) => {
			let res = JSON.parse(item.bizContent)
			let newCodes = res.data.orderItems;
			if (newCodes) {
				console.log(res, '111=========', newCodes);
				newCodes.forEach(item => {
					//1 不能领取  0 可以领取 1(不能领取原因 notUseCase)
					// item.equityInfoItems[0].equityType
					// 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);
					// functBackName(list) = item.equityInfoItems[0].couponStatus == 'WAIT_GET' ? 'WAIT_ACTIVATED' : item.equityInfoItems[0].couponStatus
					item.getStatus = getStatusValue(item.status)
					item.redeemCodeStr = item.equityInfoItems[0].couponInfoItem && 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
				console.log("exchangeCodes.value", exchangeCodes.value);
			}
		})
	}

	function click(item) {
		// console.log("item.equityInfoItems[0].equityType", item.equityInfoItems[0].equityType)
		// if (item.equityInfoItems[0].equityType == 'ZFB') {
		// 	console.log("1")
		// 	uni.navigateTo({
		// 		url: `/subpackage/service/zfbqy/zfbqy`
		// 	})
		// } else {
		// 	console.log("2")
		// 	uni.navigateTo({
		// 		url: '/subpackage/service/equityInfo/equityInfo?singleEquityId=' + singleEquityId.value +
		// 			"&couponAgencyType=" + couponAgencyType.value + "&couponId=" + couponId.value,
		// 	})
		// } 

		uni.navigateTo({
			url: '/subpackage/service/equityInfo/equityInfo?singleEquityId=' + singleEquityId.value +
				"&couponAgencyType=" + couponAgencyType.value + "&couponId=" + couponId.value,
		})
	}

	function functBackName(item) {
		return item.isUse == '0' && item.couponStatus == 'WAIT_GET' ? 'WAIT_USE' :
			item.isUse == '1' && item.couponStatus == 'WAIT_GET' ? 'WAIT_ACTIVATED' : item.couponStatus == 'USED' ?
			'USED' : '';
	}

	function copyCode(e) {
		let item = e;
		// // 复制兑换码到剪贴板 
		let code = e.redeemCode;
		console.log("===e===", e.equityType);
		if (item.equityType == 'ZFB') {
			uni.navigateTo({
				url: `/subpackage/service/zfbqy/zfbqy`
			})
			return
		}

		if (e.status == 'WAIT_ACTIVATED') { //待激活
			uni.showModal({
				title: '温馨提示',
				content: "激活后，可领取卡卷",
				confirmText: "去激活",
				success: function(res) {
					if (res.confirm) {
						uni.navigateTo({
							url: '/subpackage/personal-center/install-activation-order',
						})
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		} else if (e.status == 'WAIT_USE') { //待领取使用
			uni.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 (e.status == 'USED') { //已使用
			uni.setClipboardData({
				data: code,
				success: function() {
					uni.showToast({
						title: '已复制兑换码',
						icon: 'success',
					});
				},
			});
		} else if (e.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>
	.container {
		width: 100%;
		height: 96vh;
	}

	.item {
		display: flex;
		margin-top: 10px;
		width: 100%;
		align-items: center;
		justify-content: space-around;
		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;
		border-radius: 10rpx;
		font-size: 24rpx;
		height: 60rpx;
		box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.2);
		text-align: center;
		display: inline-block;
		line-height: 60rpx;
	}

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


	.text-w {
		font-weight: bold;
	}

	.horizontal-line {
		width: 100%;
		/* 设置横线的宽度 */
		height: 1px;
		/* 设置横线的高度 */
		background-color: #9ACDFA;
		/* 设置横线的颜色 */
		margin: 10px 0;
		/* 可以根据需要调整横线与周围内容的间距 */
	}
</style>