RentWeAppFront/pages-biz/bill/billDetail.vue

<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>