|
|
@@ -0,0 +1,458 @@
|
|
|
+<script setup>
|
|
|
+import {apiReportListForVariety,apiGoodsPermissionList} from '@/api/report'
|
|
|
+import SelfList from '@/components/SelfList.vue'
|
|
|
+import moment from 'moment';
|
|
|
+import { reactive,onMounted,onActivated,computed,ref } from 'vue'
|
|
|
+import { useRoute,useRouter } from 'vue-router';
|
|
|
+import { useStore } from 'vuex';
|
|
|
+import { ElMessage } from 'element-plus'
|
|
|
+
|
|
|
+const route=useRoute()
|
|
|
+const router=useRouter()
|
|
|
+const store=useStore()
|
|
|
+
|
|
|
+let classifyId=ref(route.query.classifyId||0) //一级分类id
|
|
|
+document.title=decodeURIComponent(route.query.classifyName)
|
|
|
+
|
|
|
+// 获取用户已绑定品种
|
|
|
+let permissionList=reactive({
|
|
|
+ list:[],
|
|
|
+ firstPerId:0,
|
|
|
+ secList:[],
|
|
|
+ secPerId:0,
|
|
|
+})
|
|
|
+const getPermissionList=async ()=>{
|
|
|
+ const res=await apiGoodsPermissionList({
|
|
|
+ classify_id:Number(classifyId.value),
|
|
|
+ })
|
|
|
+ if(res.code===200){
|
|
|
+ let arr=res.data.permission_list||[]
|
|
|
+ if(arr.length===0){
|
|
|
+ ElMessage.warning('暂无权限')
|
|
|
+ setTimeout(() => {
|
|
|
+ router.replace('/report/classify')
|
|
|
+ }, 2000);
|
|
|
+ return
|
|
|
+ }
|
|
|
+ permissionList.list=arr
|
|
|
+ handleSelectFirstVariety(res.data.permission_list[0])
|
|
|
+ }
|
|
|
+}
|
|
|
+getPermissionList()
|
|
|
+// 选择一级品种
|
|
|
+const handleSelectFirstVariety=(item)=>{
|
|
|
+ permissionList.firstPerId=item.id
|
|
|
+ permissionList.secList=item.list
|
|
|
+ handleSelectSecVariety(item.list[0])
|
|
|
+}
|
|
|
+//选择二级品种
|
|
|
+const handleSelectSecVariety=(item)=>{
|
|
|
+ permissionList.secPerId=item.chart_permission_id
|
|
|
+ reportState.page=1
|
|
|
+ reportState.list=[]
|
|
|
+ reportState.finished=false
|
|
|
+ getReportList()
|
|
|
+}
|
|
|
+
|
|
|
+// 获取报告列表
|
|
|
+let reportState=reactive({
|
|
|
+ list:[],
|
|
|
+ page:1,
|
|
|
+ pageSize:20,
|
|
|
+ loading:false,
|
|
|
+ finished:false,
|
|
|
+})
|
|
|
+const getReportList=async ()=>{
|
|
|
+ reportState.loading=true
|
|
|
+ const res=await apiReportListForVariety({
|
|
|
+ chart_permission_id:Number(permissionList.secPerId),
|
|
|
+ classify_id:Number(classifyId.value),
|
|
|
+ current_index:reportState.page,
|
|
|
+ page_size:reportState.pageSize
|
|
|
+ })
|
|
|
+ reportState.loading=false
|
|
|
+ if(reportState.page==1){
|
|
|
+ document.body.scrollTop=document.documentElement.scrollTop=0
|
|
|
+ }
|
|
|
+ if(res.code===200){
|
|
|
+ let arr=res.data.list||[]
|
|
|
+ reportState.list=[...reportState.list,...arr]
|
|
|
+ reportState.finished=res.data.paging.is_end
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 加载更多列表数据
|
|
|
+const onLoad=()=>{
|
|
|
+ reportState.page++
|
|
|
+ getReportList()
|
|
|
+}
|
|
|
+
|
|
|
+//跳转详情
|
|
|
+const goReportDetail=(item)=>{
|
|
|
+ if(['晨报','周报'].includes(item.classify_name_first)){
|
|
|
+ router.push({
|
|
|
+ path:'/report/chapterdetail',
|
|
|
+ query:{
|
|
|
+ chapterId:item.report_chapter_id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }else{
|
|
|
+ router.push({
|
|
|
+ path:'/report/detail',
|
|
|
+ query:{
|
|
|
+ reportId:item.report_id
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+//播放音频
|
|
|
+const handlePlayAudio=(item)=>{
|
|
|
+ if(item.video_list){
|
|
|
+ if(store.state.audioData.reportId==item.report_id){
|
|
|
+ if(store.state.audioData.paused){
|
|
|
+ store.state.audioData.INS.play()
|
|
|
+ }else{
|
|
|
+ store.state.audioData.INS.pause()
|
|
|
+ }
|
|
|
+ return
|
|
|
+ }
|
|
|
+ const arr=item.video_list.map(_item=>{
|
|
|
+ return {
|
|
|
+ name:_item.video_name,
|
|
|
+ url:_item.video_url,
|
|
|
+ time:_item.video_play_seconds
|
|
|
+ }
|
|
|
+ })
|
|
|
+ store.commit('addAudio',{
|
|
|
+ list:arr,
|
|
|
+ reportId:item.report_id,
|
|
|
+ index:0
|
|
|
+ })
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+// 向小程序发送数据
|
|
|
+const handleDataToXcx=()=>{
|
|
|
+ const postData={
|
|
|
+ path:'/pages-report/reportForVariety/list',
|
|
|
+ params:{
|
|
|
+ classifyId:classifyId.value,
|
|
|
+ classifyName:route.query.classifyName
|
|
|
+ },
|
|
|
+ title:`FICC【${route.query.classifyName}】`,
|
|
|
+ shareImg:''
|
|
|
+ }
|
|
|
+ wx.miniProgram.postMessage({ data: postData })
|
|
|
+}
|
|
|
+
|
|
|
+onMounted(()=>{
|
|
|
+ handleDataToXcx()
|
|
|
+})
|
|
|
+
|
|
|
+// 组件激活时
|
|
|
+onActivated(()=>{
|
|
|
+ const temClassifyId=route.query.classifyId||0
|
|
|
+ if(temClassifyId!=classifyId.value){
|
|
|
+ classifyId.value=temClassifyId
|
|
|
+ reportState.list=[]
|
|
|
+ reportState.page=1
|
|
|
+ reportState.finished=false
|
|
|
+ permissionList.list=[]
|
|
|
+ permissionList.firstPerId=0
|
|
|
+ permissionList.secList=[]
|
|
|
+ permissionList.secPerId=0
|
|
|
+ getPermissionList()
|
|
|
+ }
|
|
|
+ handleDataToXcx()
|
|
|
+})
|
|
|
+
|
|
|
+const code_scene=computed(()=>{
|
|
|
+ return JSON.stringify({classifyId:classifyId.value,classifyName:route.query.classifyName})
|
|
|
+})
|
|
|
+
|
|
|
+const posterParams=computed(()=>{
|
|
|
+ let obj={
|
|
|
+ list_title:route.query.classifyName,
|
|
|
+ stage_1:'',
|
|
|
+ avatar_1:'',
|
|
|
+ title_1:'',
|
|
|
+ author_1:'',
|
|
|
+ tag_1:'',
|
|
|
+ stage_2:'',
|
|
|
+ avatar_2:'',
|
|
|
+ title_2:'',
|
|
|
+ author_2:'',
|
|
|
+ tag_2:'',
|
|
|
+ abstract_2_style:'',
|
|
|
+ abstract_1_style:'',
|
|
|
+ }
|
|
|
+ if(reportState.list[0]){
|
|
|
+ obj.img_1=reportState.list[0].report_img_url
|
|
|
+ obj.title_1=reportState.list[0].title
|
|
|
+ obj.abstract_1=reportState.list[0].classify_name_second
|
|
|
+ obj.time_1=`${reportState.list[0].stage}期 | ${moment(reportState.list[0].publish_time).format('YYYY.MM.DD')}`
|
|
|
+ obj.abstract_1_style=reportState.list[0].classify_name_second?'':'display:none'
|
|
|
+ }
|
|
|
+ if(reportState.list[1]){
|
|
|
+ obj.img_2=reportState.list[1].report_img_url
|
|
|
+ obj.title_2=reportState.list[1].title
|
|
|
+ obj.abstract_2=reportState.list[1].classify_name_second
|
|
|
+ obj.time_2=`${reportState.list[1].stage}期 | ${moment(reportState.list[1].publish_time).format('YYYY.MM.DD')}`
|
|
|
+ obj.abstract_2_style=reportState.list[1].classify_name_second?'':'display:none'
|
|
|
+ }
|
|
|
+ return obj
|
|
|
+})
|
|
|
+</script>
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="variety-report-list-page">
|
|
|
+ <div class="top-nav-warp">
|
|
|
+ <div class="flex first-nav-box">
|
|
|
+ <span
|
|
|
+ :class="['item',item.id===permissionList.firstPerId?'active':'']"
|
|
|
+ v-for="item in permissionList.list"
|
|
|
+ :key="item.id"
|
|
|
+ @click="handleSelectFirstVariety(item)"
|
|
|
+ >{{item.classify_name}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="sec-nav-box">
|
|
|
+ <span
|
|
|
+ :class="['item',item.chart_permission_id===permissionList.secPerId?'active':'']"
|
|
|
+ v-for="item in permissionList.secList.slice(0,6)"
|
|
|
+ :key="item.chart_permission_id"
|
|
|
+ @click="handleSelectSecVariety(item)"
|
|
|
+ >{{item.chart_permission_name}}</span>
|
|
|
+ <el-popover
|
|
|
+ :width="500"
|
|
|
+ trigger="click"
|
|
|
+ >
|
|
|
+ <template #reference>
|
|
|
+ <img v-if="permissionList.secList.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 == permissionList.secPerId&&'active']"
|
|
|
+ v-for="item in permissionList.secList.slice(6)"
|
|
|
+ :key="item.chart_permission_id"
|
|
|
+ @click="handleSelectSecVariety(item)"
|
|
|
+ >{{item.chart_permission_name}}</div>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </el-popover>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <SelfList
|
|
|
+ :finished="reportState.finished"
|
|
|
+ :isEmpty="reportState.list.length === 0 && reportState.finished"
|
|
|
+ :loading="reportState.loading"
|
|
|
+ :count="reportState.list.length"
|
|
|
+ @listOnload="onLoad"
|
|
|
+ emptyMsg="暂无报告"
|
|
|
+ >
|
|
|
+ <div class="flex list-wrap">
|
|
|
+ <div class="flex item" v-for="item in reportState.list" :key="item.report_id" @click="goReportDetail(item)">
|
|
|
+ <el-image class="report-img" :src="item.report_img_url" fit="cover" lazy />
|
|
|
+ <div class="con">
|
|
|
+ <div class="top-name" v-html="item.title_info"></div>
|
|
|
+ <div class="title" v-html="item.title"></div>
|
|
|
+ <div class="des" v-html="item.abstract"></div>
|
|
|
+ <div class="clear-float bot">
|
|
|
+ <span class="time">{{moment(item.publish_time).format('YYYY.MM.DD HH:mm')}}</span>
|
|
|
+ <div
|
|
|
+ class="btn"
|
|
|
+ v-if="item.auth_ok"
|
|
|
+ @click.stop="handlePlayAudio(item)"
|
|
|
+ >{{$store.state.audioData.reportId==item.report_id?$store.state.audioData.paused?'已暂停':'播放中':'立即播放'}}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="last-add-item"></div>
|
|
|
+ <div class="last-add-item"></div>
|
|
|
+ </div>
|
|
|
+ </SelfList>
|
|
|
+ </div>
|
|
|
+ <!-- 生成海报 -->
|
|
|
+ <SharePoster
|
|
|
+ :shareData="{
|
|
|
+ type:'report_list',
|
|
|
+ code_page:'pages-report/reportForVariety/list',
|
|
|
+ code_scene:code_scene,
|
|
|
+ data:posterParams
|
|
|
+ }"
|
|
|
+ ></SharePoster>
|
|
|
+</template>
|
|
|
+
|
|
|
+<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;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.variety-report-list-page{
|
|
|
+ .top-nav-warp{
|
|
|
+ position: sticky;
|
|
|
+ top: 60px;
|
|
|
+ z-index: 50;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.04);
|
|
|
+ padding: 30px 30px 12px 30px;
|
|
|
+ margin-bottom: 30px;
|
|
|
+ .first-nav-box{
|
|
|
+ .item{
|
|
|
+ width: 140px;
|
|
|
+ height: 40px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ background: #F6F6F6;
|
|
|
+ border-radius: 20px;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 40px;
|
|
|
+ font-size: 16px;
|
|
|
+ margin-right: 30px;
|
|
|
+ cursor: pointer;
|
|
|
+ &:hover {
|
|
|
+ background: #FFFBF5;
|
|
|
+ color: #F3A52F;
|
|
|
+ border: 1px solid #F3A52F;
|
|
|
+ box-shadow: 0px 6px 7px 1px #FFF7EB;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .active {
|
|
|
+ background: #FFFBF5;
|
|
|
+ color: #F3A52F;
|
|
|
+ border: 1px solid #F3A52F;
|
|
|
+ box-shadow: 0px 6px 7px 1px #FFF7EB;
|
|
|
+ }
|
|
|
+ @media screen and (max-width: 1350px){
|
|
|
+ .item{
|
|
|
+ width: 90px;
|
|
|
+ height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
+ margin-right: 15px;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .sec-nav-box{
|
|
|
+ margin-top: 30px;
|
|
|
+ .item{
|
|
|
+ flex-shrink: 0;
|
|
|
+ margin-right: 30px;
|
|
|
+ font-size: 16px;
|
|
|
+ color: #666666;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ .active{
|
|
|
+ color: #F3A52F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .list-wrap{
|
|
|
+ flex-wrap: wrap;
|
|
|
+ justify-content: center;
|
|
|
+ // &::after{
|
|
|
+ // content:'';
|
|
|
+ // display: block;
|
|
|
+ // height:0;
|
|
|
+ // flex-shrink: 0;
|
|
|
+ // width: 380px;
|
|
|
+ // margin-bottom: 20px;
|
|
|
+ // margin-left: 10px;
|
|
|
+ // margin-right: 10px;
|
|
|
+ // }
|
|
|
+
|
|
|
+ // 末尾补充的两个元素 为了整体能居中
|
|
|
+ .last-add-item{
|
|
|
+ height:0;
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 380px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ }
|
|
|
+ .item{
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 380px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ box-shadow: 3px 3px 12px 1px rgba(184, 184, 184, 0.16);
|
|
|
+ border-radius: 8px;
|
|
|
+ border: 1px solid #F2F2F2;
|
|
|
+ padding: 20px;
|
|
|
+ margin-bottom: 20px;
|
|
|
+ margin-left: 10px;
|
|
|
+ margin-right: 10px;
|
|
|
+ overflow: hidden;
|
|
|
+ .report-img{
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 110px;
|
|
|
+ height: 160px;
|
|
|
+ border-radius: 8px;
|
|
|
+ margin-right: 15px;
|
|
|
+ }
|
|
|
+ .con{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ justify-content: space-between;
|
|
|
+ overflow: hidden;
|
|
|
+ }
|
|
|
+ .top-name{
|
|
|
+ background-color: #FFFBF5;
|
|
|
+ // text-align: center;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #F3A52F;
|
|
|
+ padding: 4px 0;
|
|
|
+ }
|
|
|
+ .title{
|
|
|
+ :deep(span){
|
|
|
+ color:#F3A52F !important;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .des{
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .bot{
|
|
|
+ display: flex;
|
|
|
+ align-items: flex-end;
|
|
|
+ justify-content: space-between;
|
|
|
+ .time{
|
|
|
+ flex-shrink: 0;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #999;
|
|
|
+ }
|
|
|
+ .btn{
|
|
|
+ flex-shrink: 0;
|
|
|
+ width: 88px;
|
|
|
+ height: 30px;
|
|
|
+ background: #F3A52F;
|
|
|
+ border-radius: 15px;
|
|
|
+ color: #fff;
|
|
|
+ text-align: center;
|
|
|
+ line-height: 30px;
|
|
|
+ font-size: 14px;
|
|
|
+ cursor: pointer;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
