horzi_rai_wxa/reportPages/authorPages/authorPages.vue

<template>
  <view class="container author-container">
    <view class="author-box">
      <view class="author-img">
        <image :src="list.ImgUrl"></image>
        <text class="">{{ list.NickName }}</text>
      </view>
      <text :class="isFollw ? 'cancel-attention' : 'attention'" @click="isAttention">
        {{ isFollw ? "取消关注" : "+关注" }}
      </text>
    </view>
    <view class="author-num">
      <view class="num-box">
        <text class="">{{ list.FllowNum }}</text>
        <text class="text">粉丝</text>
      </view>
      <view class="num-box">
        <text class="">{{ list.ArticleNum }}</text>
        <text class="text">报告</text>
      </view>
      <view class="num-box">
        <text class="">{{ list.CollectNum }}</text>
        <text class="text">获得收藏</text>
      </view>
    </view>
    <view class="content-item" v-for="item in list.List" :key="item.ArticleId">
      <view class="item-title">
        <text style="display: inline" @click="goDetail(item)">
          {{ item.Title }}
        </text>
        <text class="item-industry" @click="themeDetails(item)">&nbsp;&nbsp;&nbsp;#{{ item.IndustryName }}</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>
  </view>
</template>

<script>
import { Reports, Research, Report } from "@/config/api.js";

export default {
  data() {
    return {
      list: [],
      isFollw: false,
      goFollowShow: false,
      confirmText: "知道了",
      isCancelBtn: false,
      accounts: "",
    };
  },
  methods: {
    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() {
      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) {
      const res = await Report.collectRpt({ ArticleId: item.ArticleId });
      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.dispatch("checkHandle", "/pageMy/reportDetail/reportDetail?id=" + item.ArticleId);
    },
    //去往主题详情
    themeDetails(item) {
      this.$store.dispatch("checkHandle", "/reportPages/researchTheme/researchTheme?id=" + item.IndustrialManagementId);
    },
  },
  onLoad(options) {
    this.departmentIdDetail(options.id);
  },
};
</script>

<style lang="scss" scoped>
.author-container {
  background-color: #f5f5f5;
  color: #333333;
  padding: 30rpx;
  .author-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 30rpx;
    .author-img {
      display: flex;
      align-items: center;
      font-size: 34rpx;
      font-weight: 600;
      image {
        width: 81rpx;
        height: 81rpx;
        border-radius: 8rpx;
        margin-right: 30rpx;
      }
    }
  }
  .attention {
    flex-shrink: 0;
    padding: 7rpx 28rpx;
    border-radius: 37rpx 37rpx 37rpx 37rpx;
    color: #fff;
    background: #3385ff;
    font-weight: 400;
    font-size: 24rpx;
  }
  .cancel-attention {
    background-color: #d3d3d3 !important;
  }
  .author-num {
    padding: 25rpx 48rpx 25rpx 77rpx;
    margin-bottom: 20rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-between;
    border-radius: 4rpx;
    .num-box {
      text-align: center;
      font-size: 28rpx;
      font-weight: 600;
      .text {
        font-size: 24rpx;
        font-weight: 400;
        color: #999999;
      }
    }
  }
  .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-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>