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

<template>
	<view>
		<u-navbar title="车辆管理">
			<view class="slot-wrap">
				<span class="navBtn" :style="form.id ? '': 'color: #E68C91;'" @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-keyboard ref="uKeyboard" mode="car" v-model="keyShow" @change="valChange" @backspace="backspace"></u-keyboard>
				<u-form-item label="车牌号码" label-width="150rpx">
					<view style="margin-left: auto;" :style="form.carNum ? 'color:black;': 'color: #c0c4cc;'" v-text="form.carNum ? form.carNum : '请输入内容'" @click="keyShow = true"></view>
				</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 {
				keyShow: false,
				show: false,
				title: '删除车辆',
				content: '是否删除此车牌号?',
				form: {
					id: '',
					carNum: '',
					defaultFlag: true,
				},
				carList: [],
			}
		},
		onLoad(op) {
			if(op.id){
				var str1 = op.id.slice(0,19);
				var str2 = op.id.slice(20,21);
				var str3 = op.id.slice(22);
				
				if(str1 == 'jp_team51_charge_id') {
					if(str2 == 'A') {
						this.code = str2;
						this.codeId = str3;
					}
				} else {
					this.form.id = op.id;
					this.getCarList();
				}
			}
		},
		methods: {
			// 按键被点击(点击退格键不会触发此事件)
			valChange(val) {
				// 将每次按键的值拼接到form.carNum变量中，注意+=写法
				this.form.carNum += val;
				console.log(this.form.carNum);
			},
			// 退格键被点击
			backspace() {
				// 删除form.carNum的最后一个字符
				if(this.form.carNum.length) this.form.carNum = this.form.carNum.substr(0, this.form.carNum.length - 1);
				console.log(this.form.carNum);
			},
			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() {
				if(this.form.id) {
					this.show = true;
				}
			},
			confirmDelete() {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})		
				userApi.deleteRegUserCar({
					id: this.form.id
				}).then((res) => {
					uni.hideLoading();
					
					this.show = false;
					uni.navigateBack({
						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();				
							
					if(this.code == 'A') {
						uni.navigateBack({
							url: '/pages/searchPile/stationAndPile/chargingPileDetails?id=' + this.codeId
						})
					} else {
						uni.navigateBack({
							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>