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="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>apple
				</view>

				<view v-if="currentPlatform =='android'&&!disabled" class="open-svip-btn" @touchstart="creatOrder">立即支付
				</view>
				<view v-if="currentPlatform =='android'&&disabled" class="open-svip-btn-hui">立即支付</view>
				<view v-if="currentPlatform =='ios'&&!disabled" style="margin-top: 20rpx;" class="open-svip-btn"
					@touchstart="creatOrderIos">立即支付</view>
				<view v-if="currentPlatform =='ios'&&disabled" style="margin-top: 20rpx;" class="open-svip-btn-hui">立即支付
				</view>
			</view>
		</view>
	</uni-popup>
</template>

<script setup>
	import {
		ref,
		computed,
		onMounted,
		watch
	} from 'vue';
	import {
		debounce,
		toast
	} from "@/utils/common";
	import cacheManager from "@/utils/cacheManager.js";
	import {
		orderAdd,
		orderPayAli,
		orderPayWx,
		orderPayApple,
		orderCheck
	} from "@/api/order.js"
	const props = defineProps({
		selectedList: { // 父组件传入的初始选中商品列表
			type: Array,
			default: () => []
		}
	});

	const payType = ref('weixin');
	const mxjtClass = ref('mxjt-sq-icon');

	// 本地维护的商品列表（独立于父组件）
	const localList = ref([]);
	const selectedIds = ref([]); // 存储选中项的id
	let orderId = ref('');
	// 本地选中状态管理
	const localSelectedMap = ref({});
	let currentPlatform = ref('android')
	let disabled = ref(false)
	// 初始化本地数据
	// 初始化数据
	watch(() => props.selectedList, (newVal) => {

		localList.value = [...newVal];
		selectedIds.value = newVal.map(item => item.id); // 初始全部选中

	}, {
		immediate: true
	});
	onMounted(() => {
		isIOSorAndroid()
	})
	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();
		disabled.value = false
		const localList = cacheManager.get('auth').levelIdList || []
		const mergeList = [...new Set([...localList, ...data.levelIdList])]
		cacheManager.updateObject('auth', {
			levelIdList: mergeList
		})
		toast("chenggong!!!! 之后跳转我的订单页面")

		// if (formPage.value == 'my') {
		// 	uni.redirectTo({
		// 		url: '/pages/my/index'
		// 	})
		// } else {
		// 	uni.redirectTo({
		// 		url: '/pages/study/index'
		// 	})
		// }
	}

	const creatOrderIos = debounce((data => {
		disabled.value = true
		uni.showLoading({
			title: '',
			mask: true
		});
		if (appleFlag.value.toString() == 'true') {
			productId.value = 'llisoftEzhuangyuanceshi'
		} else {
			if (cardId.value == 1) {
				productId.value = 'llisoftEzhuangyuan'
			} else {
				productId.value = 'llisoftEzhuangyuanYingyu'
			}
		}
		if (orderId.value) {
			uni.hideLoading();
			applePay()
		} else {
			let req = {
				cardId: cardId.value
			}
			orderAdd(req).then(res => {
				console.log('res', res);
				if (res.code == 0) {
					uni.hideLoading();
					orderId.value = res.data.id
					// 测试ios 1元
					applePay()
				} else {
					uni.hideLoading();
					//disabled.value = false
					return false
					console.log('请求失败');
				}
			}).catch((e) => {
				uni.hideLoading();
				disabled.value = false
				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);
				genggaiVip()
			} else {
				//disabled.value = false
				iapChannel.finishTransaction(data.transactionIdentifier)
				uni.hideLoading();
				toast("苹果内购失败")
				console.log('orderPayApple失败');
				return false
			}
		})
	}

	function applePay() {
		console.log('123123');
		if (!productId.value) {
			uni.showToast({
				title: '苹果内购ID缺失，请选择其它支付方式或联系客服',
				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) => {
											//	disabled.value = false
											uni.hideLoading();
											toast("苹果内购失败")
											console.info("苹果内购失败", e)
										},
									})
								},
								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
			});
			//	disabled.value = false
		} finally {
			uni.hideLoading();
		}



	}


	function wxPay() {
		orderPayWx({
			id: orderId.value
		}).then(res2 => {
			uni.hideLoading();
			console.log('res2', res2);
			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) {

							genggaiVip(res3.data)
						} else {
							setTimeout(() => {
								orderCheck({
									id: orderId.value
								}).then(res4 => {
									if (res4.code == 0) {
										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();
			//	disabled.value = false

			console.log(error);
		})
	}

	function aliApy() {
		orderPayAli({
			id: orderId.value
		}).then(res2 => {
			console.log('res2', res2);
			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) {
							genggaiVip(res3.data)
						} else {
							setTimeout(() => {
								orderCheck({
									id: orderId.value
								}).then(res4 => {
									if (res4.code ==
										0) {
										genggaiVip(res4.data)
									} else {
										//	disabled.value =false
										toast(
											"开通失败,请联系管理员！"
										)
										uni
											.hideLoading();
										return false
									}
								}).catch(() => {
									//	disabled.value =false
									uni.hideLoading();
									toast("check接口报错")
									return false
								})
							}, 5000)
						}
					}).catch(() => {
						//	disabled.value = false
						uni.hideLoading();
						toast("check接口报错")
						return false
					})
				},
				fail: function(err) {
					//	disabled.value = false
					//  toast('支付失败:' + JSON.stringify(err));
					console.log('支付失败:' + JSON.stringify(err));
					uni.hideLoading();
				}
			});
		})
	}

	const creatOrder = debounce((data) => {

		const selectedItems = localList.value
			.filter(item => selectedIds.value.includes(item.id));
		console.log('selectedItems', selectedItems);
		const cardIds = selectedItems.map(item => item.id);
		if (cardIds.length === 0) {
			uni.showToast({
				title: '请选择至少一个商品',
				icon: 'none'
			});
			return;
		}
		console.log('123123123123');

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

	}, 500)




	// 是否全选
	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() {
		payType.value = payType.value == 'weixin' ? 'zhifubao' : 'weixin'
	}

	// 支付处理


	const detailPopup = ref(null);

	function detailShow() {
		detailPopup.value.open();
	}

	function detailCloseBtn() {
		detailPopup.value.close();
	}

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

<style>

</style>