horzi_rai_wxa/pages/reportForm/components/researchChoose.vue

<template>
  <view class="resear-container" v-if="haveResearch">
    <view class="theme">
      <view class="theme-title">最新主题关键词</view>
      <view class="theme-item">
        <text @click="goDetail(item, '标的')" v-for="item in listNew" :key="item.ArticleId">{{ item.IndustryName }}</text>
      </view>
    </view>
    <view class="author-list" v-for="item in dataList" :key="item.DepartmentId">
      <view class="author-item">
        <view class="img-box">
          <image :src="item.ImgUrl" @click="goDetail(item, '作者')"></image>
        </view>
        <text style="font-size: 28rpx; margin-top: 5rpx" @click="goDetail(item, '作者')">{{ item.NickName }}</text>
        <text class="attention attention-cancel" @click="reportFllowDepartment(item.DepartmentId)" v-if="item.IsMyFollow">取消关注</text>
        <text class="attention" @click="reportFllowDepartment(item.DepartmentId)" v-else>+关注</text>
      </view>
      <view class="label-item">
        <text v-for="val in item.List" :key="val.ArticleId" @click="goDetail(val)">{{ val.IndustryName }}</text>
      </view>
      <view class="lucency">
        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/broadside-ico.png" mode=""></image>
      </view>
    </view>
    <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="totalPage > 1" />
    <view class="bottom-env"> 【研选系列】是机构投资者分享研究内容和原创观点的平台，试行阶段，限时免费，欢迎有内容贡献意愿的客户联系对口销售了解参与方式 </view>
    <u-modal
      v-model="goFollowShow"
      :content-style="{ fontSize: '32rpx' }"
      @confirm="goFollowShowBtn"
      :show-cancel-button="isCancelBtn"
      :confirm-text="confirmText"
      @cancel="isCancelBtn = false"
      :show-title="false"
      :cancel-style="{ borderRight: '1rpx solid #EBEBEB' }"
      :confirm-style="{ fontWeight: '700' }"
    >
      <view class="slot-content">
        <rich-text :nodes="accounts"></rich-text>
      </view>
    </u-modal>
  </view>
</template>

<script>
import { Reports } from "@/config/api.js";
import { Throttle } from "@/config/util.js";
export default {
  props: {
    strategyIndex: {
      type: Number,
      required: true,
    },
    tabAct: {
      type: Number,
      required: true,
    },
    isNum: {
      type: Number,
      required: true,
    },
    pageNumFather: {
      type: Number,
      default: "",
      required: true,
    },
  },
  data() {
    return {
      dataList: [],
      pageSize: 10,
      page_no: 1,
      listNew: [],
      haveData: true,
      status: "loadmore",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      totalPage: "",
      haveResearch: false,
      goFollowShow: false,
      accounts: "",
      confirmText: "知道了",
      isCancelBtn: false,
    };
  },
  watch: {
    strategyIndex: {
      handler(val) {
        if (val == 5) {
          this.industryListByDepartment();
        }
      },
      immediate: true,
    },
    isNum: {
      handler(val) {
        if (val > 1 && this.strategyIndex) {
          if (this.status === "nomore") return;
          this.status = "loading";
          this.page_no++;
          this.industryListByDepartment();
        }
      },
    },
    pageNumFather: {
      handler(val) {
        if (val == 1) {
          this.page_no = 1;
          (this.dataList = []), (this.listNew = []);
          this.industryListByDepartment();
          this.$parent.pageNumFather = "";
        }
      },
    },
  },
  methods: {
    reportFllowDepartment(id) {
      Reports.reportFllowDepartment({
        DepartmentId: id,
      }).then((res) => {
        if (res.Ret == 200) {
          if (res.Data.Status == 1) {
            this.goFollowShow = true;
            this.confirmText = res.Data.GoFollow ? "去关注" : "知道了";
            if (res.Data.GoFollow) {
              this.accounts = `作者关注成功 <br> 想要及时获取该作者新发报告时的消息推送，请关注【查研观向小助手】公众号`;
              this.isCancelBtn = true;
            } else {
              this.accounts = `作者关注成功 <br> 请关注【查研观向小助手】公众号，及时获取该作者的报告更新提醒`;;
            }
          } else {
            uni.showToast({
              title: "已取消关注",
              duration: 2000,
              icon: "none",
            });
          }
          this.dataList.forEach((item) => {
            if (item.DepartmentId == id) {
              item.IsMyFollow = !item.IsMyFollow;
            }
          });
        }
      });
    },
    industryListByDepartment() {
      Reports.industryListByDepartment({
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
        ChartPermissionId: this.tabAct,
      }).then((res) => {
        if (res.Ret === 200) {
          this.haveResearch = res.Data.HaveResearch;
          if (!res.Data.HaveResearch) {
            this.$util.modalShow("", "您暂无查看研选权限", "", () => {
              uni.reLaunch({
                url: "/pages/index/index",
              });
            });
          }
          this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
          this.totalPage = res.Data.Paging.Pages; //总页数
          this.listNew = res.Data.ListnNew || [];
          if (this.page_no === 1) {
            this.dataList = res.Data.List || [];
            this.haveData = this.dataList.length ? true : false;
            if (this.refresh) {
              uni.stopPullDownRefresh();
              this.refresh = false;
            }
          } else {
            this.dataList = this.dataList.concat(res.Data.List);
          }
        }
      });
    },
    goDetail(item, genre = "") {
      const { ArticleId, IndustrialManagementId, DepartmentId } = item;
      let id = IndustrialManagementId || "";
      let article = ArticleId || "";
      let genreId = DepartmentId || "";
      uni.navigateTo({
        url: "/reportPages/industrialReport/industrialReport?id=" + id + "&idArticle=" + article + "&idGenre=" + genreId + "&type=研选" + "&isGenre=" + genre,
      });
    },
    goFollowShowBtn() {
      if (this.confirmText == "去关注") {
        uni.navigateTo({
          url: "/activityPages/accountsOfficial/accountsOfficial",
        });
      }
      this.goFollowShow = false;
    },
  },
};
</script>

<style lang="scss" scoped>
.resear-container {
  padding: 220rpx 0 0;
  background-color: #f7f7f7;
  .theme {
    padding: 30rpx 34rpx 0;
    margin-bottom: 20rpx;
    background: #ffffff;
    .theme-title {
      font-size: 32rpx;
      font-weight: bold;
      margin-bottom: 20rpx;
      color: #333333;
    }
    .theme-item {
      display: flex;
      flex-wrap: wrap;
      text {
        box-sizing: border-box;
        padding: 13rpx 45rpx;
        color: #2c83ff;
        font-size: 28rpx;
        background: #ebf4ff;
        border-radius: 35rpx;
        margin: 0 30rpx 30rpx 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
    }
  }
  .author-list {
    position: relative;
    margin-bottom: 10rpx;
    padding: 20rpx 30rpx 20rpx 55rpx;
    background: #ffffff;
    display: flex;
    .author-item {
      height: 240rpx;
      padding: 0rpx 78rpx 0rpx 0;
      border-right: 2rpx solid #e5e5e5;
      text-align: center;
      .img-box {
        width: 140rpx;
        height: 140rpx;
        overflow: hidden;
        border-radius: 10rpx;
        image {
          width: 100%;
          height: 100%;
        }
      }

      .attention {
        margin-top: 6rpx;
        padding: 4rpx 20rpx;
        font-size: 24rpx;
        border-radius: 30rpx;
        color: #ffffff;
        background: #2c83ff;
      }
      .attention-cancel {
        color: #666666 !important;
        background: #f8f8fa !important;
      }
    }
    .label-item {
      padding: 10rpx 0 0 34rpx;
      overflow: hidden;
      white-space: nowrap;
      text {
        color: #2c83ff;
        font-size: 28rpx;
        margin-bottom: 12rpx;
      }
    }
    .lucency {
      position: absolute;
      top: 0;
      right: 0;
      width: 80rpx;
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .bottom-env {
    background: #f7f7f7;
    padding: 10rpx 50rpx;
    color: #999999;
    font-size: 26rpx;
  }
}
</style>