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="pad-sx30 pad-zy20 disjbac">
						<view class="fon30 message-circle disac" :class="['activity-message','audit-failed','system-notification'][index]">{{item.title}}{{item.id}}</view>
						<view class="fon26 col9">{{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:[
					{id:1,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:2,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:3,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:4,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:5,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:6,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:7,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:8,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:9,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:10,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:11,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
					{id:12,title:'活动消息',time:'2020.06.17  18:30',content:'恭喜您成为第99位会员，我们将赠送您一张优惠 券，您可以享受8折优惠购买....',status:false},
				],
				delArrId:[]
			}
		},
		onLoad() {
			this.getMessageList();
		},
		methods: {
			// 查询消息列表
			getMessageList(){
				this.$requst.get('/universal/api.message/message_list',{page: 1,list_rows: 200}).then(res=>{
					
				})
			},
			// 长按事件
			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>