微信小程序提交form表单内容

男娘i 2022-10-12 01:25 24阅读 0赞

wxml

<form catchsubmit="confirmPublish">
      <view class="cu-form-group margin-top">
        <view class="title d-flex">
          姓名
        </view>
        <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
          <input maxlength="15" placeholder="请输入姓名" value="{
       {name}}" data-name="name" bindblur="setInput"></input>
        </view>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">性别
        </view>
        <picker class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerChange" value="{
       {index}}" range="{
       {array}}">
          <view class="picker">
            {
       {array[sex]}}
          </view>
        </picker>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">
          手机号
        </view>
        <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
          <input maxlength="15" placeholder="请输入姓名" value="{
       {phone}}" data-name="phone" bindblur="setInput"></input>
        </view>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">
          证件号
        </view>
        <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
          <input maxlength="15" placeholder="请输入姓名" value="{
       {idNumber}}" data-name="idNumber" bindblur="setInput"></input>
        </view>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">日期选择器</view>
    
        <view class="picker" class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bind:tap="openPicker">
          {
       {currentChoose}}
        </view>
    
      </view>
    
    
      <van-action-sheet show="{
       { show }}" bind:close="onClose" bind:getuserinfo="onGetUserInfo">
        <van-datetime-picker type="datetime" value="{
       { currentDate }}" min-date="{
       { minDate }}" max-date="{
       { maxDate }}" bind:cancel="onCancel" bind:confirm="onConfirm" bind:change="onChange" />
      </van-action-sheet>
    
    
      <view class="cu-form-group margin-top">
        <view class="title d-flex">来访事由
        </view>
        <picker class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerChangeCause" value="{
       {index1}}" range="{
       {visitCausearray}}">
          <view class="picker">
            {
       {visitCausearray[visitCause]}}
          </view>
        </picker>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">
          来访公司
        </view>
        <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
          <input maxlength="15" placeholder="请输入姓名" value="{
       {visitCompany}}" data-name="visitCompany" bindblur="setInput"></input>
        </view>
      </view>
      <view class="cu-form-group margin-top">
        <view class="title d-flex">
          被访姓名
        </view>
        <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
          <input maxlength="15" placeholder="请输入姓名" value="{
       {interviewee}}" data-name="interviewee" bindblur="setInput"></input>
        </view>
      </view>
    
      <view class="cu-form-group margin-top">
        <view class="title d-flex">被访部门
        </view>
        <picker class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;font-size: 30rpx;color: #555;" bindchange="bindPickerOrgan" value="{
       {index2}}" range="{
       {organarray}}">
          <view class="picker">
            {
       {organarray[visitOrganId]}}
          </view>
        </picker>
      </view>
    
      <button class='btn1' bindtap="bindViewTapsuccess" form-type="submit">完成</button>
    
    </form>

// pages/addsign/addsign.js
    var util = require('../../utils/util.js');
    const app = getApp()
    Page({
      /**
       * 页面的初始数据
       */
      data: {
        globalid: [],
        array: ['男', '女'],
        sex: 0,
        visitCausearray: ['面试', '开会', '拜访顾客', '项目实施', '其他'],
        visitCause: 0,
        organarray: ['生产部', '运营部', '营销部'],
        visitOrganId: 0,
        date: '2021-06-01',
        name: '',
        phone: '',
        idNumber: '',
        subscribeTime: '',
        visitCompany: '',
        interviewee: '',
        visitOrgan: '',
        //日期选择器
        minHour: 0,
        maxHour: 24,
        minDate: new Date(1990, 1, 1).getTime(),
        maxDate: new Date(2099, 12, 31).getTime(),
        currentDate: new Date().getTime(),
        show: false,
        currentChoose: ''
      },
      //日期选择器的处理
      openPicker() {
        this.setData({
          show: true
        })
      },
      onConfirm(e) {
        this.setData({
          show: false,
          currentChoose: this.formatDate(new Date(e.detail))
        })
      },
      onClose() {
        this.setData({
          show: false
        })
      },
      onCancel() {
        this.setData({
          show: false
        })
      },
      formatDate(date) {
        let taskStartTime
        if (date.getMonth() < 9) {
          taskStartTime = date.getFullYear() + "-0" + (date.getMonth() + 1) + "-"
        } else {
          taskStartTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
        }
        if (date.getDate() < 10) {
          taskStartTime += "0" + date.getDate()
        } else {
          taskStartTime += date.getDate()
        }
        taskStartTime += " " + date.getHours() + ":" + date.getMinutes()
        this.setData({
          taskStartTime: taskStartTime,
        })
        return taskStartTime;
      },
    
      //男女
      bindPickerChange: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          sex: e.detail.value
        })
      },
    
      //来访事由
      bindPickerChangeCause: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          visitCause: e.detail.value
        })
      },
      //部门
      bindPickerOrgan: function(e) {
        console.log('picker发送选择改变，携带值为', e.detail.value)
        this.setData({
          visitOrganId: e.detail.value
        })
      },
    
      /**
       * 生命周期函数--监听页面加载
       */
      onLoad: function(options) {
        // 调用函数时，传入new Date()参数，返回值是日期和时间
        var time = util.formatTime(new Date());
        this.setData({
          currentChoose: time
        });
      },
      setInput: function(e) {
        const {
          name
        } = e.target.dataset
        this.data[name] = e.detail.value
    
        this.setData(this.data)
      },
      confirmPublish: function() {
    
        var that = this
    
        const data = {}
        data.name = this.data.name
        data.sex = this.data.sex
        data.phone = this.data.phone
        data.idNumber = this.data.idNumber
        data.subscribeTime = this.data.currentChoose
        data.visitCause = this.data.visitCause
        data.visitCompany = this.data.visitCompany
        data.interviewee = this.data.interviewee
        data.visitOrgan = this.data.visitOrgan
    
        data.visitOrganId = this.data.visitOrganId
        console.log(JSON.stringify(data))
    
    
        wx.request({
          url: 'http://192.xxx.4.1xx:8093/cs-applet/subscribe/addCallerSubscribe',
          method: 'POST',
          data: data,
          header: {
            'content-type': 'application/json',
          },
          success: function(res) {
    
          },
          fail: function(error) {
            wx.showToast({
              title: error.message || '保存失败'
            })
            console.log(error)
          }
        })
      },
    })

css

/* 确认发布的按钮 */
    
    .btn1 {
      width: 90%;
      margin-top: 70rpx;
      margin-bottom: 70rpx;
      background-color: #09bb07;
      color: white;
      font-size: 33rpx;
      border-radius: 13rpx;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }
    
    .d-flex {
      display: flex;
    }
    
    .cu-form-group .title {
      text-align: justify;
      padding-right: 30rpx;
      font-size: 30rpx;
      position: relative;
      height: 60rpx;
      line-height: 60rpx;
    }
    
    .cu-form-group {
      background-color: var(--white);
      padding: 1rpx 30rpx;
      display: flex;
      align-items: center;
      min-height: 100rpx;
      justify-content: space-between;
    }
    
    .borderBottom {
      border-bottom: 1rpx solid #eee;
    }
    
    .ai-center {
      align-items: center;
    }
    
    .jc-start {
      justify-content: flex-start;
    }
    
    .flex-1 {
      flex: 1;
    }
    
    .cu-form-group input {
      flex: 1;
      font-size: 30rpx;
      color: #555;
      padding-right: 20rpx;
    }

点击完成的时候，将所有填写的值传给后端

![9b87098efef933990c1354f6963f8e70.png][]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]

[9b87098efef933990c1354f6963f8e70.png]: /images/20221005/7693ff2c6b2a437691bc75a02358d283.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDc2MzU2OQ_size_16_color_FFFFFF_t_70]: /images/20221005/4b765ff1d7184dc99038d8e3c9ba2489.png