RentWeAppFront/pages-biz/contract/contractDetail.vue

<template>
  <view class="contract-detail-page">
    <customNavbar title="我的合同"></customNavbar>

    <!-- 合同基本信息 -->
    <view class="section">
      <view class="section-title">合同基本信息</view>
      <view
        class="info-item"
        v-for="(item, index) in baseInfo"
        :key="index"
        @click="item.hasArrow && 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
      v-for="(asset, index) in assetList"
      :key="index"
      class="asset-block"
    >
      <view class="asset-header" @click="toggleAsset(index)">
        <view class="left">
          <image
            class="cover"
            :src="asset.coverUrl || '/static/default-cover.png'"
            mode="aspectFill"
          />
          <view class="info">
            <text class="name">{{ asset.assetName }}</text>
            <text class="room">{{ asset.assetRoom || '—' }}</text>
          </view>
        </view>
        <u-icon
          :name="asset.expanded ? 'arrow-up' : 'arrow-down'"
          size="28"
          color="#999"
        />
      </view>

      <view v-show="asset.expanded">
        <view class="section">
          <view class="section-title">费用信息</view>
          <view
            class="info-item"
            v-for="(item, i) in feeItems(asset)"
            :key="i"
          >
            <text class="label">{{ item.label }}</text>
            <text class="value">{{ item.value }}</text>
          </view>
        </view>
      </view>
    </view> -->

 <!--   <view
      v-if="hasMoreAssets"
      class="load-more"
      @click="loadMoreAssets"
    > -->
   <!--   <text v-if="!loadingAsset">加载更多资产</text>
      <text v-else>加载中...</text>
    </view> -->

    <!-- 底部操作栏（完全保留原逻辑和样式） -->
    <view v-if="contract.signStatus === '待签署'" class="bottom-bar">
      <u-button class="sign-btn" @click="goSign">
        去签署
      </u-button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      contractNo: null,
      contract: {},
      assetList: [],
      assetPageNo: 1,
      assetPageSize: 1,
      hasMoreAssets: true,
      loadingAsset: false
    }
  },

  onShow() {
    this.$checkToken(this.$getToken())
	this.getContractDetail()
  },

  onLoad(options) {
    this.contractNo = options.contractNo
  },

  onReachBottom() {
    this.loadMoreAssets()
  },

  computed: {
    baseInfo() {
      return [
		{ label: '合同名称', value: this.contract.contractName || '—' },
        { label: '签约状态', value: this.contract.signStatus || '—' },
        {
          label: '合同生效期',
          value: this.contract.startDate
            ? `${this.contract.startDate} 至 ${this.contract.endDate}`
            : '—'
        },
        {
          label: '电子合同',
          value: '查看',
          hasArrow: true
        }
      ]
    }
  },

  methods: {
    /** 合同详情 + 第一条资产 */
    getContractDetail() {
      this.$u.get(`/contract/detail?contractNo=${this.contractNo}`, {},{
        WT: this.$getToken()
      }).then(res => {
		  console.log(res)
        this.contract = res.data || {}

        // this.assetList = (res.assetsInfos.assets || []).map((item, index) => ({
        //   ...item,
        //   expanded: index === 0
        // }))

        // this.hasMoreAssets =
        //   this.assetList.length < (res.totalAssets || 0)
      })
    },

    /** 加载更多资产 */
    loadMoreAssets() {
      if (this.loadingAsset || !this.hasMoreAssets) return

      this.loadingAsset = true
      this.assetPageNo += 1

      this.$u.get('/contract/assets', {
        contractNo: this.contractNo,
        pageNo: this.assetPageNo,
        pageSize: this.assetPageSize,
        WT: this.$getToken()
      }).then(res => {
        const list = (res.assets || []).map(item => ({
          ...item,
          expanded: false
        }))

        this.assetList = this.assetList.concat(list)
        this.hasMoreAssets = list.length === this.assetPageSize
      }).finally(() => {
        this.loadingAsset = false
      })
    },

    /** 折叠 / 展开（手风琴效果） */
    toggleAsset(index) {
      this.assetList.forEach((item, i) => {
        item.expanded = i === index ? !item.expanded : false
      })
    },

    feeItems(asset) {
      return [
        { label: '押金/保证金', value: asset.fee?.deposit || '—' },
        { label: '租金', value: asset.fee?.rent || '—' },
        { label: '电费', value: asset.fee?.electricity || '—' },
        { label: '水费', value: asset.fee?.water || '—' },
        { label: '物业/增值服务', value: asset.fee?.property || '—' }
      ]
    },

    handleClick(item) {
      if (item.label === '电子合同') {
      uni.downloadFile({
        url: this.$config.staticUrl + this.contract.eContractUrl,
        header: {
          'X-Token': this.$getToken(),
		  'USERTYPE': this.$getUserType()
        },
        success: res => {
          uni.openDocument({
            filePath: res.tempFilePath,
            fileType: 'pdf'
          })
        }
      })
      }
    },

    goSign() {
	 let url = `/contract/getSignLink?eFlowId=${this.contract.eContractFlowId}`
	 let signLink
	 this.$u.get(url,{},{
		 WT: this.$getToken()
	 }).then(res=>{
		 if(res.flag) {
			 signLink = res.data
			  // 开发者微信小程序内通过WebView打开e签宝的认证授权/签署页面
			     // 场景二：当前小程序内打开H5页面操作认证授权/签署
			     wx.navigateTo({
			       url: '/pages-biz/webview/webview?url=' + encodeURIComponent(signLink),
			     })

		 }
	 })	 
    }
  }
}

</script>

<style lang="scss" scoped>
.contract-detail-page {
  background: #f7f8fa;
  min-height: 100vh;
  padding-top: 175rpx;
  padding-bottom: 150rpx;
}

.asset-block {
  background: #fff;
  border-radius: 12rpx;
  margin: 20rpx;
  overflow: hidden;
}

.asset-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;

  .left {
    display: flex;
    align-items: center;
  }

  .cover {
    width: 120rpx;
    height: 96rpx;
    border-radius: 8rpx;
    margin-right: 20rpx;
  }

  .name {
    font-size: 30rpx;
    font-weight: 500;
    color: #333;
  }

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

.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;
    padding: 40rpx 0;
    border-bottom: 1rpx solid #f0f0f0;

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

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

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

.load-more {
  text-align: center;
  padding: 30rpx;
  font-size: 28rpx;
  color: #999;
}

/* 底部按钮样式保持不变 */
.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;
  }

  &::v-deep .u-btn {
    font-size: 30rpx;
    color: #fff;
    background: linear-gradient(90deg, #ff6f63 0%, #fb392a 100%);
    border-radius: 10rpx;
  }
}

</style>