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

<template>
	<!-- 	<text class="btn" v-if="item.isPay==2"
			@click.stop="equityPaymentOrderRequest(item.id)">去支付</text> -->

	<view class="list" :style="{'--bgimg':`url(${$imgUrl}equiet-bg1.png)`}" v-for="(item, index) in listData" :key="index" @click="onClick(item)" :data-code="item">
		<image class="name" :src="`${$imgUrl}equity-name.png`"></image>
		<view class="right-content">
			<view>{{item.productName}}</view>
			<image class="icon-back" src="/static/image/icon-back.png" mode=""></image>
		</view>
	</view>
	<view v-if="listData.length==0" class="no">暂无数据</view>
</template>
<script setup lang='ts'>
	import { reactive } from "vue";
	import {
		getItem
	} from "@/utils/storage";
	import {
		ref
	} from 'vue';
	import {
		requestNew
	} from "@/utils/network/request.js";
	import {getOpenId,paymentequityapplyapp,payequitydetection,queryuserallequity} from "@/utils/network/api.js";
	import {
		stringToJson
	} from "@/utils/network/encryption";
	import { msg } from "@/utils/utils";
	import {onShow} from "@dcloudio/uni-app";
	let listData = ref([])
    const state = reactive({
		id: "", //支付id
	});
	onShow(()=>{
		query()
	})
	function query(){
		//卡券渠道类型获取单项权益列表
		requestNew(queryuserallequity, {
			type: 2,
			data: {
				couponAgencyType: ['TUHU', 'ZFB'],
				mobile: getItem('mobile').toString()
			},
			method: "POST",
			showLoading: true,
		}).then((item) => {
			let res = item
			console.log(res, '=========');
			listData.value = res.data
		})
	}
  
	function onClick(singId: any) {
		uni.navigateTo({
			url: '/subpackage/service/equity/equity?singleEquityId=' + singId.singleEquityId +
				'&couponAgencyType=' + singId.couponAgencyType + '&couponId=' + singId.couponId + '&equityId=' + singId.equityId+ '&purchasedEquityId=' + singId.eporderId,
		})
	}
	// 权益支付下单
	const equityPaymentOrderRequest = (id) => {
		state.id =id
		// #ifdef MP-WEIXIN
		uni.login({
			provider: "weixin",
			success: function (e) {
				const options1 = {
					type: 2,
					data: {
						"jsCode": e.code
					},
					method: "POST",
					showLoading: true,
				};
				requestNew(getOpenId, options1).then((res) => {
					console.log("state.id",id)
					const result = res;
					const openidData = stringToJson(result.data);
					console.log("openidData",openidData)
					const options = {
						type: 2,
						data: {
							id: id,
							payType: "EQUITY",
							wxOpenid: openidData.openid,
						},
						method: 'POST',
						showLoading: true,
					}
					requestNew(paymentequityapplyapp, options).then((res) => {
						const data = res;
						console.log("权益支付下单", data)
						if (data.info == "购买权益记录已支付") {
							uni.showModal({
								title: '提示',
								content: data.info,
								showCancel: false,
								success: function (res) {
									if (res.confirm) {
										uni.navigateBack({
											delta: 2
										})
									}
								}
							});
						} else {
							uni.requestPayment({
								provider: "wxpay",
								orderInfo: "",
								timeStamp: data.timestamp,
								nonceStr: data.noncestr,
								package: data.wxPackage ? data.wxPackage : "",
								signType: data.signType,
								paySign: data.sign,
								success: function (e) {
									console.log("支付成功", res);
									// 权益支付检测
									equityPaymentTestRequest().then((item : any) => {
										console.log("权益支付检测", data)
										msg("权益产品购买成功")
										// 重新查询一遍
										query()
									})
								},
								fail: function (err) {
									confirm(err, () => { }, "支付失败", false);
								},
							})
						}
					})
				})
			},
		})
		// #endif
		// #ifdef MP-ALIPAY
		my.getAuthCode({
			scopes: 'auth_base',
			success: res => {
				const optionsUser = {
					type: 2,
					data: {
						payConfigId: aliPayConfigIdTwo,
						code: res.authCode
					},
					method: "POST",
					showLoading: true,
				};
				console.log('支付宝用户编号请求：', optionsUser)
				request(obtainUserId, optionsUser).then((res) => {
					console.log('支付宝用户编号返回：', res)
					const data = stringToJson(res.bizContent);
					console.log("data", data)
					const optionsali = {
						type: 2,
						data: {
							id: state.id,
							payType: "EQUITY",
							wxOpenid: data.openId,
						},
						method: "POST",
						showLoading: true,
					};
					console.log('支付下单请求：', optionsali)
					requestNew(paymentequityapplyapp, optionsali).then((res) => {
						const data = stringToJson(res.bizContent);
						console.log('支付下单返回：', data)
						my.tradePay({
							// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no
							tradeNO: data.tranPackage,
							success: res => {
								console.log("支付成功", res);
								if (res.resultCode != "6001") {
									// 权益支付检测
									equityPaymentTestRequest().then((item : any) => {
										console.log("权益支付检测", data)
										msg("权益产品购买成功,到【我的】权益查看")
										setTimeout(() => {
											uni.navigateBack({
												delta: 2
											})
										}, 2000)
									})
								}
	
							},
							fail: res => {
								console.log("支付失败", res);
							},
						});
	
					});
				});
			},
			fail: err => {
				console.log('my.getAuthCode 调用失败', err)
			}
		});
		// #endif
	}
	// 权益支付检测
	const equityPaymentTestRequest = () => {
		const options = {
			type: 2,
			data: {
				id: state.id,
			},
			method: 'POST',
			showLoading: true,
		}
		return new Promise(async (resolve, reject) => {
			const res = await requestNew(payequitydetection, options);
			const data = res;
			resolve(data);
		}).catch((error) => {
			reject(error);
		});
	}
</script>
<style>
	page {
		background: #E9EDF0;
		font-size: 28rpx;
		padding: 20rpx;
		box-sizing: border-box;
	}
</style>
<style lang='scss' scoped>
.no{
	text-align: center;
	margin: 40rpx auto;
	font-size: 28rpx;
}
.list {
	background-size: 100% 100%;
	background-repeat: no-repeat;
	width: 100%;
	height: 168rpx;
	text-align: right;
	display: flex;
	align-items: center;
	background-image: var(--bgimg);
	
	.name{
		width: 60rpx;
		height: 60rpx;
		margin-left: 60rpx;
		margin-right: 60rpx;
	}
	.right-content{
		flex: 3;
		display: flex;
		align-items: center;
		padding: 0 20rpx 0 40rpx;
		box-sizing: border-box;
		justify-content: space-between;
		.icon-back{
			width: 26rpx;
			height: 36rpx;
			transform: rotateY(180deg);
		}
	}
	
}
</style>