内容简介:小程序新请假界面效果:
小程序新请假界面
效果:
.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 点赞
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:- 计算请假天数JavaScript方法
- 然之协同 4.7.stable 发布,请假新增年假天数设置功能
- JBPM 7.17 学习笔记(9)用spring boot+jbpm 实现请假流程
- CentOS 图形界面和字符界面切换
- GUI 界面如何设计?
- webflux 用户管理界面
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。