WechatApp/pages/paymentSuccess/index.vue

<template>
  <view class="content">
    <view class="status-icon-wrap">
      <image v-if="!loading" :src="getFileUrl('img/icon/success.png')" mode="widthFix" class="status-img"></image>
      <view v-else class="loading-dot"></view>
    </view>
    <view class="status-title">{{ loading ? '支付中' : '支付成功' }}</view>
    <view class="status-desc">{{ loading ? '正在确认支付结果，请稍候...' : '感谢您的用餐' }}</view>
    <view v-if="!loading" class="success-btn hover-active" @click="handleBackHome">返回首页</view>
  </view>
</template>

<script setup>
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";
import { go } from "@/utils/utils.js";
import { getFileUrl } from "@/utils/file.js";
import { GetSearchOrderByOutTradeNoPath, PostOrderComplete } from "@/api/dining.js";

const orderId = ref('');
const payType = ref('wechatPayMininProgram');
const transactionId = ref('');
const loading = ref(true);

async function queryPayResult() {
  const tid = transactionId.value;
  const ptype = payType.value;
  const oid = orderId.value;
  if (!tid) {
    loading.value = false;
    return;
  }
  try {
    await GetSearchOrderByOutTradeNoPath({
      payType: ptype,
      transactionId: tid
    });
    if (oid) {
      try {
        await PostOrderComplete(oid);
      } catch (e) {
        console.warn('订单翻转接口调用失败', e);
      }
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
  }
}

onLoad((options) => {
  orderId.value = options?.id ?? '';
  payType.value = options?.payType ?? 'wechatPayMininProgram';
  transactionId.value = options?.transactionId ?? '';
  queryPayResult();
});

// 返回首页：清空页面栈，避免返回到支付/确认订单页
const handleBackHome = () => {
  go('/pages/index/index', 'reLaunch');
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #fff;
  width: 100%;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 120rpx;
}

.status-icon-wrap {
  width: 120rpx;
  height: 120rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.status-img {
  width: 120rpx;
  height: 120rpx;
}

.loading-dot {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid #e5e5e5;
  border-top-color: #07c160;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.status-title {
  font-weight: bold;
  font-size: 40rpx;
  color: #151515;
  margin-top: 40rpx;
}

.status-desc {
  font-size: 28rpx;
  color: #666666;
  margin-top: 24rpx;
}

.success-btn {
  margin-top: 80rpx;
  width: 400rpx;
  height: 88rpx;
  border: 2rpx solid #e5e5e5;
  border-radius: 44rpx;
  font-size: 30rpx;
  color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
</style>