vant小程序实现表单提交（时间组件，弹出层组件）

2023-10-30 21:47:34

1.add.wxml

<!--pages/projectadd/add.wxml-->
<view class="container">
  <view class="common-header-xian"></view>
  
  <!-- 表单 -->
  <form bindreset="formReset" bindsubmit="saveData">
    <view class="address-cont-title b-f b-b">

    <view class="list address-box dis-flex b-b">
        <view class="left-name">
          <text class="f-30">项目类别</text>
        </view>
        <view class="right-cont dis-flex">
          <input  disabled="disabled"  value="{{catename}}"></input>
          <input name="cate" disabled="disabled" style="display:none" value="{{cateid}}"></input>
          <input name="openid" disabled="disabled" style="display:none" value="{{openid}}"></input>
     
        </view>
      </view>

      <view class="list address-box dis-flex b-b">
        <view class="left-name">
          <text class="f-30">项目标题</text>
        </view>
        <view class="right-cont dis-flex">
          <input name="title" placeholder="请输入项目标题" value=""></input>
        </view>
      </view>


       <view class="list address-box dis-flex b-b"  bindtap="showPopup">
        <view class="left-name">
          <text class="f-30">起始时间</text>
        </view>
        <view class="right-cont dis-flex" >
          <input name="start_date" placeholder="请设置起始时间" value="{{start_date}}"></input>
        </view>
      </view>
     

        <view class="list address-box dis-flex b-b" bindtap="showPopup1">
        <view class="left-name">
          <text class="f-30">结束时间</text>
        </view>
        <view class="right-cont dis-flex">
          <input name="end_date" placeholder="请设置结束时间" value="{{end_date}}"></input>
        </view>
      </view>
       <view class="list address-box dis-flex b-b">
        <view class="left-name">
          <text class="f-30">项目描述</text>
        </view>
        <view class="right-cont dis-flex">
          <input name="desc" placeholder="请输入项目描述" value=""></input>
        </view>
      </view>
      
   
    </view>




    <view class="padding-box m-top35 profile-btn">
      <button formType="submit" disabled="{{disabled}}">保存</button>
    </view>


  </form>

<!--start时间选择-->
<van-popup show="{{ show }}" bind:close="onClose"  position="bottom">
  <view>
  <van-datetime-picker
  type="date"
  value="{{ currentDate }}"
  bind:input="onInput"
  min-date="{{ minDate }}"
  formatter="{{ formatter }}"
  bind:confirm="confirmFn"
  bind:cancel="cancelFn"
/>
  </view>
</van-popup>
<!--时间选择-->

<!--end时间选择-->
<van-popup show="{{ show1 }}" bind:close="onClose"  position="bottom">
  <view>
  <van-datetime-picker
  type="date"
  value="{{ currentDate1 }}"
  bind:input="onInput1"
  min-date="{{ minDate }}"
  formatter="{{ formatter }}"
  bind:confirm="confirmFn1"
  bind:cancel="cancelFn"
/>
  </view>
</van-popup>
<!--时间选择-->
</view>

View Code

2.add.js

// pages/projectadd/add.js
let App = getApp();
import { Base } from ‘../../utils/base.js‘
const util = require(‘../../utils/util.js‘)
var base = new Base();
Page({

  /**
   * 页面的初始数据
   */
  data: {
    catename:‘‘,
    cateid:‘‘,
    openid:null,
    display: false,
    show: false,
    show1: false,
    currentDate: new Date().getTime(),//初始日期//时间戳补3位
    currentDate1: new Date().getTime(),//初始日期//时间戳补3位
    minDate: App.globalData.minDate,//最小时间
    maxDate: App.globalData.maxDate,//最大时间
    //时间-显示赋值
    formatter(type, value) {
      if (type === ‘year‘) {
        return `${value}年`;
      } else if (type === ‘month‘) {
        return `${value}月`;
      } else if (type === ‘day‘) {
        return `${value}日`;
      }
      return value;
    }
  },
  //时间-当值变化时触发的事件start
  onInput(event) {
    var newTime = new Date(event.detail);
    if(this.data.show==0){
      newTime =null;
    }else{
      //console.log(event.detail);
      newTime = util.formatTime(newTime);
    }
    this.setData({
      currentDate: event.detail,
      start_date: newTime,
    });
  },
  //时间-当值变化时触发的事件end
  onInput1(event) {
    var etime = event.detail+(86400-1)*1000;
    var newTime = new Date(etime);
    if (this.data.show1 == false) {
      newTime = null;
    } else {
      //console.log(event.detail);
      newTime = util.formatTime(newTime);
    }

    //console.log(newTime);
    this.setData({
      currentDate1: event.detail,
      end_date: newTime,
     // key1:1,
    });
  },
  //时间-弹出框
  showPopup() {
    this.setData({ key: 1 });
    this.setData({ show: true });
   
  },
  //时间-弹出框
  showPopup1() {
    this.setData({ key1: 1 });
    this.setData({ show1: true });
  
  },
  //时间-弹出框关闭
  onClose() {
    this.setData({ show: false });
    this.setData({ show1: false });
  },
  // 时间-确定按钮
  confirmFn(e) {
    var newTime = new Date(e.detail);
    newTime = util.formatTime(newTime);
    this.setData({ start_date: newTime });
   //console.log(e.detail);
    this.setData({ show: false });
  
  },
  // 时间-确定按钮
  confirmFn1(e) { 
    var newTime = new Date(e.detail);
    newTime = util.formatTime(newTime);
    this.setData({ end_date: newTime });
    this.setData({ show1: false });
  },
  // 时间-取消按钮
  cancelFn() { 
    this.setData({ show: false });
    this.setData({ show1: false });
  },
  
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options);
    let _this = this;
    let openid = App.hasOpenid()
    _this.setData({
      catename : options.catename,
      cateid : options.cateid,
      openid: openid
    });

  },

  /**
   * 表单提交
   */
  saveData: function (e) {
    let _this = this;
    let values = e.detail.value;
    //console.log(values);
   
    // 表单验证
    if (!_this.validation(values)) {
      App.showError(_this.data.error);
      return false;
    }
   // return false;
    // 按钮禁用
    _this.setData({
      disabled: true
    });

    // 提交到后端
    App._post(‘index/project/add_project‘, values, function (result) {
      App.showSuccess(result.msg, function () {
          //wx.navigateBack();
          // 跳转授权页面
          wx.switchTab({
            url: "/pages/projectadd/projectadd"
          });
      });
    }, false, function () {
      // 解除禁用
      _this.setData({
        disabled: false
      });
    });
  },

  /**
   * 表单验证
   */
  validation: function (values) {

    if (values.title.length < 1) {
      this.data.error = ‘项目标题不能为空‘;
      return false;
    }
    if (values.start_date.length < 1) {
      this.data.error = ‘项目起始时间不能为空‘;
      return false;
    }
    if (values.end_date.length < 1) {
      this.data.error = ‘项目起始时间不能为空‘;
      return false;
    }
    /* reg = /^(((13[0-9]{1})|(15[0-9]{1})|(18[0-9]{1})|(17[0-9]{1}))+\d{8})$/;
    if (!reg.test(values.phone)) {
      this.data.error = ‘手机号不符合要求‘;
      return false;
    }*/

    return true;
  },


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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

View Code

3.add.json

{
  "usingComponents": {
    "van-datetime-picker": "vant-weapp/datetime-picker",
    "van-popup": "vant-weapp/popup"
  },
  "navigationBarTitleText": "添加项目"
}

4.add.wxss

/* pages/projectadd/add.wxss */
.profile-list .admin {
  padding-left: 15px;
  font-size: 30rpx;
  color: #333;
}

.address-box .left-name {
  width: 85px;
}

.address-cont-title .list {
  width: auto;
  padding: 24rpx;
}

.tui-picker-detail text {
  padding: 0 10rpx;
}

.infoText {
  line-height: 56rpx;
  display: block;
}

picker-view {
  background-color: white;
  padding: 0;
  width: 100%;
  height: 480rpx;
  bottom: 0;
  position: fixed;
}

picker-view-column view {
  vertical-align: middle;
  font-size: 28rpx;
  line-height: 28rpx;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.animation-element-wrapper {
  display: flex;
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
  z-index: 21;
}

.animation-element {
  display: flex;
  position: fixed;
  width: 100%;
  height: 570rpx;
  bottom: 0;
  background-color: rgba(255, 255, 255, 1);
}

.animation-button {
  margin-top: 20rpx;
  top: 20rpx;
  width: 400rpx;
  height: 100rpx;
  line-height: 100rpx;
  align-items: center;
}

.address-text {
  color: #999;
  display: inline-flex;
  position: fixed;
  margin-top: 20rpx;
  height: 50rpx;
  text-align: center;
  line-height: 50rpx;
  font-size: 30rpx;
  font-family: Arial, Helvetica, sans-serif;
}

.left-bt {
  left: 30rpx;
}

.right-bt {
  right: 30rpx;
  color: #ec5151;
}

.line {
  display: block;
  position: fixed;
  height: 1rpx;
  width: 100%;
  margin-top: 89rpx;
  background-color: #eee;
}

.address-box .right-cont input {
  width: 100%;
  font-size: 30rpx;
  color: #444;
}

.profile-btn button {
  background: #ff495e;
  color: white;
}

.bargain-commont-bg {
  background: rgba(0, 0, 0, 0.6);
  position: fixed;
  right: 0;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 20;
}

.bright789_view_hide {
  display: none;
}

.bright789_view_show {
  display: block;
}

.f-34 {
  font-size: 34rpx;
}

.f-32 {
  font-size: 32rpx;
}

.f-31 {
  font-size: 31rpx;
}

.f-28 {
  font-size: 28rpx;
}

.f-26 {
  font-size: 26rpx;
}

.f-24 {
  font-size: 24rpx;
}

.f-22 {
  font-size: 22rpx;
}

.b-r {
  border-right: 1rpx solid #eee;
}

.b-b {
  border-bottom: 1rpx solid #eee;
}

.b-t {
  border-top: 1rpx solid #eee;
}

.m-top4 {
  margin-top: 4rpx;
}

.m-top10 {
  margin-top: 10rpx;
}

.m-top20 {
  margin-top: 25rpx;
}

.m-top35 {
  margin-top: 35rpx;
}

View Code

vant小程序实现表单提交（时间组件，弹出层组件）

码农公寓

相关文章