Skip to content

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

no message

parent d000383c
Show whitespace changes
Inline Side-by-side
Showing with 99 additions and 41 deletions
src/components/hotel/list/ListCar.vue
View file @ 829a5d1d
......@@ -9,17 +9,30 @@
</div>
<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">
<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="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}">
<div class="opera-box">
<div class="text-center full-width">
<q-btn rounded icon="mode" color="primary" dense unelevated class="q-mr-md" @click="setEditorHandler(y)"/>
<q-list bordered separator>
<q-slide-item class="rounded-borders" v-for="(y,i) in x.Hotels" :class="{'q-mt-sm':i>0}" :right-color="rightColor" @right="onRight">
<template v-slot:right>
<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}">
<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>
</template>
<div class="q-pa-sm rounded-borders bg-light-blue-1 hotel-car-item">
<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="text-center full-width" :class="{'column':$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-mb-lg':$q.platform.is.mobile}" @click="setEditorHandler(y)"/>
<q-btn rounded icon="delete" color="negative" dense unelevated @click="removeHotelHandler(xi,i)"/>
</div>
</div>
<div class="text-subtitle2 text-weight-bolder text-primary row items-center">
<span class="col">{{ y.HotelName }}</span>
<div class="col">
<span class="listCarHotelName" :style="{'width':$q.platform.is.desktop?'300px':'200px'}">{{ y.HotelName }}</span>
</div>
<div class="f12">
<span>{{ $t('hotel.shopping.TheSelected') }}</span>
<span class="text-red q-px-sm">{{ y.SumPeople }}</span>
......@@ -29,10 +42,13 @@
</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" v-for="z in y.DetailList">
<span class="col-3">{{ z.RoomName }}</span>
<span class="col-3">{{ moneyFormat(z.Unit_Price) }}/{{ $t('unit.ren') }}</span>
<span class="col-2">
<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>
......@@ -41,12 +57,15 @@
<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>
</q-slide-item>
</q-list>
</div>
</q-scroll-area>
......@@ -54,23 +73,21 @@
{{$t('noneData')}}
</div>
<div class="column q-px-md" v-if="cars && cars.length>0">
<div class="col q-py-lg"
:class="{'row':$q.platform.is.desktop,'wrap':$q.platform.is.desktop,'justify-between':$q.platform.is.desktop}">
<div class="col "
: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}">
<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" />
</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')]" />
<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>
<template v-if="parameters.OrderType == 1">
<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 :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>
</template>
......@@ -95,7 +112,7 @@
</template>
<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 useScrollModule from '../../../module/scrollbar/scrollModule'
import { DirtionmaryHelper } from '../../../config/dictionary'
......@@ -139,11 +156,34 @@ export default defineComponent({
]
})
data.scrollStyle = useScrollModule().scrollStyle
const info = ref(null)
const panning = ref(false)
// 今天购买数量
watch(cars.value, (n, o) => {
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 = {
onRight ({ reset }) {
finalize(reset)
},
getMoney() {
data.parameters.Money = 0
cars.value.forEach((item: any) => {
......@@ -220,7 +260,7 @@ export default defineComponent({
}
methods.getLength()
methods.getMoney()
return { ...toRefs(data), cars, TCNumRef, ContactNameRef, ContactNumberRef, ...methods, moneyFormat }
return { ...toRefs(data), cars, TCNumRef, ContactNameRef, ContactNumberRef, ...methods, moneyFormat, info, panning, rightColor,}
}
})
</script>
......@@ -248,4 +288,22 @@ export default defineComponent({
.hotel-car-item:hover .opera-box{
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>
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