• 微信 小程序布局 提交表单


    <view class='hong-contant'>
    <form bindsubmit="teformSubmit">
    <view class='contant-teamwork'>
    <view class='teamwork-inputs'>
    <view class='inputs-box flexba'>
    <text>姓名</text>
    <input maxlength="20" name="name" placeholder='请输入您的姓名' />
    </view>
    <view class='inputs-box flexba'>
    <text>出生年月</text>
    <input maxlength="11" name="phone" placeholder='请输入您的联系电话' bindinput='blurPhonel' />
    </view>
    <view class='inputs-box flexba'>
    <text>工作地址</text>
    <input maxlength="100" name="addr" placeholder='请输入您的联系地址' />
    </view>
    <view class='inputs-box flexba'>
    <text>身份证号</text>
    <input maxlength="35" name="identity" placeholder='请输入您的身份证号' />
    </view>
    <view class='inputs-box flexba'>
    <text>微信号 (选填)</text>
    <input maxlength="35" name="weixin" placeholder='请输入您的微信号' />
    </view>
    </view>
    <!-- 提交按钮 -->
    <button class='teamwork-btn flexca' formType="submit">
    <text>提交</text>
    </button>
    </view>
    </form>
    </view>
     
    //-------------------------------------------------------
    .hong-contant .inputs-box{
    height: 88rpx;
    padding: 0 24rpx;
    border-bottom:1px solid #F7F7F7;
    ">#ffffff;
    font-size: 30rpx;
    color: #333333;
    }
    .hong-contant .inputs-box input{
    font-size: 26rpx;
    480rpx;
    text-align: right;
    }

    /* 提交按钮 */
    .hong-contant .teamwork-btn{
    560rpx;
    height: 88rpx;
    border-radius: 50rpx;
    color: white;
    ">#ff4273;
    margin: 0 auto;
    margin-top: 80rpx;
    }
     
    //-------------------------------------------------------------------------
    // 提交请求
    teformSubmit: function (e) {
    let userInfo = this.data.userInfo
    let that = this;
    let user = wx.getStorageSync('user');
    let userChe = e.detail.value
    console.log(userChe)
    if (userChe.name != '' && userChe.phone != '' && userChe.addr != '' && userChe.item != '') {
    if (that.data.ajxtrue) {
    wx.request({
    url: app.globalData.hpUrl + 'addTeamwork', //仅为示例,并非真实的接口地址
    data: {
    uid: user.id,
    userphone: userChe.phone,
    username: userChe.name,
    address: userChe.addr,
    project: userChe.item
    },
    success: function (res) {
    var result = res.data;
    wx.showToast({
    title: '提交成功',
    icon: 'success',
    duration: 1500
    })
    setTimeout(function () {
    wx.switchTab({
    url: '/pages/index/index'
    })
    }, 1500)
    }
    })
    } else {
    wx.showToast({
    title: '手机号有误',
    icon: 'success',
    duration: 1500
    })
    }
    } else {
    wx.showToast({
    title: '请填充完整',
    icon: 'success',
    duration: 1500
    })
    }
    },
  • 相关阅读:
    Linux命令:mapfile
    Linux命令:logout
    行式数据库和列式数据库的浅析
    hadoop常见错误集锦
    hadoop环境搭建遇到问题集锦
    杀毒的一点学习
    powerdesigner的学习
    突然的想法
    shell脚本入门教程(转)
    java classpath深入详解(转)
  • 原文地址:https://www.cnblogs.com/dianzan/p/8006176.html
Copyright © 2020-2023  润新知