traffic-eff-app/pasb/pages/detail/index.vue

<template>
  <view class="content-info-container">
    <view class="title-container">
      <view class="title-content-text">{{ title }}</view>
      <!-- <view class="title-content-date">{{ date }}</view> -->
    </view>
    <rich-text :content="content"></rich-text>
    <view class="content-like-col" v-if="CONTENT_TYPE.news === contentType">
      <view class="icon-wrap">
        <u-icon
            :name="`${likeFlag ? 'thumb-up-fill':'thumb-up'}`"
            class="icon-base"
            @click="$u.throttle(onLikeClick,500)"
        ></u-icon>
        {{ likeCnt && likeCnt }}
      </view>
      <view class="icon-wrap">
        <u-icon
            :name="`${collectFlag ? 'star-fill':'star' }`"
            class="icon-base"
            @click="$u.throttle(onCollectClick,500)"
        ></u-icon>
        {{ collectCnt && collectCnt }}
      </view>
    </view>
  </view>
</template>

<script>
import { fetchContentDetail, fetchUsrContent, usrCollect, usrLike, usrUnCollect, usrUnLike } from '@/common/api';
import { CONTENT_TYPE } from '@/common/EnumConst';
import RichText from '@/components/RichText/index.vue';
import { authLogin, getUserInfo } from '@/util';

export default {
  name: 'content',
  components: { RichText },
  props: {},
  data() {
    return {
      CONTENT_TYPE,
      content: '',
      queryParams: {},
      title: '',
      date: '',
      contentType: '',
      likeCnt: 0,
      collectCnt: 0,
      likeFlag: false,
      collectFlag: false,
      id: '',
    };
  },
  created() {
  },
  onLoad(res) {
    // 登录返回之后的页面
    if (res) {
      this.queryParams = res;
    }
    this.getContentInfo();
    this.getUsrContent();
  },
  methods: {
    async getContentInfo() {
      const {
        data: {
          content,
          title,
          createTime,
          contentType,
          id,
          likeCnt,
          collectedCnt,
        },
      } = await fetchContentDetail(this.queryParams.id);
      this.content = content;
      this.title = title;
      this.contentType = contentType;
      this.id = id;
      this.likeCnt = likeCnt;
      this.collectCnt = collectedCnt;
      uni.setNavigationBarTitle({
        title
      })
      this.date = uni.$u.timeFormat(createTime, 'yyyy-mm-dd');
    },
    async getUsrContent() {
      const contentId = this.queryParams.id;
      const usrInfo = getUserInfo();
      if (usrInfo && usrInfo.openId) {
        const { data } = await fetchUsrContent(contentId, usrInfo.openId);
        if (data) {
          this.collectFlag = data[0]?.collectFlag === '0';
          this.likeFlag = data[0]?.likeFlag === '0';
        }
      }
    },
    onCollectClick() {
      this.collectFlag = !this.collectFlag;
      authLogin(async (usr) => {
        if (this.collectFlag) {
          this.collectCnt += 1;
          await usrCollect({
            id: this.queryParams.id,
          });
          return;
        }
        this.collectCnt -= 1;
        await usrUnCollect({
          id: this.queryParams.id,
        });
      });
    },
    onLikeClick() {
      this.likeFlag = !this.likeFlag;
      authLogin(async (usr) => {
        if (this.likeFlag) {
          this.likeCnt += 1;
          await usrLike({
            id: this.queryParams.id,
          });
          return;
        }
        this.likeCnt -= 1;
        await usrUnLike({
          id: this.queryParams.id,
        });
      });
    },
  },
};
</script>
<style lang="scss" src="./index.scss" />;