Phone-APP/pages/setting/setting.vue

<!-- 
修改了语音开关，提供语音安装包下载途径，实际实现了语音控制
编写人：吴宝松
最后修改时间：2024.9.28
本代码是设置页面，提供设置选项。设置包括使用说明书、联系人排序方式、地理位置显示、语音播报、版本查询及更新。
编写人：张志宏
最后更新时间：8.21
修改联系人排序及来电地址显示框高度
 -->
<template>
	<view class="content">
		<!-- 使用说明书 -->
	  <view class="using-manual">
			<p class="text-left">使用说明书</p>
			<image class="enter-right" src="../../static/pics/enter-right.png" mode=""></image>
	  </view>
		<!-- 语音播报 -->
	  <view class="voice-broadcast" @click="toggleSwitch()">
	    <p class="text-left">语音播报</p>
	    <view class="icon">
	      <image v-if="switchStatus" class="voice-switch" src="../../static/pics/switch-on.png" mode=""></image>
	      <image v-else class="voice-switch" src="../../static/pics/switch-off.png" mode=""></image>
	    </view>
	  </view>
		<!-- 版本信息 -->
	  <view class="version-details">
		<p class="text-left">当前版本</p>
		{{version_number}}
	  </view>
	  <view class="version-details">
	  		<p class="text-left">到期时间</p>
	  		{{version_number}}
	  </view>
	  <view class="version-details" @click="navigateToPage()">
	    <p class="text-left">联系我们</p>
	    <image class="enter-right" src="../../static/pics/enter-right.png" mode=""></image>
	  </view>
	</view>
</template>
<script>
	export default{
		data(){
			return{
				version_number:"",
				switchStatus:false,//语音播报开关初始为关闭状态
			};		
		},
		methods: {
		  navigateToPage() {
			uni.navigateTo({
			  url: '/pages/contact/contact'
			});
		  },
		
		  currentVersion() {
		    this.version_number = "1.0.0";
		  },
		  // 判断是否为 Android 平台的 App 环境
		  isApp() {
		    const platform = uni.getSystemInfoSync().platform;
		    return platform === 'android' && typeof plus !== 'undefined';
		  },
		  
		  // 检测 TTS 引擎是否已安装
		  checkTTSInstalled(packageName) {
		    if (this.isApp()) {
		      try {
		        return plus.runtime.isApplicationExist({ pname: packageName });
		      } catch (error) {
		        console.error("检测TTS安装失败: ", error);
		      }
		    }
		    return false;
		  },
		  
		  // 请求 Android 权限
		  requestAndroidPermissions(callback) {
		    if (this.isApp()) {
		      const main = plus.android.runtimeMainActivity();
		      const permissions = [
		        "android.permission.WRITE_EXTERNAL_STORAGE",  
		        "android.permission.REQUEST_INSTALL_PACKAGES"
		      ];
		  
		      const ActivityCompat = plus.android.importClass("androidx.core.app.ActivityCompat");
		      
		      permissions.forEach(permission => {
		        const hasPermission = ActivityCompat.checkSelfPermission(main, permission);
		        if (hasPermission !== 0) { 
		          ActivityCompat.requestPermissions(main, [permission], 0);
		        }
		      });
		  
		      callback();
		    }
		  },
		  
		  // 安装 APK
		  installAPK() {
		    if (this.isApp()) {
		      const apkPath = plus.io.convertLocalFileSystemURL("/static/tts_engine.apk");
		  
		      plus.runtime.install(apkPath, {}, () => {
		        console.log('APK安装成功');
		        this.switchStatus = true; // 安装成功后开启开关
		        this.saveSwitchStatus();  // 保存当前开关状态
		      }, (error) => {
		        console.error('APK安装失败: ', error.message);
		      });
		    }
		  },
		  
		  // 切换开关状态
		  toggleSwitch() {
		    const ttsPackageName = "com.iflytek.speechcloud"; 
		  
		    if (this.switchStatus) {
		      // 关闭语音播报的逻辑
		      console.log("关闭语音播报");
		      // 可以添加其他关闭逻辑，例如停止 TTS 服务
		      this.switchStatus = false; // 切换状态为关闭
		    } else {
		      // 开启语音播报，先请求权限再检测 TTS 是否已安装
		      this.requestAndroidPermissions(() => {
		        if (!this.checkTTSInstalled(ttsPackageName)) {
		          this.installAPK();
		        } else {
		          console.log('TTS引擎已安装');
		          this.switchStatus = true; // 切换状态为开启
		        }
		      });
		    }
		    this.saveSwitchStatus();  // 保存当前开关状态
		  },
		  
		  // 保存当前开关状态到本地存储
		  saveSwitchStatus() {
		    uni.setStorageSync('voiceBroadcastSwitch', this.switchStatus);
		  },
		  
		  // 初始化应用时读取本地存储的开关状态
		  initializeApp() {
		    const ttsPackageName = "com.iflytek.speechcloud";
		  
		    // 从本地存储中读取开关状态
		    const storedSwitchStatus = uni.getStorageSync('voiceBroadcastSwitch');
		    console.log("读取的本地存储状态：", storedSwitchStatus);
		  
		    // 检测 TTS 引擎是否存在
		    const isTTSInstalled = this.checkTTSInstalled(ttsPackageName);
		  
		    if (typeof storedSwitchStatus === 'boolean') {
		      // 如果本地存储的开关状态为开启，但 TTS 引擎已被卸载
		      if (storedSwitchStatus && !isTTSInstalled) {
		        console.log("检测到本地存储为开启状态，但 TTS 引擎已被卸载，重置为关闭状态");
		        this.switchStatus = false;
		        uni.setStorageSync('voiceBroadcastSwitch', false); // 更新存储状态为关闭
		      } else {
		        this.switchStatus = storedSwitchStatus;
		      }
		    } else if (isTTSInstalled) {
		      // 如果没有存储的状态，但检测到 TTS 引擎已安装，默认开启
		      console.log("检测到 TTS 引擎已安装，默认开启语音播报");
		      this.switchStatus = true;
		      uni.setStorageSync('voiceBroadcastSwitch', true); // 存储状态为开启
		    } else {
		      // 如果没有存储的状态，且 TTS 引擎未安装，则默认关闭
		      console.log("TTS 引擎未安装，默认关闭语音播报");
		      this.switchStatus = false;
		    }
		  },
		  contactUs() {
		    uni.showModal({
		      title: '联系我们',
		      content: '邮箱：example@example.com',
		      showCancel: false, // 是否显示取消按钮
		      confirmText: '确定', // 确认按钮文字
		      success: (res) => {
		        if (res.confirm) {
		          console.log('用户点击确定');
		        }
		      }
		    });
		  }
		},
		mounted() {
		  this.initializeApp(); // 初始化应用
		},
		//创建时启动方法
		created() {
			this.currentVersion();
		}
	}
</script>
<style>
.content{
	/*整体容器，flex布局，垂直排列子元素并居中对齐，子元素从上开始对齐，高度占满整个视口*/
	display: flex;
	align-items: center;
	flex-direction: column;	
	justify-content: flex-start;
	width: 100vw;
	height: 100vh;
	background-color: #f0efef;
}
	
.using-manual{
	/*使用说明书，flex布局，文本与enter-right两侧对齐*/
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	margin-top: 30rpx;
	font-size: 60rpx;
	font-weight: 60;
}
	
.enter-right{
	/*使用说明书右侧按钮，右对齐，高度，宽度。*/
	margin-right: 10rpx;
	height: 60rpx;
	width: 60rpx;
}
	


.numbers-of-call{
	margin-top: 10rpx;	
}

.voice-broadcast{
	/*语音播报flex布局，space-between水平均匀分布，为每个块元素之间添加间距*/
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	margin-bottom: 10rpx; 
	font-size: 60rpx;
	font-weight: 60;
}
	
.voice-switch{
	margin-top: 10rpx;
	width: 120rpx;
	height: 130rpx;
}
	
.version-details {
    display: flex;
	align-items: center;
	justify-content: space-between;
	height: 90rpx;
	font-size: 60rpx;
	font-weight: 60;
}
	
.using-manual,.contact-sorting, .incoming-call-address-display,.voice-broadcast,.version-details {		
    /*所有组件的间距、宽度、边框、内间距、背景颜色、边框弧度、左右外间距、字体类型*/
	margin-bottom: 10rpx; 
	width: 90%;
	border: 1px solid #e0e0e0;
	padding: 10rpx;
	background-color: #ffffff;
	border-radius: 20rpx;
	margin-left: 10rpx;
	margin-right: 10rpx;
	margin-bottom: 10rpx;
}
	
.line{
	/*分隔线，宽度、height参数为分隔线的粗细、颜色、上下间隔*/
	width: 96%;
	height: 1rpx;
	background-color: #dbdbdb;
	margin: 9rpx 0;
}
	
.initial{
	text-align: left;
}
	
.text-left{
	text-align: left;
}
	
</style>