小程序新請假界面

小程序新請假界面

效果:

.wxml:

新請假請假結果
        上傳圖片：
        +添加圖片刪除
      
        \r\n\r\n\r\n\r\n\r\n\r\n年級：
        
        \r\n\r\n\r\n\r\n\r\n\r\n班級：
        
        \r\n\r\n\r\n\r\n\r\n\r\n學號：
        
        請假天數：
        
        開始時間：
        
            {{date}}
          
        結束時間：
        
            {{date1}}
          
        請假類型：
        
        請假理由：
        提交
    
 達叔小生

.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 點贊

以上就是本文的全部內容，希望本文的內容對大家的學習或者工作能帶來一定的幫助，也希望大家多多支持 我們