zd2.0/pages/shop/repair/clientRepair.vue

<template>
	<view class="container ">
		<view class="navbar">
			<view v-for="(item, index) in navList" :key="index" class="nav-item"
				:class="{ current: tabCurrentIndex === index }" @click="tabClick(index)">{{ item.text }}</view>
		</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 class="itemBox" v-for="(item,index) in tabItem.orderList">
						<view class="flex item">
							<view class="title">
								报修车辆：
							</view>
							<view class="content">
								{{item.car.car_name}}
							</view>
						</view>
						<view class="flex item">
							<view class="title">
								维修单号：
							</view>
							<view class="content">
								{{item.order_id}}
							</view>
						</view>
						<view class="flex item" @click="openAddress(item)">
							<view class="title">
								维修地点：
							</view>
							<view class="content flex">
								<image class="icon" src="../../../static/icon/shopAddress.png" mode="widthFix"></image>
								<text class="margin-l-10">{{item.address}}</text>
							</view>
						</view>
						<view class="flex item" @click="openPhone(item.phone)">
							<view class="title">
								联系电话：
							</view>
							<view class="content flex">
								<image class="icon" src="../../../static/icon/shopPhone.png" mode="widthFix"></image>
								<text class="margin-l-10">
									{{item.phone}}
								</text>
							</view>
						</view>
						<view class="flex item">
							<view class="title">
								申报时间：
							</view>
							<view class="content">
								{{item.add_time}}
							</view>
						</view>
						<view  @click="navDetail(item)" class="flex padding-t-20" v-if="navList[tabCurrentIndex].state==0">
							<!-- <view class="boxButtom flex btn1" @click="">
								联系不上
							</view> -->
								<view class="boxButtom flex btn2">
									安排人员前往
								</view>
						</view>
						<view  @click="navDetail(item)" class="flex padding-t-20" v-if="navList[tabCurrentIndex].state==1">
							<view class="boxButtom flex btn1">
								已安排{{item.processor_user.staff_name}}前往维修
							</view>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>
<script>
	import {
		question
	} from '@/api/shop.js';
	export default {
		data() {
			return {
				tabCurrentIndex: 0,
				navList: [{
					state: 0,
					text: '安排维修',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}, {
					state: 1,
					text: '正在维修',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}, ]
			};
		},
		onLoad() {
			this.loadData();
		},
		methods: {
			// 跳转详细页面
			navDetail(item){
				uni.navigateTo({
					url:'./clientReparirDetail?id='+item.order_id
				})
			},
			// 打开地址
			openAddress(res) {
				console.log(res, '返回的位置数据');
				uni.chooseLocation({
					latitude: res.latitude,
					longitude: res.longitude,
					success(re) {
						console.log(re, '当前位置');
					},
					fail(e) {
						console.log(e, 'cw');
					}
				})
			},
			// 拨打电话
			openPhone(item) {
				uni.makePhoneCall({
					phoneNumber:item //仅为示例
				});
			},
			//顶部tab点击
			tabClick(index) {
				this.tabCurrentIndex = index;
				this.loadData('tabChange');
			},
			//swiper 切换
			changeTab(e) {
				this.tabCurrentIndex = e.target.current;
				this.loadData('tabChange');
			},
			// 加载数据
			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';
				console.log('开始请求');
				question({
						status: state,
						page: navItem.page,
						limit: navItem.limit
					})
					.then(({
						data
					}) => {
						let arr = data.data.map(e => {
							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);
					});
			},
		}
	};
</script>
<style lang="scss">
	page,.container {
		height: 100%;
	}

	.swiper-box {
		height: calc(100% - 40px);
	}

	.list-scroll-content {
		height: 100%;
		padding-top: 30rpx;
	}

	.navbar {

		display: flex;
		height: 40px;
		padding: 0 5px;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
		.nav-item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 15px;
			color: $font-color-dark;
			position: relative;

			&.current {
				color: $base-color;

				&:after {
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 44px;
					height: 0;
					border-bottom: 2px solid $base-color;
				}
			}
		}
	}

	.itemBox {
		margin: 0 $page-row-spacing;
		margin-bottom: $page-row-spacing;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		padding: 40rpx 0;

		.boxButtom {
			justify-content: center;
			margin: 0 30rpx;
			color: $color-green;
			font-size: 24rpx;
			height: 70rpx;
			border-radius: 100rpx;
			line-height: 1;
			padding: 0 50rpx;
			flex-grow: 1;

			&.btn3 {
				border: 1px solid $uni-color-warning;
				color: $uni-color-warning;
			}

			&.btn1 {
				border: 1px solid $font-color-light;
				color: $font-color-light;
			}

			&.btn2 {
				color: #FFFFFF;
				background-color: $color-green;
				padding: 0 120rpx;
			}
		}

		.item {
			justify-content: flex-start;
			padding: 30rpx;
			padding-top: 0;
			font-size: $font-base;

			.title {
				flex-shrink: 0;
				color: $font-color-base;
			}

			.content {
				color: $font-color-light;

				.icon {
					width: 32rpx;
				}
			}

		}
	}
</style>