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.
 
 
 
 
 
 

191 lines
3.9 KiB

  1. <template>
  2. <view v-if="ready" class="contentBox">
  3. <view class="content" id="attendContent">
  4. <view id="show">{{now}}</view>
  5. <div class="pen" @click="action('dk')">
  6. <img id="attimg" :src="imgsrc" alt="" width="100%">
  7. </div>
  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. }
  47. },
  48. async onLoad() {
  49. await this.init()
  50. },
  51. methods: {
  52. // 页面初始化
  53. async init() {
  54. this.LOADING('加载数据中...')
  55. this.now = this.getCurrentTime()
  56. setInterval(this.getCurrentTime,1000)
  57. await this.judgeIsDK()
  58. this.ready = true
  59. this.HIDE_LOADING()
  60. },
  61. // 点击 「打卡」按钮
  62. async action(type) {
  63. switch (type) {
  64. case 'dk':
  65. if(this.imgsrc == "dkred"){
  66. return
  67. }
  68. this.HTTP_POST('learun/adms/attendance/clockin', {}, '打卡失败').then(success => {
  69. if(!success) {
  70. this.TOAST('打卡失败')
  71. return
  72. }
  73. this.TOAST('打卡成功','success')
  74. setTimeout(this.back,1000)
  75. })
  76. return
  77. default: break
  78. }
  79. },
  80. //判断当前时间是否可以打卡
  81. async judgeIsDK(){
  82. this.HTTP_GET('learun/adms/attendance/IsAttendance',{},'判断当前时间是否可以打卡失败').then(success=>{
  83. if(!success){return}
  84. if (success.data == "red") {
  85. this.imgsrc=dkred;
  86. } else if (success.data == "yellow") {
  87. this.imgsrc=dkyellow;
  88. }else {
  89. this.imgsrc=dk;
  90. }
  91. })
  92. },
  93. //返回
  94. back(){
  95. this.NAV_BACK()
  96. },
  97. //获取当前时间
  98. getCurrentTime() {
  99. let nowDate = new Date();
  100.   let hh = nowDate.getHours();
  101.   let mf = nowDate.getMinutes()<10 ? '0'+nowDate.getMinutes() : nowDate.getMinutes();
  102.   let ss = nowDate.getSeconds()<10 ? '0'+nowDate.getSeconds() : nowDate.getSeconds();
  103.   this.now = hh+':'+mf+':'+ss;
  104. }
  105. }
  106. }
  107. </script>
  108. <style lang="less">
  109. uni-page-body{
  110. height: 100%;
  111. width: 100%;
  112. background-color: #fff;
  113. }
  114. .content {
  115. width: 48%;
  116. height: 50%;
  117. position: absolute;
  118. top: 15%;
  119. left: 50%;
  120. transform: translate(-50%, 10%);
  121. }
  122. #show {
  123. text-align: center;
  124. height: 200rpx;
  125. font-size: 56rpx;
  126. }
  127. .pen {
  128. height: 48%;
  129. border-radius: 50%;
  130. background-color: #e7f5ff;
  131. display: flex;
  132. align-items: center;
  133. justify-content: center;
  134. }
  135. .pen2 {
  136. width: 91%;
  137. height: 91%;
  138. border-radius: 50%;
  139. background-color: #bde4ff;
  140. display: flex;
  141. align-items: center;
  142. justify-content: center;
  143. }
  144. .pen3 {
  145. width: 84%;
  146. height: 84%;
  147. border-radius: 50%;
  148. background-color: #0c86d8;
  149. text-align: center;
  150. font-size: 68rpx;
  151. display: flex;
  152. align-items: center;
  153. justify-content: center;
  154. color: #ffff;
  155. }
  156. .footer {
  157. width: 100%;
  158. position: fixed;
  159. left: 0;
  160. bottom: 0;
  161. overflow: hidden;
  162. }
  163. </style>