| | |
| | | </view> |
| | | </view> |
| | | |
| | | <scroll-view class="message-page__body" scroll-y :style="bodyStyle"> |
| | | <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"> |
| | | <view class="message-card__icon-wrap"> |
| | | <view class="message-card__icon-bg"> |
| | | <text class="message-card__icon">🔔</text> |
| | | </view> |
| | | <view v-if="item.unread" class="message-card__dot"></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.desc }}</text> |
| | | <text class="message-card__time">{{ item.time }}</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> |
| | |
| | | return { |
| | | statusBarHeight: 0, |
| | | navHeight: 0, |
| | | messageList: [ |
| | | { |
| | | id: 1, |
| | | title: '订单待配送', |
| | | desc: '您已抢单成功,订单:32728367487367,请按时到【中铁快运南站旗舰店】取货', |
| | | time: '2026-04-12 20:00', |
| | | unread: true |
| | | }, |
| | | { |
| | | id: 2, |
| | | title: '配送中', |
| | | desc: '订单:32728367487367已取货,请按时送达', |
| | | time: '2026-04-12 20:00', |
| | | unread: true |
| | | }, |
| | | { |
| | | id: 3, |
| | | title: '已送达', |
| | | desc: '订单:32728367487367已送达,请联系用户确认签收', |
| | | time: '2026-04-12 20:00', |
| | | unread: false |
| | | }, |
| | | { |
| | | id: 4, |
| | | title: '订单已完成', |
| | | desc: '订单:32728367487367已完成,相关订单结算会在3个工作日内完成', |
| | | time: '2026-04-12 20:00', |
| | | unread: false |
| | | }, |
| | | { |
| | | id: 5, |
| | | title: '订单已评价', |
| | | desc: '订单:32728367487367,用户已评价,可查看评价内容', |
| | | time: '2026-04-12 20:00', |
| | | unread: false |
| | | }, |
| | | { |
| | | id: 6, |
| | | title: '退款中', |
| | | desc: '订单:32728367487367,用户已提交退款申请,该订单任务已取消,请勿前往。', |
| | | time: '2026-04-12 20:00', |
| | | unread: false |
| | | }, |
| | | { |
| | | id: 7, |
| | | title: '订单已结算', |
| | | desc: '行李订单:3729378487987 平台已完成结算,金额为XX元,请注意查收', |
| | | time: '2026-04-12 20:00', |
| | | unread: false |
| | | } |
| | | ] |
| | | page: 1, |
| | | capacity: 10, |
| | | messageList: [], |
| | | loading: false, |
| | | finished: false |
| | | } |
| | | }, |
| | | computed: { |
| | |
| | | const systemInfo = uni.getSystemInfoSync() |
| | | this.statusBarHeight = systemInfo.statusBarHeight || 0 |
| | | this.navHeight = this.statusBarHeight + uni.upx2px(88) |
| | | }, |
| | | |
| | | onShow() { |
| | | this.refreshList() |
| | | }, |
| | | |
| | | onReachBottom() { |
| | | this.loadMore() |
| | | }, |
| | | |
| | | methods: { |
| | | 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> |
| | |
| | | &__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 { |