|
@@ -1,11 +1,24 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar title-color="#fff" :custom-back="customBack" :border-bottom="false" back-icon-color="#CCE8FF" :background="{background: '#008CFF' }" title="消息中心"></u-navbar>
|
|
|
- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" >
|
|
|
- <scroll-view scroll-y style="height: 100%; width: 100%;" v-for="(messageItem, index) in messageList" :key="messageItem.id">
|
|
|
+ <u-navbar
|
|
|
+ title-color="#fff"
|
|
|
+ :custom-back="customBack"
|
|
|
+ :border-bottom="false"
|
|
|
+ back-icon-color="#CCE8FF"
|
|
|
+ :background="{background: '#008CFF' }"
|
|
|
+ title="消息中心"
|
|
|
+ />
|
|
|
+ <mescroll-body
|
|
|
+ ref="mescrollRef"
|
|
|
+ @init="mescrollInit"
|
|
|
+ @down="downCallback"
|
|
|
+ @up="upCallback">
|
|
|
+ <scroll-view scroll-y style="height: 100%; width: 100%;" v-for="(messageItem, index) in messageList"
|
|
|
+ :key="messageItem.id">
|
|
|
<view class="time">{{messageItem.createTime}}</view>
|
|
|
<view class="page-box">
|
|
|
- <view class="message" @click="goDetails(messageItem.content,messageItem.createTime,messageItem.title)" >
|
|
|
+ <view class="message"
|
|
|
+ @click="goDetails(messageItem)">
|
|
|
<view class="message-top u-flex">
|
|
|
<view class="message-top-left u-flex-1">
|
|
|
<view class="car">{{messageItem.title}}</view>
|
|
@@ -23,8 +36,8 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
</scroll-view>
|
|
|
- </mescroll-body>
|
|
|
- <u-toast ref="uToast" />
|
|
|
+ </mescroll-body>
|
|
|
+ <u-toast ref="uToast" />
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
@@ -34,36 +47,16 @@
|
|
|
mixins: [MescrollMixin], // 使用mixin
|
|
|
data() {
|
|
|
return {
|
|
|
- messageList: [],
|
|
|
- newId:'',
|
|
|
- list: []
|
|
|
+ messageList: []
|
|
|
};
|
|
|
},
|
|
|
- computed: {
|
|
|
- // 价格小数
|
|
|
- priceDecimal() {
|
|
|
- return val => {
|
|
|
- if (val !== parseInt(val)) return val.slice(-2);
|
|
|
- else return '00';
|
|
|
- };
|
|
|
- },
|
|
|
- // 价格整数
|
|
|
- priceInt() {
|
|
|
- return val => {
|
|
|
- if (val !== parseInt(val)) return val.split('.')[0];
|
|
|
- else return val;
|
|
|
- };
|
|
|
- }
|
|
|
- },
|
|
|
methods: {
|
|
|
- customBack(){
|
|
|
- this.$u.route({
|
|
|
- type:'switchTab',
|
|
|
- url: 'pages/center/index'
|
|
|
- });
|
|
|
+ // 返回上一页
|
|
|
+ customBack() {
|
|
|
+ uni.navigateBack()
|
|
|
},
|
|
|
/*下拉刷新的回调*/
|
|
|
- downCallback(){
|
|
|
+ downCallback() {
|
|
|
// 第2种: 下拉刷新和上拉加载调同样的接口, 则不用第1种, 直接mescroll.resetUpScroll()即可
|
|
|
this.mescroll.resetUpScroll(); // 重置列表为第一页 (自动执行 page.num=1, 再触发upCallback方法 )
|
|
|
},
|
|
@@ -71,80 +64,89 @@
|
|
|
upCallback(page) {
|
|
|
let pageNum = page.num; // 页码, 默认从1开始
|
|
|
let pageSize = page.size; // 页长, 默认每页10条
|
|
|
- // this.getMessageList()
|
|
|
- this.$u.api.getMessageList({pageSize:pageSize ,pageNum: pageNum})
|
|
|
- .then(res=>{
|
|
|
- if(res.code == 200){
|
|
|
- console.log(res)
|
|
|
- this.list=[],
|
|
|
- res.data.rows.forEach(item =>{
|
|
|
- const obj = {
|
|
|
- id: item.id,
|
|
|
- }
|
|
|
- this.list.push(obj)
|
|
|
- console.log(obj)
|
|
|
+ this.$u.api.getMessageList({
|
|
|
+ pageSize: pageSize,
|
|
|
+ pageNum: pageNum
|
|
|
})
|
|
|
- this.newId = this.list[0]
|
|
|
- console.log(this.newId)
|
|
|
- // 接口返回的当前页数据列表 (数组)
|
|
|
- let curPageData = res.data.rows;
|
|
|
- // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
|
- let curPageLen = curPageData.length;
|
|
|
- // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
|
|
|
- let totalPage = res.data.pages;
|
|
|
- // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
|
|
|
- let totalSize = res.data.total;
|
|
|
- // 接口返回的是否有下一页 (true/false)
|
|
|
- // let hasNext = data.pages;
|
|
|
-
|
|
|
- //设置列表数据
|
|
|
- if(page.num == 1) this.messageList = []; //如果是第一页需手动置空列表
|
|
|
- this.messageList = this.messageList.concat(curPageData); //追加新数据
|
|
|
-
|
|
|
- // 请求成功,隐藏加载状态
|
|
|
- //方法一(推荐): 后台接口有返回列表的总页数 totalPage
|
|
|
- this.mescroll.endByPage(curPageLen, totalPage);
|
|
|
- setTimeout(()=>{
|
|
|
- this.mescroll.endSuccess(curPageLen)
|
|
|
- },20)
|
|
|
- }else{
|
|
|
- this.mescroll.endErr()
|
|
|
- }
|
|
|
- }).catch(err=>{
|
|
|
- this.$refs.uToast.show({
|
|
|
- title: err.msg,
|
|
|
- type: 'error',
|
|
|
+ .then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ // 接口返回的当前页数据列表 (数组)
|
|
|
+ let curPageData = res.data?.rows??[];
|
|
|
+ // 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
|
|
|
+ let curPageLen = curPageData.length;
|
|
|
+ // 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
|
|
|
+ let totalPage = res.data.pages;
|
|
|
+ // 接口返回的总数据量(如列表有26个数据,每页10条,共3页; 则totalSize=26)
|
|
|
+ let totalSize = res.data.total;
|
|
|
+ // 接口返回的是否有下一页 (true/false)
|
|
|
+ let hasNext = res.data.page < res.data.pages;
|
|
|
+
|
|
|
+ //设置列表数据
|
|
|
+ if (page.num == 1) this.messageList = []; // 如果是第一页需手动置空列表
|
|
|
+ this.messageList = this.messageList.concat(curPageData); // 追加新数据
|
|
|
+ // 后台接口有返回列表的总页数 totalPage
|
|
|
+ this.mescroll.endByPage(curPageLen, totalPage);
|
|
|
+ setTimeout(() => {
|
|
|
+ this.mescroll.endSuccess(curPageLen)
|
|
|
+ }, 20)
|
|
|
+ } else {
|
|
|
+ this.mescroll.endErr()
|
|
|
+ }
|
|
|
+ }).catch(err => {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: err.msg,
|
|
|
+ type: 'error',
|
|
|
+ });
|
|
|
});
|
|
|
- });
|
|
|
-
|
|
|
},
|
|
|
- goDetails(content,createTime,title){
|
|
|
- this.$u.api.messageRead({newId:this.newId})
|
|
|
- .then(res =>{
|
|
|
- if(res.code == 200){
|
|
|
- console.log(res)
|
|
|
- }
|
|
|
- });
|
|
|
- this.$u.route({
|
|
|
- url: 'pages/message/messageInfo',
|
|
|
- params: {
|
|
|
- content:JSON.stringify(content),
|
|
|
- createTime:JSON.stringify(createTime),
|
|
|
- title:JSON.stringify(title),
|
|
|
- }
|
|
|
- });
|
|
|
+ // 跳转消息详情
|
|
|
+ goDetails(item) {
|
|
|
+ if (Number(item.readFlag) === 0) {
|
|
|
+ this.$u.api.messageRead({
|
|
|
+ newId: item.id
|
|
|
+ })
|
|
|
+ .then(res => {
|
|
|
+ if (res.code == 200) {
|
|
|
+ this.$u.route({
|
|
|
+ url: 'pages/message/messageInfo',
|
|
|
+ params: {
|
|
|
+ details: JSON.stringify(item)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: res.msg,
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+ .catch(err => {
|
|
|
+ this.$refs.uToast.show({
|
|
|
+ title: '操作失败',
|
|
|
+ type: 'error'
|
|
|
+ })
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ this.$u.route({
|
|
|
+ url: 'pages/message/messageInfo',
|
|
|
+ params: {
|
|
|
+ details: JSON.stringify(item)
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
|
-/* #ifndef H5 */
|
|
|
-page {
|
|
|
- height: 100%;
|
|
|
- background-color: #F6F6FF;
|
|
|
-}
|
|
|
-/* #endif */
|
|
|
+ /* #ifndef H5 */
|
|
|
+ page {
|
|
|
+ height: 100%;
|
|
|
+ background-color: #F6F6FF;
|
|
|
+ }
|
|
|
+
|
|
|
+ /* #endif */
|
|
|
</style>
|
|
|
|
|
|
<style lang="scss" scoped>
|