kwic 加载更多

src/views/bookShelf/components/NewWordList.vue

@@ -58,7 +58,7 @@ export default {
         audio: new Audio(),
         voiceSrc: "",
         voicePauseSrc: '',
-        voicePlaySrc: require("../../../assets/voice-play-gray.png"),
+        voicePlaySrc: require("../../../assets/voice-play-red.png"),
         activeIndex: null,
         likeWord: JSON.parse(JSON.stringify(this.likeWordList)),
         activeItem: null,

src/views/bookShelf/components/PhraseCard.vue

@@ -44,7 +44,7 @@ export default {
       audio: new Audio(),
       voiceSrc: "",
       voicePauseSrc: '',
-      voicePlaySrc: require("../../../assets/voice-play-gray.png"),
+      voicePlaySrc: require("../../../assets/voice-play-red.png"),
       sentKwicData: null,
       allList: [],
       phraseActiveIndex: this.activeObjIndex, //JSON.parse(JSON.stringify(this.activeObjIndex))

src/views/personalCenter/components/Collect.vue

@@ -273,7 +273,7 @@ export default {
         audio: new Audio(),
         voiceSrc: "",
         voicePauseSrc: '',
-        voicePlaySrc: require("../../../assets/voice-play-gray.png"),
+        voicePlaySrc: require("../../../assets/voice-play-red.png"),
         activeIndex: null,
         playInfo: null
     }

src/views/personalCenter/components/WordCard.vue

@@ -89,84 +89,85 @@
             </div>
         </div>
         <div class="list">
-              <template v-if="!kwicFlag">
-                <div
-                  v-for="(item, i) in activeIndex===0?sentKwicData.sentence_list:sentKwicData.shelf_list"
-                  :key="i + 'sentence'"
-                  class="one"
-                >
-                  <div class="top">
-                    <div class="number">{{ item.number }}.</div>
-                    <div class="words">
-                      <span
-                        v-html="item.res"
-                      ></span>
-                    </div>
-                  </div>
-                  <div class="bottom">
-                    {{ item.source_courseware_name_path }}
-                  </div>
+            <template v-if="!kwicFlag">
+            <div
+                v-for="(item, i) in activeIndex===0?sentKwicData.sentence_list:sentKwicData.shelf_list"
+                :key="i + 'sentence'"
+                class="one"
+            >
+                <div class="top">
+                <div class="number">{{ item.number }}.</div>
+                <div class="words">
+                    <span
+                    v-html="item.res"
+                    ></span>
+                </div>
                 </div>
-              </template>
-              <template v-else>
-                <template v-if="activeIndex===0">
+                <div class="bottom">
+                {{ item.source_courseware_name_path }}
+                </div>
+            </div>
+            </template>
+            <template v-else>
+            <template v-if="activeIndex===0">
+                <div
+                    v-for="(item, index) in kwicAlign==='left'?sentKwicData.sentence_list_sort_left:kwicAlign==='center'?sentKwicData.sentence_list_sort_mid:sentKwicData.sentence_list_sort_right"
+                    :key="'kwic' + index"
+                    class="kwic_one"
+                    >
+                    <div class="number">{{ item.number }}</div>
+                    <el-tooltip effect="dark" placement="bottom">
+                        <div class="content" slot="content">
+                        {{ item.source_courseware_name_path }}
+                        </div>
+                        <div class="laiyuan">
+                        {{ item.source_courseware_name_path }}
+                        </div>
+                    </el-tooltip>
                     <div
-                        v-for="(item, index) in kwicAlign==='left'?sentKwicData.sentence_list_sort_left:kwicAlign==='center'?sentKwicData.sentence_list_sort_mid:sentKwicData.sentence_list_sort_right"
-                        :key="'kwic' + index"
-                        class="kwic_one"
-                        >
-                        <div class="number">{{ item.number }}</div>
-                        <el-tooltip effect="dark" placement="bottom">
-                            <div class="content" slot="content">
-                            {{ item.source_courseware_name_path }}
-                            </div>
-                            <div class="laiyuan">
-                            {{ item.source_courseware_name_path }}
-                            </div>
-                        </el-tooltip>
-                        <div
-                            class="word_sentence"
-                        >
-                            <div v-for="(txt, indexs) in item.resArr" :key="indexs">
-                            <span
-                                v-for="(txts, indexs) in txt"
-                                v-html="txts[0]"
-                                :key="indexs"
-                            ></span>
-                            </div>
+                        class="word_sentence"
+                    >
+                        <div v-for="(txt, indexs) in item.resArr" :key="indexs">
+                        <span
+                            v-for="(txts, indexs) in txt"
+                            v-html="txts[0]"
+                            :key="indexs"
+                        ></span>
                         </div>
                     </div>
-                </template>
-                <template v-if="activeIndex===1">
+                </div>
+            </template>
+            <template v-if="activeIndex===1">
+                <div
+                    v-for="(item, index) in kwicAlign==='left'?sentKwicData.shelf_list_sort_left:kwicAlign==='center'?sentKwicData.shelf_list_sort_mid:sentKwicData.shelf_list_sort_right"
+                    :key="'kwic' + index"
+                    class="kwic_one"
+                    >
+                    <div class="number">{{ item.number }}</div>
+                    <el-tooltip effect="dark" placement="bottom">
+                        <div class="content" slot="content">
+                        {{ item.source_courseware_name_path }}
+                        </div>
+                        <div class="laiyuan">
+                        {{ item.source_courseware_name_path }}
+                        </div>
+                    </el-tooltip>
                     <div
-                        v-for="(item, index) in kwicAlign==='left'?sentKwicData.shelf_list_sort_left:kwicAlign==='center'?sentKwicData.shelf_list_sort_mid:sentKwicData.shelf_list_sort_right"
-                        :key="'kwic' + index"
-                        class="kwic_one"
-                        >
-                        <div class="number">{{ item.number }}</div>
-                        <el-tooltip effect="dark" placement="bottom">
-                            <div class="content" slot="content">
-                            {{ item.source_courseware_name_path }}
-                            </div>
-                            <div class="laiyuan">
-                            {{ item.source_courseware_name_path }}
-                            </div>
-                        </el-tooltip>
-                        <div
-                            class="word_sentence"
-                        >
-                            <div v-for="(txt, indexs) in item.resArr" :key="indexs">
-                            <span
-                                v-for="(txts, indexs) in txt"
-                                v-html="txts[0]"
-                                :key="indexs"
-                            ></span>
-                            </div>
+                        class="word_sentence"
+                    >
+                        <div v-for="(txt, indexs) in item.resArr" :key="indexs">
+                        <span
+                            v-for="(txts, indexs) in txt"
+                            v-html="txts[0]"
+                            :key="indexs"
+                        ></span>
                         </div>
                     </div>
-                </template>
-              </template>
-            </div>
+                </div>
+            </template>
+            </template>
+            <a class="load-more" @click="loadMore" v-if="activeIndex===0?maxPage>pageNo:maxPageShelf>pageNo">加载更多</a>
+        </div>
     </div>
   </div>
 </template>
@@ -189,7 +190,7 @@ export default {
       audio: new Audio(),
       voiceSrc: "",
       voicePauseSrc: '',
-      voicePlaySrc: require("../../../assets/voice-play-gray.png"),
+      voicePlaySrc: require("../../../assets/voice-play-red.png"),
       sentKwicData: {
         my_bought_total: 0,
         total: 0,
@@ -216,6 +217,8 @@ export default {
       },
       pageNo: 1,
       pageNoNew: 1,
+      maxPage:1,
+      maxPageShelf:1,
       enFhList: [
         ",",
         ".",
@@ -367,6 +370,20 @@ export default {
             if(this.phraseActiveIndex>0){
                 this.phraseActiveIndex--
                 this.data = this.wordList[this.phraseActiveIndex]
+                this.pageNoNew = 1
+                this.sentKwicData = {
+                    my_bought_total: 0,
+                    total: 0,
+                    max_page_no: 0,
+                    sentence_list: [],
+                    sentence_list_sort_left: [],
+                    sentence_list_sort_mid: [],
+                    sentence_list_sort_right: [],
+                    shelf_list: [],
+                    shelf_list_sort_left: [],
+                    shelf_list_sort_mid: [],
+                    shelf_list_sort_right: [],
+                }
                 this.getInfo()
                 this.getQuerySentKwic()
             }else{
@@ -376,6 +393,20 @@ export default {
             if(this.phraseActiveIndex<this.wordList.length-1){
                 this.phraseActiveIndex++
                 this.data = this.wordList[this.phraseActiveIndex]
+                this.pageNoNew = 1
+                this.sentKwicData = {
+                    my_bought_total: 0,
+                    total: 0,
+                    max_page_no: 0,
+                    sentence_list: [],
+                    sentence_list_sort_left: [],
+                    sentence_list_sort_mid: [],
+                    sentence_list_sort_right: [],
+                    shelf_list: [],
+                    shelf_list_sort_left: [],
+                    shelf_list_sort_mid: [],
+                    shelf_list_sort_right: [],
+                }
                 this.getInfo()
                 this.getQuerySentKwic()
             }else{
@@ -383,9 +414,15 @@ export default {
             }
         }
     },
+    // 加载更多‘
+    loadMore(){
+        this.pageNoNew ++ 
+        this.getQuerySentKwic()
+    },
     // 获取例句
     getQuerySentKwic(){
         this.pageNo = this.pageNoNew
+        this.loading = true
         getLogin('/PaperServer/Client/Article/QuerySentKwicData', {
             word: this.data.word,
             page_size: 30,
@@ -400,10 +437,11 @@ export default {
                 this.sentKwicData.my_bought_total = res.my_bought_total
                 this.sentKwicData.total = res.total
                 if(res.data&&res.data.results){
+                    this.maxPage = res.data.max_page_no
                     res.data.results.forEach((item,indexs) => {
                         let tokenIndexArr = item.token_idx_arr
                         let str = ''
-                        item.number = indexs+1
+                        item.number = indexs+1+30*(this.pageNo-1)
                         tokenIndexArr.forEach(index=>{
                             item.tokens[index][0] = '<span style=\"color:#ED5F00;font-weight:600;\">'+ item.tokens[index][0] + '</span>'
                         })
@@ -414,7 +452,7 @@ export default {
                         item.res = str
                         item.source_courseware_name_path = item.study_phase_name + '版 / ' + item.iss_no + ' / ' + item.release_date + ' / ' + item.art_title
                     });
-                    this.sentKwicData.sentence_list = res.data.results
+                    this.sentKwicData.sentence_list = this.sentKwicData.sentence_list.concat(res.data.results)
                 }
                 
             }
@@ -434,10 +472,10 @@ export default {
             if(res.status===1){
                 if(res.data&&res.data.results){
                     res.data.results.forEach((item,indexs) => {
-                        item.number = indexs+1
+                        item.number = indexs+1+30*(this.pageNo-1)
                         item.source_courseware_name_path = item.study_phase_name + '版 / ' + item.iss_no + ' / ' + item.release_date + ' / ' + item.art_title
                     });
-                    this.sentKwicData.sentence_list_sort_left = this.handleExample(res.data.results,'left')
+                    this.sentKwicData.sentence_list_sort_left = this.sentKwicData.sentence_list_sort_left.concat(this.handleExample(res.data.results,'left'))
                 }
                 
             }
@@ -457,10 +495,10 @@ export default {
             if(res.status===1){
                 if(res.data&&res.data.results){
                     res.data.results.forEach((item,indexs) => {
-                        item.number = indexs+1
+                        item.number = indexs+1+30*(this.pageNo-1)
                         item.source_courseware_name_path = item.study_phase_name + '版 / ' + item.iss_no + ' / ' + item.release_date + ' / ' + item.art_title
                     });
-                    this.sentKwicData.sentence_list_sort_mid = this.handleExample(res.data.results,'mid')
+                    this.sentKwicData.sentence_list_sort_mid = this.sentKwicData.sentence_list_sort_mid.concat(this.handleExample(res.data.results,'mid'))
                 }
                 
             }
@@ -480,10 +518,10 @@ export default {
             if(res.status===1){
                 if(res.data&&res.data.results){
                     res.data.results.forEach((item,indexs) => {
-                        item.number = indexs+1
+                        item.number = indexs+1+30*(this.pageNo-1)
                         item.source_courseware_name_path = item.study_phase_name + '版 / ' + item.iss_no + ' / ' + item.release_date + ' / ' + item.art_title
                     });
-                    this.sentKwicData.sentence_list_sort_right = this.handleExample(res.data.results,'right')
+                    this.sentKwicData.sentence_list_sort_right = this.sentKwicData.sentence_list_sort_right.concat(this.handleExample(res.data.results,'right'))
                 }
                 
             }
@@ -499,10 +537,11 @@ export default {
             this.loading = false
             if(res.status===1){
                 if(res.data&&res.data.results){
+                    this.maxPageShelf = res.data.max_page_no
                     res.data.results.forEach((item,indexs) => {
                         let tokenIndexArr = item.token_idx_arr
                         let str = ''
-                        item.number = indexs+1
+                        item.number = indexs+1+30*(this.pageNo-1)
                         tokenIndexArr.forEach(index=>{
                             item.tokens[index][0] = '<span style=\"color:#ED5F00;font-weight:600;\">'+ item.tokens[index][0] + '</span>'
                         })
@@ -513,7 +552,7 @@ export default {
                         item.res = str
                         item.source_courseware_name_path = item.study_phase_name + '版 / ' + item.iss_no + ' / ' + item.release_date + ' / ' + item.art_title
                     });
-                    this.sentKwicData.shelf_list = res.data.results
+                    this.sentKwicData.shelf_list = this.sentKwicData.shelf_list.concat(res.data.results)
                 }
                 
             }
@@ -533,10 +572,10 @@ export default {
             if(res.status===1){
                 if(res.data&&res.data.results){
                     res.data.results.forEach((item,indexs) => {
-                        item.number = indexs+1
+                        item.number = indexs+1+30*(this.pageNo-1)
                         item.source_courseware_name_path = item.study_phase_name + '版 / ' + item.iss_no + ' / ' + item.release_date + ' / ' + item.art_title
                     });
-                    this.sentKwicData.shelf_list_sort_left = this.handleExample(res.data.results,'left')
+                    this.sentKwicData.shelf_list_sort_left = this.sentKwicData.shelf_list_sort_left.concat(this.handleExample(res.data.results,'left'))
                 }
                 
             }
@@ -556,10 +595,10 @@ export default {
             if(res.status===1){
                 if(res.data&&res.data.results){
                     res.data.results.forEach((item,indexs) => {
-                        item.number = indexs+1
+                        item.number = indexs+1+30*(this.pageNo-1)
                         item.source_courseware_name_path = item.study_phase_name + '版 / ' + item.iss_no + ' / ' + item.release_date + ' / ' + item.art_title
                     });
-                    this.sentKwicData.shelf_list_sort_mid = this.handleExample(res.data.results,'mid')
+                    this.sentKwicData.shelf_list_sort_mid = this.sentKwicData.shelf_list_sort_mid.concat(this.handleExample(res.data.results,'mid'))
                 }
                 
             }
@@ -579,10 +618,10 @@ export default {
             if(res.status===1){
                 if(res.data&&res.data.results){
                     res.data.results.forEach((item,indexs) => {
-                        item.number = indexs+1
+                        item.number = indexs+1+30*(this.pageNo-1)
                         item.source_courseware_name_path = item.study_phase_name + '版 / ' + item.iss_no + ' / ' + item.release_date + ' / ' + item.art_title
                     });
-                    this.sentKwicData.shelf_list_sort_right = this.handleExample(res.data.results,'right')
+                    this.sentKwicData.shelf_list_sort_right = this.sentKwicData.shelf_list_sort_right.concat(this.handleExample(res.data.results,'right'))
                 }
                 
             }
@@ -1098,6 +1137,13 @@ export default {
             }
         }
     }
+    .load-more{
+        cursor: pointer;
+        font-size: 14px;
+        display: block;
+        text-align: center;
+        margin: 4px;
+    }
 }
 </style>
 <style lang="scss">