wx小程序提交form

//知识点
(1)picker使用：自定义、date日期
(2)单选、多选、数据拼接赋值insName += ';'+v.name
(3)提交form
(4)this.setData更新对象中的数据，'form.time'

1，wxml部分

// wxml文件
<form bindsubmit='submitForm'>
  <view class="content">
    <view>
      <view class="title-text"><text class="cycle">*</text>租房标题</view>
      <input type='text' 
      placeholder="有好的标题才能吸引好的租户哦" 
      placeholder-style="color:#b3b3b3;"
      confirm-type='next' 
      class="inp-view" 
      name='title' 
      data-id='title' 
      bindblur='getInputVlaue'/>
    </view>
    <view>
      <view class="title-text title-margin">基础信息</view>
      <view class="row algin between inp-view">
        <view class="l-text"><text class="cycle">*</text>位置</view>
        <input type='text' 
        placeholder="请输入" 
        placeholder-style="color:#b3b3b3;"
        class="inp" 
        name='location' 
        bindblur='getInputVlaue' 
        confirm-type='next' 
        data-id='location' />
      </view>
      <view class="row algin between inp-view view-margin">
        <view class="l-text"><text class="cycle">*</text>面积</view>
        <input type='number'
        placeholder="请输入" 
        placeholder-style="color:#b3b3b3;"
        class="inp"  
        name='area' 
        bindblur='getInputVlaue' 
        data-id='area' />
      </view>
      <view class="row algin between inp-view view-margin">
        <view class="l-text"><text class="cycle">*</text>楼层</view>
        <picker 
          class="inp"
          range="{{floorList}}"
          bindchange="bindFloorChange">
            <input type="text" 
            disabled 
            placeholder="请选择" 
            placeholder-style="color:#b3b3b3;" 
            value="{{form.floor}}"/>
          </picker>
        </view>
      <view class="row algin between inp-view view-margin">
        <view class="l-text">户型年代</view>
          <picker mode="date" 
          fields='year' 
          class="inp"
          value="{{date}}" 
          start="1990" 
          end="2021" 
          bindchange="bindDateChange">
            <input type="text" 
            disabled 
            placeholder="请选择" 
            placeholder-style="color:#b3b3b3;" 
            value="{{form.time?form.time+'年':''}}"/>
          </picker>
        </view>
      <view class="row algin between inp-view view-margin">
        <view class="l-text"><text class="cycle">*</text>签约期限</view>
        <picker 
          class="inp"
          range="{{deadlineList}}"
          bindchange="bindDeadLineChange">
            <input type="text" 
            disabled 
            placeholder="请选择" 
            placeholder-style="color:#b3b3b3;" 
            value="{{form.deadline}}"/>
          </picker>
        </view>
    </view>
    <view class="view-margin view-margin-right">
      <view class="title-text title-margin"><text class="cycle">*</text>房屋朝向</view>
      <view class="row algin">
        <view wx:for="{{directionList}}" wx:key='index' 
        class="dire-item {{item.checked?'bg-red white':''}}" 
        bindtap="checkedDirChange" 
        data-index='{{index}}'>
          {{item.name}}
        </view>
      </view>
    </view>
    <view class="view-margin view-margin-right">
      <view class="title-text title-margin">房屋设施</view>
      <view class="row algin wrap">
        <view wx:for="{{insList}}" wx:key='index' 
        class="dire-item item-margin {{item.checked?'bg-red white':''}}" bindtap="checkedInsChange" 
        data-index='{{index}}'>
          {{item.name}}
        </view>
      </view>
    </view>
  </view>
  <view class="fix-footer">
    <button class="submit-btn bg-red white" formType="submit">发布消息</button>
  </view>
</form>

2，js部分

//js文件
// pages/form/index.js
Page({
  data: {
    form:{
      title:'',
      location:'',
      area:'',
      floor:'',
      time:'',
      deadline:'',
      dir:'',
    },
    floorList:['1层', '2层','3层','4层','5层','6层','7层','8层','9层','10层','11层',
      '12层','13层','14层','15层','16层','17层','18层','19层','20层','21层','22层',
      '23层','24层','25层','26层','27层','顶楼28'],
    directionList:[
      {checked:false,name:'东'},
      {checked:false,name:'西'},
      {checked:false,name:'南'},
      {checked:false,name:'北'}
    ],
    insList:[
      {checked:false,name:'空调'},
      {checked:false,name:'冰箱'},
      {checked:false,name:'电视'},
      {checked:false,name:'沙发'},
      {checked:false,name:'wifi'},
      {checked:false,name:'晾衣架'},
    ],
    deadlineList:["3个月","6个月","1年","2年","2年以上"]
  },
  submitForm(){
    let form = this.data.form;
    if(!form.title){
      wx.showToast({
        title: '租房标题不能为空',
        icon:'none'
      })
      return false;
    }
    if(!form.location){
      wx.showToast({
        title: '位置不能为空',
        icon:'none'
      })
      return false;
    }
    if(!form.area){
      wx.showToast({
        title: '面积不能为空',
        icon:'none'
      })
      return false;
    }
    if(!form.floor){
      wx.showToast({
        title: '楼层不能为空',
        icon:'none'
      })
      return false;
    }
    if(!form.deadline){
      wx.showToast({
        title: '签约期限不能为空',
        icon:'none'
      })
      return false;
    }
    if(!form.dir){
      wx.showToast({
        title: '请选择朝向',
        icon:'none'
      })
      return false;
    }
    console.log('---',form)
    wx.showToast({
      title: '发布成功',
      icon:'success'
    })
  },
  bindDateChange(e) {
    this.setData({
      'form.time': e.detail.value
    })
  },
  bindFloorChange(e){
    let index = e.detail.value;
    let floor = this.data.floorList[index];
    this.setData({
      'form.floor':floor
    })
  },
  bindDeadLineChange(e){
    let index = e.detail.value;
    let deadline = this.data.deadlineList[index];
    this.setData({
      'form.deadline':deadline
    })
  },
  //输入框内容
  getInputVlaue(e){
    let inputType = e.currentTarget.dataset.id;
    let inputValue = e.detail.value;
    if(inputType == 'title'){
      this.setData({
        'form.title':inputValue
      })
    }else 
    if(inputType == 'location'){
      this.setData({
        'form.location':inputValue
      })
    }else if(inputType == 'area'){
      this.setData({
        'form.area':inputValue
      })
    }else{
      this.setData({
        'form.time':inputValue
      })
    }
  },
  //选中朝向
  checkedDirChange(e){
    let  directionList = this.data.directionList;
    let  dir;
    directionList.forEach((v,i)=>{
      if(e.currentTarget.dataset.index == i){
        v.checked = true
        dir = v.name
      }else{
        v.checked = false
      }
    })
    this.setData({
      directionList,
      'form.dir':dir
    })
  },
  //选中设施
  checkedInsChange(e){
    let  insList = this.data.insList;
    let insName='';
    insList.forEach((v,i)=>{
      if(e.currentTarget.dataset.index == i){
        v.checked = !v.checked
      }
      if(v.checked){
        insName += ';'+v.name
      }
    })
    insName = insName.substr(1)
    this.setData({
      insList,
      'form.insName':insName
    })
  }
})

3，css部分

// css文件
page{
  width: 710rpx;
  padding:0 10rpx 0 30rpx;
  background-color: #fff;
}
.row{
  display: flex;
  flex-direction: row;
}
.algin{
 align-items: center;
}
.wrap{
  flex-wrap: wrap;
}
.bg-red{
  background-color: #f53a3a;
}
.cycle{
  margin-right: 10rpx;
  color: #f53a3a;
  font-weight: normal;
  font-size: 30rpx;
}
.title-text{
  font-size: 38rpx;
  font-weight: 700;
  color: #333333;
  margin-bottom: 40rpx;
}
.inp-view{
  font-size: 30rpx;
  padding-bottom: 20rpx;
  border-bottom: 1rpx solid #dad7d7;
}
.content{
  margin-bottom: 140rpx;
}
.fix-footer{
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20rpx 0;
  background-color: #fff;
  box-shadow: 0 0 20rpx #cccccc;
}
.submit-btn{
  width: 710rpx !important;
  font-weight: normal;
  line-height: 60rpx;
}
.title-margin{
  margin-top: 60rpx;
}
.inp{
  width: 520rpx;
}
.view-margin{
  margin-top: 40rpx;
}
.view-margin-right{
  margin-right: 20rpx;
}
.dire-item{
  width: 140rpx;
  line-height: 70rpx;
  text-align: center;
  border-radius: 10rpx;
  border: 1rpx solid #dad7d7;
  font-size: 30rpx;
  margin-right: 28rpx;
}
.item-margin{
  margin-bottom: 30rpx;
}