微信小程序表单

微信小程序表单

跟朋友做了一个量衣定制的小程序页面，做了主要是采集用户的身体数据,分享给大家，复制代码过去即可使用！
效果：

代码：
wxml:

<view class='baseInfo'>
  <text>基本信息</text>
</view>
 

 
<form bindsubmit="formSubmit">
<view class='list'>
  <view class='name'>
    <text>姓名</text>
    <input name="name" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的姓名'></input>
  </view>
 
  <view class='sex'>
    <text>性别</text>
    <radio-group class="radio-group" bindchange="radioChange">
      <label class="radio" wx:for="{{sex}}" wx:key="index">
        <radio value="{{item.name}}" checked="{{item.checked}}"/>{{item.value}}
      </label>
    </radio-group>
  </view>

    <view class='phone'>
    <text>年龄(岁)</text>
    <input name="nl" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的年龄'></input>
  </view>
 
  <view class='phone'>
    <text>身高(CM)</text>
    <input name="sg" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你身高'></input>
  </view>

  <view class='phone'>
    <text>体重(KG)</text>
    <input name="tz" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的体重'></input>
  </view>





<view class='baseInfo'>
  <text>身体信息</text>
</view>

<view class='baseInfo'>
  <text>上身：</text>
</view>

  <view class='phone'>
    <text>领围(CM)</text>
    <input name="lw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的领围(CM)'></input>
  </view>

    <view class='phone'>
    <text>肩宽(CM)</text>
    <input name="jk" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的肩宽(CM)'></input>
  </view>

    <view class='phone'>
    <text>胸围(CM)</text>
    <input name="xw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的胸围(CM)'></input>
  </view>

    <view class='phone'>
    <text>中腰(CM)</text>
    <input name="zy" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的中腰(CM)'></input>
  </view>

    <view class='phone'>
    <text>袖长(CM)</text>
    <input name="xc" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的袖长(CM)'></input>
  </view>




<view class='baseInfo'>
  <text>下身：</text>
</view>

  <view class='phone'>
    <text>腰围(CM)</text>
    <input name="yw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的腰围(CM)'></input>
  </view>

    <view class='phone'>
    <text>臀围(CM)</text>
    <input name="tw" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的臀围(CM)'></input>
  </view>

    <view class='phone'>
    <text>横档(CM)</text>
    <input name="hd" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的横档(CM)'></input>
  </view>

    <view class='phone'>
    <text>裤长(CM)</text>
    <input name="kc" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的裤长(CM)'></input>
  </view>



</view>
 


<button form-type='submit'>保存</button>
</form>











<!-- 模态框 -->
<modal class="modal" title='要保存的信息' hidden="{{modalHidden}}" bindcancel='modalCancel' bindconfirm='modalConfirm'>
    <view>姓名:{{information.name}}</view>
    <view>姓别:{{userSex}}</view>
    <view>年龄:{{information.nl}}</view>
    <view>身高:{{information.sg}}</view>
    <view>体重：{{information.tz}}</view>
</modal>
<!-- /模态框 -->

wxss:

page{
  background: #eee;
}
.baseInfo{
  padding:20rpx 10rpx;
}

.baseInfo text{
  font-size: 28rpx;
  color: #6f6f6f;
}



.list{
  color: #6f6f6f;
  font-size: 32rpx;
}

 
.name,.sex,.phone,.info{
  background: #fff;
  display: flex;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}
.name input,.phone input,.info input{
  text-align:right;
}

.sex{
  background: #fff;
}


.radio radio{
  margin-left: 30rpx;
}
 
button{
  background-color: #FE6702;
  color: #fff;

 
  width: 100%;
}
 


.modal view{
  text-align: center;
}

js:

Page({
 
  /**
   * 页面的初始数据
   */
  data: {
    touxiang: 'https://manager.diandianxc.com/diandianxc/mrtx.png',
    icon_r: 'https://manager.diandianxc.com/mine/enter.png',
    sex:[
      {name:'0',value:'男',checked:'true'},
      {name:'1',value:'女'}
    ],
    isSex:"0",
    information:[],
    userSex:'',
    modalHidden:true
  },
  //单选按钮发生变化
  radioChange(e){
    console.log(e.detail.value);
    var sexName=this.data.isSex
    this.setData({
      isSex:e.detail.value
    })
  },
 







  //表单提交
  formSubmit(e){
    console.log(e.detail.value);




    
    var userSex=this.data.isSex==0?'男':'女';
    var information= e.detail.value;
    console.log(userSex);


    this.setData({
      information: e.detail.value,
      userSex,
      modalHidden:false
    });


  },
 

  
  //模态框取消
  modalCancel(){
    wx.showToast({
      title: '取消提交',
      icon:'none'
    })
    this.setData({
      modalHidden:true,
    })
  },


  //模态框确定
  modalConfirm:function(e) {
    this.setData({
      
    })



    wx.showToast({
      title: '提交成功',
      icon:'success'
    })
    this.setData({
      modalHidden: true
    })
  },



  onLoad: function (options) {

  }
})