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/czbk/host_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-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";
export default {
  data() {
    return {
      hotList: [],
      goFollowShow: false,
      confirmText: "知道了",
      isCancelBtn: false,
      accounts: "",
    };
  },
  methods: {
    //主题热度/近期更新更多
    async researchHotList(id) {
      const res = await Research.researchHotList({ ChartPermissionId: id, ThemeType: 2 });
      if (res.Ret === 200) {
        this.hotList = 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.researchHotList(options.id);
  },
};
</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 {
    width: 26rpx;
    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;
      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>