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>
	<!-- <button type="default" class="button" @click="addInterestsList()">
	  加购权益
	</button> -->
  </view>
</template>

<script setup lang="ts">
import { onLoad, onShow } from "@dcloudio/uni-app";
import { reactive } from "vue";
import { etcQYAction } from "@/utils/network/api.js";
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:""
});
onLoad((option: any) => {
  state.orderId = option.orderId;
  setItem('accessToken', option.token);
  setItem(StorageKeys.Token, option.token);
  setItem('openId', option.openId);
});

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)
								})
							
						},
						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>