You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
 

194 lines
4.1 KiB

  1. <template>
  2. <view v-if="ready" class="contentBox">
  3. <view class="content" id="attendContent">
  4. <view id="show">{{now}}</view>
  5. <view class="pen" @click="action('dk')">
  6. <img id="attimg" :src="imgsrc" alt="" width="100%">
  7. </view>
  8. </view>
  9. <view class="footer">
  10. <img src="../../common/images/2.png" alt="" width="100%">
  11. </view>
  12. </view>
  13. </template>
  14. <script>
  15. /*
  16. * 版 本 Learun-ADMS V7.0.3 力软敏捷开发框架(http://www.learun.cn)
  17. * Copyright (c) 2013-2020 上海力软信息技术有限公司
  18. * 创建人:超级管理员
  19. * 日 期:2022-03-10 15:30
  20. * 描 述:考勤打卡
  21. */
  22. /**
  23. * 本段代码由移动端代码生成器输出,移动端须 2.2.0 版本及以上可以使用
  24. * 请在移动端 /pages.json 中的 pages 字段中添加一条记录:
  25. * { "path": "pages/AttendanceCard/list", "style": { "navigationBarTitleText": "考勤打卡" } }
  26. *
  27. * (navigationBarTitleText 字段为本页面的标题文本,可以修改)
  28. * (必须自行操作该步骤,力软代码生成器不会自动帮您修改 /pages.json 文件)
  29. */
  30. import get from 'lodash/get'
  31. import set from 'lodash/set'
  32. import moment from 'moment'
  33. import customPageMixins from '@/common/custompage.js'
  34. //导入图片
  35. import dk from '../../common/images/dk.png'
  36. import dkred from '../../common/images/dkred.png'
  37. import dkyellow from '../../common/images/dkyellow.png'
  38. export default {
  39. mixins: [customPageMixins],
  40. data() {
  41. return {
  42. // 页面相关参数
  43. now: null,
  44. imgsrc:dk,
  45. ready: false,
  46. timer:'',
  47. }
  48. },
  49. async onLoad() {
  50. await this.init()
  51. },
  52. methods: {
  53. // 页面初始化
  54. async init() {
  55. this.LOADING('加载数据中...')
  56. this.now = this.getCurrentTime()
  57. this.timer = setInterval(this.getCurrentTime,1000)
  58. await this.judgeIsDK()
  59. this.ready = true
  60. this.HIDE_LOADING()
  61. },
  62. // 点击 「打卡」按钮
  63. async action(type) {
  64. switch (type) {
  65. case 'dk':
  66. if(this.imgsrc == dkred){
  67. return
  68. }
  69. this.LOADING()
  70. this.HTTP_POST('learun/adms/attendance/clockin', {}, '打卡失败').then(success => {
  71. this.HIDE_LOADING()
  72. if(!success) {
  73. this.TOAST('打卡失败')
  74. return
  75. }
  76. this.TOAST('打卡成功','success')
  77. setTimeout(this.back,500)
  78. })
  79. return
  80. default: break
  81. }
  82. },
  83. //判断当前时间是否可以打卡
  84. async judgeIsDK(){
  85. this.HTTP_GET('learun/adms/attendance/IsAttendance',{},'判断当前时间是否可以打卡失败').then(success=>{
  86. if(!success){return}
  87. if (success.data == "red") {
  88. this.imgsrc=dkred;
  89. } else if (success.data == "yellow") {
  90. this.imgsrc=dkyellow;
  91. }else {
  92. this.imgsrc=dk;
  93. }
  94. })
  95. },
  96. //返回
  97. back(){
  98. this.NAV_BACK()
  99. },
  100. //获取当前时间
  101. getCurrentTime() {
  102. let nowDate = new Date();
  103.   let hh = nowDate.getHours();
  104.   let mf = nowDate.getMinutes()<10 ? '0'+nowDate.getMinutes() : nowDate.getMinutes();
  105.   let ss = nowDate.getSeconds()<10 ? '0'+nowDate.getSeconds() : nowDate.getSeconds();
  106.   this.now = hh+':'+mf+':'+ss;
  107. },
  108. },
  109. destroyed() {
  110. clearInterval(this.timer)
  111. }
  112. }
  113. </script>
  114. <style lang="less">
  115. uni-page-body{
  116. height: 100%;
  117. width: 100%;
  118. background-color: #fff;
  119. }
  120. .content {
  121. width: 48%;
  122. height: 50%;
  123. position: absolute;
  124. top: 15%;
  125. left: 50%;
  126. transform: translate(-50%, 10%);
  127. }
  128. #show {
  129. text-align: center;
  130. height: 200rpx;
  131. font-size: 56rpx;
  132. }
  133. .pen {
  134. height: 48%;
  135. border-radius: 50%;
  136. background-color: #e7f5ff;
  137. display: flex;
  138. align-items: center;
  139. justify-content: center;
  140. }
  141. .pen2 {
  142. width: 91%;
  143. height: 91%;
  144. border-radius: 50%;
  145. background-color: #bde4ff;
  146. display: flex;
  147. align-items: center;
  148. justify-content: center;
  149. }
  150. .pen3 {
  151. width: 84%;
  152. height: 84%;
  153. border-radius: 50%;
  154. background-color: #0c86d8;
  155. text-align: center;
  156. font-size: 68rpx;
  157. display: flex;
  158. align-items: center;
  159. justify-content: center;
  160. color: #ffff;
  161. }
  162. .footer {
  163. width: 100%;
  164. position: fixed;
  165. left: 0;
  166. bottom: 0;
  167. overflow: hidden;
  168. }
  169. </style>