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

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

		<!-- 待派送 -->
		<view class="" v-show="cdshow==0">
			
					
			<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="Workorderdetails(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" >								
				<u-list  @scrolltolower="scrolltolower" :pagingEnabled='true'>
					<u-list-item v-for="(item, index) in indexList" :key="index">
						
						<view class="paisong"  @click="Workorderdetails(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" >
				<u-list  @scrolltolower="scrolltolower" :pagingEnabled='true'>
					<u-list-item v-for="(item, index) in indexList" :key="index">
						
						<view class="paisong"  @click="Workorderdetails(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 {
		data() {
			return {
				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");
			    },
			Workorderdetails(e){
				//  console.log('111111111111111111',e)
				   uni.navigateTo({
				             url: `/pages/index/Workordertodone/Workorderdetails/Workorderdetails?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 => {
						//  console.log('111111111111111111',res.data.data.list)						 					 
						//  this.repairTypeList 
						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
						}									
								
					})
			},
			
			
		

		}
	}
</script>

<style lang="scss">
	.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>