1

pages/mall/detailDialog.vue

@@ -1,55 +1,165 @@
 <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>
-		 </view>
-	 </view>
+		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">
+					<!-- 全选/取消全选 -->
+					<view class="select-all-box" @click="toggleSelectAll">
+						<checkbox :checked="isAllSelected" class="detail-checkbox" />
+						<text>全选</text>
+					</view>
+
+					<!-- 使用 checkbox-group 管理多选 -->
+					<checkbox-group @change="handleCheckboxChange">
+						<view class="detail-item-box" v-for="item in localList" :key="item.id">
+							<checkbox :value="item.id.toString()" :checked="selectedIds.includes(item.id)"
+								class="detail-checkbox" />
+							<img :src="item.cover" class="mall-image" />
+							<view class="content-body-box">
+								<view class="content-name">
+									<view class="name-text">{{item.name}}</view>
+								</view>
+								<view class="content-text">{{item.intro}}</view>
+								<view class="content-row">
+									<view class="content-yuanjia">￥{{item.xianjia}}</view>
+								</view>
+							</view>
+						</view>
+					</checkbox-group>
+				</view>
+			</view>
+			<!-- 子组件自己的底部结算栏 -->
+			<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">{{totalPrice}}</text>明细
+						<icon :class="mxjtClass"></icon>
+					</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="handlePay">立即支付</view>
+			</view>
+		</view>
 	</uni-popup>
 </template>
 
 <script setup>
-	import { ref } from 'vue';
-	const showPayWay = ref(true)
-	function switchPayWay(){
-		showPayWay.value = !showPayWay.value
+	import {
+		ref,
+		computed,
+		watch
+	} from 'vue';
+
+	const props = defineProps({
+		selectedList: { // 父组件传入的初始选中商品列表
+			type: Array,
+			default: () => []
+		}
+	});
+
+	const showPayWay = ref(true);
+	const mxjtClass = ref('mxjt-sq-icon');
+
+	// 本地维护的商品列表（独立于父组件）
+	const localList = ref([]);
+	const selectedIds = ref([]); // 存储选中项的id
+	// 本地选中状态管理
+	const localSelectedMap = ref({});
+
+	// 初始化本地数据
+	// 初始化数据
+	watch(() => props.selectedList, (newVal) => {
+		localList.value = [...newVal];
+		selectedIds.value = newVal.map(item => item.id); // 初始全部选中
+	}, {
+		immediate: true
+	});
+
+
+	// 是否全选
+	const isAllSelected = computed(() => {
+		return localList.value.length > 0 &&
+			selectedIds.value.length === localList.value.length;
+	});
+	// 处理checkbox变化
+	function handleCheckboxChange(e) {
+		selectedIds.value = e.detail.value.map(id => parseInt(id));
+	}
+	// 全选/取消全选
+	function toggleSelectAll() {
+		if (isAllSelected.value) {
+			selectedIds.value = []; // 取消全选
+		} else {
+			selectedIds.value = localList.value.map(item => item.id); // 全选
+		}
+	}
+	// 计算总价
+	const totalPrice = computed(() => {
+		return localList.value
+			.filter(item => selectedIds.value.includes(item.id))
+			.reduce((sum, item) => sum + parseFloat(item.xianjia || 0), 0)
+			.toFixed(2);
+	});
+
+	// 支付方式切换
+	function switchPayWay() {
+		showPayWay.value = !showPayWay.value;
 	}
-	const $emit = defineEmits(['payBtn'])
-	const detailPopup = ref(null); // 索引
-	// 打开弹窗
+
+	// 支付处理
+	function handlePay() {
+		// 获取选中商品的完整信息和cardId
+		const selectedItems = localList.value
+			.filter(item => selectedIds.value.includes(item.id));
+		console.log('selectedItems',selectedItems);
+		const cardIds = selectedItems.map(item => item.id);
+		const total = selectedItems.reduce((sum, item) => sum + parseFloat(item.xianjia || 0), 0);
+
+		if (cardIds.length === 0) {
+			uni.showToast({
+				title: '请选择至少一个商品',
+				icon: 'none'
+			});
+			return;
+		}
+		console.log('cardIds',cardIds);
+
+		// 构造支付数据
+		const paymentData = {
+			cardIds: cardIds,
+			items: selectedItems,
+			totalAmount: total.toFixed(2),
+			paymentMethod: showPayWay.value ? 'wechat' : 'alipay'
+		};
+
+
+	}
+
+	const detailPopup = ref(null);
+
 	function detailShow() {
 		detailPopup.value.open();
 	}
-	// 开启提分之旅按钮
-	function detailPayBtn(){
-		$emit('payBtn')
-	}
-	function detailCloseBtn(){
+
+	function detailCloseBtn() {
 		detailPopup.value.close();
 	}
+
 	defineExpose({
-			detailShow,detailCloseBtn
-		})
-</script>
+		detailShow,
+		detailCloseBtn
+	});
+</script>
+
+<style>
+
+</style>

pages/mall/mallPage.vue

@@ -71,9 +71,10 @@
 			</view>
 			<view class="pay-btn">立即支付</view>
 		</view>
+		<detail-dialog ref="mallDetailPopup" :selected-list="getSelectedProducts"></detail-dialog>
 
-		<detail-dialog ref="mallDetailPopup" @payBtn="payBtn"></detail-dialog>
-		<product-dialog ref="mallProductPopup" @payBtn="payBtn"></product-dialog>
+		<!-- 
+		<product-dialog ref="mallProductPopup" @payBtn="payBtn"></product-dialog> -->
 	</view>
 </template>
 
@@ -118,6 +119,14 @@
 			.reduce((sum, item) => sum + parseFloat(item.xianjia || 0), 0)
 			.toFixed(2)
 	})
+	const getSelectedProducts = computed(() => {
+		return productData.list.filter(item => productData.selectedIds.includes(item.id));
+	});
+
+	function updateSelection(selectedIds) {
+		productData.selectedIds = selectedIds;
+
+	}
 
 	function switchPayWay() {
 		showPayWay.value = !showPayWay.value
@@ -140,14 +149,18 @@
 	}
 
 	function handlePay(item) {
-		uni.redirectTo({
-			url: `/pages/pay/svip?cardId=${item.cardId}&formPage=my&orderId=${item.id}`
-		})
+		if (productData.selectedIds.length === 0) {
+			toast("请选择至少一个商品");
+			return;
+		}
+		// uni.redirectTo({
+		//   url: `/pages/pay/svip?cardIds=${productData.selectedIds.join(',')}&formPage=my`
+		// });
 	}
 
 	function onChangeTab(e) {
 		console.log('e', e);
-		productData.current = e.currentIndex
+		productData.current = e.currentIndex
 		productData.selectedIds = [] // 清空选中
 		getMore()
 	}
@@ -220,13 +233,13 @@
 		}
 	}
 
-	onLoad((options) => {
-		if(options.from =='daoPage'){
-			productData.current = Number(options.subjectId) - 1
-			productData.cardId = options.cardId
-			productData.from = options.from
-		}else{
-			productData.current  = Number(cacheManager.get('auth').subjectId)-1
+	onLoad((options) => {
+		if (options.from == 'daoPage') {
+			productData.current = Number(options.subjectId) - 1
+			productData.cardId = options.cardId
+			productData.from = options.from
+		} else {
+			productData.current = Number(cacheManager.get('auth').subjectId) - 1
 		}
 
 		getMore();