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" :class="item.yigou ==1?'mall-yigou-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(item.levelList)">课程包明细
									<icon>
									</icon>
								</view>
								<view class="hdj-text">活动价：{{item.xianjia}}</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view v-if="productData.current === 1">
					<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" :class="item.yigou ==1?'mall-yigou-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" v-if="item.yigou !=1" @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(item.levelList)">课程包明细
									<icon>
									</icon>
								</view>
								<view class="hdj-text">活动价：{{item.xianjia}}</view>
							</view>
						</view>
					</scroll-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="payType =='weixin'&&currentPlatform =='android'" @click="switchPayWay">
				<icon class="wx-icon"></icon>微信
			</view>
			<view class="pay-status-box" v-if="payType =='zhifubao'&&currentPlatform =='android'" @click="switchPayWay">
				<icon class="zfb-icon"></icon>支付宝
			</view>
			<view class="pay-status-box apple-status-box" v-if="currentPlatform =='ios'">
				<!-- <icon class="apple-icon"></icon> -->
			</view>

			<view v-if="currentPlatform =='android'" class="pay-btn" @touchstart="creatOrder">立即支付
			</view>
			<view class="pay-btn" v-if="currentPlatform =='ios'" @touchstart="creatOrderIos">立即支付</view>
		</view>
		<detail-dialog ref="mallDetailPopup" :selected-list="getSelectedProducts"></detail-dialog>


		<product-dialog ref="mallProductPopup"></product-dialog>
		<tip-big-dialog ref="youkeDialogRef" @confirm-btn="ykConfirm" :imgShow="true"></tip-big-dialog>
	</view>
</template>

<script setup>
	import {
		reactive,
		computed,
		nextTick,
		ref
	} from "vue";
	import {
		getMallist,
		getMallistCom
	} from "@/api/productMall.js";
	import {
		orderAdd,
		orderPayAli,
		orderPayWx,
		orderPayApple,
		orderCheck
	} from "@/api/order.js"
	import {
		onLoad
	} from "@dcloudio/uni-app";
	import {
		toast,
		debounce,
		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 tipBigDialog from '@/components/dialog/tipBigDialog.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);
	const youkeDialogRef = ref(null);
	let scrollIntoId = ref(null)
	const productData = reactive({
		items: ['数学', '英语'],
		current: 1,
		from: '',
		cardId: '',
		list: [],
		selectedIds: [] // 新增选中状态存储
	})
	let currentPlatform = ref('android')
	const payType = ref('weixin');
	let orderId = ref('');
	let productId = ref(null)
	let iapChannel = ref(null)
	let quantity = ref(1)
	let channel = ref('')
	let appleFlag = ref('')
	const subjectId = ref(null); //游客使用
	const levelId = ref(null); //游客使用
	const typeId = ref(null); //游客使用
	const tipFlag = ref(null); //游客使用



	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 switchPayWay() {
		payType.value = payType.value == 'weixin' ? 'zhifubao' : 'weixin'
	}

	function productBtn(item) {
		console.log('item', item);
		mallProductPopup.value.detailShow(item);
	}

	function ykConfirm() {
		uni.redirectTo({
			url: '/pages/login/index'
		});
	}

	function detailBtn() {
		// // 获取选中商品的cardId列表
		// const selectedProducts = productData.list.filter(
		// 	item => productData.selectedIds.includes(item.id)
		// );

		// const cardIds = selectedProducts.map(item => item.id);
		// console.log('cardIds', cardIds);

		if (productData.selectedIds.length === 0) {
			toast("请选择至少一个商品查看明细");
			return;
		}

		showDetail.value = !showDetail.value;
		if (showDetail.value) {
			const selected = productData.list.filter(item =>
				productData.selectedIds.includes(item.id)
			);
			mxjtClass.value = 'mxjt-zk-icon';
			mallDetailPopup.value.detailShow(selected);
		} else {
			mxjtClass.value = 'mxjt-sq-icon';
			mallDetailPopup.value.detailCloseBtn();
		}

	}
	const isIOSorAndroid = () => {
		const systemInfo = uni.getSystemInfoSync();

		console.log('systemInfo', systemInfo);

		if (systemInfo.platform == 'ios') {

			return currentPlatform.value = 'ios'
		} else {
			return currentPlatform.value = 'android'
		}

	}

	function genggaiVip(data) {
		uni.hideLoading();
		const localList = cacheManager.get('auth').levelIdList || []
		const mergeList = [...new Set([...localList, ...data.levelIdList])]
		cacheManager.updateObject('auth', {
			levelIdList: mergeList
		})
		toast("支付成功")
		uni.redirectTo({
			url: '/pages/pay/order?status=2'
		})

		//	toast("chenggong!!!! 之后跳转我的订单页面")

		// if (formPage.value == 'my') {
		// 	uni.redirectTo({
		// 		url: '/pages/my/index'
		// 	})
		// } else {
		// 	uni.redirectTo({
		// 		url: '/pages/study/index'
		// 	})
		// }
	}
	const creatOrderIos = debounce((data => {
		if (productData.selectedIds.length == 0) {
			toast("请选择至少一个商品");
			return;
		}
		const selectedProducts = productData.list.filter(
			item => productData.selectedIds.includes(item.id)
		);

		const cardIds = selectedProducts.map(item => item.id);
		console.log('cardIds', cardIds);
		uni.showLoading({
			title: '',
			mask: true
		});

		if (appleFlag.value.toString() == 'true') {
			productId.value = 'llisoftEzhuangyuanceshi'
		} else {
			const productMap = {
				4: 'ezySxJstxL1', //计算特训 L1
				6: 'ezySxTjmtL1', //图解母题 L1
				7: 'ezySxJstxL2', //计算特训 L2
				8: 'ezySxJstxL3', //计算特训 L3
				9: 'ezySxJstxL4', //计算特训 L4
				10: 'ezySxJstxL5', //计算特训 L5
				11: 'ezySxJstxL6', //计算特训 L6
				12: 'ezySxTjmtL2', //图解母题 L2
				13: 'ezySxTjmtL3', //图解母题 L3
				14: 'ezySxTjmtL4', //图解母题 L4
				15: 'ezySxTjmtL5', //图解母题 L5
				16: 'ezySxTjmtL6', //图解母题 L6
				22: 'ezySxTjmtL1L6', //图解母题 L1-6
				23: 'ezyYyZrpdL1', //自然拼读 L1
				24: 'ezyYyZrpdL2', //自然拼读 L2
				25: 'ezyYyZrpdL3', //自然拼读 L3
				26: 'ezyYyZrpdL4', //自然拼读 L4
				27: 'ezyYyZrpdL5', //自然拼读 L5
				28: 'ezyYyZrpdL1L5', //自然拼读 L1-l5
				29: ' ezySxJstxL1L6', //计算特训 L1-L6
				30: ' ezySxTjmtL3L6', //图解母题L3-L6
				31: ' ezySxTjmtL5L6' //图解母题L5-L6
			};
			const firstId = cardIds.length > 0 ? cardIds[0] : null;
			if (firstId) {
				productId.value = productMap[firstId]
				console.log('productId.value', productId.value);
			} else {
				toast("无对应产品Id,请练习管理员")
				uni.hideLoading();
				return false
			}
		}
		let req = {
			cardIds: cardIds
		}
		orderAdd(req).then(res => {
			console.log('res', res);
			if (res.code == 0) {
				setTimeout(() => {
					uni.hideLoading();
				}, 1000)

				orderId.value = res.data.id
				// 测试ios 1元
				applePay()
			} else {
				uni.hideLoading();

				return false
				console.log('请求失败');
			}
		}).catch((e) => {
			uni.hideLoading();

			toast("订单创建失败")
			return false

		})


	}), 500)

	function applePaySuccess(data) {
		uni.showLoading({
			title: '开通中',
			mask: true
		});
		let req = {
			"id": orderId.value,
			"paynum": data.transactionIdentifier,
			"receipt": data.transactionReceipt
		}
		console.log('reqreq', req);
		orderPayApple(req).then(res => {
			if (res.code == 0 && res.data) {
				iapChannel.finishTransaction(data.transactionIdentifier)
				console.log('resiapChanneliapChanneliapChannel', res);
				orderCheck({
					id: orderId.value
				}).then(res3 => {
					console.log('res3', res3);
					if (res3.code == 0 && res3.data.success) {
						genggaiVip(res3.data)
					} else {
						setTimeout(() => {
							orderCheck({
								id: orderId.value
							}).then(res4 => {
								if (res4.code == 0 && res4.data.success) {
									genggaiVip(res4.data)
								} else {
									toast(
										"开通失败,请联系管理员！"
									)
									uni
										.hideLoading();
									return false
								}
							}).catch(() => {
								uni.hideLoading();
								toast("check接口报错")
								return false
							})
						}, 5000)
					}
				}).catch(() => {
					uni.hideLoading();
					toast("check接口报错")
					return false
				})


			} else {

				iapChannel.finishTransaction(data.transactionIdentifier)
				uni.hideLoading();
				toast("失败")
				console.log('orderPayApple失败');
				return false
			}
		})
	}

	function applePay() {
		console.log('123123');
		if (!productId.value) {
			uni.showToast({
				title: '产品错误,请联系客服',
				icon: "none"
			});
			return false;
		}
		uni.showLoading({
			title: '正在支付中...'
		});
		try {
			plus.payment.getChannels(function(channels) { //判读项目支付通道开通情况
					for (var i in channels) {
						iapChannel = channels[i];
						// 获取 id 为 'appleiap' 的 channel  
						console.info("支付通道", iapChannel)
						if (iapChannel.id === 'appleiap') { //开通了app应用内支付，在manifest.josn中设置，开通后需打自定议基座
							console.info("苹果支付通道", iapChannel)
							// ids 数组中的项为 App Store Connect 配置的内购买项目产品ID（productId）
							var ids = [productId.value];
							// iap 为应用内支付对象 
							iapChannel.requestOrder(ids, function(e) {
									// 获取订单信息成功回调方法  
									console.log('requestOrder success: ' + JSON.stringify(e));
									uni.requestPayment({
										provider: 'appleiap',
										orderInfo: {
											productid: productId.value, //产品id,来自于苹果
											quantity: quantity.value, //产品数量
											manualFinishTransaction: true
										},
										success: (e) => {
											uni.hideLoading();

											//	toast("苹果内购成功")
											console.info("苹果内购成功", e)
											applePaySuccess(e)
											//e.payment.orderNo = that.orderNo
											//支付成功回调，前端调用后台接口
										},
										fail: (e) => {
											uni.hideLoading();
											toast("失败或取消支付")

										},
									})
								},
								function(e) {
									// 获取订单信息失败回调方法  
									console.log('requestOrder failed: ' + JSON.stringify(e));
								});
						} else {
							console.log('不支持苹果支付')
						}
					}
				},
				function(e) {
					console.log("获取iap支付通道失败：" + e.message);
				});

		} catch (e) {
			uni.showModal({
				title: "init",
				content: e.message,
				showCancel: false
			});
		} finally {
			uni.hideLoading();
		}



	}


	function wxPay() {
		orderPayWx({
			id: orderId.value
		}).then(res2 => {
			uni.hideLoading();
			console.log('res2', res2);
			if (res2.code != 0) {
				return false
			}
			uni.requestPayment({
				"provider": "wxpay",
				"orderInfo": {
					"appid": res2.data.appid, // 应用ID（AppID）
					"partnerid": res2.data.partnerId, // 商户号（PartnerID）
					"prepayid": res2.data.prepayId, // 预支付交易会话ID
					"package": res2.data.packageVal, // 固定值
					"noncestr": res2.data.nonceStr, // 随机字符串
					"timestamp": res2.data.timestamp, // 时间戳（单位：秒）
					"sign": res2.data.sign // 签名，这里用的 MD5 签名
				}, //此处为服务器返回的订单信息字符串
				success: function(res) {

					//var rawdata = JSON.parse(res.rawdata);
					//	console.log('res',res);	
					//	console.log('支付成功');
					//	console.log('rawdata', rawdata);
					uni.showLoading({
						title: '开通中,请稍后...'
					});
					orderCheck({
						id: orderId.value
					}).then(res3 => {
						console.log('res3', res3);
						if (res3.code == 0 && res3.data.success) {

							genggaiVip(res3.data)
						} else {
							setTimeout(() => {
								orderCheck({
									id: orderId.value
								}).then(res4 => {
									if (res4.code == 0 && res4.data.success) {
										genggaiVip(res4.data)
									} else {
										toast(
											"开通失败,请联系管理员！"
										)
										uni
											.hideLoading();
										return false
									}
								}).catch(() => {
									uni.hideLoading();
									toast("check接口报错")
									return false
								})
							}, 5000)
						}
					}).catch(() => {
						uni.hideLoading();
						toast("check接口报错")
						return false
					})

				},
				fail: function(err) {
					uni.hideLoading();
					//  toast('支付失败:' + JSON.stringify(err));
					console.log('支付失败:' + JSON.stringify(err));
				}
			});
		}).catch((error) => {
			uni.hideLoading();

			console.log(error);
		})
	}

	function aliApy() {
		orderPayAli({
			id: orderId.value
		}).then(res2 => {
			console.log('res2', res2);
			if (res2.code != 0) {
				return false
			}
			uni.hideLoading();
			uni.requestPayment({
				"provider": "alipay",
				"orderInfo": res2.data.text, //此处为服务器返回的订单信息字符串
				success: function(res) {
					// var rawdata = JSON.parse(res.rawdata);
					// console.log('支付成功');
					// console.log('rawdata', rawdata);

					uni.showLoading({
						title: '开通中,请稍后...'
					});
					orderCheck({
						id: orderId.value
					}).then(res3 => {
						if (res3.code == 0 && res3.data.success) {
							genggaiVip(res3.data)
						} else {
							setTimeout(() => {
								orderCheck({
									id: orderId.value
								}).then(res4 => {
									if (res4.code ==
										0 && res4.data.success) {
										genggaiVip(res4.data)
									} else {
										toast(
											"开通失败,请联系管理员！"
										)
										uni
											.hideLoading();
										return false
									}
								}).catch(() => {
									uni.hideLoading();
									toast("check接口报错")
									return false
								})
							}, 5000)
						}
					}).catch(() => {
						uni.hideLoading();
						toast("check接口报错")
						return false
					})
				},
				fail: function(err) {
					console.log('支付失败:' + JSON.stringify(err));
					uni.hideLoading();
				}
			});
		})
	}

	const creatOrder = debounce((data) => {

		if (productData.selectedIds.length === 0) {
			toast("请选择至少一个商品");
			return;
		}
		// 获取选中商品的cardId列表
		const selectedProducts = productData.list.filter(
			item => productData.selectedIds.includes(item.id)
		);

		const cardIds = selectedProducts.map(item => item.id);
		console.log('cardIds', cardIds);

		uni.showLoading({
			title: '',
			mask: true
		});
		if (payType.value == 'weixin') {
			console.log('创建订单11');
			let req = {
				cardIds: cardIds
			}
			orderAdd(req).then(res => {
				console.log('res', res);
				console.log(' res.data.id', res.data.id);
				orderId.value = res.data.id
				wxPay()
			}).catch((err) => {
				uni.hideLoading();
				toast("订单创建失败")
				return false
			})

		} else {

			let req = {
				cardIds: cardIds
			}
			orderAdd(req).then(res => {
				console.log('res', res);
				orderId.value = res.data.id
				aliApy()
			}).catch((err) => {
				uni.hideLoading();
				toast("订单创建失败")
				return false
			})

		}

	}, 500)

	function onChangeTab(e) {
		console.log('e', e);
		productData.current = e.currentIndex
		productData.selectedIds = [] // 清空选中
		if (!cacheManager.get('auth')) {
			getMoreYk()
		} else {
			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 getMoreYk() {
		const opt = {
			subjectId: productData.current + 1
		}
		getMallistCom(opt).then(res => {
			if (res.code == 0) {
				productData.list = res.data

			}
		}).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) {
		if (!cacheManager.get('auth')) {
			youkeDialogRef.value.handleShow();
			return false;
		}
		if (item.yigou == 1) {
			return false;
		}

		const currentSelected = productData.selectedIds;
		const isAlreadySelected = currentSelected.includes(item.id);
		if (currentPlatform.value == 'ios') {
			if (isAlreadySelected) {
				productData.selectedIds = currentSelected.filter(id => id !== item.id);
			} else {
				if (currentSelected.length >= 1) {
					toast("只允许单个购买！");
					return false;
				}
				productData.selectedIds = [item.id];
			}
		} else {
			const temp = [...currentSelected];
			const index = temp.indexOf(item.id);
			index > -1 ? temp.splice(index, 1) : temp.push(item.id);
			productData.selectedIds = temp;
		}

	}
	// function addProduct(item) {

	// 	if (!cacheManager.get('auth')) {
	// 		youkeDialogRef.value.handleShow();
	// 		return false
	// 	}
	// 	if (item.yigou == 1) {
	// 		return false
	// 	}
	// 	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.length);
	// }

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

	function goBack() {


		if (!cacheManager.get('auth')) {
			// 游客
			uni.redirectTo({
				url: `/pages/my/index?levelId=${levelId.value}&typeId=${typeId.value}&subjectId=${subjectId.value}&tipFlag=${tipFlag.value}`
			})
		} else {
			if (productData.from == 'daoPage') {
				uni.redirectTo({
					url: '/pages/study/index'
				})
			} else {
				uni.redirectTo({
					url: '/pages/my/index'
				})
			}
		}
	}

	onLoad((options) => {
		isIOSorAndroid()
		if (!cacheManager.get('auth')) {
			// 游客
			levelId.value = options.levelId
			typeId.value = options.typeId
			subjectId.value = options.subjectId
			tipFlag.value = options.tipFlag
			productData.current = Number(options.subjectId) - 1
			getMoreYk()
		} else {
			appleFlag.value = cacheManager.get("auth").appleFlag
			if (options.from == 'daoPage') {
				productData.current = Number(options.subjectId) - 1
				productData.cardId = options.cardId
				productData.from = options.from
			} else if (options.from == 'myPage') {
				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>