feat:项目中心和个人中心

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

@@ -12,7 +12,7 @@
   align-items: center;
   justify-content: space-between;
   flex-shrink: 0;
-  padding: calc(var(--status-bar-height, 44px) + 12rpx) 24rpx 20rpx;
+  padding: calc(var(--status-bar-height, 44px) + 60rpx) 24rpx 20rpx;
   background: $color-bg-page;
 }
 
@@ -46,14 +46,21 @@
 }
 
 .bill-detail__content {
-  padding: 24rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));
+  padding: 20rpx 24rpx calc(32rpx + env(safe-area-inset-bottom));
 }
 
-.bill-detail__hero {
+.bill-detail--with-footer .bill-detail__content {
+  padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
+}
+
+.bill-detail__hero-card {
   display: flex;
   flex-direction: column;
   align-items: center;
-  padding: 24rpx 0 40rpx;
+  padding: 40rpx 24rpx 36rpx;
+  margin-bottom: 20rpx;
+  background: $color-bg-page;
+  border-radius: 20rpx;
 }
 
 .bill-detail__icon {
@@ -68,15 +75,26 @@
   color: $color-text-primary;
 }
 
-.bill-detail__amount {
-  margin-top: 16rpx;
+.bill-detail__amount-row {
+  display: flex;
+  align-items: baseline;
+  margin-top: 20rpx;
+}
+
+.bill-detail__amount-label {
   font-size: 26rpx;
   color: $color-text-secondary;
 }
 
+.bill-detail__amount-value {
+  font-size: 32rpx;
+  font-weight: 700;
+  color: $color-text-primary;
+}
+
 .bill-detail__card {
   padding: 28rpx 24rpx;
-  margin-bottom: 24rpx;
+  margin-bottom: 20rpx;
   background: $color-bg-page;
   border-radius: 20rpx;
 
@@ -146,3 +164,22 @@
   font-size: 22rpx;
   color: $color-text-secondary;
 }
+
+.bill-detail__footer {
+  flex-shrink: 0;
+  padding: 16rpx 24rpx calc(16rpx + env(safe-area-inset-bottom));
+  background: $color-bg-page;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.bill-detail__pay-btn {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 88rpx;
+  font-size: 30rpx;
+  font-weight: 600;
+  color: #ffffff;
+  background: $color-primary;
+  border-radius: 12rpx;
+}

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>
 

src/pages/project-center/bill-list/index.scss

@@ -132,16 +132,19 @@
   &--paid {
     color: #ffffff;
     background: $color-primary;
+    border-radius: 40rpx;
   }
 
   &--pending {
     color: #ffffff;
     background: #ff9a3d;
+    border-radius: 40rpx;
   }
 
   &--not_due {
-    color: $color-primary;
-    background: $color-primary-light;
+    color: #ffffff;
+    background: #25eb9f;
+    border-radius: 40rpx;
   }
 }
 

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

@@ -35,16 +35,12 @@ function formatAmount(amount: number) {
 }
 
 function handleBillTap(item: BillItem) {
-  if (item.status === 'pending') {
+  if (item.status === 'pending' || item.status === 'paid' || item.status === 'not_due') {
+    const methodQuery = item.status === 'paid'
+      ? `&method=${encodeURIComponent(item.paidMethod || 'wechat')}`
+      : ''
     uni.navigateTo({
-      url: `/pages/project-center/payment/index?projectId=${encodeURIComponent(item.projectId)}&planId=${encodeURIComponent(item.id)}`,
-    })
-    return
-  }
-
-  if (item.status === 'paid') {
-    uni.navigateTo({
-      url: `/pages/project-center/bill-detail/index?projectId=${encodeURIComponent(item.projectId)}&planId=${encodeURIComponent(item.id)}&method=${encodeURIComponent(item.paidMethod || 'wechat')}`,
+      url: `/pages/project-center/bill-detail/index?projectId=${encodeURIComponent(item.projectId)}&planId=${encodeURIComponent(item.id)}${methodQuery}`,
     })
   }
 }