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>
<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 />
<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>
<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 />
<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>
<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-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>
<q-btn unelevated class="bg-grey-3 hover q-mr-md" icon="shopping_cart" :title="$t('hotel.car.shoppingTitle')" @click="rightCarOpen=true">
<q-badge color="red" rounded floating>{{HotelLength}}</q-badge>
<q-btn unelevated class="bg-grey-3 hover q-mr-md" icon="shopping_cart" :title="$t('hotel.car.shoppingTitle')"
@click="rightCarOpen = true">
<q-badge color="red" rounded floating>{{ HotelLength }}</q-badge>
</q-btn>
<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>
<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">
<div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
<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 class="q-my-md" v-if="$q.platform.is.mobile">
<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>
<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-field>
</div>
<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 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 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.MaxPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" />
<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.MaxPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout
:label="$t('hotel.maxPrice')" />
</div>
</q-card>
</q-popup-proxy>
......@@ -58,7 +75,7 @@ import { computed, inject, provide, reactive, ref, toRefs, defineComponent, onMo
import HotelService from '../../../api/hotel'
import message from '../../../utils/message'
import { ApiResult } from '../../../@types/enumHelper'
import { CascaderOption,NCascader,NSelect } from 'naive-ui'
import { CascaderOption, NCascader, NSelect } from 'naive-ui'
import { date } from 'quasar'
import { HotelRate, useHotel } from '../../../utils/hotelRate'
import { useQuasar } from 'quasar'
......@@ -174,7 +191,7 @@ export default defineComponent({
changearea(e: number, option: any, pathValues: Array<any>) {
search.Province = 0
search.City = 0
if(pathValues){
if (pathValues) {
if (pathValues.length > 0) {
search.Province = pathValues[0].ID
}
......@@ -188,10 +205,10 @@ export default defineComponent({
console.log(search.HotelChooseArray)
}, 1000)
},
close(){
close() {
data.rightCarOpen = false
},
setSuccess(){
setSuccess() {
data.rightCarOpen = false
},
}
......@@ -210,13 +227,13 @@ export default defineComponent({
methods.initAddress()
methods.initHotels()
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) => {
HotelLength.value = n
})
onMounted(()=>{
onMounted(() => {
HotelLength.value = cars.value.length
})
return {
......
src/components/ticket/list/ListHeader.vue
View file @ b5941db6
<template>
<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 />
<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>
<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 />
<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>
<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-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>
<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-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-btn>
<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" />
<svg-icon color="dark" icon="Text/Filter.svg" :tips="$t('morequery')" :size="20"></svg-icon>
<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-card class="q-pa-md rounded-borders" style="width: 300px">
<div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
<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" 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 class="q-my-md" v-if="$q.platform.is.mobile">
<q-field stack-label :label="$t('daterange')" standout class="col-2" style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div>
<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-popup-proxy>
</q-field>
</div>
<div class="row items-center">
<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-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>
<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-card class="q-pa-md rounded-borders" style="width: 300px">
<div class="q-mb-md text-subtitle2">{{ $t('morequery') }}</div>
<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"
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 class="q-my-md" v-if="$q.platform.is.mobile">
<q-field stack-label :label="$t('daterange')" standout class="col-2" style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div>
<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-popup-proxy>
</q-field>
</div>
<div class="row items-center">
<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 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-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" />
<!-- view_list grid_view -->
</div>
</template>
......@@ -71,7 +88,7 @@ export default {
cascader: {
addressValue: null
} as any,
searchClone:{} as any,
searchClone: {} as any,
canHide: false,
})
const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
......@@ -128,11 +145,11 @@ export default {
}
}
},
setSearchHandler(){
setSearchHandler() {
search.msg = JSON.parse(JSON.stringify(data.searchClone))
},
changeViewHandler(t:number){
data.searchClone.ViewType=t
changeViewHandler(t: number) {
data.searchClone.ViewType = t
methods.setSearchHandler()
},
dateRangeHandler(e: any) {
......@@ -148,8 +165,8 @@ export default {
if (data.searchClone.QProvince > 0) setCnt++
if (data.searchClone.OpenTime) setCnt++
}
if (data.searchClone.StartPrice>0) setCnt++
if (data.searchClone.EndPrice>0) setCnt++
if (data.searchClone.StartPrice > 0) setCnt++
if (data.searchClone.EndPrice > 0) setCnt++
return setCnt
})
methods.initAddress()
......@@ -163,4 +180,6 @@ export default {
}
</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