yb9.0

src/views/voice/List.vue

@@ -16,6 +16,10 @@ const route=useRoute()
 const listPageEl=ref('')
 const {width}=useElementSize(listPageEl)
 
+//监听顶部筛选盒子的高度
+const topNavBoxEl=ref('')
+const {height}=useElementSize(topNavBoxEl)
+
 let noAuth=ref(null)//无权限数据
 
 // 获取板块列表
@@ -79,6 +83,7 @@ const getVoiceList=async ()=>{
         if(arr.length===0||arr.length<listState.pageSize){
             listState.finished=true
         }
+        noAuth.value=null
     }else if(res.code===403){
         noAuth.value=res.data
         handleAutoApply()
@@ -273,6 +278,10 @@ onActivated(()=>{
         shareImg:''
     };
     wx.miniProgram.postMessage({ data: postData });
+    if(noAuth.value){
+        //无权限时每次进页面都刷新列表
+        getVoiceList()
+    }
 })
 
 </script>
@@ -283,39 +292,20 @@ onActivated(()=>{
         <img :src="$store.state.globalImgUrls.activityNoAuth" alt="">
         <p style="font-size:16px;margin-bottom: 0;">您暂无权限查看语音播报</p>
         <template v-if="noAuth.type=='contact'">
-            <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想查看，可以联系对口销售--{{noAuth.name}}：{{noAuth.mobile}}</p>
+            <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想查看，可以联系对口销售--{{noAuth.name}}：<span style="color:#F3A52F">{{noAuth.mobile}}</span></p>
         </template>
         <template v-else>
             <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想参加可以申请开通</p>
             <div class="global-main-btn btn" @click="handleApply" style="margin-bottom: 20px;">立即申请</div>
         </template>
     </div>
-    <div class="voice-list-page" ref="listPageEl" v-else>
-        <div class="top-nav-list-box" :style="{width:width+'px'}">
+    <div class="voice-list-page" :style="{paddingTop:height+20+'px'}" ref="listPageEl" v-else>
+        <div class="top-nav-list-box" :style="{width:width+'px'}" ref="topNavBoxEl">
             <span 
-                v-for="item in options.slice(0,6)" :key="item.id" 
-                :class="['item',item.id==listState.section_id&&'active']"
+                v-for="item in options" :key="item.id" 
+                :class="['multi-ellipsis item',item.id==listState.section_id&&'active']"
                 @click="handleChangeSection(item)"
             >{{item.val}}</span>
-            <el-popover
-                :width="500"
-                trigger="click"
-            
-            >
-                <template #reference>
-                    <img v-if="options.length>6" style="width:16px;transform: rotate(90deg);cursor: pointer" src="@/assets/icon-more.png" alt="">
-                </template>
-                <template #default>
-                    <div class="flex top-nav-filter-box">
-                        <div 
-                            :class="['item',item.id == listState.section_id&&'active']" 
-                            v-for="item in options.slice(6)" 
-                            :key="item.id"
-                            @click="handleChangeSection(item)"
-                         >{{item.val}}</div>
-                    </div>
-                </template>
-            </el-popover>
         </div>
         <SelfList 
             :finished="listState.finished" 
@@ -382,25 +372,6 @@ onActivated(()=>{
         background-image: url('@/assets/icon-wechat2.png');
     }
 }
-.top-nav-filter-box{
-    flex-wrap: wrap;
-    .item{
-        display: inline-block;
-        height: 40px;
-        background: #F6F6F6;
-        border-radius: 4px;
-        line-height: 40px;
-        padding: 0 8px;
-        font-size: 16px;
-        margin-right: 20px;
-        cursor: pointer;
-    }
-    .active{
-        color: #F3A52F;
-        background: #FFF5E9;
-        border: 1px solid #F3A52F;
-    }
-}
 .voice-list-page{
     padding-top: 63px;
     .list-wrap{
@@ -465,6 +436,7 @@ onActivated(()=>{
         border: 1px solid #F2F2F2;
         .item{
             display: inline-block;
+            max-width: 100%;
             height: 40px;
             background: #F6F6F6;
             border-radius: 4px;
@@ -472,6 +444,7 @@ onActivated(()=>{
             padding: 0 8px;
             font-size: 16px;
             margin-right: 20px;
+            margin-bottom: 20px;
             cursor: pointer;
         }
         .active{