hongze_yb_xcx/pages-report/specialColumn/list.vue

<template>
    <view class="special-column-list-page">
      <view class="report-empty-box" v-if="finished&&list.length==0">
        <image :src="globalImgUrls.chartEmpty" mode="widthFix" />
        <view>暂无数据</view>
      </view>
      <view class="list" v-else>
        <view class="flex item" v-for="item in list" :key="item.classify_id_second" @click="goDetail(item)">
          <text class="stage">第{{item.stage}}期</text>
          <image class="avatar" :src="item.home_img_url" mode="aspectFill" lazy-load></image>
          <view class="content">
            <view class="title">{{item.classify_name_second}}</view>
            <view class="flex author">
              <text style="margin-right:20rpx;flex-shrink: 0;">{{item.report_author}}</text>
              <text class="van-ellipsis vip-text" v-if="item.vip_title">{{item.vip_title}}</text>
              <text class="van-ellipsis" v-else>{{item.author_descript}}</text>
            </view>
          </view>
        </view>
      </view>

      <!-- 分享海报 -->
      <sharePoster 
        :style="{bottom:'140rpx'}" 
        :shareData="{
          type:'special_column_list',
          code_page:'pages-report/specialColumn/list',
          code_scene:code_scene,
          data:shareParams
        }"
      ></sharePoster>
      
    </view>
</template>

<script>
import {apiSpecialColumnList} from '@/api/report'
import {apiGetSceneToParams} from '@/api/common'
import sharePoster from '@/components/sharePoster/sharePoster.vue'
export default {
  components: {
    sharePoster
  },
  computed: {
    shareParams(){
      let obj={
        list_title:this.classifyName,
        stage_1:'',
        avatar_1:'',
        title_1:'',
        author_1:'',
        tag_1:'',
        stage_2:'',
        avatar_2:'',
        title_2:'',
        author_2:'',
        tag_2:'',
      }
      if(this.list[0]){
        obj.stage_1=this.list[0].stage.toString()
        obj.avatar_1=this.list[0].home_img_url
        obj.title_1=this.list[0].classify_name_second
        obj.author_1=this.list[0].report_author
        obj.tag_1=this.list[0].author_descript
      }
      if(this.list[1]){
        obj.stage_2=this.list[1].stage.toString()
        obj.avatar_2=this.list[1].home_img_url
        obj.title_2=this.list[1].classify_name_second
        obj.author_2=this.list[1].report_author
        obj.tag_2=this.list[1].author_descript
      }
      return obj

    },
    code_scene(){
      return JSON.stringify({classifyId:this.classifyId,classifyName:this.classifyName})
    }
  },
  data () {
    return {
      classifyId:0,
      classifyName:'',

      list:[],
      finished:false
    }
  },
  onLoad(options) {
    if(options.scene){
      this.init(options.scene)
    }else{
      this.classifyId=options.classifyId
      // 设置title
      this.classifyName=decodeURIComponent(options.classifyName)
      uni.setNavigationBarTitle({ title: decodeURIComponent(options.classifyName) })
      this.getList()
    }
    
  },
  onPullDownRefresh() {
    this.list=[]
    this.finished=false
    this.getList()
    setTimeout(() => {
      uni.stopPullDownRefresh()
    }, 1500);
  },
  onShareAppMessage() {
    return {
      title:`FICC【${this.classifyName}】`
    }
  },
  methods: {
    async init(e){
      const res=await apiGetSceneToParams({scene_key:e})
      if(res.code==200){
        const obj=JSON.parse(res.data)
        this.classifyId=obj.classifyId
        this.classifyName=decodeURIComponent(obj.classifyName)
        uni.setNavigationBarTitle({ title: decodeURIComponent(obj.classifyName) })
        this.getList()
      }
    },

    async getList(){
      this.finished=false
      const res=await apiSpecialColumnList({classify_id_first:Number(this.classifyId)})
      if(res.code===200){
        this.list=res.data||[]
        this.finished=true
      }
    },


    goDetail(item){
      uni.navigateTo({ url: '/pages-report/specialColumn/detail?columnId='+item.classify_id_second })
    }
  }
}
</script>

<style lang="scss">
page{
    padding-bottom: 0;
}
</style>

<style lang="scss" scoped>
.special-column-list-page{
  padding: 34rpx;
  .list{
    .item{
      margin-bottom: 20rpx;
      padding: 37rpx 30rpx 37rpx 37rpx;
      background: #FFFFFF;
      border: 1px solid #E6E6E6;
      box-sizing: border-box;
      box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.08);
      border-radius: 16rpx;
      position: relative;
      overflow: hidden;
      align-items: center;
      .stage{
        position: absolute;
        top: 0;
        right: 0;
        display: block;
        background-color: #E3B377;
        border-bottom-left-radius: 16rpx;
        padding: 4rpx 10rpx;
        text-align: center;
        color: #FFFFFF;
        font-size: 24rpx;
        min-width: 126rpx;
        text-align: center;
        box-sizing: border-box;
      }
      .avatar{
        width: 180rpx;
        height: 180rpx;
        border-radius: 50%;
        flex-shrink: 0;
        margin-right: 20rpx;
      }
      .content{
        flex: 1;
        overflow: hidden;
        .title{
          font-size: 34rpx;
          font-weight: 700;
          padding-bottom: 20rpx;
          margin-bottom: 20rpx;
          border-bottom: 1px solid #E6E6E6;
        }
        .author{
          font-size: 28rpx;
          font-weight: 400;
          align-items: center;
          .vip-text{
            display: inline-block;
            background-color: #FAF7EE;
            font-size: 24rpx;
            padding: 8rpx 15rpx;
            border-radius: 23rpx;
            line-height: 1;
            position: relative;
            padding-left: 38rpx;
            &::before{
              content: '';
              display: inline-block;
              width: 30rpx;
              height: 30rpx;
              background-image: url('../static/tag.png');
              background-size: cover;
              line-height: 1;
              position: absolute;
              top: 6rpx;
              left: 8rpx;
            }
          }
        }
      }

    }
  }
}
</style>