修改消息中心ui
parent
a511a61fa8
commit
0f3bd247ef
|
|
@ -50,7 +50,7 @@ export default {
|
|||
data() {
|
||||
return {
|
||||
refreshing: false, // 下拉刷新状态
|
||||
avatar: 'https://img.xiaoces.com/photos/logo200.png',
|
||||
avatar: 'https://img.xiaoces.com/photos/logo.png',
|
||||
messageList: [],
|
||||
isHaveOldData: true,
|
||||
scrollId: null,
|
||||
|
|
|
|||
|
|
@ -3,36 +3,37 @@
|
|||
<!-- 消息列表 -->
|
||||
<scroll-view :scroll-y="true"
|
||||
class="message-list"
|
||||
@scrolltolower="onLoadMore"
|
||||
:scroll-top="scrollTop"
|
||||
v-if="messageList.length>0">
|
||||
<view
|
||||
v-for="(item, index) in messageList"
|
||||
:key="index"
|
||||
:id="`item${item.id}`"
|
||||
@click="gotoDetail(item)"
|
||||
class="message-item"
|
||||
>
|
||||
<!-- 图片区域（带未读角标 + 渐变遮罩） -->
|
||||
<view class="img-box">
|
||||
<image class="bg-img" :src="item.image" mode="aspectFill"></image>
|
||||
<image class="bg-img" :src="item.imageUrl" mode="aspectFill"></image>
|
||||
<!-- 新增：底部渐变遮罩层 -->
|
||||
<view class="gradient-mask"></view>
|
||||
<view class="unread-tag" v-if="item.unread">未读</view>
|
||||
<view class="unread-tag" v-if="item.readStatus===0">未读</view>
|
||||
<text class="img-title">{{ item.title }}</text>
|
||||
</view>
|
||||
|
||||
<!-- 额外描述文本（仅第三条有） -->
|
||||
<view class="desc-text" v-if="item.desc">
|
||||
<text>{{ item.desc }}</text>
|
||||
<text class="link-btn" @click="handleLink">立即认证✅</text>
|
||||
<view class="desc-text" v-if="item.content">
|
||||
<text>{{ item.content }}</text>
|
||||
<!-- <text class="link-btn" @click="handleLink">立即认证✅</text>-->
|
||||
</view>
|
||||
|
||||
<!-- 底部信息栏 -->
|
||||
<view class="info-bar">
|
||||
<view class="sender-info">
|
||||
<image class="sender-icon" src="https://picsum.photos/32/32" mode="aspectFill"></image>
|
||||
<text class="sender-name">{{ item.sender }}</text>
|
||||
<image class="sender-icon" :src="item.imageUrl || avatarUrl" mode="aspectFill"></image>
|
||||
<text class="sender-name">{{ item.createBy || '小策官方团队'}}</text>
|
||||
</view>
|
||||
<text class="send-time">{{ item.time }}</text>
|
||||
<text class="send-time">{{ formatTime(item.createTime) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<uni-load-more v-if="messageList.length>4" iconType="auto" :status="status" :content-text="contentText" />
|
||||
|
|
@ -46,61 +47,29 @@
|
|||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
import {formatTime} from "@/utils/agri";
|
||||
import {listMessage} from "@/api/warn/message";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
messageList: [
|
||||
{
|
||||
id: 1,
|
||||
image: "https://picsum.photos/id/1031/800/400", // 城市建筑图
|
||||
title: "下班时间到了，勿浪费公司水电，请滚",
|
||||
sender: "图鸟官方团队",
|
||||
time: "2024-02-28 18:00",
|
||||
unread: true,
|
||||
desc: ""
|
||||
},
|
||||
{
|
||||
id: 2,
|
||||
image: "https://picsum.photos/id/1059/800/400", // 新年装饰图
|
||||
title: "新年新气象，除夕快乐",
|
||||
sender: "图鸟官方团队",
|
||||
time: "2024-02-09 16:28",
|
||||
unread: false,
|
||||
desc: ""
|
||||
},
|
||||
{
|
||||
id:3,
|
||||
image: "https://picsum.photos/id/180/800/400", // 紫色沙漏图
|
||||
title: "企业认证，到期后企业使用将受限",
|
||||
sender: "图鸟官方团队",
|
||||
time: "2024-01-22 16:28",
|
||||
unread: false,
|
||||
desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
|
||||
},
|
||||
{
|
||||
id:4,
|
||||
image: "https://picsum.photos/id/180/800/400", // 紫色沙漏图
|
||||
title: "企业认证，到期后企业使用将受限",
|
||||
sender: "图鸟官方团队",
|
||||
time: "2024-01-22 16:28",
|
||||
unread: false,
|
||||
desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
|
||||
}
|
||||
],
|
||||
avatarUrl: "https://img.xiaoces.com/photos/logo.png",
|
||||
messageList: [],
|
||||
isHaveOldData: true,
|
||||
contentText: {
|
||||
contentdown: '查看更多',
|
||||
contentrefresh: '加载中.......',
|
||||
contentnomore: '没有更多数据了'
|
||||
},
|
||||
status: 'more'
|
||||
status: 'more',
|
||||
scrollTop: null
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
// 只允许查询七天以内消息默认展示今天
|
||||
this.getEventList();
|
||||
},
|
||||
methods: {
|
||||
formatTime,
|
||||
handleLink() {
|
||||
// 点击"立即认证"的跳转逻辑
|
||||
uni.showToast({ title: "跳转到认证页" })
|
||||
|
|
@ -112,7 +81,7 @@ export default {
|
|||
url: "/pages/news/subpages/eventDetail/index?title=" + item.title
|
||||
})
|
||||
},
|
||||
onLoadMore() {
|
||||
getEventList() {
|
||||
this.status = 'loading'
|
||||
if (!this.isHaveOldData) {
|
||||
setTimeout(() => {
|
||||
|
|
@ -122,89 +91,38 @@ export default {
|
|||
}, 800);
|
||||
return;
|
||||
}
|
||||
// 模拟接口请求延迟
|
||||
setTimeout(() => {
|
||||
// 生成10条新数据
|
||||
const newData = [
|
||||
{
|
||||
id: 3,
|
||||
image: "https://picsum.photos/id/180/800/400",
|
||||
title: "企业认证，到期后企业使用将受限",
|
||||
sender: "图鸟官方团队",
|
||||
time: "2024-01-22 16:28",
|
||||
unread: false,
|
||||
desc: "请于2024年06月08日前认证，否则认证标识将变为未认证状态，部分功能也将受限，点击"
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
image: "https://picsum.photos/id/119/800/400",
|
||||
title: "系统版本更新通知",
|
||||
sender: "平台运营中心",
|
||||
time: "2024-02-15 09:12",
|
||||
unread: true,
|
||||
desc: "新版本已发布，优化了页面加载速度并修复已知问题，建议立即更新体验。"
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
image: "https://picsum.photos/id/110/800/400",
|
||||
title: "账号安全提醒：异地登录检测",
|
||||
sender: "安全中心",
|
||||
time: "2024-02-18 21:45",
|
||||
unread: true,
|
||||
desc: "检测到您的账号在陌生设备登录，如非本人操作请及时修改密码并锁定账号。"
|
||||
},
|
||||
{
|
||||
id: 6,
|
||||
image: "https://picsum.photos/id/116/800/400",
|
||||
title: "企业套餐续费提醒",
|
||||
sender: "客户服务部",
|
||||
time: "2024-03-01 14:30",
|
||||
unread: false,
|
||||
desc: "您的企业套餐即将到期，为不影响正常使用，请尽快完成续费操作。"
|
||||
},
|
||||
{
|
||||
id: 7,
|
||||
image: "https://picsum.photos/id/111/800/400",
|
||||
title: "新功能上线邀请体验",
|
||||
sender: "产品团队",
|
||||
time: "2024-03-10 11:20",
|
||||
unread: false,
|
||||
desc: "数据可视化与批量导出功能正式上线，诚邀您体验并提出宝贵意见。"
|
||||
},
|
||||
{
|
||||
id: 8,
|
||||
image: "https://picsum.photos/id/114/800/400",
|
||||
title: "违规内容处理通知",
|
||||
sender: "内容审核组",
|
||||
time: "2024-03-20 16:05",
|
||||
unread: true,
|
||||
desc: "您发布的部分内容不符合平台规范，已做隐藏处理，请及时修改后重新提交。"
|
||||
},
|
||||
{
|
||||
id: 9,
|
||||
image: "https://picsum.photos/id/112/800/400",
|
||||
title: "月度使用报告已生成",
|
||||
sender: "数据中心",
|
||||
time: "2024-04-01 10:00",
|
||||
unread: false,
|
||||
desc: "您上月的平台使用数据报告已生成，包含使用时长、功能频次等详细信息。"
|
||||
var query = {
|
||||
msgType: "event"
|
||||
}
|
||||
listMessage(query).then(response => {
|
||||
if (response.code === 200) {
|
||||
this.messageList = response.rows.sort((a, b) => new Date(a.createTime) - new Date(b.createTime));
|
||||
if (response.rows.length === 0) {
|
||||
this.isHaveOldData = false;
|
||||
}
|
||||
}
|
||||
}).finally(()=>{
|
||||
// 在数据更新后设置 scrollTop
|
||||
this.$nextTick(() => {
|
||||
// 更新数据的长度
|
||||
this.scrollTop = 9999;
|
||||
});
|
||||
// 结束刷新状态
|
||||
this.status = 'nomore'
|
||||
})
|
||||
}
|
||||
]
|
||||
// 插入到列表最前面
|
||||
this.messageList = [ ...this.messageList,...newData];
|
||||
this.status = 'more'
|
||||
}, 800);
|
||||
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
/* 页面容器 */
|
||||
.message-page {
|
||||
height: 100vh;
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
/* 消息列表 */
|
||||
|
|
|
|||
Loading…
Reference in New Issue