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>价格：{{data.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>
		<!-- 支付模式 -->
		<view>
			<view>微信</view>
			<view>支付宝</view>
		</view>	
		
		<!-- 支付区 -->
		<view>
			<view>
				<view>合计：￥{{xianjia}}</view>
				<view>共优惠￥{{youhui}}</view>
			</view>
			<view @click="handlePay">立即支付</view>
		</view>
	</view>
	
	<kaiTongFongShiVue ref="kaiRef"></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";

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

	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
		}
	})
	

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

	function initPage() {
		shopHttp.getAppShuxueBuy().then(res => {
			Object.assign(data, res.data)
			
			activeTaocan.value = res.data.taocanList[0]
		})	
	}
	
	function handlePay() {
		
		kaiRef.value.handleShow();
		
		/* if (getUserIsYouke()) {
			// 游客
			kaiRef.value.handleShow();
		} else {
			// 非游客
		} */
	}

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

<style>

</style>