|
|
@@ -1,22 +1,400 @@
|
|
|
<template>
|
|
|
- <view>
|
|
|
-
|
|
|
+ <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>服务</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>家居</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>卫浴</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>餐厨</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>建筑</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}],
|
|
|
}
|
|
|
},
|
|
|
- methods: {
|
|
|
+ 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>
|
|
|
-
|
|
|
+<style lang='scss' scoped>
|
|
|
+/deep/.u-checkbox-group{
|
|
|
+ flex-wrap: wrap;
|
|
|
+}
|
|
|
+.checkall /deep/.u-checkbox-group{
|
|
|
+ padding-right: 59rpx;
|
|
|
+}
|
|
|
+.more /deep/.u-checkbox-group .u-checkbox{
|
|
|
+ width:25%;
|
|
|
+
|
|
|
+ }
|
|
|
</style>
|
高敬炎