Skip to content

B
bigwood
Commit 829a5d1d authored by youjie's avatar youjie
Browse files
Options

no message

parent d000383c
Hide whitespace changes
Inline Side-by-side
Showing with 99 additions and 41 deletions
src/components/hotel/list/ListCar.vue
View file @ 829a5d1d
...@@ -9,44 +9,63 @@ ...@@ -9,44 +9,63 @@
</div> </div>
<q-separator color="grey-3" class="q-mt-md" /> <q-separator color="grey-3" class="q-mt-md" />
<q-scroll-area v-if="cars && cars.length > 0" :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col"> <q-scroll-area v-if="cars && cars.length > 0" :thumb-style="scrollStyle.thumbStyle" :bar-style="scrollStyle.barStyle" class="col">
<div class="q-pa-sm rounded-borders bg-dark text-grey-2 q-mx-md q-mt-md" v-for="(x,xi) in cars">
<div class="q-pa-sm rounded-borders bg-dark text-grey-2 q-mx-md q-mt-md" v-for="(x,xi) in cars" >
<div class="text-subtitle1 din text-weight-bolder">{{ x.Date }}</div> <div class="text-subtitle1 din text-weight-bolder">{{ x.Date }}</div>
<div class="q-pa-sm rounded-borders bg-light-blue-1 hotel-car-item" v-for="(y,i) in x.Hotels" :class="{'q-mt-sm':i>0}"> <q-list bordered separator>
<div class="opera-box"> <q-slide-item class="rounded-borders" v-for="(y,i) in x.Hotels" :class="{'q-mt-sm':i>0}" :right-color="rightColor" @right="onRight">
<div class="text-center full-width"> <template v-slot:right>
<q-btn rounded icon="mode" color="primary" dense unelevated class="q-mr-md" @click="setEditorHandler(y)"/> <div v-if="$q.platform.is.mobile" :class="{'opera-box':$q.platform.is.desktop,'opera-box-mobile':$q.platform.is.mobile,'column':$q.platform.is.mobile,'justify-center':$q.platform.is.mobile,'q-px-md':$q.platform.is.mobile}">
<q-btn rounded icon="delete" color="negative" dense unelevated @click="removeHotelHandler(xi,i)"/> <div class="text-center full-width" :class="{'row':$q.platform.is.mobile,'items-center':$q.platform.is.mobile}">
<q-btn rounded icon="mode" color="primary" dense unelevated :class="{'q-mr-md':$q.platform.is.desktop,'q-mr-lg':$q.platform.is.mobile}" @click="setEditorHandler(y)"/>
<q-btn rounded icon="delete" color="negative" dense unelevated @click="removeHotelHandler(xi,i)"/>
</div>
</div> </div>
</div> </template>
<div class="text-subtitle2 text-weight-bolder text-primary row items-center"> <div class="q-pa-sm rounded-borders bg-light-blue-1 hotel-car-item">
<span class="col">{{ y.HotelName }}</span> <div v-if="$q.platform.is.desktop" :class="{'opera-box':$q.platform.is.desktop,'opera-box-mobile':$q.platform.is.mobile,'column':$q.platform.is.mobile,'justify-center':$q.platform.is.mobile,'q-px-md':$q.platform.is.mobile}">
<div class="f12"> <div class="text-center full-width" :class="{'column':$q.platform.is.mobile,'items-center':$q.platform.is.mobile}">
<span>{{ $t('hotel.shopping.TheSelected') }}</span> <q-btn rounded icon="mode" color="primary" dense unelevated :class="{'q-mr-md':$q.platform.is.desktop,'q-mb-lg':$q.platform.is.mobile}" @click="setEditorHandler(y)"/>
<span class="text-red q-px-sm">{{ y.SumPeople }}</span> <q-btn rounded icon="delete" color="negative" dense unelevated @click="removeHotelHandler(xi,i)"/>
<span>{{ $t('unit.ren') }}</span> </div>
<span class="text-red q-px-sm">{{ y.Total }}</span>
<span>{{ $t('hotel.shopping.between') }}</span>
</div> </div>
</div> <div class="text-subtitle2 text-weight-bolder text-primary row items-center">
<div class="q-mt-sm q-pb-sm text-dark" style="border-top: 1px dashed var(--q-primary); border-bottom: 1px dashed var(--q-primary)"> <div class="col">
<div class="row no-wrap items-center q-mt-sm" v-for="z in y.DetailList"> <span class="listCarHotelName" :style="{'width':$q.platform.is.desktop?'300px':'200px'}">{{ y.HotelName }}</span>
<span class="col-3">{{ z.RoomName }}</span> </div>
<span class="col-3">{{ moneyFormat(z.Unit_Price) }}/{{ $t('unit.ren') }}</span> <div class="f12">
<span class="col-2"> <span>{{ $t('hotel.shopping.TheSelected') }}</span>
<span>{{ z.PeopleNumber }}</span> <span class="text-red q-px-sm">{{ y.SumPeople }}</span>
<span>{{ $t('unit.ren') }}</span> <span>{{ $t('unit.ren') }}</span>
<span>{{ z.Number }}</span> <span class="text-red q-px-sm">{{ y.Total }}</span>
<span>{{ $t('hotel.shopping.between') }}</span> <span>{{ $t('hotel.shopping.between') }}</span>
</span> </div>
<span class="col text-right">{{ $t('hotelorder.xj') }}：{{ moneyFormat(z.Unit_Price * z.PeopleNumber) }}</span>
</div> </div>
<div class="q-mt-sm q-pb-sm text-dark" style="border-top: 1px dashed var(--q-primary); border-bottom: 1px dashed var(--q-primary)">
<div class="row no-wrap items-center q-mt-sm" :class="{'justify-between':$q.platform.is.mobile}" v-for="z in y.DetailList">
<div :class="{'col-6':$q.platform.is.desktop,'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<span :class="{'col-6':$q.platform.is.desktop,'q-mb-xs':$q.platform.is.mobile}">{{ z.RoomName }}</span>
<span :class="{'col-6':$q.platform.is.desktop}">{{ moneyFormat(z.Unit_Price) }}/{{ $t('unit.ren') }}</span>
</div>
<div :class="{'col':$q.platform.is.desktop,'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<span :class="{'col-4':$q.platform.is.desktop,'text-right':$q.platform.is.mobile,'q-mb-xs':$q.platform.is.mobile}">
<span>{{ z.PeopleNumber }}</span>
<span>{{ $t('unit.ren') }}</span>
<span>{{ z.Number }}</span>
<span>{{ $t('hotel.shopping.between') }}</span>
</span>
<span class="col text-right">{{ $t('hotelorder.xj') }}：{{ moneyFormat(z.Unit_Price * z.PeopleNumber) }}</span>
</div>
</div>
</div>
<div class="q-mt-sm row items-center text-dark justify-between q-pb-sm" v-if="y.TaxesPrice > 0 || y.PriceInTangTax > 0" style="border-bottom: 1px dashed var(--q-primary)">
<span v-if="y.TaxesPrice > 0">{{ $t('hotelorder.col.t') }}：{{ y.TaxesPrice }}*{{ y.SumPeople }}{{ $t('unit.ren') }}={{ moneyFormat(y.TaxesPrice * y.SumPeople) }}</span>
<span v-if="y.PriceInTangTax > 0">{{ $t('hotelorder.col.t2') }}：{{ y.PriceInTangTax }}*{{ y.SumPeople }}{{ $t('unit.ren') }}={{ moneyFormat(y.PriceInTangTax * y.SumPeople) }}</span>
</div>
<div class="q-mt-sm text-right text-primary">{{ $t('hotel.groupPrice') }}：{{ moneyFormat(y.Money) }}</div>
</div> </div>
<div class="q-mt-sm row items-center text-dark justify-between q-pb-sm" v-if="y.TaxesPrice > 0 || y.PriceInTangTax > 0" style="border-bottom: 1px dashed var(--q-primary)"> </q-slide-item>
<span v-if="y.TaxesPrice > 0">{{ $t('hotelorder.col.t') }}：{{ y.TaxesPrice }}*{{ y.SumPeople }}{{ $t('unit.ren') }}={{ moneyFormat(y.TaxesPrice * y.SumPeople) }}</span> </q-list>
<span v-if="y.PriceInTangTax > 0">{{ $t('hotelorder.col.t2') }}：{{ y.PriceInTangTax }}*{{ y.SumPeople }}{{ $t('unit.ren') }}={{ moneyFormat(y.PriceInTangTax * y.SumPeople) }}</span>
</div>
<div class="q-mt-sm text-right text-primary">{{ $t('hotel.groupPrice') }}：{{ moneyFormat(y.Money) }}</div>
</div>
</div> </div>
</q-scroll-area> </q-scroll-area>
...@@ -54,23 +73,21 @@ ...@@ -54,23 +73,21 @@
{{$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="col q-py-lg" <div class="col "
:class="{'row':$q.platform.is.desktop,'wrap':$q.platform.is.desktop,'justify-between':$q.platform.is.desktop}"> :class="{'row':$q.platform.is.desktop,'wrap':$q.platform.is.desktop,'justify-between':$q.platform.is.desktop,'q-py-lg':$q.platform.is.desktop,'q-py-sm':$q.platform.is.mobile,}">
<div :class="{'col-6':$q.platform.is.desktop}"> <div :class="{'col-6':$q.platform.is.desktop}">
<n-select filterable class="q-pb-lg" :class="{'q-pr-sm':$q.platform.is.desktop}" <n-select filterable :class="{'q-pr-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}"
v-model:value="parameters.OrderType" :placeholder="$t('hotel.car.OrderType')" :options="cacheHotels" max-tag-count="responsive" size="large" value-field="ID" label-field="Name" /> 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>
<div v-if="parameters.OrderType == 2" :class="{'col-6':$q.platform.is.desktop}"> <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')]" /> <q-input :class="{'q-pl-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" v-model="parameters.TCNum" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.TCNum')" ref="TCNumRef" :rules="$q.platform.is.desktop?[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.TCNum')]:[val => !!val || '']" />
</div> </div>
<template v-if="parameters.OrderType == 1"> <template v-if="parameters.OrderType == 1">
<div :class="{'col-6':$q.platform.is.desktop}"> <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.ContactName" :class="{'q-pl-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactName')" ref="ContactNameRef" :rules="$q.platform.is.desktop?[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactName')]:[val => !!val || '']" />
</div> </div>
<div :class="{'col-6':$q.platform.is.desktop}"> <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')]" /> <q-input v-model="parameters.ContactNumber" :class="{'col-6':$q.platform.is.desktop,'q-pr-sm':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.desktop,'q-pb-sm':$q.platform.is.mobile}" reverse-fill-mask dense type="text" standout :label="$t('hotel.car.inputText') + $t('hotel.car.ContactNumber')" ref="ContactNumberRef" :rules="$q.platform.is.desktop?[val => !!val || $t('hotel.car.inputText') + $t('hotel.car.ContactNumber')]:[val => !!val || '']" />
</div> </div>
</template> </template>
...@@ -95,7 +112,7 @@ ...@@ -95,7 +112,7 @@
</template> </template>
<script lang="ts"> <script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch } from 'vue' import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch, onBeforeUnmount, computed } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import useScrollModule from '../../../module/scrollbar/scrollModule' import useScrollModule from '../../../module/scrollbar/scrollModule'
import { DirtionmaryHelper } from '../../../config/dictionary' import { DirtionmaryHelper } from '../../../config/dictionary'
...@@ -139,11 +156,34 @@ export default defineComponent({ ...@@ -139,11 +156,34 @@ export default defineComponent({
] ]
}) })
data.scrollStyle = useScrollModule().scrollStyle data.scrollStyle = useScrollModule().scrollStyle
const info = ref(null)
const panning = ref(false)
// 今天购买数量 // 今天购买数量
watch(cars.value, (n, o) => { watch(cars.value, (n, o) => {
methods.getMoney() methods.getMoney()
}) })
const slideRatio = ref({
left: 0,
right: 0
})
const rightColor = computed(() => (
slideRatio.value.right >= 1
? 'bg-light-blue-1'
: 'blue-1'
))
let timer
function finalize (reset) {
timer = setTimeout(() => {
reset()
}, 1000)
}
onBeforeUnmount(() => {
clearTimeout(timer)
})
const methods = { const methods = {
onRight ({ reset }) {
finalize(reset)
},
getMoney() { getMoney() {
data.parameters.Money = 0 data.parameters.Money = 0
cars.value.forEach((item: any) => { cars.value.forEach((item: any) => {
...@@ -220,7 +260,7 @@ export default defineComponent({ ...@@ -220,7 +260,7 @@ export default defineComponent({
} }
methods.getLength() methods.getLength()
methods.getMoney() methods.getMoney()
return { ...toRefs(data), cars, TCNumRef, ContactNameRef, ContactNumberRef, ...methods, moneyFormat } return { ...toRefs(data), cars, TCNumRef, ContactNameRef, ContactNumberRef, ...methods, moneyFormat, info, panning, rightColor,}
} }
}) })
</script> </script>
...@@ -248,4 +288,22 @@ export default defineComponent({ ...@@ -248,4 +288,22 @@ export default defineComponent({
.hotel-car-item:hover .opera-box{ .hotel-car-item:hover .opera-box{
display: flex; display: flex;
} }
.hotel-car-item .opera-box-mobile{
position: absolute;
right: 0;
bottom: 0;
top: 0;
right: 0;
display: none;
background: rgba(0,0,0,.3);
flex-direction: column;
justify-content: center;
align-items: center;
}
.listCarHotelName{
display: block;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</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