Merge branch 'tech_pool_33'

src/views/question/List.vue

@@ -37,13 +37,9 @@ let question = reactive({
   // 二级分组列表数据
   secondGroupList:[],
   // 一级分组Id
-  selectedGroupId_first :0,
+  selectedGroupId_first :-1,
   // 二级分组Id
-  selectedGroupId_second:0,
-  // 正在播放的问题音频索引,没有为-1
-  audioPlayingIndex:-1,
-  // 正在播放的问题音频,没有为null
-  audioPlayingItem:null,
+  selectedGroupId_second:-1,
   // 现在点击的Id 为了正确增加点击数
   currentClickId:0,
   // 是否加载完成
@@ -62,29 +58,80 @@ let question = reactive({
   }
 })  
 
-let audio = ref(null)
-let timer = null
-
-
 // 获取分组列表
 const getOptionList =async ()=>{
   const res = await apiGetTagTree()
   if(res.code===200){
+    // 默认显示全部
    question.optionList = res.data||[]
+   question.optionList.unshift({
+    classify_id: -1,
+    classify_name: "全部",
+    sort: 0,
+    tags:[]
+   })
+  //  console.log(question.optionList);
     // 默认第一个一级分组
-    question.selectedGroupId_first = question.optionList[0].classify_id
+    // question.selectedGroupId_first = question.optionList[0].classify_id
     // 默认第一个一级分组的第一个二级分组
-    if(!question.optionList[0].tags[0]){
-      question.selectedGroupId_second=-1
-    }else{
-      question.selectedGroupId_second = question.optionList[0].tags[0].tag_id
-    }
-    question.secondGroupList = question.optionList[0].tags
-    getQuestionList()
+    // if(!question.optionList[0].tags[0]){
+      // question.selectedGroupId_second=-1
+    // }else{
+    //   question.selectedGroupId_second = question.optionList[0].tags[0].tag_id
+    // }
+    // question.secondGroupList = []
+    // getQuestionList()
+  }
+}
+
+// 请求已回答列表
+const getQuestionList=()=>{
+  question.isLoading = true
+  let params = {
+    variety_tag_id:question.selectedGroupId_second,
+    reply_status:3,
+    page_index:question.page_index,
+    page_size:question.page_size,
   }
+  apiQuestionList(params).then(res=>{
+    question.isFinish = true
+    if(res.code == 200){
+      let arr =res.data || []
+      question.list = [...question.list,...arr]
+      if(arr.length==0 || arr.length<params.page_size){
+        question.isTotalData = true
+      }
+      for (const item of question.list) {
+        if(!item.audio_status){
+          item.audio_status={
+            // 总共的时长
+            audioTime:item.audio_list[0].audio_play_seconds*1000,
+          }
+        } 
+      }
+    }else if(res.code==403){
+      question.isAuthor=0
+      question.noAuthorData = {
+        type:res.data.type,
+        salesName:res.data.name,
+        salesMobile:res.data.mobile,
+        hasApply:res.data.customer_info.has_apply,
+        company:res.data.customer_info.company_name,
+        name:res.data.customer_info.name,
+        status:res.data.customer_info.status
+      }
+      question.isFinish=true
+    }
+  })
+  .finally(()=>{
+    question.isLoading = false
+  })
 }
+
 getOptionList()
-  // 联系销售
+getQuestionList()
+
+// 联系销售
 const toContact = ()=>{
   // 请求申请接口
   if(!question.noAuthorData.hasApply){
@@ -123,8 +170,8 @@ const toApply = (type='')=>{
         apiApplyPermission({
             company_name:question.noAuthorData.company,
             real_name:question.noAuthorData.name,
-            source:7,
-            from_page:'沙盘推演',
+            source:5,
+            from_page:'问答社区',
         }).then(res=>{
             question.noAuthorData.hasApply=true
             const htmlStr = `<p>申请已提交</p><p>请等待销售人员与您联系</p>`;
@@ -142,62 +189,14 @@ const toApply = (type='')=>{
         router.push({
             path:'/apply/permission',
             query:{
-                source:7,
-                fromPage:'沙盘推演',
-                token:localStorage.getItem('token')||''
+                source:5,
+                fromPage:'问答社区'
             }
         })
       }
   }
 }
-// 请求已回答列表
-const getQuestionList=()=>{
-  question.isLoading = true
-  let params = {
-    variety_tag_id:question.selectedGroupId_second,
-    reply_status:3,
-    page_index:question.page_index,
-    page_size:question.page_size,
-  }
-  apiQuestionList(params).then(res=>{
-    question.isFinish = true
-    if(res.code == 200){
-      let arr =res.data || []
-      question.list = [...question.list,...arr]
-      if(arr.length==0 || arr.length<params.page_size){
-        question.isTotalData = true
-      }
-      for (const item of question.list) {
-        if(!item.audio_status){
-          item.audio_status={
-            isPlay:false,
-            // 已播放时间
-            playedTime:0,
-            // 总共的时长
-            audioTime:item.audio_list[0].audio_play_seconds*1000,
-            // 是否在加载中
-            loading:false
-          }
-        } 
-      }
-    }else if(res.code==403){
-      question.isAuthor=0
-      question.noAuthorData = {
-        type:res.data.type,
-        salesName:res.data.name,
-        salesMobile:res.data.mobile,
-        hasApply:res.data.customer_info.has_apply,
-        company:res.data.customer_info.company_name,
-        name:res.data.customer_info.name,
-        status:res.data.customer_info.status
-      }
-      question.isFinish=true
-    }
-  })
-  .finally(()=>{
-    question.isLoading = false
-  })
-}
+
 // 加载更多
 const onLoad = ()=>{
   question.page_index++
@@ -216,11 +215,6 @@ const ChangeSecGroup = (item)=>{
   question.page_index=1
   question.isTotalData = false
   question.isLoading = false
-  // 清除定时器
-  clearInterval(timer)
-  // 清除当前播放的音频信息和索引
-  question.audioPlayingIndex=-1
-  question.audioPlayingItem = null
   if(!item){
     // 没有二级分类
     question.selectedGroupId_second = -1
@@ -332,7 +326,7 @@ const setCancelNickHandle = async() => {
                 >{{item.classify_name}}</span>
                 <span class="ask-icon" @click="askQuestion"><img src="@/assets/icon-question-ask.png" /> 我要提问  </span>
             </div>
-            <div class="sec-nav-box">
+            <div class="sec-nav-box" v-show="question.secondGroupList.length>0">
                 <span
                     :class="['sec-item',item.tag_id==question.selectedGroupId_second?'active':'']"
                     v-for="item in question.secondGroupList.slice(0,6)"

src/views/question/MyList.vue

@@ -41,12 +41,6 @@ let question = reactive({
   questionStatus:0,
   //分组列表
   optionList:[],
-  // 录音索引
-  audioIndex:0,
-  // 正在播放的音频问题索引,没有为-1
-  audioPlayingIndex:-1,
-  // 正在播放的音频问题,没有为-1
-  audioPlayingItem:null,
   // 现在点击的Id 为了正确增加点击数
   currentClickId:0,
   // 是否加载完成
@@ -64,9 +58,6 @@ let question = reactive({
   replayCodeUrl:''
 })  
 
-let audio = ref(null)
-let timer = null
-
 // 顶部导航栏
 const getBarList = async ()=>{
   await store.dispatch('getUserInfo')
@@ -172,8 +163,8 @@ const toApply = (type='')=>{
         apiApplyPermission({
             company_name:question.noAuthorData.company,
             real_name:question.noAuthorData.name,
-            source:7,
-            from_page:'沙盘推演',
+            source:5,
+            from_page:'问答社区',
         }).then(res=>{
             question.noAuthorData.hasApply=true
             const htmlStr = `<p>申请已提交</p><p>请等待销售人员与您联系</p>`;
@@ -191,9 +182,8 @@ const toApply = (type='')=>{
         router.push({
             path:'/apply/permission',
             query:{
-                source:7,
-                fromPage:'沙盘推演',
-                token:localStorage.getItem('token')||''
+                source:5,
+                fromPage:'问答社区'
             }
         })
       }
@@ -201,9 +191,6 @@ const toApply = (type='')=>{
 }
 const changeTopTar = (key)=>{
   question.selectKey = key
-    // 清除定时器
-  clearInterval(timer)
-  // 清除当前播放的音频信息和索引
   // 重新获取数量
   apiBarTotal().then(res=>{
     if(res.code == 200){
@@ -223,11 +210,8 @@ const changeTopTar = (key)=>{
   });
   question.list=[]
   question.page_index=1
-  question.audioPlayingIndex=-1
-  question.audioPlayingItem = null
   question.isTotalData = false
   question.isLoading = false
-  question.audioIndex=0
   getQuestionList()
 }
 
@@ -253,16 +237,9 @@ const getQuestionList=()=>{
       for (const item of question.list) {
         if(!item.audio_status && item.reply_status==3){
           item.audio_status={
-            isPlay:false,
-            // 已播放时间
-            playedTime:0,
             // 总共的时长
             audioTime:item.audio_list[0].audio_play_seconds*1000,
-            // 是否在加载中
-            loading:false,
-            audioIndex:question.audioIndex
           }
-          question.audioIndex++
         }
       }
     }
@@ -382,7 +359,7 @@ getBarList()
                 <img src="@/assets/audio-waveform1.png">
                 <img src="@/assets/audio-waveform2.png">
               </div>
-              <div class="audio-time">{{moment((item.audio_status.audioTime - item.audio_status.playedTime)).format('mm:ss')}}</div>
+              <div class="audio-time">{{moment((item.audio_status.audioTime)).format('mm:ss')}}</div>
             </div>
           </div>
         </div>

src/views/sandBox/List.vue

@@ -1,95 +1,3 @@
-<template>
-    <template v-if="sandBox.noAuthor ==1 && sandBox.isRequestFinished">
-        <div class="sandbox-noAuthor">
-            <img :src="$store.state.globalImgUrls.activityNoAuth" />
-            <span style="margin-top: 34px;">您在暂无权限查看沙盘推演</span>
-            <span style="margin-top: 10px;">若想查看可以申请开通</span>
-            <div class="apply-button" @click="toApply">立即申请</div>
-            <!-- <template v-else>
-                <img :src="$store.state.globalImgUrls.activityNoAuth" />
-                <span style="margin-top: 34px;">您已提交过申请</span>
-                <span style="margin-top: 10px;">请等待销售人员与您联系</span>
-                <div class="apply-button" @click="$router.back()">返回</div>
-            </template> -->
-        </div>
-    </template>
-    <template v-if="sandBox.noAuthor ==2 && sandBox.isRequestFinished">
-        <view class="sandbox-noAuthor">
-            <img :src="$store.state.globalImgUrls.activityNoAuth" />
-            <span style="margin-top: 34px;">您在暂无权限查看沙盘推演</span>
-            <span style="margin: 10px 0 4px 0;">若想查看请联系对口销售</span>
-            <div>
-                <span>{{sandBox.salesData.name}}：</span>
-                <span class="sales-mobile" @click="callToSales">{{sandBox.salesData.phone}}</span>
-            </div>
-        </view>
-    </template>
-    <!-- 部分有权限 分享进来没有权限 -->
-    <template v-if="sandBox.noAuthor ==4 && sandBox.isRequestFinished" >
-        <!-- 显示空白 一秒钟后跳转至有权限的沙盘图-->
-    </template>
-    <div class="sandBox-contain" v-if="sandBox.noAuthor ==0 && sandBox.isRequestFinished">
-        <div class="classify-box">
-            <div class="firstClassify-box">
-                <div :class="['firstClassfy-item',item.id==sandBox.selectedFirstId?'firstClassfy-actice':'']" 
-                v-for="item in sandBox.classifyList" :key="item.id" @click="selectFirstClassify(item)">
-                    <span>{{item.classify_name}}</span>
-                </div>
-            </div>
-            <div class="sec-nav-box">
-                <span
-                    :class="['sec-item',item.chart_permission_id==sandBox.selectedSecondId?'active':'']"
-                    v-for="item in sandBox.secondClassifyList.slice(0,6)"
-                    :key="item.chart_permission_id"
-                    @click="selectSecondClassify(item)"
-                >{{item.chart_permission_name}}</span>
-                <el-popover
-                    :width="500"
-                    trigger="click"
-                >
-                    <template #reference>
-                        <img v-if="sandBox.secondClassifyList.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.chart_permission_id == sandBox.selectedSecondId&&'active']" 
-                                v-for="item in sandBox.secondClassifyList.slice(6)" 
-                                :key="item.chart_permission_id"
-                                @click="selectSecondClassify(item)"
-                            >{{item.chart_permission_name}}</div>
-                        </div>
-                    </template>
-                </el-popover>
-            </div>
-        </div>
-        <div class="sandBox-noData" v-if="!sandBox.list">
-            <img :src="$store.state.globalImgUrls.activityNoAuth" alt="暂无数据" />
-            <span>暂无数据</span>
-        </div>
-        <div class="sandBox-content">
-            <div class="sandBox-item" v-for="(item,index) in sandBox.list" :key="item.sandbox_id">
-                <span>{{item.name}}</span>
-                <div class="sandBox-image">
-                    <img :src="item.pic_url" :alt="item.name" @click="previewImage(index)"/>
-                </div>
-            </div>
-            <template v-if="sandBox.list">
-                <div class="loading-more" @click="loadingMore" v-show="sandBox.isRequestFinished && sandBox.list.length < sandBox.total">加载更多</div>
-                <div class="more-loading" v-show="!sandBox.isRequestFinished">加载中······</div>
-                <div class="more-loading no-more" v-show="sandBox.isRequestFinished && sandBox.list.length >= sandBox.total && sandBox.total!=0">没有更多了~</div>
-            </template>
-        </div>
-    </div>
-    
-    <!-- 图片预览 -->
-    <el-image-viewer
-        v-if="showPreViewImg"
-        :initial-index="preViewImgIndex"
-        @close="cancelPreview"
-        :url-list="previewImageList"
-    />
-</template>
 <script setup>
 import {h, reactive,computed,ref,onMounted,onActivated} from 'vue'
 import {useRouter,useRoute} from "vue-router"
@@ -97,6 +5,7 @@ import {apiSandBoxPermission,apiSandBoxList,apiSandTableDetail} from "../../api/
 import {apiReportIndexPageAuthList} from "../../api/report"
 import {apiApplyPermission} from "../../api/user"
 import { ElMessage, ElMessageBox } from 'element-plus'
+import SelfList from '@/components/SelfList.vue'
 const router = useRouter()
 const route = useRoute()
 
@@ -136,7 +45,11 @@ let sandBox = reactive({
         status:''
     },
     // 请求是否完成
-    isRequestFinished:false
+    isRequestFinished:false,
+    // 是否加载完全部数据
+    isTotalData:false,
+    // 是否在加载中
+    isLoading:false,
 })
 // 是否预览图片
 let showPreViewImg = ref(false)
@@ -152,6 +65,7 @@ const previewImageList = computed(()=>{
 // ------------------------------------------------------方法
 // 获取沙盘图数据
 const getSandBoxList=()=>{
+    sandBox.isLoading = true
     apiSandBoxList(sandBox.sandBoxParams).then(({data,code})=>{
         // 403 无权限
         if(code == 403){
@@ -183,20 +97,26 @@ const getSandBoxList=()=>{
             return 
         }
         if(sandBox.sandBoxParams.curr_page == 1){
-            sandBox.list = data.list
+            sandBox.list = data.list || []
             sandBox.total = data.paging.totals
         }else{
             sandBox.list = [...sandBox.list, ...data.list]
         }
+        if(sandBox.list.length == sandBox.total){
+            sandBox.isTotalData = true
+        }
         sandBox.noAuthor=0
     }).finally(()=>{
         sandBox.isRequestFinished=true
+        sandBox.isLoading = false
     })
 }
 
 // 获取单个沙盘图
 const getSandTableDetail=()=>{
     sandBox.isRequestFinished=false
+    sandBox.isLoading = true
+    sandBox.isTotalData = false
     apiSandTableDetail({sandbox_id:sandBox.sandbox_id}).then(({data,code})=>{
         // 403 无权限
         if(code == 403){
@@ -228,9 +148,11 @@ const getSandTableDetail=()=>{
             return 
         }
         sandBox.list = [data]
+        sandBox.isTotalData = true
         sandBox.noAuthor=0
     }).finally(()=>{
         sandBox.isRequestFinished=true
+        sandBox.isLoading = false
     })
 }
 
@@ -251,7 +173,7 @@ const cancelPreview = ()=>{
 }
 
 //加载更多
-const loadingMore = ()=>{
+const onLoad = ()=>{
     sandBox.sandBoxParams.curr_page++
     getSandBoxList()
 }
@@ -328,46 +250,51 @@ const getClassifyList= ()=>{
             item.list=item.list.filter(it=>it.auth_ok)
         })
         sandBox.classifyList=sandBox.classifyList.filter(item=>item.list.length!=0)
-        let classifyData= await apiSandBoxPermission()
-         sandBox.classifyDataList = classifyData.data
+        // 需求变化 增加全部标签 默认选中该标签
+        sandBox.classifyList.unshift({
+            classify_name: "全部",
+            id: 0,
+            list:[],
+            sort: 0
+        })
+        // let classifyData= await apiSandBoxPermission()
+        //  sandBox.classifyDataList = classifyData.data
         try {
-            if(sandBox.selectedFirstId == 0){
-                // 一级分类ID 和 二级分类ID 没有，不是通过分享进来的，或者路由参数中没有一级Id和二级Id
-                // 找出第一个有数据的二级分类
-                U:for (const item of sandBox.classifyList) {
-                    for (const it of item.list) {
-                        for (const classify of sandBox.classifyDataList) {
-                            if(classify.chart_permission_id==it.chart_permission_id){
-                                if(classify.total>0){
-                                    sandBox.selectedFirstId = item.id
-                                    sandBox.secondClassifyList = item.list
-                                    sandBox.selectedSecondId = it.chart_permission_id
-                                    break U
-                                }
-                                break
-                            }
+            // 默认选中第一个有数据的二级分类
+            // if(sandBox.selectedFirstId == 0){
+            //     // 一级分类ID 和 二级分类ID 没有，不是通过分享进来的，或者路由参数中没有一级Id和二级Id
+            //     // 找出第一个有数据的二级分类
+            //     U:for (const item of sandBox.classifyList) {
+            //         for (const it of item.list) {
+            //             for (const classify of sandBox.classifyDataList) {
+            //                 if(classify.chart_permission_id==it.chart_permission_id){
+            //                     if(classify.total>0){
+            //                         sandBox.selectedFirstId = item.id
+            //                         sandBox.secondClassifyList = item.list
+            //                         sandBox.selectedSecondId = it.chart_permission_id
+            //                         break U
+            //                     }
+            //                     break
+            //                 }
+            //             }
+            //         }
+            //     }
+            //     sandBox.sandBoxParams.chart_permission_id = sandBox.selectedSecondId
+            // }else{
+                // 通过分享进来
+                if(sandBox.selectedFirstId != 0){
+                    for (const item of sandBox.classifyList) {
+                        if(item.id == sandBox.selectedFirstId){
+                            // 根据selectedFirstId找出需要展示的二级分类列表
+                            sandBox.secondClassifyList = item.list
+                            break
                         }
                     }
                 }
-                sandBox.sandBoxParams.chart_permission_id = sandBox.selectedSecondId
-            }else{
-                for (const item of sandBox.classifyList) {
-                    if(item.id == sandBox.selectedFirstId){
-                        // 根据selectedFirstId找出需要展示的二级分类列表
-                        sandBox.secondClassifyList = item.list
-                        break
-                    }
-                }
-            }
+            // }
         } catch (error) {
             console.log(error);
         }
-
-        if(sandBox.sandbox_id){
-            getSandTableDetail()
-        }else{
-            getSandBoxList()
-        }
     })
 }
 // 切换一级分类
@@ -375,29 +302,23 @@ const selectFirstClassify = (item)=>{
     if(sandBox.selectedFirstId === item.id) return 
     sandBox.selectedFirstId = item.id
     sandBox.secondClassifyList = item.list
-    sandBox.selectedSecondId = item.list[0].chart_permission_id
-    U:for (const it of item.list) {
-        for (const classify of sandBox.classifyDataList) {
-            if(classify.chart_permission_id==it.chart_permission_id){
-                if(classify.total>0){
-                    sandBox.selectedSecondId = it.chart_permission_id
-                    break U
-                }
-                break
-            }
-        }
-    }
-    sandBox.sandBoxParams.chart_permission_id = sandBox.selectedSecondId
-    sandBox.sandBoxParams.curr_page=1
-    sandBox.list=[]
-    getSandBoxList()
+    selectSecondClassify(item.list[0])
 }
 // 切换二级分类
 const selectSecondClassify = (item)=>{
-    console.log(item);
-    if(sandBox.selectedSecondId == item.chart_permission_id) return 
-    sandBox.sandBoxParams.chart_permission_id = sandBox.selectedSecondId = item.chart_permission_id
+    let chartPermissionId
+    // item为undefined，选中为全部 没有二级分类列表
+    if(!item){
+        if(sandBox.selectedSecondId==0) return 
+        chartPermissionId= 0
+    }else{
+        if(sandBox.selectedSecondId == item.chart_permission_id) return 
+        chartPermissionId= item.chart_permission_id
+    }
+    sandBox.sandBoxParams.chart_permission_id = sandBox.selectedSecondId = chartPermissionId
     sandBox.sandBoxParams.curr_page=1
+    sandBox.isLoading = false
+    sandBox.isTotalData=false
     sandBox.list=[]
     getSandBoxList()
 }
@@ -408,8 +329,15 @@ const selectSecondClassify = (item)=>{
 sandBox.sandBoxParams.chart_permission_id = sandBox.selectedSecondId = parseInt(route.query.chart_permission_id)  || 0 //二级分类ID 分享
 sandBox.selectedFirstId = route.query.firstClassifyId || 0 //一级分类ID 分享
 sandBox.sandbox_id = route.query.sandbox_id // 沙盘图ID 
+// 获取分类
 getClassifyList()
 
+if(sandBox.sandbox_id){
+    getSandTableDetail()
+}else{
+    getSandBoxList()
+}
+
 onMounted(() => {
   //向小程序发送消息
   let postData = {
@@ -439,6 +367,96 @@ onActivated(()=>{
 })
 
 </script>
+
+<template>
+    <template v-if="sandBox.noAuthor ==1 && sandBox.isRequestFinished">
+        <div class="sandbox-noAuthor">
+            <img :src="$store.state.globalImgUrls.activityNoAuth" />
+            <span style="margin-top: 34px;">您在暂无权限查看沙盘推演</span>
+            <span style="margin-top: 10px;">若想查看可以申请开通</span>
+            <div class="apply-button" @click="toApply">立即申请</div>
+            <!-- <template v-else>
+                <img :src="$store.state.globalImgUrls.activityNoAuth" />
+                <span style="margin-top: 34px;">您已提交过申请</span>
+                <span style="margin-top: 10px;">请等待销售人员与您联系</span>
+                <div class="apply-button" @click="$router.back()">返回</div>
+            </template> -->
+        </div>
+    </template>
+    <template v-if="sandBox.noAuthor ==2 && sandBox.isRequestFinished">
+        <view class="sandbox-noAuthor">
+            <img :src="$store.state.globalImgUrls.activityNoAuth" />
+            <span style="margin-top: 34px;">您在暂无权限查看沙盘推演</span>
+            <span style="margin: 10px 0 4px 0;">若想查看请联系对口销售</span>
+            <div>
+                <span>{{sandBox.salesData.name}}：</span>
+                <span class="sales-mobile" @click="callToSales">{{sandBox.salesData.phone}}</span>
+            </div>
+        </view>
+    </template>
+    <!-- 部分有权限 分享进来没有权限 -->
+    <template v-if="sandBox.noAuthor ==4 && sandBox.isRequestFinished" >
+        <!-- 显示空白 一秒钟后跳转至有权限的沙盘图-->
+    </template>
+    <div class="sandBox-contain" v-if="sandBox.noAuthor ==0 && sandBox.isRequestFinished">
+        <div class="classify-box">
+            <div class="firstClassify-box">
+                <div :class="['firstClassfy-item',item.id==sandBox.selectedFirstId?'firstClassfy-actice':'']" 
+                v-for="item in sandBox.classifyList" :key="item.id" @click="selectFirstClassify(item)">
+                    <span>{{item.classify_name}}</span>
+                </div>
+            </div>
+            <div class="sec-nav-box" v-show="sandBox.secondClassifyList.length>0">
+                <span
+                    :class="['sec-item',item.chart_permission_id==sandBox.selectedSecondId?'active':'']"
+                    v-for="item in sandBox.secondClassifyList.slice(0,6)"
+                    :key="item.chart_permission_id"
+                    @click="selectSecondClassify(item)"
+                >{{item.chart_permission_name}}</span>
+                <el-popover
+                    :width="500"
+                    trigger="click"
+                >
+                    <template #reference>
+                        <img v-if="sandBox.secondClassifyList.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.chart_permission_id == sandBox.selectedSecondId&&'active']" 
+                                v-for="item in sandBox.secondClassifyList.slice(6)" 
+                                :key="item.chart_permission_id"
+                                @click="selectSecondClassify(item)"
+                            >{{item.chart_permission_name}}</div>
+                        </div>
+                    </template>
+                </el-popover>
+            </div>
+        </div>
+        <SelfList
+        :finished="sandBox.isTotalData" 
+        :isEmpty="sandBox.list.length===0&&sandBox.isTotalData"
+        :loading="sandBox.isLoading"
+        @listOnload="onLoad">
+            <div class="sandBox-content">
+                <div class="sandBox-item" v-for="(item,index) in sandBox.list" :key="item.sandbox_id">
+                    <span>{{item.name}}</span>
+                    <div class="sandBox-image">
+                        <img :src="item.pic_url" :alt="item.name" @click="previewImage(index)"/>
+                    </div>
+                </div>
+            </div>
+        </SelfList>
+    </div>
+    
+    <!-- 图片预览 -->
+    <el-image-viewer
+        v-if="showPreViewImg"
+        :initial-index="preViewImgIndex"
+        @close="cancelPreview"
+        :url-list="previewImageList"
+    />
+</template>
 <style lang="scss" scoped>
 .top-nav-filter-box{
     flex-wrap: wrap;
@@ -501,12 +519,12 @@ onActivated(()=>{
         }
     }
     .sandBox-contain{
-        margin-top: 130px;
+        // margin-top: 130px;
         .classify-box{
             padding: 30px 30px 12px 30px;
             background: #FFFFFF;
             box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
-            position: fixed;
+            position: sticky;
             top: 60px;
             width: 100%;
             max-width: 1240px;

src/views/video/List.vue

@@ -20,9 +20,10 @@ const {width}=useElementSize(listPageEl)
 // 获取品种权限数据
 let permissionState=reactive({
     firstNavList:[],
+    // 一进来默认选择全部
     sFirst:'',
     secNavList:[],
-    sSecond:0//选择的品种id 
+    sSecond:-1//选择的品种id 
 })
 const getFICCPermissionList=async ()=>{
     const res=await apiFICCPermissionList()
@@ -45,6 +46,10 @@ const getTagTreeList = async ()=>{
             })
             return obj
         })
+        permissionState.firstNavList.unshift({
+            ClassifyName:"全部",
+            Items:[]
+        })
         if(route.query.videoId){
             videoId.value=route.query.videoId
             getVideoList()
@@ -64,7 +69,12 @@ const handelChangeFirstNav=(item)=>{
 
 //点击二级分类
 const handleChangeSecNav=(item)=>{
-    permissionState.sSecond=item.PermissionId
+    if(!item){
+        // 没有二级分类 全部
+        permissionState.sSecond=-1
+    }else{
+        permissionState.sSecond=item.PermissionId
+    }
     refreshList()
 }
 
@@ -171,7 +181,7 @@ onActivated(()=>{
                     @click="handelChangeFirstNav(item)"
                 >{{item.ClassifyName}}</span>
             </div>
-            <div class="sec-nav-box">
+            <div class="sec-nav-box" v-show="permissionState.secNavList.length>0">
                 <span
                     :class="['sec-item',item.PermissionId==permissionState.sSecond?'active':'']"
                     v-for="item in permissionState.secNavList.slice(0,6)"

src/views/voice/List.vue

@@ -36,6 +36,8 @@ const getOptionsList=async ()=>{
                 options.value.push({id:_item.SectionId,val:_item.SectionName})
             })
         });
+        // 增加一个全部，一进来默认为全部
+        options.value.unshift({id:0,val:'全部'})
         if(route.query.voiceId){
             listState.voiceId=route.query.voiceId
         }else{