dvcp_v2_wxcp_app/src/project/biaopin/AppAiInput/AppAiInput.vue

<template>
  <div class="AppAiInput">
    <div class="content-info" v-if="text">{{text}}</div>
    <div class="problem-list">
      <p class="title">请一句话告诉我这些信息：</p>
      <div class="list-content">
        <p>“您排查的户主姓名”</p>
        <p>“户主的性别”</p>
        <p>“户主的联系电话”</p>
        <p>“户主的出生日期”</p>
        <p>“户主的民族”</p>
        <p>“户主家里的家庭人口数”</p>
      </div>
    </div>
    <div class="microphone-info">
      <p class="loading" v-if="isStart">语音录制中...</p>
      <div class="microphone-img" @touchstart="start" @touchend="end">
        <!-- <img src="./img/microphone.png" alt="" @longpress="">  -->
        <u-icon name="mic" color="#fff" size="140" style="margin-top:20px;"></u-icon>
      </div>
      <p class="text">{{isStart ? '松开结束说话' : '按住说话'}}</p>
      <!-- <div class="btn">
        <p class="cancel" @click="cancel">取消</p>
        <p class="confirm" @click="confirm" v-if="text">确定</p>
      </div> -->
    </div>
  </div>
</template>

<script>
import {mapState, mapActions} from "vuex";
export default {
  name: 'AppAiInput',
  appName: '百度AI输入',
  data() {
    return {
      isStart: false,
      text: ''
    }
  },
  computed: {
    ...mapState(['user']),
  },
  onLoad() {
    this.text = ''
    this.injectJWeixin(['startRecord','stopRecord', 'translateVoice'])
  },
  onShow() {
    this.text = ''
    document.title = '婚姻家庭纠纷入户登记表'
  },
  methods: {
    ...mapActions(['injectJWeixin']),
    start() {
      wx.startRecord()
      this.isStart = true
    },
    end() {
      this.isStart = false
      wx.stopRecord({
        success: (res)=> {
          wx.translateVoice({
            localId: res.localId, // 需要识别的音频的本地Id，由录音相关接口获得，音频时长不能超过60秒
            isShowProgressTips: 1, // 默认为1，显示进度提示
            success: (e)=> {
              this.text = this.text + e.translateResult  // 语音识别的结果
              this.confirm()
            }
          });
        }
      });
    },
    confirm() {
      uni.navigateTo({url: `./formEdit?word=${this.text}`})
    },
    cancel() {
      wx.stopRecord()
      this.text = ''
    }
  },
}
</script>

<style lang="scss" scoped>
uni-page-body {
  min-height: 100%;
  // height: 100vh;
  padding-top: 32px;
  background: #fff;
}
.AppAiInput {
  .content-info {
    margin: 0 0 32px 32px;
    width: 686px;
    height: 272px;
    background-image: linear-gradient(157deg, #F7FAFD 2%, #EDF6FF 99%);
    border-radius: 16px;
    padding: 24px 28px 28px 28px;
    font-family: PingFangSC-Regular;
    font-size: 28px;
    color: #222;
    box-sizing: border-box;
    overflow-y: scroll;
  }
  .problem-list {
    margin: 0 0 32px 32px;
    width: 686px;
    height: 520px;
    background: #F5F6F8;
    border-radius: 16px;
    padding: 28px;
    box-sizing: border-box;
    .title {
      line-height: 44px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 32px;
      color: #6C768A;
      text-align: center;
      margin-bottom: 28px;
    }
    .list-content {
      width: 630px;
      height: 392px;
      background: #FFF;
      border-radius: 12px;
      overflow-y: scroll;
      padding: 28px;
      text-align: center;
      box-sizing: border-box;
      p {
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #222;
        line-height: 56px;
      }
    }
  }
  .microphone-info {
    position: fixed;
    bottom: 48px;
    left: 0;
    width: 100%;
    text-align: center;
    .microphone-img {
      width: 216px;
      height: 216px;
      border-radius: 50%;
      background-image: linear-gradient(180deg, #0262F2 25%, #148AFF 99%);
      text-align: center;
      margin-left: 272px;
      margin-bottom: 20px;
      img {
        width: 68px;
        height: 96px;
        margin-top: 62px;
      }
    }
    .text {
      font-family: PingFangSC-Regular;
      font-size: 36px;
      color: #222;
      margin-bottom: 64px;
    }
    .loading {
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #666;
      margin-bottom: 32px;
      text-align: center;
    }
    .btn {
      text-align: center;
      font-family: PingFangSC-Regular;
      font-size: 36px;
      p {
        display: inline-block;
      }
      .cancel {
        color: #999;
      }
      .confirm {
        color: #0262F2;
        margin-left: 120px;
      }
    }

  }
}
</style>