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

<template>
	<view class="container" style="background-color:#E9EDF0;overflow: hidden;min-height: 100vh;">
		<view class="item" v-for="(item, index) in exchangeCodes" :key="index" @click.stop="click(item)">
			<view class="top">
				<view>
					<view style="display: flex;align-items: center;line-height: 58rpx;">
						<image class="car" :src="`${$imgUrl}myImage/etcOrder.png`" mode=""></image>
						<text class="car-num">{{item.orderNo}}</text>
					</view>
					<view class="youxiao">有效期：{{ item.validEndTime }}</view>
				</view>
				<view class="activate" :style="{'--bgimg':`url(${$imgUrl}equity-bg3.png)`}">{{functBackName(item.status) == 'WAIT_ACTIVATED' ? '已领取' : functBackName(item.status) == 'WAIT_GET' ? '待领取' : functBackName(item.status) ==  'EXPIRED' ? '已失效' : ''}}</view>
			</view>
			<view class="go">
					<view>
						<view class="title">权益名称：{{item.equityName}}</view>
						<view class="title"><text style="color: #01243A;">卡卷状态：{{functBackName(item.status) == 'WAIT_ACTIVATED' ? '已领取' : functBackName(item.status) == 'WAIT_GET' ? '待领取' : functBackName(item.status) ==  'EXPIRED' ? '已失效' : ''}}</text></view>
					</view>
					<view class="btn"  data-code="{{item}}"
					@click.stop="copyCode(item)">{{functBackName(item.status) == 'WAIT_ACTIVATED' ? '复制' : functBackName(item.status) == 'WAIT_GET' ? '立即领取' : 
												        functBackName(item.status) == 'EXPIRED' ? '已失效' : ''}}</view>
				</view>
			<!-- <view v-for="(list, index) in item.equityInfoItems">
				<view class="go" v-if="list.equityType == 'COUPONS'">
					<view>
						<view class="title">权益名称：{{list.equityName}}</view>
						<view class="title"><text style="color: #01243A;">卡卷状态：{{functBackName(list) == 'WAIT_ACTIVATED' ? '待激活' : functBackName(list) == 'WAIT_USE' ? '待领取' : functBackName(list) ==  'USED' ? '已领取' : '已失效'}}</text></view>
					</view>
					<view class="btn"  data-code="{{item}}"
					@click.stop="copyCode(list,functBackName(list),item)" v-if="functBackName(list) != 'EXPIRED' && list && list.equityType !='ZFB'">{{functBackName(list) == 'WAIT_ACTIVATED' ? '去激活' : functBackName(list) == 'WAIT_USE' ? '立即领取' : 
												        functBackName(list) == 'USED' ? '复制' : '已失效'}}</view>
				</view>
				<view class="go" v-if="list.equityType == 'ZFB'">
					<view>
						<view class="title">权益名称：{{list.productName}}</view>
						<view class="title">卡卷状态：正常</view>
					</view>
					<view class="btn" data-code="{{item}}" @click.stop="copyCode(list,'EXPIRED',null)">去使用</view>
				</view>
			</view> -->
			
			
		</view>
		
        <!-- <view class="item" v-for="(item, index) in alonePurchaseData" :key="index" @click.stop="click(item)">
			<view class="top">
				<view>
					<view style="display: flex;align-items: center;line-height: 58rpx;" v-if="item.vehiclePlate">
						<image class="car" :src="`${$imgUrl}equity-car.png`" mode=""></image>
						<text class="car-num">{{item.vehiclePlate}}</text>
					</view>
					<view class="youxiao">有效期：{{ item.periodOfValidity }}</view>
				</view>
				<view class="activate" :style="{'--bgimg':`url(${$imgUrl}equity-bg3.png)`}">{{item.getStatus}}</view>
			</view>
			<view class="go" v-if="item.equityType == 'COUPONS'">
				<view>
					<view class="title">权益名称：{{item.productName}}</view>
					<view class="title">卡券状态：<text style="color: #01243A;">{{functBackName(item) == 'WAIT_ACTIVATED' ? '待激活' : functBackName(item) == 'WAIT_USE' ? '待领取' : functBackName(item) ==  'USED' ? '已领取' : '已失效'}}</text></view>
				</view>
				<view class="btn"  data-code="{{item}}"
				@click.stop="copyCode(item,functBackName(item),item['couponInfoItem'])" v-if="functBackName(item) != 'EXPIRED' && item && item.equityType !='ZFB'">{{functBackName(item) == 'WAIT_ACTIVATED' ? '去激活' : functBackName(item) == 'WAIT_USE' ? '立即领取' : 
												        functBackName(item) == 'USED' ? '复制' : '已失效'}}</view>
			</view>
			<view class="go" v-if="item.equityType == 'ZFB'">
				<view>
					<view class="title">权益名称：{{item.productName}}</view>
					<view class="title">卡卷状态：正常</view>
				</view>
				<view class="btn"  data-code="{{item}}" @click.stop="copyCode(item,'EXPIRED',item['couponInfoItem'])">去使用</view>
			</view>
		</view> -->
		
	</view>
</template>
<script setup lang='ts'>
	import {
		ref
	} from 'vue';
	import {requestNew} from "@/utils/network/request.js";
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		getItem
	} from "@/utils/storage";

	let singleEquityId = ref('')
	let couponAgencyType = ref('')
	let purchasedEquityId = ref('')
	let couponId = ref('')
	let exchangeCodes: any = ref([])
	let alonePurchaseData: any = ref([])
	let page = ref('')
	import {couponActivate,couponQuery} from "@/utils/network/api.js";

	onLoad((options) => {
		couponId.value = options.couponId
		singleEquityId.value = options.singleEquityId
		couponAgencyType.value = options.couponAgencyType
		purchasedEquityId.value = options.purchasedEquityId
		loadExchangeCodes();
	})

	function loadExchangeCodes() {
		//卡券渠道类型获取单项权益列表
		requestNew(couponQuery, {
			type: 2,
			data: {
				// mobile: getItem('mobile') + "",
				loginSource: getItem("loginSource"),
				// singleEquityId: singleEquityId.value,
				equityId: singleEquityId.value,
				// couponAgencyType: couponAgencyType.value,
				// couponId: couponId.value,
				// purchasedEquityId:purchasedEquityId.value
			},
			method: "POST",
			showLoading: true,
		}).then((item) => {
			let res = item
			console.log("res===", res)
			let newCodes = res.result;
			// let alonePurchase = res.data.alonePurchase;
			if (newCodes) {
				exchangeCodes.value = newCodes
				// let newCodesNew = []
				// 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)
				// 	console.log("item.getStatus===",item.getStatus)
				// 	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]
				// 	console.log("item", item.equityInfoItems)
				// 	// 不展示付宝数据
				// 	for (var k = 0; k < item.equityInfoItems.length; k++) {
				// 		if (item.equityInfoItems[k]['equityType'] != "ZFB") {
				// 			console.log("alonePurchase1111", alonePurchase)
				// 			newCodesNew.push(item)
				// 		}
				// 	}

				// });
				// exchangeCodes.value = newCodesNew

				// 购买的权益产品展示
				// console.log("exchangeCodes.value", exchangeCodes.value);
			}
			// let newAlonePurchase = []
			// if (alonePurchase) {
			// 	console.log("alonePurchase", alonePurchase)
			// 	alonePurchase.forEach(item => {
			// 		console.log("index", item.equityType == "ZFB")
			// 		//1 不能领取  0 可以领取 1(不能领取原因 notUseCase)
			// 		// item.equityInfoItems[0].equityType
			// 		// WAIT_GET
			// 		item.status =item.isUse == 0 && item.couponStatus ==
			// 			'WAIT_GET' ? 'WAIT_USE' :
			// 			item.isUse == 1 && item.couponStatus ==
			// 			'WAIT_GET' ? 'WAIT_ACTIVATED' : item.couponStatus == 'USED' ?
			// 			'USED' : '';
			// 		//WAIT_ACTIVATED(待激活)  WAIT_USE(待领取使用)  USED(已使用)  EXPIRED(已过期)  OUINGSYNREE
			// 		console.log(item.periodOfValidity,
			// 			item.isUse, item.notUseCase,
			// 			item.status, item.couponStatus, '=================',
			// 			item.vehiclePlate);
			// 		item.getStatus = getStatusValue(item.status)
			// 		item.redeemCodeStr = item.couponInfoItem && desensitize(item
			// 			.couponInfoItem.redeemCode)
			// 		item.periodOfValidity = item.periodOfValidity ? item
			// 			.periodOfValidity.split('T')[0] : '激活领取后展示'
			// 		item.redeemCode = item.couponInfoItem && item
			// 			.couponInfoItem.redeemCode
			// 		item.drawTime = item.drawTime && item
			// 			.drawTime.split('T')[0]
			// 		// 不展示付宝数据
			// 		if (item.equityType != "ZFB") {
			// 			console.log("alonePurchase1111", alonePurchase)
			// 			newAlonePurchase.push(item)
			// 		}
			// 	});

			// 	alonePurchaseData.value = newAlonePurchase
			// }
		})
	}

	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,
		// 	})
		// }
        console.log("item",item)
		uni.navigateTo({
			url: '/subpackage/service/equityInfo/equityInfo?validEndTime=' + item.validEndTime +
				"&fee=" + item.fee+"&equityName=" + item.equityName,
		})
	}

	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' : '';
		return item
	}

	function copyCode(item) {
		// let item = e;
		// // 复制兑换码到剪贴板 
		// if (item.equityType == 'ZFB') {
		// 	uni.navigateTo({
		// 		url: `/subpackage/service/zfbqy/zfbqy`
		// 	})
		// 	return
		// }else{
		console.log("item1111",item)
			let code = item.redeemCode;
			// if (start == '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 (item.status == 'WAIT_GET') { //待领取使用
				uni.showModal({
					title: '温馨提示',
					content: "请在领取后120天内使用，超期失效",
					success: function(res) {
						if (res.confirm) {
							requestNew(couponActivate, {
								type: 2,
								data: {
									id:item.id,
									// mobile: getItem('mobile') + "",
									// notificationType: 'USE',
									// cardIds: [items.id],
									// couponId: couponId.value,
									// equityId: item.singleEquityId,
									// orderId: items.orderId ? items.orderId : items.purchasedEquityId
								},
								method: "POST",
								showLoading: true,
							}).then((item) => {
								uni.showToast({
									title: '领取成功',
									icon: 'success',
								});
								loadExchangeCodes();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// 已使用 USED  
				// 已过期 EXPIRED 
			} else if (item.status == 'WAIT_ACTIVATED') { //已领取
				console.log("已复制兑换码1111", code)
				uni.setClipboardData({
					data: code,
					success: function() {
						console.log("已复制兑换码")
						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>
 .item{
	 width: 95%;
	 background: #FFFFFF;
	 border-radius: 32rpx;
	 padding: 24rpx;
	 font-size: 26rpx;
	 box-sizing: border-box;
	 margin: 20rpx auto;
	 position: relative;
 }
 .btn{
	 padding: 16rpx 24rpx;
	 background-color:#01243A ;
	 border-radius: 32rpx;
	 color: white;
 }
 .activate{
	 color: white;
	 background-size: 100% 100%;
	 background-repeat: no-repeat;
	 width: 215rpx;
	 height: 123rpx;
	 text-align: center;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 background-image: var(--bgimg);
	 position: absolute;
	 right: -5px;
	 top: -5px;
 }
 .car{
	 width: 36rpx;
	 height: 36rpx;
 }
 .top{
	 border-bottom: 2rpx solid #E9EDF0;
 }
 .car-num{
	 font-weight: 400;
	 font-size: 30rpx;
	 color: #111111;
	 margin-left: 7rpx;
 }
 .youxiao{
	 font-weight: 400;
	 font-size: 26rpx;
	 color: #999999;
	 margin-left: 40rpx;
	 line-height: 58rpx;
 }
 .go{
	 display: flex;
	 justify-content: space-between;
	 align-items: center;
 }
 .go>view:first-child{
	 width: 70%;
	 margin-top: 10rpx;
	 .title{
		 margin-bottom: 10rpx;
		 color: #545454;
	 }
 }
</style>