gubersail-shop-app/pages/settlement/index.vue

<template>
	<view class="">
		<view
			style="height: 155rpx;padding:0 30rpx;background: #FFFFFF;display: flex;align-items: center;justify-content: space-between;">
			<view style="display: flex;align-items: center;">
				<image src="/static/images/shoppingCart/1061@2x.png"
					style="width: 25rpx;height: 30rpx;margin-right: 2rpx;" mode="scaleToFill">
				</image>
				<view style="margin-left: 10rpx;">
					<view style="font-size: 32rpx;">
						<text>市南区旺角大厦12楼</text>
					</view>
					<view
						style="font-size: 28rpx;color: #3B3B3B;font-weight: 400;display: flex;align-items: center;margin-top: 10rpx;">
						<text>李某某</text>
						<text style="margin-left: 35rpx;">131****0000</text>
					</view>
				</view>
			</view>
			<uni-icons type="forward" size="14" color="#c5c5c5"></uni-icons>
		</view>
		<uni-card style="margin: 30rpx 0;border-radius: 20rpx;">
			<view v-for="(item,index) in dataList" :key="index">
				<view style="display: flex;margin: 20rpx 0;">
					<view class="">
						<image :src="item.url"
							style="width: 140rpx;height: 140rpx;background-color: #e9e9eb;border-radius: 8rpx;"
							mode="scaleToFill">
						</image>
					</view>

					<view
						style="display: flex;flex-direction: column;justify-content: space-between;width: 100%;padding-left: 20rpx;">
						<text style="font-size: 30rpx;color: #000;">{{item.goodsName}}</text>
						<view style="display: flex;justify-content: space-between;">
							<view class="">
								<text style="color:#e43d33;font-size: 20rpx;">￥</text><text
									style="color:#e43d33;font-size: 30rpx;font-weight: 600;">{{item.price}}</text>
							</view>
							<text style="font-size: 30rpx;font-weight: 600;">x{{item.number}}</text>
						</view>
					</view>
				</view>
				<view v-if="dataList[index+1]" style="background-color:#e5e5e5;height:1rpx;"></view>
			</view>
		</uni-card>
		<uni-card style="margin: 30rpx 0;border-radius: 20rpx;">
			<view style="display: flex;justify-content: space-between;">
				<view style="color: #000;font-size: 28rpx;">
					商品金额
				</view>
				<view style="color: #000;font-size: 28rpx;margin-right: 28rpx;font-weight: 600;">
					￥300.00
				</view>
			</view>
			<view style="display: flex;justify-content: space-between;margin-top: 30rpx;">

				<view style="display: flex;align-items: center;">
					<image style="height:40rpx;width: 40rpx;" src="/static/images/pay/coupon.png" mode="scaleToFill">
					</image>
					<view style="color: #000;font-size: 28rpx;">
						优惠券
					</view>
				</view>
				<view style="display: flex;align-items: center;">
					<view style="color: #e43d33;font-size: 28rpx;font-weight: 600;">
						￥30.00
					</view>
					<uni-icons type="forward" size="14" color="#c5c5c5"></uni-icons>
				</view>

			</view>
			<view style="background-color:#e5e5e5;height:1rpx;margin-top: 30rpx;"></view>
			<view style="margin-top: 30rpx;display: flex;justify-content: flex-end;">
				<text style="color: #000;font-size: 26rpx;">合计：</text><text
					style="color: #e43d33;font-size: 34rpx;font-weight: 600;margin-right: 28rpx;">￥270.00</text>
			</view>
		</uni-card>
		<uni-card style="margin: 30rpx 0;border-radius: 20rpx;">
			<view style="display: flex;justify-content: space-between;margin:20rpx 0;">
				<view style="display: flex;align-items: center;">
					<image style="height: 40rpx;width: 40rpx;" src="/static/images/pay/pay.png" mode="scaleToFill">
					</image>
					<text style="color: #3a3a3a;margin-left: 20rpx;">
						在线支付
					</text>
				</view>
				<view style="display: flex;align-items: center;width: 40rpx;">
					<uni-data-checkbox v-model="payType" :localdata="[{'value':'wechat'}]"></uni-data-checkbox>
				</view>
			</view>
		</uni-card>
		<view class="dynamic-bottom">
		</view>
		<view style="position: fixed;bottom: 30rpx;width: 100%;">
			<view style="margin:0 30rpx;">
				<debounce-button bgColor='#03803B' @click="goPay">确认支付</debounce-button>
			</view>
		</view>

	</view>
</template>

<script>
	import {
		v4 as uuidv4
	} from 'uuid';
	import {
		getPhoneVerifyCode
	} from '@/api/user.js'
	import PaymentUtils from '@/utils/payment.js'
	export default {
		data() {
			return {
				orderData: {
					orderNo: 'DD20241104134733',
					productName: '高级会员服务',
					amount: 199.00,
					createTime: '2024-11-04 13:47:33'
				},
				isProcessing: false,
				payType: 'wechat',
				dataList: [{
						url: '/static/images/lt.png',
						goodsName: '轮胎1',
						number: 1,
						price: 100,
					},
					{
						url: '/static/images/lt.png',
						goodsName: '轮胎2',
						number: 1,
						price: 100,
					},
					{
						url: '/static/images/lt.png',
						goodsName: '轮胎2',
						number: 1,
						price: 100,
					}
				]
			};
		},
		onLoad() {},
		methods: {
			// 根据支付方式获取AppID
			getAppIdByMethod(method) {
				const appIds = {
					wechat: 'gh_xxxxxxxxxxxx', // 通联小程序微信AppID
					alipay: '2021002186688888' // 通联小程序支付宝AppID
				}

				return appIds[method] || ''
			},
			async goPay() {
				if (!this.payType) {
					uni.showToast({
						title: '请选择支付方式',
						icon: 'none'
					})
					return
				}
				this.isProcessing = true
				try {
					// 1. 检查应用是否安装
					const appInstalled = await PaymentUtils.checkAppInstalled(this.payType)
					if (!appInstalled) {
						uni.showModal({
							title: '提示',
							content: '未检测到应用，请先安装',
							showCancel: false
						})
						return
					}

					// 2. 构建跳转URL
					const jumpConfig = {
						appId: this.getAppIdByMethod('wechat'),
						path: 'pages/payment/index',
						extraData: {
							orderNo: this.orderData.orderNo,
							amount: this.orderData.amount
						}
					}

					let urlScheme
					if (this.payType == 'wechat') {
						urlScheme = PaymentUtils.buildWechatURLScheme(jumpConfig)
					}
					// 3. 执行跳转
					await PaymentUtils.launchApp(urlScheme)

					// 4. 启动支付状态监控
					// this.startPaymentMonitoring()
				} catch (error) {
					console.error('支付流程异常', error)
					uni.showToast({
						title: '支付启动失败',
						icon: 'none'
					})
				} finally {
					this.isProcessing = false
				}


			}
		},
	}
</script>
<style lang="scss" scoped>
	.dynamic-bottom {
		padding-bottom: calc(env(safe-area-inset-bottom) + 140rpx);
	}
</style>