Commit 98dbe879 authored by youjie's avatar youjie

no message

parent 99e0946c
<template>
<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>
<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-popup-proxy>
</q-field>
<div class="row">
<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">
<div class="row" :class="{'q-mt-sm':$q.platform.is.mobile}">
<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-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">
......@@ -31,25 +31,28 @@
</q-popup-proxy>
</q-btn>
</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>
<span class="q-pl-lg">{{ $t('v101.scatteredDetails.prompt') }}</span>
</div>
<div class="col"></div>
<q-btn color="primary" unelevated :label="$t('query')" :loading="loading" @click="initHotel"/>
</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="text-weight-bold">{{ $t('v101.scatteredDetails.fuheTJroom') }}</div>
</div>
<q-card class="q-my-md">
<div class="q-my-md">
<template v-if="SimilarList&&SimilarList.length>0">
<div class="row" 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;">
<!-- @click="showImageHandler" -->
<div class="col-6" style="height: 100px;">
<q-img :src="item.roomImageURL" style="height: 100px;" spinner-color="drk" spinner-size="20px" height="100%" mode="cover"/>
<q-card class="row q-mb-md" v-for="(item,index) in SimilarList" :key="index" v-loading="loading">
<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':''}">
<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'}">
<q-img :src="item.roomImageURL" :style="{'height':$q.platform.is.desktop?'100%':'50px'}" spinner-color="drk" spinner-size="20px" mode="cover"/>
</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">
{{getGradeType(item.gradeType)}}{{getRoomType(item.roomType)}}
</div>
......@@ -65,16 +68,16 @@
</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">
<q-separator v-if="subIndex!=0"/>
<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;"
: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-3 q-pl-lg">{{subItem.minNights}}</div>
<div class="row justify-between text-red q-pl-lg">
<div class="col-2 text-grey-6" v-if="$q.platform.is.desktop">{{subItem.bookingDeadline}}</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" :class="{'q-pl-lg':$q.platform.is.desktop}" v-if="$q.platform.is.desktop">
<div class="column">
<span>{{$t('v101.scatteredDetails.Time1')}}</span>
<span>{{subItem['check-inStartTime']}}</span>
......@@ -88,7 +91,7 @@
<span>{{subItem['finalCheck-outTime']}}</span>
</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">
<span class="text-grey-6"></span>
<span class="fz20 text-red q-px-sm">{{getPrice(subItem.chargeableRateInfoPerPersonForANightBySetCurrency)}}</span>
......@@ -106,12 +109,12 @@
</div>
</div>
</div>
</div>
</q-card>
</template>
<div v-else class="col q-pa-lg text-center">
{{$t('noneData')}}
</div>
</q-card>
</div>
</template>
......
......@@ -83,7 +83,7 @@
</template>
<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.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="font-size: 13px;">{{props.row.hotelName}}</div>
</div>
......
<template>
<div>
<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">
<q-td :props="props">
<div class="cursor-pointer" @click="getDetail(props.row.OrderID)">
......@@ -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" />
</template>
</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-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
</div>
<q-dialog v-model="showOrderdDetail">
......@@ -78,6 +126,11 @@ export default defineComponent({
{ name: 'OrderStatus', label: t('v101.scatteredOrderList.table6'), align: 'left' },
{ name: 'CreateDateStr', label: t('v101.scatteredOrderList.table7'), field: (row: any) => row.CreateDateStr, align: 'left' }
] 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 = {
......
......@@ -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-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>
<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"/>
</div>
<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'
import { OrderType, RoomType, StandardStatus } from '../../../@types'
import { getScatteredHotelOrderStatus, getHotelOrderType, getHotelRoomType } from '../../../utils/tools'
import { date,useQuasar } from 'quasar'
import svgIcon from '../../../global/svg-icon.vue'
import svgIcon from '../../global/svg-icon.vue'
export default defineComponent({
components: { },
components: { svgIcon },
setup(props) {
const qDateProxy = ref(null) as any
const $q = useQuasar()
......@@ -70,7 +86,10 @@ export default defineComponent({
const searchCnt = computed(() => {
let setCnt = 0
if ($q.platform.is.mobile) {
if (realSearch.B2BSelectOrderState>-1) setCnt++
if (realSearch.HotelName) setCnt++
}
return setCnt
})
......
......@@ -31,7 +31,7 @@ export default defineComponent({
}
const search=reactive({
B2BSelectOrderState:0,
CustomerId: '',
CustomerId: CustomerId,
HotelName:''
})
// search.OrderId = currentRouter.currentRoute.value.params.orderId
......
This diff is collapsed.
<template>
<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 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="text-weight-bold fz20 ellipsis" style="width: 280px">{{ hotelSummary.hotelName }}</div>
</div>
<div class="text-weight-bold fz20 ellipsis desktop-only">{{ hotelSummary.hotelName }}</div>
<div>
<span class="q-ml-lg text-orange text-weight-bold fz18" >
<div :class="{'q-pt-sm':$q.platform.is.mobile}">
<span class=" text-orange text-weight-bold fz18" :class="{'q-pl-lg':$q.platform.is.desktop}">
{{urlParamsMsg.lowrateBySetCurrency}}
</span>
<span class="text-grey-8 q-pl-xs">/{{$t('v101.scattered.qi')}}</span>
</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 />
</div>
</div>
......@@ -24,15 +24,9 @@
<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>
</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 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="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 }">
<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 }">
<q-img @click="showImageHandler(h.List[0])" :src="h.List[0]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
</div>
<div class="col q-pl-sm" v-if="h.List.length > 1">
......@@ -41,10 +35,14 @@
</div>
<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">
<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>
</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%' }">
<q-img @click="showImageHandler(h.List[3])" :src="h.List[3]" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
</div>
......@@ -69,6 +67,7 @@
<div class="text-weight-bold">{{ $t('v101.scatteredDetails.jiudianxinxi') }}</div>
<!-- <div class="text-grey-8 q-mt-sm">{{ h.Descriptions }}</div> -->
</div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div class="q-mt-lg row">
<div class="col-3 f12 text-grey-500">{{ $t('v101.scatteredDetails.titlexinxi1') }}</div>
......@@ -101,10 +100,10 @@
</div>
</div>
<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 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>
<td colspan="3" class="td01">{{$t('v101.scatteredDetails.shiwai')}}</td>
<td colspan="3" class="td01">{{$t('v101.scatteredDetails.wunei')}}</td>
......@@ -607,6 +606,35 @@
font-size: 14px;
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{
margin: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