start-preview.js 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339
  1. const { museumApi } = require('../../../utils/api.js');
  2. Page({
  3. data: {
  4. selectedTime: '',
  5. selectedDate: null,
  6. step: 1,
  7. morningAvailability: '余票充足',
  8. afternoonAvailability: '余票充足',
  9. morningTime: '10:00-14:00',
  10. afternoonTime: '14:00-18:00',
  11. morningId: null,
  12. afternoonId: null,
  13. afternoonDisabled: false,
  14. morningDisabled: false,
  15. showMorning: true,
  16. showAfternoon: true
  17. },
  18. onLoad(options) {
  19. // 页面加载时的逻辑
  20. },
  21. onShow() {
  22. // 页面显示时的逻辑
  23. console.log(22222)
  24. },
  25. // 日期选择回调
  26. onDateChange(e) {
  27. console.log('选择的日期:', e.detail);
  28. const selectedDate = e.detail.dateString;
  29. // 只有当日期可选时才设置selectedDate和selectedTime
  30. if (selectedDate) {
  31. this.setData({
  32. selectedDate: selectedDate,
  33. selectedTime: 'morning' // 默认选中上午
  34. });
  35. // 调用API获取当日时段信息
  36. this.getSlotsByDate(selectedDate);
  37. } else {
  38. // 如果日期不可选,清空选择状态
  39. this.setData({
  40. selectedDate: null,
  41. selectedTime: ''
  42. });
  43. }
  44. },
  45. // 格式化日期
  46. formatDate(date) {
  47. const year = date.getFullYear();
  48. const month = (date.getMonth() + 1).toString().padStart(2, '0');
  49. const day = date.getDate().toString().padStart(2, '0');
  50. return `${year}-${month}-${day}`;
  51. },
  52. // 调用API获取指定日期的时段信息
  53. getSlotsByDate(dateString) {
  54. console.log('调用API获取时段信息,日期:', dateString);
  55. museumApi.getSlotsByDate(dateString)
  56. .then(res => {
  57. console.log('API返回数据:', res);
  58. if (res) {
  59. this.updateAvailability(res);
  60. } else {
  61. // API调用失败,使用默认值
  62. this.setData({
  63. morningAvailability: '余票充足',
  64. afternoonAvailability: '余票充足'
  65. });
  66. }
  67. })
  68. .catch(error => {
  69. console.error('API调用失败:', error);
  70. // 使用默认值
  71. this.setData({
  72. morningAvailability: '余票充足',
  73. afternoonAvailability: '余票充足'
  74. });
  75. });
  76. },
  77. // 检查时间段是否已过期
  78. isTimeSlotExpired(timeRange, selectedDate) {
  79. if (!timeRange || !selectedDate) return false;
  80. const now = new Date();
  81. const today = this.formatDate(now);
  82. // 如果选择的不是今天,则不需要检查过期
  83. if (selectedDate !== today) return false;
  84. // 解析时间段,获取结束时间
  85. const timeMatch = timeRange.match(/(\d{1,2}):(\d{2})-(\d{1,2}):(\d{2})/);
  86. if (!timeMatch) return false;
  87. const endHour = parseInt(timeMatch[3]);
  88. const endMinute = parseInt(timeMatch[4]);
  89. // 创建今天的结束时间
  90. const endTime = new Date();
  91. endTime.setHours(endHour, endMinute, 0, 0);
  92. // 如果当前时间已经超过结束时间,则过期
  93. return now > endTime;
  94. },
  95. // 更新余票显示
  96. updateAvailability(data) {
  97. // 根据API返回的数据更新余票显示
  98. let morningText = '余票充足';
  99. let afternoonText = '余票充足';
  100. let morningTime = '10:00-14:00';
  101. let afternoonTime = '14:00-18:00';
  102. let morningId = null;
  103. let afternoonId = null;
  104. let afternoonDisabled = false;
  105. let morningDisabled = false;
  106. let showMorning = true;
  107. let showAfternoon = true;
  108. console.log('更新余票显示,数据:', data);
  109. if (data && Array.isArray(data) && data.length > 0) {
  110. if (data.length >= 2) {
  111. // 有两项数据,根据时间段判断上午下午
  112. let morningData = null;
  113. let afternoonData = null;
  114. // 遍历数据,根据时间判断是上午还是下午
  115. data.forEach(item => {
  116. if (this.isAfternoonTime(item.time)) {
  117. afternoonData = item;
  118. } else {
  119. morningData = item;
  120. }
  121. });
  122. // 处理上午数据
  123. if (morningData) {
  124. if (morningData.pcs <= -1) {
  125. morningText = '闭馆';
  126. morningDisabled = true;
  127. } else if (morningData.pcs > 0) {
  128. morningText = `余票${morningData.pcs}张`;
  129. } else {
  130. morningText = '已约满';
  131. }
  132. morningTime = morningData.time;
  133. morningId = morningData.id;
  134. } else {
  135. showMorning = false;
  136. morningDisabled = true;
  137. }
  138. // 处理下午数据
  139. if (afternoonData) {
  140. if (afternoonData.pcs <= -1) {
  141. afternoonText = '闭馆';
  142. afternoonDisabled = true;
  143. } else if (afternoonData.pcs > 0) {
  144. afternoonText = `余票${afternoonData.pcs}张`;
  145. } else {
  146. afternoonText = '已约满';
  147. }
  148. afternoonTime = afternoonData.time;
  149. afternoonId = afternoonData.id;
  150. } else {
  151. showAfternoon = false;
  152. afternoonDisabled = true;
  153. }
  154. // 检查时间段是否已过期(只有未被禁用且不是闭馆状态的时间段才检查过期)
  155. if (morningData && !morningDisabled && morningText !== '闭馆') {
  156. morningDisabled = this.isTimeSlotExpired(morningTime, this.data.selectedDate);
  157. if (morningDisabled) {
  158. morningText = '已过期';
  159. }
  160. }
  161. if (afternoonData && !afternoonDisabled && afternoonText !== '闭馆') {
  162. afternoonDisabled = this.isTimeSlotExpired(afternoonTime, this.data.selectedDate);
  163. if (afternoonDisabled) {
  164. afternoonText = '已过期';
  165. }
  166. }
  167. } else {
  168. // 只有一项数据,根据时间段判断显示上午还是下午
  169. const singleData = data[0];
  170. const timeStr = singleData.time;
  171. // 解析时间段,判断是否大于14:00
  172. const isAfternoon = this.isAfternoonTime(timeStr);
  173. if (isAfternoon) {
  174. // 显示下午,隐藏上午
  175. if (singleData.pcs <= -1) {
  176. afternoonText = '闭馆';
  177. afternoonDisabled = true;
  178. } else if (singleData.pcs > 0) {
  179. afternoonText = `余票${singleData.pcs}张`;
  180. } else {
  181. afternoonText = '已约满';
  182. }
  183. afternoonTime = singleData.time;
  184. afternoonId = singleData.id;
  185. if (!afternoonDisabled) {
  186. afternoonDisabled = this.isTimeSlotExpired(afternoonTime, this.data.selectedDate);
  187. if (afternoonDisabled) {
  188. afternoonText = '已过期';
  189. }
  190. }
  191. showMorning = false;
  192. morningDisabled = true;
  193. } else {
  194. // 显示上午,隐藏下午
  195. if (singleData.pcs <= -1) {
  196. morningText = '闭馆';
  197. morningDisabled = true;
  198. } else if (singleData.pcs > 0) {
  199. morningText = `余票${singleData.pcs}张`;
  200. } else {
  201. morningText = '已约满';
  202. }
  203. morningTime = singleData.time;
  204. morningId = singleData.id;
  205. if (!morningDisabled) {
  206. morningDisabled = this.isTimeSlotExpired(morningTime, this.data.selectedDate);
  207. if (morningDisabled) {
  208. morningText = '已过期';
  209. }
  210. }
  211. showAfternoon = false;
  212. afternoonDisabled = true;
  213. }
  214. }
  215. // 如果当前选中的时间段已过期或被禁用,自动切换到可用的时间段
  216. if (this.data.selectedTime === 'morning' && (morningDisabled || !showMorning)) {
  217. if (!afternoonDisabled && showAfternoon) {
  218. this.setData({ selectedTime: 'afternoon' });
  219. } else {
  220. this.setData({ selectedTime: '' });
  221. }
  222. } else if (this.data.selectedTime === 'afternoon' && (afternoonDisabled || !showAfternoon)) {
  223. if (!morningDisabled && showMorning) {
  224. this.setData({ selectedTime: 'morning' });
  225. } else {
  226. this.setData({ selectedTime: '' });
  227. }
  228. }
  229. }
  230. this.setData({
  231. morningAvailability: morningText,
  232. afternoonAvailability: afternoonText,
  233. morningTime: morningTime,
  234. afternoonTime: afternoonTime,
  235. morningId: morningId,
  236. afternoonId: afternoonId,
  237. afternoonDisabled: afternoonDisabled,
  238. morningDisabled: morningDisabled,
  239. showMorning: showMorning,
  240. showAfternoon: showAfternoon
  241. });
  242. },
  243. // 判断时间段是否为下午(大于14:00)
  244. isAfternoonTime(timeStr) {
  245. // 时间格式如:"10:00-14:00" 或 "14:00-18:00"
  246. const startTime = timeStr.split('-')[0].trim();
  247. const hour = parseInt(startTime.split(':')[0]);
  248. return hour >= 14;
  249. },
  250. // 选择时间段
  251. selectTime(e) {
  252. const time = e.currentTarget.dataset.time;
  253. // 如果点击的是上午且上午被禁用,则不允许选择
  254. if (time === 'morning' && this.data.morningDisabled) {
  255. return;
  256. }
  257. // 如果点击的是下午且下午被禁用,则不允许选择
  258. if (time === 'afternoon' && this.data.afternoonDisabled) {
  259. return;
  260. }
  261. this.setData({
  262. selectedTime: time
  263. });
  264. console.log('选择的时间段:', time);
  265. },
  266. // 下一步
  267. goNext() {
  268. if (this.data.selectedTime && this.data.selectedDate) {
  269. console.log('选择的时间段:', this.data.selectedTime);
  270. console.log('选择的日期:', this.data.selectedDate);
  271. // 根据选择的时间段获取对应的id和时间
  272. let appointmentSlotsId = null;
  273. let actualTime = '';
  274. if (this.data.selectedTime === 'morning') {
  275. appointmentSlotsId = this.data.morningId;
  276. actualTime = this.data.morningTime;
  277. } else if (this.data.selectedTime === 'afternoon') {
  278. appointmentSlotsId = this.data.afternoonId;
  279. actualTime = this.data.afternoonTime;
  280. }
  281. wx.navigateTo({
  282. url: `/pages/index/visit-people/visit-people?date=${this.data.selectedDate}&time=${actualTime}&appointmentSlotsId=${appointmentSlotsId}&type=1`
  283. });
  284. } else {
  285. wx.showToast({
  286. title: '请选择日期和时间段',
  287. icon: 'none'
  288. });
  289. }
  290. },
  291. onShareAppMessage() {
  292. return {
  293. title: '克拉玛依博物馆 - 开始预约',
  294. path: '/pages/index/start-preview/start-preview'
  295. };
  296. }
  297. });