完成列表缓存

src/api/user.js

@@ -16,9 +16,12 @@ import {get,post} from './http'
  * @param company_name 公司名
  * @param permission 选择的权限
  * @param real_name 姓名
+ * @param source 来源：我的1、活动2、图库3、研报4
+ * @param from 来源平台：小程序、pc
+ * @param fromPage 来源: '活动列表'、'活动详情'
  */
 export const apiApplyPermission=params=>{
-	return post('/user/apply',params)
+	return post('/user/apply',{...params,from:'pc'})
 }
 
 /**

src/layout/Index.vue

@@ -50,7 +50,7 @@ let permission_list_str = computed(() => {
   return arr2.join('/')
 });
 
-// 监听路由是否显示返回按钮
+// 全局返回按钮
 import { useRouter } from "vue-router";
 const router=useRouter()
 const goBack=()=>{
@@ -120,6 +120,12 @@ const goBack=()=>{
         </el-popover>
       </div>
     </el-container>
+
+    <!-- 全局音频模块 -->
+    <div class="global-audio-box">
+      <audio controls src="https://hongze.oss-accelerate.aliyuncs.com/static/audio/202201/20220113/lEKsJ16hRaasrQuNQX7TQC4YmKzC.mp3"></audio>
+    </div>
+    
   </div>
 </template>
 
@@ -141,11 +147,12 @@ const goBack=()=>{
   .back-icon{
     position: absolute;
     left: 14px;
-    top: 56px;
+    top: 23px;
     width: 30px;
     height: 30px;
     cursor: pointer;
   }
+  
 }
 .userinfo-wrap {
   background-color: #fff;
@@ -178,4 +185,27 @@ const goBack=()=>{
     }
   }
 }
+
+.global-audio-box{
+  position: fixed;
+  width: 624px;
+  height: 59px;
+  background: #FFFFFF;
+  box-shadow: 0px 3px 12px 0px rgba(81, 88, 101, 0.16);
+  border-radius: 8px;
+  border: 1px solid #EBEBEB;
+  left: 50%;
+  bottom: 30px;
+  transform: translateX(-50%);
+  z-index: 999;
+  audio{
+    width: 90%;
+    height: 40px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+    margin-top: 9px;
+  }
+}
+
 </style>

src/router/index.js

@@ -23,7 +23,8 @@ const routes=[
         component: () => import("@/views/activity/List.vue"),
         meta: {
           title: "报告及活动",
-          keepAlive:true
+          keepAlive:true,
+          scrollTop: 0
         },
       },
       {

src/style/global.scss

@@ -84,4 +84,24 @@ img{
 ::-webkit-scrollbar-thumb{
   background: #7a7a7a;
   border-radius: 5px;
+}
+
+.el-message-box__btns{
+  justify-content: center;
+}
+.self-elmessage-confirm-btn{
+  background-color: #DAB37C;
+  color: #fff;
+  border: none;
+  &:hover{
+      background-color: #DAB37C;
+  }
+}
+.self-elmessage-cancel-btn{
+  background-color: #fff;
+  border-color: #DAB37C;
+  color: #DAB37C;
+  &:hover{
+      background-color: #fff;
+  }
 }

src/views/activity/Detail.vue

@@ -64,11 +64,28 @@ const getDetail = async () => {
     }
 };
 getDetail();
+
+// 获取活动音频
+import {apiActivityAudios} from '@/api/activity.js'
+let audioList=ref([])
+const getAudio=async ()=>{
+    const res=await apiActivityAudios({activity_id: Number(route.query.activityId)})
+    if(res.code===200){
+        audioList.value=res.data||[]
+    }
+}
+getAudio()
+
+// 格式化音频时间
+const formatAudioTime=(e)=>{
+    let minus=parseInt(e/60)
+    let sec=e%60
+    return `${minus>9?minus:'0'+minus}分${sec>9?sec:'0'+sec}秒`
+}
 </script>
 
 <template>
     <div class="activity-detail-page">
-        <h1 class="page-title" style="font-size: 18px; margin-top: 16px; margin-bottom: 20px">报告及活动详情</h1>
         <div class="main-box" v-if="info">
             <div class="top">
                 <span class="status-box status-before" v-if="info.activityState===1">未开始</span>
@@ -80,6 +97,14 @@ getDetail();
                 <div class="report-name"> {{ info.reportName ? info.reportName.split("】")[1] : info.activityName }} </div>
             </div>
             <div class="con">
+                <!-- 音频模块 -->
+                <div class="audio-wrap" v-if="audioList.length>0">
+                    <div class="flex audio-item" v-for="item in audioList" :key="item.voiceUrl">
+                        <img src="@/assets/audio-pause-2.png" alt="">
+                        <div class="name">{{item.voiceName}}</div>
+                        <span class="time">{{formatAudioTime(item.voicePlaySeconds)}}</span>
+                    </div>
+                </div>
                 <div class="info-wrap">
                     <div
                         class="flex item"
@@ -120,6 +145,7 @@ getDetail();
 
 <style lang="scss" scoped>
 .activity-detail-page {
+    padding-top: 30px;
     .main-box {
         border: 1px solid #ebebeb;
         border-radius: 4px;
@@ -200,5 +226,25 @@ getDetail();
             }
         }
     }
+    .audio-wrap{
+        margin-bottom: 72px;
+        .audio-item{
+            align-items: center;
+            margin-bottom: 12px;
+            img{
+                width: 17px;
+                height: 17px;
+                flex-shrink: 0;
+                cursor: pointer;
+            }
+            .name{
+                flex: 1;
+                margin: 0 10px;
+            }
+            .time{
+                color: #B6B6B6;
+            }
+        }
+    }
 }
 </style>

src/views/activity/List.vue

@@ -89,12 +89,15 @@ const goDetail=(id)=>{
         }
     })
 }
-
+import { ElMessage,ElMessageBox } from 'element-plus'
 import {apiActivityAddRemind,apiActivityCancelRemind} from '@/api/activity.js'
+import {applyAuth} from './applyAuth'
 // 添加/取消提醒
 const handleRemind=(item)=>{
     if(item.hasRemind===0){
         addRemind(item)
+    }else{
+        cancelRemind(item)
     }
 }
 
@@ -102,15 +105,62 @@ const handleRemind=(item)=>{
 const addRemind=async (item)=>{
     const res=await apiActivityAddRemind({activity_id:Number(item.activityId)})
     if(res.code===200){
+        const htmlStr=`<h4 style="text-align:center;margin-bottom:5px;font-size:16px;margin-top:0">设置成功</h4>
+                    <p style="text-align:center;">关注【弘则研究】公众号，接收会前15分钟微信提醒，并及时获取活动信息变更通知</p>`
+        ElMessageBox({
+            title:'会议提醒',
+            message:htmlStr,
+            dangerouslyUseHTMLString: true,
+            confirmButtonText:'知道了',
+            confirmButtonClass:'self-elmessage-confirm-btn'
+        })
+        item.hasRemind=1
+    }else if(res.code===4001){
+        if(res.data.type=='time'){
+            const htmlStr=`<p style="text-align:center;">会议开始前15分钟内无法设置会议提醒</p>`
+            ElMessageBox({
+                title:'会议提醒',
+                message:htmlStr,
+                dangerouslyUseHTMLString: true,
+                confirmButtonText:'知道了',
+                confirmButtonClass:'self-elmessage-confirm-btn'
+            })
+        }
+    }else if(res.code===403){
+        applyAuth(res.data,'会议',2,'活动列表')
+    }
+}
 
+//取消提醒
+const cancelRemind=async (item)=>{
+    const res=await apiActivityCancelRemind({activity_id:Number(item.activityId)})
+    if(res.code===200){
+        ElMessage('取消提醒成功')
+        item.hasRemind=0
+    }else if(res.code===403){
+        ElMessage.warning(res.msg)
     }
 }
 
+
+
+
+// 记录滚动条
+import {onActivated} from 'vue'
+let listWrap=ref(null)
+onActivated(()=>{
+    listWrap.value.scrollTop=scrollTopNum.value
+})
+
+let scrollTopNum=ref(0)
+const listWrapScroll=(e)=>{
+    scrollTopNum.value=e.srcElement.scrollTop
+}
 </script>
 
 
 <template>
-    <div class="activity-list-page">
+    <div class="activity-list-page" ref="listWrap" @scroll="listWrapScroll">
         <el-affix>
             <div class="top-nav-wrap">
                 <div class="nav-first">
@@ -129,7 +179,7 @@ const addRemind=async (item)=>{
             <img src="@/assets/empty-bg.png" alt="">
             <p>暂无数据</p>
         </div>
-        <ul class="list-wrap" v-infinite-scroll="onLoad" :infinite-scroll-immediate="false" v-if="listData.list.length>0">
+        <ul class="list-wrap"  v-infinite-scroll="onLoad" :infinite-scroll-immediate="false" v-if="listData.list.length>0">
             <li class="flex item" v-for="item in listData.list" :key="item.activityId" @click="goDetail(item.activityId)">
                 <el-image
                     style="width: 93px; height: 111px;border-radius: 4px;flex-shrink: 0;"
@@ -169,6 +219,8 @@ const addRemind=async (item)=>{
 
 <style lang="scss" scoped>
 .activity-list-page{
+    height: 100%;
+    overflow-y: auto;
     .top-nav-wrap{
         padding: 20px 0;
         background-color: #fff;

src/views/activity/applyAuth.js

@@ -0,0 +1,86 @@
+/**
+ * 活动模块 公共申请权限
+ * @parms data 接口返回数据
+ * @param type 活动\会议
+ */
+import {apiApplyPermission} from '@/api/user'
+import { ElMessage,ElMessageBox } from 'element-plus'
+export const applyAuth=(data,type,source,fromPage)=>{
+    if(data.type=='contact'){
+        const htmlStr=`<p>您暂无权限参加此${type}，若想参加请联系对口销售--${data.name}：${data.mobile}</p>`
+        ElMessageBox({
+            title:`${type}提醒`,
+            message:htmlStr,
+            dangerouslyUseHTMLString: true,
+            confirmButtonText:'复制号码',
+            confirmButtonClass:'self-elmessage-confirm-btn',
+            showCancelButton:true,
+            cancelButtonText:'取消',
+            cancelButtonClass:'self-elmessage-cancel-btn'
+        }).then(()=>{
+            navigator.clipboard.writeText(data.mobile)
+            ElMessage('复制成功')
+        })
+        if(!data.customer_info.has_apply){
+            if(data.customer_info.status=='冻结'||(data.customer_info.status=='试用'&&data.customer_info.is_suspend==1)){
+                apiApplyPermission({
+                    company_name:data.customer_info.company_name,
+                    real_name:data.customer_info.name,
+                    source:source,
+                    fromPage:fromPage
+                }).then((res)=>{
+                    if(res.code===200){
+                        console.log('主动申请成功');
+                    }
+                })
+            }
+        }
+
+    }else if(data.type=='apply'){//需要申请
+        const htmlStr=`<p>您暂无权限参加此${type}，若想参加可以申请开通哦</p>`
+        ElMessageBox({
+            title:`${type}提醒`,
+            message:htmlStr,
+            dangerouslyUseHTMLString: true,
+            confirmButtonText:'立即申请',
+            confirmButtonClass:'self-elmessage-confirm-btn',
+            showCancelButton:true,
+            cancelButtonText:'取消',
+            cancelButtonClass:'self-elmessage-cancel-btn'
+        }).then(()=>{
+            if(data.customer_info.has_apply){//已经申请过
+                const htmlStr=`<p>您已提交过申请，请耐心等待</p>`
+                ElMessageBox({
+                    title:`${type}提醒`,
+                    message:htmlStr,
+                    dangerouslyUseHTMLString: true,
+                    confirmButtonText:'知道了',
+                    confirmButtonClass:'self-elmessage-confirm-btn'
+                })
+            }else{
+                if(!data.customer_info.status||data.customer_info.status!='流失'){
+                    console.log('跳转申请页');
+                }else{//主动调一次申请权限接口 
+                    apiApplyPermission({
+                        company_name:data.customer_info.company_name,
+                        real_name:data.customer_info.name,
+                        source:source,
+                        fromPage:fromPage
+                    }).then((res)=>{
+                        if(res.code===200){
+                            console.log('主动申请成功');
+                            const htmlStr=`<p>申请已提交</p><p>请等待销售人员与您联系</p>`
+                            ElMessageBox({
+                                title:`${type}提醒`,
+                                message:htmlStr,
+                                dangerouslyUseHTMLString: true,
+                                confirmButtonText:'知道了',
+                                confirmButtonClass:'self-elmessage-confirm-btn'
+                            })
+                        }
+                    })
+                }
+            }
+        })
+    }
+}

src/views/activity/utils.js

@@ -10,10 +10,11 @@ moment.locale('zh-cn')
 * @returns 2020-06-04 15:30-16:30 星期一
 */
 export const formatActivityTime=(start, end)=>{
-    
     const week = moment(start).format('dddd');
     const day = moment(start).format('YYYY-MM-DD');
     const startTime = moment(start).format('HH:mm');
     const endTime = moment(end).format('HH:mm');
     return `${day} ${startTime}-${endTime} ${week}`
-}
+}
+
+