feat:部分项目中心

src/pages/project-center/bill-detail/index.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { computed, ref } from 'vue'
+import { onLoad } from '@dcloudio/uni-app'
+import { getBill } from '@/constants/bill-list'
+import successIcon from '@/static/icons/icon-register-success.png'
+import type { BillItem } from '@/types/bill'
+import { navigateBackWithFallback } from '@/utils/navigate-back'
+
+type PaymentMethod = 'wechat' | 'alipay'
+
+const bill = ref<BillItem | null>(null)
+const paymentMethod = ref<PaymentMethod>('wechat')
+
+const paymentMethodLabel = computed(() =>
+  paymentMethod.value === 'wechat' ? '微信支付' : '支付宝',
+)
+
+const paymentTime = computed(() => bill.value?.paidAt || '2026-01-21 15:00:00')
+
+onLoad((options) => {
+  const projectId = options?.projectId ? decodeURIComponent(String(options.projectId)) : '1'
+  const planId = options?.planId ? decodeURIComponent(String(options.planId)) : '1'
+  const method = options?.method ? decodeURIComponent(String(options.method)) : 'wechat'
+  paymentMethod.value = method === 'alipay' ? 'alipay' : 'wechat'
+  bill.value = getBill(projectId, planId)
+
+  if (!bill.value) {
+    uni.showToast({ title: '账单不存在', icon: 'none' })
+    setTimeout(() => uni.navigateBack(), 1500)
+  }
+})
+
+function handleBack() {
+  navigateBackWithFallback('/pages/project-center/bill-list/index')
+}
+
+function formatAmount(amount: number) {
+  return `¥ ${amount}`
+}
+</script>
+
+<template>
+  <view
+    v-if="bill"
+    class="bill-detail"
+  >
+    <view class="bill-detail__navbar">
+      <view
+        class="bill-detail__back"
+        @tap="handleBack"
+      >
+        <image
+          class="bill-detail__back-icon"
+          src="/static/icons/icon-back.svg"
+          mode="aspectFit"
+        />
+      </view>
+      <text class="bill-detail__navbar-title">
+        账单明细
+      </text>
+      <view class="bill-detail__navbar-placeholder" />
+    </view>
+
+    <scroll-view
+      class="bill-detail__scroll"
+      scroll-y
+      :show-scrollbar="false"
+    >
+      <view class="bill-detail__content">
+        <view class="bill-detail__hero">
+          <image
+            class="bill-detail__icon"
+            :src="successIcon"
+            mode="aspectFit"
+          />
+          <text class="bill-detail__status">
+            已支付
+          </text>
+          <text class="bill-detail__amount">
+            付款金额：{{ formatAmount(bill.amount) }}
+          </text>
+        </view>
+
+        <view class="bill-detail__card">
+          <text class="bill-detail__card-title">
+            支付信息
+          </text>
+          <view class="bill-detail__info-row">
+            <text class="bill-detail__info-label">
+              支付方式
+            </text>
+            <text class="bill-detail__info-value">
+              {{ paymentMethodLabel }}
+            </text>
+          </view>
+          <view class="bill-detail__info-row">
+            <text class="bill-detail__info-label">
+              支付时间
+            </text>
+            <text class="bill-detail__info-value">
+              {{ paymentTime }}
+            </text>
+          </view>
+          <view class="bill-detail__info-row">
+            <text class="bill-detail__info-label">
+              交易流水号
+            </text>
+            <text class="bill-detail__info-value">
+              {{ bill.transactionNo }}
+            </text>
+          </view>
+        </view>
+
+        <view class="bill-detail__card">
+          <text class="bill-detail__card-title">
+            已支付订单
+          </text>
+          <view class="bill-detail__order-row">
+            <text class="bill-detail__order-title">
+              {{ bill.title }} {{ bill.ratio }}
+            </text>
+            <text class="bill-detail__order-amount">
+              {{ formatAmount(bill.amount) }}
+            </text>
+          </view>
+          <text class="bill-detail__order-meta">
+            账单号：{{ bill.billNo }}
+          </text>
+          <text class="bill-detail__order-meta">
+            关联项目：{{ bill.relatedProject }}
+          </text>
+        </view>
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<style scoped lang="scss">
+@import './index.scss';
+</style>