tourism/uni_applet/pageA/enter/myHomestay/add.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='top' 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' 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' v-model="room" placeholder="输入" border="none"></u--input>
							<view>室</view>
						</view>
						<view class='flex'>
							<u--input inputAlign='right' v-model="hall" placeholder="输入" border="none"></u--input>
							<view>厅</view>
						</view>
						<view class='flex'>
							<u--input inputAlign='right' 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' v-model="form.bedNum" placeholder="输入床铺数量" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="最多可住人数">
					<u--input inputAlign='right' v-model="form.mostPeople" placeholder="输入最多可住人数" border="none"></u--input>
				</u-form-item>
				<u-form-item labelWidth='120' labelPosition='left' label="面积（平米）">
					<u--input inputAlign='right' 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>
	</view>
</template>

<script>
	var that
	export default {
		data() {
			return {
				form:{},
				fileList1:[],
				checked1:false,
				checked2:false,
				checked3:false,
				checked4:false,
				checked5:false,
				room:'',
				hall:'',
				toilet:'',
				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() {
			that = this
		},
		onShow() {
			
		},
		methods: {
			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)
			},
			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>