horzi_rai_wxa/reportPages/researchTheme/researchTheme.vue

<template>
  <view class="container theme-content">
    <view class="box-content-top">
      <view class="content-top">
        <text class="text_oneLine"> # {{ themeList.IndustryName }}</text>
        <text :class="!isFollw ? 'cancel-attention' : 'attention'" class="follw" @click="isAttention">
          {{ isFollw ? "取消关注" : "+ 关注" }}
        </text>
      </view>
      <view class="read-more">
        <text class="text-box text_oneLine" @click="scrollGo(item.IndustrialSubjectId)" v-for="item in themeList.ListSubject" :key="item.IndustrialSubjectId">
          {{ item.SubjectName }}
        </text>
      </view>
    </view>
    <view class="all-theme" @click="goThemeAll"> 全部主题>> </view>
    <view class="content-item" :id="'tabItem-' + item.IndustrialSubjectId" v-for="item in themeList.List" :key="item.ArticleId">
      <view class="item-user" v-if="item.NickName" @click="authorDetails(item)">
        <image src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/user_report.png"></image>
        <text> {{ item.NickName }}</text>
      </view>
      <view class="item-title">
        <text style="display: inline" @click="goDetail(item)">
          {{ item.Title }}
        </text>
        <text class="item-industry" v-if="item.SubjectName">&nbsp;&nbsp;&nbsp;#{{ item.SubjectName }}</text>
      </view>
      <view class="item-more">
        <text>{{ item.PublishDate }}</text>
        <view class="pv-ollect">
          <view>
            <image class="pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/examine_icon.png"></image>
            {{ item.Pv }}
          </view>
          <view @click="collectClick(item)">
            <image v-if="item.IsCollect" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_act.png"></image>
            <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/cygx/czbk/collect_ico.png"></image>
            {{ item.CollectNum }}人收藏
          </view>
        </view>
      </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>
    <Loading />
  </view>
</template>

<script>
import { Reports, Research, Report } from "@/config/api.js";
export default {
  data() {
    return {
      themeList: [],
      isFollw: false,
      goFollowShow: false,
      confirmText: "知道了",
      isCancelBtn: false,
      accounts: "",
      themeId: 0,
      sourceShare: "",
      pageRouterShare: "",
    };
  },
  methods: {
    // 跳转主题
    goThemeAll() {
      uni.navigateTo({ url: "/pages-purchaser/researchTheme/researchTheme" });
    },
    async researchThemeDetail(id, source, PageRouter) {
      const res = await Research.researchThemeDetail({ IndustrialManagementId: id, Source: source ? 2 : 1, PageRouter });
      if (res.Ret === 200) {
        this.themeList = res.Data || {};
        this.isFollw = res.Data.IsFollw;
      }
    },
    //关注
    async isAttention(item) {
      await this.$store.dispatch("showLoginModal");
      const res = await Reports.reportFllow({ IndustrialManagementId: this.themeList.IndustrialManagementId, PageRouter: "主题详情" });
      if (res.Ret === 200) {
        this.isFollw = !this.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,
          });
        }
        uni.$emit("updateFllowTheme", { isFollw: this.isFollw, id: this.themeList.IndustrialManagementId });
      }
    },
    //点击了去关注
    goFollowShowBtn() {
      if (this.confirmText == "去关注") {
        uni.navigateTo({
          url: "/activityPages/accountsOfficial/accountsOfficial",
        });
      }
      this.goFollowShow = false;
    },
    //收藏
    async collectClick(item) {
      await this.$store.dispatch("showLoginModal");
      const res = await Report.collectRpt({ ArticleId: item.ArticleId, PageRouter: this.$store.state.pageRouterReport });
      if (res.Ret === 200) {
        item.IsCollect = !item.IsCollect;
        item.IsCollect
          ? (item.CollectNum += 1) &&
            uni.showToast({
              title: "收藏成功",
              icon: "none",
              duration: 2000,
            })
          : (item.CollectNum -= 1);
        !item.IsCollect &&
          uni.showToast({
            title: "已取消收藏",
            icon: "none",
            duration: 2000,
          });
      }
    },
    //去往文章详情页面
    goDetail(item) {
      uni.navigateTo({ url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId });
    },
    //去往作者详情
    authorDetails(item) {
      uni.navigateTo({
        url: "/reportPages/authorPages/authorPages?id=" + item.DepartmentId,
      });
    },
    //点击后滚动
    scrollGo(item) {
      uni.pageScrollTo({
        duration: 300,
        selector: "#" + "tabItem-" + item,
      });
    },
  },
  onLoad(options) {
    let source = options.source || "";
    let pageRouter = options.pageRouter || "";
    this.themeId = options.id;
    this.pageRouterShare = pageRouter;
    this.sourceShare = source;
    this.researchThemeDetail(options.id, source, pageRouter);
  },
  onShow() {
    this.$store.commit("setRouterReport", "主题详情");
  },
  /** 用户点击分享 */
  onShareAppMessage: function (res) {
    return {
      title: "研选主题",
      path: "/reportPages/authorPages/authorPages?id=" + this.authorId + "&source=" + this.sourceShare + "&pageRouter=" + this.pageRouterShare,
    };
  },
};
</script>

<style lang="scss" scoped>
.theme-content {
  padding: 20rpx;
  background-color: #f7f7f7;
  .box-content-top {
    position: relative;
    background-color: #fff;
    padding: 30rpx;
    border-radius: 8rpx;
  }
  .content-top {
    width: 100%;
    padding: 0 20rpx;
    position: relative;
    color: #000;
    height: 48rpx;
    .follw {
      position: absolute;
      right: 30rpx;
      top: 50%;
      transform: translateY(-50%);
    }
    .attention {
      flex-shrink: 0;
      padding: 0 28rpx;
      line-height: 46rpx;
      height: 48rpx;
      border-radius: 37rpx 37rpx 37rpx 37rpx;
      color: #fff;
      font-weight: 400;
      font-size: 24rpx;
      background-color: #999;
    }
    .cancel-attention {
      background: #3385ff;
      color: #fff;
      height: 48rpx;
      line-height: 40rpx;
    }
  }
  .read-more {
    display: flex;
    flex-wrap: wrap;
    .text-box {
      margin-top: 30rpx;
      margin-right: 20rpx;
      font-size: 28rpx;
      color: #408fff;
      width: 197rpx;
      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;
    }
  }
  .all-theme {
    color: #3385ff;
    width: 100%;
    text-align: center;
    padding-bottom: 20rpx;
    border-bottom: 2rpx solid #ececec;
    margin: 20rpx 0;
  }
  .content-item {
    background-color: #fff;
    padding: 30rpx 20rpx 0;
    .item-title {
      font-weight: 500;
      .item-industry {
        margin-left: 10rpx;
        color: #3385ff;
        display: inline-block;
      }
    }
    .item-user {
      display: flex;
      align-items: center;
      color: #999999;
      font-size: 28rpx;
      margin-bottom: 20rpx;
      image {
        width: 23rpx;
        height: 26rpx;
        margin-right: 20rpx;
      }
    }
    .item-more {
      display: flex;
      justify-content: space-between;
      color: #cecece;
      margin: 20rpx 0 0;
      padding-bottom: 30rpx;
      border-bottom: 1rpx solid #ececec;
      .pv-ollect {
        display: flex;
        align-items: center;
        width: 40%;
        justify-content: space-between;
        image {
          width: 22rpx;
          height: 21rpx;
          margin-right: 10rpx;
        }
        .pv {
          height: 16rpx;
        }
      }
    }
  }
}
</style>