caremate/train-frontend/pages/pay/result.vue

<template>
  <view class="result-page">
    <view class="result-card">
      <view class="result-icon" :class="status === 'success' ? 'icon-success' : 'icon-fail'">
        <text>{{ status === 'success' ? '✓' : '✕' }}</text>
      </view>
      <text class="result-title">{{ status === 'success' ? '支付成功' : '支付未完成' }}</text>
      <text class="result-amount" v-if="amountText">支付金额：¥{{ amountText }}</text>
      <text class="result-order" v-if="orderNo">订单号：{{ orderNo }}</text>

      <button class="primary-btn" v-if="status === 'success'" @click="goList">查看我的报名</button>
      <button class="primary-btn" v-else @click="goPay">重新支付</button>
      <button class="ghost-btn" @click="goHome">返回首页</button>
    </view>
  </view>
</template>

<script>
import { fenToYuan } from '@/utils/format.js'
import { guardPage } from '@/utils/guard.js'

export default {
  data() {
    return {
      status: 'success',
      amount: 0,
      amountText: '',
      orderNo: ''
    }
  },
  onLoad(options) {
    if (!guardPage()) return
    this.status = options && options.status ? options.status : 'success'
    this.amount = options && options.amount ? Number(options.amount) : 0
    this.amountText = fenToYuan(this.amount)
    this.orderNo = options && options.orderNo ? options.orderNo : ''
  },
  methods: {
    goList() {
      uni.redirectTo({ url: '/pages/enroll/list' })
    },
    goPay() {
      uni.navigateBack({ delta: 1 })
    },
    goHome() {
      uni.switchTab({ url: '/pages/index/index' })
    }
  }
}
</script>

<style scoped>
.result-page { min-height: 100vh; background: #F5F5F5; padding: 32rpx; }
.result-card { background: #FFF; border-radius: 16rpx; padding: 64rpx 32rpx; display: flex; flex-direction: column; align-items: center; }
.result-icon { width: 120rpx; height: 120rpx; border-radius: 50%; color: #FFF; font-size: 72rpx; display: flex; align-items: center; justify-content: center; margin-bottom: 32rpx; }
.icon-success { background: #22C55E; }
.icon-fail { background: #EF4444; }
.result-title { font-size: 36rpx; font-weight: 700; color: #2A2326; margin-bottom: 16rpx; }
.result-amount { font-size: 28rpx; color: #475569; margin-bottom: 8rpx; }
.result-order { font-size: 24rpx; color: #94877F; margin-bottom: 56rpx; }
.primary-btn { width: 480rpx; height: 84rpx; line-height: 84rpx; background: #FC7A57; color: #FFF; font-size: 28rpx; font-weight: 600; border-radius: 42rpx; border: none; margin-bottom: 24rpx; }
.primary-btn:active { opacity: 0.85; }
.ghost-btn { width: 480rpx; height: 84rpx; line-height: 84rpx; background: #FFF; color: #5A4F4B; font-size: 28rpx; border-radius: 42rpx; border: 2rpx solid #E2E8F0; }
.ghost-btn:active { opacity: 0.7; }
</style>