horzi_rai_wxa/reportPages/recentPages/recentPages.vue

<template>
  <view class="container recent-content">
    <view class="hot-li" v-for="(item, index) in hotList" :key="item.IndustrialManagementId">
      <view class="li-item hot-item">
        <view style="display: flex" class="text_oneLine hot-new" @click="themeDetails(item)">
          <text class="li-serial" :style="{ background: serialBackground(index) }">
            {{ index + 1 }}
          </text>
          <text class="text_oneLine" style="display: inline"> # {{ item.IndustryName }} </text>
          <image class="new-img" v-if="item.IsHot" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/hot_report.png"></image>
        </view>
        <text :class="item.IsFollw ? 'cancel-attention' : 'attention'" @click="isAttention(item)">{{ item.IsFollw ? "取消关注" : "+ 关注" }}</text>
      </view>
      <view class="li-item read-more" @click="themeDetails(item)">
        <text class="text-box text_oneLine" v-for="val in item.IndustrialSubjectList" :key="val.IndustrialSubjectId">
          {{ val.SubjectName }}
        </text>
      </view>
    </view>
    <u-loadmore :status="status" icon-type="flower" :load-text="loadText" margin-top="20" v-if="page_no > 1" />
    <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, Research } from "@/config/api.js";
import { Throttle } from "@/config/util.js";
export default {
  data() {
    return {
      hotList: [],
      goFollowShow: false,
      confirmText: "知道了",
      isCancelBtn: false,
      accounts: "",
      page_no: 1,
      pageSize: 20,
      permissionId:'',
      status: "loadmore",
      loadText: {
        loadmore: "上拉加载更多",
        loading: "加载中",
        nomore: "已经到底了",
      },
      refresh: false, //正在下拉
    };
  },
  methods: {
    //主题热度/近期更新更多
    async researchHotList() {
      const res = await Research.researchHotList({
        ChartPermissionId: this.permissionId,
        ThemeType: 2,
        PageSize: this.pageSize,
        CurrentIndex: this.page_no,
      });
      if (res.Ret === 200) {
        this.status = this.page_no < res.Data.Paging.Pages ? "loadmore" : "nomore";
        if (this.page_no === 1) {
          this.hotList = res.Data.List || [];
          if (this.refresh) {
            uni.stopPullDownRefresh();
            this.refresh = false;
          }
        } else {
          this.hotList = this.hotList.concat(res.Data.List);
        }
      }
    },
    //关注
    async isAttention(item) {
      const res = await Reports.reportFllow({ IndustrialManagementId: item.IndustrialManagementId });
      if (res.Ret === 200) {
        item.IsFollw = !item.IsFollw;
        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: "已取消关注",
            icon: "none",
            duration: 2000,
          });
        }
      }
    },
    //点击了去关注
    goFollowShowBtn() {
      if (this.confirmText == "去关注") {
        uni.navigateTo({
          url: "/activityPages/accountsOfficial/accountsOfficial",
        });
      }
      this.goFollowShow = false;
    },
    //计算遍历的颜色
    serialBackground(index) {
      index += 1;
      return index == 1 ? "#D7584F" : index == 2 ? "#E98033" : index == 3 ? "#FDD367" : "#D3D3D3";
    },
    //去往主题详情
    themeDetails(item) {
      this.$store.dispatch("checkHandle", "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId);
    },
  },
  onLoad(options) {
    this.permissionId = options.id;
    this.researchHotList();
  },
  /* 触底 */
  onReachBottom: Throttle(function () {
    if (this.status === "nomore") return;
    this.status = "loading";
    this.page_no++;
    this.researchHotList();
  }),
  /* 下拉刷新 */
  onPullDownRefresh: Throttle(function () {
    this.page_no = 1;
    this.refresh = true;
    this.researchHotList();
  }),
};
</script>

<style lang="scss" scoped>
.recent-content {
  padding: 30rpx 30rpx 50rpx;
  .hot-li {
    padding: 30rpx 0 20rpx;
    border-bottom: 1px solid #f6f6f6;
  }
  .hot-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .hot-new {
      align-items: center;
      flex: 1;
      padding-right: 20rpx;
    }
    .new-img {
      width: 26rpx;
      height: 28rpx;
      margin-left: 15rpx;
      flex-shrink: 0;
    }
  }
  .li-serial {
    padding: 0 8rpx;
    height: 26rpx;
    line-height: 26rpx;
    color: #fff;
    font-size: 20rpx;
    text-align: center;
    border-radius: 4rpx 4rpx 4rpx 4rpx;
    margin: 0rpx 10rpx 0 20rpx;
    flex-shrink: 0;
  }
  .attention {
    flex-shrink: 0;
    padding: 5rpx 28rpx;
    border-radius: 37rpx 37rpx 37rpx 37rpx;
    color: #fff;
    background: #3385ff;
    font-weight: 400;
    font-size: 24rpx;
  }
  .read-more {
    margin-left: 30rpx;
    margin-top: 20rpx;
    display: flex;
    flex-wrap: wrap;
    .text-box {
      margin-bottom: 27rpx;
      margin-right: 40rpx;
      padding: 0 7rpx;
      font-size: 24rpx;
      color: #408fff;
      width: 170rpx;
      height: 46rpx;
      line-height: 46rpx;
      text-align: center !important;
      background: url(~@/static/img/report_bg.png) no-repeat;
      background-size: 100% 100%;
      text-indent: 0em;
    }
  }
}
</style>