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">
				<view>原价：<text class="original-price">¥598</text></view>
				<view class="discount-price">活动价：¥198</view>
			</view>
			<radio-group @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 class="open-svip-btn" @click="creatOrder">立即开通</view>
		</view>
		<CustomTabBar></CustomTabBar>
		<!-- 蛋破壳 -->
		<pay-success ref="daoPokeRef"></pay-success>
		<pay-successAll ref="daoPokeAllRef"></pay-successAll>
	</view>
</template>

<script setup>
	import {
		ref
	} from "vue";
	import {
		orderAdd,
		orderPayAli,
		orderPayWx,
	} 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";
	let payType = ref('zhifubao')
	let cardId = ref('')
	let formPage = ref('')
	const daoPokeRef = ref(null);
	const daoPokeAllRef = ref(null);
	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) => {
		cardId.value = options.cardId
		formPage.value = options.formPage
	})

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

	function creatOrder(data) {

		if (payType.value == 'weixin') {
			let req = {
				cardId: cardId.value
			}
			orderAdd(req).then(res => {
				console.log('res', res);
				console.log(' res.data.id',  res.data.id);
				orderPayWx({
					id: res.data.id
				}).then(res2 => {
					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('支付成功');
							console.log('rawdata', rawdata);
							// toast("支付成功");
							cacheManager.updateVipStatus('auth', cardId.value)
							cacheManager.updateObject('auth', {
								growthType: 1
							})
							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)
						},
						fail: function(err) {
							//  toast('支付失败:' + JSON.stringify(err));
							console.log('支付失败:' + JSON.stringify(err));
						}
					});
				}).catch((error) => {
				console.log(error);
			})


			})
		} else {
			let req = {
				cardId: cardId.value
			}
			orderAdd(req).then(res => {
				console.log('res', res);
				orderPayAli({
					id: res.data.id
				}).then(res2 => {
					console.log('res2', res2);

					uni.requestPayment({
						"provider": "alipay",
						"orderInfo": res2.data.text, //此处为服务器返回的订单信息字符串
						success: function(res) {
							var rawdata = JSON.parse(res.rawdata);
							console.log('支付成功');
							console.log('rawdata', rawdata);
							// toast("支付成功");
							cacheManager.updateVipStatus('auth', cardId.value)
							cacheManager.updateObject('auth', {
								growthType: 1
							})
							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)
						},
						fail: function(err) {
							//  toast('支付失败:' + JSON.stringify(err));
							console.log('支付失败:' + JSON.stringify(err));
						}
					});
				})


			})
		}

	}

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

<style>
</style>