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="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,
			}),
		},
		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');
			},
			// 注册
			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>