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="van-ellipsis author">
              <text style="margin-right:20rpx">{{item.report_author}}</text>
              <text class="vip-text" v-if="item.vip_title">{{item.vip_title}}</text>
              <text v-else>{{item.author_descript}}</text>
            </view>
          </view>
        </view>
      </view>
      
    </view>
</template>

<script>
import {apiSpecialColumnList} from '@/api/report'
export default {
  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:`FICC【${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: 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;
          .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>