语音全屏

src/components/Adult/preview/AudioLineSentence.vue

@@ -12,11 +12,7 @@
         ]"
       />
     </div>
-    <input
-      style="position: absolute; top: -1000px; left: -100px; width: 5px"
-      autocomplete="false"
-      @keyup.space="PlayAudio"
-    />
+
     <!-- <div :class="['audioLine', bgIndex == 1 ? 'audioLine-green' : '']">
       <div
         class="play"
@@ -84,6 +80,8 @@ export default {
     "hideSlider",
     "bgIndex",
     "wordPlay",
+    "isAuto",
+    "curTime",
   ],
   data() {
     // 这里存放数据
@@ -147,6 +145,9 @@ export default {
       if (_this.wordPlay) {
         _this.PlayAudio();
       }
+      if (_this.isAuto) {
+        _this.PlayAudio();
+      }
     });
 
     let audioId = _this.audioId;
@@ -215,11 +216,13 @@ export default {
       } else {
         if (this.count == 0) {
           this.audio.loading = true;
-          this.count++;
         }
 
         this.$refs[audioId].play();
-        this.onTimeupdateTime(this.bg / 1000);
+        if (this.count == 0) {
+          this.onTimeupdateTime(this.bg / 1000);
+          this.count++;
+        }
 
         this.$emit("handleChangeStopAudio");
         this.$emit("handleListenRead", true);

src/components/Adult/preview/DialogueArticleViewChs/Practicechs.vue

@@ -363,7 +363,7 @@
     </template>
     <div class="voice-full-screen" :id="'screen-' + mathNum">
       <Voicefullscreen
-        v-if="isFull && resObj"
+        v-if="isFull&&resObj"
         :themeColor="themeColor"
         :curQue="curQue"
         :sentList="resObj.sentList"

src/components/Adult/preview/Soundrecorddiff.vue

@@ -33,7 +33,7 @@
       >
         <el-option
           v-for="(item, index) in recordList"
-          :key="item.id"
+          :key="'recordList' + index"
           :label="item.name"
           :value="index"
         />

src/components/Adult/preview/Voicefullscreen.vue

@@ -1,113 +1,142 @@
 <!--  -->
 <template>
   <div :class="['voicefull', bgIndex == 0 ? 'bg1' : 'bg2']" v-if="sentList">
-    <div class="voicefull-top">
-      <div class="top-left">
-        <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
-          <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
+    <div
+      class="voicefull-top"
+      @mouseover="setTopShow(true)"
+      @mouseleave="setTopShow(false)"
+    >
+      <div :class="[isTopShow ? 'voicefull-top-show' : 'voicefull-top-hidden']">
+        <div class="top-left">
+          <div :class="['select-bg', bgIndex == 1 ? 'select-bg-blue' : '']">
+            <div :class="['bg-white-box', bgIndex == 0 ? 'active' : '']">
+              <span
+                :class="['bg-white', bgIndex == 0 ? 'active' : '']"
+                @click="changeBg(0)"
+              ></span>
+            </div>
+            <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
+              <span
+                :class="['bg-green', bgIndex == 1 ? 'active' : '']"
+                @click="changeBg(1)"
+              ></span>
+            </div>
+          </div>
+          <div class="set-fontSize">
+            <span
+              :class="[
+                'font-jian-black',
+                bgIndex == 1 ? 'font-jian-yellow' : '',
+              ]"
+              @click="setFontSize('-')"
+            ></span>
             <span
-              :class="['bg-white', bgIndex == 0 ? 'active' : '']"
-              @click="changeBg(0)"
+              :class="[
+                'font-img-black',
+                bgIndex == 1 ? 'font-jian-yellow' : '',
+              ]"
+            ></span>
+            <span
+              :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow' : '']"
+              @click="setFontSize('+')"
             ></span>
           </div>
-          <div :class="['bg-green-box', bgIndex == 1 ? 'active' : '']">
+          <div
+            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+            @click="changeStatus('isKeyboard')"
+          >
             <span
-              :class="['bg-green', bgIndex == 1 ? 'active' : '']"
-              @click="changeBg(1)"
+              :class="[
+                'keyboard-icon',
+                !isKeyboard ? 'disabled' : '',
+                isKeyboard && bgIndex == 1 ? 'keyboard-icon-yellow' : '',
+              ]"
             ></span>
           </div>
         </div>
-        <div class="set-fontSize">
-          <span
-            :class="['font-jian-black', bgIndex == 1 ? 'font-jian-yellow' : '']"
-            @click="setFontSize('-')"
-          ></span>
-          <span
-            :class="['font-img-black', bgIndex == 1 ? 'font-jian-yellow' : '']"
-          ></span>
-          <span
-            :class="['font-jia-black', bgIndex == 1 ? 'font-jia-yellow' : '']"
-            @click="setFontSize('+')"
-          ></span>
-        </div>
-      </div>
-      <div class="top-middle">
-        <template v-if="mp3">
-          <AudioLineSentence
-            :key="'sent' + curSentIndex"
-            :mp3="mp3"
-            :getCurTime="getCurTime"
-            ref="audioLineSent"
-            :audioId="'artPraAudioId' + curSentIndex"
-            :stopAudio="stopAudio"
-            :width="120"
-            :hideSlider="true"
-            :bg="bg"
-            :ed="ed"
-            :maxTime="maxTime"
-            :bgIndex="bgIndex"
-            :isRepeat="isRepeat"
-            @playChange="playChange"
-          />
-        </template>
-        <div
-          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-          @click="changeStatus('isRepeat')"
-        >
-          <span
-            :class="[
-              'repeat-icon',
-              !isRepeat ? 'disabled' : '',
-              isRepeat && bgIndex == 1 ? 'repeat-icon-yellow' : '',
-            ]"
-          ></span>
-        </div>
-        <div
-          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-          @click="changeStatus('isShowPY')"
-        >
-          <span
-            :class="[
-              'pinyin-icon',
-              !isShowPY ? 'disabled' : '',
-              isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : '',
-            ]"
-          ></span>
-        </div>
-        <div
-          :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-          @click="changeStatus('isShowEN')"
-        >
-          <span
-            :class="[
-              'en-icon',
-              item && !item.enwords ? 'disabled' : '',
-              !isShowEN ? 'disabled' : '',
-              isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
-            ]"
-          ></span>
+        <div class="top-middle">
+          <template v-if="mp3">
+            <AudioLineSentence
+              :key="'sent' + curSentIndex"
+              :mp3="mp3"
+              :getCurTime="getCurTime"
+              ref="audioLineSent"
+              :audioId="'artPraAudioId' + curSentIndex"
+              :stopAudio="stopAudio"
+              :width="120"
+              :hideSlider="true"
+              :bg="bg"
+              :ed="ed"
+              :curTime="curTime"
+              :maxTime="maxTime"
+              :bgIndex="bgIndex"
+              :isRepeat="isRepeat"
+              :isAuto="isAuto"
+              @playChange="playChange"
+              @rollSentence="rollSentence"
+            />
+          </template>
+          <div
+            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+            @click="setStatus"
+          >
+            <span
+              :class="[
+                'repeat-icon',
+                !isRepeat && !isAuto ? 'disabled' : '',
+                !isRepeat && isAuto ? 'auto-icon' : '',
+                isRepeat && bgIndex == 1 ? 'repeat-icon-yellow' : '',
+                !isRepeat && isAuto && bgIndex == 1 ? 'auto-icon-yellow' : '',
+              ]"
+            ></span>
+          </div>
+          <div
+            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+            @click="changeStatus('isShowPY')"
+          >
+            <span
+              :class="[
+                'pinyin-icon',
+                !isShowPY ? 'disabled' : '',
+                isShowPY && bgIndex == 1 ? 'pinyin-icon-yellow' : '',
+              ]"
+            ></span>
+          </div>
+          <div
+            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+            @click="changeStatus('isShowEN')"
+          >
+            <span
+              :class="[
+                'en-icon',
+                item && !item.enwords ? 'disabled' : '',
+                !isShowEN ? 'disabled' : '',
+                isShowEN && bgIndex == 1 ? 'en-icon-yellow' : '',
+              ]"
+            ></span>
+          </div>
+          <div
+            :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
+            @click="addColl('isColl')"
+          >
+            <span
+              :class="[
+                'coll-icon',
+                item && !item.isColl ? 'disabled' : '',
+                item && item.isColl && bgIndex == 1 ? 'coll-icon-yellow' : '',
+              ]"
+            ></span>
+          </div>
         </div>
         <div
           :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-          @click="addColl('isColl')"
+          @click="exitFullScreen"
         >
           <span
-            :class="[
-              'coll-icon',
-              !isColl ? 'disabled' : '',
-              isColl && bgIndex == 1 ? 'coll-icon-yellow' : '',
-            ]"
+            :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
           ></span>
         </div>
       </div>
-      <div
-        :class="['op-btn', bgIndex == 1 ? 'op-btn-green' : '']"
-        @click="exitFullScreen"
-      >
-        <span
-          :class="['close-icon', bgIndex == 1 ? 'close-icon-white' : '']"
-        ></span>
-      </div>
     </div>
     <div
       class="voicefull-content"
@@ -348,6 +377,7 @@
         </div>
         <div style="clear: both; overflow: hidden"></div>
         <div
+          v-if="item.enwords"
           :class="['enwords', bgIndex == 1 ? 'enwords-green' : '']"
           :style="{ fontSize: enSize + 'px' }"
         >
@@ -364,44 +394,55 @@
         @click="nextSentence"
       ></div>
     </div>
-    <div class="voicefull-bottom">
-      <div class="bottom-left">
-        <Soundrecorddiff
-          @handleWav="handleWav"
-          @getWavblob="getWavblob"
-          @handleParentPlay="handleParentPlay"
-          @sentPause="sentPause"
-          @getRerordStatus="getRerordStatus"
-          :bgIndex="bgIndex"
-        />
-        <div
-          :class="['compare-box', bgIndex == 1 ? 'compare-box-white' : '']"
-          v-if="isShowCompare"
-        >
-          <Audio-compare
-            :bgIndex="bgIndex"
-            type="full"
-            :themeColor="themeColor"
-            :index="curSentIndex"
-            :sentIndex="curSentIndex"
-            :url="curQue.mp3_list[0].id"
-            :bg="bg"
-            :ed="ed"
-            :wavblob="wavblob"
-            :getCurTime="getCurTime"
-            :sentPause="sentPause"
-            :isRecord="isRecord"
-            :handleChangeStopAudio="handleChangeStopAudio"
-          />
-        </div>
-      </div>
+    <div
+      class="voicefull-bottom"
+      @mouseover="setBottomShow(true)"
+      @mouseleave="setBottomShow(false)"
+    >
       <div
         :class="[
-          'page-count',
-          bgIndex == 0 ? 'page-count-white' : 'page-count-green',
+          isBottomShow ? 'voicefull-bottom-show' : 'voicefull-bottom-hidden',
         ]"
       >
-        {{ curSentIndex + 1 }}/{{ sentList.length }}
+        <div class="bottom-left">
+          <Soundrecorddiff
+            ref="Soundrecorddiff"
+            @handleWav="handleWav"
+            @getWavblob="getWavblob"
+            @handleParentPlay="handleParentPlay"
+            @sentPause="sentPause"
+            @getRerordStatus="getRerordStatus"
+            :bgIndex="bgIndex"
+          />
+          <div
+            :class="['compare-box', bgIndex == 1 ? 'compare-box-white' : '']"
+            v-if="isShowCompare"
+          >
+            <Audio-compare
+              :bgIndex="bgIndex"
+              type="full"
+              :themeColor="themeColor"
+              :index="curSentIndex"
+              :sentIndex="curSentIndex"
+              :url="curQue.mp3_list[0].id"
+              :bg="bg"
+              :ed="ed"
+              :wavblob="wavblob"
+              :getCurTime="getCurCompareTime"
+              :sentPause="sentPause"
+              :isRecord="isRecord"
+              :handleChangeStopAudio="handleChangeStopAudio"
+            />
+          </div>
+        </div>
+        <div
+          :class="[
+            'page-count',
+            bgIndex == 0 ? 'page-count-white' : 'page-count-green',
+          ]"
+        >
+          {{ curSentIndex + 1 }}/{{ sentList.length }}
+        </div>
       </div>
     </div>
 
@@ -445,6 +486,7 @@ import AudioLineSentence from "./AudioLineSentence.vue";
 import Soundrecorddiff from "./Soundrecorddiff.vue";
 import AudioCompare from "./AudioCompare.vue";
 import Wordcard from "./components/Wordcard.vue";
+import { LearnWebSI } from "@/api/ajax";
 export default {
   components: {
     AudioLineSentence,
@@ -476,7 +518,6 @@ export default {
       isShowPY: true,
       isRepeat: false,
       isShowEN: true,
-      isColl: false,
       NumberList: [
         "①",
         "②",
@@ -523,6 +564,11 @@ export default {
       isWordPlay: false,
       curWordTime: 0,
       isPlaying: false,
+      isAuto: false,
+      key: "isRepeat",
+      isKeyboard: false,
+      isTopShow: false,
+      isBottomShow: false,
     };
   },
   computed: {
@@ -573,6 +619,12 @@ export default {
   },
   //方法集合
   methods: {
+    setTopShow(bool) {
+      this.isTopShow = bool;
+    },
+    setBottomShow(bool) {
+      this.isBottomShow = bool;
+    },
     setFontSize(type) {
       let _this = this;
       if (type == "-") {
@@ -611,7 +663,7 @@ export default {
       };
       let data = {
         goods_id: this.currentTreeID,
-        goods_type: 501,
+        goods_type: 502,
         goods_name: Bookdetail.name,
         goods_person_name_desc: Bookdetail.description
           ? Bookdetail.description
@@ -623,9 +675,8 @@ export default {
           sentence_json: JSON.stringify(sentence_json),
         },
       };
-      console.log(text);
       LearnWebSI(MethodName, data).then((res) => {
-        this.isColl = true;
+        this.$set(this.item[this.curSentIndex], "isColl", true);
         this.$message.success("收藏成功！");
       });
     },
@@ -648,9 +699,36 @@ export default {
       this.curSentIndex = this.curSentIndex + 1;
       this.getSentence();
     },
+    rollSentence() {
+      if (this.curSentIndex == this.sentList.length - 1) {
+        this.curSentIndex = 0;
+      } else {
+        this.curSentIndex = this.curSentIndex + 1;
+      }
+      this.getSentence();
+    },
     changeStatus(key) {
       this[key] = !this[key];
     },
+    setStatus() {
+      let _this = this;
+      if (_this.key == "isRepeat") {
+        if (_this.isRepeat) {
+          _this.isRepeat = false;
+          _this.isAuto = true;
+          _this.key = "isAuto";
+        } else {
+          _this.isRepeat = true;
+          _this.key = "isRepeat";
+        }
+      } else if (_this.key == "isAuto") {
+        if (_this.isAuto) {
+          _this.isRepeat = false;
+          _this.isAuto = false;
+          _this.key = "isRepeat";
+        }
+      }
+    },
     getRerordStatus(bool) {
       this.isShowCompare = bool;
     },
@@ -670,10 +748,23 @@ export default {
         } else {
           _this.curTime = curTime * 1000;
         }
+      } else if (_this.isAuto) {
+        let time = curTime * 1000;
+        if (time > _this.ed) {
+          _this.rollSentence();
+          _this.curTime = _this.bg;
+          _this.$refs.audioLineSent.onTimeupdateTime(_this.bg / 1000);
+        } else {
+          _this.curTime = curTime * 1000;
+        }
       } else {
         _this.curTime = curTime * 1000;
       }
     },
+    getCurCompareTime(curTime) {
+      let _this = this;
+      _this.curTime = curTime * 1000;
+    },
     getCurWordTime(curTime) {
       let _this = this;
       // if (_this.isRepeat) {
@@ -695,12 +786,16 @@ export default {
       let _this = this;
       _this.pauseAudio();
       _this.isPlaying = false;
-      let item = _this.sentList[_this.curSentIndex];
+      let item = JSON.parse(JSON.stringify(_this.sentList[_this.curSentIndex]));
       if (item.sentArr) {
         _this.item = item.sentArr;
       } else {
         _this.item = item;
       }
+      _this.item = _this.item.map((sItem) => {
+        sItem.isColl = false;
+        return sItem;
+      });
       _this.bg = _this.curQue.wordTime[_this.curSentIndex].bg;
       _this.ed = _this.curQue.wordTime[_this.curSentIndex].ed;
       let maxTime = (_this.ed - _this.bg) / 1000;
@@ -834,10 +929,27 @@ export default {
     },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
-  created() {},
+  created() {
+    let _this = this;
+    document.addEventListener("keyup", function (e) {
+      if (_this.isKeyboard) {
+        if (e.keyCode == 32) {
+          //空格
+          _this.$refs.audioLineSent.PlayAudio();
+        } else if (e.keyCode == 38) {
+          _this.prevSentence();
+        } else if (e.keyCode == 40) {
+          _this.nextSentence();
+        } else if (e.keyCode == 13) {
+          _this.$refs.Soundrecorddiff.microphone();
+        }
+      }
+    });
+  },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
     let _this = this;
+
     if (_this.NNPENewWordList) {
       _this.handleNewword();
     }
@@ -933,10 +1045,27 @@ export default {
   }
   &-top {
     height: 136px;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
+    width: 100%;
+    box-sizing: border-box;
+
     padding: 0 40px;
+
+    .voicefull-top-hidden {
+      width: 100%;
+      height: 136px;
+      visibility: hidden;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    .voicefull-top-show {
+      width: 100%;
+      height: 136px;
+      visibility: visible;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
     .top-left {
       display: flex;
       justify-content: flex-start;
@@ -1065,39 +1194,39 @@ export default {
         }
       }
     }
-    .op-btn {
-      width: 56px;
-      height: 56px;
-      border-radius: 100%;
-      display: flex;
-      justify-content: center;
-      align-items: center;
+  }
+  .op-btn {
+    width: 56px;
+    height: 56px;
+    border-radius: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
 
-      cursor: pointer;
-      margin-left: 32px;
-      background: #ffffff;
+    cursor: pointer;
+    margin-left: 32px;
+    background: #ffffff;
+    border: 1px solid rgba(0, 0, 0, 0.1);
+    box-sizing: border-box;
+    &-green {
+      background: rgba(255, 255, 255, 0.1);
       border: 1px solid rgba(0, 0, 0, 0.1);
-      box-sizing: border-box;
-      &-green {
-        background: rgba(255, 255, 255, 0.1);
-        border: 1px solid rgba(0, 0, 0, 0.1);
-      }
-      &.close-btn {
-        background: #274533;
-        border: 1px solid rgba(0, 0, 0, 0.1);
-      }
-      > span {
-        width: 24px;
-        height: 24px;
-        &.close-icon {
-          background: url("../../../assets/icon/cross-24-normal-black.png")
+    }
+    &.close-btn {
+      background: #274533;
+      border: 1px solid rgba(0, 0, 0, 0.1);
+    }
+    > span {
+      width: 24px;
+      height: 24px;
+      &.close-icon {
+        background: url("../../../assets/icon/cross-24-normal-black.png")
+          no-repeat left top;
+        background-size: 100% 100%;
+        &-white {
+          background: url("../../../assets/icon/cross-24-normal-white.png")
             no-repeat left top;
           background-size: 100% 100%;
-          &-white {
-            background: url("../../../assets/icon/cross-24-normal-white.png")
-              no-repeat left top;
-            background-size: 100% 100%;
-          }
         }
       }
     }
@@ -1116,6 +1245,16 @@ export default {
         no-repeat left top;
       background-size: 100% 100%;
     }
+    &.auto-icon {
+      background: url("../../../assets/icon/Auto-24-next-red.png") no-repeat
+        left top;
+      background-size: 100% 100%;
+      &-yellow {
+        background: url("../../../assets/icon/Auto-24-next-yellow.png")
+          no-repeat left top;
+        background-size: 100% 100%;
+      }
+    }
   }
   .pinyin-icon {
     background: url("../../../assets/icon/pinyin-24-normal-red.png") no-repeat
@@ -1162,7 +1301,21 @@ export default {
       background-size: 100% 100%;
     }
   }
-
+  .keyboard-icon {
+    background: url("../../../assets/icon/enter-24-keyboard-red.png") no-repeat
+      left top;
+    background-size: 100% 100%;
+    &.disabled {
+      background: url("../../../assets/icon/enter-24-keyboard-disable-Black.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+    &-yellow {
+      background: url("../../../assets/icon/enter-24-keyboard-yellow.png")
+        no-repeat left top;
+      background-size: 100% 100%;
+    }
+  }
   &-content {
     flex: 1;
     width: 100%;
@@ -1352,10 +1505,29 @@ export default {
   }
   &-bottom {
     height: 136px;
+    width: 100%;
+    box-sizing: border-box;
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding-right: 40px;
+
+    .voicefull-bottom-show {
+      height: 136px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      visibility: visible;
+    }
+    .voicefull-bottom-hidden {
+      height: 136px;
+      width: 100%;
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      visibility: hidden;
+    }
     .bottom-left {
       display: flex;
       justify-content: flex-start;

src/components/Adult/preview/components/Wordcard.vue

@@ -120,11 +120,11 @@
             :src="
               themeColor
                 ? themeColor == 'green'
-                  ? require('../../../../assets/icon/starline-16-normal-Green.png')
+                  ? require('../../../../assets/icon/starfill-16-normal-Green.png')
                   : themeColor == 'brown'
-                  ? require('../../../../assets/icon/starline-16-normal-Brown.png')
-                  : require('../../../../assets/icon/starline-16-normal-red.png')
-                : require('../../../../assets/icon/starline-16-normal-red.png')
+                  ? require('../../../../assets/icon/starfill-16-normal-Brown.png')
+                  : require('../../../../assets/icon/starfill-16-normal-red.png')
+                : require('../../../../assets/icon/starfill-16-normal-red.png')
             "
             class="practice-icon"
           />

vue.config.js

@@ -43,8 +43,8 @@ module.exports = {
       // change xxx-api/login => mock/login
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://gcls.utschool.cn/`,
-        //target: `http://gcls.helxsoft.cn/`,
+        //target: `http://gcls.utschool.cn/`,
+        target: `http://gcls.helxsoft.cn/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''