horzi_rai_wxa/reportPages/authorPages/authorPages.vue

<template>
  <view class="container author-container">
    <view class="global_card_content content-top">
      <view class="author-box">
        <view class="author-img">
          <image :src="list.ImgUrl"></image>
          <text class="global_title">{{ list.NickName }}</text>
        </view>
        <view :class="['follw', 'global_content_center', isFollw && 'cancel-follw']" @click="isAttention">
          {{ isFollw ? "取消关注" : "+ 关注" }}
        </view>
      </view>
      <view class="author-num">
        <view class="num-box">
          <text class="num">{{ list.FllowNum }}</text>
          <text class="text">粉丝</text>
        </view>
        <view class="num-box">
          <text class="num">{{ list.ArticleNum }}</text>
          <text class="text">报告</text>
        </view>
        <view class="num-box">
          <text class="num">{{ list.CollectNum }}</text>
          <text class="text">获得收藏</text>
        </view>
      </view>
    </view>
    <view class="all-author" @click="goAuthorAll"> 全部作者>> </view>
    <view class="global_card_content content-item" v-for="item in list.List" :key="item.ArticleId">
      <view class="item-title">
        <text class="global_title" style="display: inline; margin-right: 20rpx" @click="goDetail(item)">
          {{ item.Title }}
        </text>
        <text class="item-industry" v-for="key in item.List" :key="key.IndustryName" @click="themeDetails(key)">&nbsp;&nbsp;&nbsp;#{{ key.IndustryName }}</text>
      </view>
      <view class="item-more">
        <text>{{ item.PublishDate }}</text>
        <view class="global_pv-ollect">
          <view>
            <image class="pv" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/examine_icon.png"></image>
            {{ item.Pv }}
          </view>
          <view @click="collectClick(item)">
            <image v-if="item.IsCollect" src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/collect_act.png"></image>
            <image v-else src="https://hzchart.oss-cn-shanghai.aliyuncs.com/new_cygx/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 {
      list: [],
      isFollw: false,
      goFollowShow: false,
      confirmText: "知道了",
      isCancelBtn: false,
      accounts: "",
      authorId: 0,
    };
  },
  methods: {
    // 跳转主题
    goAuthorAll() {
      uni.navigateTo({ url: "/pages-purchaser/researchAuthor/researchAuthor" });
    },
    async departmentIdDetail(id) {
      const res = await Research.departmentIdDetail({
        DepartmentId: id || 56,
      });
      if (res.Ret === 200) {
        this.list = res.Data || {};
        this.isFollw = res.Data.IsFllow;
      }
    },
    //关注
    async isAttention() {
      await this.$store.dispatch("showLoginModal");
      const res = await Reports.reportFllowDepartment({ DepartmentId: this.list.DepartmentId });
      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("updateFllowAuthor", { isFollw: this.isFollw, id: this.list.DepartmentId });
      }
    },
    //收藏
    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,
          });
      }
    },
    //点击了去关注
    goFollowShowBtn() {
      if (this.confirmText == "去关注") {
        uni.navigateTo({
          url: "/activityPages/accountsOfficial/accountsOfficial",
        });
      }
      this.goFollowShow = false;
    },
    //去往文章详情页面
    goDetail(item) {
      this.$store.commit("setRouterReport", "作者详情");
      uni.navigateTo({ url: "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId });
    },
    //去往主题详情
    themeDetails(item) {
      uni.navigateTo({ url: "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId });
    },
  },
  onLoad(options) {
    this.authorId = options.id;
    this.departmentIdDetail(options.id);
  },
  /** 用户点击分享 */
  onShareAppMessage: function (res) {
    return {
      title: "研选作者",
      path: "/reportPages/authorPages/authorPages?id=" + this.authorId,
    };
  },
};
</script>

<style lang="scss" scoped>
.author-container {
  background-color: #f5f5f5;
  color: #333333;
  padding: 30rpx;
  .content-top {
    background-color: #fff;
    padding: 30rpx 20rpx;
    border-radius: 8rpx;
  }
  .author-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20rpx;
    .author-img {
      display: flex;
      align-items: center;
      font-size: 34rpx;
      font-weight: 600;
      image {
        width: 81rpx;
        height: 81rpx;
        border-radius: 8rpx;
        margin-right: 30rpx;
      }
    }
  }
  .follw {
    color: #fff;
    border-radius: 4rpx;
    font-size: 24rpx;
    width: 110rpx;
    height: 42rpx;
    background-color: $uni-color-new;
  }
  .cancel-follw {
    background-color: #e5efff;
    color: $uni-color-new;
  }
  .author-num {
    padding: 25rpx 48rpx 25rpx 77rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 4rpx;
    color: #333333;
    .num-box {
      text-align: center;
      font-size: 28rpx;
      font-weight: 600;
      .num {
        font-size: 40rpx;
        font-weight: 500;
      }
      .text {
        font-size: 24rpx;
        font-weight: 400;
      }
    }
  }
  .all-author {
    width: 186rpx;
    height: 52rpx;
    font-weight: 600;
    font-size: 24rpx;
    color: $uni-color-new;
    line-height: 52rpx;
    text-align: center;
    padding-bottom: 20rpx;
    margin: 20rpx auto;
    background-color: #e5efff;
  }
  .content-item {
    background-color: #fff;
    border-top: 4rpx solid #376cbb;
    margin-bottom: 20rpx;
    .item-title {
      font-weight: 500;
      .item-industry {
        font-size: 32rpx;
        font-weight: 600;
        margin-left: 10rpx;
        color: $uni-color-new;
        display: inline-block;
      }
    }
    .item-more {
      display: flex;
      justify-content: space-between;
      color: #cecece;
      margin: 20rpx 0 0;
    }
  }
}
</style>