第一书记

src/project/pingchang/AppPolice/AppPolice.vue

@@ -0,0 +1,217 @@
+<template>
+  <div class="wrapper" v-if="pageShow">
+    <div class="area">
+      <AiAreaPicker v-model="areaId" :name.sync="areaName" :areaId="$areaId" @input="handleSelect">
+        <div class="ai-area__wrapper">
+          <span class="label" v-if="areaName">{{ areaName }}</span>
+          <span v-else>请选择</span>
+          <image src="/static/img/area-bottom.png"/>
+        </div>
+      </AiAreaPicker>
+    </div>
+    <tempate v-if="list.length">
+      <header>
+        <span>书记列表</span>
+        <div class="total">
+          共<em>{{ list.length }}</em>名书记
+        </div>
+      </header>
+      <div class="list-wrap">
+        <div class="card" v-for="(item,index) in list" :key="index">
+          <img
+              :src="item.picture || `https://cdn.cunwuyun.cn/AppPolice/police.png`"
+              @click="preview(index)"
+              alt="">
+          <div class="right">
+            <span class="user-name">{{ item.name }}</span>
+            <span class="state">第一书记</span>
+            <span class="phone" @click="call(item)">{{ item.phone }}</span>
+            <span>{{ item.areaName }}</span>
+          </div>
+        </div>
+      </div>
+    </tempate>
+    <AiEmpty v-else></AiEmpty>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'AppPolice',
+  appName: "第一书记",
+  data() {
+    return {
+      current: 1,
+      areaId: "",
+      list: [],
+      areaName: '',
+      $areaId: '',
+      pageShow: false
+    }
+  },
+
+  onLoad() {
+    this.$loading()
+    this.areaId = this.$areaId
+    this.areaName = this.$areaName
+    this.$nextTick(() => {
+      this.getList()
+    })
+  },
+
+  methods: {
+    call({phone: phoneNumber}) {
+      uni.makePhoneCall({phoneNumber})
+    },
+    preview(index) {
+      if (this.list[index]["picture"]?.startsWith("http")) {
+        uni.previewImage({
+          current: this.list[index]["picture"],
+          urls: [this.list[index]["picture"]]
+        })
+      }
+    },
+    handleSelect() {
+      this.$loading()
+      this.current = 1
+      this.$nextTick(() => {
+        this.getList()
+      })
+    },
+    getList() {
+      this.$instance.post(`/app/appvillageauxiliarypolice/list`, null, {
+        params: {
+          isPublic: 1,
+          areaId: this.areaId,
+          current: this.current
+        }
+      }).then(res => {
+        if (res?.data) {
+          this.list = this.current > 1 ? [...this.list, ...res.data.records] : res.data.records;
+        }
+
+        this.pageShow = true
+        this.$hideLoading()
+      })
+    }
+  },
+  onReachBottom() {
+    this.current++;
+    this.getList();
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.wrapper {
+  padding-top: 124px;
+  padding-bottom: 20px;
+}
+
+.area {
+  display: flex;
+  align-items: center;
+  position: fixed;
+  left: 0;
+  top: 0;
+  z-index: 1;
+  height: 124px;
+  width: 100%;
+  box-sizing: border-box;
+  background: #4181FF;
+  padding-left: 32px;
+
+  .ai-area__wrapper {
+    display: flex;
+    align-items: center;
+
+    span {
+      margin-right: 16px;
+      color: #FFFFFF;
+      font-size: 44px;
+    }
+
+    image {
+      width: 16px;
+      height: 8px;
+    }
+  }
+}
+
+header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  box-sizing: border-box;
+  padding: 32px;
+
+  & > span {
+    font-size: 38px;
+    font-weight: 600;
+    color: #333333;
+  }
+
+  .total {
+    margin-left: auto;
+    font-size: 28px;
+    font-weight: 400;
+    color: #666666;
+    display: flex;
+    align-items: center;
+
+    & > em {
+      color: #4181FF;
+    }
+  }
+}
+
+.list-wrap {
+  box-sizing: border-box;
+  padding: 0 32px;
+
+  .card {
+    box-sizing: border-box;
+    padding: 32px;
+    background: #FFFFFF;
+    box-shadow: 0 0 8px 0 rgba(0, 0, 0, 0.02);
+    border-radius: 16px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 24px;
+
+    & > img {
+      width: 200px;
+      height: 200px;
+      border-radius: 8px;
+      margin-right: 32px;
+      flex-shrink: 0;
+    }
+
+    .right {
+      height: 200px;
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      font-size: 26px;
+      font-weight: 400;
+      color: #666666;
+
+      .user-name {
+        font-size: 32px;
+        font-weight: 600;
+        color: #333333;
+        margin-bottom: 16px;
+      }
+
+      .state {
+        color: #666666;
+      }
+
+      .phone {
+        color: #4181FF;
+        margin: 8px 0;
+      }
+    }
+  }
+}
+</style>