dvcp_v2_wxcp_app/library/apps/AppBuilding/detail.vue

<template>
  <div class="detail">
    <AiTopFixed>
      <div class="select-flex" @click="showSelect=true">
        <span class="name" v-text="cellName"/>
        <span class="btn">单元切换</span>
      </div>
      <div class="line-bg"></div>
      <div class="num-content">
        <div class="num-item">
          <div class="content">
            <h2>{{ numInfo['实有户数'] || 0 }}</h2>
            <p>实有户数</p>
          </div>
        </div>
        <div class="num-item">
          <div class="content">
            <h2>{{ numInfo['实有人口'] || 0 }}</h2>
            <p>实有人口</p>
          </div>
        </div>
        <div class="num-item">
          <div class="content">
            <h2>{{ numInfo['流动人口'] || 0 }}</h2>
            <p>流动人口</p>
          </div>
        </div>
      </div>
      <div class="line-bg"></div>
    </AiTopFixed>
    <div class="list-content">
      <div class="left">
        <div class="item-content" v-for="(item, index) in list" :key="index" @click="getHouseDetail(item.id)">
          <div class="item">
            <h2>{{ item.houseCode }}</h2>
            <p v-text="`${item.livingNumber}人`.replace(/0人/,'无人')"/>
          </div>
        </div>
        <AiEmpty v-if="!list.length" style="padding-bottom:80px;"/>
      </div>
    </div>
    <u-select v-model="showSelect" :list="selectList" label-name="cellName" value-name="eachUnitNumber"
              @confirm="confirmSelect"/>
    <u-popup v-model="show" mode="bottom" border-radius="14" height="1000">
      <div class="popup">
        <div class="bg"></div>
        <div class="title">{{ houseInfo.createAddress }}</div>
        <div class="row-info">
          <div class="row-item left">
            <h3>{{ `${houseInfo.houseArea || 0}㎡`.replace(/0㎡/, "未统计") }} </h3>
            <p>房屋面积</p>
          </div>
          <div class="row-item center">
            <span class="right-line"></span>
            <span class="left-line"></span>
            <h3>{{ $dict.getLabel('houseUseStatus', houseInfo.houseUse) || "无" }} </h3>
            <p>房屋用途</p>
          </div>
          <div class="row-item right">
            <h3>{{ $dict.getLabel('houselivingStatus', houseInfo.livingStatus) || "未使用" }}</h3>
            <p>居住现状</p>
          </div>
        </div>
        <div class="row-info" v-if="!!houseInfo.leaseSituation">
          <div class="row-item left">
            <h3>{{ $dict.getLabel('houseLeaseSituation', houseInfo.leaseSituation) || "无" }}</h3>
            <p>承租情况</p>
          </div>
          <div class="row-item center">
            <span class="right-line"></span>
            <span class="left-line"></span>
            <h3>{{ $dateFormat(houseInfo.startDate, 'YYYY-MM-DD') }}</h3>
            <p>起租日期</p>
          </div>
          <div class="row-item right">
            <h3>{{ houseInfo.isFilingCertificate == 1 ? '有' : '无' }}</h3>
            <p>租房备案证明</p>
          </div>
        </div>
      </div>
      <div v-if="houseInfo.owner.length || houseInfo.renter.length">
        <div class="line-bg"></div>
        <div class="popup" v-if="houseInfo.owner.length">
          <div class="title pad-t32">房主信息</div>
          <div class="info-flex" v-for="(item, index) in houseInfo.owner" :key="index">
            <div class="item">
              <span class="label">房主：</span>
              <span class="value">{{ item.name }}</span>
            </div>
            <div class="item">
              <span class="label">联系方式：</span>{{ item.phone }}
            </div>
          </div>
        </div>
        <div class="popup" v-if="houseInfo.renter.length">
          <div class="title pad-t32">承租人信息</div>
          <div class="info-flex" v-for="(item, index) in houseInfo.renter" :key="index">
            <div class="item">
              <span class="label">房主：</span>
              <span class="value">{{ item.name }}</span>
            </div>
            <div class="item">
              <span class="label">联系方式：</span>{{ item.phone }}
            </div>
          </div>
        </div>
      </div>
      <div v-if="houseInfo.live.length">
        <div class="line-bg"></div>
        <div class="popup">
          <div class="title pad-t32">实际居住人员</div>
          <div v-for="(item, index) in houseInfo.live" :key="index">
            <div class="info-flex">
              <div class="item">
                <span class="label">居住人：</span>
                <span class="value">{{ item.name }}</span>
              </div>
              <div class="item">
                <span class="label">联系方式：</span>{{ item.phone }}
              </div>
            </div>
            <div class="info-flex mar-t48">
              <div class="item">
                <span class="label">与户主关系：</span>{{ $dict.getLabel('householdRelation', item.relation) }}
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="pad-b112"></div>
      <div class="pop-btn" @click="toAdd(houseInfo.id)">编辑修改</div>
    </u-popup>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {
  props: ['params'],
  data() {
    return {
      show: false,
      communityId: '',
      list: [],
      houseInfo: {
        owner: [],
        renter: [],
        live: []
      },
      numInfo: {},
      showSelect: false,
      selectList: [],
      selectCellIndex: 0,
      houseId: '',
      detail: {},
      eachUnitNumber: 1
    }
  },
  computed: {
    ...mapState(['user']),
    cellName() {
      return this.selectList.find(e => e.eachUnitNumber == this.eachUnitNumber)?.cellName || ""
    }
  },
  onShow() {
    document.title = "楼栋模型"
    this.$dict.load('householdRelation', 'houselivingStatus', 'houseLeaseSituation', 'houseUseStatus',
        'isFilingCertificateStatus', 'communityBuildingType', 'yesOrNo', 'BulidResidentType')
    this.getBuilding()
    if (this.show && !!this.houseId) {
      this.getHouseDetail(this.houseId)
    }
  },
  methods: {
    getSelectList(communityId) {
      //通过小区ID获取楼栋列表,用来切换楼栋
      this.$http.post(`/app/appcommunitybuildinginfo/listByUnitNumber`, null, {
        params: {communityId, size: 999}
      }).then(res => {
        if (res?.data) {
          this.selectList = []
          let {unitNumber, buildingNumber} = this.detail,
              {communityName} = res.data.records?.[0]
          for (let i = 1; i <= unitNumber; i++) {
            this.selectList.push({
              eachUnitNumber: i,
              cellName: `${communityName + buildingNumber}栋${i}单元`
            })
          }
          this.eachUnitNumber = this.selectList[0].eachUnitNumber
          this.getStatistics()
          this.getList()
        }
      })
    },
    getBuilding() {
      //获取楼栋信息
      let {id} = this.$route.query
      this.$http.post(`/app/appcommunitybuildinginfo/queryDetailById`, null, {
        params: {id}
      }).then(res => {
        if (res?.data) {
          this.detail = res.data
          this.getSelectList(res.data.communityId)
        }
      })
    },
    getStatistics() {
      //获取楼栋统计信息
      let {id} = this.detail
      this.$http.post(`/app/appcommunitybuildinginfo/statistics`, null, {
        params: {id, unitNum: this.eachUnitNumber}
      }).then(res => {
        if (res?.data) {
          this.numInfo = res.data.unit
        }
      })
    },
    getList() {
      //获取房间列表
      let {id: buildingId} = this.detail
      this.$http.post(`/app/appcommunityhouseinfo/list`, null, {
        params: {size: 10000, buildingId, unitNumber: this.eachUnitNumber}
      }).then(res => {
        if (res?.data) {
          this.list = res.data.records
        }
      })
    },
    getHouseDetail(id) {
      this.houseId = id
      this.$http.post(`/app/appcommunityhouseinfo/queryDetailById?id=${id}`).then(res => {
        if (res?.data) {
          this.houseInfo = res.data
          this.show = true
        }
      })
    },
    confirmSelect(e) {
      this.eachUnitNumber = e[0].value
      this.getStatistics()
      this.getList()
    },
    toAdd(id) {
      uni.navigateTo({url: `./add?id=${id}`})
    }
  }
}
</script>

<style lang="scss" scoped>
.detail {
  .select-flex {
    padding: 20px 40px 40px;
    box-sizing: border-box;
    line-height: 50px;
    display: flex;
    justify-content: space-between;
    background-color: #fff;

    .name {
      width: 560px;
      word-break: break-all;
      font-size: 36px;
      font-weight: 800;
      color: #333;
    }

    .btn {
      white-space: nowrap;
      color: #1365DD;
      font-size: 30px;
    }
  }

  .num-content {
    width: 100%;
    background-color: #fff;
    box-sizing: border-box;
    display: flex;

    .num-item {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 142px;
      padding-top: 20px;
      box-sizing: border-box;

      .content {
        width: 120px;
        text-align: center;
      }

      h2 {
        font-size: 36px;
        font-weight: bold;
        color: #333;
        line-height: 42px;
      }

      p {
        font-size: 26px;
        color: #666;
        line-height: 36px;
      }
    }
  }

  .line-bg {
    width: 100%;
    height: 8px;
    background: #F1F6F9;
  }

  .list-content {
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    width: 100%;
    padding: 48px 2px 0 32px;
    box-sizing: border-box;

    .left {
      // width: calc(100% - 120px);
      width: 100%;
      overflow: hidden;

      .item-content {
        width: 33%;
        padding-right: 32px;
        box-sizing: border-box;
        float: left;
      }

      .item {
        width: 100%;
        height: 158px;
        background: #FAFBFF;
        border-radius: 1px;
        border: 1px solid #E7E7E7;
        box-sizing: border-box;
        text-align: center;
        font-weight: bold;
        margin: 0 32px 32px 0;

        h2 {
          font-size: 38px;
          color: #5088FF;
          line-height: 44px;
          margin: 14px 0 26px 0;
        }

        p {
          font-size: 32px;
          color: #333;
          line-height: 44px;
        }
      }

      .item:nth-of-type(2n) {
        margin-right: 0;
      }
    }

    .right {
      .item {
        width: 120px;
        height: 60px;
        line-height: 60px;
        padding: 0 8px;
        background: #FAFBFF;
        border-radius: 4px;
        border: 1px solid #E7E7E7;
        box-sizing: border-box;
        font-size: 30px;
        font-family: DINAlternate-Bold, DINAlternate;
        color: #787878;
        letter-spacing: -1px;
        margin-bottom: 24px;
      }

      .active {
        background: #5088FF;
        border-radius: 2px;
        border: 1px solid #E7E7E7;
        color: #fff;
      }
    }
  }

  .popup {
    padding-left: 32px;

    .bg {
      width: 64px;
      height: 10px;
      background: #CCC;
      border-radius: 6px;
      margin: 32px 0 32px 344px;
    }

    .title {
      font-size: 36px;
      font-family: PingFang-SC-Heavy, PingFang-SC;
      font-weight: 800;
      color: #333;
      line-height: 50px;
      margin-bottom: 40px;
    }

    .row-info {
      padding-bottom: 48px;

      .row-item {
        display: inline-block;
        width: 33%;

        h3 {
          font-size: 32px;
          font-family: PingFangSC-Medium, PingFang SC;
          font-weight: 500;
          color: #4E75FE;
          line-height: 64px;
        }

        p {
          font-size: 28px;
          color: #666;
          line-height: 42px;
        }
      }

      .left {
        width: calc(28% - 70px);
        text-align: center;
        margin-right: 70px;
        box-sizing: border-box;
      }

      .center {
        width: 36%;
        text-align: center;
        box-sizing: border-box;
        position: relative;

        .left-line {
          position: absolute;
          top: 20px;
          left: 0;
          height: 64px;
          border-left: 1px solid #E5E5E5;
        }

        .right-line {
          position: absolute;
          top: 20px;
          right: 0;
          height: 64px;
          border-left: 1px solid #E5E5E5;
        }
      }

      .right {
        width: calc(33% - 40px);
        text-align: center;
        margin-left: 40px;
        box-sizing: border-box;
      }
    }

    .info-flex {
      display: flex;
      margin-bottom: 24px;
      padding-right: 70px;
      box-sizing: border-box;

      .item {
        flex: 1;
        font-size: 28px;
        color: #333;
        line-height: 30px;

        .label {
          color: #999;
          vertical-align: top;
        }

        .value {
          display: inline-block;
          width: calc(100% - 120px);
          word-break: break-all;
        }
      }
    }
  }

  .line-bg {
    width: 100%;
    height: 30px;
    background: #F5F6FA;
  }

  .pad-t32 {
    padding-top: 32px;
  }

  .mar-t48 {
    margin-top: 48px;
  }

  .pop-btn {
    width: 100%;
    height: 112px;
    line-height: 112px;
    text-align: center;
    font-size: 32px;
    font-weight: 500;
    color: #FFF;
    background: #1365DD;
    position: fixed;
    bottom: 0;
    left: 0;
  }

  .pad-b112 {
    padding-bottom: 112px;
  }
}

::v-deep .content {
  padding: 0 !important;
}
</style>