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)">
          <image class="avatar" :src="item.home_img_url" mode="aspectFill" lazyload/>
          <view class="content">
            <view class="name">{{item.classify_name_second}}</view>
            <view class="author">主讲人：{{item.report_author}}</view>
            <view class="van-ellipsis job">{{item.author_descript}}</view>
            <view class="num">第{{item.stage}}期 | {{item.product_name}}</view>
          </view>
        </view>
      </view>

      <!-- 分享海报 -->
      <sharePoster 
        :style="{bottom:'140rpx'}" 
        :shareData="{type:'specialColumnList',params:{classify_id_first:classifyId}}"
      ></sharePoster>
      
    </view>
</template>

<script>
import {apiSpecialColumnList} from '@/api/report'
import sharePoster from '@/components/sharePoster/sharePoster.vue'
export default {
  components: {
    sharePoster
  },
  data () {
    return {
      classifyId:0,
      classifyName:'',

      list:[],
      finished:false
    }
  },
  onLoad(options) {
    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:this.classifyName
    }
  },
  methods: {
    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: 30rpx;
      .avatar{
        flex-shrink: 0;
        margin-right: 30rpx;
        width: 160rpx;
        height: 214rpx;
        border-radius: 16rpx;
        background-color: #f5f5f5;
      }
      .content{
        flex: 1;
        overflow: hidden;
        .name{
          font-size: 32rpx;
          font-weight: bold;
        }
        .author{
          color: #666;
          margin: 10rpx 0;
        }
        .job{
          color: #666;
        }
        .num{
          margin-top: 20rpx;
          color: #E3B377;
        }
      }
    }
  }
}
</style>