|
|
|
@ -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); |
|
|
|
} |
|
|
|
|
|
|
|
</script> |
|
|
|
|
|
|
|
<template> |
|
|
|
@ -61,22 +167,28 @@ async function setScrollViewSize(){ |
|
|
|
<view class="ss-name">MJ体育(天空篮球从云店)</view> |
|
|
|
</view> |
|
|
|
<view class="sh-bottom"> |
|
|
|
<picker class="sb-classify"> |
|
|
|
<view class="sc-txt">羽毛球</view> |
|
|
|
<picker class="sb-classify" mode='selector' :range="venueTypeData" range-key="name" @change="venueTypeChange"> |
|
|
|
<view class="sc-txt">{{ currentVenueType?.name ?? '-' }}</view> |
|
|
|
<view class="sc-icon"></view> |
|
|
|
</picker> |
|
|
|
<view class="sb-desc"> |
|
|
|
<view class="sd-txt">1号+2号或3号+4号为一个全场，</view> |
|
|
|
<view class="sd-arrow-cover"><text></text></view> |
|
|
|
<view class="sd-full-txt" v-if="false">1号+2号或3号+4号为一个全场，</view> |
|
|
|
<view class="sd-txt">{{ currentVenueType?.rule_text ?? '' }}</view> |
|
|
|
<view class="sd-arrow-cover" @click="isShowTypeRuleTxt = !isShowTypeRuleTxt" v-if="currentVenueType?.rule_text?.length > 17"><text></text></view> |
|
|
|
<view class="sd-full-txt" v-if="isShowTypeRuleTxt&¤tVenueType?.rule_text?.length > 17">{{ currentVenueType?.rule_text ?? '' }}</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
<view class="ss-main"> |
|
|
|
<scroll-view class="sm-dates" id="smDates" scroll-x> |
|
|
|
<view class="sd-item" :class="{ active: i === 1 }" v-for="i in 20" :key="i"> |
|
|
|
<view class="si-week">今天</view> |
|
|
|
<view class="si-day">6月10日</view> |
|
|
|
<view |
|
|
|
class="sd-item" |
|
|
|
:class="{ active: currentBookDate.date === e.date }" |
|
|
|
v-for="(e, i) in bookDateData" |
|
|
|
:key="i" |
|
|
|
@click="bookDateChange(e)" |
|
|
|
> |
|
|
|
<view class="si-week">{{ e._zh_day ?? '-' }}</view> |
|
|
|
<view class="si-day">{{ e._zh_date ?? '-' }}</view> |
|
|
|
</view> |
|
|
|
</scroll-view> |
|
|
|
<site-table |
|
|
|
@ -86,7 +198,7 @@ async function setScrollViewSize(){ |
|
|
|
></site-table> |
|
|
|
</view> |
|
|
|
<view class="ss-footer" id="ssFooter"> |
|
|
|
<site-footer :selected-data="selectedData"></site-footer> |
|
|
|
<site-footer :selected-data="selectedData" @click:clear="clearSelectedData"></site-footer> |
|
|
|
</view> |
|
|
|
</view> |
|
|
|
</template> |
|
|
|
|
