safetyHome_wxapp/pages/mine/addCar.vue

<!-- 绑定新的车辆 -->
<template>
	<view class="">
		<view>
			<view class="item">
				<view class="topTile">车辆类型</view>
				<view class="content" @tap="chooseType">
					<view v-text="type" class="carType" :class="{typeActive:typeNum}">
					</view>
					<image src="../../static/icon_combo_nor@2x.png" style="width: 20rpx;height: 12rpx;margin-top: 15rpx;margin-right: 18rpx;"></image>
				</view>
			</view>
			<view class="item">
				<view class="topTile">车牌号</view>
				<view class="content">
					<view class="carNum">
						<input type="text" v-model="carNum" placeholder="请输入车牌号" placeholder-class="holder" style="width: 100%;height: 100%;" />
					</view>
					<!-- <image src="../../static/icon_combo_nor@2x.png" style="width: 20rpx;height: 12rpx;margin-top: 15rpx;margin-right: 18rpx;"></image> -->
				</view>
			</view>
		</view>
		<!-- 车辆类型 -->
		<lb-picker ref="type" :list="typeData" @confirm="confirm">
		</lb-picker>
		<!-- 保存 -->
		<button class="btn" :class="{active:type && carNum}" :loading="isLoading" @tap="saveInfo">保存</button>
	</view>
</template>

<script>
	import LbPicker from '@/components/lb-picker'
	export default {
		data() {
			return {
				isLoading: false,
				type: '请选择车辆类型', //车辆类型
				typeNum: '',
				carNum: '', //车牌号
				typeData: [{
					label: '机动车',
					value: 1,
					child: []
				}, {
					label: '电动车',
					value: 2,
					child: []
				}, ],
			}
		},
		methods: {
			// 车辆类型选择确定
			confirm(data) {
				this.type = data.item.label
				this.typeNum = data.item.value
			},
			// 选择车辆类型
			chooseType() {
				this.$refs.type.show()

			},
			//保存提交信息
			saveInfo() {
				if (!this.typeNum || !this.carNum) {
					return
				} else {
					this.isLoading=true
					this.http.httpRequest('/wxapplet/ownercar/add', 'post', {
						cardId: uni.getStorageSync('idNumber'),
						carNo: this.carNum,
						carType: String(this.typeNum),
						comtyId: uni.getStorageSync('comtyId')
					}, true).then((res) => {
						if (res.code == 0) {
						uni.navigateTo({
							url:'./myCar'
						})
						this.isLoading=false
						} else {
							this.isLoading=false
							uni.showToast({
								title: res.msg,
								'icon': 'none'
							})
						}
					}).catch(()=>{
						this.isLoading=false
					})
				}
			}
		},
		components: {
			LbPicker
		},
	}
</script>

<style>
	.btn {
		width: 702rpx;
		height: 90rpx;
		background: rgba(163, 197, 237, 1);
		opacity: 1;
		border-radius: 18rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		line-height: 90rpx;
		color: rgba(255, 255, 255, 1);
		text-align: center;
		position: fixed;
		bottom: 56rpx;
		left: 26rpx;
	}

	.active {
		background: rgba(41, 138, 253, 1);
	}
	.item {
		width: 662rpx;
		height: 135rpx;
		border-bottom: 2rpx solid rgba(247, 247, 247, 1);
		margin: 0 auto;
	}
	.carType {
		width: 202rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(153, 153, 153, 1);
	}

	.carNum {
		width: 600rpx;
		height: 40rpx;
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}
	.content {
		width: 100%;
		height: 40rpx;
		display: flex;
		justify-content: space-between;
		margin-top: 28rpx;
	}
	.topTile {
		width: 132rpx;
		height: 44rpx;
		font-size: 32rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: rgba(51, 51, 51, 1);
		margin-top: 32rpx;
	}

	.holder {
		color: rgba(153, 153, 153, 1);
	}
	.typeActive {
		color: rgba(51, 51, 51, 1);
	}
</style>