| | |
| | | <template> |
| | | <view class="message-body"> |
| | | <u-empty mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png" v-if="messageList.length == 0" width="400" height="400" textSize="18"></u-empty> |
| | | <u-list @scrolltolower="scrolltolower" :height="1400"> |
| | | <u-list-item> |
| | | <u-swipe-action> |
| | | <u-swipe-action-item :options="options1" v-for="(item, index) in messageList" :key="item.id" @click="deleteMsg(item, index)"> |
| | | <u-badge :isDot="true" type="error" v-if="item.status === 0"></u-badge> |
| | | <u-cell size="large" :title="item.title" :label="item.content" @click="messageDetails(item, index)"> |
| | | <view class="prepose" slot="icon"><u-icon name="file-text" color="#a299a0" size="80"></u-icon></view> |
| | | </u-cell> |
| | | </u-swipe-action-item> |
| | | </u-swipe-action> |
| | | </u-list-item> |
| | | <view class="more-text" v-if="showMoreData && messageList.length !== 0">没有数据了...</view> |
| | | </u-list> |
| | | <u-modal :show="show" :content="content" :showCancelButton="true" @confirm="confirm" @cancel="cancel"></u-modal> |
| | | <u-empty mode="data" |
| | | icon="http://cdn.uviewui.com/uview/empty/data.png" |
| | | v-if="messageList.length == 0" |
| | | width="400" |
| | | height="400" |
| | | textSize="18" |
| | | text="暂无数据"></u-empty> |
| | | <view class="message-list"> |
| | | <u-list @scrolltolower="scrolltolower" |
| | | :height="1400"> |
| | | <u-list-item> |
| | | <u-swipe-action> |
| | | <u-swipe-action-item :options="options1" |
| | | :threshold="50" |
| | | v-for="(item, index) in messageList" |
| | | :key="item.id" |
| | | @click="deleteMsg(item, index)"> |
| | | <u-badge :isDot="true" |
| | | type="error" |
| | | v-if="item.status !== 1"></u-badge> |
| | | <!-- @click="messageDetails(item, index)" --> |
| | | <u-cell size="large"> |
| | | <u-parse |
| | | :content="item.content" |
| | | slot="label"></u-parse> |
| | | |
| | | <view class="prepose" |
| | | slot="icon"><u-icon name="volume" |
| | | color="#035CFB" |
| | | size="40"></u-icon></view> |
| | | <view slot="right-icon" style="font-size: 12px;"> |
| | | <view>{{ item.createTime }}</view> |
| | | <view>发送人:<text style="font-size:12px;color:#00000082">{{item.createByName}}</text></view> |
| | | </view> |
| | | </u-cell> |
| | | </u-swipe-action-item> |
| | | </u-swipe-action> |
| | | </u-list-item> |
| | | <!-- <view class="more-text" |
| | | v-if="showMoreData && messageList.length !== 0">没有数据了...</view> --> |
| | | </u-list> |
| | | </view> |
| | | <u-modal :show="show" |
| | | :content="content" |
| | | :showCancelButton="true" |
| | | @confirm="confirm" |
| | | @cancel="cancel"></u-modal> |
| | | </view> |
| | | </template> |
| | | |
| | | <script> |
| | | export default { |
| | | data() { |
| | | return { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | total: '', |
| | | messageList: [], |
| | | showMoreData: false, |
| | | options1: [ |
| | | { |
| | | export default { |
| | | data() { |
| | | return { |
| | | pageNum: 1, |
| | | pageSize: 10, |
| | | total: '', |
| | | messageList: [], |
| | | showMoreData: false, |
| | | options1: [{ |
| | | text: '删除' |
| | | } |
| | | ], |
| | | show: false, |
| | | content: '是否确认删除', |
| | | id: '', |
| | | index: '' |
| | | }; |
| | | }, |
| | | onShow() { |
| | | this.messageReq(); |
| | | }, |
| | | methods: { |
| | | // 触底加载 |
| | | scrolltolower() { |
| | | if (this.pageNum * this.pageSize >= this.total) return (this.showMoreData = true); |
| | | this.pageNum++; |
| | | }], |
| | | show: false, |
| | | content: '是否确认删除', |
| | | id: '', |
| | | index: '' |
| | | }; |
| | | }, |
| | | onShow() { |
| | | this.messageReq(); |
| | | }, |
| | | // 获取消息列表 |
| | | messageReq() { |
| | | uni.showLoading({ |
| | | title: '加载中' |
| | | }); |
| | | this.$reqGet('getMessageByUser', { current: this.pageNum, size: this.pageSize }).then(res => { |
| | | if (res.code == 0) { |
| | | uni.hideLoading(); |
| | | this.total = res.data.total; |
| | | if (this.pageNum > 1) { |
| | | this.messageList = this.messageList.concat(res.data.records); |
| | | } else if (this.pageNum == 1) { |
| | | this.messageList = res.data.records; |
| | | } |
| | | } else { |
| | | this.$u.toast('加载失败'); |
| | | } |
| | | }); |
| | | onPullDownRefresh(){ |
| | | this.messageReq(); |
| | | uni.stopPullDownRefresh(); |
| | | |
| | | }, |
| | | // 已读消息 |
| | | messageDetails(value, index) { |
| | | if (value.status == 0) { |
| | | this.$reqAllJson('readMessage', { id: value.id, status: value.status }, { method: 'PUT', 'Content-Type': 'application/json' }).then(res => { |
| | | onHide() { |
| | | this.messageList = []; |
| | | this.pageNum = 1; |
| | | }, |
| | | methods: { |
| | | // 触底加载 |
| | | scrolltolower() { |
| | | if (this.pageNum * this.pageSize >= this.total) return (this.showMoreData = true); |
| | | this.pageNum++; |
| | | this.messageReq(); |
| | | }, |
| | | // 获取消息列表 |
| | | messageReq() { |
| | | uni.showLoading({ |
| | | title: '加载中' |
| | | }); |
| | | this.$reqGet('getMessageByUser', { current: this.pageNum, size: this.pageSize }).then(res => { |
| | | if (res.code == 0) { |
| | | uni.navigateTo({ |
| | | url: `/pages/public-page/messageDetails/messageDetails?index=${index}` |
| | | }); |
| | | // uni.showLoading({ |
| | | // title: '加载中' |
| | | // }); |
| | | // this.$reqGet('getMessageByUser', { current: 1, size: this.pageSize }).then(res => { |
| | | // uni.hideLoading(); |
| | | // this.total = res.data.total; |
| | | // this.messageList = res.data.records; |
| | | // }); |
| | | uni.hideLoading(); |
| | | this.total = res.data.total; |
| | | |
| | | function removeTags(str) { |
| | | return str.replace(/<\/?[^>]+>/gi, ''); |
| | | } |
| | | if (this.pageNum > 1) { |
| | | this.messageList = this.messageList.concat(res.data.records); |
| | | this.messageList = this.messageList.map(v => { |
| | | return { |
| | | ...v, |
| | | title: v.title.slice(0, 8) + '...', |
| | | content: removeTags(v.content).trim() |
| | | }; |
| | | }); |
| | | } else if (this.pageNum == 1) { |
| | | this.messageList = res.data.records; |
| | | this.messageList = this.messageList.map(v => { |
| | | return { |
| | | ...v, |
| | | title: v.title.slice(0, 8) + '...', |
| | | content: removeTags(v.content).trim() |
| | | }; |
| | | }); |
| | | } |
| | | setTimeout(() => { |
| | | this.onShowMessage(); |
| | | }, 500); |
| | | } else { |
| | | this.$u.toast('加载失败'); |
| | | } |
| | | }); |
| | | } else { |
| | | uni.navigateTo({ |
| | | url: `/pages/public-page/messageDetails/messageDetails?index=${index}` |
| | | }); |
| | | } |
| | | }, |
| | | // 删除消息 |
| | | deleteMsg(value, index) { |
| | | this.show = true; |
| | | this.id = value.id; |
| | | }, |
| | | // 确认删除 |
| | | confirm() { |
| | | this.show = false; |
| | | this.$reqGet('delteMessage', { id: this.id }).then(res => { |
| | | if (res.code == 0) { |
| | | this.$u.toast('删除成功'); |
| | | setTimeout(() => { |
| | | uni.showLoading({ |
| | | title: '加载中' |
| | | }); |
| | | this.$reqGet('getMessageByUser', { current: 1, size: this.pageSize }).then(res => { |
| | | uni.hideLoading(); |
| | | this.total = res.data.total; |
| | | this.messageList = res.data.records; |
| | | }); |
| | | }, 800); |
| | | }, |
| | | // 已读消息 |
| | | messageDetails(value, index) { |
| | | if (value.status == 0) { |
| | | this.$reqAllJson('readMessage', { |
| | | id: value.id, |
| | | status: value |
| | | .status |
| | | }, { method: 'PUT', 'Content-Type': 'application/json' }).then(res => { |
| | | if (res.code == 0) { |
| | | uni.navigateTo({ |
| | | url: `/pages/public-page/messageDetails/messageDetails?messageId=${value.messageId}&id=${value.id}` |
| | | }); |
| | | } |
| | | }); |
| | | } else { |
| | | this.$u.toast('删除失败'); |
| | | uni.navigateTo({ |
| | | url: `/pages/public-page/messageDetails/messageDetails?messageId=${value.messageId}&id=${value.id}` |
| | | }); |
| | | } |
| | | }); |
| | | }, |
| | | cancel() { |
| | | this.show = false; |
| | | }, |
| | | //点开首页已消息 |
| | | onShowMessage(){ |
| | | const messageIds = this.messageList.filter(item=>item.status === 0); |
| | | console.log(messageIds,this.messageList,'messageIds') |
| | | this.$reqAllJson('readMessage', { |
| | | messageIds: messageIds.map(item=>item.id).join(","), |
| | | status: 0 |
| | | }, { method: 'PUT', 'Content-Type': 'application/json' }).then(res=>{ |
| | | console.log(res,'resss') |
| | | }) |
| | | //重新渲染接口 |
| | | this.$reqGet('getMessageByUser', { current: this.pageNum, size: this.pageSize }).then(res => { |
| | | if (res.code == 0) { |
| | | uni.hideLoading(); |
| | | this.total = res.data.total; |
| | | |
| | | function removeTags(str) { |
| | | return str.replace(/<\/?[^>]+>/gi, ''); |
| | | } |
| | | if (this.pageNum > 1) { |
| | | this.messageList = this.messageList.concat(res.data.records); |
| | | this.messageList = this.messageList.map(v => { |
| | | return { |
| | | ...v, |
| | | title: v.title.slice(0, 8) + '...', |
| | | content: removeTags(v.content).trim() |
| | | }; |
| | | }); |
| | | } else if (this.pageNum == 1) { |
| | | this.messageList = res.data.records; |
| | | this.messageList = this.messageList.map(v => { |
| | | return { |
| | | ...v, |
| | | title: v.title.slice(0, 8) + '...', |
| | | content: removeTags(v.content).trim() |
| | | }; |
| | | }); |
| | | } |
| | | } else { |
| | | this.$u.toast('加载失败'); |
| | | } |
| | | }); |
| | | }, |
| | | // 删除消息 |
| | | deleteMsg(value, index) { |
| | | this.show = true; |
| | | this.id = value.id; |
| | | }, |
| | | // 确认删除 |
| | | confirm() { |
| | | this.show = false; |
| | | this.$reqGet('delteMessage', { id: this.id }).then(res => { |
| | | if (res.code == 0) { |
| | | this.$u.toast('删除成功'); |
| | | setTimeout(() => { |
| | | uni.showLoading({ |
| | | title: '加载中' |
| | | }); |
| | | this.$reqGet('getMessageByUser', { current: 1, size: this.pageSize }).then( |
| | | res => { |
| | | uni.hideLoading(); |
| | | this.total = res.data.total; |
| | | this.messageList = []; |
| | | this.pageNum = 1 |
| | | this.messageList = res.data.records; |
| | | }); |
| | | }, 800); |
| | | } else { |
| | | this.$u.toast('删除失败'); |
| | | } |
| | | }); |
| | | }, |
| | | cancel() { |
| | | this.show = false; |
| | | } |
| | | } |
| | | } |
| | | }; |
| | | }; |
| | | </script> |
| | | |
| | | <style lang="scss"> |
| | | ::v-deep .u-list-item- { |
| | | position: relative; |
| | | .u-badge { |
| | | position: absolute; |
| | | right: vww(10); |
| | | top: vww(10); |
| | | <style lang="scss" |
| | | scoped> |
| | | @mixin flex { |
| | | display: flex; |
| | | justify-content: center; |
| | | align-items: center; |
| | | } |
| | | } |
| | | .message-body { |
| | | width: 100%; |
| | | height: 100%; |
| | | |
| | | .more-text { |
| | | color: #999; |
| | | font-size: 24rpx; |
| | | text-align: center; |
| | | ::v-deep .u-list-item- { |
| | | position: relative; |
| | | |
| | | .u-badge { |
| | | position: absolute; |
| | | left: vww(45); |
| | | top: vww(13); |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | |
| | | ::v-deep .u-cell__title-text { |
| | | height: 32rpx; |
| | | font-size: 34rpx !important; |
| | | font-weight: bold; |
| | | color: #2f2f2f !important; |
| | | margin-bottom: vww(18); |
| | | } |
| | | |
| | | .message-body { |
| | | width: 100%; |
| | | height: 100%; |
| | | background-color: #cccccc26; |
| | | |
| | | .message-list { |
| | | margin: vww(5) 0; |
| | | } |
| | | |
| | | .prepose { |
| | | width: 89rpx; |
| | | height: 89rpx; |
| | | background: rgba(237, 240, 245, 0.75); |
| | | border-radius: 50%; |
| | | @include flex; |
| | | margin-right: vww(32); |
| | | } |
| | | |
| | | .more-text { |
| | | color: #999; |
| | | font-size: 24rpx; |
| | | text-align: center; |
| | | } |
| | | } |
| | | </style> |