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

矫情吗；* 2022-10-10 04:44 250阅读 0赞

wxml

  1. <form catchsubmit="confirmPublish">
  2.   <view class="cu-form-group margin-top">
  3.     <view class="title d-flex">
  4.       姓名
  5.     </view>
  6.     <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
  7.       <input maxlength="15" placeholder="请输入姓名" value="{
  8.     {name}}" data-name="name" bindblur="setInput"></input>
  9.     </view>
  10.   </view>
  11.   <view class="cu-form-group margin-top">
  12.     <view class="title d-flex">性别
  13.     </view>
  14.     <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="{
  15.     {index}}" range="{
  16.     {array}}">
  17.       <view class="picker">
  18.         {
  19.     {array[sex]}}
  20.       </view>
  21.     </picker>
  22.   </view>
  23.   <view class="cu-form-group margin-top">
  24.     <view class="title d-flex">
  25.       手机号
  26.     </view>
  27.     <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
  28.       <input maxlength="15" placeholder="请输入姓名" value="{
  29.     {phone}}" data-name="phone" bindblur="setInput"></input>
  30.     </view>
  31.   </view>
  32.   <view class="cu-form-group margin-top">
  33.     <view class="title d-flex">
  34.       证件号
  35.     </view>
  36.     <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
  37.       <input maxlength="15" placeholder="请输入姓名" value="{
  38.     {idNumber}}" data-name="idNumber" bindblur="setInput"></input>
  39.     </view>
  40.   </view>
  41.   <view class="cu-form-group margin-top">
  42.     <view class="title d-flex">日期选择器</view>
  44.     <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">
  45.       {
  46.     {currentChoose}}
  47.     </view>
  49.   </view>
  52.   <van-action-sheet show="{
  53.     { show }}" bind:close="onClose" bind:getuserinfo="onGetUserInfo">
  54.     <van-datetime-picker type="datetime" value="{
  55.     { currentDate }}" min-date="{
  56.     { minDate }}" max-date="{
  57.     { maxDate }}" bind:cancel="onCancel" bind:confirm="onConfirm" bind:change="onChange" />
  58.   </van-action-sheet>
  61.   <view class="cu-form-group margin-top">
  62.     <view class="title d-flex">来访事由
  63.     </view>
  64.     <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="{
  65.     {index1}}" range="{
  66.     {visitCausearray}}">
  67.       <view class="picker">
  68.         {
  69.     {visitCausearray[visitCause]}}
  70.       </view>
  71.     </picker>
  72.   </view>
  73.   <view class="cu-form-group margin-top">
  74.     <view class="title d-flex">
  75.       来访公司
  76.     </view>
  77.     <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
  78.       <input maxlength="15" placeholder="请输入姓名" value="{
  79.     {visitCompany}}" data-name="visitCompany" bindblur="setInput"></input>
  80.     </view>
  81.   </view>
  82.   <view class="cu-form-group margin-top">
  83.     <view class="title d-flex">
  84.       被访姓名
  85.     </view>
  86.     <view class="w-100 h-100 borderBottom flex-1 d-flex jc-start ai-center" style="height:100rpx;">
  87.       <input maxlength="15" placeholder="请输入姓名" value="{
  88.     {interviewee}}" data-name="interviewee" bindblur="setInput"></input>
  89.     </view>
  90.   </view>
  92.   <view class="cu-form-group margin-top">
  93.     <view class="title d-flex">被访部门
  94.     </view>
  95.     <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="{
  96.     {index2}}" range="{
  97.     {organarray}}">
  98.       <view class="picker">
  99.         {
  100.     {organarray[visitOrganId]}}
  101.       </view>
  102.     </picker>
  103.   </view>
  105.   <button class='btn1' bindtap="bindViewTapsuccess" form-type="submit">完成</button>
  107. </form>

js

  1. // pages/addsign/addsign.js
  2. var util = require('../../utils/util.js');
  3. const app = getApp()
  4. Page({
  5.   /**
  6.    * 页面的初始数据
  7.    */
  8.   data: {
  9.     globalid: [],
  10.     array: ['男', '女'],
  11.     sex: 0,
  12.     visitCausearray: ['面试', '开会', '拜访顾客', '项目实施', '其他'],
  13.     visitCause: 0,
  14.     organarray: ['生产部', '运营部', '营销部'],
  15.     visitOrganId: 0,
  16.     date: '2021-06-01',
  17.     name: '',
  18.     phone: '',
  19.     idNumber: '',
  20.     subscribeTime: '',
  21.     visitCompany: '',
  22.     interviewee: '',
  23.     visitOrgan: '',
  24.     //日期选择器
  25.     minHour: 0,
  26.     maxHour: 24,
  27.     minDate: new Date(1990, 1, 1).getTime(),
  28.     maxDate: new Date(2099, 12, 31).getTime(),
  29.     currentDate: new Date().getTime(),
  30.     show: false,
  31.     currentChoose: ''
  32.   },
  33.   //日期选择器的处理
  34.   openPicker() {
  35.     this.setData({
  36.       show: true
  37.     })
  38.   },
  39.   onConfirm(e) {
  40.     this.setData({
  41.       show: false,
  42.       currentChoose: this.formatDate(new Date(e.detail))
  43.     })
  44.   },
  45.   onClose() {
  46.     this.setData({
  47.       show: false
  48.     })
  49.   },
  50.   onCancel() {
  51.     this.setData({
  52.       show: false
  53.     })
  54.   },
  55.   formatDate(date) {
  56.     let taskStartTime
  57.     if (date.getMonth() < 9) {
  58.       taskStartTime = date.getFullYear() + "-0" + (date.getMonth() + 1) + "-"
  59.     } else {
  60.       taskStartTime = date.getFullYear() + "-" + (date.getMonth() + 1) + "-"
  61.     }
  62.     if (date.getDate() < 10) {
  63.       taskStartTime += "0" + date.getDate()
  64.     } else {
  65.       taskStartTime += date.getDate()
  66.     }
  67.     taskStartTime += " " + date.getHours() + ":" + date.getMinutes()
  68.     this.setData({
  69.       taskStartTime: taskStartTime,
  70.     })
  71.     return taskStartTime;
  72.   },
  74.   //男女
  75.   bindPickerChange: function(e) {
  76.     console.log('picker发送选择改变，携带值为', e.detail.value)
  77.     this.setData({
  78.       sex: e.detail.value
  79.     })
  80.   },
  82.   //来访事由
  83.   bindPickerChangeCause: function(e) {
  84.     console.log('picker发送选择改变，携带值为', e.detail.value)
  85.     this.setData({
  86.       visitCause: e.detail.value
  87.     })
  88.   },
  89.   //部门
  90.   bindPickerOrgan: function(e) {
  91.     console.log('picker发送选择改变，携带值为', e.detail.value)
  92.     this.setData({
  93.       visitOrganId: e.detail.value
  94.     })
  95.   },
  97.   /**
  98.    * 生命周期函数--监听页面加载
  99.    */
  100.   onLoad: function(options) {
  101.     // 调用函数时，传入new Date()参数，返回值是日期和时间
  102.     var time = util.formatTime(new Date());
  103.     this.setData({
  104.       currentChoose: time
  105.     });
  106.   },
  107.   setInput: function(e) {
  108.     const {
  109.       name
  110.     } = e.target.dataset
  111.     this.data[name] = e.detail.value
  113.     this.setData(this.data)
  114.   },
  115.   confirmPublish: function() {
  117.     var that = this
  119.     const data = {}
  120.     data.name = this.data.name
  121.     data.sex = this.data.sex
  122.     data.phone = this.data.phone
  123.     data.idNumber = this.data.idNumber
  124.     data.subscribeTime = this.data.currentChoose
  125.     data.visitCause = this.data.visitCause
  126.     data.visitCompany = this.data.visitCompany
  127.     data.interviewee = this.data.interviewee
  128.     data.visitOrgan = this.data.visitOrgan
  130.     data.visitOrganId = this.data.visitOrganId
  131.     console.log(JSON.stringify(data))
  134.     wx.request({
  135.       url: 'http://192.xxx.4.1xx:8093/cs-applet/subscribe/addCallerSubscribe',
  136.       method: 'POST',
  137.       data: data,
  138.       header: {
  139.         'content-type': 'application/json',
  140.       },
  141.       success: function(res) {
  143.       },
  144.       fail: function(error) {
  145.         wx.showToast({
  146.           title: error.message || '保存失败'
  147.         })
  148.         console.log(error)
  149.       }
  150.     })
  151.   },
  152. })

css

  1. /* 确认发布的按钮 */
  3. .btn1 {
  4.   width: 90%;
  5.   margin-top: 70rpx;
  6.   margin-bottom: 70rpx;
  7.   background-color: #09bb07;
  8.   color: white;
  9.   font-size: 33rpx;
  10.   border-radius: 13rpx;
  11.   display: flex;
  12.   flex-direction: row;
  13.   align-items: center;
  14.   justify-content: center;
  15. }
  17. .d-flex {
  18.   display: flex;
  19. }
  21. .cu-form-group .title {
  22.   text-align: justify;
  23.   padding-right: 30rpx;
  24.   font-size: 30rpx;
  25.   position: relative;
  26.   height: 60rpx;
  27.   line-height: 60rpx;
  28. }
  30. .cu-form-group {
  31.   background-color: var(--white);
  32.   padding: 1rpx 30rpx;
  33.   display: flex;
  34.   align-items: center;
  35.   min-height: 100rpx;
  36.   justify-content: space-between;
  37. }
  39. .borderBottom {
  40.   border-bottom: 1rpx solid #eee;
  41. }
  43. .ai-center {
  44.   align-items: center;
  45. }
  47. .jc-start {
  48.   justify-content: flex-start;
  49. }
  51. .flex-1 {
  52.   flex: 1;
  53. }
  55. .cu-form-group input {
  56.   flex: 1;
  57.   font-size: 30rpx;
  58.   color: #555;
  59.   padding-right: 20rpx;
  60. }

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

e896b9da0d77839c5dde9462ce99874e.png

发表评论

表情：
评论列表 （有 0 条评论，250人围观）

还没有评论，来说两句吧...

相关阅读

    相关 微信小程序表单验证

    由于微信小程序表单组件没有自带的验证功能，因此要针对每一项进行判断比较繁琐 因此封装了一个表单验证js, 具体验证规则根据自己所用到的进行添加,具体案例代码片段点击链接[微信小

    心已赠人心已赠人/ 0 赞/ 27 阅读