新增智能电表、空调管理

doum

2026-06-17 ea689dd91eaa72425dc01759042c3b4eb2186512

 h5/pages/customer/contract/list.vue

@@ -1,103 +1,103 @@
<template>

  <view class="cu-page">

    <scroll-view scroll-x class="cu-tabs cu-tabs--scroll">

      <view

        v-for="(t, i) in tabs"

        :key="t.value"

        :class="['cu-tab', tabIdx === i ? 'cu-tab--active' : '']"

        @click="tabIdx = i; load()"

      >{{ t.label }}</view>

    </scroll-view>



    <view class="cu-list-header">

      <text class="cu-list-header__count">共 {{ list.length }} 份合同</text>

    </view>



    <view class="cu-list-wrap">

      <view v-for="item in list" :key="item.id" class="cu-list-card cu-list-card--clickable" @click="goDetail(item.id)">

        <view class="cu-list-card__head">

          <view class="cu-list-card__icon cu-list-card__icon--contract">📄</view>

          <view class="cu-list-card__main">

            <view class="cu-list-card__title-row">

              <text class="cu-list-card__title">{{ item.code }}</text>

              <text :class="['cu-status', contractStatusClass(item.status)]">{{ statusText(item.status) }}</text>

            </view>

            <text class="cu-list-card__sub">{{ item.roomInfo || '暂无房间信息' }}</text>

            <view class="cu-period-chip">{{ item.startDate }} ~ {{ item.endDate }}</view>

          </view>

        </view>



        <view class="cu-info-grid">

          <view class="cu-info-cell">

            <text class="cu-info-cell__label">租赁面积</text>

            <text class="cu-info-cell__value cu-info-cell__value--primary">{{ formatArea(item.totalArea) }}</text>

          </view>

          <view class="cu-info-cell">

            <text class="cu-info-cell__label">付款方式</text>

            <text class="cu-info-cell__value">{{ item.payTypeText || '-' }}</text>

          </view>

        </view>



        <view v-if="item.billStatusTip" :class="['cu-bill-tip', billTipClass(item.billStatusType)]">

          <text class="cu-bill-tip__icon">{{ billTipIcon(item.billStatusType) }}</text>

          <text class="cu-bill-tip__text">{{ item.billStatusTip }}</text>

        </view>



        <view class="cu-list-card__foot">

          <text class="cu-time">点击查看完整合同信息</text>

          <text class="cu-list-card__arrow">详情 →</text>

        </view>

      </view>

      <u-empty v-if="!list.length" text="暂无合同" margin-top="80" />

    </view>

  </view>

</template>



<script>

import { customerContractPage } from '@/api'

export default {

  data () {

    return {

      list: [],

      tabIdx: 0,

      tabs: [

        { label: '全部', value: null }, { label: '待执行', value: 0 }, { label: '执行中', value: 1 },

        { label: '已到期', value: 2 }, { label: '退租中', value: 3 }, { label: '已退租', value: 4 }

      ]

    }

  },

  onShow () { this.load() },

  methods: {

    load () {

      customerContractPage({ page: 1, capacity: 50, model: { status: this.tabs[this.tabIdx].value } })

        .then(res => { this.list = (res.data && res.data.records) || [] })

    },

    formatArea (area) {

      if (area === null || area === undefined || area === '') return '-'

      return `${area}㎡`

    },

    statusText (s) {

      const map = { 0: '待执行', 1: '执行中', 2: '已到期', 3: '退租中', 4: '已退租' }

      return map[s] || '-'

    },

    contractStatusClass (s) {

      if (s === 1) return 'cu-status--ok'

      if (s === 2 || s === 4) return 'cu-status--muted'

      if (s === 3) return 'cu-status--warn'

      return 'cu-status--muted'

    },

    billTipClass (type) {

      if (type === 'danger') return 'cu-bill-tip--danger'

      if (type === 'warn') return 'cu-bill-tip--warn'

      return 'cu-bill-tip--ok'

    },

    billTipIcon (type) {

      if (type === 'danger') return '⚠️'

      if (type === 'warn') return '⏰'

      return '✅'

    },

    goDetail (id) { uni.navigateTo({ url: `/pages/customer/contract/detail?id=${id}` }) }

  }

}

</script>



<template>
  <view class="cu-page">
    <scroll-view scroll-x class="cu-tabs cu-tabs--scroll">
      <view
        v-for="(t, i) in tabs"
        :key="t.value"
        :class="['cu-tab', tabIdx === i ? 'cu-tab--active' : '']"
        @click="tabIdx = i; load()"
      >{{ t.label }}</view>
    </scroll-view>

    <view class="cu-list-header">
      <text class="cu-list-header__count">共 {{ list.length }} 份合同</text>
    </view>

    <view class="cu-list-wrap">
      <view v-for="item in list" :key="item.id" class="cu-list-card cu-list-card--clickable" @click="goDetail(item.id)">
        <view class="cu-list-card__head">
          <view class="cu-list-card__icon cu-list-card__icon--contract">

            <u-icon name="file-text-fill" color="#40a9ff" size="22" />

          </view>
          <view class="cu-list-card__main">
            <view class="cu-list-card__title-row">
              <text class="cu-list-card__title">{{ item.code }}</text>
              <text :class="['cu-status', contractStatusClass(item.status)]">{{ statusText(item.status) }}</text>
            </view>
            <text class="cu-list-card__sub">{{ item.roomInfo || '暂无房间信息' }}</text>
            <view class="cu-period-chip">{{ item.startDate }} ~ {{ item.endDate }}</view>
          </view>
        </view>

        <view class="cu-info-grid">
          <view class="cu-info-cell">
            <text class="cu-info-cell__label">租赁面积</text>
            <text class="cu-info-cell__value cu-info-cell__value--primary">{{ formatArea(item.totalArea) }}</text>
          </view>
          <view class="cu-info-cell">
            <text class="cu-info-cell__label">付款方式</text>
            <text class="cu-info-cell__value">{{ item.payTypeText || '-' }}</text>
          </view>
        </view>

        <view v-if="item.billStatusTip" :class="['cu-bill-tip', billTipClass(item.billStatusType)]">

          <text class="cu-bill-tip__text">{{ item.billStatusTip }}</text>

        </view>

        <view class="cu-list-card__foot">
          <text class="cu-time">点击查看完整合同信息</text>
          <text class="cu-list-card__arrow">详情 →</text>
        </view>
      </view>
      <u-empty v-if="!list.length" text="暂无合同" margin-top="80" />
    </view>
  </view>
</template>

<script>
import { customerContractPage } from '@/api'
export default {
  data () {
    return {
      list: [],
      tabIdx: 0,
      tabs: [
        { label: '全部', value: null }, { label: '待执行', value: 0 }, { label: '执行中', value: 1 },
        { label: '已到期', value: 2 }, { label: '退租中', value: 3 }, { label: '已退租', value: 4 }
      ]
    }
  },
  onShow () { this.load() },
  methods: {
    load () {
      customerContractPage({ page: 1, capacity: 50, model: { status: this.tabs[this.tabIdx].value } })
        .then(res => { this.list = (res.data && res.data.records) || [] })
    },
    formatArea (area) {
      if (area === null || area === undefined || area === '') return '-'
      return `${area}㎡`
    },
    statusText (s) {
      const map = { 0: '待执行', 1: '执行中', 2: '已到期', 3: '退租中', 4: '已退租' }
      return map[s] || '-'
    },
    contractStatusClass (s) {
      if (s === 1) return 'cu-status--ok'
      if (s === 2 || s === 4) return 'cu-status--muted'
      if (s === 3) return 'cu-status--warn'
      return 'cu-status--muted'
    },
    billTipClass (type) {
      if (type === 'danger') return 'cu-bill-tip--danger'
      if (type === 'warn') return 'cu-bill-tip--warn'
      return 'cu-bill-tip--ok'
    },
    goDetail (id) { uni.navigateTo({ url: `/pages/customer/contract/detail?id=${id}` }) }
  }
}
</script>