datepicker.vue 3.4 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162
  1. <template>
  2. <view class="main">
  3. <view class="leftcontainer">
  4. <scroll-view scroll-y="true" style="height: 700rpx;">
  5. <view :class="leftindex==index?'leftstyle leftstyle_active':'leftstyle'" v-for="(item,index) in date[0]"
  6. @click="selectdate(item,index)" :key="index">
  7. <view class="">
  8. {{formatdate(item.week)}}
  9. </view>
  10. <view class="">
  11. {{item.date}}
  12. </view>
  13. </view>
  14. </scroll-view>
  15. </view>
  16. <view class="rightcontainer">
  17. <scroll-view scroll-y="true" style="height: 700rpx;">
  18. <u-grid :col="3">
  19. <u-grid-item v-for="(itm,idx) in rightday" @click="selectday(itm)" :key="idx">
  20. <view class="text-sm">
  21. {{itm.intro}}
  22. </view>
  23. <view class="margin-top-sm">{{itm.start_time_period}} - {{itm.end_time_period}}</view>
  24. <view v-if="itm.can_appoint==1"
  25. :class="itm.can_appoint_num==0?'margin-top-sm text-gray text-sm':'margin-top-sm text-blue text-sm'">
  26. 可预约号源:{{itm.can_appoint_num}}
  27. </view>
  28. <view v-else class="margin-top-sm text-gray text-sm">
  29. 暂不可预约
  30. </view>
  31. </u-grid-item>
  32. </u-grid>
  33. </scroll-view>
  34. </view>
  35. </view>
  36. </template>
  37. <script>
  38. export default {
  39. props: {
  40. date: {
  41. type: Array,
  42. }
  43. },
  44. mounted() {},
  45. data() {
  46. return {
  47. leftindex: 0,
  48. rightday: [],
  49. year: ""
  50. }
  51. },
  52. methods: {
  53. formatdate(week) {
  54. switch (week) {
  55. case 1:
  56. return "周一"
  57. break;
  58. case 2:
  59. return "周二"
  60. break;
  61. case 3:
  62. return "周三"
  63. break;
  64. case 4:
  65. return "周四"
  66. break;
  67. case 5:
  68. return "周五"
  69. break;
  70. case 6:
  71. return "周六"
  72. break;
  73. case 7:
  74. return "周日"
  75. break;
  76. default:
  77. break;
  78. }
  79. },
  80. selectdate(item, index) {
  81. console.log(this.date)
  82. this.leftindex = index
  83. this.year = item.date
  84. this.date[1].forEach(data => {
  85. data.forEach(itm => {
  86. if (itm.schedule_id == item.id) {
  87. this.rightday = data
  88. }
  89. })
  90. })
  91. },
  92. selectday(itm) {
  93. console.log(itm)
  94. let arr = itm.year + " " + itm.end_time_period;
  95. arr = arr.split(/[- :]/)
  96. let nndate = new Date(arr[0], arr[1] - 1, arr[2], arr[3], arr[4]);
  97. nndate = Date.parse(nndate)
  98. let currentTime = Date.parse(new Date())
  99. if (nndate < currentTime) {
  100. uni.showToast({
  101. title: "不可预约已过时间",
  102. icon: "none"
  103. })
  104. return false
  105. }
  106. if (itm.can_appoint_num == 0) {
  107. uni.showToast({
  108. title: "已无号源可预约",
  109. icon: "none"
  110. })
  111. return false
  112. }
  113. if (itm.can_appoint == 0) {
  114. uni.showToast({
  115. title: "暂不可预约",
  116. icon: "none"
  117. })
  118. return false
  119. }
  120. if (this.year != "") {
  121. itm.year = this.year
  122. }
  123. this.$emit('callbacktime', itm)
  124. }
  125. }
  126. };
  127. </script>
  128. <style scoped>
  129. .main {
  130. display: flex;
  131. /* margin-left: 15rpx;
  132. margin-right: 15rpx; */
  133. }
  134. .leftcontainer {
  135. border-right: 1rpx solid #efefef;
  136. width: 25%;
  137. }
  138. .rightcontainer {
  139. width: 75%;
  140. }
  141. .leftstyle {
  142. width: 100%;
  143. height: 80rpx;
  144. display: flex;
  145. justify-content: center;
  146. align-items: center;
  147. font-size: 30rpx;
  148. color: #0B73B9;
  149. flex-direction: column;
  150. }
  151. .leftstyle_active {
  152. color: #fff;
  153. background-color: #0B73B9;
  154. }
  155. </style>