xwl2023/Yi.Framework
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat:首页接口对接

Browse Source
This commit is contained in:
Xwen
2023-12-12 18:10:04 +08:00
parent 41ec4907da
commit 5efe05af24
2 changed files with 239 additions and 236 deletions
Download Patch File Download Diff File Expand all files Collapse all files

345
Yi.BBS.Vue3/src/views/Discuss.vue
View File

@@ -1,221 +1,224 @@
<template> <template>
<div style="width: 1200px;" class="body-div"> <div style="width: 1200px" class="body-div">
<div class="header"> <div class="header">
<el-form :inline="true" > <el-form :inline="true">
<el-form-item label="标题：" > <el-form-item label="标题：">
<el-input v-model="query.title" placeholder="请输入标题" <el-input v-model="query.title" placeholder="请输入标题"></el-input>
></el-input> </el-form-item>
</el-form-item>
<el-form-item label="标签：">
<el-input
placeholder="搜索当下分类下的标签"
/> <el-form-item label="标签：">
</el-form-item> <el-input placeholder="搜索当下分类下的标签" />
<div class="form-right"> </el-form-item>
<div class="form-right">
<el-button>重置</el-button> <el-button>重置</el-button>
<el-button type="primary" @click="async()=>{ await loadDiscussList();}">查询</el-button> <el-button
<el-button @click="enterEditArticle" type="primary" v-hasPer="['bbs:discuss:add']">分享</el-button> type="primary"
<el-dropdown> @click="
<span class="el-dropdown-link"> async () => {
展开 await loadDiscussList();
<el-icon class="el-icon--right"> }
<arrow-down /> "
</el-icon> >查询</el-button
</span> >
<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> <template #dropdown>
<el-dropdown-menu> <el-dropdown-menu>
<el-dropdown-item>Action 1</el-dropdown-item> <el-dropdown-item>Action 1</el-dropdown-item>
<el-dropdown-item>Action 2</el-dropdown-item> <el-dropdown-item>Action 2</el-dropdown-item>
<el-dropdown-item>Action 3</el-dropdown-item> <el-dropdown-item>Action 3</el-dropdown-item>
<el-dropdown-item disabled>Action 4</el-dropdown-item> <el-dropdown-item disabled>Action 4</el-dropdown-item>
<el-dropdown-item divided>Action 5</el-dropdown-item> <el-dropdown-item divided>Action 5</el-dropdown-item>
</el-dropdown-menu> </el-dropdown-menu>
</template> </template>
</el-dropdown> </el-dropdown>
</div> </div>
</el-form>
</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.pageNum"
v-model:page-size="query.pageSize"
: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> </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> </template>
<script setup> <script setup>
import DisscussCard from '@/components/DisscussCard.vue' import DisscussCard from "@/components/DisscussCard.vue";
import {getList,getTopList} from '@/apis/discussApi.js' import { getList, getTopList } from "@/apis/discussApi.js";
import { onMounted, ref,reactive } from 'vue' import { onMounted, ref, reactive } from "vue";
import { useRoute,useRouter } from 'vue-router' import { useRoute, useRouter } from "vue-router";
import BottomInfo from '@/components/BottomInfo.vue' import BottomInfo from "@/components/BottomInfo.vue";
//数据定义 //数据定义
const route=useRoute() const route = useRoute();
const router=useRouter() const router = useRouter();
const activeName = ref('new') const activeName = ref("new");
//主题内容 //主题内容
const discussList=ref([]); const discussList = ref([]);
//置顶主题内容 //置顶主题内容
const topDiscussList = ref([]); const topDiscussList = ref([]);
const total=ref(100) const total = ref(100);
const query=reactive({ const query = reactive({
pageNum:1, skipCount: 1,
pageSize:10, maxResultCount: 10,
title:'', title: "",
plateId:route.params.plateId, plateId: route.params.plateId,
type:activeName.value type: activeName.value,
}) });
const handleClick =async (tab, event) => { const handleClick = async (tab, event) => {
query.type=activeName.value ; query.type = activeName.value;
await loadDiscussList(); await loadDiscussList();
} };
onMounted(async()=>{ onMounted(async () => {
if (route.query.q != undefined) {
if(route.query.q !=undefined) query.title = route.query.q ?? "";
{ router.push("/discuss");
query.title=route.query.q??''
router.push("/discuss")
} }
await loadDiscussList(); await loadDiscussList();
}) });
//加载discuss //加载discuss
const loadDiscussList=async()=>{ const loadDiscussList = async () => {
const response= await getList(query); const response = await getList(query);
discussList.value=response.data.items; discussList.value = response.data.items;
total.value=Number( response.data.total); total.value = Number(response.data.total);
//全查，无需参数 //全查，无需参数
const topResponse=await getTopList(); const topResponse = await getTopList();
topDiscussList.value=topResponse.data.items; topDiscussList.value = topResponse.data.items;
} };
//进入添加主题页面 //进入添加主题页面
const enterEditArticle=()=>{ const enterEditArticle = () => {
//跳转路由 //跳转路由
var routerPer= { path: '/editArt', query: { var routerPer = {
operType: 'create', path: "/editArt",
artType:'discuss', query: {
plateId:route.params.plateId, operType: "create",
}} artType: "discuss",
router.push(routerPer); plateId: route.params.plateId,
} },
};
router.push(routerPer);
};
</script> </script>
<style scoped> <style scoped>
.el-pagination .el-pagination {
{margin: 2rem 0rem 2rem 0rem;justify-content: right;} margin: 2rem 0rem 2rem 0rem;
.body-div{ justify-content: right;
min-height: 1000px;
} }
.el-dropdown-link { .body-div {
min-height: 1000px;
}
.el-dropdown-link {
cursor: pointer; cursor: pointer;
color: var(--el-color-primary); color: var(--el-color-primary);
display: flex; display: flex;
align-items: center; align-items: center;
} }
.header{ .header {
background-color: #FFFFFF; background-color: #ffffff;
padding: 1rem; padding: 1rem;
margin: 1rem 0rem ; margin: 1rem 0rem;
} }
.collapse-top .collapse-top {
{
padding-left: 2rem; padding-left: 2rem;
} }
.header .el-input .header .el-input {
{
} }
.el-tabs .el-tabs {
{ background-color: #ffffff;
background-color: #FFFFFF; padding-left: 2rem;
padding-left: 2rem;
} }
.el-tabs >>> .el-tabs__header .el-tabs >>> .el-tabs__header {
{ margin-bottom: 0;
margin-bottom: 0;
} }
.div-item .div-item {
{ margin-bottom: 1rem;
margin-bottom: 1rem;
} }
.el-form { .el-form {
--el-form-label-font-size: var(--el-font-size-base); --el-form-label-font-size: var(--el-font-size-base);
display: flex; display: flex;
align-items: center; align-items: center;
} }
.el-form-item .el-form-item {
{padding-top: 0.8rem;} padding-top: 0.8rem;
.form-right
{
align-items: center;
display: flex;
margin-left: auto;
} }
.form-right .el-button .form-right {
{ align-items: center;
margin-right: 0.6rem; display: flex;
margin-left: auto;
} }
.header .el-input .form-right .el-button {
{ margin-right: 0.6rem;
width:20rem; }
.header .el-input {
width: 20rem;
} }
.collapse-list >>> .el-collapse-item__header { .collapse-list >>> .el-collapse-item__header {
border-bottom-color: #F0F2F5 !important; border-bottom-color: #f0f2f5 !important;
} }
.el-divider .el-divider {
{
margin: 0.5rem 0; margin: 0.5rem 0;
} }
</style> </style>

130
Yi.BBS.Vue3/src/views/Index.vue
View File

@@ -1,91 +1,95 @@
<template > <template>
<div style="width: 1200px;"> <div style="width: 1200px">
<el-row :gutter="20" class="top-div"> <el-row :gutter="20" class="top-div">
<el-col :span="17"> <el-col :span="17">
<div class="scrollbar"> <div class="scrollbar">
<ScrollbarInfo /> <ScrollbarInfo />
</div> </div>
<el-row class="left-div"> <el-row class="left-div">
<el-col :span="8" v-for="i in plateList" class="plate" <el-col
:style="{ 'padding-left': i % 3 == 1 ? 0 : 0.2 + 'rem', 'padding-right': i % 3 == 0 ? 0 : 0.2 + 'rem' }"> :span="8"
<PlateCard :name="i.name" :introduction="i.introduction" :id="i.id" /> v-for="i in plateList"
class="plate"
:style="{
'padding-left': i % 3 == 1 ? 0 : 0.2 + 'rem',
'padding-right': i % 3 == 0 ? 0 : 0.2 + 'rem',
}"
>
<PlateCard
:name="i.name"
:introduction="i.introduction"
:id="i.id"
/>
</el-col> </el-col>
<el-col :span="24" v-for="i in discussList"> <el-col :span="24" v-for="i in discussList">
<DisscussCard :discuss="i" /> <DisscussCard :discuss="i" />
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<el-empty v-show="discussList.length <= 0" description="推荐位置，空空如也" /> <el-empty
v-show="discussList.length <= 0"
description="推荐位置，空空如也"
/>
</el-col> </el-col>
</el-row> </el-row>
</el-col> </el-col>
<el-col :span="7"> <el-col :span="7">
<el-row class="right-div"> <el-row class="right-div">
<el-col :span="24"> <el-col :span="24">
<el-carousel trigger="click" height="150px"> <el-carousel trigger="click" height="150px">
<el-carousel-item v-for="item in bannerList"> <el-carousel-item v-for="item in bannerList">
<div class="carousel-font" :style="{ color: item.color }">{{ item.name }}</div> <div class="carousel-font" :style="{ color: item.color }">
<el-image style="width: 100%; height: 100%" :src="item.logo" fit="cover" /> {{ item.name }}
</div>
<el-image
style="width: 100%; height: 100%"
:src="item.logo"
fit="cover"
/>
</el-carousel-item> </el-carousel-item>
</el-carousel> </el-carousel>
</el-col> </el-col>
<el-col :span="24" > <el-col :span="24">
<InfoCard header="访问统计" class="VisitsLineChart" text="详情"> <InfoCard header="访问统计" class="VisitsLineChart" text="详情">
<template #content> <template #content>
<VisitsLineChart /> <VisitsLineChart />
</template> </template>
</InfoCard> </InfoCard>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<InfoCard header="简介" text="详情"> <InfoCard header="简介" text="详情">
<template #content> <template #content>
<div class="introduce"> <div class="introduce">
没有什么能够阻挡，人类对代码<span style="color: #1890ff"
没有什么能够阻挡，人类对代码<span style="color: #1890ff;">优雅</span>的追求 >优雅</span
>的追求
</div> </div>
</template> </template>
</InfoCard> </InfoCard>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<InfoCard :items=items header="本月排行" text="更多"> <InfoCard :items="items" header="本月排行" text="更多">
<template #item="temp"> <template #item="temp">
<AvatarInfo> <AvatarInfo>
<template #bottom> <template #bottom> 本月积分：290 </template>
本月积分：290
</template>
</AvatarInfo> </AvatarInfo>
</template> </template>
</InfoCard> </InfoCard>
</el-col> </el-col>
<el-col :span="24"> <el-col :span="24">
<InfoCard :items=items header="推荐好友" text="更多"> <InfoCard :items="items" header="推荐好友" text="更多">
<template #item="temp"> <template #item="temp">
<AvatarInfo /> <AvatarInfo />
</template> </template>
</InfoCard> </InfoCard>
</el-col> </el-col>
<el-col :span="24" style="background: transparent">
<el-col :span="24" style=" background: transparent;">
<BottomInfo /> <BottomInfo />
</el-col> </el-col>
</el-row> </el-row>
@@ -95,60 +99,60 @@
</template> </template>
<script setup> <script setup>
import DisscussCard from '@/components/DisscussCard.vue' import { onMounted, ref, reactive } from "vue";
import InfoCard from '@/components/InfoCard.vue' import DisscussCard from "@/components/DisscussCard.vue";
import PlateCard from '@/components/PlateCard.vue' import InfoCard from "@/components/InfoCard.vue";
import ScrollbarInfo from '@/components/ScrollbarInfo.vue' import PlateCard from "@/components/PlateCard.vue";
import AvatarInfo from '@/components/AvatarInfo.vue' import ScrollbarInfo from "@/components/ScrollbarInfo.vue";
import BottomInfo from '@/components/BottomInfo.vue' import AvatarInfo from "@/components/AvatarInfo.vue";
import VisitsLineChart from '@/components/echars/VisitsLineChart.vue' import BottomInfo from "@/components/BottomInfo.vue";
import VisitsLineChart from "@/components/echars/VisitsLineChart.vue";
import { access } from '@/apis/accessApi.js' import { access } from "@/apis/accessApi.js";
import { getList } from '@/apis/plateApi.js' import { getList } from "@/apis/plateApi.js";
import { getList as bannerGetList } from '@/apis/bannerApi.js' import { getList as bannerGetList } from "@/apis/bannerApi.js";
import { getList as discussGetList } from '@/apis/discussApi.js' import { getList as discussGetList } from "@/apis/discussApi.js";
import { onMounted, ref, reactive } from 'vue'
var plateList = ref([]); var plateList = ref([]);
var discussList = ref([]); var discussList = ref([]);
var bannerList = ref([]); var bannerList = ref([]);
const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }] const items = [{ user: "用户1" }, { user: "用户2" }, { user: "用户3" }];
//主题查询参数 //主题查询参数
const query = reactive({ const query = reactive({
pageNum: 1, skipCount: 1,
pageSize: 10, maxResultCount: 10,
isTop: true isTop: true,
}); });
//初始化 //初始化
onMounted(async () => { onMounted(async () => {
await access(); access();
plateList.value = (await getList()).data.items; const { data: plateData } = await getList();
discussList.value = (await discussGetList(query)).data.items; plateList.value = plateData.items;
bannerList.value = (await bannerGetList()).data.items const { data: discussData } = await discussGetList(query);
discussList.value = discussData.items;
const { data: bannerData } = await bannerGetList();
bannerList.value = bannerData.items;
}); });
</script> </script>
<style scoped > <style scoped>
.introduce { .introduce {
color: rgba(0, 0, 0, .45); color: rgba(0, 0, 0, 0.45);
font-size: small; font-size: small;
} }
.plate { .plate {
background: transparent !important; background: transparent !important;
} }
.left-div .el-col { .left-div .el-col {
background-color: #FFFFFF; background-color: #ffffff;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
.right-div .el-col { .right-div .el-col {
background-color: #FFFFFF; background-color: #ffffff;
margin-bottom: 1rem; margin-bottom: 1rem;
} }
@@ -159,9 +163,7 @@ onMounted(async () => {
left: 10%; left: 10%;
} }
.top-div { .top-div {
padding-top: 0.5rem; padding-top: 0.5rem;
} }
@@ -169,9 +171,7 @@ onMounted(async () => {
display: block; display: block;
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
} }
.VisitsLineChart >>> .el-card__body .VisitsLineChart >>> .el-card__body {
{
padding: 0.5rem; padding: 0.5rem;
} }
</style> </style>