词汇类型

src/views/bookShelf/articleDetail.vue

@@ -254,7 +254,7 @@ export default {
                         bg:'#FFE8E8'
                     },
                     'LC':{
-                        color:'#4A524E',
+                        color:'#99A29E',
                         bg:'#DFE4E2'
                     },
                     'LD':{
@@ -317,7 +317,7 @@ export default {
                         bg:'#FFE8E8'
                     },
                     'LC':{
-                        color:'#4A524E',
+                        color:'#99A29E',
                         bg:'#DFE4E2'
                     },
                     'LD':{
@@ -603,7 +603,7 @@ export default {
             },
             LC:{
                 bg:'#DFE4E2',
-                color:'#4A524E',
+                color:'#99A29E',
                 border:'rgba(0, 0, 0, 0.08)',
                 darkBg:'#4A524E',
                 darkColor:'rgba(255, 255, 255, 0.64)',

src/views/bookShelf/articleShareDetail.vue

@@ -156,7 +156,7 @@ export default {
                         bg:'#FFE8E8'
                     },
                     'LC':{
-                        color:'#4A524E',
+                        color:'#99A29E',
                         bg:'#DFE4E2'
                     },
                     'LD':{
@@ -263,7 +263,7 @@ export default {
             },
             LC:{
                 bg:'#DFE4E2',
-                color:'#4A524E',
+                color:'#99A29E',
                 border:'rgba(0, 0, 0, 0.08)',
                 darkBg:'#4A524E',
                 darkColor:'rgba(255, 255, 255, 0.64)',

src/views/bookShelf/components/ArticleInfo.vue

@@ -172,7 +172,7 @@ export default {
             },
             LC:{
                 bg:'#DFE4E2',
-                color:'#4A524E',
+                color:'#99A29E',
                 border:'rgba(0, 0, 0, 0.08)',
                 darkBg:'#4A524E',
                 darkColor:'rgba(255, 255, 255, 0.64)',

src/views/bookShelf/components/LexicalType.vue

@@ -74,7 +74,7 @@
                                 :class="[
                                     pItem.tokens[9]===' '?'marginRight':'',pItem.marginRight?'marginSingleRight':'',pItem.color?'wordSelected':''
                                 ]"
-                                :style="{fontSize:wordFontsize + 'px',color: tabsIndex===1&&selectSentenceIdList.indexOf(pItem.sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[pItem.sententLenType].color:sentenceLengthType[pItem.sententLenType].dark:'#929CA8',}"
+                                :style="{fontSize:wordFontsize + 'px',color: tabsIndex===1?selectSentenceIdList.indexOf(pItem.sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[pItem.sententLenType].color:sentenceLengthType[pItem.sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(pItem.tokens[11])>-1?vocabularyType[pItem.tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#2F3742':'#C1C5CD':'#2F3742',}"
                                 >{{ pItem.tokens[2] }}</span
                             >
                             <span
@@ -85,7 +85,7 @@
                             :class="[
                                     item.wordsList[pIndex + 1].tokens[9]===' '?'marginRight':'',item.wordsList[pIndex + 1].marginRight?'marginSingleRight':'',item.wordsList[pIndex + 1].color?'wordSelected':''
                                 ]"
-                                :style="{fontSize:wordFontsize + 'px',color:'#929CA8',}"
+                                :style="{fontSize:wordFontsize + 'px',color: tabsIndex===1?selectSentenceIdList.indexOf(item.wordsList[pIndex + 1].sent_id)>-1?colorObj.type==='white'||colorObj.type==='darkGreen'?sentenceLengthType[item.wordsList[pIndex + 1].sententLenType].color:sentenceLengthType[item.wordsList[pIndex + 1].sententLenType].dark:'#929CA8':tabsIndex===0?selectWordType.indexOf(item.wordsList[pIndex + 1].tokens[11])>-1?vocabularyType[item.wordsList[pIndex + 1].tokens[11]].color:colorObj.type==='white'||colorObj.type==='darkGreen'?'#2F3742':'#C1C5CD':'#2F3742',}"
                             >{{ item.wordsList[pIndex + 1].tokens[2] }}</span
                             >
                         </div>
@@ -101,6 +101,30 @@
     <!-- <img src="../../../assets/article-img.png" style="max-width:100%;margin:24px 0;" /> -->
     <div class="search-box" v-if="showSearch">
         <span class="search-show-btn" @click="changeShow"></span>
+        <div class="tabs-box">
+            <a :class="['tabs-btn',tabsIndex===0?'active':'']" @click="tabsIndex=0">词汇分布</a>
+            <a :class="['tabs-btn right-btn',tabsIndex===1?'active':'']" @click="tabsIndex=1">句长分布</a>
+        </div>
+        <ul v-if="tabsIndex===0">
+            <li v-for="(itemI,indexI) in vocabVlLevelItems" :key="indexI" @change="changeWordType(itemI)">
+                <el-checkbox key="word" :label="itemI.vlId"><br/></el-checkbox>
+                <p class="parent">
+                    <label :style="{width:itemI.vocabPercentStr}"></label>
+                    <span :style="{color:vocabularyType[itemI.vlId].color}">{{itemI.vlCnName}}</span>
+                    <b>{{itemI.vocabCount}}</b>
+                </p>
+            </li>
+        </ul>
+        <ul v-if="tabsIndex===1">
+            <li v-for="(itemI,indexI) in sentLenDistributeItems" :key="indexI" @change="changeSentLen(itemI)">
+                <el-checkbox key="sentence" :label="itemI.rangeInfo"><br/></el-checkbox>
+                <p class="parent">
+                    <label :style="{width:itemI.percent+'%'}"></label>
+                    <span :style="{color:sentenceLengthType[itemI.rangeInfo].color}">{{itemI.rangeInfo}}</span>
+                    <b>{{itemI.count}}</b>
+                </p>
+            </li>
+        </ul>
     </div>
   </div>
 </template>
@@ -224,7 +248,7 @@ export default {
         },
         LC:{
             bg:'#DFE4E2',
-            color:'#4A524E',
+            color:'#99A29E',
             border:'rgba(0, 0, 0, 0.08)',
             darkBg:'#4A524E',
             darkColor:'rgba(255, 255, 255, 0.64)',
@@ -286,9 +310,12 @@ export default {
             dark: '#FF0000'
         }
       },
-      tabsIndex: 1,
+      tabsIndex: 0,
       selectSentenceType: [], //勾选的要显示的句子长度类型
-      selectSentenceIdList: ['i21a160966_D1AnUDT3','i21a160966_Gw6nMSGa'], // 勾选的药显示的句子id
+      selectSentenceIdList: [], // 勾选的药显示的句子id
+      sentLenDistributeItems: [],
+      vocabVlLevelItems: [],
+      selectWordType: []
     };
   },
   computed: {
@@ -302,7 +329,11 @@ export default {
     handleData() {
       let resArr = [];
       let articleInfo = JSON.parse(JSON.stringify(this.articleInfo));
-      let sentLenDistributeItems = articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo&&articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems?articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems:[]
+      this.sentLenDistributeItems = articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo&&articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems?articleInfo.art_corpus_data.artStatInfo.sentLenDistributeItems:[]
+      this.vocabVlLevelItems = articleInfo.art_corpus_data&&articleInfo.art_corpus_data.artStatInfo&&articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems?articleInfo.art_corpus_data.artStatInfo.vocabVlLevelItems:[]
+      this.sentLenDistributeItems.forEach(item=>{
+        item.percent = (item.count/this.articleInfo.art_corpus_data.artStatInfo.sentCount*100).toFixed(2)
+      })
       let leg = articleInfo.art_corpus_data.sentList[articleInfo.art_corpus_data.sentList.length-1].pno
       for(let i=0;i<leg+1;i++){
         let obj = {
@@ -313,9 +344,9 @@ export default {
       }
       articleInfo.art_corpus_data.sentList.forEach((item,index) => {
         let sententLenType = ''
-        for(let i=0; i<sentLenDistributeItems.length; i++){
-            if(sentLenDistributeItems[i].sentIds.indexOf(item.id)>-1){
-                sententLenType = sentLenDistributeItems[i].rangeInfo
+        for(let i=0; i<this.sentLenDistributeItems.length; i++){
+            if(this.sentLenDistributeItems[i].sentIds.indexOf(item.id)>-1){
+                sententLenType = this.sentLenDistributeItems[i].rangeInfo
                 break
             }
         }
@@ -336,11 +367,36 @@ export default {
         resArr[item.pno].timeList.push(articleInfo.art_sound_srt_data.sents[index])
       });
       this.resArr = resArr;
+
     },
     changeShow(){
         this.showSearch = !this.showSearch
     },
-    
+    // 勾选句长
+    changeSentLen(item){
+        this.selectSentenceIdList = []
+        if(this.selectSentenceType.indexOf(item.rangeInfo)>-1){
+            this.selectSentenceType.splice(this.selectSentenceType.indexOf(item.rangeInfo),1)
+        }else{
+            this.selectSentenceType.push(item.rangeInfo)
+        }
+        this.selectSentenceType.forEach(items=>{
+            for(let i=0; i<this.sentLenDistributeItems.length; i++){
+                if(this.sentLenDistributeItems[i].rangeInfo===items){
+                    this.selectSentenceIdList = this.selectSentenceIdList.concat(this.sentLenDistributeItems[i].sentIds)
+                    break
+                }
+            }
+        })
+    },
+    // 勾选单词类型
+    changeWordType(item){
+        if(this.selectWordType.indexOf(item.vlId)>-1){
+            this.selectWordType.splice(this.selectWordType.indexOf(item.vlId),1)
+        }else{
+            this.selectWordType.push(item.vlId)
+        }
+    }
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {},
@@ -488,14 +544,14 @@ export default {
 .search-box{
     position: fixed;
     top: 200px;
-    width: 298px;
+    width: 256px;
     border-radius: 8px;
     border: 1px solid #E5E6EB;
     background: #FFF;
     box-shadow: 0px 8px 10px -5px rgba(0, 0, 0, 0.08), 0px 16px 24px 2px rgba(0, 0, 0, 0.04), 0px 6px 30px 5px rgba(0, 0, 0, 0.05);
     // min-height: 204px;
     right: calc((100% - 1000px)/2);
-    padding: 0 16px 16px;
+    padding: 0 24px 24px;
     .search-show-btn{
         border-radius: 4px;
         background:#D0D3D9;
@@ -505,5 +561,70 @@ export default {
         margin: 6px auto;
         cursor: pointer;
     }
+    .tabs-box{
+        display: flex;
+        align-items: center;
+        a{
+            border-radius: 3px 0px 0px 3px;
+            border: 1px solid #D6D6D6;
+            padding: 5px 16px;
+            width: 104px;
+            text-align: center;
+            color:rgba(0, 0, 0, 0.56);
+            font-size: 14px;
+            font-weight: 400;
+            line-height: 22px;
+            &.right-btn{
+                border-radius: 0px 3px 3px 0px;
+            }
+            &.active{
+                border-color: #3459D2;
+                color: #3459D2;
+            }
+        }
+    }
+    ul{
+        padding: 0;
+        margin: 0;
+        li{
+            display: flex;
+            align-items: center;
+            margin: 16px 0;
+            justify-content: space-between;
+            p{
+                margin: 0;
+                position: relative;
+                width: 184px;
+                height: 22px;
+                label{
+                    display: block;
+                    top: 0;
+                    right: 0;
+                    height: 22px;
+                    border-radius: 4px;
+                    background:#EEF3FF;
+                    position: absolute;
+                }
+                span{
+                    position: absolute;
+                    left: 0;
+                    top: 0;
+                    color:#85B00F;
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 22px;
+                }
+                b{
+                    position: absolute;
+                    right: 4px;
+                    top: 0;
+                    color: var(--slate-10, #2F3742);
+                    font-size: 14px;
+                    font-weight: 400;
+                    line-height: 22px;
+                }
+            }
+        }
+    }
 }
 </style>

src/views/personalCenter/components/OrderList.vue

@@ -85,8 +85,8 @@
             width="112">
             <template slot-scope="scope">
                 <div class="status-box">
-                    <span :style="{background:statusList[scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='true'?'success2':scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='false'?'success':'refundFail'].bg}"></span>
-                    <b :style="{color:statusList[scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='true'?'success2':scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='false'?'success':'refundFail'].textColor}">{{statusList[scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='true'?'success2':scope.row.is_pay==='true'&&scope.row.is_use_discount_code==='false'?'success':'refundFail'].text}}</b>
+                    <span :style="{background:statusList[scope.row.order_status].bg}"></span>
+                    <b :style="{color:statusList[scope.row.order_status].textColor}">{{scope.row.order_status_name}}</b>
                 </div>
             </template>
         </el-table-column>
@@ -140,27 +140,27 @@ export default {
         pageSize: 10, 
         pageNumber: 1,
         statusList:{
-            'success':{
+            1:{
                 text:'支付成功',
                 bg:'#00B42A',
                 textColor:'#1D2129'
             },
-            'success2':{
+            2:{
                 text:'兑换成功',
                 bg:'#165DFF',
                 textColor:'#1D2129'
             },
-            'refunded':{
+            3:{
                 text:'已退款',
                 bg:'#EF21DA',
                 textColor:'#EF21DA'
             },
-            'refundFail':{
+            4:{
                 text:'支付失败',
-                bg:'#F53F3F',
-                textColor:'#F53F3F'
+                bg:'#FF7D00',
+                textColor:'#1D2129'
             },
-            'refunding':{
+            0:{
                 text:'申请退款中',
                 bg:'#F53F3F',
                 textColor:'#F53F3F'

src/views/register.vue

@@ -90,7 +90,7 @@
                 </el-checkbox-group>
             </el-form-item>
             <el-form-item>
-                <el-button type="primary" @click="onSubmitPassword('registerFormUser')" size="small" :loading="loading">保存</el-button>
+                <el-button type="primary" @click="onSubmitPassword('registerFormUser')" size="small" :loading="loading">注册</el-button>
                 <el-button @click="onCancel('registerFormUser')" size="small">取消</el-button>
             </el-form-item>
         </el-form>