389 lines
9.1 KiB
Vue
389 lines
9.1 KiB
Vue
<template>
|
||
<view class="message-page">
|
||
<BasicListLayout @register="register">
|
||
<template #top>
|
||
<view class="tabs-container">
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: currentTab === 'A' }"
|
||
@click="changeTab('A')"
|
||
>
|
||
待办
|
||
</view>
|
||
<view
|
||
class="tab-item"
|
||
:class="{ active: currentTab === 'B' }"
|
||
@click="changeTab('B')"
|
||
>
|
||
已办
|
||
</view>
|
||
</view>
|
||
</template>
|
||
<template #default="{ data }">
|
||
<view class="white-bg-color r-md p-15 mb-15 flex-row no-side-margin" @click="goToDetail(data)">
|
||
<view class="card-left">
|
||
<view class="card-title">{{ data.xxbt }}</view>
|
||
<view class="card-desc" v-html="data.xxzy"></view>
|
||
<view class="card-meta">
|
||
<text>{{ data.xxtstime }}</text>
|
||
<text>{{ getTimeAgo(data.xxtstime) }}</text>
|
||
</view>
|
||
</view>
|
||
<view class="card-right">
|
||
<view class="tag" :class="getTagClass(data.xxlx)">
|
||
{{ getTagText(data.xxlx) }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
</BasicListLayout>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import {ref, onMounted, onActivated} from "vue";
|
||
import { useLayout } from "@/components/BasicListLayout/hooks/useLayout";
|
||
import { xxtsListApi } from "@/api/base/server";
|
||
import { getTimeAgo } from "@/utils/dateUtils";
|
||
import { useUserStore } from "@/store/modules/user";
|
||
import { useDataStore } from "@/store/modules/data";
|
||
import { useDicStore } from "@/store/modules/dic";
|
||
const { findByPid } = useDicStore();
|
||
const { setDb, setXxts } = useDataStore();
|
||
const { getJs } = useUserStore();
|
||
|
||
const dbLxMap = ref<any>({});
|
||
|
||
// 获取待办类型
|
||
const fetchDbLxMap = async () => {
|
||
try {
|
||
// 待办类型
|
||
const res = await findByPid({pid: 186148807});
|
||
if (res && res.result) {
|
||
// 将res.result的list转换成对象，key为dictionaryValue，value为dictionary
|
||
dbLxMap.value = res.result.reduce((acc: any, item: any) => {
|
||
acc[item.dictionaryCode] = {
|
||
value: item.dictionaryCode,
|
||
label: item.dictionaryValue,
|
||
className: item.remark
|
||
};
|
||
return acc;
|
||
}, {});
|
||
}
|
||
} catch (error) {
|
||
console.error("获取状态选项失败", error);
|
||
// 使用默认状态
|
||
dbLxMap.value = {};
|
||
}
|
||
};
|
||
|
||
const [register, {reload, setParam}] = useLayout({
|
||
api: xxtsListApi,
|
||
componentProps: {
|
||
auto: true // 改为true，让组件自动调用接口
|
||
},
|
||
});
|
||
|
||
const currentTab = ref('A'); // 0: 待办, 1: 已办
|
||
|
||
const fetchListData = async (tabIndex: string) => {
|
||
setParam({
|
||
dbZt: tabIndex,
|
||
jsrId: getJs.id,
|
||
sidx: "xxtstime",
|
||
sord: "desc",
|
||
});
|
||
reload();
|
||
};
|
||
|
||
const changeTab = (tabIndex: string) => {
|
||
if (currentTab.value !== tabIndex) {
|
||
currentTab.value = tabIndex;
|
||
fetchListData(tabIndex);
|
||
}
|
||
};
|
||
|
||
// 组件加载完成后，获取初始数据 (待办)
|
||
onMounted(() => {
|
||
fetchDbLxMap();
|
||
fetchListData(currentTab.value);
|
||
});
|
||
|
||
// 页面激活时重新加载数据（解决第二次进入不调用接口的问题）
|
||
onActivated(() => {
|
||
console.log('页面激活，重新加载数据');
|
||
fetchListData(currentTab.value);
|
||
});
|
||
|
||
const goToDetail = (data: any) => {
|
||
if (data && data.id) {
|
||
setDb(data);
|
||
setXxts(data); // 同时设置xxts数据，以便兼容微信工作号跳转
|
||
uni.navigateTo({
|
||
url: data.mobileUrl
|
||
});
|
||
}
|
||
};
|
||
|
||
// 获取标签样式类
|
||
const getTagClass = (xxlx: string) => {
|
||
// 根据xxlx字段值返回对应的样式类
|
||
const tagClassMap: Record<string, string> = {
|
||
'通知': 'tag-notice',
|
||
'任务': 'tag-task',
|
||
'审批': 'tag-approval',
|
||
'提醒': 'tag-reminder',
|
||
'公文': 'tag-official-document', // 为公文添加特定样式
|
||
'default': 'tag-default'
|
||
};
|
||
|
||
return tagClassMap[xxlx] || tagClassMap['default'];
|
||
};
|
||
|
||
// 获取标签显示文本
|
||
const getTagText = (xxlx: string) => {
|
||
// 移除调试信息
|
||
// console.log('xxlx字段值:', xxlx, '类型:', typeof xxlx);
|
||
|
||
// 如果xxlx有值，直接显示；否则显示默认文本
|
||
return xxlx || '通知';
|
||
};
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.message-page {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh; /* 或 calc(100vh - var(--window-top)) 如果需要精确计算 */
|
||
background-color: #f4f5f7;
|
||
}
|
||
|
||
// 自定义导航栏
|
||
.custom-navbar {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center; // 标题居中
|
||
height: 44px; // 标准导航栏高度
|
||
padding: 0 15px;
|
||
padding-top: var(--status-bar-height); // 适配状态栏
|
||
background-color: #ffffff;
|
||
position: relative;
|
||
border-bottom: 1px solid #eee;
|
||
|
||
.navbar-title {
|
||
font-size: 17px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
}
|
||
|
||
.navbar-actions {
|
||
position: absolute;
|
||
right: 15px;
|
||
top: var(--status-bar-height);
|
||
height: 44px;
|
||
display: flex;
|
||
align-items: center;
|
||
font-size: 18px; // ... 图标大小
|
||
color: #666;
|
||
}
|
||
}
|
||
|
||
// Tab 切换
|
||
.tabs-container {
|
||
display: flex;
|
||
background-color: #ffffff;
|
||
height: 45px;
|
||
border-bottom: 1px solid #eee;
|
||
flex-shrink: 0; // 防止被压缩
|
||
|
||
.tab-item {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 15px;
|
||
color: #666;
|
||
position: relative;
|
||
cursor: pointer;
|
||
|
||
&.active {
|
||
color: #447ade;
|
||
font-weight: bold;
|
||
|
||
&::after {
|
||
content: "";
|
||
position: absolute;
|
||
bottom: 0;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
width: 30px;
|
||
height: 3px;
|
||
background-color: #447ade;
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 内容滚动区域
|
||
.content-scroll {
|
||
flex: 1;
|
||
overflow-y: auto;
|
||
padding: 15px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.loading-placeholder,
|
||
.empty-placeholder {
|
||
padding: 40px 0;
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 14px;
|
||
}
|
||
|
||
// 消息卡片
|
||
.card-left {
|
||
flex: 1;
|
||
margin-right: 15px;
|
||
// 防止内容溢出，特别是标题和描述
|
||
min-width: 0;
|
||
|
||
.card-title {
|
||
font-size: 16px;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 5px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
}
|
||
|
||
.card-desc {
|
||
font-size: 13px;
|
||
color: #666;
|
||
margin-bottom: 10px;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: -webkit-box;
|
||
line-clamp: 2;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
}
|
||
|
||
.card-meta {
|
||
font-size: 12px;
|
||
color: #999;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
}
|
||
|
||
// 移除左右空白的卡片
|
||
.no-side-margin {
|
||
margin-left: 0;
|
||
margin-right: 0;
|
||
border-radius: 0; // 移除圆角，让卡片完全贴合边缘
|
||
}
|
||
|
||
.card-right {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
flex-shrink: 0; // 防止被压缩
|
||
flex: 0 0 70px; // 减小右侧区域宽度
|
||
margin-left: 15px;
|
||
|
||
.tag {
|
||
border-radius: 6px; // 稍微减小圆角
|
||
font-size: 12px; // 减小字体大小
|
||
font-weight: 600;
|
||
color: #ffffff;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 50px; // 减小标签宽度
|
||
height: 50px; // 减小标签高度，保持正方形
|
||
word-break: break-all;
|
||
white-space: normal;
|
||
text-align: center;
|
||
padding: 6px 3px; // 减小内边距
|
||
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12); // 稍微减小阴影
|
||
transition: all 0.3s ease;
|
||
line-height: 1.2; // 确保文字垂直居中
|
||
|
||
// 通知类型 - 蓝色渐变
|
||
&.tag-notice {
|
||
background: linear-gradient(135deg, #447ade 0%, #5a8de8 100%);
|
||
}
|
||
|
||
// 任务类型 - 绿色渐变
|
||
&.tag-task {
|
||
background: linear-gradient(135deg, #19be6b 0%, #23d160 100%);
|
||
}
|
||
|
||
// 审批类型 - 橙色渐变
|
||
&.tag-approval {
|
||
background: linear-gradient(135deg, #ff9f0a 0%, #ffb340 100%);
|
||
}
|
||
|
||
// 提醒类型 - 紫色渐变
|
||
&.tag-reminder {
|
||
background: linear-gradient(135deg, #9c27b0 0%, #ba68c8 100%);
|
||
}
|
||
|
||
// 公文类型 - 青色渐变
|
||
&.tag-official-document {
|
||
background: linear-gradient(135deg, #1abc9c 0%, #1dd2af 100%);
|
||
}
|
||
|
||
// 默认类型 - 深蓝色渐变（替代灰色）
|
||
&.tag-default {
|
||
background: linear-gradient(135deg, #34495e 0%, #5d6d7e 100%);
|
||
}
|
||
|
||
&:hover {
|
||
transform: translateY(-1px); // 减小悬停效果
|
||
box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
// 确保文字在正方形标签中正确显示
|
||
&::before {
|
||
content: '';
|
||
display: block;
|
||
height: 0;
|
||
width: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
// 响应式优化
|
||
@media (max-width: 375px) {
|
||
.card-right {
|
||
flex: 0 0 60px; // 适配新的标签尺寸
|
||
margin-left: 10px;
|
||
|
||
.tag {
|
||
width: 45px; // 适配小屏幕
|
||
height: 45px; // 保持正方形
|
||
font-size: 11px; // 减小字体
|
||
padding: 5px 2px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@media (max-width: 320px) {
|
||
.card-right {
|
||
flex: 0 0 55px; // 适配新的标签尺寸
|
||
margin-left: 8px;
|
||
|
||
.tag {
|
||
width: 40px; // 适配小屏幕
|
||
height: 40px; // 保持正方形
|
||
font-size: 10px; // 减小字体
|
||
padding: 4px 2px;
|
||
}
|
||
}
|
||
}
|
||
</style>
|