经验首页 前端设计 程序设计 Java相关 移动开发 数据库/运维 软件/图像 大数据/云计算 其他经验
当前位置:技术经验 » 移动开发 » 微信小程序 » 查看文章
小程序新请假界面
来源:cnblogs  作者:达叔小生  时间:2018/12/5 9:29:30  对本文有异议

标题图

小程序新请假界面

效果:

效果图

.wxml:

  1. <view class="head">
  2. <view class="head_item {{selected?'head_itemActive':''}}" bindtap="selected">新请假</view>
  3. <view class="ring"></view>
  4. <view class="head_item {{selected1?'head_itemActive':''}}" bindtap='selected1'>请假结果</view>
  5. </view>
  6. <view class="main {{selected?'show':'hidden'}}">
  7. <form bindsubmit="formSubmit">
  8. <view class='bg'>
  9. <view class='item'>
  10. 上传图片:
  11. <view class='uploaderpic' wx:for="{{files}}" wx:key="{{index}}">
  12. <image src='{{item}}' class='upload-img'></image>
  13. </view>
  14. <view class='uploader' wx:if="{{upload}}" bindtap="previewImage">
  15. <view class='add-icon'>+</view>
  16. <view class='title'>添加图片</view>
  17. </view>
  18. <button class='btn' bindtap='delete'>删除</button>
  19. </view>
  20. <view class='item'>
  21. \r\n\r\n\r\n\r\n\r\n\r\n年级:
  22. <input name='gradeName' placeholder="请输入年级" maxlength='15' class='bk' />
  23. </view>
  24. <view class='item'>
  25. \r\n\r\n\r\n\r\n\r\n\r\n班级:
  26. <input name='className' placeholder="请输入班级" maxlength='15' class='bk' />
  27. </view>
  28. <view class='item'>
  29. \r\n\r\n\r\n\r\n\r\n\r\n学号:
  30. <input name='studentNo' placeholder="请输入学号" maxlength='15' class='bk' />
  31. </view>
  32. <view class='item'>
  33. 请假天数:
  34. <input name='leaveDays' placeholder="请输入请假天数" maxlength='15' class='bk' />
  35. </view>
  36. <view class='item'>
  37. 开始时间:
  38. <view class='bk'>
  39. <picker mode="date" value="{{date}}" bindchange="changeDate" name="startTime" bindchange="changeDate">
  40. {{date}}
  41. </picker>
  42. </view>
  43. </view>
  44. <view class='item'>
  45. 结束时间:
  46. <view class='bk'>
  47. <picker mode="date" value="{{date1}}" bindchange="changeDate1" name="endTime" start="{{date}}">
  48. {{date1}}
  49. </picker>
  50. </view>
  51. </view>
  52. <view class='item'>
  53. 请假类型:
  54. <view class='bk'>
  55. <input name='leaveType' placeholder="病假输1/事假输2" maxlength='15' type="number" />
  56. </view>
  57. </view>
  58. <view class='item'>
  59. 请假理由:
  60. <view class='bk'>
  61. <input name="leaveReason" placeholder="请输入请假理由" maxlength='500' auto-height/>
  62. </view>
  63. </view>
  64. <button class='btn' formType="submit">提交</button>
  65. </view>
  66. </form>
  67. </view>
  68. <view class="main {{selected1?'show':'hidden'}}">
  69. 达叔小生
  70. </view>

.wxss:

  1. Page {
  2. background-color: #f1f1f1;
  3. }
  4. .head_item {
  5. width: 374rpx;
  6. text-align: center;
  7. font-size: 34rpx;
  8. color: #999;
  9. letter-spacing: 0;
  10. }
  11. .head_itemActive {
  12. color: #30d1ff;
  13. }
  14. .ring {
  15. width: 2rpx;
  16. height: 100%;
  17. background-color: rgba(204, 204, 204, 1);
  18. }
  19. .head {
  20. width: 100%;
  21. height: 100rpx;
  22. background-color: rgba(255, 255, 255, 1);
  23. border-bottom: 1rpx solid rgba(204, 204, 204, 1);
  24. display: flex;
  25. align-items: center;
  26. justify-content: space-between;
  27. position: fixed;
  28. top: 0;
  29. z-index: 10;
  30. }
  31. .main {
  32. position: absolute;
  33. width: 100%;
  34. height: 100%;
  35. display: block;
  36. box-sizing: border-box;
  37. padding-top: 100rpx;
  38. top: 0;
  39. }
  40. .show {
  41. display: block;
  42. text-align: center;
  43. }
  44. .hidden {
  45. display: none;
  46. text-align: center;
  47. }
  48. /* 新请假 */
  49. .uploader {
  50. position: relative;
  51. width: 168rpx;
  52. height: 168rpx;
  53. background: #f0f0f2;
  54. border-radius: 10rpx;
  55. }
  56. .uploaderpic {
  57. width: 168rpx;
  58. height: 168rpx;
  59. margin-top: 10rpx;
  60. border-radius: 10rpx;
  61. }
  62. .add-icon {
  63. position: absolute;
  64. font-size: 105rpx;
  65. top: -23rpx;
  66. left: 50rpx;
  67. color: #a3a3a3;
  68. }
  69. .title {
  70. position: absolute;
  71. bottom: 30rpx;
  72. left: 32rpx;
  73. color: #a3a3a3;
  74. font-size: 28rpx;
  75. }
  76. .upload-img {
  77. width: 95%;
  78. height: 95%;
  79. border-radius: 10rpx;
  80. }
  81. .bg {
  82. margin: 40rpx;
  83. background-color: #fff;
  84. border: 2rpx dotted #ccc;
  85. border-radius: 15rpx;
  86. height: 100%;
  87. }
  88. .item {
  89. display: flex;
  90. flex-direction: row;
  91. font-size: 30rpx;
  92. margin: 25rpx;
  93. align-items: center;
  94. }
  95. .btn {
  96. background-color: #79caff;
  97. color: #fff;
  98. width: 120rpx;
  99. font-size: 30rpx;
  100. margin-top: 30rpx;
  101. }
  102. .bk {
  103. border-radius: 10rpx;
  104. border: 2rpx solid #ccc;
  105. padding: 10rpx;
  106. width: 65%;
  107. }

.js

  1. var dateTimePicker = require('../../utils/dateTimePicker.js');
  2. var util = require('../../utils/util.js');
  3. Page({
  4. // 页面的初始数据
  5. data: {
  6. date: '',
  7. date1: '',
  8. selected: true,
  9. selected1: false,
  10. articles: [],
  11. upload: true,
  12. files: [],
  13. sum: 0,
  14. },
  15. // 上传图片
  16. previewImage: function() {
  17. wx.chooseImage({
  18. count: 1,
  19. sizeType: ['compressed'], // 可以指定是原图还是压缩图
  20. sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机,默认二者都有
  21. success: (res) => {
  22. console.log(res) // 打印输出返回值
  23. let files = this.data.files
  24. files.push(res.tempFilePaths[0]) // 把图片地址push到数组中
  25. let sum = this.data.sum
  26. sum++ // 开始计数
  27. this.setData({
  28. sum: sum
  29. })
  30. if (this.data.sum == 1) {
  31. this.setData({
  32. upload: false
  33. })
  34. }
  35. // tempFilePath可以作为img标签的src属性显示图片
  36. this.setData({
  37. files: files
  38. });
  39. }
  40. })
  41. },
  42. // 删除图片
  43. delete: function(e) {
  44. let index = e.currentTarget.dataset.index
  45. let files = this.data.files
  46. files.splice(index, 1)
  47. this.setData({
  48. files: files
  49. })
  50. if (this.data.files.length == 0) {
  51. this.setData({
  52. upload: true,
  53. sum: 0
  54. })
  55. }
  56. },
  57. // 保存
  58. formSubmit: function(e) {
  59. var that = this;
  60. console.log('form发生了submit事件,携带数据为:', e.detail.value);
  61. let data = e.detail.value;
  62. if (that.data.files[0] !== null) {
  63. data.certificate = that.data.files[0];
  64. }
  65. console.log(data);
  66. wx.request({
  67. url: '####',
  68. method: 'POST',
  69. data: JSON.stringify(data),
  70. header: {
  71. 'Authorization': 'Bearer' + wx.getStorageSync('token'),
  72. },
  73. success(res) {
  74. console.log("绑定", res);
  75. wx.showModal({
  76. title: '提示',
  77. content: res.data.msg,
  78. showCancel: false,
  79. success: function(res) {
  80. if (res.confirm) {
  81. console.log('用户点击确定');
  82. }
  83. }
  84. })
  85. },
  86. fail: function(fail) {
  87. wx.showModal({
  88. title: '提示',
  89. content: '输入有误,请重新输入',
  90. showCancel: false,
  91. success: function(res) {
  92. if (res.confirm) {
  93. console.log('用户点击确定');
  94. }
  95. }
  96. })
  97. }
  98. })
  99. },
  100. // 时间
  101. changeDate(e) {
  102. this.setData({
  103. date: e.detail.value,
  104. });
  105. },
  106. changeDate1(e) {
  107. this.setData({
  108. date1: e.detail.value,
  109. });
  110. },
  111. // 生命周期函数--监听页面加载
  112. onLoad: function(options) {
  113. // 获取当天时间
  114. var that = this;
  115. var time = util.formatTime(new Date()).substring(0, 10);
  116. console.log(time)
  117. that.setData({
  118. date: time,
  119. date1: time,
  120. });
  121. // 获取完整的年月日 时分秒,以及默认显示的数组
  122. var obj = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  123. var obj1 = dateTimePicker.dateTimePicker(this.data.startYear, this.data.endYear);
  124. // 精确到分的处理,将数组的秒去掉
  125. var lastArray = obj1.dateTimeArray.pop();
  126. var lastTime = obj1.dateTime.pop();
  127. },
  128. selected: function(e) {
  129. this.setData({
  130. selected1: false,
  131. selected: true
  132. })
  133. },
  134. selected1: function(e) {
  135. this.setData({
  136. selected: false,
  137. selected1: true
  138. })
  139. },
  140. // 生命周期函数--监听页面初次渲染完成
  141. onReady: function() {
  142. },
  143. // 生命周期函数--监听页面显示
  144. onShow: function() {
  145. },
  146. // 生命周期函数--监听页面隐藏
  147. onHide: function() {
  148. },
  149. // 生命周期函数--监听页面卸载
  150. onUnload: function() {
  151. },
  152. })

.json

  1. {
  2. "navigationBarTitleText": "请假"
  3. }

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

结语

  • 下面我将继续对 其他知识 深入讲解 ,有兴趣可以继续关注
  • 小礼物走一走 or 点赞
 友情链接:直通硅谷  点职佳  北美留学生论坛

本站QQ群:前端 618073944 | Java 606181507 | Python 626812652 | C/C++ 612253063 | 微信 634508462 | 苹果 692586424 | C#/.net 182808419 | PHP 305140648 | 运维 608723728

W3xue 的所有内容仅供测试,对任何法律问题及风险不承担任何责任。通过使用本站内容随之而来的风险与本站无关。
关于我们  |  意见建议  |  捐助我们  |  报错有奖  |  广告合作、友情链接(目前9元/月)请联系QQ:27243702 沸活量
皖ICP备17017327号-2 皖公网安备34020702000426号