zhywpt-sp/subpackage/orders/payment/payment.vue

<template>
	<image style="
      margin-top: 20rpx;
      width: 100%;
      height: 240rpx;
      background-color: #eeeeee;
    " :src="`${$imgUrl}applyCard/car-service.png`"></image>
	<view class="title"> 支付宝支付 </view>
	<view class="value">

	</view>
	<view class="action">
		<button type="default" class="button" @click="savaHandle()">
			确认支付
		</button>
	</view>
</template>

<script setup lang="ts">
	import { onLoad, onShow } from "@dcloudio/uni-app";
	import { reactive } from "vue";
	import { request } from "@/utils/network/request.js";

	import { stringToJson } from "@/utils/network/encryption";
	import { fileURL } from "@/datas/fileURL.js";
	import navBar from "@/components/nav-bar/nav-bar2.vue";
	import navBgCar from "./components/nav-bg-car4";
	import { setItem, StorageKeys } from "@/utils/storage";
	import { msg, confirm, getOrderStatusName } from "@/utils/utils";
	import {
		checkOrderStatus,
		orderPay,
		wechatAppID,
		wechatPayConfigId,
		wechatSecret,
		aliPayConfigId,
		obtainUserId,
	} from "@/utils/network/api";
	const imgURL = `${fileURL}image/`;

	const state = reactive({
		openid: "",
		orderId: "",
		id: "",
		clientFee: "",
		code: "",
		qdOrderNo: "", //渠道订单编号
		isPay: "",
	});
	onLoad((option : any) => {
		console.log("option11111", option)
		state.orderId = option.orderId;
		state.qdOrderNo = option.qdOrderNo;
		setItem('accessToken', option.token);
		setItem(StorageKeys.Token, option.token);
		setItem('openId', option.openId);
		state.isPay = option.isPay;
	});

	const savaHandle = () => {
		my.getAuthCode({
			scopes: 'auth_user',
			success: res => {
				const optionsUser = {
					type: 2,
					data: {
						payConfigId: aliPayConfigId,
						code: res.authCode
					},
					method: "POST",
					showLoading: true,
				};
				console.log('支付宝用户编号请求：', optionsUser)
				request(obtainUserId, optionsUser).then((res) => {
					console.log('支付宝用户编号返回：', res)
					const data = stringToJson(res.bizContent);
					const optionsali = {
						type: 2,
						data: {
							openid: data.openId,
							orderId: state.orderId,
							payConfigId: aliPayConfigId,

						},
						method: "POST",
						showLoading: true,
					};
					console.log('支付下单请求：', optionsali)
					request(orderPay, optionsali).then((res) => {
						console.log('支付下单返回：', res)
						const data = stringToJson(res.bizContent);
						my.tradePay({
							// 调用统一收单交易创建接口（alipay.trade.create），获得返回字段支付宝交易号 trade_no
							tradeNO: data.prepayId,
							success: res => {
								console.log("支付成功", res);
								const optionsaliquery = {
									type: 2,
									data: {
										orderId: state.orderId,

									},
									method: "POST",
									showLoading: true,
								};
								request(checkOrderStatus, optionsaliquery).then((res) => {
									console.log('支付结果查询：', res)
									if (state.isPay == "1") {
										my.navigateToMiniProgram({
											appId: '2021004102619032', // 16 位
											path: `/subpackage/after-sale/empty?qdOrderNo=${state.qdOrderNo}&type=3&orderId=${state.orderId}&isPay=2`,
											query: {
												a: 'foo',
												b: 'bar',
											},
											extraData: {
												x: {
													y: 'z',
												},
											},
											success: function (res) {
												console.log(res);
											},
											fail: function (err) {
												console.log(err);
											}
										});
									}
								})
							},
							fail: res => {
								console.log("支付失败", res);
							},
						});

					});
				});
			},
			fail: err => {
				console.log('my.getAuthCode 调用失败', err)
			}
		});


	}
</script>

<style lang="scss" scoped>
	.action {
		margin-top: 40rpx;
		padding-left: 20rpx;
		padding-right: 20rpx;
		padding-bottom: 30rpx;

		.button {
			height: 80rpx;
			background: linear-gradient(-90deg, #43a1e0 0%, #13e7c1 100%);
			border-radius: 40rpx;
			font-size: 32rpx;
			font-weight: 400;
			color: #ffffff;
			line-height: 80rpx;
		}
	}

	.title {
		text-align: center;
		margin-top: 15rpx;
		font-size: 36rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #333333;
		line-height: 36rpx;
	}

	.value {
		padding: 0rpx 60rpx;
	}

	.content_1 {
		margin-top: 60rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 58rpx;
	}

	.content_2 {
		margin-top: 50rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #666666;
		line-height: 58rpx;
	}

	.content_3 {
		margin-top: 50rpx;
		font-size: 30rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #ff0000;
		line-height: 58rpx;
	}
</style>