研报7.0 bug 修复1

src/router/index.js

@@ -240,7 +240,7 @@ const routes=[
         component:()=>import('@/views/sandBox/List.vue'),
         meta: {
           title: "沙盘推演",
-          keepAlive:true,
+          keepAlive:false,
           isRoot:true
         }
       }

src/views/sandBox/List.vue

@@ -1,18 +1,16 @@
 <template>
     <template v-if="sandBox.noAuthor ==1 && sandBox.isRequestFinished">
         <div class="sandbox-noAuthor">
-            <template v-if="!sandBox.applyer.hasApply">
-                <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>
-            <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="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>
+            </template> -->
         </div>
     </template>
     <template v-if="sandBox.noAuthor ==2 && sandBox.isRequestFinished">
@@ -34,15 +32,31 @@
                     <span>{{item.classify_name}}</span>
                 </div>
             </div>
-            <div class="secondClassify-box">
-                <el-tabs v-model="sandBox.selectedSecondId" @tab-click="selectSecondClassify">
-                    <el-tab-pane 
-                        :label="item.chart_permission_name" 
-                        :name="item.chart_permission_id"
-                        v-for="item in sandBox.secondClassifyList" 
-                        :key="item.chart_permission_id"
-                    ></el-tab-pane>
-                </el-tabs>
+            <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">
@@ -54,7 +68,6 @@
                 <span>{{item.name}}</span>
                 <div class="sandBox-image">
                     <img :src="item.pic_url" :alt="item.name" @click="previewImage(index)"/>
-                    <div class="sandBox-source">来源：弘则研究</div>
                 </div>
             </div>
             <template v-if="sandBox.list">
@@ -74,7 +87,7 @@
     />
 </template>
 <script setup>
-import {h, reactive,computed,ref} from 'vue'
+import {h, reactive,computed,ref,onMounted,onActivated} from 'vue'
 import {useRouter,onBeforeRouteUpdate,useRoute} from "vue-router"
 import {apiSandBoxPermission,apiSandBoxList,apiSandTableDetail} from "../../api/sandBox"
 import {apiReportIndexPageAuthList} from "../../api/report"
@@ -253,7 +266,16 @@ const toApply = (type='')=>{
                 source:7,
                 from_page:'沙盘推演',
             }).then(res=>{
-                router.replace('/apply/result')
+                sandBox.applyer.hasApply=true
+                const htmlStr = `<p>申请已提交</p><p>请等待销售人员与您联系</p>`;
+                ElMessageBox({
+                    title: "温馨提醒",
+                    message: htmlStr,
+                    center: true,
+                    dangerouslyUseHTMLString: true,
+                    confirmButtonText: "知道了",
+                    confirmButtonClass: "self-elmessage-confirm-btn",
+                });
             })
         }else{
             router.push({
@@ -279,34 +301,39 @@ const getClassifyList= ()=>{
         sandBox.classifyList=sandBox.classifyList.filter(item=>item.list.length!=0)
         let classifyData= await apiSandBoxPermission()
          sandBox.classifyDataList = classifyData.data
-         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
+        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
                             }
-                            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
+                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{
@@ -337,10 +364,10 @@ const selectFirstClassify = (item)=>{
     getSandBoxList()
 }
 // 切换二级分类
-const selectSecondClassify = (e)=>{
-    let {props:{name}} = e
-    if(sandBox.selectedSecondId == name) return 
-    sandBox.sandBoxParams.chart_permission_id = sandBox.selectedSecondId = name
+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
     sandBox.sandBoxParams.curr_page=1
     sandBox.list=[]
     getSandBoxList()
@@ -354,9 +381,59 @@ sandBox.selectedFirstId = route.query.firstClassifyId || 0 //一级分类ID 分
 sandBox.sandbox_id = route.query.sandbox_id // 沙盘图ID 
 getClassifyList()
 
+onMounted(() => {
+  //向小程序发送消息
+  let postData = {
+    path: "/pages-sandTable/sandTable",
+    params:{
+        firstClassifyId:sandBox.selectedFirstId,
+        chart_permission_id:sandBox.selectedSecondId
+    },
+    title: "沙盘推演",
+    shareImg:''
+  };
+  wx.miniProgram.postMessage({ data: postData });
+});
+
+onActivated(()=>{
+    //向小程序发送消息
+    let postData = {
+        path: "/pages-sandTable/sandTable",
+        params:{
+            firstClassifyId:sandBox.selectedFirstId,
+            chart_permission_id:sandBox.selectedSecondId
+        },
+        title: "沙盘推演",
+        shareImg:''
+    };
+    wx.miniProgram.postMessage({ data: postData });
+})
 
 </script>
 <style lang="scss" scoped>
+.top-nav-filter-box{
+    flex-wrap: wrap;
+    .item{
+        margin: 5px 10px;
+        width: 113px;
+        height: 40px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background-color: #f6f6f6;
+        border-radius: 4px;
+        font-size: 16px;
+        cursor: pointer;
+        :hover{
+            color: #fff;
+            background-color: #F3A52F;
+        }
+    }
+    .active{
+        color: #fff;
+        background-color: #F3A52F;
+    }
+}
     .sandbox-noAuthor{
         display: flex;
         flex-direction: column;
@@ -397,25 +474,23 @@ getClassifyList()
     .sandBox-contain{
         margin-top: 130px;
         .classify-box{
-            padding: 30px 0 12px 0;
-            box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
-            position: fixed;
-            z-index: 50;
+            padding: 30px 30px 12px 30px;
             background: #FFFFFF;
+            box-shadow: 0px 4px 8px 1px rgba(0, 0, 0, 0.04);
+            position: fixed;
             top: 60px;
             width: 100%;
+            max-width: 1240px;
+            z-index: 10;
             .firstClassify-box{
-                display: flex;
-                align-items: center;
                 .firstClassfy-item{
+                    display: inline-block;
                     width: 140px;
-                    height: 40px;
-                    box-sizing: border-box;
-                    background: #F6F6F6;
+                    line-height: 40px;
+                    text-align: center;
                     border-radius: 20px;
-                    display: flex;
-                    align-items: center;
-                    justify-content: center;
+                    background-color: #F6F6F6;
+                    font-size: 16px;
                     margin-right: 30px;
                     cursor: pointer;
                     span{
@@ -435,63 +510,18 @@ getClassifyList()
                         color: #F3A52F;
                     }
                 }
-                // 小屏适配 
-                @media screen and (max-width: 1350px){
-                    .firstClassfy-item{
-                        width: 90px;
-                        height: 30px;
-                        border-radius: 20px;
-                        margin-right: 15px;
-                        span{
-                            font-size: 14px;
-                        }
-                    }
-                }
             }
-            .secondClassify-box{
+            .sec-nav-box{
                 margin-top: 30px;
-                :deep(.el-tabs__header){
-                margin-bottom: 0;
-                }
-                :deep(.el-tabs__active-bar){
-                display: none;
-                }
-                :deep(.el-tabs__nav-wrap::after){
-                    display: none;
+                .sec-item{
+                    color: #666;
+                    margin-right: 30px;
+                    cursor: pointer;
+                    display: inline-block;
                 }
-                :deep(.el-tabs__item.is-active){
+                .active{
                     color: #F3A52F;
                 }
-                :deep(.el-tabs__item){
-                    font-size: 16px;
-                    &:hover{
-                        color: #F3A52F;
-                    }
-                }
-                :deep(.el-tabs__nav-next){
-                    width: 20px;
-                    height: 20px;
-                    background-image: url('@/assets/icon-more.png');
-                    background-size: cover;
-                    top: 10px;
-                    .el-icon{
-                        display: none;
-                    }
-                }
-                :deep(.el-tabs__nav-prev){
-                    width: 20px;
-                    height: 20px;
-                    background-image: url('@/assets/icon-more.png');
-                    background-size: cover;
-                    top: 10px;
-                    transform: rotate(180deg);
-                    .el-icon{
-                        display: none;
-                    }
-                }
-                :deep(.el-tabs__nav-wrap.is-scrollable){
-                    padding: 0 25px;
-                }
             }
         }
         .sandBox-noData{
@@ -526,12 +556,16 @@ getClassifyList()
                 .sandBox-image{
                     margin-top: 20px;
                     width: 100%;
-                    max-height: 558px;
+                    // max-height: 558px;
                     border: 2px solid #ECECEC;
                     overflow: auto;
                     padding-bottom: 24px;
+                    display:flex;
+                    justify-content:center;
+                    align-items:center;
                     img{
                         cursor: pointer;
+                        max-width:100%;
                     }
                     .sandBox-source{
                         font-size: 20px;