<template>
|
<view class="message-page">
|
<view class="message-page__nav" :style="{ paddingTop: statusBarHeight + 'px' }">
|
<view class="message-page__nav-inner">
|
<text class="message-page__nav-title">消息</text>
|
</view>
|
</view>
|
|
<scroll-view class="message-page__body" scroll-y :style="bodyStyle" @scrolltolower="loadMore">
|
<view class="message-page__list">
|
<view v-for="item in messageList" :key="item.id" class="message-card" @click="handleClick(item)">
|
<view class="message-card__icon-wrap">
|
<view class="message-card__icon-bg">
|
<text class="message-card__icon">🔔</text>
|
</view>
|
<view v-if="item.status === 0" class="message-card__dot"></view>
|
</view>
|
|
<view class="message-card__content">
|
<text class="message-card__title">{{ item.title }}</text>
|
<text class="message-card__desc">{{ item.content }}</text>
|
<text class="message-card__time">{{ item.createTime }}</text>
|
</view>
|
</view>
|
|
<view v-if="loading" class="message-page__loading">
|
<text class="message-page__loading-text">加载中...</text>
|
</view>
|
<view v-if="finished && messageList.length > 0" class="message-page__loading">
|
<text class="message-page__loading-text">没有更多了</text>
|
</view>
|
<view v-if="!loading && messageList.length === 0" class="message-page__empty">
|
<image class="message-page__empty-icon" src="/static/image/default_nodata@2x.png" mode="aspectFit"></image>
|
</view>
|
</view>
|
</scroll-view>
|
</view>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
statusBarHeight: 0,
|
navHeight: 0,
|
page: 1,
|
capacity: 10,
|
messageList: [],
|
loading: false,
|
finished: false
|
}
|
},
|
computed: {
|
bodyStyle() {
|
return {
|
marginTop: this.navHeight + 'px',
|
height: `calc(100vh - ${this.navHeight}px)`
|
}
|
}
|
},
|
onLoad() {
|
const systemInfo = uni.getSystemInfoSync()
|
this.statusBarHeight = systemInfo.statusBarHeight || 0
|
this.navHeight = this.statusBarHeight + uni.upx2px(88)
|
},
|
|
onShow() {
|
this.refreshList()
|
},
|
|
onReachBottom() {
|
this.loadMore()
|
},
|
|
methods: {
|
handleClick(item) {
|
if (item.objType === 0) {
|
uni.navigateTo({
|
url: '/pages/order-detail/order-detail?id=' + item.objId
|
})
|
}
|
},
|
refreshList() {
|
this.page = 1
|
this.messageList = []
|
this.finished = false
|
this.getMessageList()
|
},
|
|
loadMore() {
|
if (this.loading || this.finished) return
|
this.page++
|
this.getMessageList()
|
},
|
|
getMessageList() {
|
this.loading = true
|
this.$u.api.driverNoticePage({ capacity: this.capacity, page: this.page, model: {} }).then(res => {
|
this.loading = false
|
if (res.code === 200) {
|
const list = res.data.records || []
|
if (this.page === 1) {
|
this.messageList = list
|
this.$u.api.driverReadAllNotice()
|
} else {
|
this.messageList = [...this.messageList, ...list]
|
}
|
this.finished = list.length < this.capacity
|
}
|
})
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.message-page {
|
height: 100vh;
|
background: #f6f8fc;
|
overflow: hidden;
|
|
&__nav {
|
position: fixed;
|
left: 0;
|
top: 0;
|
right: 0;
|
z-index: 10;
|
background: linear-gradient(180deg, #1f73f6 0%, #1b6df2 100%);
|
}
|
|
&__nav-inner {
|
height: 88rpx;
|
display: flex;
|
align-items: center;
|
padding: 0 24rpx;
|
}
|
|
&__nav-title {
|
font-size: 36rpx;
|
font-weight: 700;
|
color: #ffffff;
|
}
|
|
&__body {
|
box-sizing: border-box;
|
}
|
|
&__list {
|
padding: 18rpx 18rpx calc(env(safe-area-inset-bottom) + 24rpx);
|
}
|
|
&__loading {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
padding: 30rpx 0;
|
}
|
|
&__loading-text {
|
font-size: 26rpx;
|
color: #999;
|
}
|
|
&__empty {
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
height: 100%;
|
}
|
|
&__empty-icon {
|
width: 320rpx;
|
height: 320rpx;
|
}
|
}
|
|
.message-card {
|
display: flex;
|
align-items: flex-start;
|
gap: 18rpx;
|
padding: 24rpx 20rpx;
|
margin-bottom: 18rpx;
|
border-radius: 18rpx;
|
background: #ffffff;
|
box-shadow: 0 8rpx 20rpx rgba(28, 55, 106, 0.04);
|
|
&__icon-wrap {
|
position: relative;
|
flex-shrink: 0;
|
}
|
|
&__icon-bg {
|
width: 52rpx;
|
height: 52rpx;
|
border-radius: 50%;
|
background: #fff7e3;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
}
|
|
&__icon {
|
font-size: 26rpx;
|
line-height: 1;
|
}
|
|
&__dot {
|
position: absolute;
|
right: 0;
|
top: 0;
|
width: 14rpx;
|
height: 14rpx;
|
border-radius: 50%;
|
background: #ff3b30;
|
border: 2rpx solid #ffffff;
|
}
|
|
&__content {
|
flex: 1;
|
min-width: 0;
|
}
|
|
&__title {
|
display: block;
|
font-size: 36rpx;
|
font-weight: 700;
|
color: #2b3139;
|
line-height: 1.35;
|
}
|
|
&__desc {
|
display: block;
|
margin-top: 10rpx;
|
font-size: 28rpx;
|
line-height: 1.55;
|
color: #8c95a3;
|
}
|
|
&__time {
|
display: block;
|
margin-top: 16rpx;
|
font-size: 26rpx;
|
color: #b1b7c1;
|
}
|
}
|
</style>
|
