Skip to content

B
bigwood
Commit 9255fee4 authored by youjie's avatar youjie
Browse files
Options

no message

parent 5b1b09e8
Hide whitespace changes
Inline Side-by-side
Showing with 73 additions and 44 deletions
src/App.vue
View file @ 9255fee4
...@@ -237,4 +237,13 @@ body ...@@ -237,4 +237,13 @@ body
background: var(--q-primary) background: var(--q-primary)
color: white color: white
cursor: pointer cursor: pointer
.draw-close-modile
position: fixed
right: 400px
top: 200px
border-bottom-left-radius: 5px
border-top-left-radius: 5px
background: var(--q-primary)
color: white
cursor: pointer
</style> </style>
src/components/hotel/list/ListCar.vue
View file @ 9255fee4
<template> <template>
<q-card class="bg-white q-pb-md window-height column" style="width: 500px"> <q-card class="bg-white q-pb-md window-height column" :style="{'width':$q.platform.is.desktop?'500px':'400px'}">
<div class="q-pt-md q-px-lg row items-center justify-between"> <div class="q-pt-md q-px-lg row items-center justify-between">
<span class="text-h6">{{ $t('hotel.car.subtitle') }}</span> <span class="text-h6">{{ $t('hotel.car.subtitle') }}</span>
<span v-html="$t('hotel.car.title', { days: cars.length, hotels: HotelLength })" class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12"></span> <span v-html="$t('hotel.car.title', { days: cars.length, hotels: HotelLength })" class="q-pa-sm rounded-border bg-orange-1 text-orange-8 f12"></span>
<div class="draw-close q-pa-sm"> <div class="q-pa-sm" :class="{'draw-close':$q.platform.is.desktop,'draw-close-modile':$q.platform.is.mobile}">
<q-icon name="close" size="26px" v-close-popup></q-icon> <q-icon name="close" size="26px" v-close-popup></q-icon>
</div> </div>
</div> </div>
...@@ -54,30 +54,41 @@ ...@@ -54,30 +54,41 @@
{{$t('noneData')}} {{$t('noneData')}}
</div> </div>
<div class="column q-px-md" v-if="cars && cars.length>0"> <div class="column q-px-md" v-if="cars && cars.length>0">
<div class="row wrap justify-between col q-py-lg"> <div class="col q-py-lg"
<div class="col-6 q-pb-sm"> :class="{'row':$q.platform.is.desktop,'wrap':$q.platform.is.desktop,'justify-between':$q.platform.is.desktop}">
<n-select filterable style="max-width: 200px" v-model:value="parameters.OrderType" :placeholder="$t('hotel.car.OrderType')" :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" /> <div :class="{'col-6':$q.platform.is.desktop}">
</div> <n-select filterable class="q-pb-lg" :class="{'q-pr-sm':$q.platform.is.desktop}"
<q-input v-if="parameters.OrderType == 2" class="col-6" v-model="parameters.TCNum" style="max-width: 200px" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.TCNum')" ref="TCNumRef" :rules="[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.TCNum')]" /> v-model:value="parameters.OrderType" :placeholder="$t('hotel.car.OrderType')" :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" />
</div>
<div v-if="parameters.OrderType == 2" :class="{'col-6':$q.platform.is.desktop}">
<q-input class="q-pb-lg" :class="{'q-pl-sm':$q.platform.is.desktop}" v-model="parameters.TCNum" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.TCNum')" ref="TCNumRef" :rules="[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.TCNum')]" />
</div>
<template v-if="parameters.OrderType == 1"> <template v-if="parameters.OrderType == 1">
<q-input v-model="parameters.ContactName" style="max-width: 200px" class="col-6" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactName')" ref="ContactNameRef" :rules="[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactName')]" /> <div :class="{'col-6':$q.platform.is.desktop}">
<q-input v-model="parameters.ContactName" class="q-pb-lg" :class="{'q-pl-sm':$q.platform.is.desktop}" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactName')" ref="ContactNameRef" :rules="[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactName')]" />
<q-input v-model="parameters.ContactNumber" style="max-width: 200px" class="col-6 q-mr-md" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactNumber')" ref="ContactNumberRef" :rules="[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactNumber')]" /> </div>
<div :class="{'col-6':$q.platform.is.desktop}">
<q-input v-model="parameters.ContactNumber" class="q-pb-lg" :class="{'col-6':$q.platform.is.desktop,'q-pr-sm':$q.platform.is.desktop}" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactNumber')" ref="ContactNumberRef" :rules="[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactNumber')]" />
</div>
</template> </template>
<q-input class="col-6" style="max-width: 200px" v-model="parameters.Remark" reverse-fill-mask dense filled clearable type="text" :label="$t('hotel.car.Remark')" /> <q-input :class="{'col-6':$q.platform.is.desktop,'q-pl-sm':$q.platform.is.desktop&&parameters.OrderType == 1,'q-pr-sm':$q.platform.is.desktop&&parameters.OrderType == 2,'q-pb-lg':$q.platform.is.desktop}" v-model="parameters.Remark" reverse-fill-mask dense filled clearable type="text" :label="$t('hotel.car.Remark')" />
</div> </div>
<div class="row justify-between items-center"> <div :class="{'row':$q.platform.is.desktop,'justify-between':$q.platform.is.desktop,'items-center':$q.platform.is.desktop,}">
<div class="text-negative text-weight-bolder din"> <div class="text-negative text-weight-bolder din">
<span class="text-weight-thin">{{$t('hotel.car.sumPrice')}}：</span> <span class="text-weight-thin">{{$t('hotel.car.sumPrice')}}：</span>
<span class="fz14">¥</span> <span class="fz14">¥</span>
<span class="text-h6">{{ moneyFormat(parameters.Money) }}</span> <span class="text-h6">{{ moneyFormat(parameters.Money) }}</span>
</div> </div>
<q-btn color="primary" size="md" unelevated class="q-px-xl" :loading="loading" @click="submit"> <div :class="{'row':$q.platform.is.mobile,'justify-end':$q.platform.is.mobile,'q-pt-sm':$q.platform.is.mobile}">
<div class="ellipsis"> <q-btn color="primary" size="md" unelevated class="q-px-xl" :loading="loading" @click="submit">
{{ $t('hotel.car.submit') }} <div class="ellipsis">
</div> {{ $t('hotel.car.submit') }}
</q-btn> </div>
</q-btn>
</div>
</div> </div>
</div> </div>
</q-card> </q-card>
......
src/components/hotel/list/TableOperation.vue
View file @ 9255fee4
<template> <template>
<q-card flat class="q-pa-lg" style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15); width: 50vw" :style="{'width':$q.platform.is.desktop?'50vw':'100vw'}"> <q-card flat class="q-pa-lg" style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);" :style="{'width':$q.platform.is.desktop?'50vw':'100vw'}">
<div class="q-mb-xs"> <div class="q-mb-xs">
<div class=""> <div class="">
<span class="text-primary text-h6">{{ parameters.HotelName }}</span> <span class="text-primary text-h6">{{ parameters.HotelName }}</span>
...@@ -17,34 +17,35 @@ ...@@ -17,34 +17,35 @@
</div> </div>
</div> </div>
<div class="f12 text-negative q-mb-md">{{ $t('hotel.waringTips') }}</div> <div class="f12 text-negative q-mb-md">{{ $t('hotel.waringTips') }}</div>
<div class="bg-grey-1 rounded-borders q-px-md q-py-sm" style="max-height: 35vh; overflow-y: auto"> <div class="rounded-borders" style="max-height: 35vh; overflow-y: auto" :class="{'bg-grey-1':$q.platform.is.desktop,'q-px-md':$q.platform.is.desktop,'q-py-sm':$q.platform.is.desktop,}">
<template v-for="(item, index) in parameters.DetailList"> <template v-for="(item, index) in parameters.DetailList">
<div class="row no-wrap items-center q-py-sm" :style="{ 'border-top': index > 0 && !item.Tips ? '1px dashed #ddd' : '' }"> <div class="row no-wrap items-center q-py-sm" :style="{ 'border-top': index > 0 && !item.Tips && $q.platform.is.desktop ? '1px dashed #ddd' : '' }"
<div :class="{'row':$q.platform.is.desktop,'col-5':$q.platform.is.desktop,'q-pr-md':$q.platform.is.mobile,'col-6':$q.platform.is.mobile,'column':$q.platform.is.mobile}"> :class="{'HotelTableOperation':$q.platform.is.mobile,'q-px-md':$q.platform.is.mobile,'q-mb-md':$q.platform.is.mobile}">
<div :class="{'q-pr-md':$q.platform.is.desktop,'col-4':$q.platform.is.desktop,}"> <div :class="{'row':$q.platform.is.desktop,'col-5':$q.platform.is.desktop,'q-pr-md':$q.platform.is.mobile,'col-6':$q.platform.is.mobile,'column':$q.platform.is.mobile}">
<div class="f12">{{ item.RoomName }}</div> <div :class="{'q-pr-md':$q.platform.is.desktop,'col-4':$q.platform.is.desktop,}">
</div> <div class="f12">{{ item.RoomName }}</div>
<div class="text-negative f12" :class="{'col-6':$q.platform.is.desktop,'q-pt-sm':$q.platform.is.mobile}">
<span class="fz10">¥</span>
<span class="din">{{ item.UPriceFormat }}</span>
<span class="text-dark" style="font-size: 12px">/{{ $t('unit.ren') }}</span>
</div>
</div> </div>
<div :class="{'row':$q.platform.is.desktop,'col':$q.platform.is.desktop,'q-pl-md':$q.platform.is.desktop,'column':$q.platform.is.mobile}"> <div class="text-negative f12" :class="{'col-6':$q.platform.is.desktop,'q-pt-sm':$q.platform.is.mobile}">
<div :class="{'col-7':$q.platform.is.desktop}"> <span class="fz10">¥</span>
<q-input style="width: 100%" @update:model-value="changePeople" v-model="item.PeopleNumber" class="col" :class="{'q-mr-md':$q.platform.is.desktop,'q-px-sm':$q.platform.is.desktop,'q-pl-sm':$q.platform.is.desktop,}" mask="#" reverse-fill-mask dense standout :label="$t('hotel.shopping.peopleNum')"> <span class="din">{{ item.UPriceFormat }}</span>
<template v-slot:prepend> <span class="text-dark" style="font-size: 12px">/{{ $t('unit.ren') }}</span>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="remove" @click="addPeople(item, 0)" />
</template>
<template v-slot:append>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="add" @click="addPeople(item, 1)" />
</template>
</q-input>
</div>
<div :class="{'col':$q.platform.is.desktop,'text-center':$q.platform.is.desktop,'text-right':$q.platform.is.mobile,}">
<span class="f12 text-grey-6" v-html="$t('hotel.yg', { roomCount: item.Number })"></span>
</div>
</div> </div>
</div>
<div :class="{'row':$q.platform.is.desktop,'col':$q.platform.is.desktop,'q-pl-md':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div :class="{'col-7':$q.platform.is.desktop}">
<q-input style="width: 100%" @update:model-value="changePeople" v-model="item.PeopleNumber" class="col" :class="{'q-mr-md':$q.platform.is.desktop,'q-px-sm':$q.platform.is.desktop,'q-pl-sm':$q.platform.is.desktop,}" mask="#" reverse-fill-mask dense standout :label="$t('hotel.shopping.peopleNum')">
<template v-slot:prepend>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="remove" @click="addPeople(item, 0)" />
</template>
<template v-slot:append>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="add" @click="addPeople(item, 1)" />
</template>
</q-input>
</div>
<div :class="{'col':$q.platform.is.desktop,'text-center':$q.platform.is.desktop,'text-right':$q.platform.is.mobile,}">
<span class="f12 text-grey-6" v-html="$t('hotel.yg', { roomCount: item.Number })"></span>
</div>
</div>
</div> </div>
</template> </template>
</div> </div>
...@@ -276,4 +277,12 @@ export default defineComponent({ ...@@ -276,4 +277,12 @@ export default defineComponent({
}) })
</script> </script>
<style></style> <style>
.HotelTableOperation{
box-shadow: 0 1px 3px #0003, 0 1px 1px #00000024, 0 2px 1px -1px #0000001f;
border-radius: 10px;
vertical-align: top;
background: #EEEEEE;
position: relative;
}
</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