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;" 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 v-for="(list, index) in item.equityInfoItems">
				<view class="go" v-if="item.equityType == 'COUPONS'">
					<view>
						<view class="title">权益名称：{{list.productName}}</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.data.orderItems;
			let alonePurchase = res.data.alonePurchase;
			if (newCodes) {
				console.log(res, '111=========', 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)
					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?singleEquityId=' + item.singleEquityId +
				"&couponAgencyType=" + couponAgencyType.value + "&couponId=" + item.couponId,
		})
	}

	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, start, items) {
		console.log("e====",e,start,items)
		let item = e;
		// // 复制兑换码到剪贴板 
		if (item.equityType == 'ZFB') {
			uni.navigateTo({
				url: `/subpackage/service/zfbqy/zfbqy`
			})
			return
		}else{
			let code = e.redeemCode ? e.redeemCode : items.redeemCode;
			console.log(item, "===e===", e.equityType, items, start);
			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 (start == 'WAIT_USE') { //待领取使用
				uni.showModal({
					title: '温馨提示',
					content: "请在领取后120天内使用，超期失效",
					success: function(res) {
						if (res.confirm) {
							requestNew(couponActivate, {
								type: 2,
								data: {
									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.setClipboardData({
								// 	data: code,
								// 	success: function() {
								// 		uni.showToast({
								// 			title: '已复制兑换码',
								// 			icon: 'success',
								// 		});
								// 	},
								// });
								loadExchangeCodes();
								uni.showToast({
									title: '领取成功',
									icon: 'success',
								});
								// uni.navigateBack();
							})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
				// 已使用 USED  
				// 已过期 EXPIRED 
			} else if (start == 'USED') { //已使用
				console.log("已复制兑换码1111", code)
				uni.setClipboardData({
					data: code,
					success: function() {
						console.log("已复制兑换码")
						uni.showToast({
							title: '已复制兑换码',
							icon: 'success',
						});
					},
				});
			} else if (start == '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;
 }
 .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>