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";
import request from "@/utils/request";

export default {
	data() {
		return {
			isShowPer: false,   // 控制电话权限说明视图显示
			phone: '19950079687' // 默认号码，接口失败时使用
		}
	},
	onLoad(options) {
		// 调用接口获取客服电话
		this.getCustomerService();
	},
	methods: {
		// 获取客服电话
		async getCustomerService() {
			try {
				const res = await request.post('/sj/poster/getCustomerService');
				if (res.code === 200 && res.data && res.data.phone) {
					this.phone = res.data.phone;
				}
			} catch (error) {
				console.error('获取客服电话失败', error);
			}
		},
		// 拨打电话
		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>