PropertyApp/pages/residential/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.name" placeholder="请输入小区名称"/>
				</u-form-item>
				<u-form-item label="归属" :required="true">
					<u-input type="select" :select-open="agencyShow" v-model="form.agencyName"  placeholder="请选择归属" @click="agencyShow=true"></u-input>
				</u-form-item>
<!-- 				<u-form-item v-if="!$isEmpty(form.id)" label="详细地址" :required="true">
					<u-input v-model="form.address" type="number" placeholder="详细地址"></u-input>
				</u-form-item> -->
				<u-form-item v-if="!$isEmpty(form.id)" label="物业" :required="true">
					<u-input v-model="form.estatePidName" placeholder="请输入物业名称"/>
				</u-form-item>
				<u-form-item label="物业电话" required="true">
					<u-input v-model="form.estatePidPhone"  placeholder="请填写物业电话"></u-input>
				</u-form-item>
				<u-form-item label="负责人姓名">
					<u-input v-model="form.personName"  placeholder="请填写负责人姓名"></u-input>
				</u-form-item>
				<u-form-item label="负责人电话">
					<u-input v-model="form.personTel"  placeholder="请填写负责人电话"></u-input>
				</u-form-item>
				<u-form-item label="小区图片" :border-bottom="false"></u-form-item>
				<u-form-item>
					<g-upload ref='gUpload' :mode="imgList" @chooseFile='chooseFile' @imgDelete='imgDelete' :columnNum="columnNum"></g-upload>
				</u-form-item>
				<u-form-item label="选择地址">
					<input v-model="form.address"  placeholder="请选择地址"/>
				</u-form-item>
				<view>
					<map style="width: 100%; height: 300px;" :latitude="form.latitude" :longitude="form.longitude" @click="getpoint">
					</map>
				</view>
				<u-form-item label="备注" label-position="top">
					<u-input type="textarea" height="300" maxlength="300" v-model="form.remark"  placeholder="请输入300字以内的备注介绍"></u-input>
				</u-form-item>
			</u-form>
		</view>
		
		<!-- 归属筛选 -->
		<u-popup  border-radius="60" height="60%"  mode="bottom" v-model="agencyShow">
			<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="agencyKeyword" type="text" :adjust-position="false" placeholder="请输入关键字搜索" confirm-type="search"/>
				</view>
			</view>
			<scroll-view v-if="!$isEmpty(agencyList)"  style="padding-top: 110rpx;height: 100%;" :scroll-y="true" >
				<view @click="agencyConfirm(item)" hover-class="hoverClass" class="text-center padding-30 solid-bottom"  v-for="(item,index) in agencyList" :key="index">
					<text>{{item.label}}</text>
				</view>
				<u-divider v-if="agencyList.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>
import gUpload from "@/components/g-upload/g-upload.vue"
export default {
	components:{gUpload},
	name: '',
	data() {
		return {
			//图片上传
			title: '上传图片',
			columnNum: 4,
			imgList: [],
			
			labelStyle:{
				"fontWeight":"600"
			},
			form:{
				name:'',
				agencyName:'',
				agencyId:'',
				houseType:'',
				address:'',
				orientation:'',
				estatePidName:'',
				estatePidPhone:'',
				latitude: 38.473929061,
				longitude: 106.288550642,
				remark:'',
				pic:[],
			},
			id:0, // 使用 marker点击事件 需要填写id
			title: 'map',
			covers: [{
				latitude: 39.909,
				longitude: 116.39742,
				iconPath: '../../static/tarbar/ditubiaoji.png'
			}],
			//归属
			agencyName:'',
			agencyShow:false,
			residentialKeyword:'',
			agencyList:[],
		};
	},
	onLoad(options) {
		//加载小区数据
		console.log(555,options)
		this.fetchagencyList()
		if (!this.$isEmpty(options.item)) {
			this.form=JSON.parse(options.item)
			// this.fetchDataDetail()
			uni.setNavigationBarTitle({
				title:"修改小区信息"
			})
		}
	},
	watch:{
		//归属
		agencyKeyword(){
			let that=this
			if (this.timer){
				clearTimeout(this.timer)
			}
			this.timer = setTimeout(() => {
				that.agencyList=[]
				let params = {
					// isSelect: true,
					regionArea: that.areaValue,
					agencyName: that.agencyKeyword
				}
				that.fetchagencyList(params)
			}, 500)
		},
	},
	methods:{
		/**
		 * 获取地图位置
		 */
		getpoint(){
			let that = this
			uni.chooseLocation({
				success: function (res) {
					console.log(res)
					console.log(333,that.form)
					that.form.address = res.address+res.name
					that.form.latitude = res.latitude
					that.form.longitude = res.longitude
				}
			})
		},
		/**
		 * 获取上个界面携带小区信息
		 */
		fetchDataDetail(){
			this.$api.residential.page({id:this.form.id}).then(res=>{
				console.log(res.list[0])
				this.form=res.list[0]
			})
		},
		/**
		 * 上传图片方法
		 */
		//点击上传控件上传
		uploadImg() {
		  this.$refs.gUpload.uploadImg()
		},
		
		/*
		上传后返回的值：
		list：上传后图片数组
		v：返回当前上传图片的临时路径
		*/
		chooseFile(list, v) {
		  console.log("上传图片_list：", list)
		  console.log("上传图片_v：", v);
		  this.uploadFileToServe(v)
		},
		
		/*
		删除图片：
		list：删除返回删除后剩余的图片数组
		eq：返回删除的数组
		*/
		imgDelete(list, eq) {
		  console.log("删除图片_list：", list)
		  console.log("删除图片_eq：", eq)
		},
		
		/*
		执行上传服务：
		urlList：要上传的图片：数组类型
		*/
		uploadFileToServe(urlList) {
		  if (!urlList || urlList.length <= 0) {
		    return
		  };
		  for (let i = 0; i < urlList.length; i++) {
		    uni.uploadFile({
		      url: 'https://www.example.com/upload', //上传接口
		      filePath: urlList[i],
		      name: 'file',
		      formData: {
		        'user': 'test'
		      },
		      success: (uploadFileRes) => {
		        console.log(uploadFileRes.data);
		      }
		    });
		  }
		},
		/**
		 * 获取小区数据列表
		 */
		// fetchagencyList(){
		// 	let params={
		// 		isSelect: true,
		// 		name:this.residentialKeyword
		// 	}
		// 	this.$api.residential.page(params).then(res=>{
		// 		this.agencyList = res.list
		// 	})
		// },
		//点击选择归属时
		agencyConfirm(item){
			//赋值给提交的数据
			this.form.agencyId=item.value
			//赋值给回显的名称
			this.form.agencyName=item.label
			this.agencyShow=false
		},
		/**
		 * 获取机构列表
		 * @param {Object} params
		 */
		fetchagencyList(params){
			let list = [];
			this.$api.permissions.orgList(params).then(res=>{
				console.log(res)
				let list = [];
					for(let item of res.data.records){
						let element = {
							label: item.parentName,
							value: item.id
						}
						list.splice(list.length,0,element);
						// list.push(obj);
					}
					this.agencyList = list;
					console.log(444,this.agencyList)
					// this.mescroll.resetUpScroll()
			})
		},
		confirm(){
			if (this.$isEmpty(this.form.name)) {
				this.$u.toast('请输入小区名称')
				return
			}
			if (this.$isEmpty(this.form.agencyId)) {
				this.$u.toast("请选择归属")
				return
			}
			if (this.$isEmpty(this.form.estatePidName)) {
				this.$u.toast("请输入物业")
				return
			}
			if (this.$isEmpty(this.form.estatePidPhone)) {
				this.$u.toast('请输入物业电话')
				return
			}
			console.log(this.form);
			if (this.$isEmpty(this.form.id)) {
				return
				this.$api.room.add(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.room.update(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>