提交 6925d777 authored 作者: 王鹏飞's avatar 王鹏飞

chore: update

上级 72ad147f
......@@ -68,26 +68,24 @@ function handleSubmit() {
<el-button round plain size="small" type="primary">老师</el-button>
</template>
<template v-else>
<img
src="@/assets/images/icon_bbs_level_1.png"
width="40"
title="学徒"
v-if="data.sso_user.discussion_level === 0" />
<img
src="@/assets/images/icon_bbs_level_2.png"
width="40"
title="学者"
v-if="data.sso_user.discussion_level === 1" />
<img
src="@/assets/images/icon_bbs_level_3.png"
width="40"
title="大师"
v-if="data.sso_user.discussion_level === 2" />
<img
src="@/assets/images/icon_bbs_level_4.png"
width="40"
title="智者"
v-if="data.sso_user.discussion_level === 3" />
<div class="discuss-item__level">
<template v-if="data.sso_user.discussion_level === 0">
<img src="@/assets/images/icon_bbs_level_1.png" title="学徒" />
<p>学徒</p>
</template>
<template v-if="data.sso_user.discussion_level === 1">
<img src="@/assets/images/icon_bbs_level_2.png" title="学者" />
<p>学者</p>
</template>
<template v-if="data.sso_user.discussion_level === 2">
<img src="@/assets/images/icon_bbs_level_3.png" title="大师" />
<p>大师</p>
</template>
<template v-if="data.sso_user.discussion_level === 3">
<img src="@/assets/images/icon_bbs_level_4.png" title="智者" />
<p>智者</p>
</template>
</div>
</template>
</div>
<div class="discuss-item__right">
......@@ -95,7 +93,7 @@ function handleSubmit() {
<div class="discuss-item__content" v-html="content2Html(data.content)"></div>
<FileList preview :data="data.files" v-if="data.files.length" />
</div>
<p class="discuss-item__time">{{ data.updated_time }}</p>
<p class="discuss-item__time">{{ data.created_time }}</p>
<div class="discuss-item__comment"><p @click="handleReply">回复</p></div>
<div class="discuss-item-form" v-if="formVisible">
<p class="discuss-item-form__title">回复本楼</p>
......@@ -165,6 +163,17 @@ function handleSubmit() {
font-size: 16px;
color: #333;
}
.discuss-item__level {
img {
width: 40px;
}
p {
font-size: 10px;
font-weight: 400;
line-height: 17px;
color: #666666;
}
}
.discuss-item__right {
flex: 1;
......
......@@ -52,6 +52,9 @@ onMounted(() => {
const inputRef = $ref<InstanceType<typeof ElInput> | null>(null)
let activeComment = $ref<DiscussCommentItem>()
const commentPlaceholder = $computed(() => {
return activeComment ? `回复@${getUsername(activeComment.sso_user)}:` : ''
})
function handleReply(data: DiscussCommentItem) {
if (data.id === activeComment?.id && formVisible) {
formVisible = false
......@@ -59,7 +62,6 @@ function handleReply(data: DiscussCommentItem) {
}
activeComment = data
formVisible = true
form.content = `回复@${getUsername(data.sso_user)}:`
nextTick(() => {
inputRef?.focus()
})
......@@ -82,7 +84,7 @@ function handleSubmit() {
reply_type: 2,
floor_id: activeComment.floor_id,
reply_id: activeComment.id,
content: form.content.replace(`回复@${getUsername(activeComment.sso_user)}:`, '')
content: form.content
}).then(() => {
formVisible = false
refresh()
......@@ -125,6 +127,7 @@ defineExpose({ refresh })
<el-input
type="textarea"
show-word-limit
:placeholder="commentPlaceholder"
:autosize="{ minRows: 6, maxRows: 6 }"
:maxlength="100"
v-model="form.content"
......
......@@ -29,13 +29,19 @@ const videos = $computed(() => {
<template>
<div class="file-list">
<div class="file-item" v-for="(item, index) in currentImages" :key="index">
<p class="file-item__count" v-if="images.length > 3 && index === 0">{{ images.length }}</p>
<el-image
style="width: 100%; height: 100%"
:src="item.url + '?x-oss-process=image/resize,m_fill,h_90,w_160'"
:initial-index="index"
:preview-src-list="imageSrcList"
fit="cover" />
fit="cover">
</el-image>
<template v-if="preview">
<p class="file-item__previewText">查看大图</p>
</template>
<template v-else>
<p class="file-item__count" v-if="images.length > 3 && index === 0">{{ images.length }}</p>
</template>
</div>
<template v-if="preview">
<div class="video-item" v-for="(item, index) in videos" :key="index">
......@@ -96,4 +102,18 @@ const videos = $computed(() => {
background: rgba(0, 0, 0, 0.8);
z-index: 1000;
}
.file-item__previewText {
position: absolute;
right: 0;
bottom: 0;
padding: 0 2px;
height: 18px;
font-size: 12px;
color: #fff;
line-height: 18px;
text-align: center;
background: rgba(0, 0, 0, 0.5);
border-radius: 2px 0px 0px 0px;
z-index: 1000;
}
</style>
......@@ -35,6 +35,12 @@ const form = $(
files: []
})
)
if (props.courseId) {
form.course_id = props.courseId
}
if (props.semesterId) {
form.semester_id = props.semesterId
}
const rules = ref<FormRules>({
course_id: [{ required: true, message: '请选择课程', trigger: 'change' }],
chapter_id: [{ required: true, message: '请选择章节', trigger: 'change' }],
......@@ -47,9 +53,10 @@ watchEffect(() => {
const course = courses.value.find(item => item.course_id === form.course_id)
form.semester_id = course ? course.semester.id : ''
})
function handleCourseChange() {
form.chapter_id = ''
}
watch(chapters, () => {
const chapter = chapters.value.find(item => item.id === form.chapter_id)
if (!chapter) form.chapter_id = ''
})
// 提交
function handleSubmit() {
formRef?.validate().then(create)
......@@ -94,7 +101,7 @@ function onChange(file: any, files: any, uploadRef: any) {
<el-form ref="formRef" :model="form" :rules="rules" label-position="top">
<el-row justify="space-between">
<el-form-item label="相关课程" prop="course_id" v-if="!courseId">
<el-select filterable v-model="form.course_id" @change="handleCourseChange">
<el-select filterable v-model="form.course_id">
<el-option v-for="item in courses" :key="item.id" :label="item.name" :value="item.course_id"></el-option>
</el-select>
</el-form-item>
......
......@@ -35,7 +35,7 @@ const username = $computed(() => {
</div>
<div class="post-item-ft">
<p class="post-item__username">{{ username }}</p>
<p class="post-item__time">{{ data.updated_time }}</p>
<p class="post-item__time">{{ data.last_post_time }}</p>
</div>
</router-link>
</section>
......
......@@ -18,6 +18,7 @@ export interface Post {
updated_time: string
delete_time: string
collection_count: 0 | 1
last_post_time: string
}
export interface PostItem extends Post {
......
<script setup lang="ts">
import type { Post } from '../types'
import { ArrowUp } from '@element-plus/icons-vue'
import { DArrowLeft, ArrowUp } from '@element-plus/icons-vue'
import AppList from '@/components/base/AppList.vue'
import DiscussItem from '../components/DiscussItem.vue'
......@@ -13,6 +13,8 @@ interface Props {
id: string
}
const props = defineProps<Props>()
const router = useRouter()
const route = useRoute()
let detail = $ref<Post>()
......@@ -50,9 +52,20 @@ function toggleCollection() {
detail.collection_count = detail.collection_count ? 0 : 1
})
}
// 返回列表
function handleBack() {
router.replace('/bbs')
}
</script>
<template>
<div class="comeback">
<div class="comeback__inner" @click="handleBack">
<el-icon><DArrowLeft /></el-icon>
<p>返回列表</p>
</div>
</div>
<div class="bbs">
<div class="bbs-hd" v-if="detail">
<h1>{{ detail.title }}</h1>
......@@ -75,6 +88,22 @@ function toggleCollection() {
</template>
<style lang="scss">
.comeback {
padding-bottom: 20px;
display: flex;
justify-content: flex-start;
}
.comeback__inner {
display: flex;
align-items: center;
font-size: 16px;
line-height: 1;
color: #666666;
cursor: pointer;
p {
padding: 0 5px;
}
}
.bbs {
background-color: #fff;
border: 1px solid #e5e5e5;
......@@ -85,7 +114,7 @@ function toggleCollection() {
}
.bbs-hd {
position: relative;
padding: 20px;
padding: 14px 20px;
display: flex;
align-items: center;
border-bottom: 1px solid #e4e4e4;
......@@ -93,6 +122,9 @@ function toggleCollection() {
z-index: 10;
h1 {
flex: 1;
font-size: 20px;
font-weight: 400;
color: #666666;
}
}
.el-backtop {
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论