小程序新请假界面

效果:

.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 点赞