horzi_rai_wxa/pages/reportForm/components/strategy.vue

<template>
  <!-- 季度策略 -->
  <view class="industrial-container">
    <!-- 季度策略 -->
    <view class="collect-ul">
      <view class="collect-ltem" v-for="(item, index) in collectList" :key="index" @click="goDetail(item, index)">
        <view class="item-left">
          <text class="title text_twoLine"
            >{{ item.Title }}
            <text class="reg-text" v-if="item.IsRed"></text>
          </text>
          <text v-if="isText" :class="threeFour ? 'text-threeFour' : 'text_one'">
            {{ item.Abstract }}
          </text>
          <text class="text_twoLine desc">{{ item.PublishDate }}</text>
        </view>
        <u-icon name="arrow-right" color="#BDBDBD" size="34"></u-icon>
      </view>
      <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
    </view>
  </view>
</template>

<script>
import { Reports } from "@/config/api.js";
import { Throttle } from "@/config/util.js";
let app = getApp({ allowDefault: true });
export default {
  props: {
    strategyIndexTwo: {
      type: Number,
    },
    isNum: {
      type: Number,
    },
    tabAct_idTwo: {
      type: Number,
    },
    pageNumFather: {
      type: Number,
      default: null,
    },
    matchTypeName: {
      type: String,
    },
  },
  data() {
    return {
      refresh: false, //正在下拉
      page_no: 1,
      pageSize: 10,
      collectList: [],
      haveData: true,
      status: "loadmore",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      totalPage: "",
      isShow: false,
      threeFour: false,
      isText: true,
    };
  },
  watch: {
    matchTypeName: {
      handler() {
        if (this.matchTypeName == "资金流向" || this.matchTypeName == "大类资产") {
          this.threeFour = true;
        }
        if (this.matchTypeName == "周度思考" || this.matchTypeName == "估值研究") {
          this.isText = false;
        } else {
          this.isText = true;
        }
      },
      immediate: true,
    },
    isNum: {
      handler() {
        if (this.status === "nomore") return;
        this.status = "loading";
        this.page_no++;
        this.tabAct_idTwo && this.getCollectList();
      },
    },
    tabAct_idTwo: {
      handler(newValue) {
        this.collectList = [];
        if (newValue) {
          this.page_no = 1;
          this.pageSize = 10;
          this.getCollectList();
        }
      },
      immediate:true
    },
    pageNumFather: {
      handler() {
        if (this.pageNumFather) {
          this.page_no = 1;
          this.tabAct_idTwo && this.getCollectList();
          this.$parent.pageNumFather = "";
        }
      },
    },
  },
  mounted() {
  },
  methods: {
    /* 获取列表 */
    getCollectList() {
      Reports.getTacticsList({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        CategoryId: this.tabAct_idTwo,
      }).then((res) => {
        if (res.Ret === 200) {
          this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
          this.totalPage = res.Data.Paging.Pages; //总页数
          if (this.page_no === 1) {
            this.collectList = res.Data.List || [];
            this.haveData = this.collectList.length ? true : false;
            if (this.refresh) {
              uni.stopPullDownRefresh();
              this.refresh = false;
            }
          } else {
            this.collectList = this.collectList.concat(res.Data.List);
          }
        }
      });
    },
    goDetail(item, index) {
      /* 无需授权且已绑定 检验是或否有权限 */
      if (index == 0) {
        this.$emit("hideIsred", this.isShow);
      }
      this.collectList[index].IsRed = false;
      this.$store.commit("setRouterReport", "深度研究策略");
      this.$store.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
    },
  },

  /* 下拉刷新 */
  onPullDownRefresh: Throttle(function () {
    this.page_no = 1;
    this.refresh = true;
    this.getCollectList();
  }),
};
</script>

<style scoped lang="scss">
.industrial-container {
  background-color: #f6f6f6;
  .collect-ul {
    .collect-ltem {
      display: flex;
      padding: 30rpx 34rpx;
      background: #fff;
      margin-top: 10rpx;
      align-items: center;
      justify-content: space-between;

      .title {
        position: relative;
        max-width: 625rpx;
        color: #333;
        font-size: 30rpx;
        padding-left: 28rpx;

        .reg-text {
          position: absolute;
          top: 50%;
          left: 0rpx;
          width: 14rpx;
          height: 14rpx;
          transform: translateY(-50%);
          background-color: #ff0000;
          border-radius: 50%;
          z-index: 9;
        }
      }

      .desc {
        margin-top: 17rpx;
        padding-left: 28rpx;
        width: 625rpx;
        color: #999;
      }

      .text_one {
        max-width: 600rpx;
        padding-left: 28rpx;
        color: #666666;
        font-size: 28rpx;
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
      }

      .text-threeFour {
        max-width: 600rpx;
        padding-left: 28rpx;
        color: #666666;
        font-size: 28rpx;
        text-overflow: -o-ellipsis-lastline;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
      }
    }
  }
}
</style>