uniProject/pages/pay/svip.vue

<!-- svip页面 -->
<template>
	<view class="ezy-svip-page">
		<view class="icon-title-navBar-box">
			<!-- 返回按钮 ↓ -->
			<view class="nav-bar-icon" @click="goBack"></view>
			<view class="nav-bar-title">开通svip</view>
		</view>
		<!-- :class="'svip-login'+Id" 改到下方 -->
		<icon :class="'svip-login'+cardId"></icon>
		<view class="svip-list-box">
			<view v-for="(item, index) in svipArr" :key="index" class="list-item-box">
				<icon class="list-icon" :style="{backgroundImage: 'url(' + item.iconPath + ')'}"></icon>
				<view>
					<view class="list-title">{{item.title}}</view>
					<view class="list-content" v-html="item.content"></view>
				</view>
			</view>
		</view>
		<view class="open-svip-box">
			<view class="svip-price-box" v-if="cardId ==1">
				<view>原价：<text class="original-price">¥499</text></view>
				<view class="discount-price">活动价：¥299</view>
			</view>
			<view class="svip-price-box" v-if="cardId ==2">
				<view>原价：<text class="original-price">¥399</text></view>
				<view class="discount-price">活动价：¥199</view>
			</view>
			<radio-group v-if="currentPlatform =='android'" @change="radioChange" class="pay-type-box">
				<view class="type-radio-title">支付方式</view>
				<view class="type-radio-content">
					<view class="type-radio-box">
						<icon class="wx-radio"></icon>
						<text>微信</text>
						<radio value="weixin" :checked="payType==='weixin'" activeBackgroundColor="transparent"
							:class="{'radio-checked': payType==='weixin'}" />
					</view>
					<view class="type-radio-box">
						<icon class="zfb-radio"></icon>
						<text>支付宝</text>
						<radio value="zhifubao" :checked="payType==='zhifubao'" activeBackgroundColor="transparent"
							:class="{'radio-checked': payType==='zhifubao'}" style="margin-right: 0;" />
					</view>
				</view>
			</radio-group>
			<view v-if="currentPlatform =='android'" class="open-svip-btn" @touchstart="creatOrder">立即开通</view>
			<view v-if="currentPlatform =='ios'&&!disabled" style="margin-top: 20rpx;"  class="open-svip-btn"
				@touchstart="creatOrderIos">立即开通</view>
				<view v-if="currentPlatform =='ios'&&disabled" style="margin-top: 20rpx;"  class="open-svip-btn-hui"
				>立即开通</view>
		</view>
		<view class="hyfw-tip-box">请点击<text @click="hyfyClick">《会员服务协议》</text>了解SVIP权益</view>
		<CustomTabBar></CustomTabBar>
		<!-- 蛋破壳 -->
		<pay-success ref="daoPokeRef"></pay-success>
		<pay-successAll ref="daoPokeAllRef"></pay-successAll>
		<agree-content-dialog ref="agreeContentDialogRef" :agreeType="agreeType"></agree-content-dialog>
	</view>
</template>

<script setup>
	import agreeContentDialog from '@/pages/login/agreeContentDialog.vue';
	import {
		ref
	} from "vue";
	import {
		orderAdd,
		orderPayAli,
		orderPayWx,
		orderPayApple,
		orderCheck
	} from "@/api/order.js"
	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	import cacheManager from "@/utils/cacheManager.js";
	import paySuccess from './paySuccess.vue';
	import paySuccessAll from './paySuccessAll.vue';
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import {
		debounce
	} from "@/utils/common";
	const agreeContentDialogRef = ref(null);
	const agreeType = ref(null);
	let payType = ref('zhifubao')
	let cardId = ref('')
	let formPage = ref('')
	let isLoading = ref(false)
	const daoPokeRef = ref(null);
	const daoPokeAllRef = ref(null);
	let orderId = ref('');
	let productId = ref(null)
	let iapChannel = ref(null)
	let quantity = ref(1)
	let channel = ref('')
	let disabled = ref(false)
	let appleFlag = ref('')
	let currentPlatform = ref('')
	const isVip = getUserIdentity();
	const svipArr = [{
			iconPath: 'static/images/pay/svip-list-icon1.png',
			title: '学习资源，随心畅学',
			content: `解锁L1~L6全等级数学思维优质学习资源，<br/>满足多样学习需求`
		},
		{
			iconPath: 'static/images/pay/svip-list-icon2.png',
			title: '名师打造，优质路径',
			content: '资深名师精心规划学习路径，引领高效提升方向'
		},
		{
			iconPath: 'static/images/pay/svip-list-icon3.png',
			title: '进度分析，个性贴心',
			content: '优先参与丰富真题测试，精准洞察学习状况'
		},
		{
			iconPath: 'static/images/pay/svip-list-icon4.png',
			title: '真题测试，优先体验',
			content: '成为会员，即刻畅享专属权益，开启无忧学习之旅'
		}
	];
	onLoad((options) => {
		isIOSorAndroid()
		appleFlag.value = cacheManager.get("auth").appleFlag
		console.log('appleFlag', appleFlag.value);
		cardId.value = options.cardId
		formPage.value = options.formPage
		if (options.orderId) {
			orderId.value = options.orderId
		} else {
			orderId.value = ''
		}
	})
	
	function hyfyClick(){
		agreeType.value = 'hyfwxy'
		agreeContentDialogRef.value.handleShow();
	}

	const isIOSorAndroid = () => {
		const systemInfo = uni.getSystemInfoSync();

		console.log('systemInfo', systemInfo);

		if (systemInfo.platform == 'ios') {

			return currentPlatform.value = 'ios'
		} else {
			return systemInfo.platform = 'android'
		}

	}

	function radioChange(data) {
		payType.value = data.detail.value;
	}

	function genggaiVip() {
		uni.hideLoading();
		isLoading.value = false;
		cacheManager.updateVipStatus('auth', cardId.value)
		cacheManager.updateObject('auth', {
			growthType: 1
		})
		console.log('isVip', isVip);
		if (isVip != 'VIP') {
			daoPokeRef.value.handleShow();
		} else {
			daoPokeAllRef.value.handleShow();
		}
		setTimeout(() => {
			daoPokeRef.value.handleClose();
			daoPokeAllRef.value.handleClose();
			if (formPage.value == 'my') {
				uni.redirectTo({
					url: '/pages/my/index'
				})
			} else {
				uni.redirectTo({
					url: '/pages/study/index'
				})
			}
		}, 3000)
	}

	const creatOrderIos = debounce((data => {
		disabled.value = true
		uni.showLoading({
			title: '',
			mask: true
		});
		if (appleFlag.value.toString() == 'true') {
			productId.value = 'llisoftEzhuangyuanceshi'
		} else {
			if (cardId.value == 1) {
				productId.value = 'llisoftEzhuangyuan'
			} else {
				productId.value = 'llisoftEzhuangyuanYingyu'
			}
		}
		if (orderId.value) {
			uni.hideLoading();
			applePay()
		} else {
			let req = {
				cardId: cardId.value
			}
			orderAdd(req).then(res => {
				console.log('res', res);
				if (res.code == 0) {
					uni.hideLoading();
					orderId.value = res.data.id
					// 测试ios 1元
					applePay()
				} else {
					uni.hideLoading();
					disabled.value = false
					return false
					console.log('请求失败');
				}
			}).catch((e) => {
				uni.hideLoading();
				disabled.value = false
				console.log('创建订单失败');
				return false

			})
		}

	}), 500)

	function applePaySuccess(data) {
		uni.showLoading({
			title: '会员开通中',
			mask: true
		});
		let req = {
			"id": orderId.value,
			"paynum": data.transactionIdentifier,
			"receipt": data.transactionReceipt
		}
		console.log('reqreq', req);
		orderPayApple(req).then(res => {
			if (res.code == 0 && res.data) {
				iapChannel.finishTransaction(data.transactionIdentifier)
				console.log('resiapChanneliapChanneliapChannel', res);
				genggaiVip()
			} else {
				disabled.value = false
				iapChannel.finishTransaction(data.transactionIdentifier)
				uni.hideLoading();
				toast("苹果内购失败")
				console.log('orderPayApple失败');
				return false
			}
		})
	}

	function applePay() {
		console.log('123123');
		if (!productId.value) {
			uni.showToast({
				title: '苹果内购ID缺失，请选择其它支付方式或联系客服',
				icon: "none"
			});
			return false;
		}
		uni.showLoading({
			title: '正在支付中...'
		});
		try {
			plus.payment.getChannels(function(channels) { //判读项目支付通道开通情况
					for (var i in channels) {
						iapChannel = channels[i];
						// 获取 id 为 'appleiap' 的 channel  
						console.info("支付通道", iapChannel)
						if (iapChannel.id === 'appleiap') { //开通了app应用内支付，在manifest.josn中设置，开通后需打自定议基座
							console.info("苹果支付通道", iapChannel)
							// ids 数组中的项为 App Store Connect 配置的内购买项目产品ID（productId）
							var ids = [productId.value];
							// iap 为应用内支付对象 
							iapChannel.requestOrder(ids, function(e) {
									// 获取订单信息成功回调方法  
									console.log('requestOrder success: ' + JSON.stringify(e));
									uni.requestPayment({
										provider: 'appleiap',
										orderInfo: {
											productid: productId.value, //产品id,来自于苹果
											quantity: quantity.value, //产品数量
											manualFinishTransaction: true
										},
										success: (e) => {
											uni.hideLoading();

											//	toast("苹果内购成功")
											console.info("苹果内购成功", e)
											applePaySuccess(e)
											//e.payment.orderNo = that.orderNo
											//支付成功回调，前端调用后台接口
										},
										fail: (e) => {
											disabled.value = false
											uni.hideLoading();
											toast("苹果内购失败")
											console.info("苹果内购失败", e)
										},
									})
								},
								function(e) {
									// 获取订单信息失败回调方法  
									console.log('requestOrder failed: ' + JSON.stringify(e));
								});
						} else {
							console.log('不支持苹果支付')
						}
					}
				},
				function(e) {
					console.log("获取iap支付通道失败：" + e.message);
				});

		} catch (e) {
			uni.showModal({
				title: "init",
				content: e.message,
				showCancel: false
			});
			disabled.value = false
		} finally {
			uni.hideLoading();
		}



	}


	const creatOrder = debounce((data) => {

		console.log('123123123123');
		if (isLoading.value) {
			return
		}
		isLoading.value = true;
		uni.showLoading({
			title: '',
			mask: true
		});
		if (payType.value == 'weixin') {
			let req = {
				cardId: cardId.value
			}
			console.log('创建订单11');
			orderAdd(req).then(res => {
				console.log('res', res);
				console.log(' res.data.id', res.data.id);
				orderId.value = res.data.id
				orderPayWx({
					id: res.data.id
				}).then(res2 => {
					uni.hideLoading();
					isLoading.value = false;
					console.log('res2', res2);
					uni.requestPayment({
						"provider": "wxpay",
						"orderInfo": {
							"appid": res2.data.appid, // 应用ID（AppID）
							"partnerid": res2.data.partnerId, // 商户号（PartnerID）
							"prepayid": res2.data.prepayId, // 预支付交易会话ID
							"package": res2.data.packageVal, // 固定值
							"noncestr": res2.data.nonceStr, // 随机字符串
							"timestamp": res2.data.timestamp, // 时间戳（单位：秒）
							"sign": res2.data.sign // 签名，这里用的 MD5 签名
						}, //此处为服务器返回的订单信息字符串
						success: function(res) {

							//var rawdata = JSON.parse(res.rawdata);
							//	console.log('res',res);	
							//	console.log('支付成功');
							//	console.log('rawdata', rawdata);
							uni.showLoading({
								title: '会员开通中,请稍后...'
							});
							orderCheck({
								id: orderId.value
							}).then(res3 => {
								console.log('res3', res3);
								if (res3.code == 0 && res3.data) {

									genggaiVip()
								} else {
									setTimeout(() => {
										orderCheck({
											id: orderId.value
										}).then(res4 => {
											if (res4.code ==
												0 && res4
												.data) {
												genggaiVip()
											} else {
												toast(
													"开通失败,请联系管理员！"
												)
												uni
													.hideLoading();
												return false
											}
										}).catch(() => {
											uni.hideLoading();
											toast("check接口报错")
											return false
										})
									}, 5000)
								}
							}).catch(() => {
								uni.hideLoading();
								toast("check接口报错")
								return false
							})

						},
						fail: function(err) {
							uni.hideLoading();
							//  toast('支付失败:' + JSON.stringify(err));
							console.log('支付失败:' + JSON.stringify(err));
						}
					});
				}).catch((error) => {
					uni.hideLoading();
					isLoading.value = false;
					console.log(error);
				})


			}).catch((err) => {
				uni.hideLoading();
				isLoading.value = false;
				toast("订单创建失败")
				return false
			})
		} else {
			let req = {
				cardId: cardId.value
			}
			orderAdd(req).then(res => {
				console.log('res', res);
				orderId.value = res.data.id
				orderPayAli({
					id: res.data.id
				}).then(res2 => {
					console.log('res2', res2);
					uni.hideLoading();
					isLoading.value = false;
					uni.requestPayment({
						"provider": "alipay",
						"orderInfo": res2.data.text, //此处为服务器返回的订单信息字符串
						success: function(res) {
							// var rawdata = JSON.parse(res.rawdata);
							// console.log('支付成功');
							// console.log('rawdata', rawdata);

							uni.showLoading({
								title: '会员开通中,请稍后...'
							});
							orderCheck({
								id: orderId.value
							}).then(res3 => {
								if (res3.code == 0 && res3.data) {
									genggaiVip()
								} else {
									setTimeout(() => {
										orderCheck({
											id: orderId.value
										}).then(res4 => {
											if (res4.code ==
												0 && res4
												.data) {
												genggaiVip()
											} else {
												isLoading
													.value =
													false;
												toast(
													"开通失败,请联系管理员！"
												)
												uni
													.hideLoading();
												return false
											}
										}).catch(() => {
											isLoading.value =
												false;
											uni.hideLoading();
											toast("check接口报错")
											return false
										})
									}, 5000)
								}
							}).catch(() => {
								isLoading.value = false;
								uni.hideLoading();
								toast("check接口报错")
								return false
							})
						},
						fail: function(err) {
							isLoading.value = false;
							//  toast('支付失败:' + JSON.stringify(err));
							console.log('支付失败:' + JSON.stringify(err));
							uni.hideLoading();
						}
					});
				})
			}).catch((err) => {
				isLoading.value = false;
				uni.hideLoading();
				toast("订单创建失败")
				return false
			})
		}

	}, 500)

	function goBack(data) {
		if (formPage.value == 'my') {
			uni.redirectTo({
				url: '/pages/my/index'
			})
		} else {
			uni.redirectTo({
				url: '/pages/study/index'
			})
		}
	}
</script>

<style>
</style>