wit-uniapp/pages/index/Workordertodone/Workordertodone.vue

<template>
	<view class="">
<view class="" style="width: 750rpx;height: 50rpx;">
			
		</view>
		<view class="topname">
			<view class="topname1" @click="goback">
				<u-icon name="arrow-left" color="#000000" size="36"></u-icon>
			</view>
			<view class="topname2">
				报修工单
			</view>
		</view>

		<view class="subsection">
			<u-subsection :list="list" fontSize="30rpx" :current="current" @change="sectionChange"></u-subsection>
		</view>


		<!-- 待指派 -->
		<view class="" v-show="cdshow==0">
			<view style="padding:20rpx 0 0 30rpx">
				共有 <span style="color: red">{{totalnumber}}</span>条记录
			</view>

			<view class="u-listdata" >
				<u-list  @scrolltolower="scrolltolower" :pagingEnabled='true'>
					<u-list-item v-for="(item, index) in indexList" :key="index">
						<view class="paisong"  @click="Workorderdetails1(item)">
							<h3>{{item.repairPosition}}</h3>
							<view class="Currentamount1" v-if='item.repairType==1'>
								报修类型: 水
							</view>
							<view class="Currentamount1" v-if='item.repairType==2'>
								报修类型: 电
							</view>
							<view class="Currentamount1" v-if='item.repairType==3'>
								报修类型: 其他
							</view>

							<view class="Currentamount1">
								报修时间: {{item.createDate}}
							</view>
						</view>

					</u-list-item>
				</u-list>
			</view>
		</view>
		<!-- 已派送(待维修) -->
		<view class="" v-show="cdshow==1">
		<!-- 	列表 -->
			<view class="u-listdata" >
				<view style="padding:20rpx 0 0 30rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view>

				<u-list  @scrolltolower="scrolltolower" :pagingEnabled='true'>
					<u-list-item v-for="(item, index) in indexList" :key="index">

						<view class="paisong"  @click="Workorderdetails2(item)">
							<view class="settled1" v-if="item.urgency==1">
								非常紧急
							</view>
							<view class="settled2" v-if="item.urgency==2">
								紧急
							</view>
							<view class="settled3" v-if="item.urgency==3">
								普通
							</view>

							<h3>{{item.repairPosition}}</h3>
							<view class="Currentamount1" v-if='item.repairType==1'>
								报修类型: 水
							</view>
							<view class="Currentamount1" v-if='item.repairType==2'>
								报修类型: 电
							</view>
							<view class="Currentamount1" v-if='item.repairType==3'>
								报修类型: 其他
							</view>
							<view class="Currentamount1">
								派送时间:{{ item.updateDate }}
							</view>

						</view>

					</u-list-item>
				</u-list>
			</view>

		</view>

<!--已维修 -->
		<view class="" v-show="cdshow==2">
		<!-- 	列表 -->
			<view class="u-listdata" >
				<view style="padding:20rpx 0 0 30rpx">
					共有 <span style="color: red">{{totalnumber}}</span>条记录
				</view>

				<u-list  @scrolltolower="scrolltolower" :pagingEnabled='true'>
					<u-list-item v-for="(item, index) in indexList" :key="index">

						<view class="paisong"   @click="Workorderdetails2(item)">
							<view class="settled1" v-if="item.urgency==1">
								非常紧急
							</view>
							<view class="settled2" v-if="item.urgency==2">
								紧急
							</view>
							<view class="settled3" v-if="item.urgency==3">
								普通
							</view>

							<h3>{{item.repairPosition}}</h3>
							<view class="Currentamount1" v-if='item.repairType==1'>
								报修类型: 水
							</view>
							<view class="Currentamount1" v-if='item.repairType==2'>
								报修类型: 电
							</view>
							<view class="Currentamount1" v-if='item.repairType==3'>
								报修类型: 其他
							</view>
							<view class="Currentamount1">
								维修完成时间:{{ item.repairFinishTime }}
							</view>

						</view>

					</u-list-item>
				</u-list>
			</view>
		</view>

	</view>
</template>

<script>
//	import { isEmpty, getDictDataList } from "@/utils/index";

	export default {
		name:'Workordertodone',
		data() {
			return {
				totalnumber:0,
				jfnodata:false,
				showtype: false,
				cdshow: 0,
				fatherparameter: {},
				expensedata:'全部',
				list: ['待指派', '已指派(待维修)','已维修' ],
				current: 0,
				dataForm: {
					status: "1",
					page: 1,
					limit: 10,
				},
				indexList: [],
				payStatusList: [],
				nodata:true,
				pd:true,
				columnstype: [],
				repairTypeList:[],
				UrgencyTypelist:[],
			}
		},
		//监听页面加载，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参
		onLoad: function(options) { //option为object类型，会序列化上个页面传递的参数


			this.getRepairTypeList();

			this.getpaisongdata();

		},
		//监听页面初次渲染完成。注意如果渲染速度快，会在页面进入动画完成前触发
		onReady() {},

		//监听页面隐藏
		onHide() {},
		//监听窗口尺寸变化
		onResize() {},
		//监听页面卸载
		onUnload() {},
		//监听用户下拉动作，一般用于下拉刷新
		onPullDownRefresh() {},


		methods: {
			   getRepairTypeList() {
				   //  console.log('9999', getDictDataList("UrgencyType"))
					// this.UrgencyTypelist=getDictDataList("UrgencyType");
					//   console.log('888', getDictDataList("RepairType"))
			   //   this.repairTypeList = getDictDataList("RepairType");
			    },
			Workorderdetails1(e){
				//  console.log('111111111111111111',e)
				   uni.navigateTo({
				             url: `/pages/index/Workordertodone/Workorderdetails/Workorderdetails?id=${e.id}`
				          });
			},
			Workorderdetails2(e){
				//  console.log('111111111111111111',e)
				   uni.navigateTo({
				             url: `/pages/index/Workordertodone/Toberepaired/Toberepaired?id=${e.id}`
				          });
			},
			// Workorderdetails3(e){
			// 	//  console.log('111111111111111111',e)
			// 	   uni.navigateTo({
			// 	             url: `/pages/index/Workordertodone/hasrepaired/hasrepaired?id=${e.id}`
			// 	          });
			// },

			sectionChange(index) {
				this.current = index;
				if (index == 0) {
					this.cdshow = 0;
					 this.indexList=[];
					 this.dataForm.page = 1;
					 this.dataForm.status = 1;
					 this.getpaisongdata();
				} else if(index == 1) {
					this.cdshow = 1;
					this.indexList=[];
					this.dataForm.page = 1;
					this.dataForm.status = 2;
					this.getpaisongdata();
				} else if(index == 2) {
					this.cdshow = 2;
					this.indexList=[];
					this.dataForm.page = 1;
					this.dataForm.status = 3;
					this.getpaisongdata();
				}

			},
			scrolltolower() {
				if(this.pd){
					this.getpaisongdata();
				}else{
					 return
				}
			},
			    // dict_filter(val, list) {
			    //   if (isEmpty(val)) {
			    //     return {};
			    //   }
			    //   return this[list].find((item) => item.dictValue == val);
			    // },
			getpaisongdata(){
				this.$api.get('/repairorder/page', this.dataForm)
					.then(res => {
						 this.totalnumber=res.data.data.total;

						if (res.data.data.list.length != 0) {
							this.indexList.push(...res.data.data.list);
								this.dataForm.page = this.dataForm.page + 1;
								this.pd=true;
								this.jfnodata=false;
						} else {
							uni.showToast({
								title:'暂无更多数据了',
								icon: 'none',
								duration: 1500
							})
							this.pd=false;
							//this.jfnodata=true
						}

					})
			},
goback() {
				uni.navigateTo({
					url: '/pages/index/index'
				})
			},



		}
	}
</script>

<style lang="scss">

.topname {
		height: 44px;
		width: 750rpx;
		display: flex;
		align-items: center;
	}
	
	.topname1 {
		width: 50rpx;
		padding-left: 10rpx;
	}
	
	.topname2 {
		width: 700rpx;
		text-align: center;
		font-weight: bold;
	}

	.nodata{
		text-align: center;
		padding-top: 400rpx;

	}
	.paisong{
		display: flex;
		flex-direction: column;
		justify-content:center;
		height:170rpx;
		background-color: #fff;
		margin: 30rpx;
		border-radius: 9rpx;
		position: relative;
		h3 {
			height: 70rpx;
			line-height: 70rpx;
			padding-left: 30rpx;
		}
	}


	.companylist {
		margin: 20rpx 30rpx;
		background: #fff;
		height: 280rpx;
		border-radius: 10px;
		position: relative;

		h3 {
			height: 70rpx;
			line-height: 70rpx;
			padding-left: 30rpx;
		}
	}
	.settled1 {
		background-color: #ED3A25;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.settled2 {
		background-color: #FF9C27;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.settled3 {
		background-color: #30D3A2;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}



	.Currentamount {
		padding-left: 30rpx;
		height: 50rpx;
		line-height: 50rpx;
		color: #BCB3A7;

		span {
			color: #FA5555;
			padding-left: 9rpx;
		}
	}

	.Currentamount1 {
		padding-left: 30rpx;
		height: 40rpx;
		line-height: 40rpx;
		color: #BCB3A7;

		span {
			color: #FA5555;
			padding-left: 9rpx;
		}
	}

	.records1{
		background-color: #FA5555;
		width: 100rpx;
		height: 40rpx;
		text-align: center;
		line-height: 40rpx;
		color: #fff;
		font-size: 14rpx;
		position: absolute;
		top: 0px;
		right: 0px;
		border-top-right-radius: 10rpx;
		border-bottom-left-radius: 10rpx;
	}
	.records{
		display: flex;
		flex-direction: column;
		// justify-content: center;
		position: relative;
		width: 690rpx;
		height: 210rpx;
		background: #fff;
		margin: 0 auto;
		border-radius: 9rpx;
	}
	.onerecord{
		width: 750rpx;
		height: 90rpx;
		line-height: 90rpx;
		padding-left: 30rpx;
		color: #999;
		span{
			color: red;
		}
	}
	.topbilledit {
		display: flex;
		justify-content: center;
		align-items: center;
		background: #fff;
		height: 60rpx;
	}

	.changetime2 {
		padding-left: 10rpx;
	}

	.subsection {
		padding: 30rpx;
		background: #fff;
	}

	.topname {
		height: 44px;
		width: 750rpx;
		display: flex;
		align-items: center;
	}

	.topname1 {
		width: 50rpx;
		padding-left: 10rpx;
	}

	.topname2 {
		width: 700rpx;
		text-align: center;
		font-weight: bold;
	}
</style>