Yi.Framework/Yi.Bbs.Vue3/src/views/Discuss.vue

<template>
  <div style="width: 1200px" class="body-div">
    <div class="header">
      <el-form :inline="true">
        <el-form-item label="标题：">
          <el-input v-model="query.title" placeholder="请输入标题"></el-input>
        </el-form-item>

        <el-form-item label="标签：">
          <el-input placeholder="搜索当下分类下的标签" />
        </el-form-item>
        <div class="form-right">
          <el-button @click="handleReset">重置</el-button>
          <el-button
            type="primary"
            @click="
              async () => {
                await loadDiscussList();
              }
            "
            >查询</el-button
          >
          <el-button
            @click="enterEditArticle"
            type="primary"
            v-hasPer="['bbs:discuss:add']"
            >分享</el-button
          >
          <el-dropdown>
            <span class="el-dropdown-link">
              展开
              <el-icon class="el-icon--right">
                <arrow-down />
              </el-icon>
            </span>

            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item>Action 1</el-dropdown-item>
                <el-dropdown-item>Action 2</el-dropdown-item>
                <el-dropdown-item>Action 3</el-dropdown-item>
                <el-dropdown-item disabled>Action 4</el-dropdown-item>
                <el-dropdown-item divided>Action 5</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-form>
    </div>

    <el-tabs v-model="activeName" @tab-change="handleClick">
      <el-tab-pane label="最新" name="new"> </el-tab-pane>
      <el-tab-pane label="推荐" name="suggest"> </el-tab-pane>
      <el-tab-pane label="最热" name="host"> </el-tab-pane>
    </el-tabs>

    <el-collapse class="collapse-list" style="background-color: #f0f2f5">
      <el-collapse-item>
        <template #title>
          <div class="collapse-top">
            已置顶主题<el-icon class="header-icon">
              <info-filled />
            </el-icon>
          </div>
        </template>
        <div class="div-item" v-for="i in topDiscussList">
          <DisscussCard :discuss="i" badge="置顶" />
        </div>
      </el-collapse-item>
    </el-collapse>
    <el-divider v-show="topDiscussList.length > 0" />

    <div class="div-item" v-for="i in discussList">
      <DisscussCard :discuss="i" />
    </div>
    <div>
      <el-pagination
        v-model:current-page="query.skipCount"
        v-model:page-size="query.maxResultCount"
        :page-sizes="[10, 20, 30, 50]"
        :background="true"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="
          async (val) => {
            await loadDiscussList();
          }
        "
        @current-change="
          async (val) => {
            await loadDiscussList();
          }
        "
      />
    </div>

    <el-empty v-if="discussList.length == 0" description="空空如也" />
    <BottomInfo />
  </div>
</template>

<script setup>
import DisscussCard from "@/components/DisscussCard.vue";
import { getList, getTopList } from "@/apis/discussApi.js";
import { ref, reactive, watch } from "vue";
import { useRoute, useRouter } from "vue-router";
import BottomInfo from "@/components/BottomInfo.vue";

//数据定义
const route = useRoute();
const router = useRouter();
const activeName = ref("new");
//主题内容
const discussList = ref([]);
//置顶主题内容
const topDiscussList = ref([]);
const total = ref(100);
const query = reactive({
  skipCount: 1,
  maxResultCount: 10,
  title: "",
  plateId: route.params.plateId,
  type: activeName.value,
});

const handleClick = async (tab, event) => {
  query.type = activeName.value;
  await loadDiscussList();
};

// onMounted(async () => {
//   if (route.query.q != undefined) {
//     query.title = route.query.q ?? "";
//     router.push("/discuss");
//   }
//   await loadDiscussList();
// });

// 重置
const handleReset = () => {
  query.skipCount = 1;
  query.maxResultCount = 10;
  query.title = "";
  query.plateId = route.params.plateId;
  query.type = activeName.value;
  loadDiscussList();
};

//加载discuss
const loadDiscussList = async () => {
  const response = await getList(query);
  discussList.value = response.data.items;
  total.value = Number(response.data.totalCount);

  //全查，无需参数
  const topResponse = await getTopList();
  topDiscussList.value = topResponse.data.items;
};

//进入添加主题页面
const enterEditArticle = () => {
  //跳转路由
  var routerPer = {
    path: "/editArt",
    query: {
      operType: "create",
      artType: "discuss",
      plateId: route.params.plateId,
    },
  };
  router.push(routerPer);
};

watch(
  () => route.query.q,
  async (val) => {
    console.log(val);
    if (val) {
      query.title = val ?? "";
      loadDiscussList();
    }
  },
  { immediate: true }
);
</script>
<style scoped>
.el-pagination {
  margin: 2rem 0rem 2rem 0rem;
  justify-content: right;
}
.body-div {
  min-height: 1000px;
}
.el-dropdown-link {
  cursor: pointer;
  color: var(--el-color-primary);
  display: flex;
  align-items: center;
}
.header {
  background-color: #ffffff;
  padding: 1rem;
  margin: 1rem 0rem;
}
.collapse-top {
  padding-left: 2rem;
}
.header .el-input {
}
.el-tabs {
  background-color: #ffffff;
  padding-left: 2rem;
}
.el-tabs >>> .el-tabs__header {
  margin-bottom: 0;
}
.div-item {
  margin-bottom: 1rem;
}

.el-form {
  --el-form-label-font-size: var(--el-font-size-base);
  display: flex;
  align-items: center;
}
.el-form-item {
  padding-top: 0.8rem;
}
.form-right {
  align-items: center;
  display: flex;
  margin-left: auto;
}
.form-right .el-button {
  margin-right: 0.6rem;
}
.header .el-input {
  width: 20rem;
}
.collapse-list >>> .el-collapse-item__header {
  border-bottom-color: #f0f2f5 !important;
}

.el-divider {
  margin: 0.5rem 0;
}
</style>