76 lines
1.4 KiB
Vue
76 lines
1.4 KiB
Vue
<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}AppGuardianship/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>
|