chuangte_bike_newxcx/page_user/guzhang/guzhanglv.vue

<template>
	<view class="page">
		<u-navbar title="故障上报记录" :border-bottom="false" :background="bgc" back-icon-color="#262B37" title-color='#262B37'
			title-size='36' height='36' id="navbar">
		</u-navbar>
        <scroll-view class="list" @scrolltolower="handleScrollToLower" scroll-y>
        	<view class="list_item" v-for="(item,index) in list" :key="index">
        		<view class="top">
        			<view class="name">
        				车牌号：{{item.vehicleNum == null ? '--' : item.vehicleNum}}
        			</view>
					<view class="zt" v-if="item.appealStatus == 0">
						已驳回 <!-- <u-icon name="arrow-right" color="#808080" size="28"></u-icon> -->
					</view>
					<view class="zt" v-if="item.appealStatus == 1">
						待处理 <!-- <u-icon name="arrow-right" color="#808080" size="28"></u-icon> -->
					</view>
					<view class="zt" v-if="item.appealStatus == 2">
						维修中 <!-- <u-icon name="arrow-right" color="#808080" size="28"></u-icon> -->
					</view>
					<view class="zt" v-if="item.appealStatus == 3">
						已完成 <!-- <u-icon name="arrow-right" color="#808080" size="28"></u-icon> -->
					</view>
        		</view>
				<view class="wz">
					车辆编号：{{item.vehicleCode == null ? '--' : item.vehicleCode}}
				</view>
				<view class="wz">
					故障原因：{{item.faultDetail == null ? '--' : item.faultDetail}}
				</view>
				<view class="wz">
					反馈时间：{{item.createTime == null ? '--' : item.createTime}}
				</view>
        	</view>
			<view class="dibutishi">
				仅支持查看最近一年的记录
			</view>
        </scroll-view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
                bgc: {
                	backgroundColor: "#fff",
                },
				list:[],
				pageNum:1,
				total:'',
				userid:''
			}
		},
		onLoad() {

		},
		onShow() {
			this.pageNum = 1
			this.list = []
			this.getuser()
		},
		methods: {
			getuser(){
				this.$u.get("/getInfo").then((res) => {
					if (res.code == 200) {
						this.userid = res.user.userId
						let that = this
					    that.$u.get(`/app/fault?userId=${that.userid}&pageNum=${that.pageNum}&pageSize=10`).then((resp) => {
					    	if (resp.code == 200) {
								that.total = resp.total
								if(that.pageNum == 1){
									that.list = resp.rows
								}else{
									that.list = that.list.concat(resp.rows)
								}
								that.pageNum++
					    	}
					    })
					}else if(res.code == 401){
							uni.showModal({
								title: '提示',
								content: '您当前未登录，是否前去登录？',
								showCancel: true,
								success: function (res) {
									if (res.confirm) {
										uni.reLaunch({
											url:'/pages/login/login'
										})
									} else if (res.cancel) {
										
									}
								}
							})
						}
				})
			},
			// 滚动到底部分页请求
			handleScrollToLower() {
			   if(this.total > this.list.length){
				   let that = this
				   that.$u.get(`/app/fault?userId=${that.userid}&pageNum=${that.pageNum}&pageSize=10`).then((resp) => {
				   	if (resp.code == 200) {
				   		that.total = resp.total
				   		if(that.pageNum == 1){
				   			that.list = resp.rows
				   		}else{
				   			that.list = that.list.concat(resp.rows)
				   		}
				   	}
				   })
			   }
			},
		}
	}
</script>

<style lang="scss">
	page {
		background: #fff;
	}
	.list{
		height: 91vh;
		overflow: scroll;
		padding-bottom: 30rpx;
		box-sizing: border-box;
		.dibutishi{
			width: 100%;
			text-align: center;
			font-size: 28rpx;
			color: #808080;
			margin-top: 52rpx;
		}
		.list_item{
			width: 680rpx;
			max-height: 572rpx;
			background: #FFFFFF;
			box-shadow: 0rpx 10rpx 64rpx 0rpx rgba(0,0,0,0.08);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			margin: auto;
			margin-top: 30rpx;
			padding: 22rpx 28rpx;
			box-sizing: border-box;
			.top{
				display: flex;
				justify-content: space-between;
				.name{
					font-weight: 600;
					font-size: 32rpx;
					color: #3D3D3D;
				}
			}
			.wz{
				font-size: 24rpx;
				color: #808080;
				margin-top: 12rpx;
			}
		}
	}
	

</style>