wangluohuoyun-app/pages/mine/manageVehicles/index.vue

<!-- 管理车辆 -->
<template>
	<view class="content">
		<view class="top-title flex flex-space-between">
			<view class="left flex">
				<view class="text1">我的机动车</view>
				<view class="text2">（共{{carList?carList.length:0}}辆）</view>
			</view>

			<view @click="addCar" class="add-car flex">
				<view class="car-text">添加车辆</view>
				<u-icon class="icon" name="plus-circle-fill" color="#2979ff" size="24"></u-icon>
			</view>

		</view>
		<view class="car-list" v-for="(item,index) in carList" :key="index">
			<view class="left-img">
				<image style="width: 100%;height:100%; background-color: #eeeeee;border-radius:10rpx;" mode="widthFix" :src="item.addressUrl"></image>
			</view>
			<view class="car-list-item">
				<view class="row1">
					{{item.carNumber}}
				</view>
				<view class="row2">
					<u-icon name="edit-pen" size="26" style="margin-right: 20rpx;" @click="edit(item)" v-if="item.status!='审核中'"></u-icon>
					<u-icon name="trash" size="26" @click="del(item,index)"></u-icon>
				</view>
				<view class="row3">
					<view class="text">车辆状态：</view>
					<u-tag v-if="item.status=='已认证'" :text="item.status" type="success" plain plainFill size="mini"></u-tag>
					<u-tag v-if="item.status=='未通过'" :text="item.status" type="error" plain plainFill size="mini"></u-tag>
					<u-tag v-if="item.status=='审核中'" :text="item.status" type="warning" plain plainFill size="mini"></u-tag>
				</view>
			</view>
		</view>
<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	var _this;
	export default {
		data() {
			return {
				carList:[],
			};
		},
		computed: {
			...mapState(['hasLogin', 'userInfo','firstAuthentication']),
		},
		onLoad(options) {
			console.log(this.firstAuthentication.id)
			_this = this;
			if (!this.hasLogin) {
				uni.$u.route('/pages/public/login');
			}
			this.init();
			console.log(options)
		},
		methods: {
			init() {
				this.$request.baseRequest('get', '/driverCarInfo/selectDriverCar', {
						driverId: this.userInfo.driverId,
						// driverId:this.firstAuthentication.id
					}).then(res => {
						if (res.code == '200') {
							this.carList = res.data
						}else{
							uni.$u.toast(res.message);
						}

					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			addCar() {
				uni.$u.route('/pages/mine/manageVehicles/addVehicle');
			},
			edit(val) {
				uni.$u.route('/pages/mine/manageVehicles/editVehicle',val);
			},
			del(val,index) {
				uni.showLoading({
					mask:true,
					title:'加载中'
				})
				this.$request.baseRequest('post', '/driverCarInfo/api/deleteDriverCar', {
						id:val.id
					}).then(res => {
						if (res.code == '200') {
							this.$refs.uToast.show({
								type: 'success',
								message: "删除成功！",
							})
								this.carList.splice(index,1)
								uni.hideLoading()
						}
				
					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			}
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: white;
		padding: 20rpx;
	}

	.content1 {
		width: 100%;
	}

	.content1-item {
		width: calc(50% - 0rpx);
	}

	.top-title {
		margin: 0 0 20rpx 0;

		.left {
			.text1 {
				font-size: 29rpx;
				color: #1F1F1F;
				font-weight: 700;
			}

			.text2 {
				font-size: 29rpx;
				color: #999999;
			}
		}
	}

	.car-text {
		margin-right: 6rpx;
	}

	.add-car {
		background: #EEF4FF;
		color: #2772FB;
		font-weight: 700;
		font-size: 26rpx;
		align-items: center;
		padding: 4rpx 10rpx 4rpx 20rpx;
		border-radius: 30rpx;

	}

	.car-list {
		margin-bottom: 20rpx;
		display: flex;
	}

	.car-list-item {
		background: url(../../../static/images/mine/bgh.png) center no-repeat;
		background-size: 100% 100%;
		padding: 60rpx 43rpx;
		width: 70%;
		.row1 {
			font-size: 36rpx;
			font-weight: 700;
			color: #1F1F1F;
		}

		.row2 {
			display: flex;
			justify-content: flex-end;
		}

		.row3 {
			display: flex;
		}
	}
	.left-img{
		width: 30%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>