feat:项目中心和个人中心

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

@@ -2,6 +2,9 @@
 import { computed, ref } from 'vue'
 import { onLoad } from '@dcloudio/uni-app'
 import { getBill } from '@/constants/bill-list'
+import { PAYMENT_PLAN_STATUS_LABEL } from '@/constants/project-detail'
+import billPendingIcon from '@/static/icon/bill-pending.png'
+import notDueIcon from '@/static/icon/not-due.png'
 import successIcon from '@/static/icons/icon-register-success.png'
 import type { BillItem } from '@/types/bill'
 import { navigateBackWithFallback } from '@/utils/navigate-back'
@@ -11,11 +14,57 @@ type PaymentMethod = 'wechat' | 'alipay'
 const bill = ref<BillItem | null>(null)
 const paymentMethod = ref<PaymentMethod>('wechat')
 
-const paymentMethodLabel = computed(() =>
-  paymentMethod.value === 'wechat' ? '微信支付' : '支付宝',
+const statusLabel = computed(() => {
+  if (!bill.value)
+    return ''
+  return PAYMENT_PLAN_STATUS_LABEL[bill.value.status] || ''
+})
+
+const heroIcon = computed(() => {
+  if (bill.value?.status === 'paid')
+    return successIcon
+  if (bill.value?.status === 'not_due')
+    return notDueIcon
+  if (bill.value?.status === 'pending')
+    return billPendingIcon
+  return successIcon
+})
+
+const paymentMethodLabel = computed(() => {
+  if (!bill.value)
+    return ''
+  if (bill.value.status === 'paid')
+    return paymentMethod.value === 'wechat' ? '微信支付' : '支付宝'
+  if (bill.value.status === 'pending' || bill.value.status === 'not_due')
+    return '微信支付'
+  return '--'
+})
+
+const paymentTime = computed(() => {
+  if (!bill.value)
+    return ''
+  if (bill.value.paidAt)
+    return bill.value.paidAt
+  if (bill.value.status === 'pending' || bill.value.status === 'not_due')
+    return '2026-01-21 15:00:00'
+  return '--'
+})
+
+const orderCardTitle = computed(() => {
+  if (bill.value?.status === 'paid' || bill.value?.status === 'pending')
+    return '已支付订单'
+  if (bill.value?.status === 'not_due')
+    return '账单订单'
+  return '账单订单'
+})
+
+const showPaymentInfo = computed(() =>
+  bill.value?.status === 'paid'
+  || bill.value?.status === 'not_due'
+  || bill.value?.status === 'pending',
 )
 
-const paymentTime = computed(() => bill.value?.paidAt || '2026-01-21 15:00:00')
+const showPayFooter = computed(() => bill.value?.status === 'pending')
 
 onLoad((options) => {
   const projectId = options?.projectId ? decodeURIComponent(String(options.projectId)) : '1'
@@ -37,12 +86,22 @@ function handleBack() {
 function formatAmount(amount: number) {
   return `¥ ${amount}`
 }
+
+function handlePayNow() {
+  if (!bill.value)
+    return
+
+  uni.navigateTo({
+    url: `/pages/project-center/payment/index?projectId=${encodeURIComponent(bill.value.projectId)}&planId=${encodeURIComponent(bill.value.id)}`,
+  })
+}
 </script>
 
 <template>
   <view
     v-if="bill"
     class="bill-detail"
+    :class="{ 'bill-detail--with-footer': showPayFooter }"
   >
     <view class="bill-detail__navbar">
       <view
@@ -67,21 +126,31 @@ function formatAmount(amount: number) {
       :show-scrollbar="false"
     >
       <view class="bill-detail__content">
-        <view class="bill-detail__hero">
+        <view class="bill-detail__hero-card">
           <image
             class="bill-detail__icon"
-            :src="successIcon"
+            :src="heroIcon"
             mode="aspectFit"
           />
+
           <text class="bill-detail__status">
-            已支付
-          </text>
-          <text class="bill-detail__amount">
-            付款金额：{{ formatAmount(bill.amount) }}
+            {{ statusLabel }}
           </text>
+
+          <view class="bill-detail__amount-row">
+            <text class="bill-detail__amount-label">
+              付款金额：
+            </text>
+            <text class="bill-detail__amount-value">
+              {{ formatAmount(bill.amount) }}
+            </text>
+          </view>
         </view>
 
-        <view class="bill-detail__card">
+        <view
+          v-if="showPaymentInfo"
+          class="bill-detail__card"
+        >
           <text class="bill-detail__card-title">
             支付信息
           </text>
@@ -113,7 +182,7 @@ function formatAmount(amount: number) {
 
         <view class="bill-detail__card">
           <text class="bill-detail__card-title">
-            已支付订单
+            {{ orderCardTitle }}
           </text>
           <view class="bill-detail__order-row">
             <text class="bill-detail__order-title">
@@ -132,6 +201,18 @@ function formatAmount(amount: number) {
         </view>
       </view>
     </scroll-view>
+
+    <view
+      v-if="showPayFooter"
+      class="bill-detail__footer"
+    >
+      <view
+        class="bill-detail__pay-btn"
+        @tap="handlePayNow"
+      >
+        立即支付
+      </view>
+    </view>
   </view>
 </template>