Skip to content

B
bigwood
Commit 98dbe879 authored by youjie's avatar youjie
Browse files
Options

no message

parent 99e0946c
Hide whitespace changes
Inline Side-by-side
Showing with 321 additions and 206 deletions
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;
......
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