213 lines
3.9 KiB
Vue
213 lines
3.9 KiB
Vue
<template>
|
||
<view>
|
||
<MessageNavBar :phone="data.phone" :isScroll="data.isScroll">
|
||
<MessageList :phone="data.phone" :list="defaultList" @item-click="itemClick"></MessageList>
|
||
</MessageNavBar>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import MessageNavBar from '@/components/message/list/message-nav-bar.vue'
|
||
import MessageList from '@/components/message/list/list.vue'
|
||
import {
|
||
ref,
|
||
reactive
|
||
} from 'vue'
|
||
import {
|
||
onLoad,
|
||
onPageScroll
|
||
} from "@dcloudio/uni-app";
|
||
import {
|
||
stringUtil,
|
||
util
|
||
} from '@/utils/common.js';
|
||
|
||
const defaultList = [
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: true,
|
||
unReadNumber: 100,
|
||
noNotice: true,
|
||
img: "",
|
||
title: "系统通知",
|
||
content: "您的账户于今日 08:30 在异地登录，请确认是否为本人操作。",
|
||
time: "2026-03-11 08:31:00"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: true,
|
||
noNotice: true,
|
||
img: "",
|
||
title: "12306",
|
||
content: "市燃管办温馨提示：依法安全文明燃放烟花爆竹，共护平安幸福家园呵呵哈哈哈还好共护平安幸福家园呵呵哈哈哈还好",
|
||
time: "2026-03-10 14:30:00"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "支付宝支付",
|
||
content: "支付成功，您在XX超市消费了 45.00 元。",
|
||
time: "2026-03-10 18:20:15"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "花呗提醒",
|
||
content: "本月账单已出，请在 9 号前还款，避免逾期记录。",
|
||
time: "2026-03-09 09:00:00"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: true,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "顺丰速运",
|
||
content: "您的快递已到达XX驿站，凭取件码 8899 取件。",
|
||
time: "2026-03-01 10:15:22"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: true,
|
||
img: "",
|
||
title: "蚂蚁森林",
|
||
content: "您的好友偷走了你 5g 绿色能量，快去看看吧！",
|
||
time: "2026-02-28 07:45:10"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "余额宝",
|
||
content: "昨日收益已到账，恭喜您获得收益 0.58 元。",
|
||
time: "2026-02-27 06:30:00"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "10086",
|
||
content: "【流量使用提示】您本月的套餐流量已使用达 80%，请注意余额。",
|
||
time: "2026-02-26 15:10:45"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: true,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "饿了么",
|
||
content: "您的外卖已送达，祝您用餐愉快，别忘了给骑手五星好评哦~",
|
||
time: "2026-02-25 12:40:33"
|
||
},
|
||
{
|
||
id: stringUtil.uuid(),
|
||
unRead: false,
|
||
noNotice: false,
|
||
img: "",
|
||
title: "淘宝通知",
|
||
content: "您关注的商品降价啦，快来抢购吧！",
|
||
time: "2026-02-20 20:55:12"
|
||
}
|
||
]
|
||
|
||
const data = reactive({
|
||
navBar: {
|
||
title: '信息',
|
||
bgColor: '#FFFFFF',
|
||
},
|
||
phone: 'iphone',
|
||
isScroll: false
|
||
})
|
||
|
||
const options = [{
|
||
text: '取消',
|
||
style: {
|
||
backgroundColor: '#007aff'
|
||
}
|
||
}, {
|
||
text: '确认',
|
||
style: {
|
||
backgroundColor: '#dd524d'
|
||
}
|
||
}]
|
||
|
||
onLoad((options) => {
|
||
if (options.phone) {
|
||
data.phone = options.phone
|
||
}
|
||
})
|
||
|
||
onPageScroll((e) => {
|
||
console.log(e.scrollTop)
|
||
if (e.scrollTop > 60) {
|
||
data.isScroll = true
|
||
} else {
|
||
data.isScroll = false
|
||
}
|
||
})
|
||
|
||
const itemClick = (item) => {
|
||
util.goPage(`/pages/message/chat-page/chat-page?phone=${data.phone}&data=${JSON.stringify(item)}`)
|
||
}
|
||
|
||
</script>
|
||
|
||
<style>
|
||
@import '@/common/main.css';
|
||
|
||
page {
|
||
background-color: #FFFFFF;
|
||
}
|
||
</style>
|
||
<style lang="less">
|
||
::v-deep .uni-navbar__header-btns {
|
||
width: 100px !important;
|
||
flex: 1;
|
||
}
|
||
|
||
.iphone-style {
|
||
.mg-r-30 {
|
||
margin-right: 60rpx;
|
||
}
|
||
|
||
.mg-r-5 {
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.left-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
}
|
||
|
||
.right-icon {
|
||
width: 48rpx;
|
||
height: 48rpx;
|
||
}
|
||
|
||
.left-text {
|
||
font-size: 32rpx;
|
||
color: #0278E2;
|
||
margin-left: 10rpx;
|
||
}
|
||
|
||
.center-text {
|
||
font-size: 32rpx;
|
||
color: #1a1a1a;
|
||
}
|
||
}
|
||
|
||
.mi-style {
|
||
.right-icon {
|
||
width: 40rpx;
|
||
height: 40rpx;
|
||
margin-right: 30rpx;
|
||
}
|
||
}
|
||
</style>
|