dvcp_v2_wxcp_app/src/apps/AppBuilding/list.vue

<template>
  <div class="list">
    <AiTopFixed>
      <u-search placeholder="小区名称" :show-action="false" v-model="title" @search="current=1,getList()"/>
    </AiTopFixed>
    <div class="list-content">
      <div class="item" v-for="(item, index) in list" :key="index">
        <div class="item-content" @click="toDetail(item.id)">
          <p class="title line-two">{{ item.communityName }}</p>
          <p class="address">{{ item.cellName }}</p>
          <span class="status" :class="'color'+item.locationStatus"
                v-text="$dict.getLabel('BuildLocationStatus', item.locationStatus)"/>
        </div>
        <div class="item-btn" v-if="item.locationStatus != 1" @click="toMap(item.id, item.areaId)">
          <span>去定位</span>
        </div>
      </div>
      <AiEmpty v-if="!list.length"/>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default {

  data() {
    return {
      title: '',
      current: 1,
      list: [],
      isMore: false
    }
  },
  computed: {...mapState(['user'])},
  mounted() {
    this.$dict.load('BuildLocationStatus').then(() => {
      this.getList()
    })
    uni.$on('updateList', () => {
      this.current = 1
      this.getList()
    })
  },
  onShow() {
    document.title = "楼栋列表"
  },

  methods: {
    getList() {
      this.$http.post(`/app/appcommunitybuildinginfo/list`, null, {
        params: {
          current: this.current,
          size: 10,
          areaId: this.user.areaId,
          communityName: this.title
        }
      }).then(res => {
        if (res?.data) {
          if (res.data.records.length < 10) {
            this.isMore = true
          }

          res.data.records.forEach(e => {
            e.cellName = `${e.communityName + e.buildingNumber}栋`
          })
          if (this.current > 1 && this.current > res.data.pages) {
            return
          }
          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records
          this.pages = res.data.pages
        }
      })
    },
    toDetail(id) {
      uni.navigateTo({url: `./detail?id=${id}`})
    },
    toMap(id, areaId) {
      uni.navigateTo({url: `./map?id=${id}&areaId=${areaId}`})
    }

  },
  onReachBottom() {
    if (this.isMore) return

    this.current++

    this.$nextTick(() => {
      this.getList()
    })
  },
}
</script>

<style lang="scss" scoped>
.list {
  padding-bottom: 20px;
  .list-content {
    padding: 32px 32px 0;
    background-color: #F5F5F5;

    .item {
      width: 100%;
      background: #FFF;
      box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.02);
      border-radius: 8px;
      box-sizing: border-box;
      position: relative;
      overflow: hidden;
      margin-bottom: 32px;

      .item-content {
        padding: 32px 32px 42px 32px;
      }

      .title {
        width: calc(100% - 60px);
        word-break: break-all;
        font-size: 32px;
        color: #333;
        line-height: 44px;
      }

      .address {
        width: 100%;
        word-break: break-all;
        font-size: 28px;
        color: #999;
        line-height: 40px;
      }

      .status {
        width: 160px;
        height: 40px;
        line-height: 36px;
        font-size: 26px;
        font-weight: 500;
        position: absolute;
        right: -38px;
        top: 24px;
        -webkit-transform: rotate(90deg);
        transform: rotate(45deg);
        text-align: center;
      }

      .color0 {
        background: #FFECEF;
        color: #f46;
      }

      .color1 {
        background: #EEF5FF;
        color: #5A98F2;
      }

      .item-btn {
        width: 100%;
        padding: 20px 32px 20px 0;
        border-top: 1px solid #eee;
        text-align: right;
        box-sizing: border-box;

        span {
          display: inline-block;
          width: 160px;
          height: 56px;
          line-height: 56px;
          text-align: center;
          border-radius: 28px;
          border: 1px solid #1365DD;
          font-size: 28px;
          color: #1365DD;
        }
      }
    }

    .line-two {
      text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }
}
</style>