录音入口及样式 权限显示隐藏问题，切换句子bug

src/components/Adult/preview/Voicefullscreen.vue

@@ -10,8 +10,8 @@
         <div
           :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']"
         >
-          <div class="top-left">
-            <!-- <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
+          <div class="top-left" v-if="patternType != '录音模式'">
+            <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
               <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
                 <span
                   :class="['bg-green', bgIndex == 1 ? 'active' : '']"
@@ -24,7 +24,7 @@
                   @click="changeBg(0)"
                 ></span>
               </div>
-            </div> -->
+            </div>
             <div
               :class="[
                 'set-fontSize',
@@ -76,21 +76,10 @@
                 ></span>
               </template>
             </div>
-            <div
-              :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-              @click="changeStatus('isKeyboard')"
-              title="键盘控制开启后，可用方向键控制翻页，空格键播放暂停，回车键录音"
-            >
-              <span
-                :class="[
-                  'keyboard-icon',
-                  !isKeyboard ? 'disabled' : '',
-                  isKeyboard && bgIndex == 1 ? 'keyboard-icon-yellow' : '',
-                ]"
-              ></span>
-            </div>
-            <div class="top-middle">
-              <!-- <template v-if="mp3">
+          </div>
+          <div class="top-middle">
+            <template v-if="patternType != '录音模式'">
+              <template v-if="mp3">
                 <AudioLineSentence
                   :key="'sent' + curSentIndex"
                   :mp3="mp3"
@@ -110,8 +99,8 @@
                   @playChange="playChange"
                   @rollSentence="rollSentence"
                 />
-              </template> -->
-              <!-- <div
+              </template>
+              <div
                 :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
                 @click="setStatus"
               >
@@ -126,50 +115,62 @@
                       : '',
                   ]"
                 ></span>
-              </div> -->
-              <div
-                :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-                @click="changePinyin"
-              >
-                <span
-                  :class="[
-                    'pinyin-icon',
-                    !config.isShowPY ? 'disabled' : '',
-                    config.isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : '',
-                  ]"
-                ></span>
-              </div>
-              <div
-                :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-                @click="changeEN"
-              >
-                <span
-                  :class="[
-                    'en-icon',
-                    !enwords ? 'disabled' : '',
-                    !config.isShowEN ? 'disabled' : '',
-                    config.isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
-                  ]"
-                ></span>
-              </div>
-              <div
-                :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-                @click="handleColl"
-                title="点击收藏后可在“个人中心”-“我的收藏”查看"
-              >
-                <span
-                  :class="[
-                    'coll-icon',
-                    !isCollArr[curSentIndex] ? 'disabled' : '',
-                    isCollArr[curSentIndex] && bgIndex == 1
-                      ? 'coll-icon-yellow'
-                      : '',
-                  ]"
-                ></span>
               </div>
+            </template>
+            <div
+              :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+              @click="changeStatus('isKeyboard')"
+              title="键盘控制开启后，可用方向键控制翻页，空格键播放暂停，回车键录音"
+            >
+              <span
+                :class="[
+                  'keyboard-icon',
+                  !isKeyboard ? 'disabled' : '',
+                  isKeyboard && bgIndex == 1 ? 'keyboard-icon-yellow' : '',
+                ]"
+              ></span>
+            </div>
+            <div
+              :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+              @click="changePinyin"
+            >
+              <span
+                :class="[
+                  'pinyin-icon',
+                  !config.isShowPY ? 'disabled' : '',
+                  config.isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : '',
+                ]"
+              ></span>
+            </div>
+            <div
+              :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+              @click="changeEN"
+            >
+              <span
+                :class="[
+                  'en-icon',
+                  !enwords ? 'disabled' : '',
+                  !config.isShowEN ? 'disabled' : '',
+                  config.isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
+                ]"
+              ></span>
+            </div>
+            <div
+              :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+              @click="handleColl"
+              title="点击收藏后可在“个人中心”-“我的收藏”查看"
+            >
+              <span
+                :class="[
+                  'coll-icon',
+                  !isCollArr[curSentIndex] ? 'disabled' : '',
+                  isCollArr[curSentIndex] && bgIndex == 1
+                    ? 'coll-icon-yellow'
+                    : '',
+                ]"
+              ></span>
             </div>
           </div>
-
           <div
             :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
             @click="exitFullScreen"
@@ -514,7 +515,8 @@
           ></div>
         </div>
       </div>
-      <div class="waveform-wrapper">
+      <!-- v-show="patternType == '录音模式'" -->
+      <div class="waveform-wrapper" v-show="patternType == '录音模式'">
         <div class="big" @click="selepaly('yp')">
           <div
             :class="[playList.indexOf('yp') != -1 ? 'play_erji' : 'erji']"
@@ -532,8 +534,6 @@
             <div id="timeline" ref="timeline"></div>
           </div>
         </div>
-
-        <!-- <template v-show="startLyShow"> -->
         <div
           class="big"
           id="ly_big"
@@ -561,29 +561,6 @@
             <div id="timeline_ly" ref="timeline_ly"></div>
           </div>
         </div>
-        <!-- <div class="big ly" @click="selepaly('ly')">
-          <div
-            :class="[playList.indexOf('ly') != -1 ? 'play_erji' : 'erji']"
-            v-if="LYstatus != '未开始'"
-          >
-            <template v-if="playList.indexOf('ly') != -1">
-              <img src="../../../assets/NPC/qp-erji-sele.png" alt="" />
-            </template>
-            <template v-else>
-              <img src="../../../assets/NPC/qp-erji.png" alt="" />
-            </template>
-          </div>
-          <div class="big_dv2">
-            <canvas id="canvas" style="display: none; height: 134px"></canvas>
-            <canvas
-              id="playChart"
-              style="display: none; height: 134px"
-            ></canvas>
-          </div>
-        </div> -->
-
-        <!-- </template> -->
-
         <div id="waveform" ref="waveform" style="margin-top: 20px" />
       </div>
       <div class="voicefull-bottom">
@@ -642,44 +619,54 @@
                 :key="'mp3Compare' + curSentIndex"
               />
             </div> -->
-            <template v-if="LYstatus == '未开始' || LYstatus == '已结束'">
-              <img
-                @click="startLY"
-                src="../../../assets/NPC/qp-ly-start.png"
-                alt=""
-              />
-            </template>
-            <template v-else-if="LYstatus == '录音中'">
-              <img
-                @click="stopLY"
-                src="../../../assets/NPC/qp-ly-stop.png"
-                alt=""
-                style="margin-right: 20px"
-              />
-              <img
-                @click="endLY"
-                src="../../../assets/NPC/qp-ly-end.png"
-                alt=""
-              />
-            </template>
-            <template v-else-if="LYstatus == '暂停中'">
-              <img
-                @click="goonLY"
-                src="../../../assets/NPC/qp-ly-jx.png"
-                alt=""
-                style="margin-right: 20px"
-              />
-              <img
-                @click="endLY"
-                src="../../../assets/NPC/qp-ly-end.png"
-                alt=""
-              />
+            <template v-if="patternType == '录音模式'">
+              <template v-if="LYstatus == '未开始' || LYstatus == '已结束'">
+                <img
+                  @click="startLY"
+                  src="../../../assets/NPC/qp-ly-start.png"
+                  alt=""
+                />
+              </template>
+              <template v-else-if="LYstatus == '录音中'">
+                <img
+                  @click="stopLY"
+                  src="../../../assets/NPC/qp-ly-stop.png"
+                  alt=""
+                  style="margin-right: 20px"
+                />
+                <img
+                  @click="endLY"
+                  src="../../../assets/NPC/qp-ly-end.png"
+                  alt=""
+                />
+              </template>
+              <template v-else-if="LYstatus == '暂停中'">
+                <img
+                  @click="goonLY"
+                  src="../../../assets/NPC/qp-ly-jx.png"
+                  alt=""
+                  style="margin-right: 20px"
+                />
+                <img
+                  @click="endLY"
+                  src="../../../assets/NPC/qp-ly-end.png"
+                  alt=""
+                />
+              </template>
+              <template v-else>
+                <span @click="playLY"> 播放录音 </span>
+              </template>
             </template>
             <template v-else>
-              <span @click="playLY"> 播放录音 </span>
+              <div class="pattern" style="margin-right: 27px">
+                <img src="../../../assets/NPC/biaozhu-pattern.png" alt="" />
+              </div>
+              <div class="pattern" @click="cutPatternType('录音模式')">
+                <img src="../../../assets/NPC/luyin-pattern.png" alt="" />
+              </div>
             </template>
           </div>
-          <div>
+          <div v-if="patternType == '录音模式'">
             <div class="cuttentime">{{ ShowcurentTime }}</div>
             <div class="operate">
               <img
@@ -896,6 +883,7 @@ export default {
   ],
   data() {
     return {
+      patternType: "",
       playList: [],
       // recorder: new Recorder({
       //   sampleBits: 16, // 采样位数，支持 8 或 16，默认是16
@@ -1082,6 +1070,13 @@ export default {
   },
   //方法集合
   methods: {
+    // 切换录音模式
+    cutPatternType(type) {
+      this.patternType = type;
+      if (type == "录音模式") {
+        this.initaudioImage();
+      }
+    },
     selepaly(type) {
       if (this.LYstatus == "未开始") {
         return;
@@ -1803,7 +1798,7 @@ export default {
     changeBg(bgIndex) {
       this.bgIndex = bgIndex;
     },
-    getSentence() {
+    getSentence(type) {
       let _this = this;
       _this.isShowCompare =
         _this.curQue.Bookanswer.practiceModel[_this.curSentIndex] &&
@@ -1830,12 +1825,20 @@ export default {
       } else {
         _this.maxTime = maxTime;
       }
-      if (this.curQue.Bookanswer.practiceModel[this.curSentIndex]) {
-        this.curjuzi(
-          this.curQue.Bookanswer.practiceModel[this.curSentIndex].recordSrc
-        );
+      if (this.patternType == "录音模式") {
+        if (this.curQue.Bookanswer.practiceModel[this.curSentIndex]) {
+          this.curjuzi(
+            this.curQue.Bookanswer.practiceModel[this.curSentIndex].recordSrc
+          );
+        } else {
+          this.curjuzi();
+        }
       } else {
-        this.curjuzi();
+        _this.$nextTick(() => {
+          if (_this.$refs.audioLineSent) {
+            _this.$refs.audioLineSent.PlayAudio();
+          }
+        });
       }
       _this.checkCollStatus();
     },
@@ -2021,7 +2024,6 @@ export default {
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     // this.startCanvas();
-    this.initaudioImage();
     let _this = this;
     $(window).resize(() => {
       _this.getScreenHeight();
@@ -2051,7 +2053,7 @@ export default {
       _this.handleNewword();
     }
     _this.curSentIndex = _this.sentIndex;
-    _this.getSentence();
+    _this.getSentence("first");
     document.addEventListener("fullscreenchange", () => {
       let isFullscreen =
         document.fullscreenElement ||
@@ -2733,6 +2735,21 @@ export default {
       justify-content: flex-start;
       align-items: center;
       padding-left: 40px;
+      .pattern {
+        width: 56px;
+        height: 56px;
+        background: #ffffff;
+        border: 1px solid rgba(0, 0, 0, 0.1);
+        border-radius: 40px;
+        cursor: pointer;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        img {
+          width: 24px;
+          height: 24px;
+        }
+      }
       > img {
         width: 72px;
         height: 48px;