From 88651aa5b5f06a43e579e57b52be058763403077 Mon Sep 17 00:00:00 2001 From: "liujw155@outlook.com" Date: Thu, 12 Jun 2025 16:51:21 +0800 Subject: [PATCH] add site select logic --- src/subpackage/groupon/api/index.js | 8 + src/subpackage/groupon/components/site/footer.vue | 23 +-- src/subpackage/groupon/components/site/table.vue | 11 +- src/subpackage/groupon/js/site_select/handle.js | 17 +++ src/subpackage/groupon/pages/site_select.vue | 170 ++++++++++++++++++---- 5 files changed, 188 insertions(+), 41 deletions(-) create mode 100644 src/subpackage/groupon/api/index.js diff --git a/src/subpackage/groupon/api/index.js b/src/subpackage/groupon/api/index.js new file mode 100644 index 0000000..f66b805 --- /dev/null +++ b/src/subpackage/groupon/api/index.js @@ -0,0 +1,8 @@ +import server from '@/api/server'; + +export const venueTypes = params => server.post({ url: '/stadium/venue/types', ...params }); // 场馆类型 +export const bookDate = params => server.post({ url: '/stadium/book/date', ...params }); // 可预订场馆列表 +export const bookList = params => server.post({ url: '/stadium/book/list', ...params }); // 可预订场馆，矩阵图 时间+场馆 + + + diff --git a/src/subpackage/groupon/components/site/footer.vue b/src/subpackage/groupon/components/site/footer.vue index 56058be..b90f5bb 100644 --- a/src/subpackage/groupon/components/site/footer.vue +++ b/src/subpackage/groupon/components/site/footer.vue @@ -1,13 +1,15 @@ diff --git a/src/subpackage/groupon/components/site/table.vue b/src/subpackage/groupon/components/site/table.vue index bfbf131..6294c07 100644 --- a/src/subpackage/groupon/components/site/table.vue +++ b/src/subpackage/groupon/components/site/table.vue @@ -12,8 +12,9 @@ const props = defineProps({ const timeList = computed(_=> { let _table = props?.tableData; - if(!_table?.length)return []; + if(_table?.length <= 0)return []; let _items = _table?.[0]?.items ?? [], _tempArr; + if(_items?.length <=0)return []; _tempArr = _items.reduce((_arr, val)=>_arr.concat(val.time.split('-')), []); // 去重前减掉最后一位，去重后再补上 // 00:00-00:30 && 23:00-00:00 ，这两个时间段去重后少一个节点 @@ -75,8 +76,8 @@ const itemClick = function(k, i, j){ @click="itemClick(k, i, j)" > - ¥60.00 - ¥60.00 + ¥{{ k?.price ?? 0 }} + ¥{{ k?.underlined_price_str ?? 0 }} 已售 @@ -192,6 +193,7 @@ const itemClick = function(k, i, j){ color: #9A9A9D; } .sr-del{ + text-decoration: line-through; @include flcw(20upx, 28upx, #9A9A9D); } &.green{ @@ -199,6 +201,9 @@ const itemClick = function(k, i, j){ .sr-price{ color: #fff; } + .sr-del{ + color: #fff; + } } &.orange{ border-color: #FF873D; diff --git a/src/subpackage/groupon/js/site_select/handle.js b/src/subpackage/groupon/js/site_select/handle.js index e69de29..390972b 100644 --- a/src/subpackage/groupon/js/site_select/handle.js +++ b/src/subpackage/groupon/js/site_select/handle.js @@ -0,0 +1,17 @@ +export function get_zh_day(date){ + if(isSameDay(new Date().getTime(),new Date(date).getTime()))return '今天' + const Arr = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']; + return Arr[new Date(date).getDay()] || ''; +} + +// 判断是否同一天 +export function isSameDay(timeStampA, timeStampB) { + let dateA = new Date(timeStampA); + let dateB = new Date(timeStampB); + return (dateA.setHours(0, 0, 0, 0) == dateB.setHours(0, 0, 0, 0)); +} + +// 获取中文日期 +export function get_zh_date(date = new Date()){ + return `${new Date(date).getMonth()+1}月${new Date(date).getDate()}日` +} \ No newline at end of file diff --git a/src/subpackage/groupon/pages/site_select.vue b/src/subpackage/groupon/pages/site_select.vue index f7cc61e..6e525ae 100644 --- a/src/subpackage/groupon/pages/site_select.vue +++ b/src/subpackage/groupon/pages/site_select.vue @@ -2,45 +2,153 @@ import { onLoad, onReady } from '@dcloudio/uni-app'; import { reactive, ref, computed, watch, nextTick } from 'vue'; import { stadiumBookList } from "@/api"; -import { getNodeMes } from "@/utils/polish" +import { venueTypes, bookDate, bookList } from '../api'; +import { getNodeMes, showModal } from "@/utils/polish"; import siteTable from "../components/site/table.vue"; import siteFooter from "../components/site/footer.vue"; -const siteData = ref([]); -const scrollHeight = ref(0); +import { get_zh_day, get_zh_date } from "../js/site_select/handle"; +const optQuery = ref({}); +const siteData = ref([]); // 场地表格数据 +const scrollHeight = ref(0); // table 高度 +const venueTypeData = ref([]); // 场地类型列表 +const currentVenueType = ref({}); // 当前场地类型 +const bookDateData = ref([]); // 日期列表 +const currentBookDate = ref({}); // 当前选中日期 +const isShowTypeRuleTxt = ref(false); -const selectedData = computed(_=>{ +const selectedData = computed(_=>{ // 已选中场地 let _temArr = []; siteData.value.forEach(e=>{ - if(e?.items?.length)_temArr.push(...e?.items?.filter(ele=>ele?._is_selected)) + if(e?.items?.length <= 0)return; + e?.items.forEach(ele=>{ + if(!ele?._is_selected)return; + _temArr.push({ + ...ele, + _venue_id: e?.id ?? 0, + _venue_name: e?.name ?? '' + }) + }) }); return _temArr }) watch(selectedData, val=>nextTick(setScrollViewSize)); +onLoad(async (opts) => { + try{ + const stadium_id = 167; + optQuery.value.stadium_id = stadium_id; + let _vtLs = await getTypeLs(stadium_id); + if(_vtLs?.length <=0)return showModal({ content: '没有场地类型！' }); + let _cvt = currentVenueType.value = _vtLs[0]; + let _dateLs = await getDateLs({ stadium_id, type_key: _cvt?.key ?? '', }); + if(_dateLs?.length <= 0)return showModal({ content: '没有日期列表！' }); + let _curDate = currentBookDate.value = _dateLs[0]; + nextTick(setScrollViewSize) + getBookList({ stadium_id, type_key: _cvt?.key ?? '', date: _curDate?._date ?? '' }); + }catch(err){ + console.warn(`site select onload err-->`, err); + } +}); +// 类型切换 +async function venueTypeChange(e){ + let _cvt = venueTypeData.value[e.detail.value]; + currentVenueType.value = _cvt; + bookDateData.value = []; + currentBookDate.value = {}; + siteData.value = []; + try{ + let stadium_id = optQuery?.value?.stadium_id ?? ''; + let _dateLs = await getDateLs({ stadium_id, type_key: _cvt?.key ?? '', }); + if(_dateLs?.length <= 0)return showModal({ content: '没有日期列表！' }); + let _curDate = currentBookDate.value = _dateLs[0]; + nextTick(setScrollViewSize) + getBookList({ stadium_id, type_key: _cvt?.key ?? '', date: _curDate?._date ?? '' }); + }catch(err){ + console.warn(`site select venueTypeChange err-->`, err); + } +} +// 日期切换 +async function bookDateChange(_date){ + currentBookDate.value = _date; + siteData.value = []; + try{ + let stadium_id = optQuery?.value?.stadium_id ?? ''; + let _cvt = currentVenueType.value ?? {} + getBookList({ stadium_id, type_key: _cvt?.key ?? '', date: _date?._date ?? '' }); + }catch(err){ + console.warn(`site select bookDateChange err-->`, err); + } +} +// 清除已选 +function clearSelectedData(){ + let stadium_id = optQuery?.value?.stadium_id ?? ''; + let _key = currentVenueType.value?.key ?? ''; + let _date = currentBookDate.value?._date ?? ''; + getBookList({ stadium_id, type_key: _key, date: _date }); +} -onLoad(() => { - stadiumBookList({ data: { - stadium_id: 167, - date: `2025-06-12`, - type_key: `631284d5-aed4-11ea-a89a-7085c2772a68`, - rule_type: 0, - brand_id: 63, - app_id: `wxc141a743225e7885`, +// 类型接口 +function getTypeLs(stadium_id){ + return venueTypes({ data: { stadium_id }, catch: true }) + .then(res=>{ + return venueTypeData.value = res?.data ?? []; + }) +} +// 添加自定义日期字段 +function formateDateLs(dates){ + if(dates?.length <= 0)return []; + return dates.map(e=>{ + const _date = e.date.substr(0,10); + return { + ...e, + _date, + _zh_day: get_zh_day(_date.replace(/\-/g,'/')), + _zh_date: get_zh_date(_date.replace(/\-/g,'/')), + } + }) +}; +// 日期列表 +function getDateLs({ stadium_id, type_key, num = 8 }){ + return bookDate({ + data: { + stadium_id, + type_key, + num + }, + catch: true + }) + .then(res=>{ + return bookDateData.value = formateDateLs(res?.data ?? []); + }); +} +// 可预订场馆，矩阵图 时间+场馆 +function getBookList({ + app_id = 'wxc141a743225e7885', + brand_id = 63, + stadium_id, + date = '', + type_key = `` +}){ + return bookList({ data: { + app_id, + brand_id, + stadium_id, + date, + type_key, token: `dbce2d0c-ce5d-11ef-9e0f-5254005df464`, enable_show_terminal: 1, from_platform: `weixin`, } }) .then(res=>{ - siteData.value = res?.data; + return siteData.value = res?.data; }) -}); - +} // 建议在 Page.onReady 或者更后的时机调用，调用过早可能出现获取的宽高信息不准确。 onReady(_=>{ setScrollViewSize(); -}) - +}); +// 获取table 高度 async function setScrollViewSize(){ const _sysInfo = uni.getSystemInfoSync(true); let _headerInfo = await getNodeMes('#ssHeader'); @@ -48,9 +156,7 @@ async function setScrollViewSize(){ let _footerInfo = await getNodeMes('#ssFooter'); let _otherHeight = _headerInfo?.height + _footerInfo?.height + _dateBarInfo?.height; scrollHeight.value = _sysInfo?.windowHeight - (_otherHeight || 0); - console.log(scrollHeight.value); } -