hongze_yb_xcx/pages/report/report.vue

<template>
  <view class="report-page">
    <view class="top-sticky" style="background: #fff">
    <!-- 导航 -->
    <view class="nav-bar-wrap" :style="{height:navBarStyle.height,paddingTop:navBarStyle.paddingTop,paddingBottom:navBarStyle.paddingBottom}">
      <view class="content">
		  <view class="avatar" @click="goUser">
			<image style="width:100%;height:100%;border-radius: 50%" :src="userInfo.head_img_url" mode="aspectFill"/>
		  </view>
        <van-icon custom-class="search-icon" name="search" size="24px" @click="goSearch" />
        <view class="text">FICC研报</view>
      </view>
    </view>
	
    <!-- card -->
    <view class="tab-card">
      <view 
        class="card-item" 
        v-for="(tab,index) in tabCards" 
        :key="index" 
        @click="linkPage(tab)"
      >
        <image :src="tab.icon+'?t='+new Date().getDay()" mode="aspectFill" class="card-ico"/>
        <view class="title">{{tab.tab}}</view>
      </view>
    </view>
	
    <!-- 分类 -->
    <view class="type-wrap">
      <view class="flex first-type-box">
        <view :class="['item',{ act: selectTopFirstId==item.classify_name }]" v-for="(item,index) in topFirstList" :key="item.classify_name" @click="handleClickTopFirst(item,index)">
          <view>{{item.classify_name}}</view>
        </view>
      </view>
      <view class="flex sub-type-box">
        <view 
          :class="['item',item.chart_permission_id==selectTopSubId&&'active']" 
          v-for="item in topSubList" :key="item.chart_permission_id"
          @click="handleClickTopSub(item)"
        >{{item.chart_permission_name}}</view>
      </view>
    </view>
    </view>
    <view class="report-empty-box" v-if="finished&&list.length==0">
      <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
      <view>暂无报告</view>
    </view>
    <view class="list-wrap" v-else>
      <view class="list-item" v-for="item in list" :key="item.date">
        <view class="time">{{getReportListDate(item.date)}}</view>
        <view class="content-list">
          <view class="content-item" v-for="(citem,index) in item.sub_list" :key="index">
            <view class="content-box" @click="goDetail(citem)">
              <view class="all-btn">全部</view>
              <view class="c-time">{{citem.publish_time|getListTime}}</view>
              <view class="c-title">{{citem.title}}</view>
              <view class="desc" v-html="citem.content_sub"></view>
              <view class="tags">
                <text style="margin-right:15px" v-if="citem.classify_name_first">#{{citem.classify_name_first}}</text>
                <text style="margin-right:15px" v-if="citem.classify_name_second">#{{citem.classify_name_second}}</text>
              </view>
            </view>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系销售弹窗 -->
    <van-popup :show="authData.show" @close="authData.show=false" :close-on-click-overlay="false">
      <view class="global-pup">
          <view class="content">
            <view style="width:100%">
              <view>您暂无该品种权限，若想查看请联系</view>
              <view>对口销售{{authData.contactInfo.name}}:{{authData.contactInfo.mobile}}</view>
            </view>
          </view>
          <view class="flex bot">
            <view @click="authData.show=false" style="color:#A9AFB8">取消</view>
            <view @click="handleCallPhone(authData.contactInfo.mobile)">拨号</view>
          </view>    
      </view>
    </van-popup>  
  </view>
</template>

<script>
const moment=require('@/utils/moment-with-locales.min')
moment.locale('zh-cn');
import {apiReportIndexPageAuthList,apiReportIndexPageList} from '@/api/report'
import { apiHomeTab } from '@/api/user.js';
export default {
  filters: {
    getListTime(e){
      return moment(e).format('HH:mm:ss')
    }
  },
  data () {
    return {
      navBarStyle:{
        height:60+'px',
        paddingTop:40+'px',
        paddingBottom:'4px'
      },
      authData:{
        show:false,
        isBuy:false,//是否为已购客户
        contactInfo:''
      },//如果是已购客户 并且点击了没有开通的品种则弹窗联系销售
      topFirstList:[],
      selectTopFirstId:0,
      topSubList:[],
      selectTopSubId:0,
      
      list:[],
      dateArr:[],
      page:1,
      pageSize:20,
      finished:false,
	  
      tabPathMap: new Map([
        ['report','/pages-report/classify'],
        ['chart','/pages/chart/chart'],
        ['sandbox','/pages-sandTable/sandTable'],
        ['activity','/pages/activity/activity'],
        ['pricedriven','/pages/pricedriven/pricedriven']
      ]),
      tabCards: []
    }
  },
  onLoad(){ 
    this.initNavBar()
    this.getTopAuthList()
	  this.getTopTab();
  },
  onShow() {
    uni.getSystemInfo({
			success: function (res) {
				if (res.windowWidth > 750||['windows','mac'].includes(res.platform)) {
					console.log('跳转启动页判断进入pc');
					uni.reLaunch({
						url: "/pages/pc",
					});
				}
			},
		})
  },
  onReady() {
  },
  onPullDownRefresh() {
    this.getTopAuthList()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1500);
  },
  onReachBottom() {
    if(this.finished) return
    this.page++
    this.getReportList()
  },
  onShareAppMessage() {
    return {
      title:"FICC研报"
    }
  },
  methods: {
    initNavBar(){
      let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
      this.navBarStyle={
        height:(menuButtonInfo.height+menuButtonInfo.top+8)+'px',
        paddingTop:(menuButtonInfo.top-4)+'px',
        paddingBottom:'4px'
      }
    },
    //顶部权限数据
    async getTopAuthList(){
      const res=await apiReportIndexPageAuthList()
      if(res.code===200){
        this.authData.isBuy=res.data.check_flag
        this.authData.contactInfo=res.data.contact_info
        this.topFirstList=res.data.permission_list.slice(0,4)
        this.handleClickTopFirst(this.topFirstList[0],0)
      }
    },
	 
	/* 顶部tab */
	 async getTopTab() {
		const { code,data } = await apiHomeTab()
		
		if(code !== 200) return
		this.tabCards = data;
	 },

    //点击顶部一级分类
    handleClickTopFirst(item,index){
      if(item.sort==100000){
        this.goClassify()
        return
      }
      this.selectTopFirstId=item.classify_name
      this.topSubList=this.topFirstList[index].list
      this.handleClickTopSub(this.topSubList[0])
      this.handleShowAuthData(this.topSubList[0])
    },

    //点击顶部二级分类
    handleClickTopSub(item){
      this.selectTopSubId=item.chart_permission_id
      this.list=[]
      this.dateArr=[]
      this.page=1
      this.finished=false
      this.getReportList()
      this.handleShowAuthData(item)
    },

    // 判断是否要为已购用户且点击的品种没有权限
    handleShowAuthData(e){
      if(this.authData.isBuy){
        if(!e.auth_ok){
          this.authData.show=true
        }
      }
    },

    //获取报告列表
    async getReportList(){
      const res=await apiReportIndexPageList({
        chart_permission_id:this.selectTopSubId,
        current_index:this.page,
        page_size:this.pageSize
      })
      if(res.code===200){
        if(res.data.list){
          if(this.list.length==0){
            this.list=res.data.list
            res.data.list.forEach(item=>{
              this.dateArr.push(item.date)
            })
          }else{
            //判断是否前面已经有相同日期数据 有的话添加合并
            let arr=[]
            let temTimearr=[]
            res.data.list.forEach(item => {
              if(this.dateArr.includes(item.date)){
                this.list.forEach(_item=>{
                  if(item.date===_item.date){
                    _item.sub_list=[..._item.sub_list,...item.sub_list]
                  }
                })
              }else{
                arr.push(item)
                temTimearr.push(item.date)
              }
            });
            this.list=[...this.list,...arr]
            this.dateArr=[...this.dateArr,...temTimearr]
          }
        }
        if(res.data.paging.is_end){
          this.finished=true
        }
      }
    },

    //跳转
    linkPage({mark}) {
      const url = this.tabPathMap.get(mark);
      uni.navigateTo({ url,
        fail () {
          uni.switchTab({
            url,
          })
        } 
      })
    },
	
    // 跳转分类
    goClassify(){
      uni.navigateTo({ url: '/pages-report/classify' })
    },

    //跳转搜索
    goSearch(){
      uni.navigateTo({url:'/pages-report/search'})
    },
    
    //跳转我的
    async goUser(){
      await this.checkUserIsBind()
      uni.navigateTo({
        url: '/pages/user/user',
        fail () {
          uni.switchTab({
            url:'/pages/user/user',
          })
        }
      })
    },

    //跳转报告详情
    async goDetail(item){
      if(['晨报','周报'].includes(item.classify_name_first)){
        uni.navigateTo({url: `/pages-report/chapterDetail?chapterId=${item.report_chapter_id}&fromPage=home`})
      }else{
        uni.navigateTo({url:'/pages-report/reportDetail?reportId='+item.report_id})
      }
    },

    // 拨打电话
    handleCallPhone(tel){
      uni.makePhoneCall({
        phoneNumber: tel,
        success:()=>{
          this.authData.show=false
        }
      });
    },

    //设置列表日期显示
    getReportListDate(e){
      const isSameYear=moment(e).isSame(new Date(), 'year');
      if(isSameYear){//今年
        return moment(e).format('MM.DD')+' '+ moment(e).format('ddd')
      }else{
        return moment(e).format('YY.MM.DD')+' '+moment(e).format('ddd')
      }
    }
  }
}
</script>

<style lang="scss">
.van-sticky-wrap--fixed{
  background-color: #fff;
}
.nav-bar-wrap{
  .content{
    position: relative;
    height: 100%;
    .search-icon{
      position: absolute;
      left: 134rpx;
      top: 50%;
      transform: translateY(-50%);
    }
	.avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		position: absolute;
		left: 34rpx;
		top: 50%;
		transform: translateY(-50%);
	}
  }
  
}
</style>

<style lang="scss" scoped>
movable-area{
  position: fixed;
  top: 50%;
  left: 0;
  width: 100%;
  height: calc(50% - 100rpx);
  pointer-events: none;
  z-index: 3;
  movable-view{
    width:fit-content;
    height:fit-content;
    pointer-events: auto;
  }
}
.top-sticky{
  position: sticky;
  top: 0;
  left: 0;
  z-index: 99;
}
.nav-bar-wrap{
  border-bottom: 1px solid $global-border-color;
  .content{
    .text{
      text-align: center;
      width: 50vw;
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%,-50%);
      font-weight: bold;
      font-size: 16px;
    }
  }
  
}
.type-wrap{
  // border-bottom: 1px solid $global-border-color;
  padding: 20rpx 34rpx 0 34rpx;
  box-shadow: 0px 4rpx 4rpx 1px rgba(198, 198, 198, 0.25);
  .avatar{
    width:78rpx;
    height:78rpx;
    border-radius: 50%;
    overflow: hidden;
    margin-right: 30rpx;
  }
  .first-type-box{
    justify-content: space-between;
    .item{
		 min-width: 150rpx;
      flex-shrink: 0;
      text-align: center;
		padding: 16rpx 0;
		text-align: center;
		background-color: #F5F5F5;
		border-radius: 8rpx;
      // font-size: $global-font-size-sm;
      image{
        width: 100rpx;
        height: 100rpx;
        display: block;
        margin: 0 auto 15rpx auto;
      }
    }
	 .act {
		background: #FDF8F2;
		color: #E3B377;
	 }
  }
  .sub-type-box{
    margin-top: 40rpx;
    font-size: 28rpx;
    color: #666666;
    overflow-x: auto;
    &::-webkit-scrollbar{
      width: 0;
      height: 0;
      display: none;
    }
    .item{
      padding-bottom: 16rpx;
      margin-right: 50rpx;
      flex-shrink: 0;
    }
    .active{
      color: #E3B377;
      border-bottom: 2px solid #E3B377;
    }
  }
}

.list-wrap{
  padding: 20rpx 34rpx;
  .list-item{
    margin-bottom: 40rpx;
    .time{
      margin-bottom: 32rpx;
    }
  }
  .content-list{
    .content-box{
      padding: 0 0rpx 20rpx 20rpx;
      position: relative;
      .all-btn{
        position: absolute;
        right: 20rpx;
        bottom: 20rpx;
        width: 95rpx;
        height: 34rpx;
        background: linear-gradient(100deg, #E3B377 0%, #FFDDB1 100%);
        border-radius: 17rpx;
        color: #fff;
        font-size: 24rpx;
        text-align: center;
      }
    }
    .content-item{
      padding:0 0 50rpx 20rpx;
      border-left: 1px solid #F4E1C9;
      position: relative;
      &:last-child{
        border-bottom: none;
        padding-bottom: 0rpx;
      }
      &::before{
        content: '';
        display: block;
        box-sizing: border-box;
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        border: 6rpx solid #F4E1C9;
        position: absolute;
        left: 0;
        top: 0;
        background: #E3B377;
        transform: translate(-50%,-50%);
        z-index: 2;
      }
      &::after{
        content:'';
        display: block;
        width: 34rpx;
        height: 1rpx;
        background-color: #F4E1C9;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
      }
      .c-time{
        position: relative;
        top: -17rpx;
        font-size: 24rpx;
        color: #333333;
      }
      .c-title{
        font-size: $global-font-size-lg;
        font-weight: bold;
        word-wrap: break-word;
        white-space: normal;
        word-break: break-all;
      }
      .desc{
        line-height: 1.5;
        margin-top: 10rpx;
        color: #666666;
      }
      .tags{
        margin-top: 20rpx;
        color: #E3B377;
        min-height: 40rpx;
      }
    }
  }
}
.quesion-btn{
  width:100rpx;
  height:100rpx;
  background-color: red;
  border-radius: 50%;
  z-index: 50;
}

.tab-card {
	display: flex;
	padding:  40rpx 34rpx 20rpx;
	align-items: center;
	justify-content: space-between;
	.card-item {
		// margin-right: 40rpx;
		// &:last-child { margin-right: 0; }
		.card-ico {
			width: 60rpx;
			height: 60rpx;
			display: block;
      margin-left: auto;
      margin-right: auto;
		}
		.title {
			text-align: center;
		}
	}
}

</style>