PropertyApp/pages/car/add.vue

<template>
	<view class="" >
		<u-toast ref="uToast"/>
		<view class="bg-white" style="padding: 10rpx 30rpx;margin: 20rpx;border-radius: 12rpx;">
			<u-form :label-style="labelStyle" label-width="150" :model="form" ref="uForm">
				<u-form-item label="车主姓名" :required="true"><u-input v-model="form.userName" placeholder="车主姓名"/></u-form-item>
				<u-form-item v-if="!$isEmpty(form.id)" label="手机号码" :required="true"><u-input type="number" v-model="form.userMobile" placeholder="请输入手机号码"/></u-form-item>
				<u-form-item label="所属小区" :required="true">
					<u-input type="select" :select-open="residentialShow" v-model="residentialName"  placeholder="请选择小区" @click="residentialShow=true"></u-input>
					<!-- <u-input v-else   disabled v-model="form.xqName" ></u-input> -->
				</u-form-item>
				<u-form-item label="车牌号" :required="true">
					<u-input v-model="form.loginName" placeholder="请填写车牌号"></u-input>
				</u-form-item>
				<u-form-item label="车辆型号">
					<u-input v-model="form.loginPwd"  placeholder="请填写车辆型号"></u-input>
				</u-form-item>
<!-- 				<u-form-item label="燃油类别">
					<u-input v-model="form.fuelCategory"  placeholder="请填写燃油类别"></u-input>
				</u-form-item> -->
				<u-form-item label="车身颜色">
					<u-input v-model="form.remark"  placeholder="请填写车身颜色"></u-input>
				</u-form-item>
<!-- 				<u-form-item label="车辆照片">
					<u-input v-model="form.carImg"  placeholder="车辆照片"></u-input>
				</u-form-item> -->
			</u-form>
		</view>
		
		<!-- 小区 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="residentialShow">
			<view class="fixed cu-bar search bg-white">
				<view class="search-form round">
					<text class="cuIcon-search"></text>
					<u-input style="width: 90%;" v-model="residentialKeyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(residentialList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="residentialConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in residentialList" :key="index">
					<text>{{item.name}}</text>
				</view>
				<u-divider v-if="residentialList.length>=10" height="80">只显示十条数据</u-divider>
			</scroll-view>
			<u-empty v-else name="search"></u-empty>
		</u-popup>
		
		<view @click="confirm" class="bottom-bar" >
			<view class="cu-btn bg-blue radius" style="width: 70%;height: 84rpx;">
				提交
			</view>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			labelStyle:{
				"fontWeight":"600"
			},
			form:{
				userName:'',
				xqName:'',
				userMobile:'',
				fuelCategory:'',
				loginName:'',
				loginPwd:'',
				xqId:'',
				// carImg:'',
				remark:''
			},
			//小区
			residentialName:'',
			residentialShow:false,
			residentialKeyword:'',
			residentialList:[],
		};
	},
	onLoad(options) {
		//加载小区数据
		this.fetchResidentialList()
		if (!this.$isEmpty(options.id)) {
			this.form.id=options.id
			this.fetchDataDetail()
			uni.setNavigationBarTitle({
				title:"修改车辆信息"
			})
		}
	},
	watch:{
		//小区
		residentialKeyword(){
			let that=this
			if (this.timer){
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(() => {
				that.residentialList=[]
				that.getResidentailList()
			}, 500)
		},
	},
	methods:{
		fetchDataDetail(){
			console.log(this.form.id)
			this.$api.carManage.page({id:this.form.id}).then(res=>{
				console.log(res.data.records[0])
				this.form=res.data.records[0]
			})
		},
		
		/**
		 * 获取小区数据列表
		 */
		fetchResidentialList(){
			let params={
				isSelect: true,
				name:this.residentialKeyword
			}
			this.$api.residential.page(params).then(res=>{
				this.residentialList = res.list
			})
		},
		//点击选择小区时
		residentialConfirm(item){
			//赋值给提交的数据
			this.form.residentialId=item.id
			//赋值给回显的名称
			this.residentialName=item.name
			this.residentialShow=false
		},
		confirm(){
			if (this.$isEmpty(this.form.userName)) {
				this.$u.toast('请输入车主姓名')
				return
			}
			if (this.$isEmpty(this.form.residentialId)) {
				this.$u.toast("请选择小区")
				return
			}
			console.log(this.form);
			if (this.$isEmpty(this.form.id)) {
				return
				this.$api.carManage.submit(this.form).then(res=>{
					if (res.data) {
						this.$dialog.showModal('操作成功',false).then(res=>{
							uni.navigateBack()
						})
					}else{
						this.$u.toast('操作失败')
					}
				})
				//新增
			}else{
				let {oldId,orgPosition,...params}=this.form
				//修改
				this.$api.carManage.submit(params).then(res=>{
					if (res.data==true) {
						this.$dialog.showModal('操作成功',false).then(res=>{
							uni.navigateBack()
						})
					}else{
						this.$u.toast('操作失败')
					}
				})
			}
		}
		

	}
};
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
</style>