本软件前端使用vue开发,以下为各个组件的说明。
提供一个多页面的切换,每个页面对应不同的功能模块,如主页、选课、资源、市场、帮助等。用户可以通过导航栏在不同页面之间切换。
valCol 是一个字符串,用于存储当前选中的功能页面的名称。初始值为 '主页',表示默认显示主页面。当用户点击导航栏中的链接时,这个值会更新为对应的页面名称,从而切换显示相应的内容。
<div style="z-index: 2000;">
<img src="../../public/img/sustech-logo-cn.png"
style="z-index: 1; position: absolute; top: 20px; left: 20px; max-width: 20%" alt="">
<div class="container">
<nav class="navbar">
<div @click="changeCol('管理员界面')" v-if="this.$usr.isadmin">
<a class="change-color">管理员界面</a>
</div>
<div v-for="(item, index) in Fun" :key="index" @click="changeCol(item)" :id="item">
<a class="change-color">{{ item }}</a>
</div>
</nav>
</div>
</div>
.container {
display: flex;
justify-content: flex-end;
}
.navbar {
font-family: Cool;
background-color: rgba(255, 255, 255, 0.3);
display: flex;
margin-left: auto;
margin-right: 1em;
margin-top: 1em;
padding: 1em;
border-radius: 1em;
width: 50%;
min-width: 0;
}
.navbar div {
margin-right: 1em;
margin-left: 1em;
cursor: pointer;
flex-grow: 1;
flex-shrink: 1;
white-space: nowrap;
}
.navbar a {
font-size: 20px;
white-space: nowrap;
}
<div>
<div style="margin-top: 2em;">
<div style="display: flex; justify-content: center;" v-if="this.valCol === '管理员界面'">
<ManagerView style="z-index: 1000"/>
</div>
<div style="display: flex; justify-content: center;" v-if="this.valCol === '选课'">
<CourseView style="z-index: 1000"/>
</div>
<div v-if="this.valCol === 'ChatGPT'" style="display: flex; justify-content: center">
<AiView style="z-index: 1000"/>
</div>
<div v-if="this.valCol === '资源'" style="display: flex; justify-content: center">
<ResourceView style="z-index: 1000"/>
</div>
<div v-if="this.valCol === '市场'">
<MarketView style="z-index: 1000"/>
</div>
<div v-if="this.valCol === '设置'">
<SettingView style="z-index: 1000"/>
</div>
<div v-if="this.valCol === '主页'">
<HomePageView style="z-index: 1000"/>
</div>
<div v-if="this.valCol === '寻求帮助'" style="display: flex; justify-content: center">
<HelpView style="z-index: 1000"/>
</div>
</div>
</div>
.bg-home {
background-image: linear-gradient(rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.5)), url("../../public/img/title.jpeg");
background-size: cover;
background-position: center center;
}
.bg-home::before {
content: '';
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(255, 255, 255, 0.5); /* 半透明的白色 */
z-index: 1;
}
section {
//background-image: url("../assets/b2.jpg");
//background-size: cover;
//min-height: 100vh;
max-width: 100vw;
box-sizing: border-box; /* 确保padding和border包含在宽度内 */
display: flex;
//background-repeat: no-repeat;
//background-attachment: fixed;
}
<div class="flower">
<img style="max-width: 10%" src="../assets/buble1.png" alt=""/>
<img style="max-width: 10%" src="../assets/buble1.png" alt=""/>
<img style="max-width: 15%" src="../assets/buble1.png" alt=""/>
<img style="max-width: 13%" src="../assets/buble1.png" alt=""/>
<img style="max-width: 13%" src="../assets/buble1.png" alt=""/>
<img style="max-width: 16%" src="../assets/buble1.png" alt=""/>
<img style="max-width: 7%" src="../assets/buble1.png" alt=""/>
<img style="max-width: 8%" src="../assets/buble1.png" alt=""/>
</div>
.flower {
position: fixed; /* 固定位置 */
bottom: 0; /* 从底部开始 */
width: 100%;
height: 100vh;
overflow: hidden;
z-index: 1;
pointer-events: none;
}
.flower img {
position: absolute;
}
@keyframes animate {
0% {
top: 110%;
transform: translateX(20px) rotate(0deg);
}
10% {
opacity: 1;
}
20% {
transform: translateX(-20px) rotate(10deg);
}
40% {
transform: translateX(-20px) rotate(5deg);
}
60% {
transform: translateX(20px) rotate(8deg);
}
80% {
transform: translateX(-20px) rotate(-10deg);
}
100% {
opacity: 0;
top: -10px;
transform: translateX(20px) rotate(-7deg);
}
}
.flower img:nth-child(1) {
left: 0;
animation: animate 20s linear infinite;
}
.flower img:nth-child(2) {
left: -1%;
animation: animate 14s -2s linear infinite;
}
.flower img:nth-child(3) {
left: -3%;
animation: animate 12s -3s linear infinite;
}
.flower img:nth-child(4) {
left: -5%;
animation: animate 15s -2s linear infinite;
}
.flower img:nth-child(5) {
left: 85%;
animation: animate 18s -1s linear infinite;
}
.flower img:nth-child(6) {
left: 80%;
animation: animate 12s -1s linear infinite;
}
.flower img:nth-child(7) {
left: 82%;
animation: animate 14s -2s linear infinite;
}
.flower img:nth-child(8) {
left: 75%;
animation: animate 15s -1s linear infinite;
}
向管理员提供批量修改学生绩点的功能
<nav class="course-record fun" style="display: flex; grid-gap: 0.2em;">
<div @click="changeCol(item);" class="infun" :class="{ 'selected': this.Col===item}"
:id="item" v-for="(item, index) in Fun" :key="index">
<a>
{{ item }}
</a>
</div>
</nav>
<div style="background: rgba(255, 255, 255, 0.9);">
<div class="higher">
<label for="fileInput" @change="handleFileChange()" style="margin-top: 2em" class="lab">上传表格</label>
<div v-for="(item,key) in data" :key="key" style="padding: 1em;">
{{ item.courseName }}
<button @click=get_exl(item)>获取表格</button>
</div>
<input type="file" id="fileInput" name="file" accept=.xlsx style="display: none"
@change="handleFileChange($event, 'image')">
</div>
</div>
async
handleFileChange()
{
var formdata = new FormData();
var input = document.getElementById('fileInput');
var file = input.files[0];
if (file) {
formdata.append('file', file);
await this.$post('chosen/setMultiChosenScore', null, formdata, 'g', '上传成功', 'success');
}
}
async
get_exl(item)
{
if (item) {
const response = await fetch('api/chosen/getXLSX?courseId=' + item.courseId);
var data = null;
console.log(response);
if (response.ok) {
data = await response.blob();
} else {
return;
}
if (data) {
const Url = URL.createObjectURL(data);
const a = document.createElement('a');
a.href = Url;
a.setAttribute('download', item.courseId + '.xlsx');
document.body.appendChild(a);
a.click();
document.body.removeChild(a);
}
}
}
变量名 | 类型 | 默认值 | 描述 |
---|
iniFun | Array | ['已选', '通识必修选课', '通识选修选课', '培养方案内课程', '非培养方案内课程', '重修选课', '其它功能'] | 初始功能列表,包含所有可能的功能选项。 |
canChose | Array | ['通识必修选课', '通识选修选课', '培养方案内课程', '非培养方案内课程', '重修选课'] | 可选功能列表,只包含可以选择的课程类型。 |
Fun | Array | [] | 当前显示的功能列表,初始为空,挂载后与iniFun 同步。 |
moreFun | Array | ['多限制筛选', '获取智能课表', '返回'] | 额外功能列表,包含更多选项和返回选项。 |
Col | String | '已选' | 当前选中的功能项,默认值为'已选'。 |
tableData | Array | [{id: 10, name: 'Item 1'}, {id: 2, name: 'Item 2'}, {id: 3, name: 'Item 3'}, {id: 4, name: 'Item 4'}, {id: 5, name: 'Item 5'}] | 表格数据,包含一些示例项目。 |
point | Number | 0 | 用于指示当前选择的课程索引点。 |
chosenCourse | String | '' | 当前选择的课程名称,默认为空。 |
data | Any | null | 用于存储从服务器获取的数据,初始值为null。 |
searchInf | String | '' | 用户输入的搜索信息,默认为空字符串。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
getAll | 无 | Promise | 清空表格数据,调用后端接口获取所有课程列表,并将返回的数据存储在tableData 中。 |
getOther | 无 | Promise | 清空表格数据,调用后端接口获取特定类型的课程(专业核心课程),并将返回的数据存储在tableData 中。 |
changeCol | v (String) | void | 根据传入的功能名称(v )改变当前选中的功能项,并更新功能列表。如果选择的是“其它功能”,则显示更多功能;如果选择“返回”,则返回初始功能列表。 |
search | 无 | Promise | 清空表格数据,调用后端接口根据用户输入的关键词搜索课程,并将返回的数据存储在tableData 中。 |
<nav class="course-record fun" style="display: flex; grid-gap: 0.2em;">
<div @click="changeCol(item);" class="infun" :class="{ 'selected': this.Col===item}"
:id="item" v-for="(item, index) in Fun" :key="index">
<a>
{{ item }}
</a>
</div>
</nav>
<div v-if="Col==='多限制筛选'" style="margin-top: 1em;">
<FilterView></FilterView>
</div>
<div v-if="Col==='获取智能课表'">
<IntelTbView></IntelTbView>
</div>
<div v-if="Col==='已选'" class="higher">
<DeChoseTable></DeChoseTable>
</div>
<div v-if="canChose.includes(Col)">
<div class="sb">
<input v-model="searchInf" placeholder="输入搜索信息" class="inputBoxa" style="z-index: 0">
<button @click="search()" style="z-index: 1">查询</button>
</div>
<ChoseTable :tableData="tableData" @refresh="getOther"></ChoseTable>
</div>
显示可选课表
变量名 | 类型 | 默认值 | 描述 |
---|
tableData | Array | 由父组件传递 | 表格数据,包含课程信息的数组。 |
CourseHeader | Array | ['课程名', '评分', '课程编码', '课程性质', '授课语言', '学时', '学分', '课程类别', '课程班组', '授课信息', '开课时间', '容量', '已选'] | 表格的表头信息。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
chose | row (Object) | void | 根据传入的行数据,调用后端接口添加选课,并触发refresh 事件以刷新表格数据。 |
mounted | 无 | void | 在组件挂载后,延迟500毫秒后显示导航栏项目。 |
<div class="navbar-item">
<table id="tb" class="table">
<thead>
<tr>
<th v-for="(item, index) in CourseHeader" :key="index" class="table-item">{{ item }}</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td>{{ row.courseName }}</td>
<td>{{ row.courseCount }}</td>
<td>{{ row.courseId }}</td>
<td>{{ row.courseKind }}</td>
<td>{{ row.courseLanguage }}</td>
<td>{{ row.courseLast }}</td>
<td>{{ row.courseScore }}</td>
<td>{{ row.courseType }}</td>
<td>{{ row.scheduleClass }}</td>
<td>{{ row.scheduleInfo }}</td>
<td>{{ row.scheduleTerm }}</td>
<td>{{ row.scheduleTotal }}</td>
<td>{{ row.scheduleHave }}</td>
<td>
<div style="width: 100%;">
<input :ref="row.scheduleId"
style=" background: rgba(255, 255, 255, 0.2); border-radius: 5px; width: 70%"
placeholder="积分">
<button @click="chose(row)" style="width: 50%;" class="button">确认选课</button>
</div>
</td>
</tr>
</tbody>
</table>
</div>
多限制筛选
变量名 | 类型 | 默认值 | 描述 |
---|
selectedOptions | Object | {} | 用户选择的搜索选项。 |
searData | Array | [] | 搜索表单的数据,包含所有可选项。 |
data | Any | null | 存储从后端获取的数据。 |
tableData | Array | [] | 表格数据,包含搜索结果。 |
showtb | Boolean | false | 控制表格是否显示。 |
load | Boolean | true | 控制加载状态的显示。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
getSearch | 无 | void | 调用后端接口根据selectedOptions 获取搜索结果,并将返回的数据存储在tableData 中。 |
getSearchData | 无 | void | 调用后端接口获取搜索表单的选项数据,并将返回的数据存储在searData 中,同时更新加载状态。 |
mounted | 无 | void | 在组件挂载后,调用getSearchData 函数获取搜索表单数据,并初始化tableData 为空数组。 |
<div v-if="!showtb" id="sear" v-loading="load" style="background: rgba(255, 255, 255, 0.4);">
<div style="display: flex; flex-wrap: wrap;">
<div v-for="(value, key) in searData" :key="key" style="display: flex; align-items: center; margin: 1em;">
<label style="margin-right: 0.5em;">
{{ key }}
</label>
<select :name=key v-model="selectedOptions[key]" style="margin-left: 0.5em;">
<option :value="null">空</option>
<option v-for="(item,index) in value" :key="index">
{{ item }}
</option>
</select>
</div>
</div>
<div class="form-group">
<label> 忽略0余量课程
<span class="switch">
<input type="checkbox" v-model="selectedOptions['courseHave']"/>
</span>
</label>
</div>
</div>
<button @click="getSearch(); showtb=true;" name="s">查询</button>
<div id="tb" v-if="showtb">
<button @click="showtb=false;">重新查询</button>
<ChoseTable :tableData="tableData"/>
</div>
获取智能课表
变量名 | 类型 | 默认值 | 描述 |
---|
preAdd | Array | [] | 用于存储待添加课程的数组。 |
CourseHeader | Array | ['课程名', '评分', '课程编码', '课程性质', '授课语言', '学时', '学分', '课程类别', '课程班组', '授课信息', '开课时间', '容量', '已选'] | 表格的表头信息。 |
chosenCourse | Object | null | 当前选中的课程。 |
tableData | Array | [] | 表格数据,包含课程信息的数组。 |
conlict | Object | {时间: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'], 课程时间: ['1-2', '3-4', '5-6', '7-8', '9-10', '11-12']} | 冲突时间和课程时间的选项。 |
table | Object | {} | 用于存储课表数据的对象。 |
conflictRes | Object | {课程时间: '', 时间: ''} | 当前选中的冲突时间和课程时间。 |
notime | String | '' | 用于存储不冲突时间的字符串。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
getOther | 无 | Promise | 清空表格数据,调用后端接口获取特定类型的课程(专业核心课程),并将返回的数据存储在tableData 中。 |
getIntble | 无 | void | 处理preAdd 中的课程冲突数据,发送到后端接口获取智能课表,并将结果存储在table 中。 |
sureTime | 无 | void | 根据选择的冲突时间和课程时间更新notime ,并将当前选中的课程和冲突时间添加到preAdd 中,同时重置选择的冲突时间。 |
ini | 无 | void | 初始化table 对象,用于存储课表数据。 |
chose | id (Number) | void | 调用后端接口选择课程,传递课程ID和用户ID。 |
manychose | 无 | void | 遍历课表数据,批量选择课程,并显示操作成功的信息。 |
mounted | 无 | void | 组件挂载后,调用getOther 获取课程数据,初始化课表视图,调用ini 函数初始化课表数据。 |
<div>
已选课程:
<a v-for="(item, key) in preAdd" :key="key" style="margin: 1em"> {{ item }} </a>
</div>
<button id="getTb" @click="getIntble(); this.$toggleVisibility('ft2');">确认</button>
<table id="tb" class="table">
<thead>
<tr>
<th v-for="(item, index) in CourseHeader" :key="index" class="table-item">{{ item }}</th>
<th></th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td>{{ row.courseName }}</td>
<td>{{ row.courseCount }}</td>
<td>{{ row.courseId }}</td>
<td>{{ row.courseKind }}</td>
<td>{{ row.courseLanguage }}</td>
<td>{{ row.courseLast }}</td>
<td>{{ row.courseScore }}</td>
<td>{{ row.courseType }}</td>
<td>{{ row.scheduleClass }}</td>
<td>{{ row.scheduleInfo }}</td>
<td>{{ row.scheduleTerm }}</td>
<td>{{ row.scheduleTotal }}</td>
<td>{{ row.scheduleHave }}</td>
<td>
<button @click="this.chosenCourse=row; this.$toggleVisibility('ft1');"> 添加</button>
</td>
</tr>
</tbody>
</table>
<div class="floating-table" id="ft1">
<span class="close" @click="this.$toggleVisibility('ft1');">×</span>
<div v-for="(value,key) in conlict" :key="key" style="margin: 1em;">
<label>
排除{{ key }}
</label>
<select :id="key" v-model="conflictRes[key]">
<option :value="null" selected disabled hidden>请选择</option>
<option :id="item" v-for="(item,index) in value" :key="index">
{{ item }}
</option>
</select>
</div>
<button id="sure" @click="sureTime">确定</button>
<button @click="notime=notime+';';conflictRes.课程时间=null;conflictRes.时间=null;">继续添加</button>
</div>
<div class="floating-table" id="ft2" style="width: 100%;">
<span class="close" @click="this.$toggleVisibility('ft2');">×</span>
课表搜索结果:
<div>
<div class="schedule-header">
<div style="border: 1px solid black;">时间\星期</div>
<div v-for="(val, key) in this.conlict.时间" :key="key" style="border: 1px solid black;">
{{ val || '' }}
</div>
</div>
<div v-for="(val,key) in table" :key="key">
<div class="schedule-header">
<div style="border: 1px solid black;">{{key}}</div>
<div v-for="(course, day) in val" :key="day" style="border: 1px solid black;">
<div v-for="(inf, id) in course" :key="id" style="font-size: 12px;white-space: pre-wrap; ">
{{ inf || ' ' }}
</div>
</div>
</div>
</div>
</div>
<button @click="manychose()" id="ONE_CLICK_BUTTON_ID">一键选课</button>
<button @click="this.$toggleVisibility('ft2');">返回</button>
</div>
变量名 | 类型 | 默认值 | 描述 |
---|
CourseHeader | Array | ['课程名', '评分', '课程编码', '课程性质', '授课语言', '学时', '学分', '课程类别', '课程班组', '授课信息', '开课时间', '容量', '已选'] | 表头信息,描述表格中的列名。 |
tableData | Array | [] | 存储从服务器获取的表格数据。 |
load | Boolean | true | 控制加载状态的显示。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
getChosen | 无 | Promise | 获取用户选择的课程数据并存储在tableData 中。 |
deChosen | row (Object) | Promise | 退课功能,删除选中的课程。 |
changepoint | row (Object) | void | 修改已选择课程的积分。 |
mounted | 无 | void | 组件挂载后调用getChosen 获取数据,并显示导航栏项目。 |
<table id="tb" class="table navbar-item" v-loading="load">
<thead>
<tr>
<th v-for="(item, index) in CourseHeader" :key="index" class="table-item">{{ item }}</th>
<th>已投分数</th>
</tr>
</thead>
<tbody>
<tr v-for="(row, index) in tableData" :key="index">
<td style="font-size: 18px">{{ row.courseName }}</td>
<td>{{ row.courseCount }}</td>
<td>{{ row.courseId }}</td>
<td>{{ row.courseKind }}</td>
<td>{{ row.courseLanguage }}</td>
<td>{{ row.courseLast }}</td>
<td>{{ row.courseScore }}</td>
<td>{{ row.courseType }}</td>
<td>{{ row.scheduleClass }}</td>
<td>{{ row.scheduleInfo }}</td>
<td style="width: 9%">{{ row.scheduleTerm }}</td>
<td>{{ row.scheduleTotal }}</td>
<td>{{ row.scheduleHave }}</td>
<td>{{ row.chosenPoint }}</td>
<td style="width: 5em">
<div style="width: 100%">
<input :ref="row.chosenId"
style="border: none; background: rgba(255, 255, 255, 0.2); border-radius: 5px; width: 70%"
placeholder="积分" name="积分">
<button name="c" @click="changepoint(row)" style="width: 60%;">修改</button>
</div>
</td>
<td style="width: 0.5em">
<button style="width: 50%" @click="deChosen(row)" name="d"
>退课
</button>
</td>
</tr>
</tbody>
</table>
变量名 | 类型 | 默认值 | 描述 |
---|
userInput | String | '' | 用户输入的消息内容。 |
conversation | Array | [] | 存储用户和AI之间的对话记录。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
callAI | 无 | void | 发送用户输入到AI代理API,并将响应结果添加到对话记录中。 |
submit | 无 | void | 调用callAI 函数并清空输入框内容,同时将页面滚动到指定位置。 |
<div>
<div class="container" style=" top: 0; width: 100%; min-height: 60vh; overflow-y: auto">
<div v-for="(item, index) in conversation" :key="index" style="margin-left: 1em">
<div class="hover">
<p>you: </p>
<p style="font-size: 25px">{{ item.usr }}</p>
</div>
<div class="hover">
<p>gpt: </p>
<p style="font-size: 25px">{{ item.gpt }}</p>
</div>
</div>
</div>
</div>
<div style="width: 100%; bottom: 10%; display: flex; margin-top: 2em">
<input v-model="userInput" @keydown.enter="submit"
style="position: fixed; bottom: 0; width: 100%; font-size: 19px" id="answer-input" type="text"
placeholder="Message ChatGPT......">
</div>
查看并下载电子资料
变量名 | 类型 | 默认值 | 描述 |
---|
page | Object | { current: 1, size: 10 } | 分页信息,包含当前页码和每页显示的记录数。 |
Header | Array | ['title', 'author', 'publisher', 'publicationDate', 'description'] | 表头信息,描述表格中的列名。 |
data | Any | null | 存储从服务器获取的原始数据。 |
Data | Array | null | 存储处理后的数据记录,用于展示在表格中。 |
Book | Object | { pic: null, val: { title: '', author: '', publisher: '', publicationDate: '', description: '' } } | 存储当前选中的书籍详细信息和图片。 |
detail | Boolean | false | 控制是否显示书籍详情。 |
toShow | Array | ['title', 'author', 'publisher', 'publicationDate', 'description'] | 需要显示的书籍详细信息字段。 |
searchInf | String | '' | 存储用户输入的搜索关键词。 |
load | Boolean | true | 控制加载状态的显示。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
listAll | current (Number) | Promise | 获取当前页的所有记录,并更新Data 和page 信息。 |
showBook | en (Object) | void | 显示选中的书籍详情,并将图片和详细信息存储在Book 对象中。 |
Download | en (Object) | Promise | 下载选中的书籍,并在下载完成后显示提示信息。 |
getContent | content (String) | String | 截断并返回处理后的书籍描述内容,仅返回第一行或截断后的内容。 |
search | 无 | Promise | 根据用户输入的关键词搜索书籍,并更新Data 。 |
mounted | 无 | void | 组件挂载后调用listAll 获取第一页数据,并显示导航栏项目。 |
<div class="sb">
<input class="search-input" v-model="searchInf" placeholder="输入搜索信息">
<button @click="search();searchInf='';">查询</button>
</div>
<div class="border1 navbar-item">
<div v-for="(val,key) in this.Data" :key="key" class="bigger"
style="margin: 1em;display: flex;flex-direction: row;align-items: center;">
<img :id="val.id" style="width: 10em; height: 15em;z-index: -1" alt="" v-lazy="'api/document/getImg/' + val.id">
<div style="margin: 1em;">
<div id="tit" @click="showBook(val);this.$toggleVisibility('popup');" style="margin-bottom: 1em; font-weight: bold; cursor: pointer;">
{{ val.title }}
</div>
<div v-if="val.author!=='null'" style="font-size: 20px;">
{{ val.author }}
</div>
<div v-if="val.description!=='null'">
{{ this.getContent(val.description) }}
</div>
</div>
<button style=" margin-left: auto;" @click="Download(val)">下载</button>
</div>
</div>
<div class="floating-table" id="popup">
<span class="close" @click="this.$toggleVisibility('popup');">×</span>
<div style="display: flex; flex-direction:row; ">
<img :src="Book.pic" style="width: 10em; height: 15em; margin-right: 1em" alt="">
<div>
<div v-for="(val,key) in this.toShow" :key="key" style="margin-bottom: 1em">
{{ val }}: {{ Book.val[val] }}
</div>
</div>
</div>
</div>
论坛
变量名 | 类型 | 默认值 | 描述 |
---|
page | Object | { current: 1, size: 10 } | 分页信息,包含当前页码和每页显示的记录数。 |
Header | Array | ['标题', '部分内容', '作者', '时间', '评论数', '点赞数'] | 表头信息,描述表格中的列名。 |
Data | Array | [{id: 10, name: 'Item 1'}, {id: 2, name: 'Item 2'}, ...] | 存储热度排行榜数据。 |
timeData | Array | [] | 存储按时间排序的帖子数据。 |
timeuserImg | Object | {} | 存储按时间排序的帖子用户头像。 |
data | Any | null | 存储从服务器获取的原始数据。 |
Fdetail | Boolean | false | 控制是否显示详细信息视图。 |
chosenPost | Object | null | 存储选中的帖子信息。 |
order | String | '点赞' | 用于控制热度排行榜的排序方式。 |
userImg | Object | {} | 存储热度排行榜的用户头像。 |
searchInf | String | '' | 存储用户输入的搜索关键词。 |
back | Boolean | false | 控制是否显示返回按钮。 |
loading | Boolean | true | 控制按时间排序的帖子加载状态的显示。 |
hotloading | Boolean | true | 控制热度排行榜加载状态的显示。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
getimg | en (Number) | Promise | 获取用户头像的Base64数据,并返回完整的图片URL。 |
get_timeTb | current (Number) | Promise | 获取按时间排序的帖子数据,并更新timeData 和分页信息,同时获取每个帖子的用户头像。 |
getTb | 无 | Promise | 获取热度排行榜数据,并更新Data ,同时获取每个帖子的用户头像。 |
getHeader | content (String), n (Number) | String | 截断并返回处理后的帖子标题内容,仅返回第一行或截断后的内容。 |
getContent | content (String), n (Number) | String | 截断并返回处理后的帖子内容,仅返回第一行或截断后的内容。 |
search | 无 | Promise | 根据用户输入的关键词搜索帖子,并更新timeData 。 |
refresh | 无 | void | 刷新热度排行榜和按时间排序的帖子数据。 |
mounted | 无 | void | 组件挂载后调用getTb 和get_timeTb 获取初始数据,并显示导航栏项目。 |
<div class="sb">
<input class="search-input" v-model="searchInf" placeholder="输入搜索信息">
<button @click="search(); back=true;">查询</button>
</div>
<div style="display: flex; justify-content: center; align-items: center; flex-direction: column; color: coral">
<div style="font-size: 35px; font-family: Cool; cursor: pointer" @click="getTb">
{{ this.order }}榜
</div>
</div>
<div style="display: flex; justify-content: center; align-items: center; width: 100%">
<img v-if="index === 0" style="max-width: 20%" src="/img/crown.png">
<img v-else-if="index === 1" style="max-width: 50%" src="/img/crown2.png">
<img v-else-if="index === 2" style="max-width: 50%" src="/img/crown3.png">
<img v-else style="max-width: 50%" src="/img/border2.png">
</div>
<div v-for="(row, index) in Data" :key="index" style="display: flex; flex-direction: column;" class="higher">
<div>
<div class="hoverable-content" style="font-weight: bold;font-size: 15px"
@click="chosenPost=row; this.Fdetail=true;">
{{ getHeader(row.commentContent, 20) }}
</div>
<div style="display: flex; flex-direction: row;">
<img style="object-fit: cover;width: 20px;height: 20px" :src="this.userImg[row.userId]" alt="">
<div style="font-size: 15px; margin-left: 0.5em">
{{ row.userName }}
</div>
</div>
</div>
<div @click="chosenPost=row; this.Fdetail=true;" style="font-size: 15px" class="hoverable-content">
{{ getContent(row.commentContent, 50) }}
</div>
<div style="align-self: flex-end; margin-left: auto;" class="PL">
<div style="display: flex;">
<div style="display: flex; margin-right: 1em; " class="PL">
<div class="hoverable-content">
👍:
</div>
<div>
{{ row.commentLikes }}
</div>
</div>
<div style="display: flex;" class="PL">
<div class="hoverable-content">
评论:
</div>
<div>
{{ row.commentReplies }}
</div>
</div>
</div>
<div>
{{ this.$dealtime(row.commentTime) }}
</div>
</div>
</div>
上传资料
变量名 | 类型 | 默认值 | 描述 |
---|
Header | Array | ['title', 'author', 'publisher', 'publicationDate', 'description'] | 表头信息,描述表格中的列名。 |
UpData | Object | {} | 存储要上传的资料信息。 |
fileInputName | String | '' | 存储上传的资料文件名。 |
imgInputName | String | '' | 存储上传的封面图片文件名。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
handleFileChange | event (Event), type (String) | void | 处理文件选择事件,根据文件类型设置相应的文件名。 |
up | 无 | void | 上传资料文件和封面图片,同时显示上传中的加载动画。 |
mounted | 无 | void | 组件挂载后初始化UpData 对象的键值对。 |
<div style=" background: rgba(255, 255, 255, 0.4);">
<div style="display: flex; flex-direction: row;">
<div>
<label style="font-size: 20px" for="fileInput" class="lab">资料文件</label>
<input type="file" id="fileInput" name="file" accept=".txt, .pdf, .docx" style="display: none" @change="handleFileChange($event, 'file')">
<span>{{ fileInputName }}</span>
</div>
<div>
<label style="font-size: 20px" for="imgInput" class="lab">封面图片</label>
<input type="file" id="imgInput" name="file" accept=image/* style="display: none" @change="handleFileChange($event, 'image')">
<span>{{ imgInputName }}</span>
</div>
</div>
</div>
<div v-for="(val,key) in Header" :key="key" style="display: flex; flex-direction: row;">
<label style="font-size: 25px;">{{ val }}</label>
<input v-model="UpData[val]" :id="val">
</div>
发布帖子
变量名 | 类型 | 默认值 | 描述 |
---|
Header | Array | ['title', 'author', 'publisher', 'publicationDate', 'description'] | 表头信息,描述表格中的列名。 |
UpData | Object | {} | 存储要上传的资料信息。 |
fileInputName | String | '' | 存储上传的资料文件名。 |
imgInputName | String | '' | 存储上传的封面图片文件名。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
handleFileChange | event (Event), type (String) | void | 处理文件选择事件,根据文件类型设置相应的文件名。 |
post | 无 | void | 发布帖子,将内容上传到服务器,同时重置编辑区域。 |
previewImage | 无 | void | 预览上传的图片并将其插入到编辑区域。 |
getCurrentDiv | 无 | HTMLElement | 获取当前光标所在的div元素。 |
onKeydown | event (KeyboardEvent) | void | 监听键盘按下事件,检测用户是否按下回车键,并对换行进行检测和处理。 |
mounted | 无 | void | 组件挂载后初始化UpData 对象的键值对。 |
<div ref="des">
<h2 ref="title" id="Header" contenteditable="true" style="font-size: 2em; text-align: center" class="inp">
this
is
the header</h2>
<div>
<div style="text-align: center">{{ this.$usr.userName }}</div>
<div id="au_des" style="text-align: center" contenteditable="true" class="inp">
{{ this.description }}
</div>
</div>
<div ref="Content" class="inp" id="Content" contenteditable="true"
style="text-align: center; margin: 2em; overflow-x: hidden" @keydown="onKeydown">
<div>this is the content</div>
</div>
</div>
<div style="display: flex;justify-content: center;
align-items: center; ">
<label for="imageInput" class="el-button"
style="cursor: pointer; width: 10%; right: 5%; justify-self: center">
上传图片
</label>
<input type="file" ref="imageInput" id="imageInput" style="display:none;" @change="previewImage"
accept="image/*"/>
<button name="sp" class="el-button" @click="post">
发帖
</button>
</div>
变量名 | 类型 | 默认值 | 描述 |
---|
showDialog | Boolean | false | 控制商品详情页是否显示 |
showPublishDialog | Boolean | false | 控制商品发布页是否显示 |
sellerPanel | Boolean | false | 控制当前商品卖家信息栏是否显示 |
showChatView | Boolean | false | 控制与当前商品卖家聊天窗口是否显示 |
curItem | Object | null | 存储当前商品数据,初始值为null |
formData | Object | {name:'',price:0,sellerId:this.$usr.userId,description:'',tags:null} | 发布新商品填写的表格数据 |
selectOption | Object | null | 存储用户选择的标签信息 |
selectedFile | Object | null | 用户发布新商品时存储用户选择的文件内容 |
searchInput | Object | ref('') | 用户搜索的输入内容 |
itemData | Array | [] | 存储所有商品数据 |
sellerItem | Array | [] | 存储当前商品卖家的商品,展示在卖家信息栏 |
updateItemID | String | '' | 当前新建的商品ID |
函数名 | 参数 | 返回值类型 | 描述 |
---|
getOverview | 无 | void | 获取所有商品信息 |
addNewItem | 无 | void | 发布新商品,将内容上传到服务器,同时重置编辑区域 |
handleSelectChange | 无 | void | 用户点击标签选项,自动搜索并根据搜索结果重新渲染商品展示 |
search | 无 | void | 根据用户输入的关键词搜索,根据搜索结果重新渲染商品展示 |
deleteItem | 无 | void | 删除已发布商品 |
favor | 无 | void | 弹出与当前商品卖家的聊天框 |
showItemDetail | 无 | void | 拉取当前点击的商品的详细信息 |
openSellerPanel | 无 | void | 打开当前商品的卖家信息 |
publish | 无 | void | 打开发布新商品对话框 |
clickItem | item | void | 处理卖家信息页的商品点击 |
handleFileChange | event | void | 从事件中获取用户选择的文件 |
formatDate | dateString | String | 格式化时间信息 |
<el-select
v-model="selectOption"
multiple
placeholder="Select"
style="width: 150px; z-index: 1000"
@change="handleSelectChange"
>
<el-option label="生活杂物" value="book" />
<el-option label="二手课本" value="daily use" />
<el-option label="求助" value="help" />
</el-select>
<el-input v-model="searchInput" style="width: 500px; height: 32px;" placeholder="Search for..." />
<el-button @click="search" style="height: 32px;"><el-icon><Search /></el-icon></el-button>
<div v-for="item in itemData" :key="item.id">
<el-card style="width: 300px" shadow="hover" @click="showItemDetail(item)">
<template #header><el-icon><Goods /></el-icon>{{ item.name }}</template>
<div>
<p><el-icon><PriceTag /></el-icon>
<el-tag v-for="tag in item.tags" :key="tag" size="small" type="primary">{{ tag }}</el-tag></p>
<p><el-icon><Coin /></el-icon>{{ item.price }}</p>
<p><el-icon><Clock /></el-icon>{{ formatDate(item.createdAt) }}</p>
<p><el-icon><User /></el-icon>{{ item.sellerId }}</p>
</div>
</el-card>
</div>
<el-dialog v-model="showDialog" :lock-scroll="false">
<div>
<p><el-icon><PriceTag /></el-icon>
<el-tag v-for="tag in curItem.tags" :key="tag" size="small" type="primary">{{ tag }}</el-tag></p>
<p><el-icon><Coin /></el-icon>{{ curItem.price }}</p>
<a @click.prevent="openSellerPanel"><el-icon><User /></el-icon>{{ curItem.sellerId }}</a>
<p><el-icon><ChatLineRound /></el-icon>{{ curItem.description }}</p>
<el-image :src="curItem.img" alt="" style="width: 300px;">
<template #error>
<div class="image-slot">
<el-icon><icon-picture /></el-icon>
</div>
</template>
</el-image>
</div>
<el-button id="favor" @click="favor">❤</el-button>
<el-button v-if="curItem.sellerId===userId" @click="deleteItem">删除</el-button>
</el-dialog>
<el-dialog v-model="showPublishDialog" :lock-scroll="false">
<el-form :model="formData" class="demo-form-inline">
<el-form-item label="Name">
<el-input id="formName" v-model="formData.name" placeholder="Name" clearable />
</el-form-item>
<el-form-item label="Price">
<el-input id="formPrice" v-model="formData.price" placeholder="Price" clearable />
</el-form-item>
<el-form-item label="Tags">
<el-select
id="formTag"
multiple
v-model="formData.tags"
placeholder="Tag"
>
<el-option id="dailyUse" label="生活杂物" value="daily use" />
<el-option label="二手课本" value="book" />
<el-option label="求助" value="help" />
</el-select>
</el-form-item>
<el-form-item label="Description">
<el-input id="formDes" v-model="formData.description" placeholder="Description" clearable />
</el-form-item>
<el-form-item>
<input type="file" @change="handleFileChange">
</el-form-item>
<el-form-item>
<el-button id="sp" type="primary" @click="onSubmit">创建商品</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-drawer v-model="sellerPanel" :lock-scroll="false" size="40%">
<p><el-icon><User /></el-icon>{{ curItem.sellerId }}</p>
<el-tabs v-model="activeName">
<el-tab-pane label="Goods" name="first">
<el-card v-for="item in sellerItem" :key="item.id" style="max-width: 480px">
<a @click.prevent="clickItem(item)">{{item.name}}</a>
</el-card>
</el-tab-pane>
<el-tab-pane label="Comments" name="second">
<el-card v-for="item in sellerComments" :key="item.id" style="max-width: 480px">
<p><el-icon><User /></el-icon>{{item.buyerId}}: {{item.comment}}</p>
<p><el-icon><Clock /></el-icon>{{ item.createdAt}}</p>
</el-card>
</el-tab-pane>
</el-tabs>
</el-drawer>
登出
变量名 | 类型 | 默认值 | 描述 |
---|
data | Any | null | 存储从服务器返回的数据。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
logout | 无 | Promise | 调用登出接口,成功后跳转到登录页面。 |
变量名 | 说明 |
---|
avatar | 用户头像的路径。 |
nickname | 用户昵称,未登录时显示默认值"用户未登录"。 |
design | 用户的设计(暂时注释掉)。 |
grade | 用户的年级。 |
department | 用户所在的院系。 |
major | 用户的专业。 |
font_bold | 控制菜单项的加粗显示,数组中的布尔值对应菜单项是否被选中。 |
getChosen()
: 获取用户信息。getImg()
: 获取用户头像信息。
样式类名 | 说明 |
---|
.PersonTop | 用户信息展示区域的样式,横向排列,水平居中显示。 |
.PersonTop_img | 用户头像区域的样式,圆形。 |
.PersonTop_text | 用户文本信息区域的样式,横向排列,占据总宽度的 60%。 |
.user_text | 用户文本信息的样式,设置行高。 |
.user_name | 用户昵称样式,设置为粗体。 |
.user-v | 用户标识样式,显示果酱获得者等信息。 |
.user-v-font | 用户标识文字样式,颜色为紫色。 |
.user_qianming | 用户签名样式(暂时注释掉)。 |
.user_num | 用户数字信息区域的样式,横向排列,占据总宽度的 40%。 |
.num_text | 数字信息文本样式,颜色为黑色的 37% 透明度。 |
.num_number | 数字信息数字样式,字体大小为 20px,颜色为黑色。 |
.person_body | 页面主体部分的样式,横向排列,垂直居中,占据总宽度的 80%,距离顶部有一定的间距。 |
.person_body_left | 页面主体左侧区域的样式,占据总宽度的 13%,居中显示。 |
.person_body_right | 页面主体右侧区域的样式,占据总宽度的 87%。 |
.custom-active | 自定义菜单项激活状态的样式,浅蓝色。 |
变量名 | 说明 |
---|
studentID | 学生学号。 |
nickname | 学生姓名。 |
enrollmentDate | 学生入学日期。 |
level | 学生培养层次。 |
sex | 学生性别。 |
birthday | 学生出生日期。 |
email | 学生邮箱。 |
mobilePhoneNumber | 学生手机号码。 |
total_unit | 学生已修学分。 |
new_unit | 学生已选学分。 |
userScore | 学生绩点。 |
userRank | 学生排名。 |
getChosen()
: 获取学生个人信息。getNewUnit()
: 获取学生已选学分。getTotalUnit()
: 获取学生已修学分。
getChosen()
: 通过发送 GET 请求获取学生个人信息,包括学号、姓名、入学日期、培养层次、性别、出生日期、邮箱、手机号码、绩点和排名。getNewUnit()
: 通过发送 GET 请求获取学生已选学分。getTotalUnit()
: 通过发送 GET 请求获取学生已修学分。
变量 | 说明 |
---|
scores | 已修课程的绩点数据数组。每个条目包含以下属性:- 课程ID:课程的唯一标识符。
- 学分:课程的学分。
- 绩点:课程的绩点。
|
方法 | 描述 |
---|
getChosen | 异步方法,用于从后端获取已修课程的绩点数据。调用后端 API /api/user/getAllScore ,将获取到的数据更新到 scores 变量中。如果获取失败,将会记录错误信息到控制台。 |
变量 | 说明 |
---|
afternoonLength | 下午课程的长度 |
length | 一天的节次数 |
timetable | 课程表数据数组,包含每个节次的详细信息 |
events | 课程事件数组,用于存储从后端获取的课程信息 |
hoverOrderArr | 鼠标悬停时的顺序数组 |
weeks | 星期数组,包含星期一到星期日的简称 |
方法 | 描述 |
---|
makeTimetable | 构造课程表完整数据,根据 length 和 afternoonLength 初始化 timetable 数组,包含每个节次的基本信息 |
mergeData | 合并课程数据,将 events 数组中的课程信息合并到 timetable 中对应的节次中 |
objectSpanMethod | el-table 的 span-method 回调函数,用于动态设置单元格的合并情况,根据不同的节次和星期动态合并单元格 |
getChosen | 异步方法,从后端获取课程信息,调用后端 API /api/chosen/searchByUserWithLessInfo ,将获取到的数据存储到 events 数组中 |
变量名 | 类型 | 描述 |
---|
checkboxFlag | Boolean | 控制是否显示“我发布的”复选框的标志。 |
negatedCheckboxFlag | Boolean | checkboxFlag的反值,控制是否显示“我回复的”复选框的标志。 |
showDetail | Array | 存储评论详情的数组。 |
comments | Array | 存储评论的数组。 |
函数名 | 描述 |
---|
negatedCheckboxFlag.get | 获取 negatedCheckboxFlag 的值,为 checkboxFlag 的反值。 |
negatedCheckboxFlag.set | 设置 negatedCheckboxFlag 的值,使 checkboxFlag 为其输入值的反值。 |
类名 | 属性 | 描述 |
---|
.top-options | display: flex; justify-content: space-between; | 顶部选项容器样式,采用 flex 布局,水平分布,并且元素之间有空间。 |
.left-option, .right-option | flex: 1; text-align: center; | 左侧选项和右侧选项的样式,占据父容器的剩余空间,并且文字居中对齐。 |
.my-reply | padding: 10px; background-color: #fafbfc; | 我的回复容器的样式,具有内边距和浅灰色背景。 |
.header-img | display: inline-block; vertical-align: top; | 头像图片的样式,以行内块级元素显示,垂直对齐到顶部。 |
.reply-info | display: inline-block; margin-left: 5px; width: 90%; | 回复信息容器的样式,以行内块级元素显示,左侧留出 5px 的外边距,占据父容器的 90% 宽度。 |
.reply-input | min-height: 20px; line-height: 22px; padding: 10px 10px; | 回复输入框的样式,具有最小高度、行高和内边距。 |
.reply-btn-box | height: 25px; margin: 10px 0; | 回复按钮容器的样式,具有固定高度和垂直方向的外边距。 |
.reply-btn | position: relative; float: right; margin-right: 15px; | 回复按钮的样式,相对定位,右浮动,并且右侧留出 15px 的外边距。 |
.my-comment-reply | margin-left: 50px; | 我的评论回复的样式,左侧留出 50px 的外边距。 |
.author-info | display: inline-block; margin-left: 5px; width: 60%; | 作者信息容器的样式,以行内块级元素显示,左侧留出 5px 的外边距,占据父容器的 60% 宽度。 |
>span | display: block; cursor: pointer; | 内部 span 元素的样式,显示为块级元素,鼠标悬停时显示指针。 |
.icon-btn | width: 30%; padding: 0 !important; float: right; | 图标按钮的样式,宽度占据父容器的 30%,内边距重置为 0,右浮动。 |
.talk-box | margin: 0 50px; | 对话框的样式,左右各留出 50px 的外边距。 |
.reply-box | margin: 10px 0 0 50px; background-color: #efefef; | 回复框的样式,顶部留出 10px 的外边距,左侧留出 50px 的外边距,具有浅灰色背景。 |
变量名 | 类型 | 描述 |
---|
showDetail | Array | 控制评论详情显示/隐藏的数组。 |
comments | Array | 存储评论的数组。 |
函数名 | 描述 |
---|
getComment | 从服务器获取评论数据,并更新组件的 comments 和 fromHeadImg。 |
类名 | 属性 | 描述 |
---|
.comments-container | overflow-y: auto; max-height: 50vh; | 评论容器的样式,垂直滚动,最大高度为视口高度的50%。 |
.my-reply | padding: 10px; background-color: #fafbfc; | 我的回复容器的样式,具有内边距和浅灰色背景。 |
.header-img | display: inline-block; vertical-align: top; | 头像图片的样式,以行内块级元素显示,垂直对齐到顶部。 |
.reply-info | display: inline-block; margin-left: 5px; width: 90%; | 回复信息容器的样式,以行内块级元素显示,左侧留出 5px 的外边距,占据父容器的 90% 宽度。 |
.reply-input | min-height: 20px; line-height: 22px; padding: 10px 10px; | 回复输入框的样式,具有最小高度、行高和内边距。 |
.reply-btn-box | height: 25px; margin: 10px 0; | 回复按钮容器的样式,具有固定高度和垂直方向的外边距。 |
.my-comment-reply | margin-left: 50px; | 我的评论回复的样式,左侧留出 50px 的外边距。 |
.author-title | padding: 10px; | 评论作者标题的样式,具有内边距。 |
.icon-btn | width: 30%; padding: 0 !important; float: right; | 图标按钮的样式,宽度占据父容器的 30%,内边距重置为 0,右浮动。 |
.talk-box | margin: 0 50px; | 对话框的样式,左右各留出 50px 的外边距。 |
.reply-box | margin: 10px 0 0 50px; background-color: #efefef; | 回复框的样式,顶部留出 10px 的外边距,左侧留出 50px 的外边距,具有浅灰色背景。 |
变量名 | 类型 | 描述 |
---|
showDetail | Array | 控制评论详情显示/隐藏的数组。 |
comments | Array | 存储评论的数组。 |
fromHeadImg | String | 当前用户的头像图片地址。 |
函数名 | 描述 |
---|
getReply | 从服务器获取回复数据,并更新组件的 comments 和 fromHeadImg。 |
类名 | 属性 | 描述 |
---|
.comments-container | overflow-y: auto; max-height: 50vh; | 评论容器的样式,垂直滚动,最大高度为视口高度的50%。 |
.my-reply | padding: 10px; background-color: #fafbfc; | 我的回复容器的样式,具有内边距和浅灰色背景。 |
.header-img | display: inline-block; vertical-align: top; | 头像图片的样式,以行内块级元素显示,垂直对齐到顶部。 |
.reply-info | display: inline-block; margin-left: 5px; width: 90%; | 回复信息容器的样式,以行内块级元素显示,左侧留出 5px 的外边距,占据父容器的 90% 宽度。 |
.reply-input | min-height: 20px; line-height: 22px; padding: 10px 10px; | 回复输入框的样式,具有最小高度、行高和内边距。 |
.reply-btn-box | height: 25px; margin: 10px 0; | 回复按钮容器的样式,具有固定高度和垂直方向的外边距。 |
.my-comment-reply | margin-left: 50px; | 我的评论回复的样式,左侧留出 50px 的外边距。 |
.author-title | padding: 10px; | 评论作者标题的样式,具有内边距。 |
.icon-btn | width: 30%; padding: 0 !important; float: right; | 图标按钮的样式,宽度占据父容器的 30%,内边距重置为 0,右浮动。 |
.talk-box | margin: 0 50px; | 对话框的样式,左右各留出 50px 的外边距。 |
.reply-box | margin: 10px 0 0 50px; background-color: #efefef; | 回复框的样式,顶部留出 10px 的外边距,左侧留出 50px 的外边距,具有浅灰色背景。 |
变量名 | 类型 | 描述 |
---|
checkboxFlag | Boolean | 控制是否显示“我卖的”选项的复选框。 |
negatedCheckboxFlag | Boolean | checkboxFlag 的取反值,控制是否显示“我买的”选项的复选框。 |
comments | Array | 存储评论数据的数组。 |
(本组件中未定义任何函数。)
类名 | 属性 | 描述 |
---|
.top-options | display: flex; justify-content: space-between; align-items: center; background-color: #f0f0f0; padding: 10px; | 顶部选项容器的样式,采用 Flex 布局,水平方向分布,背景颜色为浅灰色,内边距为 10px。 |
.left-option, .right-option | flex: 1; text-align: center; | 左侧和右侧选项的样式,占据剩余空间的一半,文本居中显示。 |
.my-reply | padding: 10px; background-color: #fafbfc; | 我的回复容器的样式,具有内边距和浅灰色背景。 |
.author-title:not(:last-child) | border-bottom: 1px solid rgba(178,186,194,.3); | 作者标题容器的样式,除了最后一个元素外,都具有底部边框,颜色为浅灰色。 |
.author-title | padding: 10px; | 作者标题容器的样式,具有内边距。 |
.icon-btn | width: 30%; padding: 0 !important; float: right; | 图标按钮的样式,宽度占据父容器的 30%,内边距重置为 0,右浮动。 |
.talk-box | margin: 0 50px; | 对话框的样式,左右各留出 50px 的外边距。 |
.reply-box | margin: 10px 0 0 50px; background-color: #efefef; | 回复框的样式,顶部留出 10px 的外边距,左侧留出 50px 的外边距,具有浅灰色背景。 |
变量名 | 类型 | 描述 |
---|
leftCheckbox | Boolean | 控制左侧复选框的状态。 |
rightCheckbox | Boolean | 控制右侧复选框的状态。 |
loaded | Boolean | 标记页面是否加载完成。 |
comments | Array | 存储评论数据的数组。 |
products | Array | 存储产品数据的数组。 |
names | Array | 存储产品名称的数组,与评论数据一一对应。 |
descriptions | Array | 存储产品描述的数组,与评论数据一一对应。 |
(此组件中未定义任何函数。)
类名 | 属性 | 描述 |
---|
.comments-container | overflow-y: auto; max-height: 50vh; | 评论容器的样式,垂直方向滚动,最大高度为视口高度的 50%。 |
.my-reply | padding: 10px; background-color: #fafbfc; | 我的回复容器的样式,具有内边距和浅灰色背景。 |
.author-title:not(:last-child) | border-bottom: 1px solid rgba(178,186,194,.3); | 作者标题容器的样式,除了最后一个元素外,都具有底部边框,颜色为浅灰色。 |
.author-title | padding: 10px; | 作者标题容器的样式,具有内边距。 |
.icon-btn | width: 30%; padding: 0 !important; float: right; | 图标按钮的样式,宽度占据父容器的 30%,内边距重置为 0,右浮动。 |
.talk-box | margin: 0 50px; | 对话框的样式,左右各留出 50px 的外边距。 |
.reply-box | margin: 10px 0 0 50px; background-color: #efefef; | 回复框的样式,顶部留出 10px 的外边距,左侧留出 50px 的外边距,具有浅灰色背景。 |
变量名 | 类型 | 描述 |
---|
consultants | Array | 咨询师列表,包含咨询师的信息。 |
selectedFilter | String | 当前选中的筛选条件。 |
showMale | Boolean | 控制显示男性咨询师的状态。 |
showFemale | Boolean | 控制显示女性咨询师的状态。 |
showHaveTime | Boolean | 控制显示可预约咨询师的状态。 |
showNoTime | Boolean | 控制显示已约满咨询师的状态。 |
selectItems | Array | 用于控制擅长领域筛选的复选框状态。 |
labels | Array | 擅长领域标签列表。 |
isSelectLabel | Boolean | 标记是否选中了擅长领域筛选复选框。 |
booklist | Array | 存储用户的预约列表。 |
函数名 | 参数 | 返回值 | 描述 |
---|
setSelectLabel | | | 设置擅长领域筛选复选框状态。 |
showConfirmation | timeslotid | | 处理预约咨询师时间段的确认。 |
alertGender | | Boolean | 检查性别筛选是否合法,并根据情况触发相应的后续操作。 |
setMaleGender | flag | | 设置显示男性咨询师的状态。 |
setFemaleGender | flag | | 设置显示女性咨询师的状态。 |
alertTime | | Boolean | 检查空闲状态筛选是否合法,并根据情况触发相应的后续操作。 |
setHaveTime | flag | | 设置显示可预约咨询师的状态。 |
setNoTime | flag | | 设置显示已约满咨询师的状态。 |
getImg | id | | 获取咨询师的头像图片。 |
getChosen | | | 根据当前选中的筛选条件获取相应的咨询师列表。 |
setFilter | filter | | 设置筛选条件并调用 getChosen 方法重新获取咨询师列表。 |
getMaleOnly | | | 获取仅显示男性咨询师的列表。 |
getFemaleOnly | | | 获取仅显示女性咨询师的列表。 |
getHaveTimeOnly | | | 获取仅显示可预约咨询师的列表。 |
getNoTimeOnly | | | 获取仅显示已约满咨询师的列表。 |
getLabels | | | 根据选择的擅长领域筛选获取相应的咨询师列表。 |
getBooklist | | | 获取用户的预约列表。 |
deleteBook | timeslotId | | 处理取消预约操作。 |
类名 | 属性 | 描述 |
---|
.booklist | text-align: center; color: green; border: 2px solid green; padding: 10px; font-family: Arial, sans-serif; | 预约列表容器的样式,居中显示,字体颜色绿色,边框绿色,内边距 10px,字体为 Arial。 |
.booklist-default | text-align: center; color: red; border: 2px solid red; padding: 10px; font-family: Arial, sans-serif; | 暂无预约提示容器的样式,居中显示,字体颜色红色,边框红色,内边距 10px,字体为 Arial。 |
.author-info | display: flex; flex-wrap: wrap; | 作者信息容器的样式,使用 Flexbox 布局并允许换行。 |
.author-name | margin-right: 10px; flex: 1; | 作者名字样式,右侧留出 10px 的外边距,占据剩余空间。 |
<div style="margin-top: 2em;right: 0">
<div style="display:flex; flex-direction: row;">
<div style="display: flex; flex-direction: row; margin-right: 2em; gap: 1em">
<div style="cursor:pointer; color: #3498db;" @click="methodOne(this.additionalParams.current-1);">
上一页
</div>
<div>
{{ this.additionalParams.current }}/{{ this.additionalParams.pages }}
</div>
<div style="cursor:pointer; color: #3498db;" @click="methodOne(this.additionalParams.current+1);">
下一页
</div>
</div>
<div style="display: flex;flex-direction: row;">
<input style="width: 3em;margin-right: 0.5em" v-model="now">
<div style="color: #3498db;cursor:pointer;" @click="methodOne(now);">
跳转
</div>
</div>
</div>
</div>
变量名 | 类型 | 默认值 | 描述 |
---|
methodOne | Function | 无 | 父组件传递的方法,用于处理分页点击事件。 |
additionalParams | Object | 无 | 父组件传递的额外参数,包括当前页码和总页数。 |
now | Number | 1 | 当前输入的页码,用于跳转到指定页。 |
total | Number | null | 总记录数,未使用。 |
data | Any | null | 存储数据,未使用。 |
函数名 | 参数 | 返回值类型 | 描述 |
---|
无 | 无 | 无 | 本组件没有声明额外的方法,仅通过methodOne 进行分页操作。 |