crm-app-vue3/pages/circumstances/index.vue

<template>
	<view class="cirumstances_wrap">
		<u-navbar placeholder :autoBack="true" title="环境监测" v-hideNav>
			<view class="u-nav-slot right_btn" slot="right">
				<view class="reset" @click="handleReset">
					<u-icon name="reload" color="#108CFF"></u-icon>刷新
				</view>
			</view>
		</u-navbar>
		<view class="option_list">
			<view class="option_item">
				<view class="item_left">
					<text class="label">登录用户</text>
				</view>
				<view class="item-right">
					<text>{{ nickName }}</text>
				</view>
			</view>
			<template v-if="isCallOff === '1'">
				<view class="option_item">
					<view class="item_left">
						<text class="label">外呼分机号</text>
					</view>
					<view class="item-right">
						<text>{{
							callAccount ? callAccount.extenNum : "未配置分机号"
						}}</text>
					</view>
				</view>
				<view class="option_item">
					<view class="item_left">
						<text class="label">外呼注册状态</text>
					</view>
					<view class="item-right" @longpress="handleRegisterFun">
						<text v-if="callAccount != null && callSystem != null">
							{{ ipAddress }}
						</text>
						<text class="btn" v-else @click="handleRegisterFun">点击注册</text>
						<icon-img :value="callAccount != null && callSystem != null"></icon-img>
					</view>
				</view>
				<view class="option_item">
					<view class="item_left">
						<text class="label">外呼签入状态</text>
					</view>
					<view class="item-right">
						<text v-if="signInState">正常</text>
						<text class="btn" v-else @click="handleRegisterFun">点击签入</text>
						<icon-img :value="signInState"></icon-img>
						<icon-img :value="redisStatus"></icon-img>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="option_item">
					<view class="item_left">
						<text class="label">呼叫中心</text>
					</view>
					<view class="item-right" @longpress="handleRegisterFun">
						<text>不启用</text>
						<icon-img :value="isCallOff === '1'"></icon-img>
					</view>
				</view>
			</template>
			<view class="option_item">
				<view class="item_left">
					<text class="label">麦克风权限</text>
				</view>
				<view class="item-right">
					<text v-if="isRecord">已授权</text>
					<text class="btn" v-else @click="handleOpenSet">点击授权</text>
					<icon-img :value="isRecord"></icon-img>
				</view>
			</view>
			<!-- 通话自动录音状态 -->
			<view class="option_item">
				<view class="item_left">
					<text class="label">通话自动录音</text>
				</view>
				<view class="item-right">
					<text v-if="isAutoRecord">已开启</text>
					<text class="btn" v-else @click="toCallRecorderSettings">点击开启</text>
					<icon-img :value="isAutoRecord"></icon-img>
				</view>
			</view>
			<!-- 文件访问权限状态 -->
			<view class="option_item">
				<view class="item_left">
					<text class="label">文件访问权限</text>
				</view>
				<view class="item-right">
					<text v-if="hasStoragePermission">已授权</text>
					<text class="btn" v-else @click="requestStoragePermission">点击授权</text>
					<icon-img :value="hasStoragePermission"></icon-img>
				</view>
			</view>
			<!-- 读取手机状态权限 -->
			<view class="option_item">
				<view class="item_left">
					<text class="label">读取手机状态</text>
				</view>
				<view class="item-right">
					<text v-if="hasReadPhoneStatePermission">已授权</text>
					<text class="btn" v-else @click="handleOpenSet">点击授权</text>
					<icon-img :value="hasReadPhoneStatePermission"></icon-img>
				</view>
			</view>
			<!-- 拨打电话权限 -->
			<view class="option_item">
				<view class="item_left">
					<text class="label">拨打电话</text>
				</view>
				<view class="item-right">
					<text v-if="hasCallPhonePermission">已授权</text>
					<text class="btn" v-else @click="handleOpenSet">点击授权</text>
					<icon-img :value="hasCallPhonePermission"></icon-img>
				</view>
			</view>
			<!-- 读取通话记录权限 -->
			<view class="option_item">
				<view class="item_left">
					<text class="label">读取通话记录</text>
				</view>
				<view class="item-right">
					<text v-if="hasReadCallLogPermission">已授权</text>
					<text class="btn" v-else @click="handleOpenSet">点击授权</text>
					<icon-img :value="hasReadCallLogPermission"></icon-img>
				</view>
			</view>
			<!-- 读取电话号码权限 -->
			<view class="option_item">
				<view class="item_left">
					<text class="label">读取电话号码</text>
				</view>
				<view class="item-right">
					<text v-if="hasReadPhoneNumbersPermission">已授权</text>
					<text class="btn" v-else @click="handleOpenSet">点击授权</text>
					<icon-img :value="hasReadPhoneNumbersPermission"></icon-img>
				</view>
			</view>
			<!-- 电话监听状态 -->
			<view class="option_item">
				<view class="item_left">
					<text class="label">电话监听</text>
				</view>
				<view class="item-right">
					<text v-if="isPhoneListening">监听中</text>
					<text class="btn" v-else @click="togglePhoneListener">点击开始</text>
					<icon-img :value="isPhoneListening"></icon-img>
				</view>
			</view>
			<view class="option_item">
				<view class="item_left">
					<text class="label">定位服务</text>
				</view>
				<view class="item-right">
					<text v-if="systemLocation">已开启</text>
					<text v-else>未开启</text>
					<icon-img :value="systemLocation"></icon-img>
				</view>
			</view>
			<view class="option_item">
				<view class="item_left">
					<text class="label">定位权限</text>
				</view>
				<view class="item-right">
					<text v-if="isLocation">已授权</text>
					<text class="btn" v-else @click="handleOpenSet">点击授权</text>
					<icon-img :value="isLocation"></icon-img>
				</view>
			</view>
			<view class="option_item">
				<view class="item_left">
					<text class="label">X5引擎</text>
				</view>
				<view class="item-right">
					<text v-if="isX5">启用</text>
					<text v-else>不启用</text>
					<icon-img :value="isX5"></icon-img>
				</view>
			</view>
			<view class="option_item">
				<view class="item_left">
					<text class="label">品牌型号</text>
				</view>
				<view class="item-right">
					<text>{{ deviceBrand }}</text>
				</view>
			</view>
			<view class="option_item">
				<view class="item_left">
					<text class="label">所用系统</text>
				</view>
				<view class="item-right">
					<text>{{ system }}</text>
				</view>
			</view>
		</view>
		<view class="tips_wrap" @longpress="handleOpenSet">
			<view class="left">
				<image src="../../static/circumstances/success.png" mode="" class="icon_img">
				</image>
				<text>正常</text>
			</view>
			<view class="right">
				<image src="../../static/circumstances/error.png" mode="" class="icon_img"></image>
				<text>不正常</text>
			</view>
		</view>
	</view>
</template>

<script>
import {
	mapState
} from "vuex";
import iconImg from "./components/iconImg.vue";
import permision from "@/js_sdk/wa-permission/permission.js";

export default {
	components: {
		iconImg,
	},
	computed: {
		...mapState({
			nickName: (state) => state.user.userInfo.nickName,
			callAccount: (state) => state.app.callAccount,
			signInState: (state) => state.app.signInState,
			ipAddress: (state) =>
				state.app.registerInfo && state.app.registerInfo.register ?
					state.app.registerInfo.register["IPv4"].slice(-3) : "异常",
			redisStatus: (state) => state.app.redisStatus,
			callSystem: (state) => state.app.callSystem,
			uuid: (state) => state.user.uuid,
			isCallOff: (state) => state.user.netConfig.isCallOff,
			// 从call store获取权限状态
			isAutoRecord: (state) => state.call.isAutoRecord,
			hasStoragePermission: (state) => state.call.hasStoragePermission,
			hasReadPhoneStatePermission: (state) => state.call.hasReadPhoneStatePermission,
			hasCallPhonePermission: (state) => state.call.hasCallPhonePermission,
			hasReadCallLogPermission: (state) => state.call.hasReadCallLogPermission,
			hasReadPhoneNumbersPermission: (state) => state.call.hasReadPhoneNumbersPermission,
			isPhoneListening: (state) => state.call.isPhoneListening,
		}),
	},
	data() {
		return {
			isX5: false,
			isRecord: false,
			isLocation: false,
			system: "",
			deviceBrand: "",
			systemLocation: false,
		};
	},
	methods: {
		// 刷新
		handleReset() {
			this.getAllStatus();
			uni.$u.toast("刷新成功");
		},
		// 打开设置
		handleOpenSet() {
			this.$store.dispatch('call/handleOpenSet');
		},
		// 请求文件访问权限
		requestStoragePermission() {
			this.$store.dispatch('call/requestStoragePermission');
		},
		// 跳转到通话录音设置页面
		toCallRecorderSettings() {
			this.$store.dispatch('call/toCallRecorderSettings');
		},
		// 跳转到系统通话录音界面
		toSystemRecorderSettings() {
			this.$store.dispatch('call/toSystemRecorderSettings');
		},
		// 切换电话监听状态
		togglePhoneListener() {
			this.$store.dispatch('call/togglePhoneListener')
				.then(() => {
					const status = this.isPhoneListening ? '已停止' : '已启动';
					uni.$u.toast(`电话监听${status}`);
				})
				.catch(error => {
					uni.$u.toast('操作失败，请重试');
					console.error('切换电话监听状态失败:', error);
				});
		},
		// 注册
		handleRegisterFun() {
			this.$store
				.dispatch("app/getExtensionByUserId", {
					userId: this.$store.state.user.userInfo.userId,
				})
				.then((res) => {
					Promise.all([
						permision.requestAndroidPermission(
							"android.permission.RECORD_AUDIO"
						),
						permision.requestAndroidPermission(
							"android.permission.MODIFY_AUDIO_SETTINGS"
						),
					]).then((result) => {
						const flag = result.every((v) => v == 1);
						if (flag) {
							this.$store.dispatch("app/createWv");
						}
					});
				});
		},
		// 检测定位服务是否开启
		checkSystemEnableLocation() {
			let context = plus.android.importClass("android.content.Context");
			let locationManager = plus.android.importClass(
				"android.location.LocationManager"
			);
			let main = plus.android.runtimeMainActivity();
			let mainSvr = main.getSystemService(context.LOCATION_SERVICE);
			let result = mainSvr.isProviderEnabled(locationManager.GPS_PROVIDER);
			return result;
		},
		getAllStatus() {
			uni.getSystemInfo({
				success: (res) => {
					this.deviceBrand = res.deviceBrand + " " + res.model;
					this.system = res.system ? res.system : "获取失败";
					this.isX5 = res.browserName.includes("x5");
				},
			});

			// 检查麦克风权限
			permision
				.requestAndroidPermission("android.permission.RECORD_AUDIO")
				.then((result) => {
					this.isRecord = result == "1";
				});

			// 检查定位服务状态
			this.systemLocation = this.checkSystemEnableLocation();

			// 检查定位权限
			permision
				.requestAndroidPermission("android.permission.ACCESS_FINE_LOCATION")
				.then((result) => {
					this.isLocation = result == "1";
				});

			// 从store检查所有其他权限状态
			this.$store.dispatch('call/checkAllPermissions');
		},
	},
	mounted() {
		this.getAllStatus();
	},
};
</script>

<style lang="scss" scoped>
.right_btn {
	display: flex;
	align-items: center;
	font-size: 14px;

	.copy_btn {
		display: flex;
		align-items: center;
		margin-right: 20rpx;
	}

	.reset {
		display: flex;
		align-items: center;
	}
}

.tips_wrap {
	display: flex;
	align-items: center;
	justify-content: space-evenly;
	height: 40px;
	background: #ececec;
	border-radius: 4px;
	margin-top: 15px;
	margin-left: 15px;
	margin-right: 15px;
	margin-bottom: 50px;

	.right {
		display: flex;
		align-items: center;
	}

	.left {
		display: flex;
		align-items: center;
	}

	.icon_img {
		width: 40rpx;
		height: 40rpx;
		margin-right: 20rpx;
	}
}

.option_list {
	margin-top: 30rpx;
	padding: 0 30rpx;

	.option_item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 36rpx;
		padding-top: 36rpx;
		border-bottom: 2rpx solid #dfdfdf;

		.item_left {
			display: flex;
			align-items: center;

			image {
				width: 32rpx;
				height: 32rpx;
				margin-right: 20rpx;
			}

			.label {
				font-size: 28rpx;
				color: #202020;
			}
		}

		.item-right {
			display: flex;
			justify-content: space-between;
			align-items: center;

			text {
				font-size: 24rpx;
				color: #999999;
				margin-right: 10rpx;
			}

			.btn {
				color: #108cff;
			}

			.icon_img {
				width: 40rpx;
				height: 40rpx;
			}
		}
	}
}
</style>