uniProject/pages/mall/detailDialog.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">
					<!-- 全选/取消全选 -->
					<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,
		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;
	}

	// 支付处理
	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 detailCloseBtn() {
		detailPopup.value.close();
	}

	defineExpose({
		detailShow,
		detailCloseBtn
	});
</script>

<style>

</style>