horzi_rai_wxa/pages-purchaser/specialColumn/specialColumn.vue

<template>
  <view class="container special-column">
    <view class="top-content">
      <view class="global_card_content column-author" @click="goColumnAuthor">
        <text>专栏作者</text>
        <van-icon name="arrow" color="#999999" size="16" />
      </view>
      <view class="global_card_content column-my" @click="goColumnMy" v-if="isAuthor">
        <text>我的专栏</text>
        <view class="is-info">
          <view v-if="!isImproveInformation">待完善信息</view>
          <van-icon name="arrow" color="#999999" size="16" />
        </view>
      </view>
    </view>
    <view class="column-list-content">
      <column-list-content :mySpecialList="mySpecialList" @upDateCollectHandler="upDateCollectHandler" />
      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="page_no > 1" />
    </view>
    <Loading />
  </view>
</template>

<script>
import ColumnListContent from "../components/columnListContent.vue";
import { purchaserApi } from "@/config/api";
export default {
  components: { ColumnListContent },

  data() {
    return {
      mySpecialList: [],
      isAuthor: true,
      isImproveInformation: true,
      refresh: false, //正在下拉
      page_no: 1,
      pageSize: 10,
      status: "loadmore",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
    };
  },
  methods: {
    // 去往专栏作者
    goColumnAuthor() {
      uni.navigateTo({ url: "/pages-purchaser/columnAuthor/columnAuthor" });
    },
    // 去往我的专栏
    goColumnMy() {
      uni.navigateTo({ url: "/pages-purchaser/myColumnDetail/myColumnDetail" });
    },
    async getYanxuanSpecialList() {
      const res = await purchaserApi.yanxuanSpecialList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
      });
      if (res.Ret === 200) {
        this.status = res.Data.Paging.IsEnd ? "nomore" : "loadmore";
        this.isAuthor = res.Data.IsAuthor;
        this.isImproveInformation = res.Data.IsImproveInformation;
        this.mySpecialList = this.page_no == 1 ? res.Data.List || [] : this.mySpecialList.concat(res.Data.List);
        if (this.refresh) {
          uni.stopPullDownRefresh();
          this.refresh = false;
        }
      }
    },
    // 更新收藏
    upDateCollectHandler(item) {
      this.mySpecialList.forEach((key) => {
        if (key.Id === item.Id) {
          key.CollectNum = item.IsCollect == 1 ? item.CollectNum - 1 : item.CollectNum + 1;
          key.IsCollect = item.IsCollect == 1 ? 0 : 1;
        }
      });
    },
  },
  onLoad() {
    this.getYanxuanSpecialList();
  },
  /** 用户点击分享 */
  onShareAppMessage: function (res) {
    return {
      title: "研选专栏",
      path: "/pages-purchaser/specialColumn/specialColumn",
    };
  },
  /* 下拉刷新 */
  onPullDownRefresh() {
    this.page_no = 1;
    this.refresh = true;
    this.getYanxuanSpecialList();
  },
  // 下滑触底
  onReachBottom() {
    if (this.status == "nomore") return;
    this.page_no++;
    this.getYanxuanSpecialList();
    this.status = "loading";
  },
};
</script>

<style lang="scss" scope>
.special-column {
  background-color: $uni-bg-color;
  padding: 38rpx 35rpx 35rpx;
  .top-content {
    display: flex;
    font-weight: 500;
    font-size: 28rpx;
    line-height: 40rpx;
    color: #333;
    margin-bottom: 20rpx;
    .column-author,
    .column-my {
      display: flex;
      align-items: center;
      justify-content: space-between;
      height: 107;
      background-color: #fff;
      flex: 1;
    }
    .column-my {
      margin-left: 20rpx;
    }
    .is-info {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      view {
        color: #999;
        font-size: 24rpx;
        font-weight: 400;
        line-height: 34rpx;
      }
    }
  }
  .column-list-content {
    border-radius: 16rpx;
    background-color: #fff;
    /deep/ .column-list-content-detail {
      padding: 0 40rpx !important;
      border-bottom: 2rpx solid #f0f1f3;
    }
  }
}
</style>