Skip to content

B
bigwood
Commit b5941db6 authored by 黄奎's avatar 黄奎
Browse files
Options

1

parent 7b1db0cb
Hide whitespace changes
Inline Side-by-side
Showing with 95 additions and 59 deletions
src/components/hotel/list/ListHeader.vue
View file @ b5941db6
<template> <template>
<div class="rounded-borders bg-white row items-center q-pa-md"> <div class="rounded-borders bg-white row items-center q-pa-md">
<n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade /> <n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border" @update:value="changearea"
<q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2" style="min-width: 190px" dense> v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all"
:options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade />
<q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2"
style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div> <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy"> <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape @range-end="dateRangeHandler"></q-date> <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
@range-end="dateRangeHandler"></q-date>
</q-popup-proxy> </q-popup-proxy>
</q-field> </q-field>
<n-select v-if="$q.platform.is.desktop" filterable @update:value="changeHotel" class="q-ml-lg col-2" style="min-width: 190px" clearable v-model:value="search.HotelChooseArray" :placeholder="$t('hotel.searchName')" multiple :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" /> <n-select v-if="$q.platform.is.desktop" filterable @update:value="changeHotel" class="q-ml-lg col-2"
style="min-width: 190px" clearable v-model:value="search.HotelChooseArray" :placeholder="$t('hotel.searchName')"
multiple :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" />
<div class="col"></div> <div class="col"></div>
<q-btn unelevated class="bg-grey-3 hover q-mr-md" icon="shopping_cart" :title="$t('hotel.car.shoppingTitle')" @click="rightCarOpen=true"> <q-btn unelevated class="bg-grey-3 hover q-mr-md" icon="shopping_cart" :title="$t('hotel.car.shoppingTitle')"
<q-badge color="red" rounded floating>{{HotelLength}}</q-badge> @click="rightCarOpen = true">
<q-badge color="red" rounded floating>{{ HotelLength }}</q-badge>
</q-btn> </q-btn>
<q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')"> <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
<q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt" v-if="searchCnt > 0" /> <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt"
v-if="searchCnt > 0" />
<svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon> <svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
<q-tooltip>{{ $t('morequery') }}</q-tooltip> <q-tooltip>{{ $t('morequery') }}</q-tooltip>
<q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="canHide"> <q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]"
:model-value="canHide">
<q-card class="q-pa-md rounded-borders" style="width: 300px"> <q-card class="q-pa-md rounded-borders" style="width: 300px">
<div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div> <div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
<div v-if="$q.platform.is.mobile"> <div v-if="$q.platform.is.mobile">
<n-cascader @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade /> <n-cascader @update:value="changearea" v-model:value="cascader.addressValue" size="large"
:placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID"
label-field="Name" remote :on-load="loadChilds" cascade />
</div> </div>
<div class="q-my-md" v-if="$q.platform.is.mobile"> <div class="q-my-md" v-if="$q.platform.is.mobile">
<q-field stack-label :label="$t('daterange')" outlined style="min-width: 190px" dense> <q-field stack-label :label="$t('daterange')" outlined style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div> <div class="self-center full-width no-outline" tabindex="0">{{ dateRangeFormat }}</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy"> <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape @range-end="dateRangeHandler"></q-date> <q-date v-model="dateRange" :options="optionsFn" range mask="YYYY/MM/DD" landscape
@range-end="dateRangeHandler"></q-date>
</q-popup-proxy> </q-popup-proxy>
</q-field> </q-field>
</div> </div>
<div v-if="$q.platform.is.mobile"> <div v-if="$q.platform.is.mobile">
<n-select filterable style="min-width: 190px" clearable v-model:value="search.HotelChooseArray" :placeholder="$t('hotel.searchName')" multiple :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" /> <n-select filterable style="min-width: 190px" clearable v-model:value="search.HotelChooseArray"
:placeholder="$t('hotel.searchName')" multiple :options="cacheHotels" max-tag-count="responsive"
size="large" value-field="ID" label-field="Name" />
</div> </div>
<div class="q-my-md"> <div class="q-my-md">
<q-select v-model="search.Star" dense :options="hotelsRates" emit-value option-label="name" option-value="id" map-options clearable :label="$t('hotel.hotelRate')" standout /> <q-select v-model="search.Star" dense :options="hotelsRates" emit-value option-label="name"
option-value="id" map-options clearable :label="$t('hotel.hotelRate')" standout />
</div> </div>
<div class="row items-center"> <div class="row items-center">
<q-input v-model="search.MinPrice" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('hotel.minPrice')" /> <q-input v-model="search.MinPrice" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text"
<q-input v-model="search.MaxPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" /> standout :label="$t('hotel.minPrice')" />
<q-input v-model="search.MaxPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout
:label="$t('hotel.maxPrice')" />
</div> </div>
</q-card> </q-card>
</q-popup-proxy> </q-popup-proxy>
...@@ -58,7 +75,7 @@ import { computed, inject, provide, reactive, ref, toRefs, defineComponent, onMo ...@@ -58,7 +75,7 @@ import { computed, inject, provide, reactive, ref, toRefs, defineComponent, onMo
import HotelService from '../../../api/hotel' import HotelService from '../../../api/hotel'
import message from '../../../utils/message' import message from '../../../utils/message'
import { ApiResult } from '../../../@types/enumHelper' import { ApiResult } from '../../../@types/enumHelper'
import { CascaderOption,NCascader,NSelect } from 'naive-ui' import { CascaderOption, NCascader, NSelect } from 'naive-ui'
import { date } from 'quasar' import { date } from 'quasar'
import { HotelRate, useHotel } from '../../../utils/hotelRate' import { HotelRate, useHotel } from '../../../utils/hotelRate'
import { useQuasar } from 'quasar' import { useQuasar } from 'quasar'
...@@ -174,7 +191,7 @@ export default defineComponent({ ...@@ -174,7 +191,7 @@ export default defineComponent({
changearea(e: number, option: any, pathValues: Array<any>) { changearea(e: number, option: any, pathValues: Array<any>) {
search.Province = 0 search.Province = 0
search.City = 0 search.City = 0
if(pathValues){ if (pathValues) {
if (pathValues.length > 0) { if (pathValues.length > 0) {
search.Province = pathValues[0].ID search.Province = pathValues[0].ID
} }
...@@ -188,10 +205,10 @@ export default defineComponent({ ...@@ -188,10 +205,10 @@ export default defineComponent({
console.log(search.HotelChooseArray) console.log(search.HotelChooseArray)
}, 1000) }, 1000)
}, },
close(){ close() {
data.rightCarOpen = false data.rightCarOpen = false
}, },
setSuccess(){ setSuccess() {
data.rightCarOpen = false data.rightCarOpen = false
}, },
} }
...@@ -210,13 +227,13 @@ export default defineComponent({ ...@@ -210,13 +227,13 @@ export default defineComponent({
methods.initAddress() methods.initAddress()
methods.initHotels() methods.initHotels()
watch(cars.value, (n, o) => { watch(cars.value, (n, o) => {
localStorage.setItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE,JSON.stringify(cars.value)) localStorage.setItem(DirtionmaryHelper.HOTEL_HOTELCARS_CACHE, JSON.stringify(cars.value))
}) })
watch(HotelLength, (n, o) => { watch(HotelLength, (n, o) => {
HotelLength.value = n HotelLength.value = n
}) })
onMounted(()=>{ onMounted(() => {
HotelLength.value = cars.value.length HotelLength.value = cars.value.length
}) })
return { return {
......
src/components/ticket/list/ListHeader.vue
View file @ b5941db6
<template> <template>
<div class="rounded-borders bg-white row items-center q-pa-md"> <div class="rounded-borders bg-white row items-center q-pa-md">
<n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade /> <n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border" @update:value="changearea"
<q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2" style="min-width: 190px" dense> v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all"
:options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade />
<q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2"
style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div> <div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy"> <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="searchClone.OpenTime" :options="optionsFn" mask="YYYY/MM/DD" @update:model-value="dateRangeHandler"></q-date> <q-date v-model="searchClone.OpenTime" :options="optionsFn" mask="YYYY/MM/DD"
@update:model-value="dateRangeHandler"></q-date>
</q-popup-proxy> </q-popup-proxy>
</q-field> </q-field>
<q-input v-model="searchClone.Name" standout :class="{'q-ml-lg':$q.platform.is.desktop,'col':$q.platform.is.mobile}" style="min-width:150px;" dense :label="$t('v102.ticket.name')" /> <q-input v-model="searchClone.Name" standout :class="{ 'q-ml-lg': $q.platform.is.desktop, 'col': $q.platform.is.mobile }"
style="min-width:150px;" dense :label="$t('v102.ticket.name')" />
<div class="col" v-if="$q.platform.is.desktop"></div> <div class="col" v-if="$q.platform.is.desktop"></div>
<q-btn v-if="searchClone.ViewType==1" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat :icon="$q.platform.is.desktop?'view_list':'view_stream'" class="bg-grey-3 hover q-mr-md q-ml-md" color="dark" @click="changeViewHandler(2)"> <q-btn v-if="searchClone.ViewType == 1" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat
:icon="$q.platform.is.desktop ? 'view_list' : 'view_stream'" class="bg-grey-3 hover q-mr-md q-ml-md" color="dark"
@click="changeViewHandler(2)">
<q-tooltip class="bg-dark">{{ $t('v102.ticket.toggleListType1') }}</q-tooltip> <q-tooltip class="bg-dark">{{ $t('v102.ticket.toggleListType1') }}</q-tooltip>
</q-btn> </q-btn>
<q-btn v-if="searchClone.ViewType==2" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat icon="grid_view" class="bg-grey-3 hover q-mr-md q-ml-md" color="dark" @click="changeViewHandler(1)"> <q-btn v-if="searchClone.ViewType == 2" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat
icon="grid_view" class="bg-grey-3 hover q-mr-md q-ml-md" color="dark" @click="changeViewHandler(1)">
<q-tooltip class="bg-dark">{{ $t('v102.ticket.toggleListType2') }}</q-tooltip> <q-tooltip class="bg-dark">{{ $t('v102.ticket.toggleListType2') }}</q-tooltip>
</q-btn> </q-btn>
<q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')"> <q-btn unelevated class="bg-grey-3 hover q-mr-md" :title="$t('morequery')">
<q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt" v-if="searchCnt > 0" /> <q-badge rounded class="din bg-red-2 text-red-14 text-weight-bold" floating :label="searchCnt"
<svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon> v-if="searchCnt > 0" />
<q-tooltip>{{ $t('morequery') }}</q-tooltip> <svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
<q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]" :model-value="canHide"> <q-tooltip>{{ $t('morequery') }}</q-tooltip>
<q-card class="q-pa-md rounded-borders" style="width: 300px"> <q-popup-proxy class="no-shadow" style="box-shadow: 0 0 50px #ddd !important" :offset="[0, 20]"
<div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div> :model-value="canHide">
<div class="q-my-md" v-if="$q.platform.is.mobile"> <q-card class="q-pa-md rounded-borders" style="width: 300px">
<n-cascader class="col-2 no-border" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade /> <div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
</div> <div class="q-my-md" v-if="$q.platform.is.mobile">
<div class="q-my-md" v-if="$q.platform.is.mobile"> <n-cascader class="col-2 no-border" @update:value="changearea" v-model:value="cascader.addressValue"
<q-field stack-label :label="$t('daterange')" standout class="col-2" style="min-width: 190px" dense> size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces"
<div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div> value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade />
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy"> </div>
<q-date v-model="searchClone.OpenTime" :options="optionsFn" mask="YYYY/MM/DD" @update:model-value="dateRangeHandler"></q-date> <div class="q-my-md" v-if="$q.platform.is.mobile">
</q-popup-proxy> <q-field stack-label :label="$t('daterange')" standout class="col-2" style="min-width: 190px" dense>
</q-field> <div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div>
</div> <q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<div class="row items-center"> <q-date v-model="searchClone.OpenTime" :options="optionsFn" mask="YYYY/MM/DD"
<q-input v-model="searchClone.StartPrice" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('hotel.minPrice')" /> @update:model-value="dateRangeHandler"></q-date>
<q-input v-model="searchClone.EndPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" /> </q-popup-proxy>
</div> </q-field>
</div>
</q-card> <div class="row items-center">
</q-popup-proxy> <q-input v-model="searchClone.StartPrice" class="col q-mr-md" mask="#.##" reverse-fill-mask dense
type="text" standout :label="$t('hotel.minPrice')" />
<q-input v-model="searchClone.EndPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text"
standout :label="$t('hotel.maxPrice')" />
</div>
</q-card>
</q-popup-proxy>
</q-btn> </q-btn>
<q-btn v-if="$q.platform.is.desktop" color="primary" unelevated :label="$t('query')" @click="setSearchHandler"/> <q-btn v-if="$q.platform.is.desktop" color="primary" unelevated :label="$t('query')" @click="setSearchHandler" />
<q-btn v-else color="primary" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" :icon="$q.platform.is.mobile?'search':''" unelevated :label="$q.platform.is.mobile?'':$t('query')" @click="setSearchHandler"/> <q-btn v-else color="primary" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile"
:icon="$q.platform.is.mobile ? 'search' : ''" unelevated :label="$q.platform.is.mobile ? '' : $t('query')"
@click="setSearchHandler" />
<!-- view_list grid_view --> <!-- view_list grid_view -->
</div> </div>
</template> </template>
...@@ -71,7 +88,7 @@ export default { ...@@ -71,7 +88,7 @@ export default {
cascader: { cascader: {
addressValue: null addressValue: null
} as any, } as any,
searchClone:{} as any, searchClone: {} as any,
canHide: false, canHide: false,
}) })
const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
...@@ -128,11 +145,11 @@ export default { ...@@ -128,11 +145,11 @@ export default {
} }
} }
}, },
setSearchHandler(){ setSearchHandler() {
search.msg = JSON.parse(JSON.stringify(data.searchClone)) search.msg = JSON.parse(JSON.stringify(data.searchClone))
}, },
changeViewHandler(t:number){ changeViewHandler(t: number) {
data.searchClone.ViewType=t data.searchClone.ViewType = t
methods.setSearchHandler() methods.setSearchHandler()
}, },
dateRangeHandler(e: any) { dateRangeHandler(e: any) {
...@@ -148,8 +165,8 @@ export default { ...@@ -148,8 +165,8 @@ export default {
if (data.searchClone.QProvince > 0) setCnt++ if (data.searchClone.QProvince > 0) setCnt++
if (data.searchClone.OpenTime) setCnt++ if (data.searchClone.OpenTime) setCnt++
} }
if (data.searchClone.StartPrice>0) setCnt++ if (data.searchClone.StartPrice > 0) setCnt++
if (data.searchClone.EndPrice>0) setCnt++ if (data.searchClone.EndPrice > 0) setCnt++
return setCnt return setCnt
}) })
methods.initAddress() methods.initAddress()
...@@ -163,4 +180,6 @@ export default { ...@@ -163,4 +180,6 @@ export default {
} }
</script> </script>
<style></style> <style>
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment