tourism/uni_applet/pageA/enter/myHomestay/edit.vue

<template>
	<view class='content'>
		<view class='wrap'>
			<u--form labelPosition="left" :model="form"  ref="uForm">
				<u-form-item labelWidth='240' labelPosition='top' label="上传民宿图片">
					<u-upload :fileList="fileList1" @afterRead="afterRead($event)" @delete="deletePic" name="1" multiple
						:maxCount="20">
					</u-upload>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="标题">
					<u--input minlength='6' maxlength='30' inputAlign='right' v-model="form.title" placeholder="输入标题,6-30个字" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth='150' labelPosition='top' label="详细介绍（选填）">
					<u--textarea maxlength='1000'  v-model="form.detailedIntroduction" autoHeight placeholder="输入房源介绍，0-1000个字" ></u--textarea> 
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="单价（元/晚）">
					<u--input inputAlign='right' type='digit' v-model="form.price" placeholder="输入单价" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="户型">
					<view class='flex'>
						<view class='flex'>
							<u--input inputAlign='right' type='digit' v-model="room" placeholder="输入" border="none"></u--input>
							<view>室</view>
						</view>
						<view class='flex'>
							<u--input inputAlign='right' type='digit' v-model="hall" placeholder="输入" border="none"></u--input>
							<view>厅</view>
						</view>
						<view class='flex'>
							<u--input inputAlign='right' type='digit' v-model="toilet" placeholder="输入" border="none"></u--input>
							<view>卫</view>
						</view>
					</view>
					
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="床铺数量">
					<u--input inputAlign='right' type='digit' v-model="form.bedNum" placeholder="输入床铺数量" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="最多可住人数">
					<u--input inputAlign='right' type='digit' v-model="form.mostPeople" placeholder="输入最多可住人数" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="面积（平米）">
					<u--input inputAlign='right' type='digit' v-model="form.decorationArea" placeholder="输入房屋面积" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' @click='placeSelect(),hideKeyboard()' label="房源位置">
					<view style='text-align:right;' v-if="form.province">{{ form.province }}{{ form.city }}{{ form.area }}</view>
					<view style='text-align:right;' v-else>
						<text style='text-align:right;'>选择房源位置 </text>
						<image src="@/static/image/yjt.png" mode=""
							style="margin-left:10rpx;width:12rpx;height: 21rpx;"></image>
					</view>
				</u-form-item>
				<u-form-item labelWidth='80' labelPosition='left' label="详细地址">
					<u-input inputAlign='right' maxlength="15" border='none' placeholder='输入详细地址，不超过15个字' v-model="form.detailedAddress" />
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='top' label="房源特色">
					<view class="flex">
						<u--input v-for='item in labelList' inputAlign='right' v-model="item.value" placeholder="输入房源特色" border="none"></u--input>
					</view>
					
				</u-form-item>
			</u--form>
			<view>
				<view class='flex justify-space-between'>
					<view style='width:25%;'>服务</view>
					<view style='width:25%;'></view>
					<view style='width:25%;'></view>
					<view class='checkall'>
						<u-checkbox-group
						            v-model="checkboxValue1"
						            placement="column"
						            @change="checkboxChange1"
						        >
						            <u-checkbox
						                :customStyle="{marginBottom: '8px'}"
						                :checked='checked1'
										label='全选'
						                name="全选"
						            >
						            </u-checkbox>
						        </u-checkbox-group>
					</view>
				</view>
				<view class='more'>
					 <u-checkbox-group
					            v-model="checkList1"
					            placement="row"
					            @change="checkboxChange1"
					        >
					            <u-checkbox
					                :customStyle="{marginBottom: '8px'}"
					                v-for="(item, index) in checkboxList1"
					                :key="index"
									:checked='item.checked'
					                :label="item.name"
					                :name="item.name"
					            >
					            </u-checkbox>
					        </u-checkbox-group>
				</view>
			</view>
			
			<view>
				<view class='flex justify-space-between'>
					<view style='width:25%;'>家居</view>
					<view style='width:25%;'></view>
					<view style='width:25%;'></view>
					<view class='checkall'>
						<u-checkbox-group
						            v-model="checkboxValue2"
						            placement="column"
						            @change="checkboxChange2"
						        >
						            <u-checkbox
						                :customStyle="{marginBottom: '8px'}"
						                :checked='checked2'
										label='全选'
						                name="全选"
						            >
						            </u-checkbox>
						        </u-checkbox-group>
					</view>
				</view>
				<view class='more'>
					 <u-checkbox-group
					            v-model="checkList2"
					            placement="row"
					            @change="checkboxChange2"
					        >
					            <u-checkbox
					                :customStyle="{marginBottom: '8px'}"
					                v-for="(item, index) in checkboxList2"
					                :key="index"
									:checked='item.checked'
					                :label="item.name"
					                :name="item.name"
					            >
					            </u-checkbox>
					        </u-checkbox-group>
				</view>
			</view>
			
			<view>
				<view class='flex justify-space-between'>
					<view style='width:25%;'>卫浴</view>
					<view style='width:25%;'></view>
					<view style='width:25%;'></view>
					<view class='checkall'>
						<u-checkbox-group
						            v-model="checkboxValue3"
						            placement="column"
						            @change="checkboxChange3"
						        >
						            <u-checkbox
						                :customStyle="{marginBottom: '8px'}"
						                :checked='checked3'
										label='全选'
						                name="全选"
						            >
						            </u-checkbox>
						        </u-checkbox-group>
					</view>
				</view>
				<view class='more'>
					 <u-checkbox-group
					            v-model="checkList3"
					            placement="row"
					            @change="checkboxChange3"
					        >
					            <u-checkbox
					                :customStyle="{marginBottom: '8px'}"
					                v-for="(item, index) in checkboxList3"
					                :key="index"
									:checked='item.checked'
					                :label="item.name"
					                :name="item.name"
					            >
					            </u-checkbox>
					        </u-checkbox-group>
				</view>
			</view>
			
			<view>
				<view class='flex justify-space-between'>
					<view style='width:25%;'>餐厨</view>
					<view style='width:25%;'></view>
					<view style='width:25%;'></view>
					<view class='checkall'>
						<u-checkbox-group
						            v-model="checkboxValue4"
						            placement="column"
						            @change="checkboxChange4"
						        >
						            <u-checkbox
						                :customStyle="{marginBottom: '8px'}"
						                :checked='checked4'
										label='全选'
						                name="全选"
						            >
						            </u-checkbox>
						        </u-checkbox-group>
					</view>
				</view>
				<view class='more'>
					 <u-checkbox-group
					            v-model="checkList4"
					            placement="row"
					            @change="checkboxChange4"
					        >
					            <u-checkbox
					                :customStyle="{marginBottom: '8px'}"
					                v-for="(item, index) in checkboxList4"
					                :key="index"
									:checked='item.checked'
					                :label="item.name"
					                :name="item.name"
					            >
					            </u-checkbox>
					        </u-checkbox-group>
				</view>
			</view>
			
			<view>
				<view class='flex justify-space-between'>
					<view style='width:25%;'>建筑</view>
					<view style='width:25%;'></view>
					<view style='width:25%;'></view>
					<view class='checkall'>
						<u-checkbox-group
						            v-model="checkboxValue5"
						            placement="column"
						            @change="checkboxChange5"
						        >
						            <u-checkbox
						                :customStyle="{marginBottom: '8px'}"
						                :checked='checked5'
										label='全选'
						                name="全选"
						            >
						            </u-checkbox>
						        </u-checkbox-group>
					</view>
				</view>
				<view class='more'>
					 <u-checkbox-group
					            v-model="checkList5"
					            placement="row"
					            @change="checkboxChange5"
					        >
					            <u-checkbox
					                :customStyle="{marginBottom: '8px'}"
					                v-for="(item, index) in checkboxList5"
					                :key="index"
									:checked='item.checked'
					                :label="item.name"
					                :name="item.name"
					            >
					            </u-checkbox>
					        </u-checkbox-group>
				</view>
			</view>
		</view>
		<view class="mercharts_footer">
			<button @click='submit' class="submit">提交</button>
		</view>
		<u-modal :show="isSubmit" content='确定编辑民宿信息？' @confirm="$u.debounce(confirmSubmit, 500)" showCancelButton
			@cancel="isSubmit=false" @close="isSubmit=false" closeOnClickOverlay></u-modal>
	</view>
</template>

<script>
	var that
	import uploadImage from '@/components/ossutil/uploadFile.js';
	export default {
		data() {
			return {
				form:{},
				fileList1:[],
				id:'',
				homestayImageArray:[],
				checked1:false,
				checked2:false,
				checked3:false,
				checked4:false,
				checked5:false,
				room:'',
				hall:'',
				toilet:'',
				isSubmit:false,
				currectData:{},
				labelList:[{value:''},{value:''},{value:''},{value:''}],
				checkList1:[],
				checkList2:[],
				checkList3:[],
				checkList4:[],
				checkList5:[],
				checkboxValue1:'',
				checkboxValue2:'',
				checkboxValue3:'',
				checkboxValue4:'',
				checkboxValue5:'',
				checkboxList1:[{name:'行李寄存',checked:false},{name:'可长租',checked:false},{name:'自助入住',checked:false},{name:'免费停车',checked:false}],
				checkboxList2:[{name:'电视',checked:false},{name:'洗衣机',checked:false},{name:'冰箱',checked:false},{name:'空调',checked:false}
				,{name:'热水壶',checked:false},{name:'免费wifi',checked:false}],
				checkboxList3:[{name:'吹风机',checked:false},{name:'洗发水',checked:false},{name:'沐浴露',checked:false},{name:'独立卫浴',checked:false}
				,{name:'拖鞋',checked:false},{name:'牙具',checked:false},{name:'毛巾',checked:false},{name:'浴巾',checked:false},{name:'纸巾',checked:false},
				{name:'热水淋浴',checked:false},{name:'香皂',checked:false}],
				checkboxList4:[{name:'餐具',checked:false},{name:'锅具',checked:false},{name:'调料',checked:false},{name:'电磁炉',checked:false}
				,{name:'天然气',checked:false},{name:'刀具',checked:false},{name:'菜板',checked:false},{name:'汤勺',checked:false}],
				checkboxList5:[{name:'电梯',checked:false},{name:'窗户',checked:false},{name:'落地窗',checked:false},{name:'海景',checked:false}],
			}
		},
		onLoad(options) {
			that = this
			this.id = options.id
			
		},
		async onShow() {
			this.currectData=await this.getHomestay()
			console.log(this.currectData)
			this.form = this.currectData
			this.homestayImageArray = this.currectData.homestayImage.split(',')
			for(var i=0;i<this.homestayImageArray.length;i++){
				this.fileList1.push({url:this.homestayImageArray[i]})
			}
			
		},
		methods: {
			// 删除图片
			deletePic(event,status) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event,status) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url,status)
					
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
					console.log(that.form, this[`fileList${event.name}`])
					
				}
			},
			uploadFilePromise(res,status) {
				return new Promise((resolve, reject) => {
					uploadImage(res, 'cardImages/',
						result => {
							that.homestayImageArray.push(result)
							that.form.homestayImage = that.homestayImageArray.toString()
							resolve(res)
						}
					)
				})
			},
			confirmSubmit(){
				uni.showLoading({
					title: '加载中',
					mask: true
				})
				that.$request.baseRequest('admin.tourism.homestayDetailInfo', 'add',{
					homestayDetailInfo:JSON.stringify(this.form)
				}, failres => {
					uni.showToast({
						icon: "none",
						title: failres.errmsg,
						duration: 3000
					});
					uni.hideLoading()
				}).then(res => {
					this.isSubmit = false
					uni.showToast({
						icon: "success",
						title: '添加民宿成功',
						duration: 2000
					});
				})
			},
			getHomestay(){
				return new Promise((resolve, reject) => {
					that.$request.baseRequest('admin.tourism.homestayDetailInfo', 'get', {
						id:this.id
					}, failres => {
						uni.showToast({
							icon: "none",
							title: failres.errmsg,
							duration: 3000
						});
						uni.hideLoading()
					}).then(res => {
						console.log(res.data)
						 resolve(res.data)
					})
				})
			},
			submit(){
				var labeldata=this.labelList.filter((item)=>{return item.value!=''})
				var label=[]
				for(var i=0;i<labeldata.length;i++){
					label.push(labeldata[i].value)
				}
				this.form.label = label.toString()
				this.form.houseType=this.room+','+this.hall+','+this.toilet
				var list1=[],list2=[],list3=[],list4=[],list5=[]
				var data1=this.checkboxList1.filter((item)=>{return item.checked})
				var data2=this.checkboxList2.filter((item)=>{return item.checked})
				var data3=this.checkboxList3.filter((item)=>{return item.checked})
				var data4=this.checkboxList4.filter((item)=>{return item.checked})
				var data5=this.checkboxList5.filter((item)=>{return item.checked})
				if(data1.length>0){
					for(var i=0;i<data1.length;i++){
						list1.push(data1[i].name)
					}
					this.form.service=list1.toString()
				}
				if(data2.length>0){
					for(var i=0;i<data2.length;i++){
						list2.push(data2[i].name)
					}
					this.form.homeFurnishing=list2.toString()
				}
				if(data3.length>0){
					for(var i=0;i<data3.length;i++){
						list3.push(data3[i].name)
					}
					this.form.bathroom=list3.toString()
				}
				if(data4.length>0){
					for(var i=0;i<data4.length;i++){
						list4.push(data4[i].name)
					}
					this.form.kitchen=list4.toString()
				}
				if(data5.length>0){
					for(var i=0;i<data5.length;i++){
						list5.push(data5[i].name)
					}
					this.form.build=list5.toString()
				}
				this.isSubmit = true
			},
			checkboxChange1(e){
				var data=JSON.parse(JSON.stringify(e))
				this.$forceUpdate()
				if(e[0]){
					if(e[0]=='全选'){
						this.checkboxList1=this.checkboxList1.map((item)=>{
							item.checked = true 
							return item})
					}else{	
						this.checkboxList1=this.checkboxList1.map((item)=>{
								item.checked = false 
								return item})
						for(var i=0;i<data.length;i++){
							var index=this.checkboxList1.findIndex((item)=>{return item.name==data[i]})
							if(index!=-1) this.checkboxList1[index].checked=true
							else  this.checkboxList1[index].checked=false
						}
						if(this.checkboxList1.every((item)=>{return item.checked==true})==true){
							this.checked1=true
						}else{
							this.checked1=false
						}
					}
				}else{
					if(this.checkboxValue1){
						this.checkboxList1=this.checkboxList1.map((item)=>{
							item.checked = false 
							return item})
					}
				}
				console.log(this.checkboxList1,this.checkList1)
			},
			checkboxChange2(e){
				var data=JSON.parse(JSON.stringify(e))
				this.$forceUpdate()
				if(e[0]){
					if(e[0]=='全选'){
						this.checkboxList2=this.checkboxList2.map((item)=>{
							item.checked = true 
							return item})
					}else{	
						this.checkboxList2=this.checkboxList2.map((item)=>{
								item.checked = false 
								return item})
						for(var i=0;i<data.length;i++){
							var index=this.checkboxList2.findIndex((item)=>{return item.name==data[i]})
							if(index!=-1) this.checkboxList2[index].checked=true
							else  this.checkboxList2[index].checked=false
						}
						if(this.checkboxList2.every((item)=>{return item.checked==true})==true){
							this.checked2=true
						}else{
							this.checked2=false
						}
					}
				}else{
					if(this.checkboxValue2){
						this.checkboxList2=this.checkboxList2.map((item)=>{
							item.checked = false 
							return item})
					}
				}
				console.log(this.checkboxList2,this.checkList2)
			},
			checkboxChange3(e){
				var data=JSON.parse(JSON.stringify(e))
				this.$forceUpdate()
				if(e[0]){
					if(e[0]=='全选'){
						this.checkboxList3=this.checkboxList3.map((item)=>{
							item.checked = true 
							return item})
					}else{	
						this.checkboxList3=this.checkboxList3.map((item)=>{
								item.checked = false 
								return item})
						for(var i=0;i<data.length;i++){
							var index=this.checkboxList3.findIndex((item)=>{return item.name==data[i]})
							if(index!=-1) this.checkboxList3[index].checked=true
							else  this.checkboxList3[index].checked=false
						}
						if(this.checkboxList3.every((item)=>{return item.checked==true})==true){
							this.checked3=true
						}else{
							this.checked3=false
						}
					}
				}else{
					if(this.checkboxValue3){
						this.checkboxList3=this.checkboxList3.map((item)=>{
							item.checked = false 
							return item})
					}
				}
				console.log(this.checkboxList3,this.checkList3)
			},
			checkboxChange4(e){
				var data=JSON.parse(JSON.stringify(e))
				this.$forceUpdate()
				if(e[0]){
					if(e[0]=='全选'){
						this.checkboxList4=this.checkboxList4.map((item)=>{
							item.checked = true 
							return item})
					}else{	
						this.checkboxList4=this.checkboxList4.map((item)=>{
								item.checked = false 
								return item})
						for(var i=0;i<data.length;i++){
							var index=this.checkboxList4.findIndex((item)=>{return item.name==data[i]})
							if(index!=-1) this.checkboxList4[index].checked=true
							else  this.checkboxList4[index].checked=false
						}
						if(this.checkboxList4.every((item)=>{return item.checked==true})==true){
							this.checked4=true
						}else{
							this.checked4=false
						}
					}
				}else{
					if(this.checkboxValue4){
						this.checkboxList4=this.checkboxList4.map((item)=>{
							item.checked = false 
							return item})
					}
				}
				console.log(this.checkboxList4,this.checkList4)
			},
			checkboxChange5(e){
				var data=JSON.parse(JSON.stringify(e))
				this.$forceUpdate()
				if(e[0]){
					if(e[0]=='全选'){
						this.checkboxList5=this.checkboxList5.map((item)=>{
							item.checked = true 
							return item})
					}else{	
						this.checkboxList5=this.checkboxList5.map((item)=>{
								item.checked = false 
								return item})
						for(var i=0;i<data.length;i++){
							var index=this.checkboxList5.findIndex((item)=>{return item.name==data[i]})
							if(index!=-1) this.checkboxList5[index].checked=true
							else  this.checkboxList5[index].checked=false
						}
						if(this.checkboxList5.every((item)=>{return item.checked==true})==true){
							this.checked5=true
						}else{
							this.checked5=false
						}
					}
				}else{
					if(this.checkboxValue1){
						this.checkboxList1=this.checkboxList1.map((item)=>{
							item.checked = false 
							return item})
					}
				}
				console.log(this.checkboxList5,this.checkList5)
			},
			placeSelect() {
				uni.chooseLocation({
					success: function(res) {
						console.log(res);
						that.form.location = res.latitude + ',' + res.longitude
						let _address = that.$helper.formatLocation(res.address)
						console.log(_address)
						that.form.province = _address.Province
						that.form.city = _address.City
						that.form.area = _address.Country
						that.form.detailedAddress = _address.Village
						that.$forceUpdate()
					}
				});
			},
			hideKeyboard() {
				uni.hideKeyboard()
			},
		}
	}
</script>

<style lang='scss' scoped>
/deep/.u-checkbox-group{
	flex-wrap: wrap;
}
.checkall{
	width:25%;
}
/* .checkall /deep/.u-checkbox-group{
	padding-right: 9vw;
} */
.more /deep/.u-checkbox-group .u-checkbox{
		width:25%;
		
	}
</style>