6.微信小程序之表单提交

用户输入内容，点击提交，提交后显示提交内容。点击确认，显示提交成功；点击取消，显示取消提交

1.

2.

3.

4.

 

代码展示

1.modal.wxml

<view class='baseInfo'>
  <image src='../../../image/titleTag.png'></image>
  <text>基本信息</text>
</view>

<form bindsubmit="formSubmit">
<view class='list'>
  <view class='icon'>
    <text>头像</text>
    <view class='icon-img'>  
      <image class='icon-head' src='{{touxiang}}'></image>
      <image class='icon-r' src='{{icon_r}}'></image>
    </view>
  </view>

  <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="phone" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入你的手机号'></input>
  </view>


<view class='baseInfo'>
  <image src='../../../image/titleTag.png'></image>
  <text>基本信息</text>
</view>

<view class='info'>
    <text>身份证号</text>
    <input name="idNumber" type='text' placeholder-style='font-size:28rpx;' placeholder='请输入证件号码'></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.phone}}</view>
    <view>身份证号：{{information.idNumber}}</view>
</modal>
<!-- /模态框 -->

2.modal.wxss

page{
  background: #eee;
}
.baseInfo{
  padding:20rpx 10rpx;
}
.baseInfo image{
  width: 10rpx;
  height: 30rpx;
  vertical-align: middle;
  margin-right: 10rpx;
}
.baseInfo text{
  font-size: 28rpx;
  color: #6f6f6f;
}
.list{
  color: #6f6f6f;
  font-size: 32rpx;
}
.icon{
  background: #fff;
  display: flex;
  align-content: center;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx;
  border-bottom: 1rpx solid #eee;
}

.icon-img{
  display: flex;
  align-content: center;
  align-items: center;
}
.icon-head{
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  margin-right: 30rpx;
}
.icon-r{
  width: 20rpx;
  height: 30rpx;
}
.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;
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.modal view{
  text-align: center;
}

3.modal.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);
    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() {
    wx.showToast({
      title: '提交成功',
      icon:'success'
    })
    this.setData({
      modalHidden: true
    })
  },
  onLoad: function (options) {
  
  }
})