pz/pages/order/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">{{ item.after_sales == 1 ? '申请售后' : item.after_sales == 2 ? '售后成功' : 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" 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="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="item.issm == 2">
							<view class="order-info-left">接送地址：</view>
							<view class="order-info-right">{{ item.transfer_address }}</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-btn-box" v-if="tabCurrentIndex == 0">
							<view class="order-btn" @click="qxorder(item)">
								<image class="order-btn-icon" src="../../static/img/order3.png" mode=""></image>
								<view class="order-btn-font">取消订单</view>
							</view>
						</view>
						<view class="ordering" v-if="tabCurrentIndex == 1">
							<view class="order-info flex">
								<view class="order-info-left">接单人：</view>
								<view class="order-info-right">{{ item.receiving.name }}</view>
							</view>
							<view class="order-info flex">
								<view class="order-info-left">接单人电话：</view>
								<view class="order-info-right">{{ item.receiving.phone }}</view>
							</view>
							<view class="ordering-btn flex" @click="call(item)">
								<image class="ordering-btn-icon" src="../../static/img/order4.png" mode=""></image>
								<view class="ordering-btn-font">立即联系</view>
							</view>
						</view>
						<view class="ordering" v-if="tabCurrentIndex == 2">
							<view class="order-info flex">
								<view class="order-info-left">接单人：</view>
								<view class="order-info-right">{{ item.receiving.name }}</view>
							</view>
							<view class="order-info flex">
								<view class="order-info-left">接单人电话：</view>
								<view class="order-info-right">{{ item.receiving.phone }}</view>
							</view>
							<view class="order-info flex">
								<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="ordering-btnbox">
								<view class="ordering-btnbox-left" @click="navTo('/pages/order/evaluate?unique=' + item.id)">
									<image class="ordering-btnbox-left-icon" src="../../static/img/order1.png" mode=""></image>
									<view class="ordering-btnbox-left-font">{{ item.after_sales == 1 ? '查看售后' : '申请售后' }}</view>
								</view>
								<view class="ordering-btnbox-right" @click="accomplish(item)"><view class="ordering-btnbox-right-font">确认完成</view></view>
							</view>
						</view>
						<view class="ordering" v-if="tabCurrentIndex == 3">
							<view class="order-info flex">
								<view class="order-info-left">接单人：</view>
								<view class="order-info-right">{{ item.receiving.name }}</view>
							</view>
							<view class="order-info flex">
								<view class="order-info-left">接单人电话：</view>
								<view class="order-info-right">{{ item.receiving.phone }}</view>
							</view>
							<view class="order-info flex">
								<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">
								<view class="order-btn" @click="navTo('/pages/order/evaluate?unique=' + item.id)">
									<image class="order-btn-icon" src="../../static/img/order1.png" mode=""></image>
									<view class="order-btn-font">{{ item.after_sales == 1 ? '查看售后' : '申请售后' }}</view>
								</view>
							</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 { mapState, mapMutations } from 'vuex';
import empty from '@/components/empty';
import { orderList, orderCancel, orderDel, orderTake, confirmation } from '@/api/order.js';
import { getTime } from '@/utils/rocessor.js';
import { saveUrl, interceptor } from '@/utils/loginUtils.js';
export default {
	components: {
		uniLoadMore,
		empty
	},
	computed: {
		...mapState('user', ['userInfo', 'orderInfo', 'hasLogin'])
	},
	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 //每次信息条数
				},
				{
					state: 2,
					text: '待确认',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				},
				{
					state: 3,
					text: '已完成',
					loadingType: 'more',
					orderList: [],
					page: 1, //当前页数
					limit: 10 //每次信息条数
				}
			]
		};
	},
	onShow() {
		this.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 //每次信息条数
			}
		];
		this.tabCurrentIndex = 0;
		if (!this.hasLogin) {
			// 保存地址
			saveUrl();
			// 登录拦截
			interceptor();
		} else {
			this.loadData();
		}
	},
	onLoad(options) {},
	// #ifdef APP-PLUS || H5
	onBackPress(e) {
		uni.switchTab({
			url: '/pages/user/user'
		});
		return true;
	},
	// #endif
	filters: {
		moneyNum(value) {
			return +value;
		}
	},
	methods: {
		call(item) {
			console.log(item.receiving.phone);
			uni.makePhoneCall({
				phoneNumber: item.receiving.phone //仅为示例
			});
		},
		// 完成
		accomplish(opt) {
			const obj = this;
			uni.showModal({
				title: '提示',
				content: '是否确认订单成功',
				success: function(res) {
					if (res.confirm) {
						confirmation({}, opt.id).then(e => {
							uni.showToast({
								title: '确认订单成功',
								icon: 'success',
								duration: 2000
							});
							obj.loadData('shua');
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},

		// 转换金额为数字
		moneyNum(value) {
			return +value;
		},
		navTo(url) {
			uni.navigateTo({
				url
			});
		},
		// 取消订单
		qxorder(opt) {
			const obj = this;
			uni.showModal({
				title: '提示',
				content: '是否取消订单',
				success: function(res) {
					if (res.confirm) {
						orderCancel({}, opt.id).then(e => {
							uni.showToast({
								title: '取消订单成功',
								icon: 'success',
								duration: 2000
							});
							obj.loadData('shua');
						});
					} else if (res.cancel) {
						console.log('用户点击取消');
					}
				}
			});
		},
		//获取订单列表
		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';

			orderList({
				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);
					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);
				});
		},

		//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-btn-box {
		display: flex;
		justify-content: flex-end;
		.order-btn {
			margin-top: 34rpx;
			align-items: center;
			display: flex;
			justify-content: center;
			width: 181rpx;
			height: 63rpx;
			border: 1rpx solid #c9c9c9;
			border-radius: 15rpx;
			.order-btn-icon {
				width: 38rpx;
				height: 38rpx;
			}
			.order-btn-font {
				margin-left: 7rpx;
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
			}
		}
	}
	.ordering {
		margin-top: 30rpx;
		padding: 30rpx 0 10rpx;
		border-top: 1px solid #eaeced;
		.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;
			}
		}
		.ordering-btnbox {
			margin-top: 40rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.ordering-btnbox-left {
				display: flex;
				flex-direction: column;
				align-items: center;
				line-height: 1;
				.ordering-btnbox-left-icon {
					width: 42rpx;
					height: 42rpx;
				}
				.ordering-btnbox-left-font {
					margin-top: 10rpx;
					font-size: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
				}
			}
			.ordering-btnbox-right {
				display: flex;
				justify-content: center;
				align-items: center;
				width: 556rpx;
				height: 74rpx;
				background: #24a17d;
				border-radius: 15rpx;
				.ordering-btnbox-right-font {
					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>