|
|
@@ -0,0 +1,218 @@
|
|
|
+<!-- -->
|
|
|
+<template>
|
|
|
+ <div class="Big-Book-prev-Textdes" v-if="curQue">
|
|
|
+ <h2 v-if="curQue.title">{{curQue.title}}</h2>
|
|
|
+ <ul>
|
|
|
+ <li v-for="(items, indexs) in curQue.option" :key="indexs">
|
|
|
+ <p :class="[oldsrc==items.mp3_list[0].url?palyClass:'']" @click="handlePlayVoice(items.mp3_list[0].url)" v-if="items.mp3_list&&items.mp3_list.length>0">
|
|
|
+ </p>
|
|
|
+ <b v-if="items.number">{{ items.number }}.</b>
|
|
|
+ <span class="item-con">{{items.con}}</span>
|
|
|
+ <!-- <template v-if="curQue.ChildType=='sentence_answer'"> -->
|
|
|
+ <input
|
|
|
+ @input="handleInput"
|
|
|
+ :class="['item-input']"
|
|
|
+ v-model="curQue.Bookanswer[indexs]"
|
|
|
+ placeholder="输入"
|
|
|
+ >
|
|
|
+ <!-- </template> -->
|
|
|
+ <template v-if="curQue.ChildType=='sentence_judge'">
|
|
|
+ <div class="judge-box">
|
|
|
+ <a :class="['right-btn',curQue.Bookanswer[indexs]=='right'?'active':'']" @click="handleSelectJudge('right',indexs)"></a>
|
|
|
+ <a :class="['error-btn',curQue.Bookanswer[indexs]=='error'?'active':'']" @click="handleSelectJudge('error',indexs)"></a>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-if="curQue.ChildType=='sentence_Record'">
|
|
|
+ <Soundrecord @handleWav="handleWav" type="mini" class="luyin-box"/>
|
|
|
+ </template>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import Soundrecord from "../preview/Soundrecord.vue"; // 录音模板
|
|
|
+export default {
|
|
|
+ components: {Soundrecord},
|
|
|
+ props: ["curQue"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ audio: new Audio(),
|
|
|
+ oldsrc: '', // 存储播放音频的src 用来比对是否点击的是同一个音频
|
|
|
+ palyClass: '',
|
|
|
+ judge: '',
|
|
|
+ };
|
|
|
+ },
|
|
|
+ computed: {},
|
|
|
+ watch: {},
|
|
|
+ //方法集合
|
|
|
+ methods: {
|
|
|
+ // input 输入时
|
|
|
+ handleInput (e) {
|
|
|
+ e.target.value = e.target.value ? e.target.value.trim() : '';
|
|
|
+ },
|
|
|
+ handlePlayVoice(url) {
|
|
|
+ let _this = this;
|
|
|
+ if (!url) {
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ if (!this.audio.paused && this.oldsrc == url) {
|
|
|
+ this.audio.pause();
|
|
|
+ }else if(this.audio.paused && this.oldsrc == url){
|
|
|
+ this.audio.play();
|
|
|
+ } else {
|
|
|
+ _this.audio.pause();
|
|
|
+ _this.audio.load();
|
|
|
+ _this.audio.src = url;
|
|
|
+ _this.oldsrc = url
|
|
|
+ _this.audio.loop = false;
|
|
|
+ _this.audio.play();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 处理数据
|
|
|
+ handleData(){
|
|
|
+ if(!this.curQue.Bookanswer){
|
|
|
+ let curCorrect = [];
|
|
|
+ this.curQue.option.forEach(item => {
|
|
|
+ curCorrect.push('')
|
|
|
+ });
|
|
|
+ this.$set(this.curQue, "Bookanswer", curCorrect);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 判断题选择
|
|
|
+ handleSelectJudge(obj,index){
|
|
|
+ this.$set(this.curQue.Bookanswer, index, obj);
|
|
|
+ },
|
|
|
+ },
|
|
|
+ //生命周期 - 创建完成（可以访问当前this实例）
|
|
|
+ created() {
|
|
|
+ this.handleData()
|
|
|
+ },
|
|
|
+ //生命周期 - 挂载完成（可以访问DOM元素）
|
|
|
+ mounted() {
|
|
|
+ let _this = this;
|
|
|
+ _this.audio.addEventListener("play", function () {
|
|
|
+ _this.palyClass = 'active'
|
|
|
+ });
|
|
|
+ _this.audio.addEventListener("pause", function () {
|
|
|
+ _this.palyClass = ''
|
|
|
+ });
|
|
|
+ _this.audio.addEventListener("ended", function () {
|
|
|
+ _this.palyClass = ''
|
|
|
+ });
|
|
|
+ },
|
|
|
+ beforeCreate() {}, //生命周期 - 创建之前
|
|
|
+ beforeMount() {}, //生命周期 - 挂载之前
|
|
|
+ beforeUpdate() {}, //生命周期 - 更新之前
|
|
|
+ updated() {}, //生命周期 - 更新之后
|
|
|
+ beforeDestroy() {}, //生命周期 - 销毁之前
|
|
|
+ destroyed() {}, //生命周期 - 销毁完成
|
|
|
+ activated() {}, //如果页面有keep-alive缓存功能，这个函数会触发
|
|
|
+};
|
|
|
+</script>
|
|
|
+<style lang='scss' scoped>
|
|
|
+//@import url(); 引入公共css类
|
|
|
+.Big-Book-prev-Textdes{
|
|
|
+ width: 100%;
|
|
|
+ h2{
|
|
|
+ font-weight: normal;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ margin: 0 2px 8px 2px;
|
|
|
+ }
|
|
|
+ ul{
|
|
|
+ display: flex;
|
|
|
+ flex-flow: wrap;
|
|
|
+ justify-content: start;
|
|
|
+ list-style: none;
|
|
|
+ li{
|
|
|
+ width: 100%;
|
|
|
+ background: #FFFFFF;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 8px;
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-start;
|
|
|
+ padding: 8px 12px;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ >b{
|
|
|
+ width: 24px;
|
|
|
+ line-height: 24px;
|
|
|
+ font-size: 16px;
|
|
|
+ text-align: right;
|
|
|
+ margin-right: 8px;
|
|
|
+ font-weight: 400;
|
|
|
+ color: #000000;
|
|
|
+ // margin-top: 4px;
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ }
|
|
|
+ >p{
|
|
|
+ width: 24px;
|
|
|
+ height: 24px;
|
|
|
+ cursor: pointer;
|
|
|
+ background: url('../../../assets/newImage/common/icon-voice.png') left center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ margin: 0px 8px 0 0;
|
|
|
+ &.active{
|
|
|
+ background: url('../../../assets/newImage/common/icon-voice-play-zise.png') left center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .item-con{
|
|
|
+ flex: 1;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ color: #000000;
|
|
|
+ margin-right: 8px;
|
|
|
+ word-break: break-word;
|
|
|
+ // margin-top: 4px;
|
|
|
+ font-family: 'FZJCGFKTK';
|
|
|
+ }
|
|
|
+ input{
|
|
|
+ width: 68px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.15);
|
|
|
+ box-sizing: border-box;
|
|
|
+ border-radius: 4px;
|
|
|
+ outline: none;
|
|
|
+ height: 32px;
|
|
|
+ padding: 4px 8px;
|
|
|
+ color: #000000;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 16px;
|
|
|
+ line-height: 150%;
|
|
|
+ }
|
|
|
+ .judge-box{
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ a{
|
|
|
+ width: 32px;
|
|
|
+ height: 32px;
|
|
|
+ background: #fff url('../../../assets/newImage/common/right-btn.png') center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ &:hover,&.active{
|
|
|
+ background-color: #E5FFF0;
|
|
|
+ border-color: #00C850;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ a.error-btn{
|
|
|
+ background: #fff url('../../../assets/newImage/common/error-btn.png') center no-repeat;
|
|
|
+ background-size: 24px;
|
|
|
+ margin-left: 4px;
|
|
|
+ &:hover,&.active{
|
|
|
+ background-color: #FFE5E5;
|
|
|
+ border-color: #DE4444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .luyin-box{
|
|
|
+ border: 1px solid rgba(0, 0, 0, 0.1);
|
|
|
+ border-radius: 8px;
|
|
|
+ width: 68px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha