335 lines
8.3 KiB
Vue
335 lines
8.3 KiB
Vue
<template>
|
|
<view class="page-container">
|
|
<view class="list-title-btns">
|
|
<view @click="doChangeStatus" data-value=""
|
|
:class="['border-right',currentStatus==''? 'btn-select':'btn-normal']">
|
|
<view class="tab">
|
|
<text>全部</text>
|
|
<view :class="currentStatus==''?'border-select':'border-normal'"></view>
|
|
</view>
|
|
</view>
|
|
<view @click="doChangeStatus" data-value="0"
|
|
:class="['border-right',currentStatus=='0'? 'btn-select':'btn-normal']">
|
|
<view class="tab">
|
|
<text>未读</text>
|
|
<view :class="currentStatus=='0'?'border-select':'border-normal'"></view>
|
|
</view>
|
|
</view>
|
|
<view @click="doChangeStatus" data-value="1"
|
|
:class="['border-right',currentStatus=='1'? 'btn-select':'btn-normal']">
|
|
<view class="tab">
|
|
<text>已读</text>
|
|
<view :class="currentStatus=='1'?'border-select':'border-normal'"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view style="margin-top: 10rpx;">
|
|
<ContainerLoading :loadingVisible="loadingState">
|
|
<scroll-view scroll-y style="height: 80vh;" :lower-threshold="100" refresher-background="#FFFFFF00"
|
|
@scrolltolower="doLoadMore">
|
|
<view class="coupons-list-box">
|
|
<block v-for="(item,index) in msgList" :key="index">
|
|
<view class="msg-item-container">
|
|
<view class="msg-item-box">
|
|
<view class="msg-title-box" @click="readItem" :data-value="item">
|
|
<view class="title-type" :class="item.isRead==0? 'text-noread':'text-read'">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="title-time">{{item.gmtCreate}}</view>
|
|
</view>
|
|
<view class="divider-v mt-10"></view>
|
|
<view class="msg-content-box" @click="readItem" :data-value="item">
|
|
<view :class="item.isRead==0? 'text-noread':'text-read'"
|
|
class="msg-content-content">{{item.content}}</view>
|
|
</view>
|
|
<view @click="deleteItem" :data-value="item" class="icon-del-red size-48"
|
|
style="align-self: flex-end;"></view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<uni-load-more :status="hasMore"></uni-load-more>
|
|
</view>
|
|
</scroll-view>
|
|
</ContainerLoading>
|
|
</view>
|
|
<uni-popup type="message" ref="msg">
|
|
<uni-popup-message :type="msgType" :message="msgHint" :duration="2000"></uni-popup-message>
|
|
</uni-popup>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ContainerLoading from '@/components/container-loading.vue'
|
|
import UserApi from '@/common/js/net/UserApi.js'
|
|
export default {
|
|
components: {
|
|
ContainerLoading
|
|
},
|
|
setup() {
|
|
|
|
},
|
|
data() {
|
|
return {
|
|
currentStatus: '',
|
|
msgList: [], //订单列表
|
|
pageData: {
|
|
page: 1,
|
|
rows: 10,
|
|
isRead: '', //默认已读
|
|
}, //检索参数
|
|
loadingState: 'loading', //加载状态
|
|
listRefreshTrig: false, //list刷新状态
|
|
isLoadMore: false, //加载更多的状态
|
|
hasMore: 'more', //是否有更多数据
|
|
keywords: '', //搜索关键字
|
|
msgType: 'info',
|
|
msgHint: '',
|
|
}
|
|
},
|
|
onLoad(options) {
|
|
uni.setNavigationBarTitle({
|
|
title: '消息通知',
|
|
})
|
|
uni.setNavigationBarColor({
|
|
frontColor: '#000000', // 必写项，字体颜色仅支持#ffffff和#000000
|
|
backgroundColor: '#F0F0F0', // 传递的颜色值，仅支持十六进制颜色
|
|
animation: { // 可选项
|
|
duration: 500,
|
|
timingFunc: 'easeIn'
|
|
}
|
|
})
|
|
this.doRefreshList()
|
|
},
|
|
methods: {
|
|
doChangeStatus(e) {
|
|
this.currentStatus = e.currentTarget.dataset.value
|
|
//刷新列表
|
|
this.doRefreshList()
|
|
},
|
|
doGetMineMsgList(isRefresh) {
|
|
const _self = this
|
|
_self.msgList = isRefresh ? [] : _self.msgList
|
|
_self.loadingState = isRefresh ? 'loading' : ''
|
|
UserApi.doGetMineMsgNotice(_self.pageData)
|
|
.then(res => {
|
|
var status = 'success'
|
|
status = res.rows && res.rows.length > 0 ? 'success' : 'empty'
|
|
_self.loadingState = isRefresh ? status : ''
|
|
_self.msgList = _self.msgList.concat(res.rows)
|
|
_self.isLoadMore = false
|
|
_self.hasMore = _self.msgList.length < res.total ? 'more' : 'noMore'
|
|
})
|
|
.catch(err => {
|
|
_self.loadingState = 'error'
|
|
_self.isLoadMore = false
|
|
_self.hasMore = 'more'
|
|
})
|
|
},
|
|
//下拉刷新
|
|
doRefreshList() {
|
|
const _self = this
|
|
_self.loadingState = 'loading'
|
|
_self.hasMore = 'more'
|
|
_self.pageData.page = 1
|
|
_self.pageData.isRead = _self.currentStatus
|
|
_self.isLoadMore = false
|
|
_self.doGetMineMsgList(true)
|
|
},
|
|
//加载更多
|
|
doLoadMore() {
|
|
//判断是否正在加载中 与是否存在更多数据
|
|
const _self = this
|
|
if (_self.isLoadMore || _self.hasMore == 'noMore') {
|
|
return
|
|
}
|
|
_self.isLoadMore = true
|
|
_self.hasMore = 'loading'
|
|
_self.pageData.page = ++_self.pageData.page
|
|
_self.pageData.isRead = _self.currentStatus
|
|
_self.doGetMineMsgList(false)
|
|
},
|
|
readItem(e) {
|
|
const item = e.currentTarget.dataset.value
|
|
if (item.isRead == 1) {
|
|
return
|
|
}
|
|
uni.showLoading({
|
|
title: '加载中...',
|
|
})
|
|
const _self = this
|
|
const ids = {
|
|
ids: [item.userMsgId]
|
|
}
|
|
UserApi.doReadMineMsgNotice(ids)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
_self.doRefreshList()
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgHint = err.msg ? err.msg : '操作失败,请稍后重试'
|
|
_self.msgType = 'error'
|
|
_self.$refs.msg.open()
|
|
})
|
|
},
|
|
deleteItem(e) {
|
|
const item = e.currentTarget.dataset.value
|
|
const _self = this
|
|
uni.showModal({
|
|
title: '警告',
|
|
content: '您确定要删除该消息吗?',
|
|
success: res => {
|
|
if (res.confirm) {
|
|
_self.doDeleteItem(item)
|
|
}
|
|
}
|
|
})
|
|
},
|
|
//删除信息
|
|
doDeleteItem(item) {
|
|
const _self = this
|
|
uni.showLoading({
|
|
title: '删除中...',
|
|
})
|
|
UserApi.doDeleteMineMsgNotice(item.userMsgId)
|
|
.then(res => {
|
|
uni.hideLoading()
|
|
_self.msgHint = '删除成功'
|
|
_self.msgType = 'success'
|
|
_self.$refs.msg.open()
|
|
_self.doRefreshList()
|
|
})
|
|
.catch(err => {
|
|
uni.hideLoading()
|
|
_self.msgHint = err.msg ? err.msg : '删除失败,请稍后重试'
|
|
_self.msgType = 'error'
|
|
_self.$refs.msg.open()
|
|
})
|
|
}
|
|
},
|
|
onPullDownRefresh() {
|
|
this.doRefreshList()
|
|
uni.stopPullDownRefresh()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.list-title-btns {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
background-color: #F0F0F0;
|
|
}
|
|
|
|
.btn-select {
|
|
line-height: 20px;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
flex: 1;
|
|
padding: 10px;
|
|
color: $bg-green-status-deep-color;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.btn-normal {
|
|
line-height: 20px;
|
|
color: $text-color;
|
|
flex: 1;
|
|
font-size: 16px;
|
|
text-align: center;
|
|
padding: 10px;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.border-select {
|
|
width: 20px;
|
|
height: 4px;
|
|
background-color: $bg-green-status-deep-color;
|
|
margin-top: 10px;
|
|
border-radius: 2px;
|
|
}
|
|
|
|
.tab {
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.border-normal {
|
|
width: 20px;
|
|
height: 4px;
|
|
margin-top: 10px;
|
|
border-radius: 2px;
|
|
background-color: $bg-top-color;
|
|
}
|
|
|
|
.coupons-list-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.msg-item-container {
|
|
background-color: transparent;
|
|
}
|
|
|
|
.msg-item-container:nth-of-type(n+2) {
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.msg-item-box {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 20rpx;
|
|
background-color: $white-color;
|
|
border-radius: 5rpx;
|
|
|
|
}
|
|
|
|
.msg-title-box {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: space-between;
|
|
position: relative;
|
|
}
|
|
|
|
.text-read {
|
|
color: $text-gray-hint-color;
|
|
}
|
|
|
|
.text-noread {
|
|
color: $text-color;
|
|
|
|
}
|
|
|
|
.title-type {
|
|
font-size: 28rpx;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.title-time {
|
|
font-size: 24rpx;
|
|
color: $text-gray-hint-color;
|
|
}
|
|
|
|
.msg-content-box {
|
|
margin-top: 15rpx;
|
|
}
|
|
|
|
.msg-content-notice-point {
|
|
width: 15rpx;
|
|
height: 15rpx;
|
|
border-radius: 15rpx;
|
|
background-color: $primary-color-active;
|
|
position: absolute;
|
|
right: -10rpx;
|
|
top: -10rpx;
|
|
}
|
|
|
|
.msg-content-content {
|
|
font-size: 28rpx;
|
|
}
|
|
</style> |