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

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>