Merge branch 'xqc_video_132'

src/views/report/Detail.vue

@@ -11,7 +11,8 @@ let reportClassify=ref([])
 async function getReportClassify(){
     const res=await apiReportClassifyList()
     if(res.code===200){
-        reportClassify.value=res.data.list||[]
+        const arr=res.data.list||[]
+        reportClassify.value=[...arr,{id: -1, classify_name: "Online Video"}]
     }
 }
 getReportClassify()
@@ -119,7 +120,7 @@ onMounted(()=>{
     <div class="report-detail-page" v-if="info">
         <div class="header-wrap">
             <div>
-                <span style="color:#00459F;margin-right:30px;">MORE REPORTS>></span>
+                <span style="color:#00459F;margin-right:30px;">MORE CONTENT>></span>
                 <span v-for="item in reportClassify" :key="item.id" style="margin-right:20px;cursor: pointer;" @click="goIndex(item)">{{item.classify_name}}</span>
             </div>
             <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div>

src/views/roadShow/Detail.vue

@@ -1,10 +1,32 @@
 <script setup>
 import {ref} from 'vue'
 import {apiRoadShowVideoDetail,apiVideoPlayLog} from '@/api/roadShow'
+import {apiReportClassifyList} from '@/api/report'
 import videoPlayBox from '@/components/VideoPlayBox.vue'
-import { useRoute } from 'vue-router'
+import { useRoute, useRouter } from 'vue-router'
 
 const route=useRoute()
+const router=useRouter()
+
+//分类
+let reportClassify=ref([])
+async function getReportClassify(){
+    const res=await apiReportClassifyList()
+    if(res.code===200){
+        const arr=res.data.list||[]
+        reportClassify.value=[...arr,{id: -1, classify_name: "Online Video"}]
+    }
+}
+getReportClassify()
+//点击分类
+function goIndex(item){
+    router.replace({
+        path:'/report/index',
+        query:{
+            firstclassifyid:item.id
+        }
+    })
+}
 
 const code=route.query.code
 const email=route.query.ShareEmail||0
@@ -51,17 +73,68 @@ function handleVideoPause(e){
 }
 
 
+//分类
+let navList=ref([])
+let showFilter=ref(false)
+async function getReportNav(){
+    const res=await apiReportClassifyList({classify_type:0})
+    const videores=await apiReportClassifyList({classify_type:1})
+    if(res.code===200){
+        const arr=res.data.list||[]
+        let videoResList=[]
+        if(videores.code===200){
+            videoResList=videores.data.list||[]
+        }
+        navList.value=[
+            ...arr,
+            {
+                id: -1,
+                classify_name: "ONLINE VEDIO",
+                child: videoResList
+            },
+            {
+                id: 0,
+                classify_name: "ABOUT US",
+                child: []
+            },
+        ]
+    }
+}
+getReportNav()
+function handleChangeFirstClassify(item){
+    if(item.id==0){
+        router.replace({
+            path:'/'
+        })
+    }    
+}
+
+function handleChangeSecClassify(item,pitem){
+        router.replace({
+            path:'/report/index',
+            query:{
+                firstclassifyid:pitem.id,
+                secclassifyid:item.id
+            }
+        })
+
+}
+
 
 </script>
 
 <template>
     <div class="roadshow-video-detail-page">
         <div class="header-wrap">
-            <span>HORIZON INSIGHTS</span>
-            <div class="search-box" @click="$router.push('/report/search')">
-                <img src="@/assets/search.svg" alt="">
-                <span style="margin-left:10px">search for</span>
+            <div>
+                <span style="color:#00459F;margin-right:30px;">MORE CONTENT>></span>
+                <span v-for="item in reportClassify" :key="item.id" style="margin-right:20px;cursor: pointer;" @click="goIndex(item)">{{item.classify_name}}</span>
             </div>
+            <div style="color:#00459F;cursor: pointer;" @click="$router.replace('/')">ABOUT US</div>
+        </div>
+        <div class="mobile-header-wrap">
+            <img class="menu-icon" @click="showFilter=true;filterSize='100%'" src="@/assets/menu.svg" alt="">
+            <span @click="$router.replace('/')">HORIZON INSIGHTS</span>
         </div>
         <div class="detail-wrap" v-if="info">
             <div class="title">{{info.title}}</div>
@@ -72,56 +145,62 @@ function handleVideoPause(e){
             />
         </div>
     </div>
+    <!-- 筛选 -->
+    <el-drawer
+        v-model="showFilter"
+        direction="ltr"
+        size="100%"
+        class="self-drawer-box"
+    >
+        <div class="filter-wrap">
+            <div class="item" v-for="item in navList" :key="item.id">
+                <span  class="title" @click="handleChangeFirstClassify(item)">{{item.classify_name}}</span>
+                <div class="text" v-for="_item in item.child" :key="_item.id" @click="handleChangeSecClassify(_item,item)">{{_item.classify_name}}</div>
+            </div>
+        </div>
+    </el-drawer>
 </template>
 
 <style lang="scss" scoped>
 .header-wrap{
+    position: sticky;
+    top: 0;
+    border-bottom: 1px solid #E6E6E6;
+    padding: 44px 0;
+    display: flex;
+    justify-content: space-between;
+    font-size: 20px;
+    z-index: 99;
+    background-color: #fff;
+}
+.mobile-header-wrap{
+    font-size: 17px;
+    box-shadow: 0px 4px 20px rgba(180, 180, 180, 0.16);
+    padding: 15px 0;
     text-align: center;
-    font-size: 40px;
     font-weight: bold;
     color: var(--el-color-primary);
-    padding: 40px 0;
     border-bottom: 1px solid#E6E6E6;
     position: sticky;
     top: 0;
     background-color: #fff;
     z-index: 99;
-    .search-box{
-        position: absolute;
-        top: 50%;
-        transform: translateY(-50%);
-        right: 20px;
-        font-size: 16px;
-        color: #333;
-        font-weight: 500;
-        cursor: pointer;
-        span,img{
-            vertical-align: middle;
-        }
-    }
+    display: none;
+    position: relative;
     .menu-icon{
         position: absolute;
         left: 20px;
         top: 50%;
         transform: translateY(-50%);
-        display: none;
+        width: 17px;
     }
 }
 @media (max-width: 768px){
     .header-wrap{
-        border: none;
-        font-size: 17px;
-        box-shadow: 0px 4px 20px rgba(180, 180, 180, 0.16);
-        padding: 15px 0;
-        .search-box{
-            span{
-                display: none;
-            }
-        }
-        .menu-icon{
-            display: block;
-            width: 17px;
-        }
+        display: none;
+    }
+    .mobile-header-wrap{
+        display: block;
     }
 }
 .detail-wrap{
@@ -137,4 +216,25 @@ function handleVideoPause(e){
         }
     }
 }
+
+.filter-wrap{
+    .item{
+        margin-bottom: 50px;
+        .title{
+            font-size: 28px;
+            font-weight: bold;
+            margin-bottom: 30px;
+            display: block;
+            cursor: pointer;
+        }
+        .text{
+            cursor: pointer;
+            font-size: 18px;
+            margin-bottom: 20px;
+            &:hover{
+                color: var(--el-color-primary);
+            }
+        }
+    }
+}
 </style>