CommunityApp/pages/myCar/myCar.vue

<template>
	<view :class="$isEmpty(list) ? 'bg-white':''">
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback" :down="downOption" :up="upOption">
			<!-- <myCarCard @delItem="delItem" :list="list"></myCarCard> -->
			<u-popup v-model="detailShow" mode="center" width="670" :closeable="true" border-radius="10" negative-top="300">
				<view style="padding: 60rpx 5rpx 40rpx;">
					<u-cell-group >
						<u-cell-item :icon-style="iconStyle"  :border-top="false" :arrow="false"  icon="eye-fill"  title="车牌号码:" :value="detailData.number"></u-cell-item>
						<u-cell-item :key="index" v-for="(item,index) in carTypeList" v-if="item.value==detailData.type"  :value="item.label" :icon-style="iconStyle"  :arrow="false"  icon="car-fill"  title="车辆类型:" ></u-cell-item>
						<u-cell-item :key="index" v-for="(item,index) in carPropertiesList" v-if="item.value==detailData.properties"  :value="item.label" :icon-style="iconStyle"  :arrow="false"  icon="error-circle-fill"  title="车辆性质:" ></u-cell-item>
						<u-cell-item value-style="{'color':'#5064eb'}" :key="index" v-for="(item,index) in fuelCategoryList"  v-if="item.value==detailData.fuelCategory"  :value="item.label" :icon-style="iconStyle"  :border-bottom="false" :arrow="false"  icon="grid-fill"  title="燃油类别:" ></u-cell-item>
						<u-cell-item v-if="detailData.opinion" :icon-style="iconStyle"  :border-top="false" :arrow="false"  icon="more-circle-fill"  title="审核意见:" :value="detailData.opinion"></u-cell-item>
					</u-cell-group>
				</view>
			</u-popup>
					
			<view @click="detailData=item;detailShow=true" class="card" v-for="(item,index) in list" :key="index">
				<view class="top" >
					<text class="number">车牌号：{{item.number}}</text>
					<!-- <text @click.stop="jump('/pages/index/car/list?carNo='+item.number)" style="text-decoration: underline;margin-top: 10rpx;">出入记录</text> -->
				</view>
				<view class="center">
					<view style="display: flex;">
						<view @click.stop="$util.preview(item.carImg)" class="justify-center align-center">
							<image :src="item.carImg" mode=""></image>
						</view>
						<view class="content">
							<text class="padding-bottom-10">车主姓名：{{item.personName}}</text>
							<text class="padding-top-10">车主电话：{{item.personPhone}}</text>
							<view class="padding-bottom-10" v-if="false">
								审核状态：
								<text style="color: #008f69;" v-if="item.auditStatus==1">已通过</text>
								<text style="color: #ea7500;" v-if="item.auditStatus==0">待审核</text>
								<text style="color: #da0000;" v-if="item.auditStatus==-1">未通过</text>
							</view>
						</view>
					</view>
					
				</view>
				<view class="bottom" >
					<view @click.stop="edit(item)" style="font-size: 22rpx;" class="cu-btn  sm round  base-line margin-right-20" >
						<u-icon name="edit-pen-fill" style="padding-right: 10rpx;"></u-icon>
						编辑
					</view>
					<!-- <view @click.stop="delItem(item)" style="font-size: 22rpx;" class="cu-btn  sm round red-line" >
						<u-icon name="edit-pen-fill" style="padding-right: 10rpx;"></u-icon>
						删除
					</view> -->
				</view>
			</view>
			<view style="height: 80rpx;" v-if="status">
				<u-divider bgColor="#f1f1f1;"  height="80">到底了</u-divider>
			</view>
		</mescroll-body>
		<view class="addCar" @click="add">
			<u-icon name="plus-circle-fill" size="70" color="#5064eb"></u-icon>
		</view>
	</view>
</template>

<script>
	import MescrollMixin from "@/comps/mescroll-body/mescroll-mixins.js";
	import DtEmpty from '@/comps/dt_empty.vue';
	var app = getApp();
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: {
			DtEmpty
		},
		data() {
			return {
				list: [],
				iconStyle: {
					color: '#5064eb'
				},
				page: {
					current: 1,
					size:30,
				},
				status: false,
				//详情
				detailShow: false,
				detailData: {},		
				carTypeList: [],
				carPropertiesList: [],
				fuelCategoryList: []
			}
		},
		onLoad() {
			// this.personId = this.$cache.get('userId');
			this.getDict();
		},
		onShow() {
			//刷新mescroll数据
			this.$util.reload(this.mescroll);
		},
		methods: {
			add() {
				uni.navigateTo({
					url: "add"
				})
			},
			delItem(item) {
				this.$util.showModal('确认要删除此记录吗？').then(res => {
					// this.$api.car.carRemove(item.id).then(res => {
					// 	if (res.success == true) {
					// 		this.$u.toast('操作成功')
					// 		this.mescroll.resetUpScroll();
					// 	} else {
					// 		this.$util.showModal(res.msg, false)
					// 	}
					// })
				})
			},
			edit(item) {
				//重新编辑,审核状态重置为0
				let params = {
					id: item.id,
					auditOpinion: "",
					auditStatus: 0,
					carImg: item.carImg,
					fuelCategory: item.fuelCategory,
					number: item.number,
					properties: item.properties,
					type: item.type,
					vehicleDrivingLicense1: item.vehicleDrivingLicense1,
					vehicleDrivingLicense2: item.vehicleDrivingLicense2
				}
				uni.navigateTo({
					url:"/pages/myCar/add"+this.$u.queryParams(params)
				})
			},
			jump(url) {
				if (!this.$isEmpty(url)) {
					uni.navigateTo({
						url
					})
				}
			},
			getDict() {
				let carType = uni.getStorageSync("carType");
				let carProperty = uni.getStorageSync("carProperty");
				let fuelCategory = uni.getStorageSync("fuelCategory");
				if (!this.$isEmpty(carType) || !this.$isEmpty(carProperty) || !this.$isEmpty(fuelCategory)) {
					this.carTypeList = carType;
					this.carPropertiesList = carProperty;
					this.fuelCategoryList = fuelCategory;
					return;
				}
				
				// let operation = 'permissions/dict/getByCode?code=car_type';
				let that = this;
				let params = {};
				//车辆类型
				that.$http.getDictByCode("car_type").then (res=>{
					if (res.data.code != 200) {
						app.globalData.oneFailHint(res.data.msg, function () {
					    uni.switchTab({
					    	url:"../index/index"
					    })
					  });
					}
					res.data.data.forEach((item) => {
						let tmp = {
							value: item.dictKey,
							label: item.dictValue
						}
						that.carTypeList.push(tmp)
					})
					uni.setStorageSync("carType",that.carTypeList)
				
					
				});
				
				//车辆性质
				// operation = "permissions/dict/getByCode?code=car_properties"
				that.$http.getDictByCode("car_properties").then(res=>{
					if (res.data.code != 200) {
						app.globalData.oneFailHint(res.data.msg, function () {
					    uni.switchTab({
					    	url:"../index/index"
					    })
					  });
					}
					res.data.data.forEach((item) => {
						let tmp = {
							value:item.dictKey,
							label:item.dictValue
						}
						that.carPropertiesList.push(tmp)
					})
					uni.setStorageSync("carProperty",that.carPropertiesList)
					
				});
				
				//燃油类别
				// operation = "permissions/dict/getByCode?code=fuel_category"
				that.$http.getDictByCode("fuel_category").then (res=>{
					if (res.data.code != 200) {
						app.globalData.oneFailHint(res.data.msg, function () {
					    uni.switchTab({
					    	url:"../index/index"
					    })
					  });
					}
					res.data.data.forEach((item)=>{
						let tmp = {
							value:item.dictKey,
							label:item.dictValue
						}
						that.fuelCategoryList.push(tmp);
					})
					uni.setStorageSync("fuelCategory",that.fuelCategoryList)
					
				});
			},
			downCallback(mescroll){
				setTimeout(()=>{
					this.mescroll.resetUpScroll()
				},200)
			},
			upCallback(mescroll) {
				let that = this;
				let params = {
					current: mescroll.num,
					size: 10,
					residentialId:uni.getStorageSync("residentialId"),
					memberId:this.vuex_member.id
				}
				try {
					that.$http.carPage(params).then (res=>{
						let data = res.data.data.records
						let total = res.data.data.total;
						mescroll.endBySize(data.length, total);
						if (mescroll.num == 1) {
							that.list = []; //如果是第一页需手动制空列表
						}
						that.list = that.list.concat(data); //追加新数据
						
					});
				} catch(e) {
					this.mescroll.endErr()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	
	.detail-img {
		display: flex;
		justify-content: space-around;
		text-align: center;
		color: #707175;
		
		view {
			display: flex;
			flex-direction: column;
			width: 48%;
			height: 300rpx;
			
			text{
				padding: 10rpx 0;
			}
		}
	}
	
	.addCar {
		width: 100upx;
		height: 90upx;
		border-radius: 60upx 0 0 60upx;
		position: fixed;
		bottom: 200upx;
		right: 0;
		z-index: 999;
		display: flex;
		justify-content: center;
		align-items: center;
		background: #ffffff;
		box-shadow: -4upx -4upx 30upx #888888;
	}
	
	.base-line{
		font-weight: 800;
		color: #5064eb;
		border: 1rpx solid #5064eb;
	}
	
	.red-line{
		font-weight: 800;
		color: #da0000;
		border: 1rpx solid #da0000;
	}
	
	.card {
		background-color: #FFFFFF;
		margin: 20rpx;
		padding: 0 40rpx;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;
		image{
			width: 120rpx;
			height: 120rpx;
		}
		
		.top {
			display: flex;
			justify-content: space-between;
			padding: 20rpx 0 20rpx 0rpx;
			border-bottom: 1rpx solid #e5e5e5;
			.number {
				font-size: 34rpx;
			}
			
			.audit {
				font-size: 30rpx;
			}
		}
		
		.center {
			padding: 40rpx 0;
			border-bottom: 1rpx solid #e5e5e5;
			display: flex;
			justify-content: space-between;
			.content {
				padding-left: 30rpx;
				display: flex;
				flex-direction: column;
				font-size: 30rpx;
				
				text {
					padding-bottom: 10rpx;
				}
				
			}
			.record {
				display: flex;
				justify-content: center;
				align-items: center;
				color: #545454;
			}
			
		}
		
		.bottom {
			display: flex;
			justify-content: flex-end;
			padding: 20rpx 0;
		}
	}
</style>