horzi_rai_wxa/pages-purchaser/columnAuthor/columnAuthor.vue

<template>
  <view class="container author-column-pages">
    <view class="item-ul">
      <view class="item-li" v-for="item in specialList" :key="item.Id" @click="goDetailPages(item)">
        <view class="item-title"> {{ item.SpecialName }}</view>
        <view class="item-name-time">
          <view class="name">
            <image :src="item.HeadImg"></image>
            <text> {{ item.NickName }}</text>
          </view>
        </view>
        <view class="item-content"> 专栏介绍： {{ item.Introduction }} </view>
        <view class="item-new" v-if="item.YanxuanSpecialCenter">
          <view class="item-new-time">
            <text>最近更新</text>
            <text>{{ item.YanxuanSpecialCenter.PublishTime }}</text>
          </view>
          <view class="item-new-title text_twoLine"> {{ item.YanxuanSpecialCenter.Title }} </view>
        </view>
      </view>
      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="page_no > 1" />
    </view>
    <Loading />
  </view>
</template>

<script>
import { purchaserApi } from "@/config/api";
export default {
  data() {
    return {
      specialList: [], // 专栏列表
      isAuthor: false, // 是否是作者
      refresh: false,
      page_no: 1,
      pageSize: 10,
      status: "loadmore",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
    };
  },
  methods: {
    async getColumnList() {
      const res = await purchaserApi.yanxuanSpecialAuthorList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
      });
      if (res.Ret === 200) {
        this.status = res.Data.Paging.IsEnd ? "nomore" : "loadmore";
        this.specialList = this.page_no == 1 ? res.Data.List || [] : this.specialList.concat(res.Data.List);
        this.isAuthor = res.Data.IsAuthor;
        if (this.refresh) {
          uni.stopPullDownRefresh();
          this.refresh = false;
        }
      }
    },
    // 去往专栏详情
    goDetailPages(item) {
      uni.navigateTo({ url: "/pages-purchaser/columnDetail/columnDetail?id=" + item.UserId });
    },
  },
  onLoad() {
    this.getColumnList();
  },
  /** 用户点击分享 */
  onShareAppMessage: function (res) {
    return {
      title: "专栏作者",
      path: "/pages-purchaser/columnAuthor/columnAuthor",
    };
  },
  /* 下拉刷新 */
  onPullDownRefresh() {
    this.page_no = 1;
    this.refresh = true;
    this.getColumnList();
  },
  // 下滑触底
  onReachBottom() {
    if (this.status == "nomore") return;
    this.page_no++;
    this.getColumnList();
    this.status = "loading";
  },
};
</script>

<style lang="scss" scope>
.author-column-pages {
  background-color: $uni-bg-color;
  .item-ul {
    padding: 30rpx;
    .item-li {
      padding: 0 30rpx 30rpx;
      background-color: white;
      border-radius: 16rpx;
      border-top: 10rpx solid #8fa4c4;
      margin-bottom: 20rpx;
      .item-title {
        margin-top: 20rpx;
        font-size: 34rpx;
        font-weight: 500;
      }
      .item-name-time {
        display: flex;
        justify-content: space-between;
        align-items: center;
        height: 80rpx;
        font-size: 28rpx;
        color: #999;
        .name {
          display: flex;
          align-items: center;
          image {
            width: 48rpx;
            height: 48rpx;
            border-radius: 50%;
            margin-right: 10rpx;
          }
        }
      }
      .item-content {
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        line-clamp: 4;
        -webkit-box-orient: vertical;
      }
      .item-new {
        margin-top: 20rpx;
        padding-top: 15rpx;
        border-top: 1rpx solid #dcdfe6;
        line-height: 34rpx;
        .item-new-time {
          display: flex;
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: #999;
          margin-bottom: 18rpx;
        }
        .item-new-title {
          font-size: 24rpx;
          color: #333;
        }
      }
    }
  }
}
</style>