horzi_rai_wxa/pageMy/applyInterview/applyInterview.vue

<template>
  <view class="container applyInterview-container">
    <view class="apply-ul" v-if="haveData">
      <view class="apply-ltem" v-for="(item, index) in interViewList" :key="index" @click="goDetail(item.ArticleId)">
        <view class="item-left">
          <text class="title text_twoLine">{{ item.Title }}</text>
          <text class="text_twoLine desc">{{ item.Body }}</text>
          <text class="item-num" v-if="item.ExpertNumber">专家编号{{ item.ExpertNumber }}</text>
          <view class="company text_twoLine" v-if="item.ExpertBackground">{{ item.ExpertBackground }}</view>
          <text class="view-item" v-if="item.InterviewTime">访谈时间：{{ item.InterviewTime }}</text>
        </view>
        <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
        <u-tag :text="item.Status" :type="applyStatus.get(item.Status)" mode="plain" class="tag" />
      </view>
      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" v-if="totalPage > 1" />
    </view>
    <view class="nodata" v-else>
      <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/act_search.png" mode="" class="nodata_ico"></image>
      <text>暂时没有访谈申请的内容</text>
    </view>
    <freeCharge class="free-charge" :isShowFreeBtn="isShowFree" />
  </view>
</template>

<script>
import { Mine } from "@/config/api.js";
import { Throttle } from "@/config/util.js";
import freeCharge from "@/components/freeCharge";
export default {
  data() {
    return {
      refresh: false, //正在下拉
      status: "loadmore",
      pageSize: 10,
      page_no: 1,
      haveData: true,
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      interViewList: [],
      applyStatus: new Map([
        ["待访谈", "error"],
        ["待邀请", "primary"],
        ["已完成", "success"],
        ["已取消", "info"],
      ]),
      totalPage: "",
    };
  },
  onLoad() {
    this.getInterList();
  },
  components: {
    freeCharge,
  },
  methods: {
    /* 获取列表 */
    getInterList() {
      Mine.getInterview({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
      }).then((res) => {
        if (res.Ret === 200) {
          this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
          this.totalPage = res.Data.Paging.Pages; //总页数
          res.Data.List &&
            res.Data.List.forEach((item) => {
              item.InterviewTime = item.InterviewTime.substr(0, 3) == "000" ? "" : item.InterviewTime;
            });
          if (this.page_no === 1) {
            this.interViewList = res.Data.List || [];
            this.haveData = this.interViewList.length ? true : false;
            if (this.refresh) {
              uni.stopPullDownRefresh();
              this.refresh = false;
            }
          } else {
            this.interViewList = this.interViewList.concat(res.Data.List);
          }
        }
      });
    },
    // 跳转文章详情
    goDetail(id) {
      uni.navigateTo({
        url: "/pageMy/reportDetail/reportDetail?id=" + id,
      });
    },
  },
  /* 触底 */
  onReachBottom: Throttle(function () {
    if (this.status === "nomore") return;
    this.status = "loading";
    this.page_no++;
    this.getInterList();
  }),
  /* 下拉刷新 */
  onPullDownRefresh: Throttle(function () {
    this.page_no = 1;
    this.refresh = true;
    this.getInterList();
  }),
};
</script>

<style lang="scss" scoped>
.applyInterview-container {
  background-color: #f7f7f7;
  .apply-ul {
    padding: 5rpx 0;
    .apply-ltem {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 30rpx 34rpx;
      background: #fff;
      margin-bottom: 4rpx;
      color: #4a4a4a;
      position: relative;
      .title,
      .desc,
      .item-num,
      .company,
      .view-item {
        max-width: 605rpx;
      }
      .title {
        font-size: 34rpx;
      }
      .desc,
      .company {
        margin: 20rpx 0 30rpx;
      }
      .desc,
      .view-item {
        color: #b2b2b2;
      }
      .tag {
        position: absolute;
        right: 0;
        top: 0;
      }
    }
  }
}
</style>