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

<template>
	<view>
		<u-navbar title="故障记录" title-color="#101010" :customBack="customBack" ></u-navbar>
		<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="icon">
					
					<image class="img" v-if="item.errorCodeImage" :src="item.errorCodeImage" mode=""></image>
					
					<image class="img" v-else src="@/assets/img/taskstatus/status3.png" mode=""></image>
				</view>
				<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.createTime}}
		
						</view>
						<view class="value">
							{{item.parkingName}} 
		
						</view>
					</view>
					<view class="errorDesc" v-if="item.errorDesc">
						描述：{{item.errorDesc}}
						
					</view>
		
				</view>
				<u-icon name="arrow-right" size="24" color="#BBBBBB"></u-icon>
			</view>
			
			
		</view>
		<u-divider :isnone="list.length==0" nonetext="没有找到相关内容" border-color="#CFD2D5">已经到底了</u-divider>
		
	</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.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 32rpx;
background-color: rgba(255,255,255,1);
			.item {
				display: flex;
				border-bottom: 1px solid rgba(232, 232, 232, 1);
				padding: 12rpx 0;
				margin: 12rpx 0;

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

				}

				.body {
					margin: 0 12rpx;
					width: 100%;

					.line1,
					.line2 {

						display: flex;
						justify-content: space-between;
					}
					.line2 {
						color: rgba(119,119,119,1);
						font-size: 24rpx;
						margin-top: 8rpx;
					}
					.line1 {
						.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:  rgba(255, 61, 0, 1);
							
						}
						.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);
						}
					}
					
					.errorDesc{
						margin: 8rpx 0;
						 width: 480rpx;
						     color: #777777;
						     font-size: 24rpx;
						 overflow: hidden;
						    text-overflow: ellipsis;
						    white-space: nowrap; /* 禁止换行，强制单行 */
					}
				}
			}

			// .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; /* 禁止换行，强制单行 */
							}
					}
				
		}
</style>