uniProject/pages/chanpinShop/cp1/dingdan.vue

<template>
	<view class="ezy-qrdd-page">
		<view class="icon-title-navBar-box">
			<view class="nav-bar-icon" @click="handleBack"></view>
			<text class="nav-bar-title">确认订单</text>
		</view>
		<view class="qrdd-body-box">
			<!-- 卡片 -->
			<view class="dd-item-box">
				<!-- 封面 -->
				<image class="item-img-box" :src="data.cover" mode=""></image>
				<view class="item-content-box">
					<!-- 名称 -->
					<view class="item-name">{{data.name}}</view>
					<!-- 简介 -->
					<view class="item-intro">{{data.intro}}</view>
					<!-- 价格 -->
					<view class="item-xianjia">￥{{xianjia}}</view>
				</view>
				<view class="item-play-btn"></view>
			</view>
			<!-- 等级 -->
			<view class="qrdd-border-box">
				<view class="kcxxdj-title">课程学习等级</view>
				<view class="kcxxdj-tc-box">
					<!-- 套餐 -->
					<ezyActiveVue class="ezy-btn-active tc-item" v-for="item in data.taocanList"
						@click="handleSelectTaoCan(item)" :class="{active: item.taocanId == activeTaocan.taocanId}">
						{{item.name}}
					</ezyActiveVue>
				</view>
			</view>

			<!-- 商品总价 -->
			<view class="qrdd-border-box">
				<view class="border-row">
					<view>商品总价</view>
					<view>￥{{yuanjia}}</view>
				</view>
				<view class="border-row">
					<view>优惠券</view>
					<view class="jg-text">-￥{{youhui}}</view>
				</view>
				<view class="border-row sum-row">
					<view class="sum-text">合计</view>
					<view class="jg-text">￥{{xianjia}}</view>
				</view>
			</view>
			<!-- 支付模式 -->
			<template v-if="currentPlatform != 'ios'">
				<radio-group @change="radioChange" class="qrdd-border-box">
					<label class="border-row" v-for="(item, index) in items" :key="item.value">
						<view class="zzfs-name-box">
							<icon :class="{
							  'wechat-icon': item.name === '微信',
							  'alipay-icon': item.name === '支付宝'
							}"></icon>
							<text>{{item.name}}</text>
						</view>
						<radio :value="item.value" :checked="index === current" style="transform:scale(0.7)" />
					</label>
				</radio-group>
			</template>
		</view>

		<!-- 支付区 -->
		<view class="qrdd-footer-box">
			<view class="jg-box">
				<view class="sum-row">
					<text class="sum-text">合计：</text>
					<text class="xj-text-text">￥{{xianjia}}</text>
				</view>
				<view class="yh-text">共优惠￥{{youhui}}</view>
			</view>
			<view @click="handlePay" class="ljzf-btn">立即支付</view>
		</view>
		<!-- <view class="shop-mask">遮盖层</view> -->
	</view>
	
	<kaiTongFongShiVue ref="kaiRef" @ykIoszhifu="ykIoszhifu" @success="handlePay"></kaiTongFongShiVue>
</template>

<script setup>
	import {
		reactive,
		ref,
		computed,
	} from "vue";
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import * as shopHttp from "@/api/shop.js"
	import kaiTongFongShiVue from "../components/kaiTongFongShi.vue";
	import {
		getAppCp1Buy
	} from "@/api/shop";
	import {
		usePay
	} from "../usePay.js";
	import {
		getUserIsYouke
	} from "@/utils/common.js"
	import cacheManager from "@/utils/cacheManager.js";
	const currentPlatform = ref(null);

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

		if (systemInfo.platform == 'ios') {
			currentPlatform.value = 'ios'
		} else {
			currentPlatform.value = 'android'
		}
	}

	const data = reactive({
		chanpinId: null,
		cover: null,
		intro: null,
		name: null,
		taocanList: []
	})

	const activeTaocan = ref(null)
	const kaiRef = ref(null)

	const current = ref(0)
	const items = ref([{
		name: '微信',
		value: '0'
	}, {
		name: '支付宝',
		value: '1'
	}])



	const youhui = computed(() => {
		if (!activeTaocan.value) {
			return '0.00'
		} else {
			return activeTaocan.value.youhui
		}
	})

	const xianjia = computed(() => {
		if (!activeTaocan.value) {
			return '0.00'
		} else {
			return activeTaocan.value.xianjia
		}
	})

	const yuanjia = computed(() => {
		if (!activeTaocan.value) {
			return '0.00'
		} else {
			return activeTaocan.value.yuanjia
		}
	})

	const {
		OrderPay
	} = usePay({
		createOrderError: () => {}, // 创建订单失败
		checkError: () => {}, // 校验失败
		payError: () => {}, // 支付失败
		paySuccess: () => {
			// 支付成功删除contentInfo 缓存
			cacheManager.remove("contentInfo");
			// zhifu='success' 用于判断在订单页 游客模式ios支付成功情况，要去弹出弹窗
			// uni.navigateTo({
			// 	url: "/pages/chanpinMy/order?zhifu=success"
			// })
			uni.showLoading({
				title: '跳转中...',
				mask: true
			});
			uni.switchTab({
				url: "/pages/chanpinMy/my" // 你的F页面实际路径（不变）
			});
			setTimeout(() => {
				uni.navigateTo({
					url: "/pages/chanpinMy/order?zhifu=success", // 你的D页面路径+保留zhifu=success传参
					success: () => {
						uni.hideLoading();
					},
					fail: () => {
						uni.hideLoading();
						toast("跳转失败，请重试");
					}
				});
			}, 300);



		}, //支付成功
		applePayError: () => {}, // 苹果内购失败
	});

	onLoad(() => {
		isIOSorAndroid();
		initPage();
		if (currentPlatform.value == 'ios') {
			// ios 无微信与支付宝
			current.value = -1;
		}
	})

	function ykIoszhifu() {
		console.log('12311');
		const options = {
			chanpinId: data.chanpinId,
			taocanId: activeTaocan.value.taocanId
		};
		options.applePid = activeTaocan.value.applePid;
		console.log('options', options);
		console.log('activeTaocan.value.applePid', activeTaocan.value.applePid);
		OrderPay('apple', options)
	}


	function radioChange(d) {
		current.value = d.detail.value;
	}

	function handleSelectTaoCan(item) {
		activeTaocan.value = item;
	}

	function initPage() {
		shopHttp.getAppCp1Buy().then(res => {
			Object.assign(data, res.data)

			activeTaocan.value = res.data.taocanList[0]
		})
	}

	function handlePay() {
		if (getUserIsYouke()) {
			// 游客
			kaiRef.value.handleShow();
		} else {
			// 非游客
			const options = {
				chanpinId: data.chanpinId,
				taocanId: activeTaocan.value.taocanId
			};

			if (currentPlatform.value == 'ios') {
				options.applePid = activeTaocan.value.applePid;
				console.log('apple支付入参', options)
				// 苹果
				OrderPay('apple', options)
			} else if (currentPlatform.value != 'ios' && current.value == '0') {
				console.log('wx支付入参', options)
				// 微信
				OrderPay('wx', options)
			} else if (currentPlatform.value != 'ios' && current.value == '1') {
				console.log('ali支付入参', options)
				// 支付宝
				OrderPay('ali', options)
			}
		}
	}

	function handleBack() {
		uni.navigateBack()
	}
</script>

<style>

</style>