order.vue

<template>
	<TabBarPage title="订单" :fixed="true" @click="goTop">
		<view class="tools-box">
			<view class="search-sub">
				<u-subsection :current="curNow" :list="subList" active-color="white" bg-color="white"
					inactive-color="#666" button-color="#2272FF" border-radius="36" @change="sectionChange" height="72"
					bold>
				</u-subsection>
			</view>
			<view class="search-btn" @click="handleClickSearch">
				<image class="search-image" mode="widthFix" :src="sousuoImage"></image>
				<text class="search-btn-text">搜订单</text>
			</view>
		</view>
		<view class="u-tabs-box" v-show="curNow == 0">
			<u-tabs height="66" activeColor="#2272FF" bg-color="none" inactive-color="#999" bar-height="4"
				bar-width="44" :offset="[0,0]" :list="list" count="total" :current="current" @change="change"
				:is-scroll="false" font-size="28" bold></u-tabs>
		</view>

		<view class="tab-view">
			<scroll-view scroll-y style="height: 100%;width: 100%;" @scrolltolower="reachBottom" scroll-anchoring
				refresher-enabled="true" :refresher-triggered="triggered" :refresher-threshold="100" :scroll-top="scrollTop"
				refresher-background="#F4F5F7" @refresherpulling="triggered = true" @refresherrefresh="onRefresh"
				@refresherrestore="onRestore" @scroll="scroll" enable-back-to-top>
				<view class="loading-view" v-if="!loaded">
					<u-loading mode="flower"></u-loading>
				</view>
				<NoOrder v-else-if="noMore" imageName="zwdd.png" :customStyle="noOrderCustomStyle" />
				<template v-else>
					<view v-for="(item, index) in orderList" :key="item.orderId">
						<OrderCell :orderData="item" :type="orderType" :location="dataValue" @click="handleClick"
							@action="handleClickCellButton"> </OrderCell>
					</view>
					<view class="load-more-view">
						<u-loadmore v-show="(pageNumber == 1 && loaded) || pageNumber > 2"  :status="loadStatus" bgColor="#F4F5F7"></u-loadmore>
					</view>
				</template>
			</scroll-view>
		</view>

	</TabBarPage>
</template>

<script>
	import TabBarPage from "@/components/tabBarList/index.vue"
	import OrderCell from "@/components/order/index.vue"
	import NoOrder from "@/components/order/noOrder.vue"

	export default {
		components: {
			TabBarPage,
			OrderCell,
			NoOrder
		},
		data() {
			return {
				curNow: 0,
				pageNumber: 0,
				pageSize: 100,
				orderList: [],
				list: [{
						name: '待预约',
						total: 0,
					},
					{
						name: '待签到',
						total: 0,
					},
					{
						name: '待完工',
						total: 0,
					},
					{
						name: '审核中',
						total: 0,
					},
					{
						name: '异常单',
						total: 0,
					}
				],
				current: 0,
				loadStatus: 'loading',
				dataValue: [],
				loaded: false,
				triggered: false,
				_freshing: false,
				scrollTop: 0,
				old: {
					scrollTop: 0
				}
			};
		},
		computed: {
			subList() {
				return ['待处理', '已完工']
			},
			// 0:'去预约', 1:'去签到', 2:'去完工', 3:'审核中', 4:'去处理', 5'已完工'
			orderType() {
				return this.indexStatus[this.currentIndex]
			},
			currentIndex() {
				return this.curNow == 0 ? this.current : 5
			},
			sousuoImage() {
				return process.uniEnv.qn_base_url + 'sousuo.png'
			},
			types() {
				return {
					'waitAppointment': 0, // 待预约、
					'waitCheckIn': 1, // 待签到、
					'waitFinish': 2, // 待完工、
					'audit': 3, // 审核中、
					'exception': 4, // 异常单、
					'finish': 5, //已完工
				}
			},
			//waitAccept、waitAppointment、waitCheckIn、waitFinish、exception、finish
			indexStatus() {
				return {
					0: 'waitAppointment',
					1: 'waitCheckIn',
					2: 'waitFinish',
					3: 'audit',
					4: 'exception',
					5: 'finish'
				}
			},
			countKeys() {
				return ['toAppointmentCount', 'toCheckinCount', 'toFinishCount', 'reviewingCount', 'exceptionCount']
			},
			noMore() {
				return this.orderList.length == 0 && this.loaded
			},
			noOrderCustomStyle() {
				return this.curNow == 0 ? 'margin-top: 100rpx;background-color: #F4F5F7' : 'margin-top: 200rpx;background-color: #F4F5F7'
			}
			
		},
		onLoad(e) {
			getApp().trackPage('订单首页')
			this._freshing = false;
			if (e && e.type) {
				this.current = e.type
			}
		},
		onShow() {
			this.reloadOrderInfo()
		},
		methods: {
			sectionChange(index) {
				this.curNow = index;
				this.reloadOrderList()
			},
			// tab栏切换
			change(index) {
				this.current = index;
				this.reloadOrderList()
			},

			reachBottom(e) {
				if (this.loadStatus != 'loadmore') return
				this.loadStatus == 'loading'
				this.getOrderList(this.currentIndex)
			},
			// 页面数据
			getOrderList(index) {
				// 状态处理
				this.pageNumber += 1
				this.loaded = false
				var param = {
					pageNumber: this.pageNumber,
					pageSize: this.pageSize,
					keyword: '',
					type: this.indexStatus[index]
				}
				var self = this;
				self.$u.api.listOrder(param).then((res) => {
					if (res.code == 200) {
						if (res.data.type != self.orderType) return
						self.triggered = false;
						self._freshing = false;
						if (self.pageNumber == 1) {
							self.orderList = []
						}
						if (res.data.list) {
							self.orderList.push(...res.data.list)
							if (self.list[self.types[res.data.type]]) {
								self.list[self.types[res.data.type]].total = res.data.total
							}
							self.loadStatus = res.data.total > self.orderList.length  && res.data.list.length == self.pageSize ? 'loadmore' : 'nomore'
						}
					} else {
						console.log(res.message, "获取订单数量失败！");
					}
					this.loaded = true
				});

			},

			// 获取订单数量
			getOrderCount() {
				var self = this
				self.$u.api.listOrderCount().then((res) => {
					if (res.code == 200) {
						if (res.data) {
							// 修改各个tab数量
							var i = 0
							var count = 0
							for (var item of self.list) {
								item.total = res.data[self.countKeys[i]]
								count += item.total
								i++
							}
							
							// 修改tab总数
							if (count > 0) {
								uni.setTabBarBadge({
									index: 1,
									text: String(count)
								})
							} else  {
								uni.removeTabBarBadge({
									index: 1
								})
							}
						}
					} else {
						console.log(res.message, "获取订单数量失败！");
					}
				});
			},
			handleClickCellButton(item) {
				this.filish(item)
			},
			handleClick(item, type, showCountTime) { // type:类型，showCountTime：是否显示倒计时。详情页面情况太多，提前传值可以避免页面晃动
				if(item.orderStatus===86 || item.orderStatus===88){
					this.filish(item)
					return 
				}
				//type类型
				// 'waitAccept': 待接单、待抢单;'waitAppointment': 待预约;'waitCheckIn': 待签到;'waitFinish': 待完工;'audit': 审核中;'exception': 异常单;'finish': 已完工;'other': 工单结算信息
				uni.navigateTo({
					url: 'pages/order/detail?id=' + item.orderId + '&type=' + type + '&showCountTime=' + showCountTime
				})
			},
			filish(item){
				// 去完工
				uni.navigateTo({
					url: 'pages/order/complete?orderId='+item.orderId 
						+ "&categoryId=" + item.categoryId 
						+ "&orderServiceType=" + item.orderServiceType
						+ "&inGuaranteePeriod=" + item.inGuaranteePeriod
						+ "&partnerCompanyId=" + item.partnerCompanyId
						+ "&auditResultsId=" + (item.auditResults?Object.keys(item.auditResults)[Object.keys(item.auditResults).length - 1]:'')
						+ "&maintainStep=" + item.maintainStep
				})
			},
			handleClickSearch() {
				uni.navigateTo({
					url: 'pages/order/search'
				})
			},
			onRefresh() {
				if (this._freshing) return;
				this._freshing = true;
				this.reloadOrderInfo()
			},
			onRestore() {
				this.triggered = 'restore'; // 需要重置
			},
			reloadOrderInfo() {
				this.reloadOrderList()
				this.getOrderCount();
			},
			reloadOrderList() {
				this.pageNumber = 0
				this.loadStatus = 'loading'
				this.getOrderList(this.currentIndex);
			},
			scroll(e) {
				this.old.scrollTop = e.detail.scrollTop
			},
			goTop(e) {
				this.scrollTop = this.old.scrollTop
				this.$nextTick(function() {
					this.scrollTop = 0
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.u-tabs-box {
		margin-bottom: 30rpx;
	}

	.tab-view {
		height: 100%;
		overflow: auto;
		// padding-bottom: 20rpx;
		.load-more-view {
			margin-bottom: 20rpx;
		}
		.loading-view {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			margin-top: 300rpx;
			position: absolute;
		}
	}

	.tools-box {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		padding-bottom: 20rpx;

		.search-sub {
			height: 72rpx;
			width: 320rpx;
		}

		.search-btn {
			height: 72rpx;
			width: 220rpx;
			background-color: #ffffff;
			border-radius: 36rpx;
			color: #999999;
			display: flex;
			justify-content: center;
			align-items: center;

			.search-image {
				width: 36rpx;
				height: 32rpx;
				flex-shrink: 0;
				margin-right: 24rpx;
			}

			.search-btn-text {
				line-height: 36rpx;
				font-weight: 400;
				font-size: 26rpx;
			}
		}
	}
</style>