mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-mobile.git
synced 2025-12-07 18:06:47 +08:00
消息页面
This commit is contained in:
zhaofang
@@ -45,12 +45,12 @@ const updateIsRead=function(ids){
|
||||
|
||||
/**把当前人所有未读消息设置为已读*/
|
||||
const readAll=function(){
|
||||
return ajax.postJson('/xboe/sys/message/readall')
|
||||
return ajax.get('/xboe/sys/message/readall')
|
||||
}
|
||||
|
||||
/**清空当前人的接收到的所有的消息*/
|
||||
const cleanAll=function(){
|
||||
return ajax.postJson('/xboe/sys/message/clearall')
|
||||
return ajax.get('/xboe/sys/message/clearall')
|
||||
}
|
||||
|
||||
export default{
|
||||
|
||||
@@ -1,46 +1,164 @@
|
||||
<template>
|
||||
<view>
|
||||
<u-toast ref="toast"></u-toast>
|
||||
<view class="news-page-btn">
|
||||
<view class="btn-index">多选</view>
|
||||
<view class="btn-index">清空</view>
|
||||
<view class="btn-index">一键已读</view>
|
||||
<view class="btn-index" @click="selectFn">多选</view>
|
||||
<view class="btn-index" @click="isAllClear()">清空</view>
|
||||
<view class="btn-index" @click="allRead()">一键已读</view>
|
||||
</view>
|
||||
<view class="news-page-list">
|
||||
<view class="list-index" v-for="item in 5">
|
||||
<view class="list-index" v-for="item in items" :key="item.id">
|
||||
<view style="margin-top: 16upx;margin-right: 20upx;">
|
||||
<radio v-show="flag" @click="changeChecked(item)" :checked="item.checked"/>
|
||||
</view>
|
||||
<view class="list-index-img">
|
||||
<u-badge :isDot="!item.isRead" type="error" :absolute="true" :offset="[0,-2]"></u-badge>
|
||||
<image style="width:80upx;height:80upx" src="../../static/images/woman.png" mode=""></image>
|
||||
</view>
|
||||
<view class="list-index-cen">
|
||||
<view class="cen-name">
|
||||
李沐沐
|
||||
{{item.sendName}}
|
||||
<view class="list-index-time">{{item.msgTime.split(' ')[0]}}</view>
|
||||
</view>
|
||||
<view class="cen-text">
|
||||
收藏了你发布的课程···
|
||||
{{item.content}}
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<view class="list-index-time">
|
||||
2022/9/20
|
||||
</view>
|
||||
|
||||
</view>
|
||||
<u-modal :show="modalShow" @confirm="confirm" @cancel="cancel" :showCancelButton="true" confirmText="删除" ref="uModal" :content='content'></u-modal>
|
||||
<view class="information_bottom" v-show="flag">
|
||||
<view class="del" @click="delfirm()">删除</view>
|
||||
<view class="qux" @click="flag = false">取消</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apiMessage from '@/api/system/message.js';
|
||||
export default {
|
||||
props:{
|
||||
items:{
|
||||
type:Array,
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
isAll:0,//0所有 1选择
|
||||
content:'确认删所选信息吗？',
|
||||
modalShow:false,
|
||||
flag: false, //控制勾选按钮的显示
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
|
||||
cancel() {
|
||||
this.modalShow = false;
|
||||
},
|
||||
delfirm() {
|
||||
this.isAll = 1;
|
||||
this.modalShow = true;
|
||||
},
|
||||
confirm() {
|
||||
if(this.isAll == 0) {
|
||||
this.allClear();
|
||||
} else{
|
||||
this.delList();
|
||||
}
|
||||
|
||||
},
|
||||
//改变checked的值
|
||||
changeChecked(val){
|
||||
val.checked=!val.checked
|
||||
},
|
||||
//控制勾选等操作是否显示
|
||||
selectFn() {
|
||||
if(this.items.length!=0&&!this.flag){
|
||||
this.flag = true;
|
||||
}
|
||||
},
|
||||
delList() {
|
||||
let ids=[];
|
||||
for (let i = 0; i < this.items.length; i++) {
|
||||
if (this.items[i].checked) {
|
||||
ids.push(this.items[i].id);
|
||||
}
|
||||
}
|
||||
if(ids.length==0){
|
||||
return this.$refs.toast.show({ message: '请先进行勾选', type: 'error' });
|
||||
}
|
||||
apiMessage.del(ids).then(res => {
|
||||
if (res.status == 200) {
|
||||
this.$refs.toast.show({ message: '删除成功', type: 'success' });
|
||||
// this.queryMessage(true);
|
||||
this.flag = false;
|
||||
this.modalShow = false;
|
||||
this.$emit('loadMessage');
|
||||
} else {
|
||||
this.$refs.toast.show({ message: '删除失败', type: 'error' });
|
||||
}
|
||||
});
|
||||
},
|
||||
isAllClear() {
|
||||
this.isAll = 0;
|
||||
this.modalShow = true;
|
||||
this.content='确认删所有信息吗？'
|
||||
},
|
||||
allClear() {
|
||||
apiMessage.cleanAll().then(res=>{
|
||||
if(res.status == 200) {
|
||||
this.$emit('loadMessage');
|
||||
}
|
||||
})
|
||||
},
|
||||
allRead(){
|
||||
let ids = this.items.map(item=>{
|
||||
if(!item.isRead) {
|
||||
return item.id;
|
||||
}
|
||||
})
|
||||
apiMessage.readAll().then(res=>{
|
||||
if(res.status == 200) {
|
||||
this.$emit('loadMessage');
|
||||
}
|
||||
})
|
||||
console.log(ids,'ids')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
/deep/ .u-modal{
|
||||
border-radius: 28upx;
|
||||
}
|
||||
/deep/ .u-modal__content{
|
||||
text-align: center;
|
||||
font-size: 36upx;
|
||||
font-weight: 600;
|
||||
color: #333333;
|
||||
}
|
||||
/deep/ .uni-radio-input{
|
||||
width: 18px !important;
|
||||
height: 18px !important;
|
||||
background-color: #fff !important;
|
||||
border: 4upx solid #8A91A4 !important;
|
||||
}
|
||||
/deep/ .uni-radio-input-checked{
|
||||
border: 4upx solid #007DFF !important;
|
||||
}
|
||||
/deep/ uni-radio .uni-radio-input.uni-radio-input-checked:before {
|
||||
// font: normal normal normal 28px/1 uni;
|
||||
content: "·";
|
||||
color: #007DFF;
|
||||
font-size: 100px;
|
||||
position: absolute;
|
||||
top: -30%;
|
||||
left: 50%;
|
||||
transform: translate(-50%,-48%) scale(.73);
|
||||
-webkit-transform: translate(-50%,-48%) scale(.73);
|
||||
}
|
||||
.news-page-btn{
|
||||
height: 80upx;
|
||||
padding: 30upx 32upx 0 36upx;
|
||||
@@ -67,6 +185,7 @@
|
||||
border-bottom: 2upx solid rgba(153,153,153,0.1);;
|
||||
.list-index-img{
|
||||
width: 80upx;
|
||||
position: relative;
|
||||
}
|
||||
.list-index-cen{
|
||||
margin-left: 30upx;
|
||||
@@ -81,15 +200,59 @@
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
margin-top: 4upx;
|
||||
word-break:break-all;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
-webkit-box-orient: vertical;
|
||||
display: -webkit-box;-webkit-line-clamp: 1;
|
||||
}
|
||||
}
|
||||
.list-index-time{
|
||||
float: right;
|
||||
margin-top: 4upx;
|
||||
width: 130upx;
|
||||
// width: 300upx;
|
||||
font-size: 24upx;
|
||||
color: #999999;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
.information_bottom {
|
||||
width: 100%;
|
||||
// height: 120upx;
|
||||
background: #ffffff;
|
||||
position: fixed;
|
||||
left: 0;
|
||||
bottom: 50px;
|
||||
box-shadow: 0px -1px 6px 0px rgba(83,83,83,0.18);
|
||||
// display: flex;
|
||||
|
||||
.qux {
|
||||
// width: 316upx;
|
||||
height: 76upx;
|
||||
// border: 1px solid #dcdcdc;
|
||||
// margin-left: 42upx;
|
||||
// margin-top: 25upx;
|
||||
// border-radius: 40upx;
|
||||
font-size: 28upx;
|
||||
color: #999999;
|
||||
text-align: center;
|
||||
line-height: 76upx;
|
||||
|
||||
}
|
||||
|
||||
.del {
|
||||
// width: 316upx;
|
||||
height: 76upx;
|
||||
// background: #6194fe;
|
||||
// margin-left: 42upx;
|
||||
// margin-top: 25upx;
|
||||
// border-radius: 40upx;
|
||||
font-size: 28upx;
|
||||
color: #F75B53;
|
||||
text-align: center;
|
||||
line-height: 76upx;
|
||||
border-bottom: 1upx solid #eee;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -16,7 +16,7 @@
|
||||
></u-tabs>
|
||||
</view>
|
||||
<view class="" v-show="tab == 0">
|
||||
<system-news></system-news>
|
||||
<system-news :items="message.list" @loadMessage="loadMessage"></system-news>
|
||||
</view>
|
||||
<view class="" v-show="tab == 1">
|
||||
<at-my :items="data"></at-my>
|
||||
@@ -32,6 +32,7 @@
|
||||
import apiQa from '@/api/modules/qa.js'
|
||||
import apiComments from '../../api/modules/comments.js';
|
||||
import apiUser from '@/api/system/user.js'
|
||||
import apiMessage from '@/api/system/message.js';
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
@@ -48,26 +49,86 @@
|
||||
type:null,//当前只限于文章
|
||||
pageSize:10,//条数
|
||||
},//查询条件
|
||||
message:{
|
||||
list:[],
|
||||
total:0
|
||||
},
|
||||
queryData: {
|
||||
pageIndex: 1,
|
||||
pageSize: 10
|
||||
},
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.findData(true);
|
||||
this.queryMessage(true);
|
||||
},
|
||||
onPullDownRefresh() {
|
||||
this.onReachBottom();
|
||||
},
|
||||
onReachBottom() {
|
||||
console.log('111111')
|
||||
this.loadStatus='loading';//more,loading,noMore
|
||||
if(this.data.length<this.total){
|
||||
this.query.pageIndex++;
|
||||
this.findData(false);
|
||||
this.loadStatus='more'
|
||||
}else{
|
||||
this.loadStatus='noMore'
|
||||
if(this.tab == 0) {
|
||||
if(this.message.list.length<this.message.total){
|
||||
this.queryData.pageIndex++;
|
||||
this.queryMessage(false);
|
||||
this.loadStatus='more'
|
||||
}else{
|
||||
this.loadStatus='noMore'
|
||||
}
|
||||
} else {
|
||||
if(this.data.length<this.total){
|
||||
this.query.pageIndex++;
|
||||
this.findData(false);
|
||||
this.loadStatus='more'
|
||||
}else{
|
||||
this.loadStatus='noMore'
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
methods: {
|
||||
loadMessage() {
|
||||
console.log('1111')
|
||||
this.queryMessage(true);
|
||||
},
|
||||
queryMessage(flag) {
|
||||
if (flag) {
|
||||
this.message.list = [];
|
||||
this.queryData.pageIndex = 1;
|
||||
}
|
||||
uni.showLoading({ title: '加载中...' });
|
||||
apiMessage.list(this.queryData).then(res => {
|
||||
if (res.status == 200) {
|
||||
let ids = [];
|
||||
this.emptyControl=true
|
||||
this.message.total = res.result.count;
|
||||
if(res.result.list.length!=0){
|
||||
res.result.list.forEach(item => {
|
||||
// ids.push()
|
||||
item.checked = false;
|
||||
this.message.list.push(item);
|
||||
});
|
||||
// this.loadAuthorInfo(res.result.list,ids);
|
||||
//设置已读
|
||||
// let ids=[];
|
||||
// for(let i=0;i<res.result.list.length;i++){
|
||||
// if(!res.result.list[i].isRead){
|
||||
// ids.push(res.result.list[i].id)
|
||||
// }
|
||||
// }
|
||||
// apiMessage.updateIsRead(ids).then(res=>{
|
||||
// if(res.status==200){
|
||||
|
||||
// }
|
||||
// })
|
||||
}
|
||||
} else {
|
||||
this.$refs.toast.show({ message: '获取数据失败', type: 'error' })
|
||||
}
|
||||
uni.hideLoading();
|
||||
});
|
||||
},
|
||||
click(item) {
|
||||
this.tab = item.index;
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user