uniProject/pages/chanpinShop/cp1/dingdan.vue

<template>
	<view>
		<view class="icon-title-navBar-box">
			<view class="nav-bar-icon" @click="handleBack"></view>
			<text class="nav-bar-title">确认订单</text>
		</view>
		<!-- 卡片 -->
		<view>
			<view>
				<image :src="data.cover"></image>
			</view>
			<view>名称：{{data.name}}</view>
			<view>简介：{{data.intro}}</view>
			<view>价格：{{xianjia}}</view>
		</view>
		<!-- 等级 -->
		<view>
			<view>课程学习等级</view>
			<view>
				<!-- 套餐 -->
				<view v-for="item in data.taocanList" @click="handleSelectTaoCan(item)"
					:class="{active: item.taocanId == activeTaocan.taocanId}">
					{{item.name}}
				</view>
			</view>
		</view>
		<!-- 商品总价 -->
		<view>
			<view>商品总价 ￥{{yuanjia}}</view>
			<view>优惠券 -￥{{youhui}}</view>
			<view>合计 ￥{{xianjia}}</view>
		</view>
		<!-- 支付模式 -->
		<template v-if="currentPlatform != 'ios'">
			<radio-group @change="radioChange">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="item.value">
					<view>
						<radio :value="item.value" :checked="index === current" />
					</view>
					<view>{{item.name}}</view>
				</label>
			</radio-group>
		</template>
		<!-- 支付区 -->
		<view>
			<view>
				<view>合计：￥{{xianjia}}</view>
				<view>共优惠￥{{youhui}}</view>
			</view>
			<view @click="handlePay">立即支付</view>
		</view>
	</view>

	<kaiTongFongShiVue ref="kaiRef" @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"
	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: () => {
      uni.navigateTo({
        url: "/pages/chanpinMy/order"
      })
    }, //支付成功
		applePayError: () => {}, // 苹果内购失败
	});

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

	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>