完成大体功能和样式

pages-biz/bill/billDetail.vue

@@ -0,0 +1,136 @@
+<template>
+  <view class="bill-detail-page">
+    <!-- 顶部自定义导航栏 -->
+    <custom-navbar title="账单详情" />
+
+    <scroll-view scroll-y class="scroll-content">
+      <!-- 基本信息 -->
+      <view class="section">
+        <view class="section-title">账单信息</view>
+
+        <view class="info-item">
+          <text class="label">费用名称：</text>
+          <text class="value">{{ bill.feeName }}</text>
+        </view>
+
+        <view class="info-item">
+          <text class="label">支付时间：</text>
+          <text class="value">{{ bill.payTime || '未支付' }}</text>
+        </view>
+
+        <view class="info-item">
+          <text class="label">支付状态：</text>
+          <text class="value">{{ bill.status }}</text>
+        </view>
+
+        <view class="info-item">
+          <text class="label">金额：</text>
+          <text class="value">{{ formatMoney(bill.amount) }}</text>
+        </view>
+
+        <view class="info-item" v-if="bill.contractId">
+          <text class="label">关联合同：</text>
+          <text class="value" @click="goContractDetail(bill.contractId)" style="color:#007aff;">点击查看</text>
+        </view>
+
+        <view class="info-item" v-if="bill.payMethod">
+          <text class="label">支付方式：</text>
+          <text class="value">{{ bill.payMethod }}</text>
+        </view>
+
+      </view>
+    </scroll-view>
+  </view>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      bill: {},
+    };
+  },
+  onLoad(options) {
+    const { id } = options; // 列表页传过来的账单ID
+    this.loadBillDetail(id);
+  },
+  onShow() {
+  	this.$checkToken(this.$getToken())
+  },
+  methods: {
+    loadBillDetail(id) {
+      // 模拟请求接口
+      this.bill = {
+        id,
+        feeName: '第一期租金（2024.12.01-2024.12.31）',
+        payTime: '2024-12-05',
+        status: '已支付',
+        amount: 3000,
+        contractId: 'c123',
+        payMethod: '线上支付',
+      };
+    },
+    formatMoney(val) {
+      if (!val && val !== 0) return '—';
+      return '¥' + Number(val).toFixed(2);
+    },
+    goDetail(contractId) {
+      uni.navigateTo({
+        url: `/pages-biz/contract/contractDetail?id=${contractId}`,
+      });
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.bill-detail-page {
+  background: #f7f8fa;
+  min-height: 100vh;
+  padding-top: 175rpx; // 自定义导航栏高度
+}
+
+.scroll-content {
+  padding: 20rpx;
+}
+
+.section {
+  background: #fff;
+  border-radius: 12rpx;
+  padding: 20rpx;
+  margin-bottom: 20rpx;
+
+  .section-title {
+    font-size: 28rpx;
+    font-weight: bold;
+    margin-bottom: 20rpx;
+    color: #333;
+  }
+
+.info-item {
+  display: flex;
+  justify-content: space-between;
+  padding: 16rpx 0;
+  border-bottom: 1rpx solid #f0f0f0;
+
+  &:last-child {
+    border-bottom: none;
+  }
+
+  .label {
+    font-size: 26rpx;
+    color: #666;
+  }
+
+  .value {
+    font-size: 26rpx;
+    color: #333;
+    margin-right: 16rpx; /* 增加右侧安全间距 */
+    max-width: 70%;      /* 防止过长文字挤到箭头或屏幕边缘 */
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+}
+}
+</style>