2024-08-20 20:02:05 +08:00
|
|
|
|
<template>
|
|
|
|
|
<view class="content">
|
2024-08-22 19:34:47 +08:00
|
|
|
|
<VNavigationBarVue title="消息通知"></VNavigationBarVue>
|
|
|
|
|
<scroll-view scroll-y @scrolltolower="scrolltolower" class="mubu">
|
2024-08-20 20:02:05 +08:00
|
|
|
|
<view class="jsy" v-if="listArr.length == 0">
|
2024-08-22 20:13:57 +08:00
|
|
|
|
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode="aspectFit"></image>
|
2024-08-20 20:02:05 +08:00
|
|
|
|
</view>
|
2024-08-22 19:34:47 +08:00
|
|
|
|
<view class="noticeGroup" v-for="group in groupArr" :key="group.date">
|
|
|
|
|
<view class="noticeDate">{{ group.date }}</view>
|
|
|
|
|
<!-- <view class="" @click="dianyidain()">测试方法</view> -->
|
|
|
|
|
<view class="bao-box" v-for="(item,index) in group.noticeList" :key="index">
|
|
|
|
|
<view class="icon-lv">
|
|
|
|
|
<view class="hongdi" v-if="item.isRead == '0' "></view>
|
|
|
|
|
<image src="@/static/icons/message/notice.png" mode="aspectFit"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<view class="you">
|
|
|
|
|
<view class="box-top">
|
|
|
|
|
<text class="numone">{{item.title || ''}}</text>
|
|
|
|
|
<!-- <text class="numthree">{{item.createTime.slice(10, -3) || ''}}</text> -->
|
|
|
|
|
</view>
|
|
|
|
|
<view class="numtwo">{{item.content || ''}}</view>
|
2024-08-20 20:02:05 +08:00
|
|
|
|
</view>
|
|
|
|
|
</view>
|
|
|
|
|
</view>
|
2024-08-22 19:34:47 +08:00
|
|
|
|
|
|
|
|
|
</scroll-view>
|
2024-08-20 20:02:05 +08:00
|
|
|
|
|
2024-08-22 19:34:47 +08:00
|
|
|
|
<view style="width: 100%; height: 100rpx;"></view>
|
|
|
|
|
<tabBar msg="1"></tabBar>
|
2024-08-20 20:02:05 +08:00
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
import request from '../../utils/request';
|
|
|
|
|
import tabBar from '../../components/tabBar/tabBar.vue'
|
2024-08-22 19:34:47 +08:00
|
|
|
|
import VNavigationBarVue from '../../components/VNavigationBar.vue';
|
|
|
|
|
import dayjs from '../../uni_modules/uview-ui/libs/util/dayjs';
|
2024-08-20 20:02:05 +08:00
|
|
|
|
const innerAudioContext = uni.createInnerAudioContext();
|
|
|
|
|
export default {
|
|
|
|
|
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
msg: '2',
|
|
|
|
|
value2: 1,
|
|
|
|
|
pageNum: 1, //第几页
|
|
|
|
|
pageSize: 10, //一页多少张
|
|
|
|
|
totalPages: 0, //总数
|
2024-08-22 19:34:47 +08:00
|
|
|
|
listArr: [],
|
|
|
|
|
groupArr: []
|
2024-08-20 20:02:05 +08:00
|
|
|
|
}
|
|
|
|
|
},
|
|
|
|
|
onShow() {
|
|
|
|
|
this.driverRescuePage()
|
|
|
|
|
this.getlooklook()
|
|
|
|
|
},
|
|
|
|
|
components: {
|
|
|
|
|
tabBar,
|
2024-08-22 19:34:47 +08:00
|
|
|
|
VNavigationBarVue
|
2024-08-20 20:02:05 +08:00
|
|
|
|
},
|
|
|
|
|
methods: {
|
2024-08-22 19:34:47 +08:00
|
|
|
|
scrolltolower() {
|
|
|
|
|
if (this.pageNum >= this.totalPages) {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '没有下一页数据',
|
|
|
|
|
icon: 'none'
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
} else {
|
|
|
|
|
this.pageNum++
|
|
|
|
|
this.driverRescuePage()
|
|
|
|
|
}
|
|
|
|
|
},
|
2024-08-20 20:02:05 +08:00
|
|
|
|
dianyidain() {
|
|
|
|
|
console.log('执行了');
|
|
|
|
|
|
|
|
|
|
innerAudioContext.src =
|
|
|
|
|
'https://mp-8344f740-3cda-4d89-b902-7235115ddaaf.cdn.bspapp.com/8080/LOL页面确认声_耳聆网_[声音ID:36839].mp3';
|
|
|
|
|
innerAudioContext.play()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
driverRescuePage() {
|
|
|
|
|
let data = {
|
|
|
|
|
|
|
|
|
|
pageSize: this.pageSize,
|
|
|
|
|
pageNum: this.pageNum
|
|
|
|
|
}
|
|
|
|
|
request({
|
|
|
|
|
url: '/announcement/announcement/getOwnMsg',
|
|
|
|
|
method: 'get',
|
|
|
|
|
params: data
|
|
|
|
|
}).then((res) => {
|
|
|
|
|
if (res.code == 200) {
|
|
|
|
|
if (this.pageNum != 1) {
|
|
|
|
|
this.listArr = this.listArr.concat(res.rows)
|
2024-08-22 19:34:47 +08:00
|
|
|
|
this.noticeGroupByCreateTime(res.rows)
|
2024-08-20 20:02:05 +08:00
|
|
|
|
} else {
|
|
|
|
|
this.listArr = res.rows
|
2024-08-22 19:34:47 +08:00
|
|
|
|
this.groupArr = []
|
|
|
|
|
this.noticeGroupByCreateTime(this.listArr)
|
2024-08-20 20:02:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
let total = res.total
|
|
|
|
|
this.totalPages = Math.ceil(total / this.pageSize);
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
},
|
2024-08-22 19:34:47 +08:00
|
|
|
|
/**
|
|
|
|
|
* 消息通过日期分组
|
|
|
|
|
*/
|
|
|
|
|
noticeGroupByCreateTime(list) {
|
|
|
|
|
if (list && list.length > 0) {
|
|
|
|
|
list.forEach((item) => {
|
|
|
|
|
const day = dayjs(item.createTime).format('MM-DD HH:mm')
|
|
|
|
|
const find = this.groupArr.find(f => f.date === day)
|
|
|
|
|
if (find) {
|
|
|
|
|
find.noticeList.push(item)
|
|
|
|
|
} else {
|
|
|
|
|
this.groupArr.push({
|
|
|
|
|
date: day,
|
|
|
|
|
noticeList: [item]
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
console.log('this.groupArr: ',this.groupArr);
|
|
|
|
|
},
|
2024-08-20 20:02:05 +08:00
|
|
|
|
async getlooklook() {
|
|
|
|
|
let res = await request({
|
|
|
|
|
url: '/announcement/announcement/setAllRead',
|
|
|
|
|
method: 'get',
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.content {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: calc(100vh);
|
2024-08-22 19:34:47 +08:00
|
|
|
|
background: #F7F8FC;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
2024-08-22 19:34:47 +08:00
|
|
|
|
flex-direction: column;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.mubu {
|
2024-08-22 19:34:47 +08:00
|
|
|
|
flex: 1;
|
|
|
|
|
height: 0;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
width: 100%;
|
2024-08-22 19:34:47 +08:00
|
|
|
|
background: #F7F8FC;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
box-sizing: border-box;
|
2024-08-22 19:34:47 +08:00
|
|
|
|
padding: 20rpx 32rpx;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.noticeGroup {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
row-gap: 24rpx;
|
|
|
|
|
padding-bottom: 30rpx;
|
|
|
|
|
.noticeDate {
|
|
|
|
|
color: #929292;
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
text-align: center;
|
|
|
|
|
}
|
2024-08-20 20:02:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.bao-box {
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
2024-08-22 19:34:47 +08:00
|
|
|
|
align-items: flex-start;
|
|
|
|
|
column-gap: 20rpx;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.icon-lv {
|
2024-08-22 19:34:47 +08:00
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
width: 88rpx;
|
|
|
|
|
height: 88rpx;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
border-radius: 50%;
|
|
|
|
|
position: relative;
|
|
|
|
|
|
|
|
|
|
image {
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.hongdi {
|
|
|
|
|
position: absolute;
|
|
|
|
|
right: 2px;
|
|
|
|
|
top: 2px;
|
2024-08-22 19:34:47 +08:00
|
|
|
|
width: 20rpx;
|
|
|
|
|
height: 20rpx;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
background: #FF3829;
|
|
|
|
|
border-radius: 50%;
|
2024-08-22 19:34:47 +08:00
|
|
|
|
z-index: 1;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ddx {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.you {
|
|
|
|
|
width: 80%;
|
2024-08-22 19:34:47 +08:00
|
|
|
|
background: #FFFFFF;
|
|
|
|
|
box-shadow: 0rpx 4rpx 8rpx 0rpx rgba(0,0,0,0.06);
|
|
|
|
|
border-radius: 16rpx;
|
|
|
|
|
border: 2rpx solid rgba(50,125,251,0.05);
|
|
|
|
|
padding: 26rpx 34rpx;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.box-top {
|
|
|
|
|
width: 100%;
|
|
|
|
|
display: flex;
|
|
|
|
|
justify-content: space-between;
|
|
|
|
|
align-items: center;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.numone {
|
2024-08-22 19:34:47 +08:00
|
|
|
|
font-size: 32rpx;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
font-family: Microsoft YaHei;
|
|
|
|
|
font-weight: 400;
|
2024-08-22 19:34:47 +08:00
|
|
|
|
color: #000000;
|
|
|
|
|
|
2024-08-20 20:02:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.numtwo {
|
2024-08-22 19:34:47 +08:00
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
color: #929292;
|
|
|
|
|
margin-top: 4rpx;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.numthree {
|
2024-08-22 19:34:47 +08:00
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
color: #929292;
|
2024-08-20 20:02:05 +08:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.jsy {
|
|
|
|
|
width: 95%;
|
|
|
|
|
margin: 10px auto;
|
|
|
|
|
}
|
|
|
|
|
</style>
|