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

wxml

代码语言：javascript复制

<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>

js

代码语言：javascript复制

// 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

代码语言：javascript复制

/* 确认发布的按钮 */

.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;
}

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

css 后端

0 人点赞