随手拍

src/apps/AppHandSnapshot/List.vue

@@ -0,0 +1,218 @@
+<template>
+  <div class="list">
+    <u-tabs :list="tabList" :is-scroll="false" :current="currentTabs" height="96" bg-color="#3975C6" inactive-color="#fff" active-color="#fff" @change="change"></u-tabs>
+
+    <div class="select-top">
+      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="所属网格"></AiSelect>
+
+      <AiSelect @data="(v) => (list = v.map((e) => e.value))" :list="list" placeholder="办件状态"></AiSelect>
+    </div>
+
+    <template v-if="datas.length > 0">
+      <AiCard v-for="(item, i) in datas" :key="i" @click.native="goDetail(item, 1)">
+        <template #custom>
+          <div class="card-top">
+            <div class="titles">世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多世纪花园南区一号楼前面因没有排水渠道，多</div>
+
+            <div class="types">
+              <span>事件类型</span>
+              <span class="types-right">矛盾纠纷</span>
+            </div>
+
+            <div class="gards">
+              <span>所属网格</span>
+              <span class="gards-right">04号网格</span>
+            </div>
+          </div>
+
+          <div class="status status0">
+            <span class="icon"></span>
+            <span>待处理</span>
+          </div>
+        </template>
+      </AiCard>
+    </template>
+
+    <AiEmpty v-else></AiEmpty>
+    <div class="pad-b120" v-if="datas.length"></div>
+  </div>
+</template>
+
+<script>
+export default {
+  props: {},
+  data() {
+    return {
+      datas: [],
+      tabList: [
+        {
+          name: '全部待办',
+        },
+        {
+          name: '办件历史',
+        },
+      ],
+      list: [
+        {
+          value: '1',
+          label: '江',
+        },
+        {
+          value: '2',
+          label: '湖',
+        },
+      ],
+      currentTabs: 0,
+      current: 1,
+      size: 10,
+      pages: 0,
+    }
+  },
+  computed: {
+    loadmore() {
+      return this.pages <= this.current ? 'loading ' : 'nomore'
+    },
+  },
+  mounted() {
+    console.log(12)
+    this.current = 1
+    this.getList()
+    uni.$on('nextList', () => {
+      this.current ++
+      this.getList()
+    })
+  },
+  methods: {
+    getList() {
+      this.$http
+        .post('/app/appvisitvondolence/list', null, {
+          params: {
+            size: 10,
+            current: this.current,
+            createUserId: this.currentTabs == 1 ? this.user.id : '',
+          },
+        })
+        .then((res) => {
+          if (res.code == 0) {
+            this.datas = this.current > 1 ? [...this.datas, ...res.data.records] : res.data.records
+            this.pages = res.data.pages
+          }
+        })
+    },
+
+    goDetail(item) {
+      uni.navigateTo({ url: `./Detail?id=${item.id}` })
+    },
+
+    change(index) {
+      this.currentTabs = index
+      this.getList()
+    },
+    linkTo(url) {
+      uni.navigateTo({url})
+    }
+  },
+  onReachBottom() {
+    this.current = this.current + 1
+    this.getList()
+  },
+}
+</script>
+
+<style scoped lang="scss">
+uni-page-body {
+  height: 100%;
+}
+.list {
+  height: 100%;
+  .select-top {
+    background: #fff;
+    display: flex;
+    justify-content: space-around;
+    .AiSelect {
+      margin: 30px 0;
+    }
+  }
+  ::v-deep .AiCard {
+    background: #f3f6f9;
+    padding: 24px 40px 0 32px;
+    .start {
+      background: #fff;
+      border-radius: 16px;
+      .card-top {
+        padding: 32px;
+        .titles {
+          margin-bottom: 34px;
+          font-size: 32px;
+          font-weight: 500;
+          color: #333333;
+          line-height: 1.4;
+          word-break: break-all;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          display: -webkit-box;
+          -webkit-line-clamp: 2;
+          -webkit-box-orient: vertical;
+        }
+        .types,
+        .gards {
+          margin-top: 8px;
+          font-size: 26px;
+          .types-right,
+          .gards-right {
+            margin-left: 32px;
+            color: #333333;
+          }
+        }
+      }
+
+      .status {
+        padding: 32px;
+        border-top: 1px solid #dddddd;
+        .icon {
+          display: inline-block;
+          width: 8px;
+          height: 8px;
+          vertical-align: middle;
+          margin-right: 8px;
+        }
+      }
+
+      .status0 {
+        color: #ff883c;
+        .icon {
+          background: #ff883c;
+        }
+      }
+
+      .status1 {
+        color: #1aaaff;
+        .icon {
+          background: #1aaaff;
+        }
+      }
+
+      .status2 {
+        color: #42d784;
+        .icon {
+          background: #42d784;
+        }
+      }
+
+      .status3 {
+        color: #ff4466;
+        .icon {
+          background: #ff4466;
+        }
+      }
+    }
+  }
+  // ::v-deep .AiCard:last-child {
+  //   padding-bottom: 24px;
+  // }
+  .pad-b120{
+    background-color: #f3f6f9;
+    padding-bottom: 120px;
+  }
+}
+</style>