flying-monkey/pagesB/message-center/message-center.vue

<template>
	<view>
		<status-nav navBarTitle="消息中心" returnColor="#c2c2c2"></status-nav>
		<view v-show="ifDel" class="bacf pad-sx20 pad-zy40 fon24 disjbac animated" :class="ifDel ? 'fadeInDown' :'fadeOutUp'" style="position: sticky;" :style="{top: newTop+'px'}">
			<view @tap="delEv(0)">删除所有</view>
			<view @tap="delEv(1)">删除（{{delNum}}）</view> 
		</view>
		<container-subgroup>
			<view slot="content"> 
				<!-- <view @longtap.stop="longTap(index)" @tap="chooseDel(index,item.id)" class="mar-x10 bacf" :style="{backgroundColor: (ifDel && item.status) ? '#dddddd' :''}" v-for="(item,index) in dataList" :key="index"> -->
				<view class="mar-x10 bacf" :style="{backgroundColor: (ifDel && item.status) ? '#dddddd' :''}" v-for="(item,index) in dataList" :key="index">
					<view class="pad-sx30 pad-zy20 disjbac">
						<view class="fon30 message-circle disac" :class="['','system-notification','activity-message','server-message','audit-failed'][item.message_type]"><view class="clips1 mar-y20">{{item.title}}</view></view>
						<view class="fon26 col9 flexs">{{item.time}}</view>
					</view>
					<view class="bbot"></view>
					<view class="fon27 line-h46 pad-zy20 pad-sx30" style="color: #737373;">{{item.content}}</view>
				</view>
				<pitera v-if="total==dataList.length" textStr="暂无更多"></pitera>
			</view>
		</container-subgroup>
		<nothing-page v-if="dataList.length==0"></nothing-page>
	</view>
</template>

<script>
	import pitera from '@/components/nothing/pitera.vue';
	export default {
		components:{
			pitera
		},
		data() {
			return {
				delNum:0,
				newTop: uni.getSystemInfoSync().statusBarHeight + 40,
				ifDel:false,
				total:12,
				dataList:[],
				delArrId:[]
			}
		},
		onLoad() {
			this.getMessageList();
		},
		methods: {
			// 查询消息列表
			getMessageList(){
				this.$requst.get('/universal/api.message/message_list',{page: 1,list_rows: 200}).then(res=>{
					if(res.code) {
						if(res.data.data.length) {
							res.data.data.forEach(item=>{
								let obj = {
									id:item.message_id,
									title:item.title,
									content:item.content,
									time:item.create_time,
									is_read:item.is_read,
									message_type:item.message_type,
									status:false
								}
								this.dataList.push(obj);
							})
						}
					}
				})
			},
			// 长按事件
			longTap(index) {
				console.log(index);
				this.ifDel = true;
				this.dataList[index].status = true;
				this.delNum++;
				this.delArrId.push(this.dataList[index].id);
			},
			// 删除事件
			delEv(index) {
				if(index) {
					console.log('删除选中项');
					this.delArrId.forEach(item=>{
						this.dataList.forEach((item1,index1)=>{
							if(item == item1.id) {
								console.log(item);
								this.dataList.splice(index1,1);
							}
						})
					})
				} else {
					console.log('清空所有');
					this.dataList = [];
				}
				this.ifDel = false;
				this.delNum = 0;
				this.delArrId = [];
			},
			// 选中删除
			chooseDel(index,id){
				if(this.ifDel) { 
					this.dataList[index].status = !this.dataList[index].status;
					this.delNum = 0;
					this.delArrId = [];
					this.dataList.forEach(item=>{
						if(item.status) {
							this.delNum++;
							this.delArrId.push(item.id);
						}
					})
				}
			}
		}
	}
</script>

<style>

</style>