JP-ChargeTeam51/pages/user/car/carAdd.vue

<template>
	<view>
		<u-navbar title="车辆管理">
			<view class="slot-wrap">
				<span class="navBtn" @click="showDelete">删除车辆</span>
			</view>
		</u-navbar>
		<view>
			<u-modal v-model="show" @confirm="confirmDelete" confirm-color="#fa3534" :show-cancel-button="true" ref="uModal" :asyncClose="true" :title="title" :content="content"></u-modal>
		</view>
		<view class="carDet">
			<u-form :model="form" ref="uForm">
				<u-form-item label="车牌号码" label-width="150rpx"><u-input input-align="right" v-model="form.carNum" /></u-form-item>
				<u-form-item label="车辆类型" label-width="150rpx"><u-input input-align="right" placeholder="新能源车" placeholder-style="color:black" disabled /></u-form-item>
				<u-form-item label="设为默认车辆" label-width="180rpx"><u-switch slot="right" v-model="form.defaultFlag"></u-switch></u-form-item>
			</u-form>
		</view>
		<u-button class="login-btn" type="success" shape="circle" @click="keepCar">保存</u-button>
	</view>
</template>

<script>
	import * as userApi from '@/apis/user.js'
	
	export default {
		data() {
			return {
				show: false,
				title: '删除车辆',
				content: '是否删除此车牌号?',
				form: {
					id: '',
					carNum: '',
					defaultFlag: true,
				},
				carList: [],
			}
		},
		onLoad(op) {
			if(op.id){
				this.form.id = op.id;
				this.getCarList();
			}
		},
		methods: {
			getCarList() {
				
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.regUserCarList().then((res) => {
					uni.hideLoading();
					this.carList = res.data;

					for(var i=0;i<this.carList.length;i++) {
						var carId = this.carList[i].id
						if(this.form.id == carId) {			
							this.form.carNum = this.carList[i].carNum;
							this.form.defaultFlag = this.carList[i].defaultFlag;
						}
					}
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			showDelete() {
				this.show = true;
			},
			confirmDelete() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.deleteRegUserCar({
					id: this.form.id
				}).then((res) => {
					uni.hideLoading();
					
					this.show = false;
					uni.redirectTo({
						url: '/pages/user/car/index'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			keepCar() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.addRegUserCar(this.form).then((res) => {
					uni.hideLoading();				
					
					uni.redirectTo({
						url: '/pages/user/car/index'
					})
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			}
		}
	}
</script>
<style>
	page{
		background: #fff;
	}
</style>
<style lang="scss" scoped>
	.slot-wrap{
		flex: 1;
	}
	.navBtn{
		float: right;
		margin-right: 15px;
		color:#FF6666;
	}
	.carDet{
		padding: 0 16px;
	}
	
	.login-btn {
		margin: 28px ;
		background-color:#00B962!important;
		border-color: #00B962!important;
		color:#fff!important;
	}
</style>