pc--vr/src/views/tongzhi/components/comment.vue

<template>
  <div
    class="box"
    v-for="(item, idx) in newsList"
    :key="idx"
    style="margin-bottom: 20px; border-bottom: 1px solid #f0f0f0;padding-bottom: 24px;"
  >
    <div style="display: flex">
      <div>
        <img
          :src="User.avatar"
          style="width: 48px; height: 48px; border-radius: 50%"
          alt=""
        />
      </div>
      <div style="margin-left: 14px">
        <div style="width: 775px">
          <div>
            <div style="display: flex">
              <div class="title">{{ item.user.username }}</div>
              <div class="ping" style="margin-left: 8px">评论了我的文章</div>
            </div>
          </div>
          <div class="date">{{ item.created_at }}</div>
        </div>
        <div>
          <div class="content">{{ item.content }}</div>
          <div style="display: flex;margin-top: 19px;">
            <div style="cursor: pointer;" @click="like(item.source_id, item.source_type)">
              <SvgIcon name="like" :size="16" :rgap="2" :color="item.is_like == 1 ? '#00b0b0' : '#999999'" />
              <span>赞</span>
            </div>
            <div @click="todetail(item.source_id, item.source_type)" style="margin-left: 26px;cursor: pointer;">
              <SvgIcon name="message" :size="16" :rgap="2"  />
              <span>回复</span>
            </div>
          </div>
        </div>
        <div
          @click="todetail(item.source_id, item.source_type)"
          class="back"
          style="display: flex; margin-top: 19px"
        >
          <div>
            <img
              :src="item.source.image"
              style="width: 48px; height: 48px; border-radius: 50%"
              alt=""
            />
          </div>
          <div style="margin-left: 13px">
            <div class="title">{{ item.source.title }}</div>
            <div class="contena" v-html="item.source.content"></div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from "vue-router";
import { onMounted, ref } from "vue";
import * as commentApi from "~/api/comment";
import { useUser } from "~/store/user";
import * as gatherApi from "~/api/gather";
const User = useUser();
let newsList = ref([]);
const __news__ = async () => {
  try {
    const { data } = await commentApi.mylist({
      is_page: 0,
    });
    newsList.value = data;
  } catch (error) {}
};
//跳转到详情
const router = useRouter();
const todetail = (id, type) => {
  if (type == "article") {
    router.push({
      name: "articles",
      query: {
        id: id,
        type: type,
      },
    });
  } else if (type == "info") {
    router.push({
      name: "news",
      query: {
        id: id,
        type: type,
      },
    });
  } else if (type == "integral_goods") {
    router.push({
      path: "/store/pointshoping/:id",
      query: {
        id: id,
        type: type,
      },
    });
  } else if (type == "post") {
    router.push({
      name: "post",
      query: {
        id: id,
        type: type,
      },
    });
  } else if (type == "video") {
    router.push({
      name: "videos",
      query: {
        id: id,
        type: type,
      },
    });
  }
};
//点赞
const like = async (id,type) => {
  try {
    const { msg } = await gatherApi.like({
      source_type: type,
      source_id:id,
    });
    ElMessage({
      message: msg,
      type: "success",
    });
    __news__()
  } catch (error) {
    console.log("error", error);
  }
};

onMounted(__news__);
</script>

<style lang="scss" scoped>
.date {
  font-family: SFPro, SFPro;
  font-weight: 400;
  font-size: 14px;
  color: #888888;
  line-height: 16px;
  text-align: right;
  font-style: normal;
}
.back {
  background: #f7f7f7;
  border-radius: 6px;
  cursor: pointer;
  padding: 10px;
  box-sizing: border-box;
}
.ping {
  background: rgba(0, 176, 176, 0.1);
  border-radius: 2px;
  min-width: 100px;
  height: 25px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 12px;
  color: #00b0b0;
  line-height: 17px;
  text-align: center;
  font-style: normal;
  line-height: 25px;
}
.title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 16px;
  color: #333333;
  line-height: 22px;
  text-align: left;
  font-style: normal;
}
.contena {
  margin-top: 5px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 13px;
  color: #666666;
  line-height: 18px;
  text-align: left;
  font-style: normal;
  height: 30px;
  overflow: hidden;
  width: 710px;
}
</style>