uniProject/pages/mall/mallPage.vue

<template>
	<view class="ezy-mall-page">
		<view class="icon-title-navBar-box">
			<view @click="goBack" class="nav-bar-icon"></view>
			<text class="nav-bar-title">鹅状元进阶营</text>
		</view>
		<view class="ezy-tab-border">

			<uni-segmented-control :current="productData.current" :values="productData.items" active-color="#3A7FE9"
				@clickItem="onChangeTab" class="ezy-tab-box" />
			<view>
				<view v-if="productData.current === 0">
					<scroll-view scroll-y="true" :scroll-into-view="scrollIntoId" class="order-scroll-view">
						<!--数学-->
						<view :id="'item-' + item.id" v-for="item in productData.list" :key="item.id"
							class="mall-list-item">
							<view class="mall-content-box">
								<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.yuanjia}}</view>
										<view class="shop-car-box" @click="addProduct(item)">
											<icon v-if="productData.selectedIds.includes(item.id)" class="car-change">
											</icon>
										</view>
									</view>
								</view>
							</view>
							<view class="mall-bottom-row">
								<view v-if="item.type ==1" class="kcb-btn" @click="productBtn">课程包明细<icon>
									</icon>
								</view>
								<view class="hdj-text">活动价：{{item.xianjia}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="productData.current === 1">
					<view>英语</view>
				</view>
				<!-- 	<view v-if="productData.current === 2">
					<view>语文</view>
				</view> -->
			</view>
		</view>
		<view class="footer-mall-pay-box">
			<view class="mall-left-box" @click="detailBtn">
				<!-- 需要换成从接口中取得 wgy -->
				<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>
			</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-status-box apple-status-box" v-if="false">
				<icon class="apple-icon"></icon>apple
			</view>
			<view class="pay-btn">立即支付</view>
		</view>
		<detail-dialog ref="mallDetailPopup" :selected-list="getSelectedProducts"></detail-dialog>

		<!-- 
		<product-dialog ref="mallProductPopup" @payBtn="payBtn"></product-dialog> -->
	</view>
</template>

<script setup>
	import {
		reactive,
		computed,
		nextTick,
		ref
	} from "vue";
	import {
		getMallist
	} from "@/api/productMall.js";
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		toast,
		getUserIdentity
	} from "@/utils/common";
	import cacheManager from '@/utils/cacheManager.js';
	import CustomTabBar from '@/components/custom-tabbar/custom-tabbar.vue';
	import detailDialog from './detailDialog.vue'
	import productDialog from './productDialog.vue'
	const showPayWay = ref(true)
	const showDetail = ref(false)
	const mxjtClass = ref('mxjt-sq-icon')
	const mallDetailPopup = ref(null);
	const mallProductPopup = ref(null);
	let scrollIntoId = ref(null)
	const productData = reactive({
		items: ['数学', '英语'],
		current: 1,
		from: '',
		cardId: '',
		list: [],
		selectedIds: [] // 新增选中状态存储
	})
	const totalPrice = computed(() => {
		return productData.list
			.filter(item => productData.selectedIds.includes(item.id))
			.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
	}

	function productBtn() {
		mallProductPopup.value.detailShow();
	}

	function detailBtn() {
		showDetail.value = !showDetail.value;
		if (showDetail.value) {
			mxjtClass.value = 'mxjt-zk-icon';
			mallDetailPopup.value.detailShow();
		} else {
			mxjtClass.value = 'mxjt-sq-icon';
			mallDetailPopup.value.detailCloseBtn();
		}

	}

	function handlePay(item) {
		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.selectedIds = [] // 清空选中
		getMore()
	}


	function getMore() {
		const opt = {
			subjectId: productData.current + 1
		}
		getMallist(opt).then(res => {
			if (res.code == 0) {
				productData.list = res.data
				// 初始化选中状态（当有外部cardId时）
				if (productData.cardId) {
					const exist = res.data.some(item => item.id == productData.cardId)
					if (exist) {
						productData.selectedIds = [Number(productData.cardId)]
					}
				}
				nextTick(() => {
					scrollToIdFun(productData.cardId)
				})

			}
		}).catch(err => {
			toast("获取产品数据失败")
			return false
		})
	}

	function scrollToIdFun(targetId) {
		const index = productData.list.findIndex(item => item.id == targetId)
		console.log('index', index);
		if (index > -1) {
			// 安卓设备需要双保险
			scrollIntoId.value = `item-${targetId}`
			setTimeout(() => {
				scrollIntoId.value = `item-${targetId}`
			}, 300)

		}
	}

	function addProduct(item) {
		console.log('item', item);

		const temp = [...productData.selectedIds]
		const index = temp.indexOf(item.id)
		index > -1 ? temp.splice(index, 1) : temp.push(item.id)
		productData.selectedIds = temp
		console.log('productData.selectedIds', productData.selectedIds);
	}

	function isItemSelected(id) {
		return productData.cardId ?
			id == productData.cardId // 有外部cardId时严格匹配
			:
			productData.selectedIds.includes(id) // 无cardId时检查选中列表
	}

	function goBack() {
		if (productData.from == 'daoPage') {
			uni.redirectTo({
				url: '/pages/study/index'
			})
		} else {
			uni.redirectTo({
				url: '/pages/my/index'
			})
		}
	}

	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();
	})
</script>

<style>

</style>