hebo/zhxy-jsd
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

接龙调整

Browse Source
This commit is contained in:
hb 2025-07-02 09:11:31 +08:00
parent 60cf660a05
commit 66bc9dc920
3 changed files with 113 additions and 117 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/pages.json
View File

@ -359,21 +359,21 @@
{
"path": "pages/view/notice/index",
"style": {
"navigationBarTitleText": "通知公告",
"navigationBarTitleText": "发布接龙",
"enablePullDownRefresh": false
}
},
{
"path": "pages/view/notice/detail",
"style": {
"navigationBarTitleText": "通知详情",
"navigationBarTitleText": "接龙详情",
"enablePullDownRefresh": false
}
},
{
"path": "pages/view/notice/publish",
"style": {
"navigationBarTitleText": "发布通知",
"navigationBarTitleText": "接龙推送",
"enablePullDownRefresh": false
}
},

9
src/pages/base/service/index.vue
View File

@ -206,7 +206,7 @@ const sections = reactive<Section[]>([
{
id: "r7",
icon: "file-text-fill-2",
text: "选课详情",
text: "课程介绍",
show: true,
path: "/pages/base/groupTeaching/xkList",
},
@ -218,6 +218,13 @@ const sections = reactive<Section[]>([
show: true,
path: "/pages/base/groupTeaching/dmXkList",
},
{
id: "r8",
icon: "draftfill",
text: "发布接龙",
show: true,
path: "/pages/view/notice/index",
},
],
},
{

215
src/pages/view/notice/index.vue
View File

@ -1,120 +1,93 @@
<!-- src/pages/view/notice/index.vue -->
<template>
<view class="notice-list-page">
<BasicListLayout @register="register">
<template #default="{ data }">
<view class="notice-card" @click="goToDetail(data.id)">
<view class="card-header">
<text class="notice-title">{{ data.title }}</text>
<text class="notice-status" :class="getStatusClass(data.status)">{{
data.statusText
}}</text>
</view>
<view class="card-body">
<!-- 可选：显示封面缩略图 -->
<image
v-if="data.coverImage"
:src="data.coverImage"
mode="aspectFill"
class="cover-thumbnail"
></image>
<text class="notice-excerpt">{{ data.excerpt }}</text>
</view>
<view class="card-footer">
<text class="footer-item">发布者: {{ data.publisher }}</text>
<text class="footer-item">{{ data.publishTime }}</text>
<text class="footer-item" v-if="data.target"
>范围: {{ data.target }}</text
>
</view>
</view>
</template>
</BasicListLayout>
<!-- 新建通知按钮 -->
<view class="jl-list-page">
<!-- 新建接龙按钮 -->
<view class="fab-button" @click="goToPublish">
<uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
</view>
<!-- 列表内容 -->
<view v-if="jlList.length > 0">
<view v-for="item in jlList" :key="item.id" class="jl-card" @click="goToDetail(item.id)">
<view class="card-header">
<text class="jl-title">{{ item.jlmc }}</text>
<text class="jl-status" :class="getStatusClass(item.jlStatus)">
{{ getStatusText(item.jlStatus) }}
</text>
</view>
<view class="card-body">
<image v-if="item.jlfm" :src="item.jlfm" mode="aspectFill" class="cover-thumbnail"></image>
<text class="jl-excerpt" v-html="item.jlms"></text>
</view>
<view class="card-footer">
<text class="footer-item">发布者: {{ item.jsxm }}</text>
<text class="footer-item">{{ formatTime(item.jlFbtime) }}</text>
<text class="footer-item" v-if="item.bjmc">范围: {{ item.njmc+item.bjmc }}</text>
</view>
</view>
</view>
<view v-else class="empty-list">暂无数据</view>
</view>
</template>
<script lang="ts" setup>
import { ref } from "vue";
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
import {ref, onMounted} from "vue";
import {BASE_URL} from "@/config";
interface NoticeItem {
interface JlItem {
id: string;
title: string;
excerpt: string; // 内容摘要
status: "published" | "draft" | "ended"; // 状态
statusText: string; // 状态文字
publisher: string;
publishTime: string;
coverImage?: string; // 封面图 URL (可选)
target?: string; // 通知范围 (可选)
jlmc: string; // 接龙名称
jlms: string; // 接龙描述
jlStatus: string; // 发布状态：A已发布，B暂存
jlFbr: string; // 发布人
jlFbtime: string; // 发布时间
jlfm: string; // 接龙封面
njmc: string;
bjmc: string; // 班级名称
jlkstime: string; // 接龙开始时间
jljstime: string; // 接龙结束时间
jsxm?: string;
}
// 模拟获取通知列表数据的 API 函数
const fetchNoticeList = async (params: any): Promise<any> => {
// 返回类型改为 Promise<any>
console.log("Fetching notice list with params:", params);
return new Promise((resolve) => {
setTimeout(() => {
// 根据 params.pageNo 和 params.pageSize 模拟分页
const pageNo = params.pageNo || 1;
const pageSize = params.pageSize || 10;
const total = 35; // 模拟总数
const mockData: NoticeItem[] = [];
const startIndex = (pageNo - 1) * pageSize;
const jlList = ref<JlItem[]>([]);
const total = ref(0);
for (let i = 0; i < pageSize; i++) {
const currentIndex = startIndex + i;
if (currentIndex >= total) break; // 超出总数则停止
const status =
currentIndex % 3 === 0
? "draft"
: currentIndex % 3 === 1
? "published"
: "ended";
mockData.push({
id: `notice_${currentIndex + 1}`,
title: `重要通知标题 ${currentIndex + 1}`,
excerpt: `这是通知 ${currentIndex + 1} 的内容摘要，只显示一部分...`,
status: status,
statusText:
status === "draft"
? "草稿"
: status === "published"
? "已发布"
: "已结束",
publisher: "教务处",
publishTime: `2024-06-${String(
18 - Math.floor(currentIndex / 5)
).padStart(2, "0")}`,
target: currentIndex % 2 === 0 ? "一年级3班" : "全体教师",
// coverImage: i % 3 === 0 ? '/static/mock/cover.png' : undefined
});
const fetchJlList = async () => {
try {
const response = await uni.request({
url: `${BASE_URL}/mobile/jl/list`,
method: "GET",
data: {pageNo: 1, pageSize: 10},
header: {"Content-Type": "application/json"}
});
if (response.statusCode === 200 && response.data) {
const result = response.data;
const pageData = result.data || result;
if (pageData.result && Array.isArray(pageData.result.rows)) {
jlList.value = pageData.result.rows;
total.value = pageData.result.total || 0;
} else {
jlList.value = [];
total.value = 0;
}
resolve({
message: "获取成功",
resultCode: 1,
rows: mockData,
total: total,
});
}, 800); // 模拟网络延迟
});
} else {
jlList.value = [];
total.value = 0;
}
} catch (e) {
jlList.value = [];
total.value = 0;
}
};
const [register, { reload }] = useLayout({
api: fetchNoticeList,
onMounted(() => {
fetchJlList();
});
// 跳转到详情页
const goToDetail = (noticeId: string) => {
const goToDetail = (jlId: string) => {
uni.navigateTo({
url: `/pages/view/notice/detail?id=${noticeId}`,
url: `/pages/view/notice/detail?id=${jlId}`,
});
};
@ -126,21 +99,34 @@ const goToPublish = () => {
};
// 根据状态获取对应的 CSS 类
const getStatusClass = (status: "published" | "draft" | "ended") => {
if (status === "published") return "status-published";
if (status === "draft") return "status-draft";
if (status === "ended") return "status-ended";
return "";
const getStatusClass = (status: string) => {
if (status === "A") return "status-published";
if (status === "B") return "status-draft";
return "status-ended";
};
// 根据状态获取状态文字
const getStatusText = (status: string) => {
if (status === "A") return "已发布";
if (status === "B") return "暂存";
return "已结束";
};
// 格式化时间
const formatTime = (timeStr: string) => {
if (!timeStr) return '';
const date = new Date(timeStr);
return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};
</script>
<style scoped lang="scss">
.notice-list-page {
.jl-list-page {
position: relative; // 为了 FAB 定位
min-height: 100vh; // 确保 FAB 总在视图内
}
.notice-card {
.jl-card {
background-color: #ffffff;
border-radius: 8px;
padding: 15px;
@ -155,7 +141,7 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
align-items: flex-start;
margin-bottom: 8px;
.notice-title {
.jl-title {
font-size: 16px;
font-weight: bold;
color: #333;
@ -169,7 +155,7 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
-webkit-box-orient: vertical;
}
.notice-status {
.jl-status {
font-size: 12px;
padding: 2px 6px;
border-radius: 4px;
@ -180,9 +166,11 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
&.status-published {
background-color: #19be6b; // 绿色-已发布
}
&.status-draft {
background-color: #ff9f0a; // 橙色-草稿
background-color: #ff9f0a; // 橙色-暂存
}
&.status-ended {
background-color: #999999; // 灰色-已结束
}
@ -198,7 +186,8 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
margin-right: 10px;
float: left; // 文字环绕图片
}
.notice-excerpt {
.jl-excerpt {
font-size: 14px;
color: #666;
line-height: 1.5;
@ -209,12 +198,6 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
// 清除浮动影响（如果用了 float）
// &::after {
// content: "";
// display: table;
// clear: both;
// }
}
.card-footer {
@ -247,4 +230,10 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
z-index: 10;
}
.empty-list {
text-align: center;
color: #999;
margin-top: 40px;
}
</style>