小程序表单提交功能实现

作为一个小企业开发人员，经常被领导要求开发这个开发那个，我掰着手指头数了数，开发生涯大致是这样的：
C++》php》前端》C#》golang》小程序
真是命运坎坷啊！
这不又来指挥我向小程序进军了，咱也不甘示弱，只要money到位了，下海都行、写汇编也可以试试！

说实话以前一直写jquery，最近才搞vue,对于vue和小程序这类的数据绑定有点不适应，可能以后会慢慢喜欢上吧。

一、实现效果图

二、代码

• wxml文件

<view class="container">
  <form bindsubmit="formSubmit">
    <input hidden="true" type="hidden"  name="openid" value="{{openid}}"></input>
    <input hidden="true" type="hidden"  name="id" value="{{id}}"></input>
    <view class="bg-fff p-lr30 border-t">
      <view class="ipt-wrap border-b flex ai-center">
        <label for="" class="font14">主题</label>
        <input type="text" class="ml40 flex1" placeholder="请输入日程主题" name="title" value="{{title}}"></input>
      </view>
      <view class="ipt-wrap border-b">
        <textarea id="" class="textarea _w100 p-tb30 lh10 content_text" maxlength="-1" placeholder="备注" name="remark" value="{{remark}}"></textarea>
      </view>
    </view>

    <!-- 起始时间 -->
    <view class="section  bg-fff p30 flex ai-center jc-sb ">
      <view class="section__title">开始时间</view>
      <picker mode="date"  name="start_date" value="{{start_date}}"  bindchange="bindStartDateChange">
        <view class="picker">
          {{start_date}}
        </view>
      </picker>|
      <picker 
      mode="time" 
      name="start_time" 
      value="{{start_time}}"  
      bindchange="bindStartTimeChange"
      >
        <view class="picker">
          {{start_time}}
        </view>
      </picker>
    </view>


    <!-- 结束时间 -->
    <view class="section  bg-fff p30 flex ai-center jc-sb ">
      <view class="section__title">结束时间</view>
      <picker mode="date" value="{{end_date}}" name="end_date" bindchange="bindEndDateChange">
        <view class="picker">
          {{end_date}}
        </view>
      </picker>|
      <picker 
      mode="time" 
      name="end_time" 
      value="{{end_time}}" 
      bindchange="bindEndTimeChange" >
        <view class="picker">
          {{end_time}}
        </view>
      </picker>
    </view>

    <view class="section bg-fff p30 flex ai-center jc-sb ">
      <view class="section__title">分类</view>
      <picker mode="selector" bindchange="bindPickerChange" name="note_type" value="{{index}}" range="{{select}}">
        <view class="picker">
          {{select[select_index]}}
        </view>
      </picker>
    </view>

    <view class=" bg-fff p30 flex ai-center jc-sb ">
      <view class="flex ai-center">
        <label for="" class="font14">是否已完成</label>
      </view>
      <view class="flex">
        <switch class="switch" name="is_done" color="#279efd"></switch>
      </view>
    </view>

    <view class="combtn font16 color-fff _w100 bg-btn">
      <button  class="mini-btn transbg font16  _w100 " form-type='submit'>保存</button>
    </view>
  </form>
</view>

• js文件

//const moment = require("../../utils/moment.min");
const moment = require("../../utils/moment.min");
moment.locale('en', {
  // longDateFormat: {
  //   l: "YYYY-MM-DD",
  //   L: "YYYY-MM-DD HH:mm"
  // },
  week: {
    dow: 1, //星期的第一天是星期一
    doy: 7 //年份的第一周必须包含1月1日（7+1-1）
  } //定义一周第一天为周一，包含1月1日的周计作该年的第一周
});
// pages/note/add.js
const app = getApp();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    start_date: moment().format("YYYY-MM-DD"),
    end_date: moment().format("YYYY-MM-DD"),
    start_time: moment().format("HH:mm"),
    end_time: moment().add(1, "h").format("HH:mm"),
    list: [],
    select: ['工作日记', '备忘录', '工作计划'],
    select_index: 0,
    remark: "",
    title: "",
    openid: "",
    id: ""
  },
  formSubmit: function (e) {
    //console.log(e.detail)
    var data = e.detail.value
    if (data.title == "") {
      wx.showToast({
        title: '主题不能为空！',
        image: '../../images/icon/warin.png'
      })
      return false;
    }
    wx.request({
      url: 'https://sxxxxxx.com/api/note/add',
      data: data,
      method: 'post',
      dataType: 'json',
      success: function (e) {
        wx.showToast({
          title: '添加成功',
          icon: 'success',
          image: '../../images/icon/success.png',
          duration: 10000,
          complete: res => {
            setTimeout(function () {
              // wx.redirectTo({
              // url: './index'
              // })
              //navigateTo
              wx.reLaunch({
                url: './index'
              })
            }, 2000)
          }
        })

      },
      complete: function () {
        // setTimeout(function () {
        //   wx.hideToast()
        // }, 800)

      }

    })

  },
  bindPickerChange(e) {
    //console.log('分类发送选择改变，携带值为', e.detail)
    this.setData({
      select_index: e.detail.value
    })

  },

  bindStartTimeChange: function (e) {
    this.setData({
      start_time: e.detail.value
    })
  },
  bindEndTimeChange: function (e) {
    this.setData({
      end_time: e.detail.value
    })
  },
  bindStartDateChange: function (e) {
    this.setData({
      start_date: e.detail.value
    })
  },
  bindEndDateChange: function (e) {
    this.setData({
      end_date: e.detail.value
    })
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log("请求参数为：", options)
    var id = options.id || "";
    if (id != "") {
      //根据id去获取数据库中的记录
      wx.request({
        url: 'https://sxxxxxx.com/api/note/getNoteInfo',
        method: 'post',
        data: {
          'id': id
        },
        success: res => {
          console.log("获取用户数据成功了！", res)
          let tmpData = res.data;
          if (tmpData.code == '1') {
            console.log("获取用户数据成功了！", tmpData)
            this.setData({
              start_date: tmpData.data.start_date,
              end_date: tmpData.data.end_date,
              start_time: tmpData.data.start_time,
              end_time: tmpData.data.end_time,
              title: tmpData.data.title,
              remark: tmpData.data.remark,
              openid: tmpData.data.openid,
              id: tmpData.data.id,
            })
          } else {
            console.log("获取用户数据失败！")
          }
        }
      })
    } else {
      this.setData({
        openid: wx.getStorageSync('openid')
      })
    }
    wx.setNavigationBarTitle({
      title: '日报添加',
    })

  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }
})

• wxss文件

/*  */
.ipt-wrap{
  min-height: 100rpx;
  line-height: 100rpx;
}
.ipt-wrap label{
  min-width: 120rpx;
}
.icon-youjiantou{
  position: relative;
  top: 1rpx;
}
.textarea{
  height: 100rpx;
}
/*swtich样式-start*/
/*swtich整体大小*/
.wx-switch-input{
  width:82rpx !important;
  height:40rpx !important;
}
/*白色样式（false的样式）*/
.wx-switch-input::before{
  width:80rpx !important;
  height: 36rpx !important;
}
/*绿色样式（true的样式）*/
.wx-switch-input::after{
  width: 40rpx !important;
  height: 36rpx !important;
}
.ipt-wrap:last-child{
  border-bottom:none;
}
/*swtich样式end*/
.region{
  width: 500rpx;
  position: absolute;
  left: 150rpx;
}

.transbg{
  background: rgba(0,0,0,0) !important;
  font-size: 45rpx;
  font-family: 'Courier New', Courier, monospace;
  color: aliceblue;
}
.content_text{
  min-height: 200rpx;
  border: 2rpx dashed blanchedalmond;
}