Skip to content
Projects
Groups
Snippets
Help
Loading...
Help
Submit feedback
Contribute to GitLab
Sign in
Toggle navigation
B
bigwood
Project
Project
Details
Activity
Releases
Cycle Analytics
Repository
Repository
Files
Commits
Branches
Tags
Contributors
Graph
Compare
Charts
Issues
0
Issues
0
List
Board
Labels
Milestones
CI / CD
CI / CD
Pipelines
Jobs
Schedules
Charts
Wiki
Wiki
Snippets
Snippets
Members
Members
Collapse sidebar
Close sidebar
Activity
Graph
Charts
Create a new issue
Jobs
Commits
Issue Boards
Open sidebar
罗超
bigwood
Commits
98dbe879
Commit
98dbe879
authored
Dec 21, 2022
by
youjie
Browse files
Options
Browse Files
Download
Email Patches
Plain Diff
no message
parent
99e0946c
Hide whitespace changes
Inline
Side-by-side
Showing
8 changed files
with
321 additions
and
206 deletions
+321
-206
DetailsList.vue
src/components/scattered/list/DetailsList.vue
+22
-19
ListTable.vue
src/components/scattered/list/ListTable.vue
+1
-1
OrderList.vue
src/components/scattered/order/OrderList.vue
+54
-1
OrderListHeader.vue
src/components/scattered/order/OrderListHeader.vue
+22
-3
OrderdDetail.vue
src/components/scattered/order/OrderdDetail.vue
+138
-130
HotelOrder.vue
src/pages/scattered/HotelOrder.vue
+1
-1
HotelSure.vue
src/pages/scattered/HotelSure.vue
+39
-35
hotelDetails.vue
src/pages/scattered/hotelDetails.vue
+44
-16
No files found.
src/components/scattered/list/DetailsList.vue
View file @
98dbe879
<
template
>
<
template
>
<div
class=
"rounded-borders bg-white row items-center q-pb-md"
>
<div
class=
"rounded-borders bg-white row items-center q-pb-md"
>
<q-field
v-if=
"$q.platform.is.desktop"
stack-label
:label=
"$t('v101.scatteredDetails.ruzhuTime')+'/'+$t('v101.scatteredDetails.tuifangTime')"
standout
class=
"col-2"
style=
"min-width: 200px"
dense
>
<q-field
stack-label
:label=
"$t('v101.scatteredDetails.ruzhuTime')+'/'+$t('v101.scatteredDetails.tuifangTime')"
standout
class=
"col-2"
style=
"min-width: 200px"
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
class=
"row"
>
<div
class=
"row"
:class=
"
{'q-mt-sm':$q.platform.is.mobile}"
>
<q-select
class=
"q-ml-lg
"
style=
"min-width: 90px;z-index: 99999;"
unelevated
v-model=
"room"
dense
:options=
"theRooms"
emit-value
option-label=
"name"
option-value=
"id"
map-options
:label=
"$t('v101.scattered.kefang')"
standout
@
update:model-value=
"getRoomList"
>
<q-select
:class=
"
{'q-ml-lg':$q.platform.is.desktop}
" style="min-width: 90px;z-index: 99999;" unelevated v-model="room" dense :options="theRooms" emit-value option-label="name" option-value="id" map-options :label="$t('v101.scattered.kefang')" standout @update:model-value="getRoomList">
</q-select>
</q-select>
<q-btn
unelevated
class=
"bg-white hover q-px-xs q-py-sm q-ml-xs text-grey-6"
icon=
"person"
>
<q-btn
unelevated
class=
"bg-white hover q-px-xs q-py-sm q-ml-xs text-grey-6"
icon=
"person"
>
<div
class=
"text-dark q-ml-xs"
>
<div
class=
"text-dark q-ml-xs"
>
...
@@ -31,25 +31,28 @@
...
@@ -31,25 +31,28 @@
</q-popup-proxy>
</q-popup-proxy>
</q-btn>
</q-btn>
</div>
</div>
<div
class=
"q-pl-lg text-red-6 row items-center"
style=
"position: relative;"
>
<div
class=
"q-pl-lg text-red-6 row items-center"
style=
"position: relative;"
v-if=
"$q.platform.is.desktop"
>
<q-icon
class=
"absolute"
style=
"left: 85px;top: 0;"
name=
"information"
size=
"18px"
></q-icon>
<q-icon
class=
"absolute"
style=
"left: 85px;top: 0;"
name=
"information"
size=
"18px"
></q-icon>
<span
class=
"q-pl-lg"
>
{{ $t('v101.scatteredDetails.prompt') }}
</span>
<span
class=
"q-pl-lg"
>
{{ $t('v101.scatteredDetails.prompt') }}
</span>
</div>
</div>
<div
class=
"col"
></div>
<div
class=
"col"
></div>
<q-btn
color=
"primary"
unelevated
:label=
"$t('query')"
:loading=
"loading"
@
click=
"initHotel"
/>
<q-btn
color=
"primary"
unelevated
:label=
"$t('query')"
:loading=
"loading"
@
click=
"initHotel"
/>
</div>
</div>
<div
class=
"q-pl-lg q-pb-lg text-red-6 row items-center"
style=
"position: relative;"
v-if=
"$q.platform.is.mobile"
>
<q-icon
class=
"absolute"
style=
"left: 65px;top: 0;"
name=
"information"
size=
"18px"
></q-icon>
<span
class=
"q-pl-sm"
>
{{ $t('v101.scatteredDetails.prompt') }}
</span>
</div>
<div
class=
"bg-light-blue-1 q-pa-md fz14 rounded-borders row items-center"
>
<div
class=
"bg-light-blue-1 q-pa-md fz14 rounded-borders row items-center"
>
<div
class=
"text-weight-bold"
>
{{ $t('v101.scatteredDetails.fuheTJroom') }}
</div>
<div
class=
"text-weight-bold"
>
{{ $t('v101.scatteredDetails.fuheTJroom') }}
</div>
</div>
</div>
<
q-card
class=
"q-my-md"
>
<
div
class=
"q-my-md"
>
<
template
v-if=
"SimilarList&&SimilarList.length>0"
>
<
template
v-if=
"SimilarList&&SimilarList.length>0"
>
<div
class=
"row"
v-for=
"(item,index) in SimilarList"
:key=
"index"
v-loading=
"loading"
>
<q-card
class=
"row q-mb-md"
v-for=
"(item,index) in SimilarList"
:key=
"index"
v-loading=
"loading"
>
<div
class=
"col-3 col row no-wrap justify-between q-pa-sm q-pr-lg"
style=
"border-right: 1px solid #eeeeee;"
>
<div
class=
"col q-pa-sm q-pr-lg"
:class=
"
{'col-3 row no-wrap justify-between': $q.platform.is.desktop,'col-4 column': $q.platform.is.mobile}" :style="{'border-right': $q.platform.is.desktop?'1px solid #eeeeee':''}">
<!-- @click="showImageHandler" -->
<div
v-if=
"$q.platform.is.desktop"
:class=
"
{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" :style="{'height':$q.platform.is.desktop?'100px':'50px'}">
<div
class=
"col-6"
style=
"height: 100px;"
>
<q-img
:src=
"item.roomImageURL"
:style=
"
{'height':$q.platform.is.desktop?'100%':'50px'}" spinner-color="drk" spinner-size="20px" mode="cover"/>
<q-img
:src=
"item.roomImageURL"
style=
"height: 100px;"
spinner-color=
"drk"
spinner-size=
"20px"
height=
"100%"
mode=
"cover"
/>
</div>
</div>
<div
class=
"col column
q-pl-xs
"
>
<div
class=
"col column
"
:class=
"
{'q-pl-xs':$q.platform.is.desktop}
">
<div
class=
"text-right text-green q-pt-md"
>
<div
class=
"text-right text-green q-pt-md"
>
{{
getGradeType
(
item
.
gradeType
)
}}{{
getRoomType
(
item
.
roomType
)
}}
{{
getGradeType
(
item
.
gradeType
)
}}{{
getRoomType
(
item
.
roomType
)
}}
</div>
</div>
...
@@ -65,16 +68,16 @@
...
@@ -65,16 +68,16 @@
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"col"
>
<div
class=
"col"
:style=
"{'border-left': $q.platform.is.mobile?'1px solid #eeeeee':''}"
>
<div
class=
"relative-position"
v-for=
"(subItem,subIndex) in item.roomOptions"
:key=
"subIndex"
>
<div
class=
"relative-position"
v-for=
"(subItem,subIndex) in item.roomOptions"
:key=
"subIndex"
>
<q-separator
v-if=
"subIndex!=0"
/>
<q-separator
v-if=
"subIndex!=0"
/>
<div
class=
"col q-ml-lg q-pt-lg q-pb-md q-pr-md"
>
<div
class=
"col q-ml-lg q-pt-lg q-pb-md q-pr-md"
>
<div
class=
"col
row items-center no-wrap q-pt-sm"
>
<div
class=
"col
q-pt-sm"
:class=
"{'row items-center no-wrap': $q.platform.is.desktop,'common': $q.platform.is.mobile}"
>
<div
class=
"absolute text-white q-px-lg"
style=
"left: 0;top: 0;border-bottom-right-radius: 10px;"
<div
class=
"absolute text-white q-px-lg"
style=
"left: 0;top: 0;border-bottom-right-radius: 10px;"
:class=
"getMealType(subItem.meals)==ScatMeaList[0].name?'HD_Black':'HD_Green'"
>
{{getMealType(subItem.meals)}}
</div>
:class=
"getMealType(subItem.meals)==ScatMeaList[0].name?'HD_Black':'HD_Green'"
>
{{getMealType(subItem.meals)}}
</div>
<div
class=
"col-2 text-grey-6"
>
{{subItem.bookingDeadline}}
</div>
<div
class=
"col-2 text-grey-6"
v-if=
"$q.platform.is.desktop"
>
{{subItem.bookingDeadline}}
</div>
<div
class=
"col-3
q-pl-lg
"
>
{{subItem.minNights}}
</div>
<div
class=
"col-3
"
:class=
"{'q-pl-lg':$q.platform.is.desktop}"
v-if=
"$q.platform.is.desktop
"
>
{{subItem.minNights}}
</div>
<div
class=
"row justify-between text-red
q-pl-lg
"
>
<div
class=
"row justify-between text-red
"
:class=
"{'q-pl-lg':$q.platform.is.desktop}"
v-if=
"$q.platform.is.desktop
"
>
<div
class=
"column"
>
<div
class=
"column"
>
<span>
{{$t('v101.scatteredDetails.Time1')}}
</span>
<span>
{{$t('v101.scatteredDetails.Time1')}}
</span>
<span>
{{subItem['check-inStartTime']}}
</span>
<span>
{{subItem['check-inStartTime']}}
</span>
...
@@ -88,7 +91,7 @@
...
@@ -88,7 +91,7 @@
<span>
{{subItem['finalCheck-outTime']}}
</span>
<span>
{{subItem['finalCheck-outTime']}}
</span>
</div>
</div>
</div>
</div>
<div
class=
"col row no-wrap justify-end items-center
q-pl-lg
"
>
<div
class=
"col row no-wrap justify-end items-center
"
:class=
"{'q-pl-lg':$q.platform.is.desktop}
"
>
<div
class=
"row no-wrap items-center q-pr-lg"
>
<div
class=
"row no-wrap items-center q-pr-lg"
>
<span
class=
"text-grey-6"
>
円
</span>
<span
class=
"text-grey-6"
>
円
</span>
<span
class=
"fz20 text-red q-px-sm"
>
{{getPrice(subItem.chargeableRateInfoPerPersonForANightBySetCurrency)}}
</span>
<span
class=
"fz20 text-red q-px-sm"
>
{{getPrice(subItem.chargeableRateInfoPerPersonForANightBySetCurrency)}}
</span>
...
@@ -106,12 +109,12 @@
...
@@ -106,12 +109,12 @@
</div>
</div>
</div>
</div>
</div>
</div>
</
div
>
</
q-card
>
</template>
</template>
<div
v-else
class=
"col q-pa-lg text-center"
>
<div
v-else
class=
"col q-pa-lg text-center"
>
{{$t('noneData')}}
{{$t('noneData')}}
</div>
</div>
</
q-card
>
</
div
>
</template>
</template>
...
...
src/components/scattered/list/ListTable.vue
View file @
98dbe879
...
@@ -83,7 +83,7 @@
...
@@ -83,7 +83,7 @@
</
template
>
</
template
>
<
template
v-slot:item=
"props"
>
<
template
v-slot:item=
"props"
>
<div
@
click=
"goUrl('/scattered/HotelDetails',props.row)"
class=
"rounded-borders bg-primary text-white col-12 q-mb-sm"
style=
"padding: 12px;margin-left: 12px;margin-right: 12px; width: calc(100% - 24px);"
>
<div
@
click=
"goUrl('/scattered/HotelDetails',props.row)"
class=
"rounded-borders bg-primary text-white col-12 q-mb-sm"
style=
"padding: 12px;margin-left: 12px;margin-right: 12px; width: calc(100% - 24px);"
>
<div
@
click
.
stop=
"showHotelDetailHandler(props.row.HotelId)"
>
<div>
<div
style=
"opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;"
>
{{
$t
(
'v101.scattered.titleHeard1'
)
}}
</div>
<div
style=
"opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;"
>
{{
$t
(
'v101.scattered.titleHeard1'
)
}}
</div>
<div
style=
"font-size: 13px;"
>
{{
props
.
row
.
hotelName
}}
</div>
<div
style=
"font-size: 13px;"
>
{{
props
.
row
.
hotelName
}}
</div>
</div>
</div>
...
...
src/components/scattered/order/OrderList.vue
View file @
98dbe879
<
template
>
<
template
>
<div>
<div>
<q-card
class=
"light-shadow q-pa-md bg-white rounded-borders q-my-md"
flat
>
<q-card
class=
"light-shadow q-pa-md bg-white rounded-borders q-my-md"
flat
>
<q-table
separator=
"cell"
:pagination=
"
{rowsPerPage:100}" dense :rows="orders" bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
<q-table
v-if=
"$q.platform.is.desktop"
separator=
"cell"
:pagination=
"
{rowsPerPage:100}" dense :rows="orders" bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
<template
v-slot:body-cell-HotelName=
"props"
>
<template
v-slot:body-cell-HotelName=
"props"
>
<q-td
:props=
"props"
>
<q-td
:props=
"props"
>
<div
class=
"cursor-pointer"
@
click=
"getDetail(props.row.OrderID)"
>
<div
class=
"cursor-pointer"
@
click=
"getDetail(props.row.OrderID)"
>
...
@@ -19,7 +19,55 @@
...
@@ -19,7 +19,55 @@
<q-pagination
class=
"full-width justify-end"
v-model=
"pages.pageIndex"
color=
"primary"
:max=
"pages.pageCount"
:input=
"true"
@
update:model-value=
"changePageHandler"
/>
<q-pagination
class=
"full-width justify-end"
v-model=
"pages.pageIndex"
color=
"primary"
:max=
"pages.pageCount"
:input=
"true"
@
update:model-value=
"changePageHandler"
/>
</
template
>
</
template
>
</q-table>
</q-table>
<q-table
v-if=
"$q.platform.is.mobile"
hide-header
:title=
"pageTitle"
:rows=
"orders"
grid
:columns=
"mobileCols"
row-key=
"name"
card-class=
"no-shadow bg-primary text-white"
:pagination=
"pages"
:loading=
"loading"
>
<
template
v-slot:item=
"props"
>
<div
@
click=
"getDetail(props.row.OrderID)"
class=
"rounded-borders bg-primary text-white col-12 q-mb-sm"
style=
"padding: 12px;margin-left: 12px;margin-right: 12px; width: calc(100% - 24px);"
>
<div>
<div
style=
"opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;"
>
{{
$t
(
'v101.scatteredOrderList.table1'
)
}}
</div>
<div
style=
"font-size: 13px;"
>
{{
props
.
row
.
HotelName
}}
</div>
</div>
<div
class=
"q-my-md"
>
<div
style=
"opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;"
>
{{
$t
(
'v101.scatteredOrderList.table2'
)
}}
</div>
<div
style=
"font-size: 13px;"
>
<span
class=
"q-ml-xs"
>
{{
props
.
row
.
OrderID
}}
</span>
</div>
</div>
<div
class=
"row"
>
<div>
<div
style=
"opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;"
>
{{
$t
(
'v101.scatteredOrderList.table4'
)
}}
</div>
<div
class=
""
>
<span>
円
{{
props
.
row
.
TotalPrice
.
toFixed
(
2
)
}}
</span>
</div>
</div>
<div
class=
"q-pl-lg"
>
<div
style=
"opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;"
>
{{
$t
(
'v101.scatteredOrderList.table5'
)
}}
</div>
<div
class=
""
>
<span>
円
{{
props
.
row
.
CustomerPayMoney
.
toFixed
(
2
)
}}
</span>
</div>
</div>
</div>
<div
class=
"row justify-end q-pt-sm"
>
<span
class=
"bg-white rounded-borders q-px-sm"
:class=
"[props.row.typeInfo.Color]"
>
{{
props
.
row
.
OrderStatus
}}
</span>
</div>
</div>
</
template
>
<
template
v-slot:bottom
>
<q-pagination
class=
"full-width justify-end"
v-model=
"pages.pageIndex"
color=
"primary"
:max=
"pages.pageCount"
:input=
"true"
@
update:model-value=
"changePageHandler"
/>
</
template
>
</q-table>
</q-card>
</q-card>
<q-inner-loading
:showing=
"loading"
:label=
"$t('loading')"
label-class=
"text-grey-6 f12"
/>
<q-inner-loading
:showing=
"loading"
:label=
"$t('loading')"
label-class=
"text-grey-6 f12"
/>
</div>
</div>
<q-dialog
v-model=
"showOrderdDetail"
>
<q-dialog
v-model=
"showOrderdDetail"
>
...
@@ -78,6 +126,11 @@ export default defineComponent({
...
@@ -78,6 +126,11 @@ export default defineComponent({
{
name
:
'OrderStatus'
,
label
:
t
(
'v101.scatteredOrderList.table6'
),
align
:
'left'
},
{
name
:
'OrderStatus'
,
label
:
t
(
'v101.scatteredOrderList.table6'
),
align
:
'left'
},
{
name
:
'CreateDateStr'
,
label
:
t
(
'v101.scatteredOrderList.table7'
),
field
:
(
row
:
any
)
=>
row
.
CreateDateStr
,
align
:
'left'
}
{
name
:
'CreateDateStr'
,
label
:
t
(
'v101.scatteredOrderList.table7'
),
field
:
(
row
:
any
)
=>
row
.
CreateDateStr
,
align
:
'left'
}
]
as
any
,
]
as
any
,
mobileCols
:
[
{
name
:
'HotelName'
,
label
:
t
(
'v101.scatteredOrderList.table1'
),
align
:
'left'
},
{
name
:
'OrderID'
,
label
:
t
(
'v101.scatteredOrderList.table2'
),
field
:
(
row
:
any
)
=>
row
.
OrderID
,
align
:
'left'
},
{
name
:
'CustomerPayMoney'
,
label
:
t
(
'v101.scatteredOrderList.table5'
),
field
:
(
row
:
any
)
=>
row
.
CustomerPayMoney
.
toFixed
(
2
),
align
:
'left'
},
]
})
})
const
methods
=
{
const
methods
=
{
...
...
src/components/scattered/order/OrderListHeader.vue
View file @
98dbe879
...
@@ -3,6 +3,22 @@
...
@@ -3,6 +3,22 @@
<q-select
v-if=
"$q.platform.is.desktop"
class=
"q-mr-md"
v-model=
"search.B2BSelectOrderState"
@
update:model-value=
"setOrderStatus"
dense
:options=
"status"
emit-value
option-label=
"StatusName"
option-value=
"StatusId"
map-options
:label=
"$t('hotelorder.search.status')"
standout
/>
<q-select
v-if=
"$q.platform.is.desktop"
class=
"q-mr-md"
v-model=
"search.B2BSelectOrderState"
@
update:model-value=
"setOrderStatus"
dense
:options=
"status"
emit-value
option-label=
"StatusName"
option-value=
"StatusId"
map-options
:label=
"$t('hotelorder.search.status')"
standout
/>
<q-input
v-if=
"$q.platform.is.desktop"
class=
"q-mr-md"
v-model=
"search.HotelName"
dense
standout
:label=
"$t('v101.scatteredOrderList.first')"
/>
<q-input
v-if=
"$q.platform.is.desktop"
class=
"q-mr-md"
v-model=
"search.HotelName"
dense
standout
:label=
"$t('v101.scatteredOrderList.first')"
/>
<div
class=
"col"
></div>
<div
class=
"col"
></div>
<q-btn
v-if=
"$q.platform.is.mobile"
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"
>
<q-select
class=
"q-mr-md"
v-model=
"search.B2BSelectOrderState"
@
update:model-value=
"setOrderStatus"
dense
:options=
"status"
emit-value
option-label=
"StatusName"
option-value=
"StatusId"
map-options
:label=
"$t('hotelorder.search.status')"
standout
/>
</div>
<div
class=
"q-my-md"
>
<q-input
class=
"q-mr-md"
v-model=
"search.HotelName"
dense
standout
:label=
"$t('v101.scatteredOrderList.first')"
/>
</div>
</q-card>
</q-popup-proxy>
</q-btn>
<q-btn
color=
"primary"
unelevated
:label=
"$t('query')"
@
click=
"setQueryHandler"
/>
<q-btn
color=
"primary"
unelevated
:label=
"$t('query')"
@
click=
"setQueryHandler"
/>
</div>
</div>
<div
class=
"rounded-borders bg-white q-pa-sm q-mt-md mobile-only"
>
<div
class=
"rounded-borders bg-white q-pa-sm q-mt-md mobile-only"
>
...
@@ -18,10 +34,10 @@ import { computed, defineComponent, inject, reactive, ref, toRefs } from 'vue'
...
@@ -18,10 +34,10 @@ import { computed, defineComponent, inject, reactive, ref, toRefs } from 'vue'
import
{
OrderType
,
RoomType
,
StandardStatus
}
from
'../../../@types'
import
{
OrderType
,
RoomType
,
StandardStatus
}
from
'../../../@types'
import
{
getScatteredHotelOrderStatus
,
getHotelOrderType
,
getHotelRoomType
}
from
'../../../utils/tools'
import
{
getScatteredHotelOrderStatus
,
getHotelOrderType
,
getHotelRoomType
}
from
'../../../utils/tools'
import
{
date
,
useQuasar
}
from
'quasar'
import
{
date
,
useQuasar
}
from
'quasar'
import
svgIcon
from
'../../
../
global/svg-icon.vue'
import
svgIcon
from
'../../global/svg-icon.vue'
export
default
defineComponent
({
export
default
defineComponent
({
components
:
{
},
components
:
{
svgIcon
},
setup
(
props
)
{
setup
(
props
)
{
const
qDateProxy
=
ref
(
null
)
as
any
const
qDateProxy
=
ref
(
null
)
as
any
const
$q
=
useQuasar
()
const
$q
=
useQuasar
()
...
@@ -70,7 +86,10 @@ export default defineComponent({
...
@@ -70,7 +86,10 @@ export default defineComponent({
const
searchCnt
=
computed
(()
=>
{
const
searchCnt
=
computed
(()
=>
{
let
setCnt
=
0
let
setCnt
=
0
if
(
$q
.
platform
.
is
.
mobile
)
{
if
(
realSearch
.
B2BSelectOrderState
>-
1
)
setCnt
++
if
(
realSearch
.
HotelName
)
setCnt
++
}
return
setCnt
return
setCnt
})
})
...
...
src/components/scattered/order/OrderdDetail.vue
View file @
98dbe879
<
template
>
<
template
>
<div
class=
"q-pa-lg commonSure bg-grey-1"
>
<q-card
class=
"bg-white q-py-lg column"
style=
"max-width: 886px; min-width: 375px; width: 900px; height: 65vh"
>
<div
style=
"shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);margin: auto;"
:style=
"
{'width':$q.platform.is.desktop?'50vw':'100vw','min-width':$q.platform.is.desktop?'866px':'100vw',}">
<div
class=
"q-px-lg q-mb-lg"
:class=
"
{ 'row justify-between': $q.platform.is.desktop }">
<div
class=
"q-px-lg q-mb-lg"
:class=
"
{ 'row justify-between': $q.platform.is.desktop }">
<div
:class=
"
{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
<div
:class=
"
{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
<div
class=
"mobile-only row items-center"
>
<div
class=
"mobile-only row items-center"
>
<div
class=
"text-weight-bold fz20 ellipsis"
style=
"width: 280px"
>
{{
model
.
HotelName
}}{{
model
.
HotelName
}}{{
model
.
HotelName
}}
</div>
<div
class=
"text-weight-bold fz20 ellipsis"
style=
"width: 280px"
>
{{
model
.
HotelName
}}{{
model
.
HotelName
}}{{
model
.
HotelName
}}
</div>
<q-icon
class=
"text-grey-13 cursor-pointer text-right q-ml-sm"
name=
"close"
size=
"md"
v-close-popup
></q-icon>
<q-icon
class=
"text-grey-13 cursor-pointer text-right q-ml-sm"
name=
"close"
size=
"md"
v-close-popup
></q-icon>
</div>
<div
class=
"text-weight-bold fz20 ellipsis desktop-only"
>
{{
model
.
HotelName
}}
</div>
</div>
<q-icon
class=
"text-grey-13 cursor-pointer desktop-only"
name=
"close"
size=
"md"
v-close-popup
></q-icon>
</div>
<q-scroll-area
:thumb-style=
"scrollStyle.thumbStyle"
:bar-style=
"scrollStyle.barStyle"
class=
"col q-px-lg"
>
<div
class=
"col bg-white rounded-border q-mb-md"
:class=
"
{'row q-pa-lg':$q.platform.is.desktop}">
<div
:class=
"
{'col row':$q.platform.is.desktop,'col-12 column':$q.platform.is.mobile}">
<q-img
v-if=
"model.HotelPic"
:class=
"
{'col-1 q-mr-lg':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" :src="model.HotelPic" style="display: inline-block;" :style="{'height':$q.platform.is.mobile?'150px':'130px','width':$q.platform.is.mobile?'100%':'130px',}" spinner-color="drk" spinner-size="20px" mode="cover" :ratio="1"/>
<div
class=
"column"
:class=
"
{'col q-pl-lg':$q.platform.is.desktop,'q-pt-sm':$q.platform.is.mobile}">
<div
class=
"text-red fz18 text-weight-bold"
>
{{
model
.
hotelName
}}
</div>
<div
class=
"q-pt-xs"
>
<q-icon
class=
"text-grey-13 q-mr-xs"
name=
"place"
size=
"xs"
></q-icon>
<span
class=
"col fz14 text-weight-bold text-blick"
>
{{
parmResult
.
address
}}
</span>
</div>
<div
class=
"q-pt-xs"
>
<span
class=
"text-grey-6 q-pr-lg"
>
{{
$t
(
'v101.scatteredOrder.fangxing'
)
}}
</span>
<span
class=
"text-grey-9 q-pr-lg"
>
{{
parmResult
?
getGradeType
(
parmResult
.
gradeType
):
''
}}{{
parmResult
?
getRoomType
(
parmResult
.
roomType
):
''
}}
</span>
</div>
<div
class=
"q-pt-xs"
>
<span
class=
"text-grey-6 q-pr-lg"
>
{{
$t
(
'v101.scatteredOrder.xiyan'
)
}}
</span>
<span
class=
"text-grey-9"
>
<template
v-if=
"parmResult.smoking==0"
>
{{
$t
(
'v101.scatteredOrder.xiyan0'
)
}}
</
template
>
<
template
v-if=
"parmResult.smoking==1"
>
{{
$t
(
'v101.scatteredOrder.xiyan1'
)
}}
</
template
>
</span>
</div>
<div
class=
"q-pt-xs"
>
<span
class=
"text-grey-6 q-pr-lg"
>
{{$t('v101.scatteredOrder.cesuo')}}
</span>
<span
class=
"text-grey-9"
>
<
template
v-if=
"parmResult.withBath==0"
>
{{
$t
(
'v101.scatteredOrder.wu'
)
}}
</
template
>
<
template
v-if=
"parmResult.withBath==1"
>
{{
$t
(
'v101.scatteredOrder.you'
)
}}
</
template
>
</span>
</div>
<div
class=
"q-pt-xs"
>
<span
class=
"text-grey-6 q-pr-lg"
>
{{$t('v101.scatteredOrder.lutiankefang')}}
</span>
<span
class=
"text-grey-9"
>
<
template
v-if=
"parmResult.withOpenAirBath==0"
>
{{
$t
(
'v101.scatteredOrder.wu'
)
}}
</
template
>
<
template
v-if=
"parmResult.withOpenAirBath==1"
>
{{
$t
(
'v101.scatteredOrder.you'
)
}}
</
template
>
</span>
</div>
</div>
<div
class=
"text-weight-bold fz20 ellipsis desktop-only"
>
{{
model
.
HotelName
}}
</div>
</div>
</div>
<q-icon
class=
"text-grey-13 cursor-pointer desktop-only"
name=
"close"
size=
"md"
v-close-popup
></q-icon>
</div>
</div>
<div
class=
"col row bg-white rounded-border q-mb-md q-pa-lg"
>
</div>
<div
class=
"col-5 row"
>
<div
:class=
"{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}"
>
<q-img
v-if=
"model.HotelPic"
class=
"col-5 q-mr-lg"
:src=
"model.HotelPic"
style=
"height: auto;display: inline-block;"
spinner-color=
"drk"
spinner-size=
"20px"
mode=
"cover"
/>
<div
class=
"col column bg-white rounded-border q-mb-md"
:class=
"{'q-mr-lg':$q.platform.is.desktop}"
>
<div
class=
"col column q-pl-lg"
>
<div
class=
"bg-light-blue-1 q-py-md fz14 rounded-borders row items-center text-weight-bold"
:class=
"{'q-px-lg':$q.platform.is.desktop,'q-px-sm':$q.platform.is.mobile}"
>
<div
class=
"text-red fz18 text-weight-bold"
>
{{
model
.
hotelName
}}
</div>
{{$t('v101.scatteredOrder.yudinxinx')}}
<div
class=
"q-pt-xs"
>
</div>
<q-icon
class=
"text-grey-13 q-mr-xs"
name=
"place"
size=
"xs"
></q-icon>
<div
class=
"column"
:class=
"{'q-pa-lg':$q.platform.is.desktop,'q-pa-sm':$q.platform.is.mobile}"
>
<span
class=
"col fz14 text-weight-bold text-blick"
>
{{
parmResult
.
address
}}
</span>
<div
class=
"row items-center no-wrap q-mb-md"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.dindanhao')}}
</span>
<div
class=
"q-pl-lg"
>
<span>
{{model.ThirdOrderNo}}
</span>
</div>
</div>
<div
class=
"q-pt-xs"
>
</div>
<span
class=
"text-grey-6 q-pr-lg"
>
{{
$t
(
'v101.scatteredOrder.fangxing'
)
}}
</span>
<div
class=
"row items-center no-wrap q-mb-md"
>
<span
class=
"text-grey-9 q-pr-lg"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.fangxingxinxi')}}
</span>
<div
class=
"q-pl-lg"
>
<span
class=
"q-pr-lg"
>
{{parmResult?getGradeType(parmResult.gradeType):''}}{{parmResult?getRoomType(parmResult.roomType):''}}
{{parmResult?getGradeType(parmResult.gradeType):''}}{{parmResult?getRoomType(parmResult.roomType):''}}
</span>
</span>
</div>
</div>
<div
class=
"q-pt-xs"
>
</div>
<span
class=
"text-grey-6 q-pr-lg"
>
{{
$t
(
'v101.scatteredOrder.xiyan'
)
}}
</span>
<span
class=
"text-grey-9"
>
<div
class=
"row items-center no-wrap q-mb-md"
>
<template
v-if=
"parmResult.smoking==0"
>
{{
$t
(
'v101.scatteredOrder.xiyan0'
)
}}
</
template
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.ruzhuriqi')}}
</span>
<
template
v-if=
"parmResult.smoking==1"
>
{{
$t
(
'v101.scatteredOrder.xiyan1'
)
}}
</
template
>
<div
class=
"q-pl-lg row items-center"
v-if=
"model.CheckIn&&model.CheckOut"
>
</span>
<span
:class=
"{'q-pr-lg':$q.platform.is.desktop,'q-pr-xs':$q.platform.is.mobile
</div>
}"
>
{{model.CheckIn.split('T')[0]}}
</span>
<div
class=
"q-pt-xs"
>
<q-separator
:class=
"{'q-px-sm':$q.platform.is.desktop,'q-px-xs':$q.platform.is.mobile
<span
class=
"text-grey-6 q-pr-lg"
>
{{$t('v101.scatteredOrder.cesuo')}}
</span>
}"
color=
"dark"
/>
<span
class=
"text-grey-9"
>
<span
:class=
"{'q-pl-lg':$q.platform.is.desktop,'q-pl-xs':$q.platform.is.mobile
<
template
v-if=
"parmResult.withBath==0"
>
{{
$t
(
'v101.scatteredOrder.wu'
)
}}
</
template
>
}"
>
{{model.CheckOut.split('T')[0]}}
</span>
<
template
v-if=
"parmResult.withBath==1"
>
{{
$t
(
'v101.scatteredOrder.you'
)
}}
</
template
>
</span>
</div>
</div>
<div
class=
"q-pt-xs"
>
</div>
<span
class=
"text-grey-6 q-pr-lg"
>
{{$t('v101.scatteredOrder.lutiankefang')}}
</span>
<div
class=
"row items-center no-wrap q-mb-md"
>
<span
class=
"text-grey-9"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.fangjianshuliang')}}
</span>
<
template
v-if=
"parmResult.withOpenAirBath==0"
>
{{
$t
(
'v101.scatteredOrder.wu'
)
}}
</
template
>
<div
class=
"q-pl-lg"
>
<
template
v-if=
"parmResult.withOpenAirBath==1"
>
{{
$t
(
'v101.scatteredOrder.you'
)
}}
</
template
>
<span>
{{model.Number}}
</span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"row"
>
<div
class=
"col column bg-white rounded-border q-mb-md"
>
<div
class=
"col column bg-white rounded-border q-mb-md q-mr-lg"
>
<div
class=
"bg-light-blue-1 q-py-md fz14 rounded-borders row items-center justify-between"
:class=
"{'q-px-lg':$q.platform.is.desktop,'q-px-sm':$q.platform.is.mobile
<div
class=
"bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center text-weight-bold"
>
}"
>
{{$t('v101.scatteredOrder.yudinxinx')}}
<span
class=
"text-weight-bold"
>
{{$t('v101.scatteredOrder.ruzhuxinxi')}}
</span>
</div>
<div
class=
"q-pa-lg column"
>
<div
class=
"row items-center q-mb-md"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.dindanhao')}}
</span>
<div
class=
"q-pl-lg"
>
<span>
{{model.ThirdOrderNo}}
</span>
</div>
</div>
<div
class=
"row items-center q-mb-md"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.fangxingxinxi')}}
</span>
<div
class=
"q-pl-lg"
>
<span
class=
"q-pr-lg"
>
{{parmResult?getGradeType(parmResult.gradeType):''}}{{parmResult?getRoomType(parmResult.roomType):''}}
</span>
</div>
</div>
<div
class=
"row items-center q-mb-md"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.ruzhuriqi')}}
</span>
<div
class=
"q-pl-lg row items-center"
v-if=
"model.CheckIn&&model.CheckOut"
>
<span
class=
"q-pr-lg"
>
{{model.CheckIn.split('T')[0]}}
</span>
<q-separator
class=
"q-px-sm"
color=
"dark"
/>
<span
class=
"q-pl-lg"
>
{{model.CheckOut.split('T')[0]}}
</span>
</div>
</div>
<div
class=
"row items-center q-mb-md"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.fangjianshuliang')}}
</span>
<div
class=
"q-pl-lg"
>
<span>
{{model.Number}}
</span>
</div>
</div>
</div>
</div>
</div>
<div
class=
"col column bg-white rounded-border q-mb-md"
>
<div
class=
"column"
:class=
"{'q-pa-lg':$q.platform.is.desktop,'q-pa-sm':$q.platform.is.mobile
<div
class=
"bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center justify-between"
>
}"
>
<span
class=
"text-weight-bold"
>
{{$t('v101.scatteredOrder.ruzhuxinxi')}}
</span>
<div
class=
"row items-center no-wrap q-mb-md"
>
</div>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.yudinren')}}
</span>
<div
class=
"q-pa-lg column"
>
<div
class=
"q-pl-lg"
>
<div
class=
"row items-center q-mb-md"
>
<span>
{{parmResult.guestLastName + parmResult.guestFirstName}}
</span>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.yudinren')}}
</span>
<div
class=
"q-pl-lg"
>
<span>
{{parmResult.guestLastName + parmResult.guestFirstName}}
</span>
</div>
</div>
</div>
<div
class=
"row items-center q-mb-md"
>
</div
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.dangqiandizhi')}}
</span
>
<div
class=
"row items-center no-wrap q-mb-md"
>
<div
class=
"q-pl-lg"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.dangqiandizhi')}}
</span
>
<span>
{{parmResultRoomInfo.guestAddress}}
</span
>
<div
class=
"q-pl-lg row"
>
<
/div
>
<
span>
{{parmResultRoomInfo.guestAddress}}
</span
>
</div>
</div>
<div
class=
"row items-center q-mb-md"
>
</div
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.Email')}}
</span
>
<div
class=
"row items-center no-wrap q-mb-md"
>
<div
class=
"q-pl-lg"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.Email')}}
</span
>
<span>
{{parmResultRoomInfo.guestEmail}}
</span
>
<div
class=
"q-pl-lg"
>
<
/div
>
<
span>
{{parmResultRoomInfo.guestEmail}}
</span
>
</div>
</div>
<div
class=
"row items-center q-mb-md"
>
</div
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.dianhua')}}
</span
>
<div
class=
"row items-center no-wrap q-mb-md"
>
<div
class=
"q-pl-lg"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.dianhua')}}
</span
>
<span>
{{parmResultRoomInfo.guestPhoneNumber}}
</span
>
<div
class=
"q-pl-lg"
>
<
/div
>
<
span>
{{parmResultRoomInfo.guestPhoneNumber}}
</span
>
</div>
</div>
<div
class=
"row items-center q-mb-md"
>
</div
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.kehubeizhu')}}
</span
>
<div
class=
"row items-center no-wrap q-mb-md"
>
<div
class=
"q-pl-lg"
>
<span
class=
"text-grey-6 ScatteredOrderdDetail"
>
{{$t('v101.scatteredOrder.kehubeizhu')}}
</span
>
<span>
{{model.Remark}}
</span
>
<div
class=
"q-pl-lg"
>
<
/div
>
<
span
v-if=
"model.Remark"
>
{{model.Remark}}
</span
>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</q-scroll-area>
</template>
</q-card>
<q-inner-loading
:showing=
"loading"
:label=
"$t('loading')"
label-class=
"text-grey-6 f12"
/>
<
script
lang=
"ts"
>
</template>
import
{
defineComponent
,
ref
,
reactive
,
toRef
,
toRefs
,
provide
,
onMounted
,
inject
,
watch
}
from
'vue'
import
{
useI18n
}
from
'vue-i18n'
<
script
lang=
"ts"
>
import
{
DirtionmaryHelper
}
from
'../../../config/dictionary'
import
{
defineComponent
,
ref
,
reactive
,
toRef
,
toRefs
,
provide
,
onMounted
,
inject
,
watch
}
from
'vue'
import
{
date
}
from
'quasar'
import
{
useI18n
}
from
'vue-i18n'
import
message
from
'../../../utils/message'
import
{
DirtionmaryHelper
}
from
'../../../config/dictionary'
import
{
moneyFormat
,
dateDiffer
}
from
'../../../utils/tools'
import
{
date
}
from
'quasar'
import
HotelService
from
'../../../api/scattered'
import
message
from
'../../../utils/message'
import
{
currentRouter
}
from
'src/router'
import
{
moneyFormat
,
dateDiffer
}
from
'../../../utils/tools'
import
{
HotelRate
,
HotelArea
,
useHotel
}
from
'../../../utils/hotelRate'
import
HotelService
from
'../../../api/scattered'
import
{
isPhone
,
validatAlphabetsName
}
from
'../../../utils/validate'
import
{
currentRouter
}
from
'src/router'
import
{
ApiResult
}
from
'src/@types/enumHelper'
import
{
HotelRate
,
HotelArea
,
useHotel
}
from
'../../../utils/hotelRate'
export
default
defineComponent
({
import
{
isPhone
,
validatAlphabetsName
}
from
'../../../utils/validate'
import
{
ApiResult
}
from
'src/@types/enumHelper'
import
useScrollModule
from
'../../../module/scrollbar/scrollModule'
export
default
defineComponent
({
components
:
{
},
components
:
{
},
props
:
[
'OrderID'
],
props
:
[
'OrderID'
],
emits
:[
'close'
],
emits
:[
'close'
],
...
@@ -150,6 +157,7 @@
...
@@ -150,6 +157,7 @@
const
{
t
}
=
useI18n
()
const
{
t
}
=
useI18n
()
const
data
=
reactive
({
const
data
=
reactive
({
scrollStyle
:
{}
as
any
,
params
:{
params
:{
orderId
:
props
.
OrderID
,
orderId
:
props
.
OrderID
,
},
},
...
@@ -161,6 +169,7 @@
...
@@ -161,6 +169,7 @@
scatteredRoomTypeList
:
[]
as
Array
<
HotelArea
>
,
//散客房间类型
scatteredRoomTypeList
:
[]
as
Array
<
HotelArea
>
,
//散客房间类型
})
})
data
.
scrollStyle
=
useScrollModule
().
scrollStyle
data
.
RoomTypeList
=
useHotel
.
getHotelRoomType
()
data
.
RoomTypeList
=
useHotel
.
getHotelRoomType
()
data
.
scatteredRoomTypeList
=
useHotel
.
getHotelScatRoom
()
data
.
scatteredRoomTypeList
=
useHotel
.
getHotelScatRoom
()
...
@@ -249,11 +258,10 @@
...
@@ -249,11 +258,10 @@
return
{
...
toRefs
(
data
),
...
methods
}
return
{
...
toRefs
(
data
),
...
methods
}
}
}
})
})
</
script
>
</
script
>
<
style
>
<
style
>
.ScatteredOrderdDetail
{
.ScatteredOrderdDetail
{
width
:
70px
;
width
:
70px
;
}
}
</
style
>
</
style
>
\ No newline at end of file
src/pages/scattered/HotelOrder.vue
View file @
98dbe879
...
@@ -31,7 +31,7 @@ export default defineComponent({
...
@@ -31,7 +31,7 @@ export default defineComponent({
}
}
const
search
=
reactive
({
const
search
=
reactive
({
B2BSelectOrderState
:
0
,
B2BSelectOrderState
:
0
,
CustomerId
:
''
,
CustomerId
:
CustomerId
,
HotelName
:
''
HotelName
:
''
})
})
// search.OrderId = currentRouter.currentRoute.value.params.orderId
// search.OrderId = currentRouter.currentRoute.value.params.orderId
...
...
src/pages/scattered/HotelSure.vue
View file @
98dbe879
<
template
>
<
template
>
<div
class=
"
q-pa-lg
commonSure"
>
<div
class=
"commonSure"
>
<div
style=
"shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);margin: auto;"
:style=
"
{'width':$q.platform.is.desktop?'70vw':'100vw','min-width':$q.platform.is.desktop?'866px':'100vw',}">
<div
:class=
"
{'q-pa-lg':$q.platform.is.desktop,'q-pa-md':$q.platform.is.mobile}"
style="shadow: 0px 0px 50px 0px rgba(82, 63, 105, 0.15);margin: auto;" :style="{'width':$q.platform.is.desktop?'70vw':'100vw','min-width':$q.platform.is.desktop?'866px':'100vw',}">
<div
class=
"bg-white rounded-border q-mb-md q-px-lg q-py-md"
>
<div
class=
"bg-white rounded-border q-mb-md q-px-lg q-py-md"
>
<div
class=
"row items-center text-orange-6"
>
<div
class=
"row items-center text-orange-6"
>
<q-btn
class=
"bg-orange-6 text-white"
round
size=
"sm"
icon=
"person"
/>
<q-btn
class=
"bg-orange-6 text-white"
round
size=
"sm"
icon=
"person"
/>
...
@@ -11,9 +11,10 @@
...
@@ -11,9 +11,10 @@
<span
class=
"fz18 q-pl-lg"
>
{{
$t
(
'v101.scatteredOrder.prompt2'
)
}}
</span>
<span
class=
"fz18 q-pl-lg"
>
{{
$t
(
'v101.scatteredOrder.prompt2'
)
}}
</span>
</div>
</div>
</div>
</div>
<div
class=
"col row bg-white rounded-border q-mb-md q-pa-lg"
>
<q-img
v-if=
"params.imgUrl"
class=
"col-1 q-mr-lg"
:src=
"params.imgUrl"
style=
"height: auto;display: inline-block;"
spinner-color=
"drk"
spinner-size=
"20px"
mode=
"cover"
/>
<div
class=
"col bg-white rounded-border q-mb-md q-pa-lg"
:class=
"
{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<div
class=
"col-3 column q-pl-xs"
>
<q-img
v-if=
"params.imgUrl"
:class=
"
{'col-1 q-mr-lg':$q.platform.is.desktop,'col-12 q-mb-sm':$q.platform.is.mobile}" :src="params.imgUrl" style="height: auto;display: inline-block;" :style="{'height':$q.platform.is.mobile?'150px':'100%'}" spinner-color="drk" spinner-size="20px" heigth="100%" mode="cover" :ratio="1"/>
<div
class=
"col column q-pl-xs"
>
<div
class=
"text-red fz18 text-weight-bold"
>
{{
dataList
.
hotelName
}}
</div>
<div
class=
"text-red fz18 text-weight-bold"
>
{{
dataList
.
hotelName
}}
</div>
<div
class=
"q-pt-xs"
>
<div
class=
"q-pt-xs"
>
<q-icon
class=
"text-grey-13 q-mr-xs"
name=
"place"
size=
"xs"
></q-icon>
<q-icon
class=
"text-grey-13 q-mr-xs"
name=
"place"
size=
"xs"
></q-icon>
...
@@ -47,9 +48,10 @@
...
@@ -47,9 +48,10 @@
</span>
</span>
</div>
</div>
</div>
</div>
<div
class=
"col row items-end q-pl-lg"
>
<div
class=
"col row items-end q-pl-lg"
:class=
"{'justify-end':$q.platform.is.mobile}"
>
<div
class=
"column"
>
<div
class=
"column"
>
<div
class=
"text-green-6 fz20 text-weight-bold q-pb-sm"
>
{{$t('v101.scatteredOrder.orderamount')}}
</div>
<div
class=
"text-green-6 fz20 text-weight-bold q-pb-sm"
:class=
"{'row justify-end':$q.platform.is.mobile}"
><span>
{{$t('v101.scatteredOrder.orderamount')}}
</span></div>
<div
:class=
"{'row':$q.platform.is.mobile}"
>
<div
class=
"row justify-between"
>
<div
class=
"row justify-between"
>
<div
class=
"row items-center"
>
<div
class=
"row items-center"
>
<span
class=
"text-grey-10"
>
円
</span>
<span
class=
"text-grey-10"
>
円
</span>
...
@@ -65,7 +67,7 @@
...
@@ -65,7 +67,7 @@
<span
class=
"text-grey-10"
>
{{$t('v101.scatteredOrder.youhui')}}
</span>
<span
class=
"text-grey-10"
>
{{$t('v101.scatteredOrder.youhui')}}
</span>
<span
class=
"text-red fz18 q-pl-xs"
>
{{sureMsg.DiscountMoney}}
</span>
<span
class=
"text-red fz18 q-pl-xs"
>
{{sureMsg.DiscountMoney}}
</span>
</div>
</div>
<div
class=
"q-pt-xs row items-center"
>
<div
class=
"q-pt-xs row items-center"
:class=
"{'q-pl-lg':$q.platform.is.mobile}"
>
<span
class=
"text-grey-10"
>
{{$t('v101.scatteredOrder.shifu')}}
</span>
<span
class=
"text-grey-10"
>
{{$t('v101.scatteredOrder.shifu')}}
</span>
<span
class=
"text-h5 text-red text-weight-bold q-pl-xs"
>
{{SettlementPrice}}
</span>
<span
class=
"text-h5 text-red text-weight-bold q-pl-xs"
>
{{SettlementPrice}}
</span>
</div>
</div>
...
@@ -73,6 +75,7 @@
...
@@ -73,6 +75,7 @@
<span>
</span>
<span>
</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
...
@@ -99,9 +102,9 @@
...
@@ -99,9 +102,9 @@
</div>
</div>
<div
class=
"row items-center q-mb-md"
>
<div
class=
"row items-center q-mb-md"
>
<span
class=
"text-grey-6"
>
{{$t('v101.scatteredOrder.ruzhuriqi')}}
</span>
<span
class=
"text-grey-6"
>
{{$t('v101.scatteredOrder.ruzhuriqi')}}
</span>
<div
class=
"col q-pl-lg
row no-wrap
"
>
<div
class=
"col q-pl-lg
"
:class=
"{'row no-wrap':$q.platform.is.desktop,'column':$q.platform.is.mobile}
"
>
<div
class=
"row items-center"
>
<div
class=
"row items-center"
:class=
"{'q-pb-md':$q.platform.is.mobile}"
>
<q-field
v-if=
"$q.platform.is.desktop"
stack-label
:label=
"$t('v101.scatteredOrder.ruzhushijian')"
standout
class=
"col-2"
style=
"min-width: 200px"
dense
>
<q-field
stack-label
:label=
"$t('v101.scatteredOrder.ruzhushijian')"
standout
class=
"col-2"
style=
"min-width: 200px"
dense
>
<div
class=
"self-center full-width no-outline"
tabindex=
"0"
>
<div
class=
"self-center full-width no-outline"
tabindex=
"0"
>
{{params.arrivalDate}}
{{params.arrivalDate}}
</div>
</div>
...
@@ -115,9 +118,9 @@
...
@@ -115,9 +118,9 @@
<span
class=
"q-ml-sm"
>
{{$t('v101.scatteredOrder.zhihou')}}
</span>
<span
class=
"q-ml-sm"
>
{{$t('v101.scatteredOrder.zhihou')}}
</span>
</div>
</div>
</div>
</div>
<div
class=
"row items-center q-px-md
"
><q-separator
class=
"
q-px-sm bg-dark"
/></div>
<div
class=
"row items-center q-px-md
desktop-only"
><q-separator
class=
"
q-px-sm bg-dark"
/></div>
<div
class=
"row items-center"
>
<div
class=
"row items-center"
>
<q-field
v-if=
"$q.platform.is.desktop"
stack-label
:label=
"$t('v101.scatteredOrder.ruzhushijian')"
standout
class=
"col-2"
style=
"min-width: 200px"
dense
>
<q-field
stack-label
:label=
"$t('v101.scatteredOrder.ruzhushijian')"
standout
class=
"col-2"
style=
"min-width: 200px"
dense
>
<div
class=
"self-center full-width no-outline"
tabindex=
"0"
>
<div
class=
"self-center full-width no-outline"
tabindex=
"0"
>
{{params.departureDate}}
{{params.departureDate}}
</div>
</div>
...
@@ -179,9 +182,9 @@
...
@@ -179,9 +182,9 @@
dense
dense
class=
"row wrap"
class=
"row wrap"
>
>
<div
class=
"
col-6 row
"
>
<div
class=
"
row"
:class=
"{'col-6':$q.platform.is.desktop,'col-12 q-pb q-pb-lg':$q.platform.is.mobile}
"
>
<span
class=
"
q-px-lg HotelSure-text
"
><span
class=
"text-red"
>
*
</span>
{{$t('v101.scatteredOrder.ruzhushijian1')}}
</span>
<span
class=
"
"
:class=
"{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}
"
><span
class=
"text-red"
>
*
</span>
{{$t('v101.scatteredOrder.ruzhushijian1')}}
</span>
<q-field
v-if=
"$q.platform.is.desktop"
stack-label
:label=
"$t('v101.scatteredOrder.ruzhushijian')"
standout
class=
"col"
:class=
"{'ischeckInTimeSure':ischeckInTimeSure}"
style=
"min-width: 200px"
dense
>
<q-field
stack-label
:label=
"$t('v101.scatteredOrder.ruzhushijian')"
standout
class=
"col"
:class=
"{'ischeckInTimeSure':ischeckInTimeSure}"
style=
"min-width: 200px"
dense
>
<div
class=
"self-center full-width no-outline"
tabindex=
"0"
>
<div
class=
"self-center full-width no-outline"
tabindex=
"0"
>
{{sureMsg.checkInTime}}
{{sureMsg.checkInTime}}
</div>
</div>
...
@@ -190,8 +193,8 @@
...
@@ -190,8 +193,8 @@
</q-popup-proxy>
</q-popup-proxy>
</q-field>
</q-field>
</div>
</div>
<div
class=
"
col-6 row
"
>
<div
class=
"
row"
:class=
"{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}
"
>
<span
class=
"
q-px-lg HotelSure-text
"
><span
class=
"text-red"
>
*
</span>
{{$t('v101.scatteredOrder.yudinren')}}
</span>
<span
class=
"
"
:class=
"{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}
"
><span
class=
"text-red"
>
*
</span>
{{$t('v101.scatteredOrder.yudinren')}}
</span>
<div
class=
"col row justify-between"
>
<div
class=
"col row justify-between"
>
<div
class=
"col-6"
>
<div
class=
"col-6"
>
<q-input
<q-input
...
@@ -224,8 +227,8 @@
...
@@ -224,8 +227,8 @@
</div>
</div>
</div>
</div>
<div
class=
"
col-6 row
"
>
<div
class=
"
row"
:class=
"{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}
"
>
<span
class=
"
q-px-lg HotelSure-text
"
><span
class=
"text-red"
>
*
</span>
{{$t('v101.scatteredOrder.dangqiandizhi')}}
</span>
<span
class=
"
"
:class=
"{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}
"
><span
class=
"text-red"
>
*
</span>
{{$t('v101.scatteredOrder.dangqiandizhi')}}
</span>
<q-input
<q-input
class=
"col"
class=
"col"
dense
dense
...
@@ -239,8 +242,8 @@
...
@@ -239,8 +242,8 @@
ref=
"guestAddress"
ref=
"guestAddress"
/>
/>
</div>
</div>
<div
class=
"
col-6 row
"
>
<div
class=
"
row"
:class=
"{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}
"
>
<span
class=
"
q-px-lg HotelSure-text
"
><span
class=
"text-red"
>
*
</span>
{{$t('v101.scatteredOrder.Email')}}
</span>
<span
class=
"
"
:class=
"{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}
"
><span
class=
"text-red"
>
*
</span>
{{$t('v101.scatteredOrder.Email')}}
</span>
<q-input
<q-input
class=
"col"
class=
"col"
dense
dense
...
@@ -254,8 +257,8 @@
...
@@ -254,8 +257,8 @@
ref=
"guestEmail"
ref=
"guestEmail"
/>
/>
</div>
</div>
<div
class=
"
col-6 row
"
>
<div
class=
"
row"
:class=
"{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}
"
>
<span
class=
"
q-px-lg HotelSure-text
"
><span
class=
"text-red"
>
*
</span>
{{$t('v101.scatteredOrder.dianhua')}}
</span>
<span
class=
"
"
:class=
"{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}
"
><span
class=
"text-red"
>
*
</span>
{{$t('v101.scatteredOrder.dianhua')}}
</span>
<q-input
<q-input
class=
"col"
class=
"col"
dense
dense
...
@@ -271,8 +274,8 @@
...
@@ -271,8 +274,8 @@
/>
/>
</div>
</div>
<div
class=
"col-12 row"
>
<div
class=
"col-12 row"
>
<div
class=
"
col-6 row
"
>
<div
class=
"
row"
:class=
"{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}
"
>
<span
class=
"
q-px-lg HotelSure-text
"
><span
class=
"text-red"
></span>
{{$t('v101.scatteredOrder.kehuxuqiu')}}
</span>
<span
class=
"
"
:class=
"{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}
"
><span
class=
"text-red"
></span>
{{$t('v101.scatteredOrder.kehuxuqiu')}}
</span>
<q-input
<q-input
class=
"col"
class=
"col"
dense
dense
...
@@ -288,28 +291,25 @@
...
@@ -288,28 +291,25 @@
</div>
</div>
</div>
</div>
<div
class=
"col-12 row"
>
<div
class=
"col-12 row"
>
<div
class=
"
col-6 row q-mb-md"
v-for=
"item in sureMsg.roomGroup"
>
<div
class=
"
row q-mb-md"
:class=
"{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}"
v-for=
"item in sureMsg.roomGroup"
>
<span
class=
"
q-px-lg HotelSure-text
"
><span
class=
"text-red"
></span>
<span
class=
"
"
:class=
"{'HotelSure-text q-px-lg':$q.platform.is.desktop,'HotelSure-textMobile q-pr-sm':$q.platform.is.mobile}
"
><span
class=
"text-red"
></span>
{{$t('v101.scatteredOrder.fangjian')}}
{{$t('v101.scatteredOrder.fangjian')}}
{{item.roomCount}}
{{item.roomCount}}
</span>
</span>
<div
class=
"col row"
>
<div
class=
"col row"
>
<div
class=
"col-4 row"
>
<div
class=
"col-4 row"
>
<!-- <span class="q-mx-md">{{$t('v101.scatteredOrder.chengrennan')}}</span> -->
<q-select
class=
"col"
v-model=
"item.roomMaleCount"
dense
:options=
"adultList"
emit-value
map-options
:label=
"$t('v101.scatteredOrder.chengrennan')"
standout
@
update:model-value=
"setPeopleNum"
/>
<q-select
class=
"col"
v-model=
"item.roomMaleCount"
dense
:options=
"adultList"
emit-value
map-options
:label=
"$t('v101.scatteredOrder.chengrennan')"
standout
@
update:model-value=
"setPeopleNum"
/>
</div>
</div>
<div
class=
"col-4 row q-pl-lg"
>
<div
class=
"col-4 row"
:class=
"{'q-pl-lg':$q.platform.is.desktop,'q-pl-xs':$q.platform.is.mobile}"
>
<!-- <span class="q-mx-md">{{$t('v101.scatteredOrder.chengrennv')}}</span> -->
<q-select
class=
"col"
v-model=
"item.roomFemaleCount"
dense
:options=
"adultList"
emit-value
map-options
:label=
"$t('v101.scatteredOrder.chengrennv')"
standout
@
update:model-value=
"setPeopleNum"
/>
<q-select
class=
"col"
v-model=
"item.roomFemaleCount"
dense
:options=
"adultList"
emit-value
map-options
:label=
"$t('v101.scatteredOrder.chengrennv')"
standout
@
update:model-value=
"setPeopleNum"
/>
</div>
</div>
<div
class=
"col-4 row q-pl-lg"
>
<div
class=
"col-4 row"
:class=
"{'q-pl-lg':$q.platform.is.desktop,'q-pl-xs':$q.platform.is.mobile}"
>
<!-- <span class="q-mx-md">{{$t('v101.scatteredOrder.ertongshu')}}</span> -->
<q-select
class=
"col"
v-model=
"item.roomChildCount"
dense
:options=
"childrenList"
emit-value
map-options
:label=
"$t('v101.scatteredOrder.ertongshu')"
standout
@
update:model-value=
"setPeopleNum"
/>
<q-select
class=
"col"
v-model=
"item.roomChildCount"
dense
:options=
"childrenList"
emit-value
map-options
:label=
"$t('v101.scatteredOrder.ertongshu')"
standout
@
update:model-value=
"setPeopleNum"
/>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div
class=
"column text-red
q-pl-lg
"
>
<div
class=
"column text-red
"
:class=
"{'q-pl-lg':$q.platform.is.desktop}
"
>
<div
v-if=
"(dataList.cancellationPeriod1==-1||dataList.cancellationPeriod1==0)&&(dataList.cancellationType1==1||dataList.cancellationType1==2)"
>
<div
v-if=
"(dataList.cancellationPeriod1==-1||dataList.cancellationPeriod1==0)&&(dataList.cancellationType1==1||dataList.cancellationType1==2)"
>
<
template
v-if=
"dataList.cancellationPeriod1==-1"
>
{{
$t
(
'v101.scatteredOrder.quxiao1'
)
}}
,
</
template
>
<
template
v-if=
"dataList.cancellationPeriod1==-1"
>
{{
$t
(
'v101.scatteredOrder.quxiao1'
)
}}
,
</
template
>
<
template
v-if=
"dataList.cancellationPeriod1==0"
>
{{
$t
(
'v101.scatteredOrder.quxiao2'
)
}}
,
</
template
>
<
template
v-if=
"dataList.cancellationPeriod1==0"
>
{{
$t
(
'v101.scatteredOrder.quxiao2'
)
}}
,
</
template
>
...
@@ -332,7 +332,8 @@
...
@@ -332,7 +332,8 @@
</q-form>
</q-form>
</div>
</div>
</div>
</div><
template
v-if=
"$q.platform.is.desktop"
>
</
template
>
<div
v-if=
"isLoginB2B"
class=
"col column bg-white rounded-border q-mb-md"
>
<div
v-if=
"isLoginB2B"
class=
"col column bg-white rounded-border q-mb-md"
>
<div
class=
"bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center justify-between"
>
<div
class=
"bg-light-blue-1 q-py-md q-px-lg fz14 rounded-borders row items-center justify-between"
>
<span
class=
"text-weight-bold"
>
{{$t('v101.scatteredOrder.youhuixingxi')}}
</span>
<span
class=
"text-weight-bold"
>
{{$t('v101.scatteredOrder.youhuixingxi')}}
</span>
...
@@ -1036,6 +1037,9 @@
...
@@ -1036,6 +1037,9 @@
.HotelSure-text
{
.HotelSure-text
{
width
:
120px
;
width
:
120px
;
}
}
.HotelSure-textMobile
{
width
:
80px
;
}
.ischeckInTimeSure
.q-field__control
{
.ischeckInTimeSure
.q-field__control
{
border
:
1px
solid
red
;
border
:
1px
solid
red
;
}
}
...
...
src/pages/scattered/hotelDetails.vue
View file @
98dbe879
<
template
>
<
template
>
<div
class=
"q-py-lg"
>
<div
class=
"q-py-lg"
>
<div
class=
"bg-white q-py-lg column"
style=
"max-width: 1366px; min-width: 375px;
width: 1300px;margin: auto;
"
>
<div
class=
"bg-white q-py-lg column"
style=
"max-width: 1366px; min-width: 375px;
margin: auto;"
:style=
"
{'width':$q.platform.is.desktop?'1300px':'100%'}
">
<div
class=
"row q-px-lg q-mb-lg"
:class=
"
{ 'row justify-between': $q.platform.is.desktop }">
<div
class=
"row q-px-lg q-mb-lg"
:class=
"
{ 'row justify-between': $q.platform.is.desktop }">
<div
:class=
"
{ 'row items-center': $q.platform.is.desktop, '': $q.platform.is.mobile }">
<div
:class=
"
{ 'row items-center': $q.platform.is.desktop, '
row wrap
': $q.platform.is.mobile }">
<div
class=
"mobile-only row items-center"
>
<div
class=
"mobile-only row items-center"
>
<div
class=
"text-weight-bold fz20 ellipsis"
style=
"width: 280px"
>
{{
hotelSummary
.
hotelName
}}
</div>
<div
class=
"text-weight-bold fz20 ellipsis"
style=
"width: 280px"
>
{{
hotelSummary
.
hotelName
}}
</div>
</div>
</div>
<div
class=
"text-weight-bold fz20 ellipsis desktop-only"
>
{{
hotelSummary
.
hotelName
}}
</div>
<div
class=
"text-weight-bold fz20 ellipsis desktop-only"
>
{{
hotelSummary
.
hotelName
}}
</div>
<div>
<div
:class=
"
{'q-pt-sm':$q.platform.is.mobile}"
>
<span
class=
"
q-ml-lg text-orange text-weight-bold fz18"
>
<span
class=
"
text-orange text-weight-bold fz18"
:class=
"
{'q-pl-lg':$q.platform.is.desktop}"
>
円
円
{{
urlParamsMsg
.
lowrateBySetCurrency
}}
{{
urlParamsMsg
.
lowrateBySetCurrency
}}
</span>
</span>
<span
class=
"text-grey-8 q-pl-xs"
>
/
{{
$t
(
'v101.scattered.qi'
)
}}
</span>
<span
class=
"text-grey-8 q-pl-xs"
>
/
{{
$t
(
'v101.scattered.qi'
)
}}
</span>
</div>
</div>
<div
:class=
"
{'q-ml-md':$q.platform.is.desktop}">
<div
:class=
"
{'q-ml-md':$q.platform.is.desktop
,'q-pt-sm q-pl-sm':$q.platform.is.mobile
}">
<q-rating
v-model=
"hotelSummary.reviewRating"
size=
"1.5em"
color=
"orange"
:max=
"hotelSummary.reviewRating"
readonly
/>
<q-rating
v-model=
"hotelSummary.reviewRating"
size=
"1.5em"
color=
"orange"
:max=
"hotelSummary.reviewRating"
readonly
/>
</div>
</div>
</div>
</div>
...
@@ -24,15 +24,9 @@
...
@@ -24,15 +24,9 @@
<q-icon
class=
"text-grey-13 q-mr-xs"
name=
"place"
size=
"xs"
></q-icon>
<q-icon
class=
"text-grey-13 q-mr-xs"
name=
"place"
size=
"xs"
></q-icon>
<span
class=
"col fz14 text-weight-bold text-blick"
>
{{
hotelSummary
.
address
}}
</span>
<span
class=
"col fz14 text-weight-bold text-blick"
>
{{
hotelSummary
.
address
}}
</span>
</div>
</div>
<div
class=
"q-py-lg no-wrap col"
:class=
"
{
row: $q.platform.is.desktop, column
: $q.platform.is.mobile }">
<div
class=
"q-py-lg no-wrap col"
:class=
"
{
'row': $q.platform.is.desktop, 'column'
: $q.platform.is.mobile }">
<div
class=
"row rounded-borders relative-position"
:class=
"
{ 'col-6': $q.platform.is.desktop, 'height-320': $q.platform.is.mobile }" style="overflow: hidden" v-if="h.List">
<div
class=
"row rounded-borders relative-position"
:class=
"
{ 'col-6': $q.platform.is.desktop, 'height-320': $q.platform.is.mobile }" style="overflow: hidden" v-if="h.List">
<div
v-if=
"h.ChainBrand"
class=
"f12 absolute-left bg-white"
style=
"padding: 5px; bottom: unset; z-index: 1; border-bottom-right-radius: 4px"
>
<div
:class=
"
{ 'col-5': h.List.length >= 3
&&
$q.platform.is.desktop, 'col-7': h.List.length >= 3
&&
$q.platform.is.mobile, 'col-6': h.List.length == 2, 'col-12': h.List.length == 1 }">
<div
class=
"row items-center rounded-borders"
style=
"overflow: hidden"
>
<div
class=
"bg-dark text-white"
style=
"padding: 0 4px; font-size: 12px"
></div>
<div
class=
"text-dark"
style=
"padding: 0 4px; font-size: 12px; background: #f0bd86"
></div>
</div>
</div>
<div
:class=
"
{ 'col-5': h.List.length >= 3, 'col-6': h.List.length == 2, 'col-12': h.List.length == 1 }">
<q-img
@
click=
"showImageHandler(h.List[0])"
:src=
"h.List[0]"
spinner-color=
"drk"
spinner-size=
"20px"
height=
"100%"
mode=
"cover"
/>
<q-img
@
click=
"showImageHandler(h.List[0])"
:src=
"h.List[0]"
spinner-color=
"drk"
spinner-size=
"20px"
height=
"100%"
mode=
"cover"
/>
</div>
</div>
<div
class=
"col q-pl-sm"
v-if=
"h.List.length > 1"
>
<div
class=
"col q-pl-sm"
v-if=
"h.List.length > 1"
>
...
@@ -41,10 +35,14 @@
...
@@ -41,10 +35,14 @@
</div>
</div>
<div
class=
"row items-end q-pt-sm"
style=
"height: 50%"
v-if=
"h.List.length > 2"
>
<div
class=
"row items-end q-pt-sm"
style=
"height: 50%"
v-if=
"h.List.length > 2"
>
<q-img
@
click=
"showImageHandler(h.List[2])"
:src=
"h.List[2]"
spinner-color=
"drk"
spinner-size=
"20px"
height=
"100%"
mode=
"cover"
>
<q-img
@
click=
"showImageHandler(h.List[2])"
:src=
"h.List[2]"
spinner-color=
"drk"
spinner-size=
"20px"
height=
"100%"
mode=
"cover"
>
<div
class=
"absolute-full text-subtitle2 flex flex-center"
v-if=
"h.List.length > 3&&$q.platform.is.mobile"
>
<span
class=
"fz20 text-weight-bold"
>
+
</span>
<span
class=
"text-h5 text-weight-bold"
>
{{
h
.
List
.
length
-
3
}}
</span>
</div>
</q-img>
</q-img>
</div>
</div>
</div>
</div>
<div
class=
"col q-pl-sm"
v-if=
"h.List.length > 3"
>
<div
class=
"col q-pl-sm"
v-if=
"h.List.length > 3
&&$q.platform.is.desktop
"
>
<div
:style=
"
{ height: h.List.length > 4 ? '50%' : '100%' }">
<div
:style=
"
{ height: h.List.length > 4 ? '50%' : '100%' }">
<q-img
@
click=
"showImageHandler(h.List[3])"
:src=
"h.List[3]"
spinner-color=
"drk"
spinner-size=
"20px"
height=
"100%"
mode=
"cover"
/>
<q-img
@
click=
"showImageHandler(h.List[3])"
:src=
"h.List[3]"
spinner-color=
"drk"
spinner-size=
"20px"
height=
"100%"
mode=
"cover"
/>
</div>
</div>
...
@@ -69,6 +67,7 @@
...
@@ -69,6 +67,7 @@
<div
class=
"text-weight-bold"
>
{{
$t
(
'v101.scatteredDetails.jiudianxinxi'
)
}}
</div>
<div
class=
"text-weight-bold"
>
{{
$t
(
'v101.scatteredDetails.jiudianxinxi'
)
}}
</div>
<!--
<div
class=
"text-grey-8 q-mt-sm"
>
{{
h
.
Descriptions
}}
</div>
-->
<!--
<div
class=
"text-grey-8 q-mt-sm"
>
{{
h
.
Descriptions
}}
</div>
-->
</div>
</div>
<div
:class=
"
{ 'q-px-lg': $q.platform.is.desktop }">
<div
:class=
"
{ 'q-px-lg': $q.platform.is.desktop }">
<div
class=
"q-mt-lg row"
>
<div
class=
"q-mt-lg row"
>
<div
class=
"col-3 f12 text-grey-500"
>
{{
$t
(
'v101.scatteredDetails.titlexinxi1'
)
}}
</div>
<div
class=
"col-3 f12 text-grey-500"
>
{{
$t
(
'v101.scatteredDetails.titlexinxi1'
)
}}
</div>
...
@@ -101,10 +100,10 @@
...
@@ -101,10 +100,10 @@
</div>
</div>
</div>
</div>
<div
:class=
"{ 'q-px-lg': $q.platform.is.desktop }"
>
<div
:class=
"{ 'q-px-lg': $q.platform.is.desktop }"
>
<div
class=
"q-mt-lg
row
"
>
<div
class=
"q-mt-lg
"
:class=
"{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}
"
>
<div
class=
"col-3 f12 text-grey-500"
>
{{ $t('v101.scatteredDetails.titlexinxi5') }}
</div>
<div
class=
"col-3 f12 text-grey-500"
>
{{ $t('v101.scatteredDetails.titlexinxi5') }}
</div>
<div
class=
"col text-subtitle2 text-weight-bolder"
>
<div
class=
"col text-subtitle2 text-weight-bolder"
>
<table
class=
"
hotel-details-table
"
>
<table
class=
"
"
:class=
"{'hotel-details-table':$q.platform.is.desktop,'hotel-details-tableMoblie':$q.platform.is.mobile}
"
>
<tr>
<tr>
<td
colspan=
"3"
class=
"td01"
>
{{$t('v101.scatteredDetails.shiwai')}}
</td>
<td
colspan=
"3"
class=
"td01"
>
{{$t('v101.scatteredDetails.shiwai')}}
</td>
<td
colspan=
"3"
class=
"td01"
>
{{$t('v101.scatteredDetails.wunei')}}
</td>
<td
colspan=
"3"
class=
"td01"
>
{{$t('v101.scatteredDetails.wunei')}}
</td>
...
@@ -607,6 +606,35 @@
...
@@ -607,6 +606,35 @@
font-size
:
14px
;
font-size
:
14px
;
box-sizing
:
border-box
;
box-sizing
:
border-box
;
}
}
.hotel-details-tableMoblie
{
border
:
1px
solid
#DCDCDC
;
border-collapse
:
collapse
;
width
:
100%
;
margin-top
:
5px
;
}
.hotel-details-tableMoblie
.td01
{
padding
:
3px
15px
;
background
:
#F7F7F7
;
width
:
33.33%
;
height
:
19px
;
text-align
:
center
;
}
.hotel-details-tableMoblie
.td02
{
padding
:
3px
5px
;
background
:
#FAFAFA
;
width
:
33.33%
;
height
:
19px
;
text-align
:
center
;
}
.hotel-details-tableMoblie
td
{
width
:
100%
;
padding
:
10px
20px
;
vertical-align
:
middle
;
text-align
:
center
;
border
:
1px
solid
#DCDCDC
;
font-size
:
14px
;
box-sizing
:
border-box
;
}
.HD_hotelComIntroduce
{
.HD_hotelComIntroduce
{
margin
:
auto
;
margin
:
auto
;
height
:
auto
;
height
:
auto
;
...
...
Write
Preview
Markdown
is supported
0%
Try again
or
attach a new file
Attach a file
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Cancel
Please
register
or
sign in
to comment