CBB3/pages/chat/apply/list.vue

<template>
	<view>
		<uni-nav-bar statusBar backgroundColor="#fafafa" fixed title="新的朋友" left-icon="left" @clickLeft="utils.navigateBack()">
			<view  slot="right" @tap="tapOpen" data-url="add">
				<image style="width: 30px;" src="/static/img/add_friend.png" mode="widthFix"></image>
			</view>
		</uni-nav-bar>
		
		
		<view class="lists">
			<u-swipe-action>
				<u-swipe-action-item @click="tapSwipe" :item="item" :options="options" v-for="item in data">
					<view class="item fx-r fx-bc" @tap="tapOpen" :data-url="'sqInfo?id=' + item.id" >
						<image :src="item.img == '' ? '/static/img/logo.png' : item.img" mode="aspectFill"></image>
						<view class="info fx-h fx-ac">
							<view class="title">{{item.name}}</view>
							<view class="tag">{{item.content}}</view>
						</view>
						<view class="fx-g1"></view>
						<view class="sub-btn" v-if="item.status == 0">查看</view>
						<view class="flg" v-if="item.status == 1">已通过</view>
						<view class="flg" v-if="item.status == 2">已拒绝</view>
						<view class="flg" v-if="item.status == -1">已过期</view>
					</view>
				</u-swipe-action-item>
			</u-swipe-action>
		</view>
		
		<u-loadmore :height="40" :status="page.status" 
				loading-text="努力加载中'" 
		        loadmore-text="努力加载中" 
		        nomore-text="实在没有了"
		/>
		

	</view>
</template>
<style lang="scss" scoped>
.lists{margin-top: 10px;}
.lists .item{background: #fff;padding:0 10px;position: relative;border-bottom: 1px solid #f1f1f1;}
.lists .item:active{background: #f1f1f1;}
.lists .item image{width: 40px;height: 40px;border-radius: 50%;}
.lists .item .info{width: calc(100% - 120px);margin-left: 10px;font-size: 14px;color:$ic-default-text;height: 60px;}	
.lists .item .info .title{font-size: 14px;color: #000;}
.lists .item .info .tag{font-size: 12px;}
.lists .item:last-child{border-bottom: 0;}
.lists .item .flg{font-size: 12px;color: $ic-default-text;}
.lists .item .sub-btn{background: $ic-appcolor;padding:6px 10px;color: #fff;font-size: 12px;border-radius: 6px;}
</style>

<script>
	import {mapState,mapMutations } from 'vuex';
	export default {
		computed: mapState(['txbagenum']),
	    data() {
	        return {
				data : [],   
				page:{
					page:1,
					isLoad:false,
					isFoot:false,
					status  : "loadmore"
				},
				options:[{text: '忽略'},{text: '删除',style: {backgroundColor: '#f56c6c'}}]
	        }  
	    },
		
		onLoad(option){
			this.getData(true);
			uni.$on('checkInvite',this.checkInvite);
		},
		onUnload() {
			uni.$off('checkInvite',this.checkInvite);
		},
		
		onReachBottom() {
			if(this.page.isFoot || this.page.isLoad) {
				return;
			}
			this.page.page ++;
			this.getData();			
		},
		
	    methods: {
			...mapMutations(['setTxbagenum']),
			/**
				 * 获取get数据
				 */
				getData:function(isPull = false){
					if (this.page.isLoad) return;
					this.page.isLoad = true;
					if (isPull) {
						uni.showLoading({	title: '获取数据中..'});
					}
					this.page.status = 'loading';
					var post = {};
					post.page = this.page.page;
					this
						.request
						.post("FriendApplyList",post)
						.then(res => {
							uni.hideLoading();
							if (isPull) {
								this.data = res.data.list;
								uni.stopPullDownRefresh();
								this.getTxbagenum();
							} else {
								this.data = this.data.concat(res.data.list);
							}
							this.page.isLoad = false;
							//是否到底
							if (res.data.list.length != res.data.pageSize) {
								this.page.status = 'nomore';
								this.page.isFoot = true;
							}
							
						})
						.catch(res=>{
							console.log(res);
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
						});
				},
				/**
				 * 
				 */
				checkInvite:function(data){
					for(var i in this.data) {
						if(this.data[i].id == data.id) {
							this.$set(this.data[i],"status",data.type);
						}
					}
				},
				
			
			/**
			 * 打开其他页面
			 * @param {Object} ev
			 */
			tapOpen: function(ev) {
				let url = ev.currentTarget.dataset.url
				uni.navigateTo({
					url: url
				});
			},
			
			tapSwipe:function(ev){
				console.log(ev);
				uni.showLoading({ title: '获取数据中..'});
				this
					.request
					.post("FriendApplyAction",{
						type : ev.index,
						id	 : ev.item.id
					})
					.then(res => {
						uni.hideLoading();
						if(res.code == 200) {
							this.getData(true);
						} else {
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					})
					.catch(res=>{
						console.log(res);
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: '加载失败，重新点击尝试！',showCancel: false});
					});
			},
			/**
			 * 获取当前消息角标数量
			 */
			getTxbagenum:function(){
				this.request.get("chatBagenum")
					.then(res=>{
						if(res.code == 200) {
							this.setTxbagenum(res.data);
						}
				}).catch((err)=>{
					
				});
			}
			
	    }
	}
</script>