pc2.0

src/components/SelfList.vue

@@ -0,0 +1,66 @@
+<script setup>
+const props=defineProps({
+    loading:false,
+    finished:false,//是否加载完
+    isEmpty:false,//是否为空数据
+})
+const emit=defineEmits(['listOnload'])
+const handleClickLoadMore=()=>{
+    emit('listOnload')
+}
+
+</script>
+
+<template>
+    <div class="self-list-wrap">
+        <slot></slot>
+        <div class="empty-box" v-if="props.isEmpty">
+            <img src="@/assets/empty-bg.png" alt="">
+            <p>暂无数据</p>
+        </div>
+        <div class="bot-load" v-if="!props.finished&&!props.loading&&!props.isEmpty">
+            <div class="btn" @click="handleClickLoadMore">加载更多</div>
+        </div>
+        <div class="bot-load" v-if="!props.finished&&props.loading">
+            <div class="loading-text">加载中...</div>
+        </div>
+        <p class="nomore-text" v-if="!props.isEmpty&&props.finished">没有更多了~</p>
+    </div>
+</template>
+
+<style lang="scss" scoped>
+.self-list-wrap{
+    .empty-box{
+        text-align: center;
+        color: #F3A52F;
+        img{
+            width: 315px;
+        }
+    }
+    .bot-load{
+        .btn{
+            margin: 20px auto;
+            width: 112px;
+            height: 30px;
+            background: #FFFFFF;
+            border-radius: 20px;
+            border: 1px solid #F3A52F;
+            color: #F3A52F;
+            font-size: 14px;
+            text-align: center;
+            line-height: 30px;
+            cursor: pointer;
+        }
+        .loading-text{
+            margin: 20px auto;
+            text-align: center;
+            color: #666;
+            height: 30px;
+        }
+    }
+    .nomore-text{
+        text-align: center;
+        color: #F3A52F;
+    }
+}
+</style>

src/layout/component/Header.vue

@@ -197,10 +197,9 @@ const goBack=()=>{
     <div class="head-main">
       <!-- 面包屑 -->
       <div class="flex-col-center left-breadcrumb-box">
-        <img @click="goBack" class="back-icon" src="@/assets/icon-back.png" alt="">
+        <img @click="goBack" class="back-icon" src="@/assets/icon-back.png" alt="" v-if="$route.meta.hasBack">
         <span class="breadcrumb-item">研报</span>
       </div>
-      
     </div>
   </div>
 </template>

src/router/index.js

@@ -1,5 +1,12 @@
 import { createRouter, createWebHistory } from "vue-router";
 import store from "@/store";
+/**
+ * 说明
+ * meta中 
+ * keepAlive表示是否要缓存  
+ * isRoot代表是否为侧边栏组件用于处理面包屑数据 
+ * hasBack 控制是否有返回按钮
+ */
 
 const routes=[
   {
@@ -12,9 +19,10 @@ const routes=[
   {
     path: "/activity",
     name: "Activity",
+    redirect:'/activity/list',
     component: () => import("@/layout/Index.vue"),
     meta: {
-      title:"报告及活动"
+      title:"活动"
     },
     children: [
       {
@@ -22,9 +30,9 @@ const routes=[
         name: "ActivityList",
         component: () => import("@/views/activity/List.vue"),
         meta: {
-          title: "报告及活动",
+          title: "活动",
           keepAlive:true,
-          scrollTop: 0
+          isRoot:true
         },
       },
       {
@@ -32,7 +40,7 @@ const routes=[
         name:"ActivityDetail",
         component: () => import("@/views/activity/Detail.vue"),
         meta: {
-          title: "报告及活动详情",
+          title: "活动详情",
           hasBack:true
         },
       },

src/store/index.js

@@ -26,7 +26,9 @@ export default createStore({
     activityItemStatus:{//活动详情中某个活动点击了会议提醒\报名 更新列表状态
       activityId:0,
       type:'',// 会议、报名
-    }
+    },
+
+    breadCrumbList:[],//面包屑数据
   },
   mutations: {
     // 获取token
@@ -86,8 +88,13 @@ export default createStore({
 
     // 更新活动列表某项状态
     updateActivityStatus(state,e){
-      state.activityId=e.activityId
-      state.type=e.type
+      state.activityItemStatus.activityId=e.activityId
+      state.activityItemStatus.type=e.type
+    },
+
+    // 设置面包屑数据
+    setBreadCrumb(state,data){
+      
     }
 
   },

src/views/activity/List.vue

@@ -1,5 +1,6 @@
 <script setup>
 import {reactive,ref, watch,onUnmounted,onMounted,onUpdated,onActivated} from 'vue'
+import SelfList from '@/components/SelfList.vue'
 import { useRouter } from "vue-router";
 import {formatActivityTime} from './utils'
 
@@ -47,6 +48,9 @@ const getList=async ()=>{
     if(res.code===200){
         if(res.data){
             listData.list = [...listData.list, ...res.data]
+            if(res.data.length<20){
+                listData.finished=true
+            }
         }else{
             listData.finished=true
         }
@@ -57,7 +61,7 @@ const getList=async ()=>{
 let hasInit=ref(false)
 import {apiUserInfo} from '@/api/user.js'
 const init=async ()=>{
-    console.log('inti');
+    console.log('init');
     hasInit.value=false
     const res=await apiUserInfo()
     if(res.code===200){
@@ -75,7 +79,7 @@ init()
 
 // 触底加载
 const onLoad=()=>{
-    if(listData.finished||listData.loading||!hasInit.value) return
+    if(listData.finished||listData.loading) return
     listData.page++
     getList()
 }
@@ -173,7 +177,7 @@ const handleGetAudio=async (item)=>{
 // 监听详情的会议提醒\报名状态是否变化
 const subscribeUpdateActivitStatus=store.subscribe((mutation, state) => {
   if(mutation.type==='updateActivityStatus'){
-        console.log('更新列表项状态');
+        console.log('更新列表项状态',mutation);
         listData.list.forEach(item=>{
             if(item.activityId==mutation.payload.activityId){
                 if(mutation.payload.type=='会议'){
@@ -199,22 +203,10 @@ onUnmounted(()=>{
     subscribeUpdateActivitStatus()
 })
 
-// 记录滚动条
-let listWrap=ref(null)
-onActivated(()=>{
-    listWrap.value.scrollTop=scrollTopNum.value
-})
-
-let scrollTopNum=ref(0)
-const listWrapScroll=(e)=>{
-    scrollTopNum.value=e.srcElement.scrollTop
-}
-
 const aduioIconPlay=new URL('../../assets/audio-doing-white.png', import.meta.url).href
 const aduioIconPaused=new URL('../../assets/audio-pause.png', import.meta.url).href
 const aduioIconDefault=new URL('../../assets/audio-pause-3.png', import.meta.url).href
 
-let showSearch=ref(false)
 onMounted(() => {
   //向小程序发送消息
   let postData = {
@@ -224,7 +216,6 @@ onMounted(() => {
     shareImg:'https://hzstatic.hzinsights.com/static/icon/hzyb/activitylist_share.jpg'
   };
   wx.miniProgram.postMessage({ data: postData });
-  showSearch.value=true
 });
 
 onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
@@ -244,7 +235,7 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
 
 
 <template>
-    <div class="activity-list-page" ref="listWrap" @scroll="listWrapScroll">
+    <div class="activity-list-page">
         <div class="top-nav-wrap">
             <div class="nav-first">
                 <span :class="listData.tabActive==1&&'active'" @click="tabChange('1')">报告及线上会议</span>
@@ -257,11 +248,13 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
                 <el-checkbox v-model="listData.onlySeeAuth" size="large" @change="authChange">只看有权限</el-checkbox>
             </div>
         </div>
-        <div class="empty-list" v-if="listData.list.length===0&&listData.finished">
-            <img src="@/assets/empty-bg.png" alt="">
-            <p>暂无数据</p>
-        </div>
-        <ul class="list-wrap" v-if="listData.list.length>0">
+        <SelfList 
+            class="list-wrap" 
+            :finished="listData.finished" 
+            :isEmpty="listData.list.length===0&&listData.finished"
+            :loading="listData.loading"
+            @listOnload="onLoad"
+        >
             <li class="flex item" v-for="item in listData.list" :key="item.activityId" @click="goDetail(item.activityId)">
                 <el-image
                     style="width: 74px; height: 104px;border-radius: 4px;flex-shrink: 0;"
@@ -309,8 +302,7 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
                     </div>
                 </div>
             </li>
-        </ul>
-        <p style="text-align:center;color:#666" v-if="listData.list.length>0&&listData.finished">没有更多了~</p>
+        </SelfList>
     </div>
 </template>
 
@@ -333,6 +325,9 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
                 padding: 3px 0;
                 margin-right: 37px;
                 cursor: pointer;
+                &:hover{
+                    color: #F3A52F;
+                }
             }
             .active{
                 color: #F3A52F;
@@ -498,9 +493,13 @@ onActivated(()=>{//解决从详情返回到列表 分享时还是详情问题
                         border: 1px solid #F3A52F;
                         background-color: #fff;
                         border-radius: 14px;
+                        &:hover{
+                            background-color: #F3A52F;
+                            color: #fff;
+                        }
                     }
                     .btn-audio-active{
-                        background: #DAB37C;
+                        background: #F3A52F;
                         color: #fff;
                         border: none;
                     }