lanan-repair-app/pages-order/orderList/orderSimpleList.vue

<template>
	<view class="container">
		<VNavigationBar background-color="#fff" title="工单列表" title-color="#333"></VNavigationBar>
		<view class="body">
			<view class="orderList" style="height: 100%">
				<scroll-view scroll-y="true" style="height: 100%" class="itemContent" @scrolltolower="onReachBottomCus"
					refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
					<order-card :userInfo="userInfo" v-for="(item, index) in orderList" :key="index" :order="item"
						@childEvent="onRefresherrefresh" @startWork="startWork"></order-card>
					<view style="text-align: center" v-if="orderList.length==0">
						<image class="" src="@/static/images/nothing.png"></image>
					</view>
				</scroll-view>
			</view>
		</view>
		<tabBarVue msg="1"></tabBarVue>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	import tabBarVue from '@/components/tabBar/tabBar.vue'
	import OrderCard from "@/components/orderCard.vue";
	import request from '@/utils/request';
	import {
		formatTimestamp,
		getOrderStatusText,
		builderOrder,
		saveTicketsRecords
	} from "@/utils/utils";
	import {
		getToken,
		getUserInfo,
		getStrData,
		getJSONData,
		getTenantId,
		getStorageWithExpiry,
		setStorageWithExpiry
	} from '@/utils/auth'
	import RepairSoCard from "@/components/repairSoCard.vue";

	export default {
		components: {
			OrderCard,
			tabBarVue,
			VNavigationBar,
			RepairSoCard
		},
		data() {
			return {
				pageNo: 1,
				pageSize: 10,
				total: 0,
				//下来刷新状态
				isTriggered: false,
				orderList: [],
				userInfo: {},
				idList: [],
				//统计状态
				statisticsType: null
			}
		},
		onLoad(data) {
			if (getJSONData("orderIdList")) {
				this.idList = getJSONData("orderIdList")
			}
			if (data.statisticsType) {
				this.statisticsType = data.statisticsType
			}
			if (!getToken()) {
				uni.reLaunch({
					url: '/pages/login/login'
				})
			} else {
				//直接取缓存中的用户信息
				this.userInfo = getUserInfo()
				if (this.idList.length > 0 || this.statisticsType) {
					this.onRefresherrefresh()
				}
			}
		},
		onShow() {

		},
		methods: {
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				//判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				if (this.pageNo * this.pageSize >= this.total) {
					uni.$u.toast('没有更多数据了')
					return
				}
				//页码+1,调用获取数据的方法获取第二页数据
				this.pageNo++
				//此处调用自己获取数据列表的方法
				if (this.orderList.length > 0) {
					this.getOrderList()
				}
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.pageNo = 1
				this.total = 0
				this.orderList = []
				this.getOrderList()
			},
			/**
			 * 开始施工
			 */
			startWork(id) {
				let paramsObj = {
					ticketId: id
				}
				//先查当前用户在本工单下有几个维修项目
				request({
					url: '/admin-api/repair/titem/listProject',
					method: 'get',
					params: paramsObj
				}).then((res) => {
					console.log(res)
					if (res.code == 200 && res.data.length > 0) {
						if (res.data.length == 1) {
							//只有1个，直接开始施工
							this.startWorkRequest(id, "02", res.data[0].id, "02", "kssg", "开始施工")
						} else {
							uni.showActionSheet({
								itemList: res.data.map(m => m.itemName),
								success: ({
									tapIndex
								}) => {
									this.startWorkRequest(id, "02", res.data[tapIndex].id, "02",
										"kssg", "开始施工")
								}
							})
						}
					} else {
						uni.showToast({
							title: '操作失败，请联系管理员',
							icon: 'none'
						})
					}
				})
			},
			/**
			 * 开始施工请求后台
			 */
			async startWorkRequest(id, ticketsWorkStatus, itemId, itemStatus, recordType, remark) {
				try {
					const result = await saveTicketsRecords(id, ticketsWorkStatus, itemId, itemStatus, recordType,
						remark, null);
					console.error("result", result);
					this.onRefresherrefresh()
				} catch (error) {
					console.error(error);
				}
			},
			getOrderList() {
				let paramsObj = {
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					isFinish: "0",
					idList: this.idList,
					statisticsType: this.statisticsType
				}
				request({
					url: '/admin-api/repair/tickets/pageType',
					method: 'get',
					params: paramsObj
				}).then((res) => {
					console.log(res)
					if (res.code == 200) {
						let thisPageRecords = []
						if (res.data && res.data.hasOwnProperty("records")) {
							for (let i = 0; i < res.data.records.length; i++) {
								let order = res.data.records[i]
								let viewOrder = builderOrder(order)
								if (order.booking) {
									viewOrder['appointDate'] = formatTimestamp(order.createTime)
								}
								let projectList = []
								if (order.itemList) {
									for (let j = 0; j < order.itemList.length; j++) {
										let itemObj = order.itemList[j]
										if ("01" == itemObj.itemType) {
											projectList.push({
												id: itemObj.id,
												name: itemObj.itemName
											})
										}
									}
								}
								viewOrder['projectList'] = projectList
								thisPageRecords.push(viewOrder)
							}
						}
						//判断 如果获取的数据的页码不是第一页，就让之前赋值获取过的数组数据 concat连接 刚获取的第n页数据
						if (this.pageNo != 1) {
							this.orderList = this.orderList.concat(thisPageRecords)
						} else {
							this.orderList = thisPageRecords
						}
						//将获取的总条数赋值
						this.total = res.data.total
						this.isTriggered = false
					}
				})
			},
		}
	}
</script>

<style lang="less" scoped>
	.container {
		height: 100%;
		background: #F3F5F7;
		display: flex;
		flex-direction: column;
		color: #333333;

		.header {
			padding: 20rpx 32rpx 0 32rpx;
			background-color: #fff;

			.searchBox {
				background: #F3F5F7;
				padding: 20rpx 32rpx;
				border-radius: 12rpx 12rpx 12rpx 12rpx;
				display: flex;
				align-items: center;
				column-gap: 12rpx;

				.searchInput {
					flex: 1;
					width: 0;
				}

				.searchBtn {
					font-weight: 500;
					font-size: 28rpx;
					color: #0174F6;
				}
			}
		}

		.body {
			flex: 1;
			height: 0;
			padding: 14rpx 32rpx;
			overflow: auto;
		}

		.body-top-tab {
			background: white;
			display: flex;
			font-size: 30rpx;
			padding: 5rpx 0;
			align-items: center;

			.line {
				width: 2rpx;
				height: 60rpx;
				background-color: #DDDDDD;
			}

			.body-top-tab-item {
				flex: 1;
				width: 0;
				text-align: center;
				padding: 16rpx 20rpx;
				position: relative;

				&.active {
					color: #0174F6;
				}

				.activeLine {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 96rpx;
					height: 6rpx;
					background: #0174F6;
					border-radius: 4rpx 4rpx 0rpx 0rpx;
				}
			}
		}

		.tabList {
			background: #FFFFFF;
			border-radius: 12rpx 12rpx 0 0;
			display: flex;
			align-items: center;
			padding: 0 40rpx;

			.tabItem {
				padding: 30rpx;
				flex: 1;
				//z-index: 9999999;
				text-align: center;
				position: relative;
				font-size: 28rpx;

				&.actived {
					color: #0174F6;
				}

				.activeLine {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 96rpx;
					height: 6rpx;
					background: #0174F6;
					border-radius: 4rpx 4rpx 0rpx 0rpx;
				}
			}
		}

		.orderList {
			//padding: 30rpx 0;
			padding-top: 10rpx;
			height: calc(100% - 340rpx);
			display: flex;
			flex-direction: column;

			.orderItem {}
		}
	}
</style>