H5/pages/map/model/telList.vue

<template>
	<uni-popup ref="telRef" :isMaskClick='true' type="center" border-radius="10px 10px 0 0" maskBackgroundColor='rgba(0, 0, 0, 0.1)'>
		<view class="tel-box">
			<view class="tel-title">请选择电话拨打</view>
			<view class="tel-number">
				<view class="tel-number-item" v-for="item in telList" @click.stop="onPhoneCall(item.phone)">
					<text>{{item.phone}}</text>
					<text style="margin-left: 15rpx;" v-if="item.remark">({{item.remark}})</text>
				</view>
			</view>
			<view class="tel-btns" @click.stop="onClose()">
				<view class="tel-btn">关闭</view>
			</view>
		</view>
	</uni-popup>
</template>

<script>
	import { PhoneCall } from "@/utils/tool.js";
	export default {
		data() {
			return {
				telList: []
			}
		},
		mounted() {
			// this.$refs.telRef.open()
		},
		methods: {
			open(parmas = {}) {
				const { tel } = parmas;
				if (tel) {
					if (tel.length === 1 && !tel[0].remark) {
						this.onPhoneCall(tel[0].phone)
					} else {
						this.telList = tel;
						this.$refs.telRef.open()
					}
				}
			},
			onPhoneCall(phone) {
				PhoneCall(phone).then(res => {
					this.onClose()
				})
			},
			onClose() {
				this.$refs.telRef.close()
				this.telList = [];
			}
		}
	}
</script>

<style lang="scss" scoped>
	.uni-popup {
		z-index: 1002;

		.tel-box {
			width: 80vw;
			min-height: 30vh;
			height: auto;
			max-height: 70vh;
			background-color: #fff;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			// justify-content: center;
			align-items: center;
			justify-content: space-between;

			.tel-title {
				font-size: 36rpx;
				padding: 20rpx 0;
			}

			.tel-number {
				height: 1px;
				flex: 1;
				overflow: hidden;
				overflow-y: auto;

				.tel-number-item {
					padding: 20rpx;
					color: #3291F8;
				}
			}

			.tel-btns {
				padding: 20rpx 0;

				.tel-btn {
					width: 260rpx;
					height: 80rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					color: #fff;
					border-radius: 10rpx;
					background-color: #3291F8;
				}

			}
		}
	}
</style>