企微迁移智慧监护(手环)

src/apps/AppGuardianship/component/areaSelector.vue

@@ -0,0 +1,146 @@
+<template>
+  <section class="areaSelector">
+    <ai-search-popup mode="bottom" ref="areaSelector">
+      <template #btn>
+        <div class="areaSelector">
+          <span v-for="area in fullArea" :key="area.id" v-text="area.name"
+                :class="{current:area.id==areaId}" @tap="index=area.id,getChildAreas(area.id)"/>
+        </div>
+      </template>
+      <div class="areaSelector">
+        <span v-for="area in fullArea" :key="area.id" v-text="area.name"
+              :class="{current:area.id==index}"
+              @click="index=area.id,getChildAreas(area.id)"/>
+      </div>
+      <div class="pendingItem" flex v-for="op in list" :key="op.id" @tap="handleSelect(op)">
+        <div class="fill" :class="{self:index==op.id}" v-html="op.name"/>
+        <u-icon name="arrow-right" color="#ddd"/>
+      </div>
+    </ai-search-popup>
+  </section>
+</template>
+
+<script>
+import AiSearchPopup from "../../../components/AiSearchPopup";
+import AiCell from "../../../components/AiCell";
+import {mapState} from "vuex";
+
+export default {
+  name: "areaSelector",
+  components: {AiCell, AiSearchPopup},
+  props: {
+    areaId: {default: ""}
+  },
+  computed: {
+    ...mapState(['user']),
+    dataRange() {
+      let rules = [10, 8, 6, 3, 0], level = 2
+      rules.some((e, i) => {
+        let reg = new RegExp(`0{${e}}`, 'g')
+        if (reg.test(this.user.areaId)) {
+          return level = i
+        }
+      })
+      return level
+    }
+  },
+  data() {
+    return {
+      fullArea: [],
+      index: "",
+      list: []
+    }
+  },
+  watch: {
+    areaId(v) {
+      v && this.getFullArea()
+    }
+  },
+  methods: {
+    getFullArea() {
+      let {areaId} = this
+      return areaId && this.$http.post("/admin/area/getAllParentAreaId", null, {
+        params: {areaId}
+      }).then(res => {
+        if (res?.data) {
+          this.fullArea = res.data.reverse().slice(this.dataRange)
+        }
+      })
+    },
+    getChildAreas(id) {
+      id && this.$http.post("/admin/area/queryAreaByParentId", null, {
+        params: {id}
+      }).then(res => {
+        if (res?.data) {
+          this.list = res.data
+          let self = this.fullArea.find(e => e.id == this.index)
+          this.list.unshift(self)
+        }
+      })
+    },
+    handleSelect(op) {
+      this.$emit('select', op)
+      this.$refs.areaSelector?.handleSelect()
+    }
+  },
+  created() {
+    this.index = this.areaId
+    this.getFullArea()
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.areaSelector {
+  ::v-deep .AiSearchPopup {
+    .areaSelector {
+      display: flex;
+      align-items: center;
+
+      span {
+        cursor: pointer;
+
+        &:first-of-type:before {
+          content: "";
+          padding: 0;
+        }
+
+        &:before {
+          color: #333;
+          content: "/";
+          padding: 0 16px;
+        }
+      }
+
+      .current {
+        color: #3F8DF5;
+      }
+    }
+
+    .u-drawer-content {
+      position: fixed;
+
+      .areaSelector {
+        padding: 0 16px;
+        box-sizing: border-box;
+        border-bottom: 16px solid #f5f5f5;
+
+        span {
+          line-height: 100px;
+        }
+      }
+    }
+
+    .pendingItem {
+      margin-left: 32px;
+      padding-right: 32px;
+      height: 104px;
+      border-bottom: 1px solid #ddd;
+
+      .self {
+        font-weight: bold;
+      }
+    }
+  }
+}
+</style>

src/apps/AppGuardianship/component/makeCalls.vue

@@ -0,0 +1,75 @@
+<template>
+  <section class="makeCalls">
+    <div v-if="$slots.default" @tap="calls=true">
+      <slot/>
+    </div>
+    <div v-else flex class="column" @tap="calls=true">
+      <img :src="`${$cdn}guardianship/dh.png`"/>
+      <span v-html="label"/>
+    </div>
+    <u-popup v-model="calls" mode="bottom">
+      <div flex class="column option" v-for="item in list" @click="handleCall(item.guardianPhone)">
+        {{ [item.guardianName, item.guardianPhone].join('   ') }}
+      </div>
+      <div class="option" @tap="calls=false">取消</div>
+    </u-popup>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "makeCalls",
+  props: {
+    label: {default: "联系ta"},
+    list: {default: () => []}
+  },
+  data() {
+    return {
+      calls: false
+    }
+  },
+  methods: {
+    handleCall(phone) {
+      location.href = "tel:" + phone
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.makeCalls {
+  img {
+    width: 40px;
+    height: 40px;
+  }
+
+  ::v-deep span {
+    margin-left: 0;
+    color: #999;
+    font-size: 20px;
+
+    p {
+      color: #3D94FB;
+    }
+  }
+
+  ::v-deep .u-drawer {
+    text-align: center;
+
+    .uni-scroll-view-content {
+      max-height: 672px;
+    }
+
+    .option {
+      font-size: 32px;
+      cursor: pointer;
+      line-height: 112px;
+      border-bottom: 1px solid #D8DDE6;
+
+      &:first-of-type {
+        border-radius: 16px 16px 0 0;
+      }
+    }
+  }
+}
+</style>

src/apps/AppGuardianship/component/openMap.vue

@@ -0,0 +1,40 @@
+<template>
+  <section class="openMap">
+    <div flex class="column" shrink @tap="handleOpenMap">
+      <img :src="`${$cdn}guardianship/seat.png`"/>
+      <span v-text="'地图/导航'"/>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "openMap",
+  props: {
+    data: {default: () => ({})}
+  },
+  methods: {
+    handleOpenMap() {
+      let {lng, lat, gpsDesc} = this.data
+      location.href = `https://uri.amap.com/marker?callnative=1&position=${[lng, lat].toString()}&name=${gpsDesc}`
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.openMap {
+  flex-shrink: 0;
+
+  img {
+    width: 40px;
+    height: 40px;
+  }
+
+  span {
+    margin-left: 0;
+    color: #999;
+    font-size: 20px;
+  }
+}
+</style>