jd_logistics/jd_logistics-app/pages/recharge/success_pay.vue

<template>
  <view class="pay-success-container">
    <!-- 支付成功图标及状态 -->
    <view class="icon-circle">
      <image class="success-icon" src="/static/success_card.png"></image> 
    </view>
    <text class="title">{{title}}</text>
    <text class="desc gray">{{msg}}</text>
    <!-- 查看订单按钮 -->
    <button class="check-order-btn bg_color_primary" @click="goBack">返回</button>
  </view>
</template>

<script setup>
import { ref,computed } from 'vue';
import { payResult } from "@/api/order.js";
import { getUserInfo } from "@/utils/util.js";
import { onLoad } from "@dcloudio/uni-app";
const orderId = ref('');
const isSuccess = ref(1);//1成功 0失败；
const payMethod = ref('');//支付方式 0微信 1余额

const title = computed(()=>{
	return isSuccess.value==1 ? '支付成功' : '支付失败'
})
const msg = computed(()=>{
	return isSuccess.value==1 ? '非常感谢您购买我们的服务～' : '抱歉，支付失败，请稍后再试～'
})

onLoad((e)=>{
	orderId.value = e.orderId || 0;
	isSuccess.value = e.isSuccess;
	payMethod.value = e.payMethod;
  console.log("pay-success-onload",e);
  getUserInfo();
  if(payMethod.value == 0)payResultFn();
})
// 导航到订单详情页面
function goBack() {
  uni.navigateBack({
    delta: 1
  });
}
function payResultFn() {
  payResult({
    orderId: orderId.value,
  }).then(res => {
    console.log("payResult", res);
  });
}
</script>

<style scoped>
.pay-success-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 0 20rpx;
}
.icon-circle {
  width: 160rpx;
  height: 160rpx;
  border-radius: 50%;
  background-color: #ffd9d1;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 120rpx 0 40rpx;
}
.success-icon {
  width: 80rpx;
  height: 80rpx;
}
.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
  margin-bottom: 20rpx;
}
.desc {
  font-size: 28rpx;
  text-align: center;
  margin-bottom: 60rpx;
  line-height: 44rpx;
}
.check-order-btn {
  /* width: 320rpx; */
	width: 100%;
  height: 88rpx;
  line-height: 88rpx;
  color: #fff;
  font-size: 32rpx;
  border-radius: 44rpx;
}
</style>