uniProject/pages/mall/mallDetailDialog.vue

<template>
	<uni-popup ref="detailPopup" :animation="false" :is-mask-click="false"
	 mask-background-color="rgba(51, 137, 217, 0.65);">
	 <view class="mall-detail-dialog">
		 <view class="detail-content-box">
			 <icon class="yfmx-title"></icon>
			 <icon class="dialog-close-btn" @click="detailCloseBtn"></icon>
			 <view class="detail-body-box">
				 <!-- ↓需要换成从接口中取得 wgy -->
			 	<view class="detail-item-box">
					<!-- radio选中状态需要改成动态的 wgy -->
					<radio value="zhifubao" checked="true" activeBackgroundColor="transparent" class="detail-radio radio-checked"/>
			 		<img src="/static/images/my/about-icon.png" class="mall-image"/>
			 		<view class="content-body-box">
			 			<view class="content-name">
			 				<view class="name-text">数学暑假进阶L1</view>
			 			</view>
			 			<view class="content-text">适用于L1和学前，介绍介绍，适用于L1和学前，介绍介绍适用于L1和学前，介绍介绍</view>
			 			<view class="content-row">
			 				<view class="content-yuanjia">￥39.9</view>
			 			</view>
			 		</view>
			 	</view>
			 </view>
			 <view class="detail-bottom-box">
			 	<view><radio value="zhifubao" checked="true" activeBackgroundColor="transparent" class="detail-radio radio-checked"/>全选</view>
				<view class="bottom-text-row">合计<text class="content-yuanjia">￥39.9</text></view>
			 </view>
		 </view>
		 <!-- ↓需要换成动态的 wgy -->
		<view class="footer-mall-pay-box">
			<view class="mall-left-box">
				<view class="price-icon-box">
					<text class="red-price fh-text">￥</text>
					<text class="red-price">1999.8</text>明细
					<icon class="mx-jt-icon"></icon>
				</view>
				<view>购买即同意虚拟产品不支持退订</view>
			</view>
			<!-- 微信 -->
			<view class="pay-status-box" v-if="showPayWay" @click="switchPayWay"><icon class="wx-icon"></icon>微信</view>
			<!-- 支付宝 -->
			<view class="pay-status-box" v-if="!showPayWay" @click="switchPayWay"><icon class="zfb-icon"></icon>支付宝</view>
			<view class="pay-btn" @click="detailPayBtn">立即支付</view>
		</view>
	 </view>
	</uni-popup>
</template>

<script setup>
	import { ref } from 'vue';
	const showPayWay = ref(true)
	function switchPayWay(){
		showPayWay.value = !showPayWay.value
	}
	const $emit = defineEmits(['payBtn'])
	const detailPopup = ref(null); // 索引
	// 打开弹窗
	function detailShow() {
		detailPopup.value.open();
	}
	// 开启提分之旅按钮
	function detailPayBtn(){
		$emit('payBtn')
	}
	function detailCloseBtn(){
		detailPopup.value.close();
	}
	defineExpose({
			detailShow
		})
</script>