214 lines
3.9 KiB
Vue
214 lines
3.9 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="head-top">
|
||
<view class=""></view>
|
||
<view class="">消息</view>
|
||
<view class=""></view>
|
||
|
||
</view>
|
||
<view class="mubu">
|
||
<view class="jsy" v-if="listArr.length == 0">
|
||
<image src="http://www.nuoyunr.com/lananRsc/detection/qs.png" mode=""></image>
|
||
</view>
|
||
<!-- <view class="" @click="dianyidain()">测试方法</view> -->
|
||
<view class="bao-box" v-for="(item,index) in listArr" :key="index">
|
||
<view class="icon-lv">
|
||
<view class="hongdi" v-if="item.isRead == '0' "></view>
|
||
<image src="../../static/jiejin.png" mode=""></image>
|
||
</view>
|
||
<view class="you">
|
||
<view class="box-top">
|
||
<text class="numone">{{item.title || ''}}</text>
|
||
<text class="numthree">{{item.createTime.slice(0, -3) || ''}}</text>
|
||
</view>
|
||
<view class="numtwo">{{item.content || ''}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view style="width: 100%; height: 50px;"></view>
|
||
<tabBar :msg="msg"></tabBar>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import request from '../../utils/request';
|
||
import tabBar from '../../components/tabBar/tabBar.vue'
|
||
const innerAudioContext = uni.createInnerAudioContext();
|
||
export default {
|
||
|
||
data() {
|
||
return {
|
||
msg: '2',
|
||
value2: 1,
|
||
pageNum: 1, //第几页
|
||
pageSize: 10, //一页多少张
|
||
totalPages: 0, //总数
|
||
listArr: []
|
||
}
|
||
},
|
||
onShow() {
|
||
this.driverRescuePage()
|
||
this.getlooklook()
|
||
},
|
||
onReachBottom() {
|
||
if (this.pageNum >= this.totalPages) {
|
||
uni.showToast({
|
||
title: '没有下一页数据',
|
||
icon: 'none'
|
||
})
|
||
|
||
} else {
|
||
this.pageNum++
|
||
this.driverRescuePage()
|
||
}
|
||
},
|
||
components: {
|
||
tabBar,
|
||
},
|
||
methods: {
|
||
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)
|
||
} else {
|
||
this.listArr = res.rows
|
||
}
|
||
|
||
let total = res.total
|
||
this.totalPages = Math.ceil(total / this.pageSize);
|
||
}
|
||
})
|
||
},
|
||
async getlooklook() {
|
||
let res = await request({
|
||
url: '/announcement/announcement/setAllRead',
|
||
method: 'get',
|
||
})
|
||
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.content {
|
||
width: 100%;
|
||
height: calc(100vh);
|
||
background-color: #F6F6F6;
|
||
box-sizing: border-box;
|
||
padding-top: 40px;
|
||
}
|
||
|
||
.head-top {
|
||
width: 100%;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.mubu {
|
||
width: 100%;
|
||
background-color: #F6F6F6;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
}
|
||
|
||
.bao-box {
|
||
width: 100%;
|
||
background: white;
|
||
box-sizing: border-box;
|
||
padding: 15px;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
|
||
.icon-lv {
|
||
width: 40px;
|
||
height: 40px;
|
||
border-radius: 50%;
|
||
background: #CBF0D0;
|
||
box-sizing: border-box;
|
||
padding: 10px;
|
||
position: relative;
|
||
|
||
image {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
}
|
||
|
||
.hongdi {
|
||
position: absolute;
|
||
right: 2px;
|
||
top: 2px;
|
||
width: 6px;
|
||
height: 6px;
|
||
background: #FF3829;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.ddx {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.you {
|
||
width: 80%;
|
||
}
|
||
|
||
.box-top {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
.numone {
|
||
font-size: 14px;
|
||
font-family: Microsoft YaHei;
|
||
font-weight: 400;
|
||
}
|
||
|
||
.numtwo {
|
||
font-size: 16px;
|
||
color: #666666;
|
||
margin-top: 10px;
|
||
white-space: nowrap;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
|
||
}
|
||
|
||
.numthree {
|
||
font-size: 14px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.jsy {
|
||
width: 95%;
|
||
margin: 10px auto;
|
||
}
|
||
</style> |