jp-youdian-Inspection/pages/task/listTask.vue

<template>
	<view>
		<u-navbar title="故障记录" title-color="#101010" :customBack="customBack" ></u-navbar>
		
		<view class="top">
			<view class="search">
				<view class="searchBox">
					<u-search shape="square" placeholder="使用停车场名称/地锁编号搜索" maxlength="12" v-model="testName" :show-action="false"
						:animation="true"></u-search>
					<u-button type="primary" size="mini" @click="testBtn">搜素</u-button>
				</view>
			</view>
		</view>
		
		<view  class="viewTop" >
			<u-tabs :list="tabslist" 
			 style="   width: 50%;"
			 :current="current" @change="change"></u-tabs>
			 <view class="select" @click="gotoSelectLock">
				<view class="selectSpan">
					{{lockName?lockName:'选择地锁'}}
				</view>
				 <u-icon name="arrow-down" size="32" color="#AAAAAA"></u-icon>
			 </view>
		</view>
		

		<view class="list"  >
			<view class="item" 
			 v-for="(item,index) in list" 
			 @click="gotoTask(item)"
			 :key="index">
			
				<view class="body">
					<view class="line1">
						<view class="title">
							{{item.errorCodeText}}
		
						</view>
						<view class="status " :class="'status'+item.status">
							{{item.statusN}}
		
						</view>
					</view>
					
					<view class="line2">
						<view class="value">
							设备编号 {{item.parkingName}}
		
						</view>
						<view class="value">
							设备网点 {{item.parkingName}} 
		
						</view>
						<view class="value">
							创建时间 {{item.createTime}} 
						</view>
						
					</view>
					
					<view class="line3">
						
						<u-button  type="info"  size="mini">查看</u-button>
						
						<u-button  type="primary"  size="mini" >去处理</u-button>
						
					</view>
		
				</view>
				
			</view>
			
			
		</view>
		<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
		
		
		<view class="floating-button">
			<view class="button"  @click="submit" >
				
				故障上报

			</view>
			
		</view>
		
	</view>
</template>

<script>
	import * as API from '@/apis/pagejs/pagesTask.js'
	
	export default {
		data() {
			return {
				list:[],
				listForm:{
					pageIndex: 1,
					pageSize: 20,
					recordsTotal: 1,
					status:0
				},
				lockId:"",
				lockName:"",
				current:0,
				tabslist:[
					{
						name: '待处理'
					}, {
						name: '已处理'
					}
				]
			};
		},
		onLoad(op) {
			if(op.status){
				if('geterrList0'==op.status){
					this.current=0
					this.listForm.status=0
				}
				if('geterrList1'==op.status){
					this.current=1
					this.listForm.status=1
				}
			}
			
			if(op.lockId){
				this.lockId=op.lockId
				this.lockName=op.lockName
				this.listForm.lockId=op.lockId;
			}
			this.getList()
		},
		onReachBottom() {
			if (this.list.length < this.listForm.recordsTotal) {
				this.myLoadmore();
			}
		},
		methods: {
			gotoSelectLock(){
				uni.navigateTo({
				  url: '/pages/task/selectLock?isAll=1',
				  events: {
				    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				    acceptDataFromOpenerPage: (item)=>{
						console.log(item)
						
						this.lockName=item.item.name
						this.listForm.lockId=item.item.id
						this.getList(1)
						this.$forceUpdate()
						
				    },
				 
				  }
				 
				})
			},
			customBack(){
				if(this.lockId){
					uni.switchTab({
						url:"/pages/index/index"
					})
				}else{
					uni.navigateBack()
				}
			},
			gotoTask(k){
				uni.navigateTo({
				  url: '/pages/task/maintenanceTaks?id='+k.id,
				  events: {
				    // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
				    acceptDataFromOpenerPage: (data)=>{
						console.log(data)
						this.getList(1)
				    },
				 
				  }
				 
				})
			},
			change(e){
				this.current=e
				this.listForm.pageIndex=0
				this.listForm.status=e
				this.list =[]
				this.getList()
			},
			
			myLoadmore(){
				this.listForm.pageIndex += 1;
				this.getList()
			},
			getList(bl) {
				if(bl){
					this.listForm.pageIndex = 1
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
							 
				API.errList(this.listForm).then((res) => {
					var list=[]
					
					if (this.listForm.pageIndex == 1) {
						list = res.data.data;
					} else {
						list = [
							...list,
							...res.data.data
						];
					}
					this.list = res.data.data
					uni.hideLoading();
				
				}).catch(error => {
				
					uni.hideLoading();
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
		
	}
</script>

<style lang="scss" scoped>

		.list {
			padding: 24rpx 24rpx;
			
			.item {
				border-radius: 8px;
				
				display: flex;
				border-bottom: 1px solid rgba(232, 232, 232, 1);
				background-color: rgba(255,255,255,1);
				// padding: 12rpx 0;
				 margin-bottom: 12rpx ;

				.img {
					width: 72rpx;
					height: 72rpx;

				}

				.body {
					//margin: 0 12rpx;
					width: 100%;
					.line1,.line2,.line3{
						padding: 12px;
					}
					.line3{
						text-align: end;
					}
					.line2 {
						color: rgba(119,119,119,1);
						font-size: 24rpx;
						//margin-top: 8rpx;
						border-bottom:1px solid rgba(232,232,232,1);
						.value:not(:last-child) {
							margin-bottom: 16rpx;
						}
					}
					.line1 {
						
						display: flex;
						justify-content: space-between;
						 border-bottom:1px solid rgba(232,232,232,1);
						.title {
							color: rgba(51, 51, 51, 1);
							font-size: 28rpx;
							font-weight: bold;
						}

						.status {
							background-color:  rgba(255, 61, 0, 1);
							font-size: 24rpx;
							color:#fff;
							padding: 2rpx 8rpx;
							//border-radius: 4px;

						}
						
						.status0 {
							background-color:  #FF7B00;
							
						}
						.status1 {
							background-color:  #007aff;
							
						}

						.status2 {
							background-color:  #ff9900;
							
						}

						.status3 {
							background-color:  #19be6b;
							
						}

						.status4 {
							border: 1px solid rgba(255, 61, 0, 1);
							color: rgba(255, 61, 0, 1);
						}
					}
					
					
				}
			}

			// .item:not(:last-child) {
			//   border-bottom:1px solid rgba(232,232,232,1);
			// }
		}
		
		.viewTop{
			border-bottom: 1px solid #e8e8e8;
			background-color: #fff;
			    display: flex;
			    justify-content: space-between;
				    align-items: center;
					.select{
						    padding: 0px 15px;
							font-size: 30rpx;
							    display: flex;
								
							.selectSpan{
								    text-align: end;
								width: 200rpx;
								overflow: hidden;
								   text-overflow: ellipsis;
								   white-space: nowrap; /* 禁止换行，强制单行 */
							}
					}
				
		}
		
		.search {
		
			padding: 16rpx 32rpx;
			background: #fff;
		
			.searchBox {
				display: flex;
				align-items: center;
				background: #F2F2F2;
				padding: 1px 16rpx;
				border-radius: 8px;
				justify-content: space-between;
			}
		}
		
		
		.floating-button {
			z-index: 999;
			position: fixed; 
			  bottom: 0;    /* 距离底部 20px */
			    width: 100%;
				 display: flex;
				  height: 120rpx;
				    justify-content: center;
				background-color: rgba(255,255,255,1);
				.button{
					margin-top: 24rpx;
					border-radius: 50px;
				 height: 80rpx;
					width: 80%;
					display: flex;
					    align-items: center;
					    justify-content: center;
						padding:12rpx;
						
						background-color: rgba(22,119,255,1);
						color: rgba(255,255,255,1);
						font-size: 36rpx;
				}
		}
</style>