小程式新請假介面

小程式開發 · 發表 2018-12-04 20:50:29

摘要：標題圖小程式新請假介面效果: 效果圖 .wxml: <view class="head"> <view class="head_item {{s...

標題圖

小程式新請假介面

效果:

效果圖

.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後帥氣小夥，良好的開發習慣；獨立思考的能力；主動並且善於溝通

簡書部落格： ofollow,noindex">https://www.jianshu.com/u/c785ece603d1

結語

下面我將繼續對其他知識深入講解，有興趣可以繼續關注
小禮物走一走 or 點贊

小程式新請假介面

結語

您可能也會喜歡…