mz/pages/record/visit.vue

<template>
	<view class="container">
		<scroll-view class="navbar" scroll-x>
			<view v-for="(item, index) in navList" class="nav-item" 
				:class="{ current: tabCurrentIndex === index }" 
				@click="tabClick(index)">{{ item.text }}
			</view>
		</scroll-view>
		<swiper :current="tabCurrentIndex" class="swiper-box" duration="300" @change="changeTab">
			<swiper-item class="tab-content" v-for="(tabItem, tabIndex) in navList" :key="tabIndex">
				<scroll-view class="list-scroll-content" scroll-y @scrolltolower="loadData">
					<empty v-if="tabItem.loaded === true && tabItem.orderList.length === 0"></empty>
					<view v-for="(item, index) in tabItem.orderList" class="content-box flex">
						<view class="item">
							<view class="name">救援者姓名：{{item.helper_nickname}}</view>
							<view class="phone">手机号：{{item.helper_mobile}}</view>
							<view class="addr">救援地址：{{item.address}}</view>
							<view class="time">救援时间：{{ item.createtime }}</view>
						</view>
						<!-- <view class="tpl">{{item.status_text}}</view> -->
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
import { mapState, mapMutations } from 'vuex';
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { getTime } from '@/utils/rocessor.js';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			userInfo:'',//用户信息
			tabCurrentIndex: 0,
			navList: [
				{
					state: 0,
					text: '待接受',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 1,
					text: '已接受',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 2,
					text: '已拒绝',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 3,
					text: '已完成',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}
				// {
				// 	state: 4,
				// 	text: '失败',
				// 	loadingType: 'more',
				// 	orderList: [],
				// 	page: 1, //当前页数
				// 	limit: 10 //每次信息条数
				// },
				// {
				// 	state: 5,
				// 	text: '已被其它人接受',
				// 	loadingType: 'more',
				// 	orderList: [],
				// 	page: 1, //当前页数
				// 	limit: 10 //每次信息条数
				// }
			]
		};
	},
	onLoad() {
	},
	onShow() {
		this.loadData();
	},
	methods: {
		async loadData(source) {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			// if (source === 'tabChange' && navItem.loaded === true) {
			// 	//tab切换只有第一次需要加载数据
			// 	return;
			// }
			if (navItem.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			if (navItem.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';
			mySosList({
				status: ''+state,
				page: navItem.page,
				limit: navItem.limit
			})
				.then(({ data }) => {
					let arr = data.map(e => {
						e.createtime = getTime(e.createtime);
						return e;
					});
					navItem.orderList = navItem.orderList.concat(arr);
					console.log(navItem.orderList)
					navItem.page++;
					if (navItem.limit == data.length) {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'more';
						return;
					} else {
						//判断是否还有数据， 有改为 more， 没有改为noMore
						navItem.loadingType = 'noMore';
					}
					uni.hideLoading();
					this.$set(navItem, 'loaded', true);
				})
				.catch(e => {
					console.log(e);
				});
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
			// 初始化数据列表
			this.navList[index].orderList=[];
			// 初始化翻页数
			this.navList[index].page=1;
			// 初始化数据为未加载状态
			this.navList[index].loadingType = 'more';
			console.log(this.tabCurrentIndex)
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		access(item){
			let obj = this;
			uni.showModal({
			    title: '提示',
			    content: '您确定要接受求救吗',
			    success: function (res) {
			        if (res.confirm) {
						accessSos({
							id: item.id
						}).then((data) => {
							obj.$api.msg(data.msg);
							obj.page = 1;
							obj.loadData('refresh');
						}).catch((e) => {
							obj.$api.msg(e.message);
								console.log(e)
							});
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		refuse(item){
			let obj = this;
			uni.showModal({
			    title: '提示',
			    content: '您确定要拒绝求救吗?',
			    success: function (res) {
			        if (res.confirm) {
						refuseSos({
							id: item.id
						}).then((data) => {
							console.log(data.msg,77)
							obj.$api.msg(data.msg);
							obj.page = 1;
							obj.loadData('refresh');
						}).catch((e) => {
							obj.$api.msg(e.message);
							});
			        } else if (res.cancel) {
			            console.log('用户点击取消');
			        }
			    }
			});
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		}
		
	}
};
</script>

<style lang="scss">
page {
	background: #F8F6F6;
	height: 100%;
	.container{
		width: 100%;
		height: 100%;
		.swiper-box{
			height: 90%;
			padding-top: 25rpx;
		}
	}
}
.swiper-box {
	height: calc(100% - 40px);
}
.list-scroll-content {
	height: 100%;
}

.navbar {
	overflow: hidden;
	white-space: nowrap;
	background: #fff;
	padding: 0rpx 25rpx;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	.nav-item {
		text-align: center;
		display: inline-block;
		height: 100%;
		font-size:28rpx;
		color: $font-color-dark;
		position: relative;
		width: 25%;
		padding: 25rpx 0rpx;
		&.current {
			color: #FF6666;
			&:after {
				content: '';
				position: absolute;
				left: 50%;
				bottom: 0;
				transform: translateX(-50%);
				width: 35px;
				height: 0;
				border-bottom: 2px solid #FF6666;
			}
		}
	}
}

.content-box{
	width: 90%;
	margin: 0rpx auto;
	background-color: #FFFFFF;
	border-radius: 15rpx;
	padding: 47rpx 30rpx;
	font-size: 24rpx;
	line-height: 60rpx;
	color: #666666;
	margin-bottom: 25rpx;
}
.item{
	.name{
		font-size: 28rpx;
		color: #333333;
		font-weight:500;
	}
}
.box-btn{
	.accept{
		background: #FF4F4F;
		border-radius: 50rpx;
		color: #FFFFFF;
		padding: 0rpx 25rpx;
		margin-bottom: 25rpx;
		}
	.refuse{
		background: #F3F3F3;
		border-radius: 50rpx;
		padding: 0rpx 25rpx;
	}
}
.tpl{
	font-size:28rpx;
	font-weight:bold;
	color:rgba(255,79,79,1);
}
</style>