|
|
@@ -0,0 +1,250 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Big-Book-prev-Textdes SentenceListenRead" v-if="curQue">
|
|
|
+ <div
|
|
|
+ class="aduioLine-box"
|
|
|
+ v-if="
|
|
|
+ curQue.mp3_list && curQue.mp3_list.length > 0 && curQue.mp3_list[0].url
|
|
|
+ "
|
|
|
+ >
|
|
|
+ <AudioLine
|
|
|
+ :mp3="curQue.mp3_list[0].url"
|
|
|
+ :getCurTime="getCurTime"
|
|
|
+ ref="audioLine"
|
|
|
+ @handleChangeStopAudio="handleChangeStopAudio"
|
|
|
+ :stopAudio="stopAudio"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ <div class="item-box">
|
|
|
+ <div v-for="(items,index) in curQue.option" :key="index" :class="['item']">
|
|
|
+ <b v-if="items.number">{{items.number}}</b>
|
|
|
+ <a :class="['play-btn',curTime >= curQue.wordTime[index].bg &&
|
|
|
+ curTime < curQue.wordTime[index].ed && stopAudio
|
|
|
+ ? 'active'
|
|
|
+ : '',]" @click="handleChangeTime(curQue.wordTime[index].bg)"></a>
|
|
|
+ <div class="content-box">
|
|
|
+ <template v-if="items.detail.wordsList.length==0">
|
|
|
+ <p :class="['content-con',/^[\u4e00-\u9fa5]/.test(items.detail.sentenc)?'':'hasPy']" v-if="items.detail.sentence">{{items.detail.sentence}}</p>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="con-box">
|
|
|
+ <div :class="['con-item',indexCon===0?'con-item-0':'']" v-for="(itemCon,indexCon) in items.detail.resArr" :key="indexCon" v-show="itemCon.isShow">
|
|
|
+ <template v-if="items.detail.wordsList[indexCon + 1] && items.detail.wordsList[indexCon + 1].chs && chsFhList.indexOf(items.detail.wordsList[indexCon + 1].chs) > -1">
|
|
|
+ <div class="synthesis-box">
|
|
|
+ <div>
|
|
|
+ <span class="pinyin">{{itemCon.pinyin}}</span>
|
|
|
+ <span class="hanzi content-con">{{itemCon.chs}}</span>
|
|
|
+ </div>
|
|
|
+ <div style="text-align: left">
|
|
|
+ <span class="pinyin">{{items.detail.wordsList[indexCon + 1].pinyin}}</span>
|
|
|
+ <span class="hanzi content-con">{{items.detail.wordsList[indexCon + 1].chs}}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <span class="pinyin">{{itemCon.pinyin}}</span>
|
|
|
+ <span class="hanzi content-con">{{itemCon.chs}}</span>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <b class="content-en" v-if="items.en">{{items.en}}</b>
|
|
|
+ </div>
|
|
|
+ <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box"/>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import AudioLine from "../preview/AudioLine.vue";
|
|
|
+import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
|
|
|
+export default {
|
|
|
+ components: {AudioLine,Soundrecord},
|
|
|
+ props: ["curQue"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ curTime:0,
|
|
|
+ chsFhList: ["，", "。", "“", "：", "》", "《", "？", "！", "；"],
|
|
|
+ stopAudio: false,
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // 处理数据
|
|
|
+ handleData(){
|
|
|
+ let _this = this
|
|
|
+ this.dataType = []
|
|
|
+ if(!this.curQue.Bookanswer){
|
|
|
+ let curCorrect = [];
|
|
|
+ this.curQue.option.forEach(item => {
|
|
|
+ curCorrect.push('')
|
|
|
+ });
|
|
|
+ this.$set(this.curQue, "Bookanswer", curCorrect);
|
|
|
+ }
|
|
|
+ this.curQue.fn_list.forEach(item=>{
|
|
|
+ if(item.isFn){
|
|
|
+ _this.dataType.push(item.type)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ let curQue = JSON.parse(JSON.stringify(this.curQue));
|
|
|
+ curQue.option.forEach((dItem, dIndex) => {
|
|
|
+ let paraArr = []
|
|
|
+ dItem.detail.wordsList.forEach((sItem, sIndex) => {
|
|
|
+ this.mergeWordSymbol(dItem.detail.wordsList, sItem, sIndex);
|
|
|
+ let obj = {
|
|
|
+ pinyin: sItem.pinyin,
|
|
|
+ chs: sItem.chs,
|
|
|
+ isShow: sItem.isShow,
|
|
|
+ };
|
|
|
+ paraArr.push(obj);
|
|
|
+ })
|
|
|
+ this.$set(_this.curQue.option[dIndex].detail,'resArr',paraArr)
|
|
|
+ })
|
|
|
+ },
|
|
|
+ //词和标点合一起
|
|
|
+ mergeWordSymbol(sItem, wItem, curIndex) {
|
|
|
+ let leg = sItem.length;
|
|
|
+ if (curIndex < leg - 1) {
|
|
|
+ if (this.chsFhList.indexOf(wItem.chs) > -1) {
|
|
|
+ wItem.isShow = false;
|
|
|
+ } else {
|
|
|
+ wItem.isShow = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getCurTime(curTime) {
|
|
|
+ this.curTime = curTime * 1000;
|
|
|
+ },
|
|
|
+ handleWav(data) {
|
|
|
+
|
|
|
+ },
|
|
|
+ //点击播放某个句子
|
|
|
+ handleChangeTime(time) {
|
|
|
+ let _this = this;
|
|
|
+ _this.curTime = time;
|
|
|
+ _this.$refs.audioLine.onTimeupdateTime(time / 1000,true);
|
|
|
+ },
|
|
|
+ handleChangeStopAudio() {
|
|
|
+ this.stopAudio = true
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.handleData()
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {},
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.SentenceListenRead{
|
|
|
+ background: #F7F7F7;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ overflow: hidden;
|
|
|
+ .aduioLine-box{
|
|
|
+ background: #F7F7F7;
|
|
|
+ }
|
|
|
+ .item-box{
|
|
|
+ padding: 16px 24px;
|
|
|
+ border-top: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ .item{
|
|
|
+ padding: 8px 12px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin: 8px 0;
|
|
|
+ b{
|
|
|
+ background: #DE4444;
|
|
|
+ text-align: center;
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ color: #FFFFFF;
|
|
|
+ border-radius: 50%;
|
|
|
+ font-size: 12px;
|
|
|
+ font-family: 'robot';
|
|
|
+ line-height: 16px;
|
|
|
+ margin-right: 4px;
|
|
|
+ }
|
|
|
+ .play-btn{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ background: url('../../../assets/newImage/common/icon-voice-red.png') center no-repeat;
|
|
|
+ background-size: cover;
|
|
|
+ &.active{
|
|
|
+ background-image: url('../../../assets/newImage/common/icon-voice-play-red.png');
|
|
|
+ background-size: cover;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-box{
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 8px 0 4px;
|
|
|
+ .content-con{
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ margin: 0;
|
|
|
+ &.hasPy{
|
|
|
+ font-family: 'GB-PINYINOK-B';
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .content-en{
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ font-family: 'robot';
|
|
|
+ }
|
|
|
+ .con-box{
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ .con-item{
|
|
|
+ text-align: center;
|
|
|
+ padding: 0 3px;
|
|
|
+ &.con-item-0{
|
|
|
+ text-align: left;
|
|
|
+ padding-left: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ span{
|
|
|
+ display: block;
|
|
|
+ }
|
|
|
+ .pinyin{
|
|
|
+ font-family: 'GB-PINYINOK-B';
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 130%;
|
|
|
+ color: #000000;
|
|
|
+ height: 18px;
|
|
|
+ }
|
|
|
+ .synthesis-box{
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .luyin-box{
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 64px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</style>
|
natasha