支付宝兼容

2026-03-09 09:07:58 +08:00
parent 069677957e
commit b3836b8bf2
31 changed files with 2382 additions and 307 deletions
@@ -176,6 +176,8 @@

 						<view class="form-item">
 							<text class="form-label">收货地区</text>
+							<!-- 非支付宝小程序：使用多列 picker -->
+							<!-- #ifndef MP-ALIPAY -->
 							<picker mode="multiSelector" :range="regionColumns" range-key="name" :value="regionIndexes"
 								@change="onRegionChange" @columnchange="onRegionColumnChange">
 								<view class="form-input region-selector">
@@ -187,6 +189,19 @@
 									<text class="arrow-icon">›</text>
 								</view>
 							</picker>
+							<!-- #endif -->
+
+							<!-- 支付宝小程序：使用自定义弹窗 + picker-view -->
+							<!-- #ifdef MP-ALIPAY -->
+							<view class="form-input region-selector" @click="showRegionPicker = true">
+								<text v-if="addressForm.province && addressForm.city && addressForm.district"
+									class="region-text">
+									{{ addressForm.province }} {{ addressForm.city }} {{ addressForm.district }}
+								</text>
+								<text v-else class="input-placeholder">请选择省市区</text>
+								<text class="arrow-icon">›</text>
+							</view>
+							<!-- #endif -->
 						</view>

 						<view class="form-item">
@@ -254,6 +269,49 @@
 			</view>
 		</view>

+		<!-- 支付宝小程序地区选择弹窗 -->
+		<!-- #ifdef MP-ALIPAY -->
+		<view class="popup-mask" v-if="showRegionPicker" @click="closeRegionPicker">
+			<view class="popup-container" @click.stop>
+				<view class="address-popup">
+					<view class="popup-header">
+						<text class="popup-title">选择省市区</text>
+						<view class="close-btn" @click="closeRegionPicker">
+							<text class="close-icon">✕</text>
+						</view>
+					</view>
+
+					<view class="form-section">
+						<picker-view :value="regionIndexes" @change="onAliRegionChange"
+							indicator-style="height: 50px;">
+							<picker-view-column>
+								<view v-for="item in regionColumns[0]" :key="item.code">
+									{{ item.name }}
+								</view>
+							</picker-view-column>
+							<picker-view-column>
+								<view v-for="item in regionColumns[1]" :key="item.code">
+									{{ item.name }}
+								</view>
+							</picker-view-column>
+							<picker-view-column>
+								<view v-for="item in regionColumns[2]" :key="item.code">
+									{{ item.name }}
+								</view>
+							</picker-view-column>
+						</picker-view>
+					</view>
+
+					<view class="popup-footer">
+						<view class="confirm-btn" @click="confirmAliRegion">
+							<text>确定</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- #endif -->
+

 	</view>
 </template>
@@ -340,6 +398,7 @@
 	const showSkuPopup = ref(false)
 	const showAddressPopup = ref(false)
 	const showAddressDisplay = ref(false) // 地址展示弹窗
+	const showRegionPicker = ref(false) // 支付宝地区选择弹窗

 	// 计算是否已有地址
 	const hasAddress = computed(() => {
@@ -489,6 +548,45 @@
 		addressForm.value.districtCode = district.code
 	}

+	// 支付宝小程序 picker-view 列变化
+	const onAliRegionChange = (e) => {
+		const newVal = e.detail.value || []
+		const oldVal = regionIndexes.value || []
+
+		// 找出发生变化的列
+		let column = -1
+		for (let i = 0; i < newVal.length; i++) {
+			if (newVal[i] !== oldVal[i]) {
+				column = i
+				break
+			}
+		}
+
+		if (column !== -1) {
+			onRegionColumnChange({
+				detail: {
+					column,
+					value: newVal[column]
+				}
+			})
+		}
+	}
+
+	// 关闭支付宝地区弹窗
+	const closeRegionPicker = () => {
+		showRegionPicker.value = false
+	}
+
+	// 支付宝地区选择“确定”
+	const confirmAliRegion = () => {
+		onRegionChange({
+			detail: {
+				value: regionIndexes.value
+			}
+		})
+		closeRegionPicker()
+	}
+
 	// 获取用户收货地址
 	const fetchUserAddress = async () => {
 		try {
@@ -767,7 +865,7 @@
 		})
 	}

-	// 创建订单并支付
+	// 创建订单并支付（接入商品多支付平台方案：微信 / 支付宝，小程序端）
 	const createOrder = async () => {
 		try {
 			uni.showLoading({
@@ -782,13 +880,24 @@
 				savedAddress.value.receiverAddress :
 				`${addressForm.value.province}${addressForm.value.city}${addressForm.value.district}${addressForm.value.receiverAddress}`

+			// 根据当前运行环境确定支付平台
+			let paymentPlatform = 'WECHAT' // 默认微信
+			// #ifdef MP-ALIPAY
+			paymentPlatform = 'ALIPAY'
+			// #endif
+			// #ifdef H5
+			// H5 预留 Antom 支付，这里暂时仍按微信处理，如需接入可改为 ANTOM 并补充 paymentType / osType
+			paymentPlatform = 'WECHAT'
+			// #endif
+
 			const orderData = {
 				skuId: selectedSku.value.skuId,
-				quantity:quantity.value,
+				quantity: quantity.value,
 				receiverName: addressData.receiverName,
 				receiverPhone: addressData.receiverPhone,
 				receiverAddress: fullAddress, // 传递完整地址（省市区+详细地址）
-				remark: addressForm.value.remark || ''
+				remark: addressForm.value.remark || '',
+				paymentPlatform // WECHAT / ALIPAY /（预留）ANTOM
 			}

 			console.log('创建订单数据:', orderData)
@@ -800,11 +909,12 @@
 			if (res && res.code === 200 && res.data) {
 				uni.hideLoading()

-				// 调用微信支付
+				// 统一获取平台订单号（商品统一支付订单号）
+				const outOrderNo = res.data.OutOrderNo || res.data.outOrderNo
+
+				// ====================== 微信小程序支付 ======================
+				// #ifdef MP-WEIXIN
 				const payParams = res.data
-				// 保存订单ID，用于取消订单
-				const orderId = payParams.OutOrderNo || res.data.OutOrderNo
-				
 				uni.requestPayment({
 					timeStamp: payParams.timeStamp,
 					nonceStr: payParams.nonceStr,
@@ -831,26 +941,18 @@
 					},
 					fail: async (payErr) => {
 						console.error('支付失败:', payErr)
-						
+
 						// 判断是用户取消还是支付失败
 						if (payErr.errMsg && payErr.errMsg.includes('cancel')) {
-							// 用户取消支付，调用取消订单接口
+							// 用户取消支付，这里预留调用取消订单接口
 							try {
-								// uni.showLoading({
-								// 	title: '正在取消订单...',
-								// 	mask: true
-								// })
-								
-								// await cancelProductOrder(orderId)
-								
-								uni.hideLoading()
+								// await cancelProductOrder(outOrderNo)
 								uni.showToast({
 									title: '支付已取消',
 									icon: 'none'
 								})
 							} catch (cancelError) {
 								console.error('取消订单失败:', cancelError)
-								uni.hideLoading()
 								uni.showToast({
 									title: '支付已取消',
 									icon: 'none'
@@ -865,6 +967,62 @@
 						}
 					}
 				})
+				// #endif
+
+				// ====================== 支付宝小程序支付 ======================
+				// #ifdef MP-ALIPAY
+				console.log(res.data,'支付宝支付参数');
+				
+				const tradeNO = res.data.tradeNo
+				if (!tradeNO) {
+					uni.showToast({
+						title: '未获取到支付宝支付参数',
+						icon: 'none'
+					})
+					return
+				}
+
+				my.tradePay({
+					tradeNO,
+					success: (payRes) => {
+						console.log('支付宝支付结果:', payRes)
+						if (payRes.resultCode === '9000') {
+							uni.showToast({
+								title: '支付成功',
+								icon: 'success',
+								duration: 2000
+							})
+
+							resetForm()
+
+							setTimeout(() => {
+								uni.switchTab({
+									url: '/subPackages/business/device-orderList'
+								})
+							}, 2000)
+						} else {
+							uni.showToast({
+								title: '支付失败，请重试',
+								icon: 'none'
+							})
+						}
+					},
+					fail: () => {
+						uni.showToast({
+							title: '支付失败，请重试',
+							icon: 'none'
+						})
+					}
+				})
+				// #endif
+
+				// ====================== H5 环境（预留 Antom 支付） ======================
+				// #ifdef H5
+				uni.showToast({
+					title: '当前环境暂不支持购买，请使用微信或支付宝小程序',
+					icon: 'none'
+				})
+				// #endif
 			} else {
 				uni.hideLoading()
 				uni.showToast({