pc--vr/src/views/index/search.vue

<script setup>
import MomentLayout from "~/components/MomentLayout/index.vue";

import ChooseSubjectToTalk from "~/components/ChooseSubjectToTalk/index.vue";

import Login from "~/components/Login/Login.vue";
import { ref, onMounted, reactive, onActivated, watch } from "vue";
import * as userApi from "~/api/user";
import * as summary from "~/api/gather";
import { useRouter, useRoute } from "vue-router";
import { useUser } from "~/store/user";
import IndexTitle from "~/components/IndexTitle/index.vue";
import IndexNews from "~/components/IndexNews/index.vue";
import IndexSection from "~/components/IndexSection/index.vue";
import * as summaryApi from "~/api/gather";
import * as newsApi from "~/api/news";
import * as articleApi from "~/api/article";
import * as videoApi from "~/api/video";
import * as topicApi from "~/api/forum";
const User = useUser()
const router = useRouter();
const route = useRoute();
const keyword = ref();
if (route.query) {
  keyword.value = route.query.keyword;
}
// 获取咨询列表
let newsList = ref([]);
const __news__ = async () => {
  try {
    const { data } = await newsApi.list({
      is_page: 0,
      status: "normal",
      title: keyword.value,
    });
    newsList.value = data;
  } catch (error) {}
};
onMounted(__news__);
//获取文章列表
let articleList = ref([]);
const __articles__ = async () => {
  try {
    const { data } = await articleApi.list({
      is_page: 0,
      status: "normal",
      title: keyword.value,
    });
    articleList.value = data;
  } catch (error) {}
};
onMounted(__articles__);
//获取视频列表
let videoList = ref([]);
const __videos__ = async () => {
  try {
    const { data } = await videoApi.list({
      is_page: 0,
      status: "normal",
      title: keyword.value,
    });
    videoList.value = data;
  } catch (error) {}
};
onMounted(__videos__);
//帖子列表
let postList = ref([]);
const __post__ = async () => {
  try {
    const { data } = await topicApi.list({
      is_page: 0,
      status: "normal",
      content: keyword.value,
    });
    postList.value = data;
  } catch (error) {}
};
onMounted(__post__);
//用户列表
let userList = ref([]);
const __user__ = async () => {
  try {
    const { data } = await summaryApi.summary({
      is_page: 0,
      source_type: "user",
      type: "single",
      // is_boutique: 0,
      title: keyword.value,
    });
    userList.value = data;
  } catch (error) {}
};
onMounted(__user__);
//跳转到详情
const todetails = (id) => {
  router.push({
    name: "news",
    query: {
      id: id,
    },
  });
};
//跳转到帖子详情
const details = (id) => {
  router.push({
    name: "post",
    query: {
      id: id,
    },
  });
};
//跳转文章详情
const todetail = (id) => {
  router.push({
    name: "articles",
    query: {
      id: id,
    },
  });
};
//跳转视频详情
const detail = (id, type) => {
  router.push({
    name: "videos",
    query: {
      id: id,
      type: type,
    },
  });
};
watch(
  () => route.query,
  (newVal) => {
    console.log(newVal);
    keyword.value = newVal.keyword;
    __news__();
    __user__();
    __post__();
    __articles__();
    __videos__();
  }
);
//关注
const about = async (id) => {
  try {
    const { msg } = await userApi.userfollow({
      id: id,
    });
    ElMessage.success({
      message: msg,
      type: "success",
    });
    __user__();
    User.getUser()
  } catch (error) {}
};
const other = (id) => {
  router.push({
    path: "/rest",
    query: {
      id: id,
    },
  });
};
</script>

<template>
  <div class="index-follow-container flex-row flex-jc-sb">
    <div class="context" style="margin-top: 40px">
      <!-- 资讯 -->
      <div
        v-if="
          newsList.length > 0 &&
          (route.query.type == 'first' || route.query.type == 'second')
        "
      >
        <div>资讯</div>
        <div
          class="content-list flex-row"
          style="margin-top: 14px; margin-bottom: 10px"
        >
          <template v-for="(item, idx) in newsList" :key="idx">
            <IndexNews
              @update="todetails(item.id)"
              :title="item.title"
              :time-ago="item.published_at"
              :like-count="item.like_count || '0'"
              :comment-count="item.comment_count || '0'"
              :image="item.image"
              :is_like="item.is_like"
              :is_collect="item.is_collect"
            />
          </template>
        </div>
      </div>
      <!-- 文章 -->
      <div
        v-if="
          articleList.length > 0 &&
          (route.query.type == 'first' || route.query.type == 'fourth')
        "
      >
        <!-- <div v-if="articleList.length > 0"> -->
        <div>文章</div>
        <div
          class="content-list content-list--c2 flex-row"
          style="margin-top: 14px"
        >
          <template v-for="(item, idx) in articleList" :key="idx">
            <IndexSection
              @article="__articles__()"
              @update="todetail(item.id)"
              @other="other(item.user_id)"
              :type="!item.image ? 'article' : 'common'"
              :title="item.title"
              :time-ago="item.published_at"
              :descs="item.description"
              :topic-name="item.topic?.title"
              :author="item.user?.username"
              :author-avatar="item.user?.avatar"
              :view_count="item.view_count || 0"
              :comment_count="item.comment_count || 0"
              :collect_count="item.collect_count || 0"
              :share_count="item.share_count || 0"
              :like_count="item.like_count"
              :image="item.image"
              :is_like="item.is_like"
              :is_collect="item.is_collect"
              :source_id="item.id"
              source_type="article"
            />
          </template>
        </div>
      </div>
      <!-- 视频 -->
      <div
        v-if="
          videoList.length > 0 &&
          (route.query.type == 'first' || route.query.type == 'third')
        "
      >
        <div>视频</div>
        <div
          class="content-list content-list--c2 flex-row"
          style="margin-top: 14px"
        >
          <template v-for="(item, idx) in videoList" :key="idx">
            <IndexSection
              @video="__videos__()"
              @update="detail(item.id, 'common')"
              @other="other(item.user_id)"
              :type="!item.image ? 'article' : 'common'"
              :title="item?.title"
              :time-ago="item.published_at"
              :descs="item.description"
              :topic-name="item.topic?.title"
              :author="item.user?.username"
              :author-avatar="item.user?.avatar"
              :view_count="item.view_count || 0"
              :comment_count="item.comment_count || 0"
              :collect_count="item.collect_count || 0"
              :share_count="item.share_count || 0"
              :image="item.image"
              :is_like="item.is_like"
              :is_collect="item.is_collect"
              :source_id="item.id"
              source_type="video"
              :like_count="item.like_count"
            />
          </template>
        </div>
      </div>
      <!-- 帖子 -->
      <div
        v-if="
          postList.length > 0 &&
          (route.query.type == 'first' || route.query.type == 'firse')
        "
      >
        <div>帖子</div>
        <div
          class="content-list flex-row"
          style="margin-top: 14px; margin-bottom: 10px"
        >
          <template v-for="(item, idx) in postList" :key="idx">
            <IndexNews
              @update="details(item.id)"
              :time-ago="item.published_at"
              :like-count="item.like_count || '0'"
              :comment-count="item.comment_count || '0'"
              :image="item.images?item.images[0]:''"
              :is_like="item.is_like"
              :title="item.content"
              :is_collect="item.is_collect"
            />
            <!-- aaaaaaaaaaaaa -->
          </template>
        </div>  
      </div>
      <!-- 用户 -->
      <div
        v-if="
          userList.length > 0 &&
          (route.query.type == 'first' || route.query.type == 'six')
        "
      >
        <div>用户</div>
        <!-- <div>{{ postList }}</div> -->
        <div
          class="content-lista flex-row"
          style="margin-top: 14px; margin-bottom: 10px; column-gap: 65px"
        >
          <template v-for="(item, idx) in userList" :key="idx">
            <div class="usebox">
              <div>
                <img @click="other(item.id)" :src="item.avatar" style="width: 40px;height: 40px;border-radius: 50%;cursor: pointer;" alt="" />
                <span>{{ item.username }}</span>
              </div>
              <div
                :class="item.is_follow == 0 ? 'abt' : 'about'"
                @click="about(item.id)"
              >
                {{ item.is_follow == 0 ? "关注" : "已关注" }}
              </div>
            </div>
          </template>
        </div>
      </div>
      <!-- <div v-else style="height: 80vh; line-height: 80vh">
        <div>暂无数据</div>
      </div> -->
    </div>
  </div>
</template>

<style lang="scss" scoped>
.abt {
  width: 88px;
  height: 38px;
  background: #00b0b0;
  border-radius: 4px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 38px;
  text-align: center;
  font-style: normal;
  cursor: pointer;
}
.about {
  width: 88px;
  height: 38px;
  background: #c7cbcc;
  border-radius: 4px;
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 14px;
  color: #ffffff;
  line-height: 38px;
  text-align: center;
  font-style: normal;
  cursor: pointer;
}
.usebox {
  width: 346px;
  height: 62px;
  background: #ffffff;
  border-radius: 4px;
  padding: 11px 16px;
  box-sizing: border-box;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  align-items: center;
}
.row-gap {
  height: 20px;
}
.index-follow-container {
  width: 1440px;
  max-width: 1440px;
  // padding: 0 76px;
  column-gap: 24px;
  margin: 0 auto;

  // .context {
  //   width: 0;
  //   flex: 1;
  // }

  .right-aside {
    width: 334px;
  }
}
.content-list {
  margin-bottom: 30px;
  column-gap: 18px;
  flex-wrap: wrap;
  // height: 280px;
  overflow: hidden;

  // &--c2 {
  //   // height: 337px;
  // }
}
.content-lista {
  margin-bottom: 30px;
  column-gap: 18px;
  flex-wrap: wrap;
  min-height: 160px;

  // &--c2 {
  //   // height: 337px;
  // }
}
</style>