活动模块修改

README.md

@@ -6,3 +6,7 @@ https://ybpctest.hzinsights.com
 生产
 https://ybpc.hzinsights.com
 
+开发说明
+1./components/SelfList.vue 为公共列表加载组件。如列表加载逻辑同样 请使用此组件
+2.
+

src/api/activity.js

@@ -61,4 +61,16 @@ export const apiActivityCancelRegister = (params) => {
  */
 export const apiActivityAudios=params=>{
     return get('/activity/getActivityVoices',params)
-}
+}
+
+// 获取报告详情
+//research_report_id
+export const apiGetReportDetail=(params)=>{
+    return get('/report/research_report',params)
+}
+
+//获取周度报告详情
+//research_report_type_id
+export const apiGetChapterReportDetail=params=>{
+    return get('/report/research_report_chapter',params)
+}

src/api/report.js

@@ -3,15 +3,4 @@
  */
 import {get,post} from './http'
 
-// 获取报告详情
-//research_report_id
-export const apiGetReportDetail=(params)=>{
-    return get('/report/research_report',params)
-}
-
-//获取周度报告详情
-//research_report_type_id
-export const apiGetChapterReportDetail=params=>{
-    return get('/report/research_report_chapter',params)
-}
 

src/components/SelfList.vue

@@ -15,7 +15,7 @@ const handleClickLoadMore=()=>{
     <div class="self-list-wrap">
         <slot></slot>
         <div class="empty-box" v-if="props.isEmpty">
-            <img src="@/assets/empty-bg.png" alt="">
+            <img :src="$store.state.globalImgUrls.chartEmpty" alt="">
             <p>暂无数据</p>
         </div>
         <div class="bot-load" v-if="!props.finished&&!props.loading&&!props.isEmpty">

src/layout/Index.vue

@@ -39,12 +39,14 @@ store.state.audioData.INS=globalAudioIns
           <Aside />
         </el-aside>
         <el-main style="padding-left:180px">
+          <div class="page-container">
           <router-view v-slot="{ Component }">
               <keep-alive>
                   <component :is="Component" :key="$route.name" v-if="$route.meta.keepAlive" />
               </keep-alive>
               <component :is="Component" :key="$route.name" v-if="!$route.meta.keepAlive" />
           </router-view>
+          </div>
         </el-main>
         </el-container>
         <el-footer>
@@ -104,7 +106,10 @@ store.state.audioData.INS=globalAudioIns
   background-color: #fff;
 }
 .el-main {
-
+  .page-container{
+    max-width: 820px;
+    margin: 0 auto;
+  }
 }
 .el-footer{
   position: relative;

src/style/global.scss

@@ -114,4 +114,27 @@ img{
 
 .el-image-viewer__canvas img{
   background-color: #fff;
+}
+
+.global-main-btn{
+  text-align: center;
+  color: #fff;
+  padding: 9px 20px;
+  border-radius: 33px;
+  background-color: #F3A52F;
+  cursor: pointer;
+}
+
+.global-plain-btn{
+  text-align: center;
+  color: #fff;
+  padding: 9px 20px;
+  border-radius: 33px;
+  border:1px solid #F3A52F;
+  cursor: pointer;
+  color: #F3A52F;
+  &:hover{
+    background-color: #F3A52F;
+    color: #fff;
+  }
 }

src/views/activity/ChapterDetail.vue

@@ -4,7 +4,7 @@ import {ref,onMounted} from 'vue'
 import { useRoute } from 'vue-router'
 const route=useRoute()
 
-import {apiGetChapterReportDetail,apiGetReportDetail} from '@/api/report'
+import {apiGetChapterReportDetail,apiGetReportDetail} from '@/api/activity'
 let research_report_type_id=ref(route.query.research_report_type_id)
 let info=ref(null)
 const getInfo=async ()=>{

src/views/activity/Detail.vue

@@ -269,197 +269,171 @@ const cancelRegister=async ()=>{
 </script>
 
 <template>
-    <div class="activity-detail-page">
-        <div class="main-box" v-if="info">
-            <div class="top">
-                <span class="status-box status-before" v-if="info.activityState===1">未开始</span>
-                <span class="status-box status-progress" v-if="info.activityState===2">进行中</span>
-                <span class="status-box status-end" v-if="info.activityState===3">已结束</span>
-                <h2 class="type-title">{{ info.activityTypeName }}</h2>
-                <div>主讲人：{{ info.speaker }}</div>
-                <div style="color: #b6b6b6; margin: 12px 0"> 活动时间：{{ formatActivityTime(info.startTime, info.endTime) }}
-                    <span class="city-box" v-if="info.city">{{info.city}}</span>
-                </div>
-                <div class="report-name"> {{ info.reportName ? info.reportName.split("】")[1] : info.activityName }} </div>
+    <div class="activity-detail-page" v-if="info">
+        <div class="top-box" :style="'background-image:url(' + info.speakerBackgroundPic + ')'">
+            <span class="status-box status-before" v-if="info.activityState===1">未开始</span>
+            <span class="status-box status-progress" v-if="info.activityState===2">进行中</span>
+            <span class="status-box status-end" v-if="info.activityState===3">已结束</span>
+            <h2 class="type-title">{{info.activityTypeName}}</h2>
+            <div class="speaker">主讲人：{{ info.speaker }}</div>
+            <div class="active-time"> 活动时间：{{ formatActivityTime(info.startTime, info.endTime) }}</div>
+        </div>
+        <div class="flex report-name">
+            <span>{{ info.reportName ? info.reportName.split("】")[1] : info.activityName }}</span>
+            <div class="global-main-btn" v-if="info.reportLink" @click="goDetail">查看相关报告</div>
+        </div>
+        <!-- 音频模块 -->
+        <div class="audio-wrap" v-if="audioList.length>0">
+            <div 
+                class="flex audio-item" 
+                v-for="(item,index) in audioList" 
+                :key="item.voiceUrl"
+            >
+                <img @click="handlePlayAudio(index)" :src="curAudiourl==item.voiceUrl?$store.state.audioData.paused?aduioIconPause:aduioIconPlay:aduioIconDefault" alt="">
+                <div :class="['name',curAudiourl==item.voiceUrl&&'name-active']">{{item.voiceName}}</div>
+                <!-- <span class="time">{{formatAudioTime(item.voicePlaySeconds)}}</span> -->
             </div>
-            <div class="con">
-                <!-- 音频模块 -->
-                <div class="audio-wrap" v-if="audioList.length>0">
-                    <div 
-                        class="flex audio-item" 
-                        v-for="(item,index) in audioList" 
-                        :key="item.voiceUrl"
-                    >
-                        <img @click="handlePlayAudio(index)" :src="curAudiourl==item.voiceUrl?$store.state.audioData.paused?aduioIconPause:aduioIconPlay:aduioIconDefault" alt="">
-                        <div :class="['name',curAudiourl==item.voiceUrl&&'name-active']">{{item.voiceName}}</div>
-                        <span class="time">{{formatAudioTime(item.voicePlaySeconds)}}</span>
-                    </div>
-                </div>
-                <div class="info-wrap">
-                    <div
-                        class="flex item"
-                        v-for="item in infoList"
-                        :key="item.label"
-                    >
-                        <div class="label">{{ item.label }}：</div>
-                        <div
-                            :class="[
-                                'content',
-                                item.color && 'yellow-color',
-                                item.type == 'copy' && 'link',
-                            ]"
-                        >
-                            {{item.text}}
-                        </div>
-                    </div>
-                </div>
-                <div class="btns">
-                    <div class="btn active" v-if="info.reportLink" @click="goDetail">查看相关报告</div>
-                    <block v-if="info.activityState === 1">
-                    <div class="btn" v-if="info.firstActivityTypeId === 3" @click="handleRegister">
-                        {{
-                            info.registerState == 0
-                            ? "报名线下参会"
-                            : "取消报名线下参会"
-                        }}
-                        ({{ info.registeredNum>info.limitPeopleNum?info.limitPeopleNum:info.registeredNum }}/{{ info.limitPeopleNum }})
-                    </div>
-                    <div :class="['btn active',info.hasRemind == 1&&'btn-block']" @click="handleRemind">{{info.hasRemind == 1 ? "取消会议提醒" : "会议提醒"}}</div>
-                    <p style="text-align:center;color:#B6B6B6">(会前15分钟推送微信消息提醒)</p>
-                    </block>
+        </div>
+        <!-- 数据显示模块 -->
+        <div class="info-wrap">
+            <div
+                class="flex item"
+                v-for="item in infoList"
+                :key="item.label"
+            >
+                <div class="label">{{ item.label }}：</div>
+                <div
+                    :class="[
+                        'content',
+                        item.color && 'yellow-color',
+                        item.type == 'copy' && 'link',
+                    ]"
+                >
+                    {{item.text}}
                 </div>
             </div>
         </div>
-        <!-- 无权限展示页面 -->
-        <div class="no-auth-wrap" v-if="noAuth.show">
-            <img :src="$store.state.globalImgUrls.activityNoAuth" alt="">
-            <p style="font-size:16px">您暂无权限参加此活动</p>
-            <block v-if="noAuth.data.type=='contact'">
-                <p style="font-size:16px">若想参加，可以联系对口销售--{{noAuth.data.name}}：{{noAuth.data.mobile}}</p>
-                <!-- <div class="btn">知道了</div> -->
-            </block>
-            <block v-else>
-                <p style="font-size:16px">若想参加可以申请开通</p>
-                <div class="btn" @click="handleApply">立即申请</div>
-            </block>
-            <div class="back-btn" @click="goBack">返回</div>
+        <!-- 按钮模块 -->
+        <div class="btn-box" v-if="info.activityState === 1">
+            <div 
+                :class="[
+                    'global-plain-btn btn',
+                    info.registerState != 0?'grey-btn':''
+                ]" 
+                style="margin-bottom: 20px;"
+                v-if="info.firstActivityTypeId === 3" 
+                @click="handleRegister"
+            >
+                {{
+                    info.registerState == 0
+                    ? "报名线下参会"
+                    : "取消报名线下参会"
+                }}
+                ({{ info.registeredNum>info.limitPeopleNum?info.limitPeopleNum:info.registeredNum }}/{{ info.limitPeopleNum }})
+            </div>
+            <div 
+                :class="['global-plain-btn btn',info.hasRemind == 1&&'grey-btn']"
+                @click="handleRemind"
+            >{{info.hasRemind == 1 ? "取消会议提醒" : "会议提醒"}}</div>
+            <p style="text-align:center;color:#999;font-size: 16px;">(会前15分钟推送微信消息提醒)</p>
         </div>
     </div>
+    <!-- 无权限 -->
+    <div class="no-auth-wrap" v-if="noAuth.show">
+        <img :src="$store.state.globalImgUrls.activityNoAuth" alt="">
+        <p style="font-size:16px;margin-bottom: 0;">您暂无权限参加此活动</p>
+        <block v-if="noAuth.data.type=='contact'">
+            <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想参加，可以联系对口销售--{{noAuth.data.name}}：{{noAuth.data.mobile}}</p>
+        </block>
+        <block v-else>
+            <p style="font-size:16px;margin-top: 5px;margin-bottom: 62px;">若想参加可以申请开通</p>
+            <div class="global-main-btn btn" @click="handleApply" style="margin-bottom: 20px;">立即申请</div>
+        </block>
+        <div class="global-plain-btn btn" @click="goBack">返回</div>
+    </div>
 </template>
 
 <style lang="scss" scoped>
-:deep(.el-popper){
-    min-width: 50px;
-}
 .activity-detail-page {
-    padding-top: 30px;
-    .main-box {
-        border: 1px solid #ebebeb;
+    .top-box{
+        height: 186px;
+        background-size: cover;
+        background-repeat: no-repeat;
+        background-position: center center;
         border-radius: 4px;
-        overflow: hidden;
-        min-width: 600px;
-        // max-width: 900px;
-        .top {
-            padding: 14px 20px;
-            border-bottom: 1px dashed #ebebeb;
-            position: relative;
-            .status-box{
-                position: absolute;
-                top: 14px;
-                right: 20px;
-                font-size: 16px;
-            }
-            .status-before{
-                color: #DAB37C;
-            }
-            .status-progress{
-                color: #2A65F5;
-            }
-            .status-end{
-                color: #333;
-            }
-            .city-box{
-                color: #DAB37C;
-                font-size: 14px;
-                margin-left: 10px;
-                &::before{
-                    content: '';
-                    display: inline-block;
-                    width: 12px;
-                    height: 15px;
-                    background-image: url('../../assets/location.png');
-                    background-size: cover;
-                    margin-right: 5px;
-                    position: relative;
-                    top: 3px;
-                }
-            }
+        padding-top: 20px;
+        padding-left: 20px;
+        color: #fff;
+        position: relative;
+        .type-title{
+            font-size: 24px;
+            margin: 0;
         }
-        .type-title {
-            font-size: 16px;
-            margin-top: 0;
-            margin-bottom: 12px;
+        .speaker{
+            margin-top: 19px;
+            font-size: 14px;
         }
-        .report-name {
-            font-size: 16px;
-            &::before {
-                content: "";
+        .active-time{
+            margin-top: 24px;
+            font-size: 14px;
+        }
+        .status-box{
+            position: absolute;
+            top: 0;
+            right: 0;
+            font-size: 14px;
+            background: #F2F2F2;
+            border-radius: 0px 0px 0px 4px;
+            padding: 4px 14px;
+        }
+        .status-before{
+            color: #F3A52F;
+            background: #FFFBF5;
+        }
+        .status-progress{
+            color: #2A65F5;
+            background: #F2F6FF;
+        }
+        .status-end{
+            color: #333;
+        }
+    }
+    .report-name{
+        padding-top: 40px;
+        padding-bottom: 30px;
+        border-bottom: 1px solid #F2F2F2;
+        span{
+            font-size: 18px;
+            font-weight: bold;
+            flex: 1;
+            &::before{
+                content: '';
                 display: inline-block;
                 width: 6px;
-                height: 20px;
-                background: #dab37c;
-                margin-right: 6px;
+                height: 24px;
+                background: #F3A52F;
                 position: relative;
-                top: 4px;
+                top: 6px;
+                margin-right: 10px;
             }
         }
-
-        .con {
-            padding: 20px;
-            .info-wrap {
-                .item {
-                    margin-bottom: 12px;
-                    .label {
-                        flex-shrink: 0;
-                    }
-                    .yellow-color {
-                        color: #DAB37C;
-                    }
-                }
-            }
-            .btns{
-                margin: 36px 0;
-                .btn{
-                    min-width: 180px;
-                    max-width: 200px;
-                    height: 36px;
-                    text-align: center;
-                    line-height: 36px;
-                    color: #DAB37C;
-                    font-size: 16px;
-                    border-radius: 3px;
-                    border: 1px solid #DAB37C;
-                    margin:12px auto;
-                    cursor: pointer;
-                }
-                .active{
-                    background-color: #DAB37C;
-                    color: #fff;
-                    border: none;
-                }
-                .btn-block{
-                    border: 1px solid #DAB37C;
-                    color: #DAB37C;
-                    background-color: transparent;
-                }
-            }
+        .global-main-btn{
+            flex-shrink: 0;
+            margin-left: 30px;
+            width: 218px;
         }
     }
+
     .audio-wrap{
-        margin-bottom: 72px;
+        padding-top: 30px;
+        padding-bottom: 30px;
+        border-bottom: 1px solid #F2F2F2;
         .audio-item{
             align-items: center;
-            margin-bottom: 12px;
+            margin-bottom: 20px;
+            &:last-child{
+                margin-bottom: 0;
+            }
             img{
                 width: 17px;
                 height: 17px;
@@ -469,9 +443,10 @@ const cancelRegister=async ()=>{
             .name{
                 flex: 1;
                 margin: 0 10px;
+                font-size: 16px;
             }
             .name-active{
-                color: #DAB37C;
+                color: #F3A52F;
             }
             .time{
                 color: #B6B6B6;
@@ -479,38 +454,42 @@ const cancelRegister=async ()=>{
         }
     }
 
-    .no-auth-wrap{
-        text-align: center;
-        img{
-            width: 400px;
+    .info-wrap {
+        padding-top: 30px;
+        .item {
+            margin-bottom: 20px;
+            font-size: 16px;
+            .label {
+                flex-shrink: 0;
+            }
+            .yellow-color {
+                color: #F3A52F;
+            }
         }
-        .back-btn{
-            text-align: center;
-            line-height: 36px;
-            color: #DAB37C;
-            width: 180px;
-            height: 36px;
-            border-radius: 4px;
-            border: 1px solid #DAB37C;
-            cursor: pointer;
+    }
+
+    .btn-box{
+        .btn{
+            width: 218px;
             margin-left: auto;
             margin-right: auto;
-            font-size: 16px;
-            margin-top: 10px;
+        }
+        .grey-btn{
+            background-color: #F6F6F6;
+            color: #333;
+            border: none;
+        }
+    }
+}
+.no-auth-wrap{
+        text-align: center;
+        img{
+            width: 400px;
         }
         .btn{
-            text-align: center;
-            line-height: 36px;
-            color: #fff;
-            width: 180px;
-            height: 36px;
-            border-radius: 4px;
-            background-color: #DAB37C;
-            cursor: pointer;
+            width: 218px;
             margin-left: auto;
             margin-right: auto;
-            font-size: 16px;
         }
     }
-}
 </style>

src/views/activity/ReportDetail.vue

@@ -5,7 +5,7 @@ import { useRoute, useRouter } from 'vue-router'
 const route=useRoute()
 const router=useRouter()
 
-import {apiGetReportDetail} from '@/api/report'
+import {apiGetReportDetail} from '@/api/activity'
 let info=ref(null)
 const getInfo=async ()=>{
     const res=await apiGetReportDetail({research_report_id:Number(route.query.research_report_id)})