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

曾经终败给现在 2022-05-08 09:24 2268阅读 0赞

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

1.![70][]

2.![70 1][]

3.![70 2][]

4.![70 3][]

代码展示

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) {
      
      }
    })

[70]: /images/20220508/97be3a1287d449e08961a0201dce6221.png
[70 1]: /images/20220508/a812eaf7771040bd804b079246468dda.png
[70 2]: /images/20220508/f533b254159e484fad11f6611a87b472.png
[70 3]: /images/20220508/100914d8dbac4312876178f1e271f0ed.png