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="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";
	
	import {
		startPhoneListener,
		stopPhoneListener,
		checkIsAutoRecord,
		toCallAutoRecorderPage,
		navigateToCallRecordingSettings,
		jumpToPermissionPage,
		makePhoneCall,
		allRecorderFilesAction,
	} from '@/uni_modules/yao-lister';
	
	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
			}),
		},
		data() {
			return {
				isX5: false,
				isRecord: false,
				isLocation: false,
				system: "",
				deviceBrand: "",
				systemLocation: false
			}
		},
		methods: {
			// 刷新
			handleReset() {
				this.getAllStatus();
				uni.$u.toast("刷新成功");
			},
			// 打开设置
			handleOpenSet() {
				permision.gotoAppPermissionSetting("android.permission.RECORD_AUDIO");
			},
			// 注册
			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";
				});
			}
		},
		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>