mrr.sj.front/pages/contact/contact.vue

<template>
	<view class="contact-page">
		<!-- 顶部导航栏 -->
		<custom-navbar 
		  title="联系客服" 
		  :show-back="true"
		  title-color="#000"
		  background-color="transparent"
		></custom-navbar>
		<view class="contact-cont">
			<image src="/static/images/concact_icon.png" class="contact-icon" mode="aspectFit"></image>
			<text class="contact-phone">{{phone}}</text>
			<text class="contact-time">工作时间：9:00-18:00</text>
		</view>
		<view class="btn-box" @click="callPhone">
			<text class="btn-text">拨打电话</text>
		</view>
		<!-- 获取权限提示匡内容 -->
		<view class="permission" :class="{ transform: isShowPer }">
			<view class="per-tit">美融融plus 对拨打电话权限申请说明</view>
			<view class="per-cont">当您需要联系商家或平台客服的时候，需要获取拨打电话权限。</view>
		</view>
	</view>
</template>

<script>
import permissionUtils from "@/utils/per";
import locationService from "@/utils/locationService";
	export default {
		data() {
			return {
				isShowPer: false,   // 控制电话权限说明视图显示
				phone: '19950079687'
			}
		},
		onLoad(options) {
			this.phone = options.phone || '19950079687'
		},
		methods: {
			// 拨打电话
			async callPhone() {
				const systemInfo = uni.getSystemInfoSync();
				if (systemInfo.platform === "ios") {
					uni.makePhoneCall({ phoneNumber: this.phone });
				} else {
					let permission = "android.permission.CALL_PHONE";
					this.isShowPer = true;

					// 1. 检查权限
					const { granted } = await permissionUtils.checkPermission(
					"phone",
					"需要拨打电话权限，方便您联系客服"
					);
					if (granted) {
					this.isShowPer = false;
					uni.makePhoneCall({ phoneNumber: this.phone });
					return;
					}

					this.isShowPer = false;
					// 2. 显示权限说明弹窗
					const confirm = await this.showPermissionDialog(
					"拨打电话权限申请",
					"我们需要拨打电话权限，方便您联系客服"
					);
					if (!confirm) return;

					// 3. 请求权限
					const result = await permissionUtils.requestPermission(
					"phone",
					"需要拨打电话权限，方便您联系客服"
					);
					if (result) {
					uni.makePhoneCall({ phoneNumber: this.phone });
					} else {
					locationService.openAppSettings();
					}
				}
				},
			showPermissionDialog(title, content) {
			return new Promise((resolve) => {
				uni.showModal({
				title,
				content,
				confirmText: "去开启",
				success(res) {
					resolve(res.confirm);
				}
				});
			});
			}
		}
	}
</script>

<style>
.contact-cont {
	padding: 80rpx 0 132rpx;
	display: flex;
	flex-flow: column;
	justify-content: space-between;
	align-items: center;
}
.contact-icon {
	width: 145rpx;
	height: 165rpx;
}
.contact-phone {
	font-size: 45rpx;
	font-weight: 500;
	color: #333333;
	margin-top: 40rpx;
	margin-bottom: 24rpx;
}
.contact-time {
	font-size: 30rpx;
	font-weight: 400;
	color: #91908F;
}
.btn-box {
	background: linear-gradient( 180deg, #F52540 0%, #E8101E 100%);
	height: 88rpx;
	border-radius: 43rpx;
	font-weight: 500;
	font-size: 40rpx;
	color: #FFFFFF;
	line-height: 42rpx;
	text-align: left;
	font-style: normal;
	display: flex;
	align-items: center;
	justify-content: center;
}

.permission.transform {
  top: calc(var(--status-bar-height) + 100rpx);
  opacity: 1;
  visibility: visible;
}
</style>