小程序新请假界面

小程序新请假界面

效果:

.wxml:

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

<view class="main {{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 {
  color: #30d1ff;
}

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

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

.main {
  position: absolute;
  width: 100%;
  height: 100%;
  display: block;
  box-sizing: border-box;
  padding-top: 100rpx;
  top: 0;
}

.show {
  display: block;
  text-align: center;
}

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

/* 新请假 */

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

.uploaderpic {
  width: 168rpx;
  height: 168rpx;
  margin-top: 10rpx;
  border-radius: 10rpx;
}

.add-icon {
  position: absolute;
  font-size: 105rpx;
  top: -23rpx;
  left: 50rpx;
  color: #a3a3a3;
}

.title {
  position: absolute;
  bottom: 30rpx;
  left: 32rpx;
  color: #a3a3a3;
  font-size: 28rpx;
}

.upload-img {
  width: 95%;
  height: 95%;
  border-radius: 10rpx;
}

.bg {
  margin: 40rpx;
  background-color: #fff;
  border: 2rpx dotted #ccc;
  border-radius: 15rpx;
  height: 100%;
}

.item {
  display: flex;
  flex-direction: row;
  font-size: 30rpx;
  margin: 25rpx;
  align-items: center;
}

.btn {
  background-color: #79caff;
  color: #fff;
  width: 120rpx;
  font-size: 30rpx;
  margin-top: 30rpx;
}

.bk {
  border-radius: 10rpx;
  border: 2rpx solid #ccc;
  padding: 10rpx;
  width: 65%;
}

.js

var dateTimePicker = require('../../utils/dateTimePicker.js');
var util = require('../../utils/util.js');
Page({
  // 页面的初始数据
  data: {
    date: '',
    date1: '',
    selected: true,
    selected1: false,
    articles: [],
    upload: true,
    files: [],
    sum: 0,
  },
  //  上传图片
  previewImage: function() {
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'], // 可以指定是原图还是压缩图
      sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
      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
        });

      }
    })
  },

  // 删除图片
  delete: function(e) {
    let index = e.currentTarget.dataset.index
    let files = this.data.files
    files.splice(index, 1)
    this.setData({
      files: files
    })
    if (this.data.files.length == 0) {
      this.setData({
        upload: true,
        sum: 0
      })
    }
  },
  // 保存
  formSubmit: function(e) {
    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) {
        console.log("绑定", res);
        wx.showModal({
          title: '提示',
          content: res.data.msg,
          showCancel: false,
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
          }
        })
      },
      fail: function(fail) {
        wx.showModal({
          title: '提示',
          content: '输入有误,请重新输入',
          showCancel: false,
          success: function(res) {
            if (res.confirm) {
              console.log('用户点击确定');
            }
          }
        })
      }
    })
  },
  // 时间
  changeDate(e) {
    this.setData({
      date: e.detail.value,
    });
  },
  changeDate1(e) {
    this.setData({
      date1: e.detail.value,
    });
  },
  // 生命周期函数--监听页面加载
  onLoad: function(options) {
    // 获取当天时间
    var that = this;
    var time = util.formatTime(new Date()).substring(0, 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.startYear, this.data.endYear);
    // 精确到分的处理，将数组的秒去掉
    var lastArray = obj1.dateTimeArray.pop();
    var lastTime = obj1.dateTime.pop();
  },
  selected: function(e) {
    this.setData({
      selected1: false,
      selected: true
    })
  },

  selected1: function(e) {
    this.setData({
      selected: false,
      selected1: true
    })
  },
  // 生命周期函数--监听页面初次渲染完成
  onReady: function() {

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

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

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

  },
})

.json

{
  "navigationBarTitleText": "请假"
}

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

结语

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