lanan-app/pages/message/message.vue

246 lines
5.1 KiB
Vue
Raw Normal View History

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页面确认声_耳聆网_[声音ID36839].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>