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-modal :show="isShowAlert" :title="alertTitle" :closeOnClickOverlay='true' :showCancelButton='true'
			confirmColor='#2772FB' @confirm="confirmClick" @close="cancelClick" @cancel="cancelClick"></u-modal>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex';
	var _this;
	export default {
		data() {
			return {
				carList: [],
				obj: {},
				index: null,
				isShowAlert: false,
				alertTitle: '确认删除该车辆？'
			};
		},
		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: {
			confirmClick() {
				this.isShowAlert = false
				this.$request.baseRequest('post', '/driverCarInfo/api/deleteDriverCar', {
						id: this.obj.id
					}).then(res => {
						if (res.code == '200') {
							this.$refs.uToast.show({
								type: 'success',
								message: "删除成功！",
							})
							this.carList.splice(this.index, 1)
							uni.hideLoading()
						}

					})
					.catch(res => {
						uni.$u.toast(res.message);
					});
			},
			cancelClick() {
				this.isShowAlert = false
			},
			init() {
				this.$request.baseRequest('get', '/driverCarInfo/selectDriverCar', {
						driverId: this.firstAuthentication.id,
						// 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) {
			this.obj = val
			this.index = index
			this.isShowAlert = true

			}
		},
	}
</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>