学员端小程序
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.

266 lines
6.0 KiB

1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
  1. <template>
  2. <view class="step1">
  3. <view class="card">
  4. <view class="dateBox">
  5. <view class="month-row">
  6. <view class="month">2032.08</view>
  7. <view class="arrow">
  8. <u-icon name="arrow-down" :size="12" :color="'#1989FA'"></u-icon>
  9. </view>
  10. </view>
  11. <view class="date_row">
  12. <view class="icon left" @click="changeDateIndex(-1)">
  13. <u-icon name="arrow-left" :size="12" :color="'#fff'"></u-icon>
  14. </view>
  15. <view class="dateArr" >
  16. <view class="dateWidth" v-for="(item,index) in dateArr[currentDay]" :key="index" @click="chooseDate(item)" >
  17. <view class="date" :class="{active: chooseDay==item.date}">
  18. <view class="dian"></view>
  19. <view class="week">{{ item.week }}</view>
  20. <view class="num">{{ item.num }}</view>
  21. </view>
  22. </view>
  23. </view>
  24. <view class="icon right" @click="changeDateIndex(1)">
  25. <u-icon name="arrow-right" :size="12" :color="'#fff'"></u-icon>
  26. </view>
  27. </view>
  28. </view>
  29. </view>
  30. <view class="card">
  31. <view class="timeCon">
  32. <view class="h2">上午</view>
  33. <view class="time_box">
  34. <view class="time_item" v-for="(item,index) in timerArr" :key="index" @click="chooseTimerClick(item)" :class="{active: item.id==chooseTimerId, disable: item.status!==1}">
  35. <view class="lab" v-if="item.status==3">已过期</view>
  36. <view class="lab" v-if="item.status==2">已约满</view>
  37. <view class="lab" v-if="item.status==1">可预约</view>
  38. <view class="time">{{ item.timer }}</view>
  39. </view>
  40. </view>
  41. <view class="h2">下午</view>
  42. <view class="time_box">
  43. <view class="time_item" v-for="(item,index) in timerArr2" :key="index" @click="chooseTimerClick(item)" :class="{active: item.id==chooseTimerId,disable: item.status!==1}">
  44. <view class="lab" v-if="item.status==3">已过期</view>
  45. <view class="lab" v-if="item.status==2">已约满</view>
  46. <view class="lab" v-if="item.status==1">可预约</view>
  47. <view class="time">{{ item.timer }}</view>
  48. </view>
  49. </view>
  50. </view>
  51. </view>
  52. <view class="card">
  53. <view class="noDate">
  54. <image src="http://192.168.1.20:81/zhili/image/20230927/ad178ebdf5394518b27b020c03ee48ab.png" mode=""></image>
  55. </view>
  56. </view>
  57. </view>
  58. </template>
  59. <script>
  60. import { getDates } from '@/config/utils.js'
  61. export default {
  62. data() {
  63. return {
  64. dateArr: [],
  65. currentDay: 0,
  66. chooseDay: '',
  67. timerArr: [
  68. {status: 1, timer: '06:00-07:00', id: 1},
  69. {status: 2, timer: '06:00-07:00', id: 2},
  70. {status: 3, timer: '06:00-07:00', id: 3},
  71. ],
  72. timerArr2: [
  73. {status: 1, timer: '06:00-07:00', id: 4},
  74. {status: 2, timer: '06:00-07:00', id: 5},
  75. {status: 3, timer: '06:00-07:00', id: 6},
  76. ],
  77. chooseTimerId: ''
  78. }
  79. },
  80. mounted() {
  81. const startDate = new Date('2023-09-06');
  82. const endDate = new Date();
  83. this.dateArr = getDates(startDate, endDate);
  84. },
  85. methods: {
  86. // 选择时间
  87. chooseTimerClick(item) {
  88. if(item.status!=1) return this.$u.toast('请选择可预约时间')
  89. this.chooseTimerId = item.id
  90. },
  91. // 选择日期
  92. chooseDate(item) {
  93. this.chooseDay = item.date
  94. console.log(this.chooseDay)
  95. },
  96. changeDateIndex(num) {
  97. if(this.currentDay==0&&num==-1) return
  98. if(this.currentDay==this.dateArr.length-1&&num==1) return
  99. this.currentDay = this.currentDay + num
  100. console.log(this.currentDay)
  101. },
  102. }
  103. }
  104. </script>
  105. <style lang="scss" scoped>
  106. .card {
  107. width: 100%;
  108. margin-bottom: 24rpx;
  109. overflow: hidden;
  110. .dateBox {
  111. padding: 36rpx 0 40rpx 0;
  112. .month-row {
  113. display: flex;
  114. justify-content: center;
  115. align-items: center;
  116. margin-bottom: 36rpx;
  117. .month {
  118. font-size: 32rpx;
  119. color: $themC;
  120. }
  121. .arrow {
  122. margin-left: 6rpx;
  123. }
  124. }
  125. .date_row {
  126. width: 100%;
  127. height: 100rpx;
  128. position: relative;
  129. .icon {
  130. width: 40rpx;
  131. height: 40rpx;
  132. background: rgba(51,51,51,0.18);
  133. backdrop-filter: blur(4rpx);
  134. position: absolute;
  135. top: 50%;
  136. transform: translateY(-50%);
  137. display: flex;
  138. align-items: center;
  139. justify-content: center;
  140. border-radius: 50%;
  141. &.left {
  142. left: 16rpx;
  143. }
  144. &.right {
  145. right: 16rpx;
  146. }
  147. }
  148. .dateArr {
  149. display: flex;
  150. padding: 0 70rpx;
  151. // justify-content: space-between;
  152. &.oneDate {
  153. justify-content: center;
  154. }
  155. .dateWidth {
  156. width: 20%;
  157. display: flex;
  158. justify-content: center;
  159. }
  160. .date {
  161. width: 74rpx;
  162. height: 100rpx;
  163. border-radius: 16rpx;
  164. display: flex;
  165. flex-direction: column;
  166. align-items: center;
  167. justify-content: center;
  168. font-size: 28rpx;
  169. color: #333;
  170. .dian {
  171. width: 12rpx;
  172. height: 12rpx;
  173. background: #D8D8D8;
  174. border-radius: 50%;
  175. &.active {
  176. background: #1989FA;
  177. }
  178. }
  179. &.active {
  180. background: rgba(25,137,250,0.1);
  181. border: 2rpx solid #1989FA;
  182. color: $themC;
  183. }
  184. .week {
  185. }
  186. .num {
  187. margin-top: 4rpx;
  188. }
  189. }
  190. }
  191. }
  192. }
  193. }
  194. .card {
  195. .timeCon {
  196. padding: 0 24rpx 40rpx 24rpx;
  197. }
  198. .h2 {
  199. line-height: 90rpx;
  200. font-weight: 500;
  201. color: #333;
  202. }
  203. .time_box {
  204. display: flex;
  205. flex-wrap: wrap;
  206. justify-content: space-between;
  207. .time_item {
  208. width: 30%;
  209. height: 120rpx;
  210. background: #F8F8F8;
  211. border-radius: 12rpx;
  212. display: flex;
  213. flex-direction: column;
  214. justify-content: center;
  215. align-items: center;
  216. border-radius: 12rpx;
  217. color: #333;
  218. &.active {
  219. background: rgba(25,137,250,0.1);
  220. border: 2rpx solid #1989FA;
  221. color: $themC;
  222. }
  223. &.disable {
  224. opacity: 0.4;
  225. }
  226. .lab {
  227. font-size: 28rpx;
  228. font-weight: 500;
  229. }
  230. .time {
  231. font-size: 24rpx;
  232. margin-top: 4rpx;
  233. }
  234. }
  235. }
  236. }
  237. .btn {
  238. width: 47%;
  239. height: 72rpx;
  240. background: #1989FA;
  241. border-radius: 8rpx;
  242. font-size: 28rpx;
  243. color: #fff;
  244. text-align: center;
  245. line-height: 72rpx;
  246. margin: 108rpx auto 50rpx auto;
  247. }
  248. .noDate {
  249. }
  250. </style>