接龙调整
This commit is contained in:
parent
60cf660a05
commit
66bc9dc920
@ -359,21 +359,21 @@
|
|||||||
{
|
{
|
||||||
"path": "pages/view/notice/index",
|
"path": "pages/view/notice/index",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "通知公告",
|
"navigationBarTitleText": "发布接龙",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/view/notice/detail",
|
"path": "pages/view/notice/detail",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "通知详情",
|
"navigationBarTitleText": "接龙详情",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
"path": "pages/view/notice/publish",
|
"path": "pages/view/notice/publish",
|
||||||
"style": {
|
"style": {
|
||||||
"navigationBarTitleText": "发布通知",
|
"navigationBarTitleText": "接龙推送",
|
||||||
"enablePullDownRefresh": false
|
"enablePullDownRefresh": false
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@ -206,7 +206,7 @@ const sections = reactive<Section[]>([
|
|||||||
{
|
{
|
||||||
id: "r7",
|
id: "r7",
|
||||||
icon: "file-text-fill-2",
|
icon: "file-text-fill-2",
|
||||||
text: "选课详情",
|
text: "课程介绍",
|
||||||
show: true,
|
show: true,
|
||||||
path: "/pages/base/groupTeaching/xkList",
|
path: "/pages/base/groupTeaching/xkList",
|
||||||
},
|
},
|
||||||
@ -218,6 +218,13 @@ const sections = reactive<Section[]>([
|
|||||||
show: true,
|
show: true,
|
||||||
path: "/pages/base/groupTeaching/dmXkList",
|
path: "/pages/base/groupTeaching/dmXkList",
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
id: "r8",
|
||||||
|
icon: "draftfill",
|
||||||
|
text: "发布接龙",
|
||||||
|
show: true,
|
||||||
|
path: "/pages/view/notice/index",
|
||||||
|
},
|
||||||
],
|
],
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
|
|||||||
@ -1,120 +1,93 @@
|
|||||||
<!-- src/pages/view/notice/index.vue -->
|
<!-- src/pages/view/notice/index.vue -->
|
||||||
<template>
|
<template>
|
||||||
<view class="notice-list-page">
|
<view class="jl-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="fab-button" @click="goToPublish">
|
<view class="fab-button" @click="goToPublish">
|
||||||
<uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
|
<uni-icons type="plusempty" size="24" color="#fff"></uni-icons>
|
||||||
</view>
|
</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>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { ref } from "vue";
|
import {ref, onMounted} from "vue";
|
||||||
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
|
import {BASE_URL} from "@/config";
|
||||||
|
|
||||||
interface NoticeItem {
|
interface JlItem {
|
||||||
id: string;
|
id: string;
|
||||||
title: string;
|
jlmc: string; // 接龙名称
|
||||||
excerpt: string; // 内容摘要
|
jlms: string; // 接龙描述
|
||||||
status: "published" | "draft" | "ended"; // 状态
|
jlStatus: string; // 发布状态:A已发布,B暂存
|
||||||
statusText: string; // 状态文字
|
jlFbr: string; // 发布人
|
||||||
publisher: string;
|
jlFbtime: string; // 发布时间
|
||||||
publishTime: string;
|
jlfm: string; // 接龙封面
|
||||||
coverImage?: string; // 封面图 URL (可选)
|
njmc: string;
|
||||||
target?: string; // 通知范围 (可选)
|
bjmc: string; // 班级名称
|
||||||
|
jlkstime: string; // 接龙开始时间
|
||||||
|
jljstime: string; // 接龙结束时间
|
||||||
|
jsxm?: string;
|
||||||
}
|
}
|
||||||
|
|
||||||
// 模拟获取通知列表数据的 API 函数
|
const jlList = ref<JlItem[]>([]);
|
||||||
const fetchNoticeList = async (params: any): Promise<any> => {
|
const total = ref(0);
|
||||||
// 返回类型改为 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;
|
|
||||||
|
|
||||||
for (let i = 0; i < pageSize; i++) {
|
const fetchJlList = async () => {
|
||||||
const currentIndex = startIndex + i;
|
try {
|
||||||
if (currentIndex >= total) break; // 超出总数则停止
|
const response = await uni.request({
|
||||||
|
url: `${BASE_URL}/mobile/jl/list`,
|
||||||
const status =
|
method: "GET",
|
||||||
currentIndex % 3 === 0
|
data: {pageNo: 1, pageSize: 10},
|
||||||
? "draft"
|
header: {"Content-Type": "application/json"}
|
||||||
: currentIndex % 3 === 1
|
});
|
||||||
? "published"
|
if (response.statusCode === 200 && response.data) {
|
||||||
: "ended";
|
const result = response.data;
|
||||||
mockData.push({
|
const pageData = result.data || result;
|
||||||
id: `notice_${currentIndex + 1}`,
|
if (pageData.result && Array.isArray(pageData.result.rows)) {
|
||||||
title: `重要通知标题 ${currentIndex + 1}`,
|
jlList.value = pageData.result.rows;
|
||||||
excerpt: `这是通知 ${currentIndex + 1} 的内容摘要,只显示一部分...`,
|
total.value = pageData.result.total || 0;
|
||||||
status: status,
|
} else {
|
||||||
statusText:
|
jlList.value = [];
|
||||||
status === "draft"
|
total.value = 0;
|
||||||
? "草稿"
|
|
||||||
: 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
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
} else {
|
||||||
resolve({
|
jlList.value = [];
|
||||||
message: "获取成功",
|
total.value = 0;
|
||||||
resultCode: 1,
|
}
|
||||||
rows: mockData,
|
} catch (e) {
|
||||||
total: total,
|
jlList.value = [];
|
||||||
});
|
total.value = 0;
|
||||||
}, 800); // 模拟网络延迟
|
}
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const [register, { reload }] = useLayout({
|
onMounted(() => {
|
||||||
api: fetchNoticeList,
|
fetchJlList();
|
||||||
});
|
});
|
||||||
|
|
||||||
// 跳转到详情页
|
// 跳转到详情页
|
||||||
const goToDetail = (noticeId: string) => {
|
const goToDetail = (jlId: string) => {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `/pages/view/notice/detail?id=${noticeId}`,
|
url: `/pages/view/notice/detail?id=${jlId}`,
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -126,21 +99,34 @@ const goToPublish = () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
// 根据状态获取对应的 CSS 类
|
// 根据状态获取对应的 CSS 类
|
||||||
const getStatusClass = (status: "published" | "draft" | "ended") => {
|
const getStatusClass = (status: string) => {
|
||||||
if (status === "published") return "status-published";
|
if (status === "A") return "status-published";
|
||||||
if (status === "draft") return "status-draft";
|
if (status === "B") return "status-draft";
|
||||||
if (status === "ended") return "status-ended";
|
return "status-ended";
|
||||||
return "";
|
};
|
||||||
|
|
||||||
|
// 根据状态获取状态文字
|
||||||
|
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>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss">
|
<style scoped lang="scss">
|
||||||
.notice-list-page {
|
.jl-list-page {
|
||||||
position: relative; // 为了 FAB 定位
|
position: relative; // 为了 FAB 定位
|
||||||
min-height: 100vh; // 确保 FAB 总在视图内
|
min-height: 100vh; // 确保 FAB 总在视图内
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-card {
|
.jl-card {
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
border-radius: 8px;
|
border-radius: 8px;
|
||||||
padding: 15px;
|
padding: 15px;
|
||||||
@ -155,7 +141,7 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
|
|||||||
align-items: flex-start;
|
align-items: flex-start;
|
||||||
margin-bottom: 8px;
|
margin-bottom: 8px;
|
||||||
|
|
||||||
.notice-title {
|
.jl-title {
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #333;
|
color: #333;
|
||||||
@ -169,7 +155,7 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
|
|||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
.notice-status {
|
.jl-status {
|
||||||
font-size: 12px;
|
font-size: 12px;
|
||||||
padding: 2px 6px;
|
padding: 2px 6px;
|
||||||
border-radius: 4px;
|
border-radius: 4px;
|
||||||
@ -180,9 +166,11 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
|
|||||||
&.status-published {
|
&.status-published {
|
||||||
background-color: #19be6b; // 绿色-已发布
|
background-color: #19be6b; // 绿色-已发布
|
||||||
}
|
}
|
||||||
|
|
||||||
&.status-draft {
|
&.status-draft {
|
||||||
background-color: #ff9f0a; // 橙色-草稿
|
background-color: #ff9f0a; // 橙色-暂存
|
||||||
}
|
}
|
||||||
|
|
||||||
&.status-ended {
|
&.status-ended {
|
||||||
background-color: #999999; // 灰色-已结束
|
background-color: #999999; // 灰色-已结束
|
||||||
}
|
}
|
||||||
@ -198,7 +186,8 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
|
|||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
float: left; // 文字环绕图片
|
float: left; // 文字环绕图片
|
||||||
}
|
}
|
||||||
.notice-excerpt {
|
|
||||||
|
.jl-excerpt {
|
||||||
font-size: 14px;
|
font-size: 14px;
|
||||||
color: #666;
|
color: #666;
|
||||||
line-height: 1.5;
|
line-height: 1.5;
|
||||||
@ -209,12 +198,6 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
|
|||||||
-webkit-line-clamp: 3;
|
-webkit-line-clamp: 3;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
}
|
}
|
||||||
// 清除浮动影响(如果用了 float)
|
|
||||||
// &::after {
|
|
||||||
// content: "";
|
|
||||||
// display: table;
|
|
||||||
// clear: both;
|
|
||||||
// }
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.card-footer {
|
.card-footer {
|
||||||
@ -247,4 +230,10 @@ const getStatusClass = (status: "published" | "draft" | "ended") => {
|
|||||||
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
|
||||||
z-index: 10;
|
z-index: 10;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.empty-list {
|
||||||
|
text-align: center;
|
||||||
|
color: #999;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user