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

<!--  -->
<template>
  <div class="NNPE-ArticleView" v-if="curQue">
    <div
      class="aduioLine-box aduioLine-practice"
      v-if="
        curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
      "
    >
      <div class="aduioLine-content">
        <AudioLine
          :mp3="curQue.mp3_list[0].url"
          :getCurTime="getCurTime"
          ref="audioLine"
          :stopAudio="stopAudio"
          :width="555"
          :isRepeat="isRepeat"
          @handleChangeStopAudio="handleChangeStopAudio"
        />
      </div>
      <div class="aduioLine-right">
        <span
          :class="['Repeat-16', isRepeat ? '' : 'disabled']"
          @click="changeRepeat"
        ></span>
        <span
          :class="['pinyin-16', isShowPY ? '' : 'disabled']"
          @click="changePinyin"
        ></span>
      </div>
    </div>

    <template v-if="resObj">
      <p class="notice" v-if="curQue.notice">
        {{ curQue.notice }}
      </p>
      <div class="NPC-sentences-list">
        <div
          :class="['NNPE-detail-box', sentIndex == index ? 'active' : '']"
          v-for="(item, index) in resObj.sentList"
          :key="'detail' + index"
        >
          <div
            class="NNPE-detail"
            @click="
              handleChangeTime(
                curQue.wordTime &&
                  curQue.wordTime[index] &&
                  curQue.wordTime[index].bg,
                index
              )
            "
          >
            <template v-if="item.sentArr[0].sentIndex == 0">
              <RoleChs
                :curRole="item.roleDetail"
                :color="
                  (curQue.wordTime &&
                    curQue.wordTime[index] &&
                    curTime >= curQue.wordTime[index].bg &&
                    curTime <= curQue.wordTime[index].ed) ||
                  sentIndex == index
                    ? 'rgba(0,0,0,0.85)'
                    : 'rgba(0,0,0,0.45)'
                "
                :type="1"
              />
            </template>
            <div v-else style="width: 36px; height: 36px"></div>
            <div class="sentence-box">
              <template v-if="item.sentArr[0].sentIndex == 0">
                <div
                  class="roleDetail"
                  v-if="item.roleDetail.detail.wordsList.length > 0"
                >
                  <span
                    :class="[
                      'pinyin',
                      (curQue.wordTime &&
                        curQue.wordTime[index] &&
                        curTime >= curQue.wordTime[index].bg &&
                        curTime <= curQue.wordTime[index].ed) ||
                      sentIndex == index
                        ? 'color85'
                        : 'color45',
                    ]"
                    >{{ item.roleDetail.detail.wordsList | handlePinyin }}</span
                  >
                  <span
                    :class="[
                      'chs',
                      (curQue.wordTime &&
                        curQue.wordTime[index] &&
                        curTime >= curQue.wordTime[index].bg &&
                        curTime <= curQue.wordTime[index].ed) ||
                      sentIndex == index
                        ? 'color85'
                        : 'color45',
                    ]"
                    >{{ item.roleDetail.detail.wordsList | handleChs }}</span
                  >
                </div>
              </template>
              <div
                class="sentence-box-inner"
                :style="{ background: item.roleDetail.color.bg }"
              >
                <div class="NNPE-words-box">
                  <div
                    class="NNPE-words"
                    v-for="(pItem, pIndex) in item.sentArr"
                    :key="'wordsList' + pIndex"
                    :class="[pItem.wordIndex == 0 ? 'textLeft' : 'textCenter']"
                  >
                    <template v-if="!pItem.width">
                      <template v-if="pItem.isShow">
                        <template
                          v-if="
                            item.sentArr[pIndex + 1] &&
                            item.sentArr[pIndex + 1].chs &&
                            chsFhList.indexOf(item.sentArr[pIndex + 1].chs) > -1
                          "
                        >
                          <span class="NNPE-words-box">
                            <template v-if="curQue.pyPosition == 'top'">
                              <span
                                v-if="isShowPY"
                                class="NNPE-pinyin"
                                :class="[
                                  pItem.className ? pItem.className : '',
                                  sentIndex == index ? 'wordBlank' : '',
                                ]"
                                >{{ pItem.pinyin }}</span
                              >
                            </template>
                            <span
                              class="NNPE-chs"
                              :class="[
                                pItem.padding && isShowPY ? 'padding' : '',
                                sentIndex == index ? 'wordBlank' : '',
                              ]"
                            >
                              <template>
                                <span
                                  v-for="(wItem, wIndex) in pItem.leg"
                                  :key="'ci' + wIndex + pIndex + index"
                                  :class="[
                                    pItem.timeList &&
                                    pItem.timeList[wIndex] &&
                                    curTime >= pItem.timeList[wIndex].wordBg &&
                                    curQue.wordTime &&
                                    curQue.wordTime[index] &&
                                    curTime <= curQue.wordTime[index].ed
                                      ? 'active'
                                      : '',
                                    sentIndex == index ? 'wordBlank' : '',
                                  ]"
                                  >{{ pItem.chs[wIndex] }}</span
                                >
                              </template>
                            </span>
                            <template v-if="curQue.pyPosition == 'bottom'">
                              <span
                                v-if="isShowPY"
                                class="NNPE-pinyin"
                                :class="[
                                  pItem.className ? pItem.className : '',
                                  sentIndex == index ? 'wordBlank' : '',
                                ]"
                                >{{ pItem.pinyin }}</span
                              >
                            </template>
                          </span>
                          <span class="NNPE-words-box">
                            <template v-if="curQue.pyPosition == 'top'">
                              <span
                                v-if="isShowPY"
                                :class="[
                                  'NNPE-pinyin',
                                  sentIndex == index ? 'wordBlank' : '',
                                ]"
                                style="text-align: left"
                                >{{ item.sentArr[pIndex + 1].pinyin }}</span
                              >
                            </template>
                            <span class="NNPE-chs" style="text-align: left">
                              <span
                                :class="[
                                  pItem.timeList[pItem.leg - 1] &&
                                  curTime >=
                                    pItem.timeList[pItem.leg - 1].wordBg &&
                                  curQue.wordTime &&
                                  curQue.wordTime[index] &&
                                  curTime <= curQue.wordTime[index].ed
                                    ? 'active'
                                    : '',
                                  sentIndex == index ? 'wordBlank' : '',
                                ]"
                              >
                                {{ item.sentArr[pIndex + 1].chs }}</span
                              >
                            </span>
                            <template v-if="curQue.pyPosition == 'bottom'">
                              <span
                                v-if="isShowPY"
                                :class="[
                                  'NNPE-pinyin',
                                  sentIndex == index ? 'wordBlank' : '',
                                ]"
                                style="text-align: left"
                                >{{ item.sentArr[pIndex + 1].pinyin }}</span
                              >
                            </template>
                          </span>
                        </template>
                        <template v-else>
                          <template v-if="curQue.pyPosition == 'top'">
                            <template
                              v-if="NumberList.indexOf(pItem.pinyin) < 0"
                            >
                              <span
                                v-if="isShowPY"
                                class="NNPE-pinyin"
                                :class="[
                                  pItem.padding ? 'padding' : '',
                                  pItem.className ? pItem.className : '',
                                  sentIndex == index ? 'wordBlank' : '',
                                ]"
                                >{{ pItem.pinyin }}</span
                              >
                            </template>
                          </template>
                          <span
                            v-if="pItem.chs != '#'"
                            class="NNPE-chs"
                            :class="[
                              pItem.padding && isShowPY ? 'padding' : '',
                              sentIndex == index ? 'wordBlank' : '',
                            ]"
                          >
                            <template>
                              <span
                                v-for="(wItem, wIndex) in pItem.leg"
                                :key="'ci' + wIndex + pIndex + index"
                                :class="[
                                  pItem.timeList &&
                                  pItem.timeList[wIndex] &&
                                  curTime >= pItem.timeList[wIndex].wordBg &&
                                  curQue.wordTime &&
                                  curQue.wordTime[index] &&
                                  curTime <= curQue.wordTime[index].ed
                                    ? 'active'
                                    : '',
                                ]"
                                >{{ pItem.chs[wIndex] }}</span
                              >
                            </template>
                          </span>
                          <template v-if="curQue.pyPosition == 'bottom'">
                            <template
                              v-if="NumberList.indexOf(pItem.pinyin) < 0"
                            >
                              <span
                                v-if="isShowPY"
                                class="NNPE-pinyin"
                                :class="[
                                  pItem.padding ? 'padding' : '',
                                  pItem.className ? pItem.className : '',
                                  sentIndex == index ? 'wordBlank' : '',
                                ]"
                                >{{ pItem.pinyin }}</span
                              >
                            </template>
                          </template>
                        </template>
                      </template>
                    </template>
                    <template v-else>
                      <span
                        :style="{
                          height: pItem.height + 'px',
                          width: pItem.width + 'px',
                        }"
                      ></span>
                    </template>
                  </div>
                </div>
                <div
                  v-if="item.enwords"
                  :class="['enwords', sentIndex == index ? 'wordBlank' : '']"
                >
                  {{ item.enwords }}
                </div>
              </div>
            </div>
          </div>
          <div v-show="sentIndex == index" class="Soundrecord-content">
            <Soundrecord
              @handleWav="handleWav"
              type="promax"
              class="luyin-box"
              @handleParentPlay="handleParentPlay"
            />
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
import { timeStrToSen } from "@/utils/index";
import AudioLine from "../AudioLine.vue";
import Soundrecord from "../../preview/Soundrecord.vue"; // 录音模板
import RoleChs from "./RoleChs.vue";
export default {
  name: "ArticleView",
  props: ["curQue", "colorBox"],
  components: {
    AudioLine,
    Soundrecord,
    RoleChs,
  },
  filters: {
    handlePinyin(wordsList) {
      let str = "";
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += item.pinyin + " ";
        } else {
          str += item.pinyin;
        }
      });
      return str;
    },
    handleChs(wordsList) {
      let str = "";
      wordsList.forEach((item, index) => {
        if (index < wordsList.length - 1) {
          str += item.chs + " ";
        } else {
          str += item.chs;
        }
      });
      return str;
    },
  },
  data() {
    return {
      resObj: null,
      curTime: 0, //单位s
      chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
      enFhList: [",", ".", ";", "?", "!", ":", ">", "<"],
      NumberList: [
        "①",
        "②",
        "③",
        "④",
        "⑤",
        "⑥",
        "⑦",
        "⑧",
        "⑨",
        "⑩",
        "⑪",
        "⑫",
        "⑬",
        "⑭",
        "⑮",
        "⑯",
        "⑰",
        "⑱",
        "⑲",
        "⑳",
      ],
      stopAudio: false,
      sentIndex: 0,
      isShowPY: true,
      isRepeat: false,
      currSent: null, //当前句子的时间
    };
  },
  computed: {},
  watch: {},
  //方法集合
  methods: {
    getCurTime(curTime) {
      let _this = this;
      if (_this.isRepeat) {
        let time = curTime * 1000;
        console.log(time, _this.currSent.ed);
        if (time > _this.currSent.ed || time < _this.currSent.bg) {
          _this.curTime = _this.currSent.bg;
          this.$refs.audioLine.onTimeupdateTime(_this.currSent.bg / 1000);
        } else {
          _this.curTime = curTime * 1000;
        }
      } else {
        _this.curTime = curTime * 1000;
        _this.getSentIndex(_this.curTime);
      }
    },
    getSentIndex(curTime) {
      for (let i = 0; i < this.curQue.wordTime.length; i++) {
        let bg = this.curQue.wordTime[i].bg;
        let ed = this.curQue.wordTime[i].ed;
        if (curTime >= bg && curTime <= ed) {
          this.sentIndex = i;
          break;
        }
      }
    },
    handleData() {
      let resArr = [],
        timeArr = [],
        sentArrTotal = [],
        enList = [];
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      let wordTimeList = curQue.wordTime;
      curQue.detail.forEach((dItem, dIndex) => {
        let roleDetail = this.getRole(dItem);

        dItem.wordsList.forEach((sItem, sIndex) => {
          let sentArr = [];
          sItem.forEach((wItem, wIndex) => {
            let startIndex =
              wIndex == 0
                ? 0
                : sentArr[wIndex - 1].startIndex +
                  sentArr[wIndex - 1].chs.length;
            let endIndex =
              wIndex == 0
                ? wItem.chs.length
                : sentArr[wIndex - 1].endIndex + wItem.chs.length;
            // this.judgePad(sItem, wItem, wIndex);
            this.mergeWordSymbol(wItem);
            let obj = {
              paraIndex: dIndex, //段落索引
              sentIndex: sIndex, //在段落中句子索引
              wordIndex: wIndex, //单词的索引
              pinyin: wItem.pinyin,
              chs: wItem.chs,
              padding: true,
              className: wItem.className,
              isShow: wItem.isShow,
              startIndex: startIndex,
              endIndex: endIndex,
              leg: wItem.chs.length,
              timeList: [],
            };
            sentArr.push(obj);
          });
          let obj = {
            roleDetail: roleDetail,
            sentArr: sentArr,
            enwords: dItem.sentencesEn && dItem.sentencesEn[sIndex],
          };
          sentArrTotal.push(sentArr);
          resArr.push(obj);
        });

        timeArr.push(dItem.timeList);
      });
      if (wordTimeList && wordTimeList.length > 0) {
        this.mergeWordTime(sentArrTotal, wordTimeList);
      }
      let timeList = [];
      timeArr.forEach((item) => {
        item.forEach((aItem) => {
          if (timeList.indexOf(aItem) < 0) {
            timeList.push(aItem);
          }
        });
      });
      this.resObj = { sentList: resArr, timeList: timeList };
      console.log(this.resObj);
    },
    //获取角色
    getRole(dItem) {
      let roleIndex = dItem.roleIndex;
      let resObj = null;
      let roleList = JSON.parse(JSON.stringify(this.curQue.roleList));
      for (let i = 0; i < roleList.length; i++) {
        let item = roleList[i];
        if (item.id == roleIndex) {
          resObj = item;
          resObj.color = this.colorBox[i];
          break;
        }
      }

      return resObj;
    },
    mergeWordTime(resArr, wordTimeList) {
      resArr.forEach((item, index) => {
        let wordsResultList = wordTimeList[index].wordsResultList;
        item.forEach((wItem) => {
          let startIndex = wItem.startIndex;
          let endIndex = wItem.endIndex;
          wItem.timeList = wordsResultList.slice(startIndex, endIndex);
        });
      });
    },
    //词和标点合一起
    mergeWordSymbol(wItem) {
      if (this.chsFhList.indexOf(wItem.chs) > -1) {
        wItem.isShow = false;
      } else {
        wItem.isShow = true;
      }
    },
    handleData2() {
      let resArr = [],
        timeArr = [];
      let leg = this.curQue.detail.length;
      let curQue = JSON.parse(JSON.stringify(this.curQue));
      curQue.detail.forEach((dItem, dIndex) => {
        let endTime = 0;
        if (dIndex < leg - 1) {
          endTime = curQue.detail[dIndex + 1].timeList[0];
          dItem.timeList.push(endTime);
          dItem.timeList = this.handleTimeList(dItem.timeList);
        } else {
          dItem.timeList = this.handleTimeList(dItem.timeList);
          endTime = curQue.mp3_list[0].duration;
          dItem.timeList.push(endTime);
        }

        dItem.wordsList.forEach((sItem, sIndex) => {
          let time_diff = dItem.timeList[sIndex + 1] - dItem.timeList[sIndex];
          let wordsLeg = dItem.sentences[sIndex].length;
          let wordTime = time_diff / wordsLeg;
          // console.log(time_diff, wordsLeg, wordTime);
          let sentArr = [];
          sItem.forEach((wItem, wIndex) => {
            let preTotal = wIndex > 0 ? sentArr[wIndex - 1].endTime : 0;
            let endTime =
              wIndex > 0
                ? wordTime * wItem.chs.length + preTotal
                : dItem.timeList[sIndex] + wordTime * wItem.chs.length;
            //console.log("endTime" + endTime);
            let startTime =
              wIndex > 0 ? sentArr[wIndex - 1].endTime : dItem.timeList[sIndex];
            this.judgePad(sItem, wItem, wIndex);
            let obj = {
              paraIndex: dIndex, //段落索引
              sentIndex: sIndex, //在段落中句子索引
              wordIndex: wIndex, //单词的索引
              pinyin: wItem.pinyin,
              chs: wItem.chs,
              padding: wItem.padding,
              className: wItem.className,
              startTime: startTime,
              endTime: endTime,
            };
            sentArr.push(obj);
          });
          resArr.push(sentArr);
        });

        timeArr.push(dItem.timeList);
      });
      let timeList = [];
      timeArr.forEach((item) => {
        item.forEach((aItem) => {
          if (timeList.indexOf(aItem) < 0) {
            timeList.push(aItem);
          }
        });
      });
      this.resObj = { sentList: resArr, timeList: timeList, enList: enList };
      console.log(this.resObj);
    },
    //判断是否有padding
    judgePad(sItem, wItem, curIndex) {
      let leg = sItem.length;
      if (curIndex < leg - 1) {
        let nextIndex = curIndex + 1;
        let chs = sItem[nextIndex].chs;
        if (
          this.chsFhList.indexOf(chs) > -1 ||
          this.chsFhList.indexOf(wItem.chs) > -1
        ) {
          wItem.padding = false;
        } else {
          wItem.padding = true;
        }
        if (this.enFhList.indexOf(wItem.pinyin) > -1) {
          wItem.className = "textLeft";
        }
      }
    },
    //转化时间
    handleTimeList(list) {
      let listRes = [];
      list.forEach((item) => {
        let res = timeStrToSen(item);
        listRes.push(res);
      });
      return listRes;
    },
    //计算总时间
    countWordTime(sentArr) {
      let total = 0;
      sentArr.forEach((item) => {
        total += item.endTime;
      });
      return total;
    },
    //点击播放某个句子
    handleChangeTime(time, index) {
      let _this = this;
      if (_this.isRepeat) {
        _this.currSent = _this.curQue.wordTime[index];
      }
      _this.sentIndex = index;
      if (time) {
        _this.curTime = time;
        _this.$refs.audioLine.onTimeupdateTime(time / 1000);
      }
    },
    handleWav(data) {},
    // 录音时暂停音频播放
    handleParentPlay() {
      this.stopAudio = true;
    },
    // 音频播放时改变布尔值
    handleChangeStopAudio() {
      this.stopAudio = false;
    },
    //拼音的显示隐藏
    changePinyin() {
      this.isShowPY = !this.isShowPY;
    },
    // 单句是否重复播放
    changeRepeat() {
      let _this = this;
      _this.isRepeat = !_this.isRepeat;
      this.currSent = _this.curQue.wordTime[_this.sentIndex];
    },
  },
  //生命周期 - 创建完成（可以访问当前this实例）
  created() {},
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    console.log(this.curQue);
    if (this.curQue) {
      this.handleData();
    }
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
.NNPE-ArticleView {
  width: 100%;
  padding-top: 24px;
  .NPC-sentences-list {
    padding: 0px 0 24px 0;
  }
  .aduioLine-content {
    flex: 1;
  }
  .aduioLine-practice {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    .aduioLine-right {
      display: flex;
      justify-content: space-between;
      align-items: center;
      width: 72px;
      height: 40px;
      box-sizing: border-box;
      padding: 0 12px;
      border-left: 1px solid rgba(0, 0, 0, 0.1);
      > span {
        width: 16px;
        height: 16px;
        cursor: pointer;
      }
    }
  }
  .NNPE-detail-box {
    &.active {
      background: rgba(0, 0, 0, 0.06);
    }
  }
  .enwords {
    font-family: "robot";
    font-weight: normal;
    font-size: 14px;
    line-height: 22px;
    color: rgba(0, 0, 0, 0.45);
    &.wordBlank {
      color: rgba(0, 0, 0, 0.85);
    }
  }
  .NNPE-detail {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    clear: both;
    overflow: hidden;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 24px 8px;
    color: rgba(0, 0, 0, 0.45);

    .sentence-box {
      padding-left: 8px;
      clear: both;
      overflow: hidden;
      &-inner {
        padding: 8px 12px;
        box-sizing: border-box;
        border-radius: 8px;
        border: 1px solid rgba(0, 0, 0, 0.1);
        float: left;
      }
      .roleDetail {
        height: 36px;
        display: flex;
        justify-content: flex-start;
        align-items: center;
        .pinyin {
          font-family: "GB-PINYINOK-B";
          font-size: 14px;
          line-height: 22px;
          color: rgba(0, 0, 0, 0.85);
          margin-right: 4px;
        }
        .chs {
          font-family: "FZJCGFKTK";
          font-size: 16px;
          line-height: 24px;
          color: rgba(0, 0, 0, 0.85);
        }
        .color85 {
          color: rgba(0, 0, 0, 0.85);
        }
        .color45 {
          color: rgba(0, 0, 0, 0.45);
        }
      }
    }
    .NNPE-words {
      float: left;
      &-box {
        float: left;
        > span {
          display: block;
          &.NNPE-pinyin {
            font-family: "GB-PINYINOK-B";
            font-weight: normal;
            font-size: 14px;
            line-height: 20px;

            height: 20px;
            &.textLeft {
              text-align: left;
            }
            &.wordBlank {
              color: rgba(0, 0, 0, 0.85);
            }
          }
          &.NNPE-chs {
            font-family: "FZJCGFKTK";
            font-size: 20px;
            line-height: 28px;

            .active {
              color: #de4444;
            }
            &.wordBlank {
              color: rgba(0, 0, 0, 0.85);
            }
          }
          // &.padding {
          //   padding-right: 6px;
          // }
        }
      }
      &.textLeft {
        text-align: left;
      }
      &.textCenter {
        text-align: center;
      }
      > span {
        display: block;
        &.NNPE-pinyin {
          font-family: "GB-PINYINOK-B";
          font-weight: normal;
          font-size: 14px;
          line-height: 20px;
          height: 20px;
          &.textLeft {
            text-align: left;
          }
          &.wordBlank {
            color: rgba(0, 0, 0, 0.85);
          }
        }
        &.NNPE-chs {
          font-family: "FZJCGFKTK";
          font-size: 20px;
          line-height: 28px;
          .active {
            color: #de4444;
          }
          &.wordBlank {
            color: rgba(0, 0, 0, 0.85);
          }
        }
        &.padding {
          padding: 0 3px;
        }
      }
    }
  }
  .Soundrecord-content {
    padding: 0px 0px 8px 60px;
    .luyin-box {
      width: 280px;
      padding: 8px 12px;
      border: 1px solid rgba(0, 0, 0, 0.1);
      border-radius: 8px;
      background: #ffffff;
    }
  }
}
</style>