RentWeAppFront/pages/detail/contractDetail.vue

<template>
  <view class="contract-detail-page">
    <customNavbar title="我的合同"></customNavbar>
    <!-- 顶部信息 -->
    <view class="header">
      <image class="cover" :src="contract.coverUrl" mode="aspectFill" />
      <view class="info">
        <text class="name">{{ contract.assetName }}</text>
        <text class="room">{{ contract.assetRoom || '—' }}</text>
      </view>
    </view>

    <!-- 合同基本信息 -->
    <view class="section">
      <view class="section-title">合同基本信息</view>
      <view class="info-item" v-for="(item, index) in baseInfo" :key="index" @click="handleClick(item)">
        <text class="label">{{ item.label }}</text>
        <view class="value-box">
          <text class="value">{{ item.value }}</text>
          <u-icon v-if="item.hasArrow" name="arrow-right" size="30" color="#ccc" />
        </view>
      </view>
    </view>

    <!-- 费用信息 -->
    <view class="section">
      <view class="section-title">费用信息</view>
      <view class="info-item" v-for="(item, index) in feeInfo" :key="index" @click="handleClick(item)">
        <text class="label">{{ item.label }}</text>
        <view class="value-box">
          <text class="value">{{ item.value }}</text>
          <u-icon v-if="item.hasArrow" name="arrow-right" size="30" color="#ccc" />
        </view>
      </view>
    </view>

    <!-- 签约主体信息 -->
    <view class="section">
      <view class="section-title">签约主体信息</view>
      <view class="info-item" v-for="(item, index) in signerInfo" :key="index">
        <text class="label">{{ item.label }}</text>
        <text class="value">{{ item.value }}</text>
      </view>
    </view>

    <!-- 底部操作栏 -->
    <view v-if="contract.status === '待签署'" class="bottom-bar">
      <u-button class="sign-btn" @click="goSign">
        去签署
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contract: {
        id: 'c123',
        coverUrl: '/static/img/index/swiper/swiper3.jpg',
        assetName: '深圳南山中心写字楼租赁合同',
        assetRoom: 'B栋1203',
        status: '待签署', // 可选：待签署 / 已签署 / 已过期
        signStatus: '未签署',
        startDate: '2025-01-01',
        endDate: '2026-01-01',
        payMethod: '按月支付',
        payTime: '每月5日',
        electronicId: 'e1001',
        deposit: '￥5000',
        rent: '￥8500/月',
        electricity: '￥1.2/度',
        water: '￥5/吨',
        property: '￥300/月',
        userId: 'u777',
        signer: '张三',
        idCard: '440301199001011234',
        phone: '13800138000',
        idValidDate: '2035-01-01',
      },
    };
  },
  computed: {
    baseInfo() {
      return [
        { label: '合同状态', value: this.contract.status },
        { label: '签约状态', value: this.contract.signStatus },
        { label: '合同生效期', value: `${this.contract.startDate} 至 ${this.contract.endDate}` },
        { label: '付款方式', value: this.contract.payMethod },
        { label: '付款时间', value: this.contract.payTime },
        { label: '电子合同', value: '', hasArrow: true, id: this.contract.electronicId },
      ];
    },
    feeInfo() {
      return [
        { label: '押金/保证金', value: this.contract.deposit },
        { label: '租金', value: this.contract.rent },
        { label: '电费', value: this.contract.electricity },
        { label: '水费', value: this.contract.water },
        { label: '物业/增值服务', value: this.contract.property },
        { label: '我的账单', value: '', hasArrow: true, id: this.contract.id },
      ];
    },
    signerInfo() {
      return [
        { label: '签约人', value: this.contract.signer },
        { label: '身份证号', value: this.contract.idCard },
        { label: '手机号', value: this.contract.phone },
        { label: '证件有效期', value: this.contract.idValidDate },
      ];
    },
  },
  methods: {
    handleClick(item) {
      if (item.label === '电子合同') {
        uni.navigateTo({
          url: `/pages/contract/contractFile?id=${item.id}`,
        });
      } else if (item.label === '我的账单') {
        uni.navigateTo({
          url: `/pages/bill/billList?userId=${this.contract.userId}&contractId=${item.id}`,
        });
      }
    },
    goSign() {
      uni.navigateTo({
        url: `/pages/contract/signContract?id=${this.contract.id}`,
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.contract-detail-page {
  background: #f7f8fa;
  min-height: 100vh;
  /* 给导航栏留空间 */
  padding-top: 120rpx;
  /* 预留底部操作栏空间 */
  padding-bottom: 150rpx;
}

/* 顶部封面信息 */
.header {
  display: flex;
  background: #fff;
  padding: 24rpx;
  border-radius: 12rpx;
  margin: 20rpx;

  .cover {
    width: 194rpx;
    height: 156rpx;
    border-radius: 10rpx;
    margin-right: 20rpx;
  }

  .info {
    flex: 1;
    display: flex;
    flex-direction: column;

    .name {
      font-size: 30rpx;
      font-weight: bold;
      color: #333;
      margin-top: 10rpx;
      margin-bottom: 12rpx;
    }

    .room {
      font-size: 26rpx;
      color: #666;
    }
  }
}

/* 信息区域 */
.section {
  background: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  padding: 20rpx 24rpx;

  .section-title {
    font-weight: 500;
    font-size: 40rpx;
    margin-bottom: 12rpx;
    color: #212121;
  }

  .info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 40rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

    &:last-child {
      border-bottom: none;
    }

    .label {
      font-size: 30rpx;
      color: #86868C;
    }

    .value-box {
      display: flex;
      align-items: center;

      .value {
        font-size: 30rpx;
        color: #222222;
      }

      u-icon {
        margin-left: 10rpx;
      }
    }
  }
}

/* 底部固定操作栏 */
.bottom-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  padding: 35rpx;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.06);
  z-index: 99;

  .sign-btn {
    width: 100%;
    height: 88rpx;
  }

  /* 使用样式穿透让u-btn样式生效 */
  &::v-deep .u-btn {
    font-size: 30rpx;
    color: #fff;
    background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
    border-radius: 10rpx;
  }
}
</style>