index.wxml 3.5 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
  1. <view class="flex b tb ac" wx:if="{{calendar}}">
  2. <view class="calendar b tb">
  3. <!-- 头部操作栏 -->
  4. <view wx:if="{{!calendarConfig.hideHeadOnWeekMode}}" class="handle {{calendarConfig.theme}}_handle-color fs28 b lr ac pc">
  5. <view class="prev fs36" wx:if="{{calendarConfig.showHandlerOnWeekMode || !calendarConfig.weekMode}}">
  6. <text class="prev-handle iconfont icon-doubleleft" bindtap="chooseDate" data-type="prev_year"></text>
  7. <text class="prev-handle iconfont icon-left" bindtap="chooseDate" data-type="prev_month"></text>
  8. </view>
  9. <view class="flex date-in-handle b lr cc" bindtap="doubleClickToToday">
  10. {{calendar.curYear || "--"}} 年 {{calendar.curMonth || "--"}} 月
  11. </view>
  12. <view class="next fs36" wx:if="{{calendarConfig.showHandlerOnWeekMode || !calendarConfig.weekMode}}">
  13. <text class="next-handle iconfont icon-right" bindtap="chooseDate" data-type="next_month"></text>
  14. <text class="next-handle iconfont icon-doubleright" bindtap="chooseDate" data-type="next_year"></text>
  15. </view>
  16. </view>
  17. <!-- 星期栏 -->
  18. <view class="weeks b lr ac {{calendarConfig.theme}}_week-color">
  19. <view class="week fs28" wx:for="{{calendar.weeksCh}}" wx:key="index" data-idx="{{index}}">
  20. {{item}}
  21. </view>
  22. </view>
  23. <!-- 日历面板主体 -->
  24. <view class="b lr wrap"
  25. bindtouchstart="calendarTouchstart"
  26. catchtouchmove="calendarTouchmove"
  27. catchtouchend="calendarTouchend">
  28. <!-- 上月日期格子 -->
  29. <view
  30. class="grid other-month b ac pc"
  31. wx:for="{{calendar.empytGrids}}"
  32. wx:key="index"
  33. data-idx="{{index}}">
  34. <view class="date-wrap b cc">
  35. <view class="date">
  36. {{item.day}}
  37. </view>
  38. </view>
  39. </view>
  40. <!-- 本月日期格子 -->
  41. <view
  42. wx:for="{{days}}"
  43. wx:key="index"
  44. data-idx="{{index}}"
  45. data-date="{{item}}"
  46. bindtap="tapDayItem"
  47. class="grid current-month{{item.lunar.isToday ? ' today' : ''}}{{item.choosed ? ' dim choosed' : ''}} b ac pc">
  48. <view class="date-wrap b cc {{(item.week === 0 || item.week === 6) ? calendarConfig.theme + '_weekend-color' : ''}}">
  49. <view class="date b ac pc">
  50. {{calendarConfig.markToday && item.lunar.isToday ? calendarConfig.markToday : item.day}}
  51. </view>
  52. <!-- 小圆点,根据状态显示不同颜色 -->
  53. <view class="dot dot-{{item.type}}"></view>
  54. </view>
  55. </view>
  56. <!-- 下月日期格子 -->
  57. <view
  58. class="grid other-month b ac pc"
  59. wx:for="{{calendar.lastEmptyGrids}}"
  60. wx:key="index"
  61. data-idx="{{index}}">
  62. <view class="date-wrap b cc">
  63. <view class="date">
  64. {{item.day}}
  65. </view>
  66. </view>
  67. </view>
  68. <view style="width:100%;margin-top: 36rpx;">
  69. <t-divider />
  70. <view class="calendar-footer">
  71. <view class="status-box" wx:for="{{noClockIn}}">
  72. <view class="status-row" >
  73. <text class="status-label unpunch">未打卡:</text>
  74. <text class="status-content unpunch">{{item.conditioningProgramName}}</text>
  75. </view>
  76. <button class="patch-btn" bindtap="onPatchCard" data-id="{{item.id}}" >补卡</button>
  77. </view>
  78. <view class="status-row" wx:for="{{clockIn}}">
  79. <text class="status-label punch">已打卡:</text>
  80. <text class="status-content punch">{{item.conditioningProgramName}}</text>
  81. </view>
  82. </view>
  83. </view>
  84. </view>
  85. </view>
  86. </view>