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

<!-- 管理车辆 -->
<template>
	<view class="content">
		<u-navbar title="管理车辆" :placeholder='true' @leftClick="leftClick">
			</u-navbar>
		<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>
				<image style='width:18px;height:18px;' src="../../../static/images/mine/addcar.png" mode=""></image>
			<!-- 	<u-icon class="icon" name="plus-circle-fill" color="#2979ff" size="24"></u-icon> -->
			</view>

		</view>
		<mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback">
		<view class="car-list" v-for="(item,index) in carList" :key="index">
			<view class="left-img">
				<image style="width: 125rpx;height:125rpx;box-shadow: 1px 1px 10px #ccc; background-color: #eeeeee;border-radius:10rpx;" mode="aspectFill"
					:src="item.addressUrl"></image>
			</view>
			<view class="car-list-item">
				<view class="row1">
					{{item.carNumber}}
				</view>
				<view class="row2">
					<image v-if="item.status!='审核中'" style='width:15px;height:15px;margin-right: 20rpx;' @click="edit(item)" src="../../../static/images/mine/edit.png" mode=""></image>
					<image style='width:16px;height:16px;' @click="del(item,index)" src="../../../static/images/mine/sanchu.png" mode=""></image>
				</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=='未通过' || 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>
					<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="error" plain plainFill size="mini">
					</u-tag>
					<!-- <u-tag v-if="item.drivingOverdueFlag=='1'||item.trailerOverdueFlag=='1'||item.operationOverdueFlag=='1'||item.trailerOperationOverdueFlag=='1'" text="已过期" type="error" plain plainFill size="mini">
					</u-tag> -->
				</view>
			</view>
		</view>
		</mescroll-body>
		<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 MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import {
		mapState
	} from 'vuex';
	var _this;
	export default {
		mixins: [MescrollMixin], // 使用mixin
		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.upCallback({num:1,size:10});
			console.log(options)
		},
		onShow() {
			this.upCallback({num:1,size:10});
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			leftClick(){
				uni.switchTab({url:'/pages/mine/index'});
			},
			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
			},
			upCallback(page) {
				this.$request.baseRequest('get', '/driverCarInfo/selectDriverCar', {
						commonId: this.userInfo.id,
						// driverId:this.firstAuthentication.id
					}).then(res => {
						if (res.code == '200') {
							this.mescroll.endBySize(res.data.length, 1);
							this.carList = res.data
						} else {
							this.mescroll.endErr();
							uni.$u.toast(res.message);
						}

					})
					.catch(res => {
						this.mescroll.endErr();
						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: 5rpx 10rpx 5rpx 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>