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="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 {
  checkIsAutoRecord,
  toCallAutoRecorderPage,
  navigateToCallRecordingSettings,
  jumpToPermissionPage,
} 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,
      isAutoRecord: false, // 通话自动录音状态
      hasStoragePermission: false, // 文件访问权限状态
    };
  },
  methods: {
    // 刷新
    handleReset() {
      this.getAllStatus();
      uni.$u.toast("刷新成功");
    },
    // 打开设置
    handleOpenSet() {
      permision.gotoAppPermissionSetting("android.permission.RECORD_AUDIO");
    },
    // 请求文件访问权限
    requestStoragePermission() {
      jumpToPermissionPage();
    },
    // 跳转到通话录音设置页面
    toCallRecorderSettings() {
      toCallAutoRecorderPage();
    },
    // 跳转到系统通话录音界面
    toSystemRecorderSettings() {
      navigateToCallRecordingSettings();
    },
    // 注册
    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");
          // 获取Android版本号
          let androidVersion = 0;
          if (this.system && this.system.includes("Android")) {
            const versionMatch = this.system.match(/Android (\d+\.?\d*)/);
            if (versionMatch && versionMatch[1]) {
              androidVersion = parseFloat(versionMatch[1]);
            }
          }

          // 检查文件访问权限
          if (androidVersion >= 11) {
            // Android 11及以上版本，使用MANAGE_EXTERNAL_STORAGE权限（特殊权限）
            try {
              // 使用Android原生API检查特殊权限
              const Environment = plus.android.importClass("android.os.Environment");
              const Context = plus.android.importClass("android.content.Context");
              const mainActivity = plus.android.runtimeMainActivity();
              // 检查是否有管理外部存储的权限
              this.hasStoragePermission = Environment.isExternalStorageManager();
              console.log('MANAGE_EXTERNAL_STORAGE权限状态:', this.hasStoragePermission);
            } catch (e) {
              console.error('检查存储权限失败:', e);
              this.hasStoragePermission = false;
            }
          } else {
            // Android 11以下版本，使用READ_EXTERNAL_STORAGE权限
            permision
              .requestAndroidPermission(
                "android.permission.READ_EXTERNAL_STORAGE"
              )
              .then((result) => {
                this.hasStoragePermission = result === 1;
              });
          }
        },
      });

      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";
        });

      // 检查通话自动录音状态
      this.isAutoRecord = checkIsAutoRecord();
    },
  },
  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>