页面

MrShi

6 天以前 87294c97b4c071837b9cf1f0e3a31ff13bf3e40b

 app/pages/index/index.vue

@@ -1,111 +1,79 @@
<template>
   <view class="index">
      <view class="index_list">
         <view class="index_list_item">
            <view class="index_list_item_info">
               <text>SHE事件上报</text>
               <text>FAC/NM</text>
            </view>
            <image src="/static/bg_a.png" mode="widthFix"></image>
         </view>
         <view class="index_list_item">
            <view class="index_list_item_info">
               <text>跌绊滑风险上报</text>
               <text>TAG</text>
            </view>
            <image src="/static/bg_b.png" mode="widthFix"></image>
         </view>
      </view>
   <view style="padding: 40rpx;">
      <button @click="speak('订单已收到，开始播报')">开始播报</button>
   </view>
</template>

<script>
   import { mapState } from 'vuex'
   export default {
      computed: {
         ...mapState(['userInfo'])
      },
      data() {
         return {
            title: 'Hello'
            tts: null // 原生TTS对象
         }
      },
      onLoad() {

      onReady() {
         this.initTTS() // 页面渲染完成初始化语音
      },

      methods: {
         jump(type) {
            switch (type) {
               case 1:
                  uni.navigateTo({
                     url: '/pages/reporting_she/reporting_she'
                  })
                  break;
               case 2:
                  uni.navigateTo({
                     url: '/pages/riskReporting/riskReporting'
                  })
                  break;
               case 3:
                  uni.navigateTo({
                     url: '/pages/report_dca/report_dca'
                  })
                  break;
         // ========== 初始化安卓原生语音 ==========
         initTTS() {
            if (uni.getSystemInfoSync().platform !== 'android') {
               console.log('仅支持安卓')
               return
            }

            try {
               // 导入安卓原生类
               const TextToSpeech = plus.android.importClass('android.speech.tts.TextToSpeech')
               const Locale = plus.android.importClass('java.util.Locale')

               // 创建TTS
               this.tts = new TextToSpeech(plus.android.runtimeMainActivity(), {
                  onInit: (status) => {
                     if (status == 0) {
                        // 设置中文
                        this.tts.setLanguage(Locale.CHINA)
                        console.log('语音初始化成功')
                     }
                  }
               })
            } catch (e) {
               console.log('初始化失败', e)
            }
         },

         // ========== 语音播报（核心方法） ==========
         speak(text) {
            if (!this.tts) {
               uni.showToast({
                  title: '语音未准备好',
                  icon: 'none'
               })
               return
            }

            try {
               // 安卓原生播报（QUEUE_FLUSH = 立即播报，打断上一条）
               this.tts.speak(text, 0, null)
            } catch (err) {
               console.log('播报失败', err)
            }
         },

         // 停止播报
         stopSpeak() {
            if (this.tts) this.tts.stop()
         }
      },

      // 页面销毁时关闭语音
      onUnload() {
         if (this.tts) {
            this.tts.stop()
            this.tts.shutdown()
         }
      }
   }
</script>

<style lang="scss" scoped>
   .index {
      width: 100vw;
      padding: 30rpx;
      box-sizing: border-box;
      height: calc(100vh - 44px - 50px);
      background: linear-gradient( 180deg, #B5D2FF 0%, #FFFFFF 100%);
      .index_list {
         width: 100%;
         display: flex;
         flex-direction: column;
         margin-top: 12rpx;
         .index_list_item {
            width: 100%;
            height: 200rpx;
            margin-bottom: 30rpx;
            position: relative;
            .index_list_item_info {
               width: 100%;
               height: 100%;
               padding: 0 48rpx;
               box-sizing: border-box;
               display: flex;
               justify-content: center;
               flex-direction: column;
               position: relative;
               z-index: 99;
               text {
                  &:nth-child(1) {
                     font-weight: bold;
                     font-size: 34rpx;
                     color: #FFFFFF;
                  }
                  &:nth-child(2) {
                     font-weight: 400;
                     font-size: 26rpx;
                     color: rgba(255,255,255,0.6);
                     margin-top: 10rpx;
                  }
               }
            }
            image {
               width: 100%;
               height: 100%;
               position: absolute;
               top: 0;
               left: 0;
            }
         }
      }
   }
</style>