pz/pages/jdr/order.vue

<template>
	<view class="content">
		<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="order-item" v-for="(item, index) in tabItem.orderList">
						<view class="order-top flex">
							<view class="order-top-left">
								<image class="order-top-left-image" src="../../static/img/order5.png" mode=""></image>
								<view class="order-top-left-font">订单信息</view>
							</view>
							<view class="order-top-right">{{ tabItem.text }}</view>
						</view>
						<view class="order-info flex">
							<view class="order-info-left">委托时间：</view>
							<view class="order-info-right">{{ item.time }}</view>
						</view>
						<view class="order-info flex">
							<view class="order-info-left">订单类型：</view>
							<view class="order-info-right">{{ item.type == 2 ? '代办' : '陪诊' }}</view>
						</view>
						<view class="order-info flex">
							<view class="order-info-left">医院：</view>
							<view class="order-info-right">{{ item.hospital }}</view>
						</view>
						<view class="order-info flex">
							<view class="order-info-left">客户：</view>
							<view class="order-info-right">{{ item.name }}</view>
						</view>
						<view class="order-info flex">
							<view class="order-info-left">客户电话：</view>
							<view class="order-info-right">{{ item.phone }}</view>
						</view>
						<view class="order-info flex" v-if="item.type == 2">
							<view class="order-info-left">代办类型：</view>
							<view class="order-info-right">{{ item.catename }}</view>
						</view>
						<view class="order-info flex" v-if="item.type == 1">
							<view class="order-info-left">陪诊类型：</view>
							<view class="order-info-right">{{ item.catename }}</view>
						</view>
						<view class="order-info flex" v-if="tabCurrentIndex == 0 && item.type == 1">
							<view class="order-info-left">陪诊服务：</view>
							<view class="order-info-right">{{ item.servicename }}</view>
						</view>
						<view class="order-info flex" v-if="tabCurrentIndex == 0 && item.type == 1 && item.issm == 2">
							<view class="order-info-left">接送地址：</view>
							<view class="order-info-address">
								<view class="order-info-address-main">{{ item.transfer_address }}</view>
								<image class="order-info-address-icon" src="../../static/img/order7.png" mode=""></image>
								<!-- <view class="order-info-dh">导航</view> -->
							</view>
						</view>
						<view class="order-info flex">
							<view class="order-info-left">下单时间：</view>
							<view class="order-info-right">{{ item.create_time }}</view>
						</view>
						<view class="order-info flex">
							<view class="order-info-left">备注：</view>
							<view class="order-info-right">{{ item.remarks }}</view>
						</view>
						<view class="order-info flex" v-if="tabCurrentIndex != 0">
							<view class="order-info-left">照片：</view>
							<view class="order-info-picture">
								<view class="order-info-picture-item" v-for="(itm, inx) in item.images"><image :src="itm" mode=""></image></view>
							</view>
						</view>
						<view class="order-btn-box" v-if="tabCurrentIndex == 0">
							<view class="order-btn" @click="abandonOrder(item)">
								<image class="order-btn-icon" src="../../static/img/order3.png" mode=""></image>
								<view class="order-btn-font">放弃订单</view>
							</view>
							<view class="order-btn btn1" @click="call(item)">
								<image class="order-btn-icon1" src="../../static/img/order9.png" mode=""></image>
								<view class="order-btn-font">立即联系</view>
							</view>
							<view class="order-btn btn2" @click="navTo('/pages/jdr/evaluate?unique=' + item.id)">
								<image class="order-btn-icon2" src="../../static/img/order8.png" mode=""></image>
								<view class="order-btn-font">提交完成</view>
							</view>
						</view>
						<view class="ordering-btn flex" v-if="tabCurrentIndex == 1" @click="call(item)">
							<image class="ordering-btn-icon" src="../../static/img/order4.png" mode=""></image>
							<view class="ordering-btn-font">立即联系</view>
						</view>
					</view>
					<uni-load-more :status="tabItem.loadingType"></uni-load-more>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
import empty from '@/components/empty';
import { receiving_list, discard_orde } from '@/api/jdr.js';
import { getTime } from '@/utils/rocessor.js';
export default {
	components: {
		uniLoadMore,
		empty
	},
	data() {
		return {
			tabCurrentIndex: 0,
			navList: [
				{
					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 //每次信息条数
				}
			]
		};
	},

	onLoad(options) {
		this.tabCurrentIndex = options.state;
		/**
		 * 修复app端点击除全部订单外的按钮进入时不加载数据的问题
		 * 替换onLoad下代码即可
		 */
		// #ifndef MP
		this.loadData();
		// #endif
		// #ifdef MP
		if (options.state == 0) {
			this.loadData();
		}
		// #endif
	},
	// #ifdef APP-PLUS || H5
	onBackPress(e) {
		uni.switchTab({
			url: '/pages/user/my'
		});
		return true;
	},
	// #endif
	filters: {
		moneyNum(value) {
			return +value;
		}
	},
	methods: {
		//联系客户
		call(item) {
			console.log(item.phone);
			uni.makePhoneCall({
				phoneNumber: item.phone //仅为示例
			});
		},
		// 转换金额为数字
		moneyNum(value) {
			return +value;
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		//获取订单列表
		loadData(source) {
			//这里是将订单挂载到tab列表下
			let index = this.tabCurrentIndex;
			let navItem = this.navList[index];
			let state = navItem.state;
			if (source === 'shua') {
				navItem.loaded = false;
				navItem.page = 1;
				navItem.limit = 10;
				navItem.loadingType = 'more';
				navItem.orderList = [];
			}
			if (source === 'tabChange' && navItem.loaded === true) {
				//tab切换只有第一次需要加载数据
				return;
			}
			if (navItem.loadingType === 'loading') {
				//防止重复加载
				return;
			}
			if (navItem.loadingType === 'noMore') {
				//防止重复加载
				return;
			}
			// 修改当前对象状态为加载中
			navItem.loadingType = 'loading';

			receiving_list({
				status: state,
				page: navItem.page,
				limit: navItem.limit
			})
				.then(({ data }) => {
					data.forEach(e => {
						if (e.remarks == undefined || e.remarks == 'undefined') {
							e.remarks = '无';
						}
						let key = Object.keys(e.cate);
						let name = '';
						key.forEach(e => {
							if (name == '') {
								name = name + e;
							} else {
								name = name + '/' + e;
							}
						});
						e.catename = name;
						let key1 = Object.keys(e.service);
						let name1 = '';
						e.issm = 1;
						key1.forEach(es => {
							console.log(e);
							if (es == '上门接送') {
								e.issm = 2;
							}
							if (name1 == '') {
								name1 = name1 + es;
							} else {
								name1 = name1 + '/' + es;
							}
						});
						e.servicename = name1;
						e.time = getTime(e.time);
					});
					navItem.orderList = navItem.orderList.concat(data);
					// 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);
				});
		},
		// 取消接单
		abandonOrder(opt) {
			const obj = this;
			uni.showModal({
				title: '提示',
				content: '是否取消订单',
				success: function(res) {
					if (res.confirm) {
						discard_orde({}, opt.id).then(e => {
							uni.showToast({
								title: '放弃订单成功',
								icon: 'success',
								duration: 2000
							});
							obj.loadData('shua');
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//swiper 切换
		changeTab(e) {
			this.tabCurrentIndex = e.target.current;
			this.loadData('tabChange');
		},
		//顶部tab点击
		tabClick(index) {
			this.tabCurrentIndex = index;
		}
	}
};
</script>

<style lang="scss">
page,
.content {
	background: $page-color-base;
	height: 100%;
}

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

.navbar {
	display: flex;
	height: 40px;
	padding: 0 5px;
	background: #fff;
	box-shadow: 0 1px 5px rgba(0, 0, 0, 0.06);
	position: relative;
	z-index: 10;
	.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;
			}
		}
	}
}

.uni-swiper-item {
	height: auto;
}

.order-item {
	width: 702rpx;
	background: #ffffff;
	box-shadow: 0px 0px 20rpx 0px rgba(50, 50, 52, 0.06);
	border-radius: 20rpx;
	margin: 20rpx auto 0;
	padding: 24rpx;
	.order-top-left {
		display: flex;
		align-items: center;
		.order-top-left-image {
			width: 32rpx;
			height: 37rpx;
		}
		.order-top-left-font {
			margin-left: 10rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
	}
	.order-top-right {
		font-size: 26rpx;
		font-family: PingFang SC;
		font-weight: 500;
		color: #ff6f0f;
	}
	.order-info {
		margin-top: 24rpx;
		align-items: flex-start;
		.order-info-left {
			width: 200rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #666666;
		}
		.order-info-right {
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		.order-info-picture {
			display: flex;
			justify-content: flex-end;
			.order-info-picture-item {
				width: 130rpx;
				height: 130rpx;
				margin-left: 10rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
		}
		.order-info-address {
			display: flex;
			align-items: center;
			.order-info-address-main {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				margin-right: 10rpx;
			}
			.order-info-address-icon {
				width: 24rpx;
				height: 24rpx;
			}
			.order-info-dh {
				margin-left: 4rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ff6f0f;
			}
		}
	}
	.order-btn-box {
		display: flex;
		justify-content: space-between;
		.btn1 {
			border: 1px solid #24a17d !important;
			color: #24a17d !important;
		}
		.btn2 {
			border: none !important;
			background: #ff6f0f;
			color: #fff !important;
		}
		.order-btn {
			margin-top: 34rpx;
			align-items: center;
			display: flex;
			justify-content: center;
			width: 211rpx;
			height: 74rpx;
			border: 1px solid #cdcdcd;
			border-radius: 10rpx;
			color: #666666;
			.order-btn-icon {
				width: 38rpx;
				height: 38rpx;
			}
			.order-btn-icon1 {
				width: 32rpx;
				height: 34rpx;
			}
			.order-btn-icon2 {
				width: 36rpx;
				height: 32rpx;
			}
			.order-btn-font {
				margin-left: 7rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
			}
		}
	}
	.ordering-btn {
		display: flex;
		justify-content: center;
		margin: 38rpx auto 0;
		width: 566rpx;
		height: 74rpx;
		background: #24a17d;
		border-radius: 15rpx;
		.ordering-btn-icon {
			width: 32rpx;
			height: 34rpx;
		}
		.ordering-btn-font {
			margin-left: 14rpx;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #ffffff;
		}
	}
}

/* load-more */
.uni-load-more {
	display: flex;
	flex-direction: row;
	height: 80rpx;
	align-items: center;
	justify-content: center;
}

@-webkit-keyframes load {
	0% {
		opacity: 1;
	}

	100% {
		opacity: 0.2;
	}
}
</style>