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

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

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