BUG 25784

src/apps/AppBuilding/list.vue

@@ -0,0 +1,168 @@
+<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.createAddress }}</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: []
+    }
+  },
+  computed: {...mapState(['user'])},
+  mounted() {
+    this.$dict.load('BuildLocationStatus').then(() => {
+      this.getList()
+    })
+  },
+
+  methods: {
+    getList() {
+      this.$http.post(`/app/appcommunitybuildinginfo/list`, null, {
+        params: {
+          current: 1,
+          size: 10,
+          areaId: this.user.areaId,
+          communityName: this.title
+        }
+      }).then(res => {
+        if (res.code == 0) {
+          if (this.current > 1 && this.current > res.data.pages) {
+            return
+          }
+          this.list = this.current > 1 ? [...this.datas, ...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() {
+    this.current++;
+    this.getList()
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.list {
+  .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>