cz-app/src/pages/project-center/payment-success/index.vue

<script setup lang="ts">
import { computed, ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { getPaymentPlan } from '@/constants/project-detail'
import successIcon from '@/static/icons/icon-register-success.png'
import type { PaymentPlanItem } from '@/types/project-detail'

type PaymentMethod = 'wechat' | 'alipay'

const plan = ref<PaymentPlanItem | null>(null)
const projectId = ref('1')
const planId = ref('2')
const paymentMethod = ref<PaymentMethod>('wechat')
const paymentTime = ref('2026-01-21 15:00:00')
const transactionNo = ref('T20260819153035678K2M001')

const paymentMethodLabel = computed(() =>
  paymentMethod.value === 'wechat' ? '微信支付' : '支付宝',
)

onLoad((options) => {
  projectId.value = options?.projectId ? decodeURIComponent(String(options.projectId)) : '1'
  planId.value = options?.planId ? decodeURIComponent(String(options.planId)) : '2'
  const method = options?.method ? decodeURIComponent(String(options.method)) : 'wechat'
  paymentMethod.value = method === 'alipay' ? 'alipay' : 'wechat'
  plan.value = getPaymentPlan(projectId.value, planId.value)

  if (!plan.value) {
    uni.showToast({ title: '订单不存在', icon: 'none' })
    setTimeout(() => {
      uni.redirectTo({ url: '/pages/project-center/index' })
    }, 1500)
  }
})

function formatAmount(amount: number) {
  return `¥ ${amount}`
}

function handleBackToList() {
  uni.redirectTo({ url: '/pages/project-center/bill-list/index' })
}

function handleViewDetail() {
  uni.redirectTo({
    url: `/pages/project-center/bill-detail/index?projectId=${encodeURIComponent(projectId.value)}&planId=${encodeURIComponent(planId.value)}&method=${encodeURIComponent(paymentMethod.value)}`,
  })
}
</script>

<template>
  <view
    v-if="plan"
    class="payment-success"
  >
    <scroll-view
      class="payment-success__scroll"
      scroll-y
      :show-scrollbar="false"
    >
      <view class="payment-success__content">
        <view class="payment-success__hero">
          <image
            class="payment-success__icon"
            :src="successIcon"
            mode="aspectFit"
          />
          <text class="payment-success__title">
            支付成功
          </text>
          <text class="payment-success__subtitle">
            共1个订单，付款金额：{{ formatAmount(plan.amount) }}
          </text>
        </view>

        <view class="payment-success__card">
          <text class="payment-success__card-title">
            支付信息
          </text>
          <view class="payment-success__info-row">
            <text class="payment-success__info-label">
              支付方式
            </text>
            <text class="payment-success__info-value">
              {{ paymentMethodLabel }}
            </text>
          </view>
          <view class="payment-success__info-row">
            <text class="payment-success__info-label">
              支付时间
            </text>
            <text class="payment-success__info-value">
              {{ paymentTime }}
            </text>
          </view>
          <view class="payment-success__info-row">
            <text class="payment-success__info-label">
              交易流水号
            </text>
            <text class="payment-success__info-value">
              {{ transactionNo }}
            </text>
          </view>
        </view>

        <view class="payment-success__card">
          <text class="payment-success__card-title">
            已支付订单
          </text>
          <view class="payment-success__order-row">
            <text class="payment-success__order-title">
              {{ plan.title }} {{ plan.ratio }}
            </text>
            <text class="payment-success__order-amount">
              {{ formatAmount(plan.amount) }}
            </text>
          </view>
          <text class="payment-success__order-meta">
            账单号：{{ plan.billNo }}
          </text>
          <text class="payment-success__order-meta">
            关联项目：{{ plan.relatedProject }}
          </text>
        </view>
      </view>
    </scroll-view>

    <view class="payment-success__footer">
      <view
        class="payment-success__btn"
        @tap="handleBackToList"
      >
        返回订单列表
      </view>
      <view
        class="payment-success__btn"
        @tap="handleViewDetail"
      >
        查看订单详情
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
@import './index.scss';
</style>