小程序新请假界面

小程序新请假界面

效果:

.wxml:

<view class="head">
  <"head_item {{selected?'head_itemActive':''}}" bindtap="selected">新请假</view>
  <"ring"></{{selected1?'head_itemActive':''}'selected1'>请假结果</view>
</view>
<"main {{selected?'show':'hidden'}}">
  <form bindsubmit="formSubmit">
    <'bg'>
      <'item'>
        上传图片：
        <'uploaderpic' wx:for="{{files}}" wx:key={{index}}">
          <image src='{{item}}' class='upload-img'></image>
        </view>
        <'uploader' wx:if={{upload}"previewImage">
          <'add-icon'>+</view>
          <'title'>添加图片</view>
        </button class='btn' bindtap='delete'>删除</button>
      </view>
      <'item'>
        rnrnrnrnrnrn年级：
        <input name='gradeName' placeholder="请输入年级" maxlength='15' class='bk' />
      </'item'>
        rnrnrnrnrnrn班级：
        <'className' placeholder="请输入班级" maxlength='item'>
        rnrnrnrnrnrn学号：
        <'studentNo' placeholder="请输入学号" maxlength='item'>
        请假天数：
        <'leaveDays' placeholder="请输入请假天数" maxlength='item'>
        开始时间：
        <'bk'>
          <picker mode="date" value={{date}}" bindchange="changeDate" name="startTime" bindchange="changeDate">
            {{date}}
          </picker>
        </view>
      </'item'>
        结束时间：
        <{{date1}"changeDate1" name="endTime" start=}">
            {{date1}}
          </'item'>
        请假类型：
        <'leaveType' placeholder="病假输1/事假输2" maxlength='15' type="number" />
        </'item'>
        请假理由：
        <"leaveReason" placeholder="请输入请假理由" maxlength='500' auto-height/>
        </'btn' formType="submit">提交</button>
    </view>
  </form>
</view>

<{{selected1?'show':'hidden'}}">
 达叔小生
</view>

.wxss:

Page {
  background-color: #f1f1f1;
}

.head_item {
  width: 374rpx;
  text-align: center;
  font-size: 34rpx;
  color: #999;
  letter-spacing: 0;
}

.head_itemActive {
  #30d1ff;
}

.ring {
  2rpx;
  height: 100%;
  background-color: rgba(204,204,1);
}

.head {
  100rpx;
  rgba(255,255,1);
  border-bottom: 1rpx solid display: flex;
  align-items: center;
  justify-content: space-between;
  position: fixed;
  top: 0;
  z-index: 10;
}

.main {
  position: absolute;
  display: block;
  box-sizing: border-box;
  padding-top: .show {
  text-align: center;
}

.hidden {
  display: none;
  text-align: center;
}

/* 新请假 */

.uploader {
  position: relative;
  168rpx;
  background: #f0f0f2;
  border-radius: 10rpx;
}

.uploaderpic {
  margin-top: 10rpx;
  .add-icon {
  105rpx;
  top: -23rpx;
  left: 50rpx;
  #a3a3a3;
}

.title {
  bottom: 30rpx;
  32rpx;
  #a3a3a3;
  28rpx;
}

.upload-img {
  95%;
  .bg {
  margin: 40rpx;
  #fff;
  border: 2rpx dotted #ccc;
  15rpx;
  100%;
}

.item {
  flex-direction: row;
  25rpx;
  align-items: center;
}

.btn {
  #79caff;
  120rpx;
  30rpx;
}

.bk {
  2rpx solid padding: 65%;
}

.js

var dateTimePicker = require('../../utils/dateTimePicker.js');
var util = '../../utils/util.js');
Page({
  // 页面的初始数据
  data: {
    date: '',date1: selected: true,selected1: false,articles: [],upload: files: [],sum: 0,},//  上传图片
  previewImage: function() {
    wx.chooseImage({
      count: 1,sizeType: ['compressed'],136);">// 可以指定是原图还是压缩图
      sourceType: ['album','camera'],136);">// 可以指定来源是相册还是相机，默认二者都有
      success: (res) => {
        console.log(res) // 打印输出返回值
        let files = this.data.files
        files.push(res.tempFilePaths[0]) // 把图片地址push到数组中
        let sum = this.data.sum
        sum++ // 开始计数
        this.setData({
          sum: sum
        })
        if (this.data.sum == 1) { 
          this.setData({
            upload: false
          })
        }
        // tempFilePath可以作为img标签的src属性显示图片
        this.setData({
          files: files
        });

      }
    })
  },136);">// 删除图片
  delete: function(e) {
    let index = e.currentTarget.dataset.index
    this.data.files
    files.splice(index,1)
    this.setData({
      files: files
    })
    this.data.files.length == 0) {
      this.setData({
        upload: 0
      })
    }
  },136);">// 保存
  formSubmit: var that = this;
    console.log('form发生了submit事件，携带数据为：',e.detail.value);
    let data = e.detail.value;
    if (that.data.files[0] !== null) {
      data.certificate = that.data.files[0];
    }
    console.log(data);
    wx.request({
      url: '####',method: 'POST',data: JSON.stringify(data),header: {
        'Authorization': 'Bearer' + wx.getStorageSync('token'),success(res) {
        "绑定",res);
        wx.showModal({
          title: '提示',content: res.data.msg,showCancel: success: function(res) {
            if (res.confirm) {
              '用户点击确定');
            }
          }
        })
      },fail: function(fail) {
        wx.showModal({
          title: content: '输入有误,请重新输入',0);">'用户点击确定');
            }
          }
        })
      }
    })
  },136);">// 时间
  changeDate(e) {
    this.setData({
      date: e.detail.value,});
  },changeDate1(e) {
    this.setData({
      date1: e.detail.value,136);">// 生命周期函数--监听页面加载
  onLoad: function(options) {
    // 获取当天时间
    this;
    var time = util.formatTime(new Date()).substring(10);
    console.log(time)
    that.setData({
      date: time,date1: time,});
    // 获取完整的年月日 时分秒，以及默认显示的数组
    var obj = dateTimePicker.dateTimePicker(this.data.startYear,this.data.endYear);
    var obj1 = dateTimePicker.dateTimePicker(this.data.endYear);
    // 精确到分的处理，将数组的秒去掉
    var lastArray = obj1.dateTimeArray.pop();
    var lastTime = obj1.dateTime.pop();
  },selected: this.setData({
      selected1: true
    })
  },selected1: this.setData({
      selected: // 生命周期函数--监听页面初次渲染完成
  onReady: function() {

  },136);">// 生命周期函数--监听页面显示
  onShow: // 生命周期函数--监听页面隐藏
  onHide: // 生命周期函数--监听页面卸载
  onUnload: .json

{
  "navigationBarTitleText": "请假"
}
往后余生，唯独有你
简书作者：达叔小生
90后帅气小伙，良好的开发习惯；独立思考的能力；主动并且善于沟通
简书博客：?https://www.jianshu.com/u/c785ece603d1
结语

下面我将继续对 其他知识 深入讲解 ，有兴趣可以继续关注
小礼物走一走 or 点赞