Skip to content

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

no message

parent 5be1d9ac
Show whitespace changes
Inline Side-by-side
Showing with 236 additions and 41 deletions
src/components/hotel/list/ListTable.vue
View file @ dab89c6b
<template>
<div class="full-height column hotel-list">
<!-- <hotelCard></hotelCard> -->
<q-table v-if="$q.platform.is.desktop" :loading="loading" :rows="hotels" :loading-label="$t('loading')" class="sticky-column-table col sticky-header-column-table hotel-table" flat :pagination="pages" :no-data-label="$t('noneData')">
<template v-slot:top>
<div class="row full-width">
......@@ -21,8 +22,11 @@
</template>
<template v-slot:body="props">
<q-tr :props="props">
<q-td style="width:200px">
<div class="ellipsis-3-lines" style="padding: 7px 16px;width: 200px;white-space: break-spaces;">{{ props.row.HotelName }}</div>
<q-td style="width:200px;" class="cursor-pointer ListTable-title">
<div class="ellipsis-3-lines" style="padding: 7px 16px;width: 200px;white-space: break-spaces;">
{{ props.row.HotelName }}
</div>
<hotelCard class="ListTable-show" v-if="props.rowIndex==0"></hotelCard>
</q-td>
<q-td>
<div class="td-item">{{ $t('hotel.table.price') }}</div>
......@@ -78,6 +82,9 @@
<q-dialog v-model="showOrderPreview" persistent>
<TableOperation :HotelRow="orderSubmitObj" :hotelInfor="orderSubmitItemObj" @close="showOrderPreview = false"></TableOperation>
</q-dialog>
<q-dialog v-model="showHotelDetails" persistent>
<hotelDetails></hotelDetails>
</q-dialog>
</div>
</template>
......@@ -94,8 +101,9 @@ import HotelPriceList from './HotelPriceList.vue'
import TableOperation from "./TableOperation.vue"
import SamplePriceList from './SamplePriceList.vue'
import hotelCard from './hotelCard.vue'
import hotelDetails from './hotelDetails.vue'
export default defineComponent({
components: { HotelPriceList, TableOperation,SamplePriceList,hotelCard },
components: { HotelPriceList, TableOperation,SamplePriceList,hotelCard,hotelDetails },
name: 'list-table',
setup() {
const $q=useQuasar()
......@@ -145,7 +153,8 @@ export default defineComponent({
queryHotelObj:{},
orderSubmitObj:{} as any,
orderSubmitItemObj:{} as any,
showOrderPreview: false
showOrderPreview: false,
showHotelDetails: true
})
......@@ -233,7 +242,19 @@ export default defineComponent({
</script>
<style>
.ListTable-title{
position: relative !important;
}
.ListTable-title:hover .ListTable-show{
display: block;
}
.ListTable-show{
/* position: absolute;
left: 0;
top:80px;
z-index: 9999; */
/* display: none; */
}
.cos-item-icon {
width: 14px;
height: 14px;
......
src/components/hotel/list/hotelCard.vue
View file @ dab89c6b
<template>
<q-card class="bg-white q-pb-md column">
121
<q-card class="bg-white q-pb-md column reactive" style="width: 228px;height: 285px;overflow: hidden;">
<div class="hotelCard-img" style="border-radius: 0; border-top-left-radius: 5px;border-top-right-radius: 5px;
">
<q-img
style="height: 100%;"
src="https://placeimg.com/500/300/nature"
:ratio="4/3"
/>
</div>
<div class="q-py-sm q-px-sm" style="width: 100%;">
<div class="hotelCard-title text-weight-bold fz14">
東京上野康福酒店H0TELCO東京上野康福酒店H0TELCO
</div>
</div>
<div class="q-px-sm">
<img v-for="item in 5" class="q-mr-xs" width="15" height="11" src="../../../assets/images/hotelCard0.png" />
</div>
<div class="q-px-sm row items-center justify-between nowrap absolute" style="left: 0;right: 0;bottom: 16px;">
<div>
<q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
<span class="fz12 text-weight-bold text-grey-7">日本东京</span>
</div>
<div class="text-blue">
<span class="fz18 text-weight-bold">521</span>
<span class="fz15 text-weight-bold">{{$t('unit.jp')}}</span>
<span class="fz15 q-pl-sm">{{$t('hotel.col.low')}}</span>
</div>
</div>
</q-card>
</template>
......@@ -44,6 +70,16 @@
</script>
<style>
.hotelCard-img{
width: 228px;
height: 162px;
overflow: hidden;
}
.hotelCard-title{
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
\ No newline at end of file
src/components/hotel/list/hotelDetails.vue 0 → 100644
View file @ dab89c6b
<template>
<q-card class="bg-white q-pa-lg" style="width: 1366px;">
<div class="q-pa-lg">
<div class="row justify-between">
<div class="row items-center">
<div class="text-weight-bold fz20">
東京上野康福酒店H0TELCO東京上野康福酒店H0TELCO
</div>
<div class="q-ml-md">
<img v-for="item in 5" class="q-mr-xs" width="24" height="17" src="../../../assets/images/hotelCard0.png" />
</div>
</div>
<q-icon class="text-grey-13 cursor-pointer" name="close" size="md"></q-icon>
</div>
<div class="q-py-md text-blue">
<span class="fz14 text-weight-bold q-pr-sm">{{$t('hotel.col.four')}}</span>
<span class="text-h5 text-weight-bold">500-700</span>
<span class="fz14 text-weight-bold">{{$t('unit.jp')}}</span>
</div>
<div class="row nowrap">
<q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
<span class="fz14 text-weight-bold text-blick" style="flex-grow: 1;">日本，東京都，東京，東京上野臺東區下谷1丁目3-11</span>
</div>
<div class="q-pt-sm row">
<div>
<q-icon class="text-grey-13 q-mr-xs" name="phone" size="xs"></q-icon>
<span class="fz14 text-weight-bold text-blick">{{$t('hotel.details.zuoji')}}:</span>
<span class="fz14 text-weight-bold text-blue q-ml-sm q-mr-md">03-68458878</span>
</div>
<div class="q-mr-lg">
<span class="fz14 text-weight-bold text-blick">{{$t('hotel.details.chuanzhen')}}:</span>
<span class="fz14 text-weight-bold text-blue q-ml-sm">03-68458878</span>
</div>
<div class="q-ml-lg">
<span class="fz14 text-weight-bold text-blick">{{$t('hotel.details.guanwang')}}:</span>
<span class="fz14 text-weight-bold text-blue q-ml-sm">www.takitei.ltd/hotelcomfact</span>
</div>
</div>
<div class="q-py-lg row nowrap col">
<div class="col-6 row col">
<div class="col-7">
<img style="display: block;height: 100%;width: 100%;" src="https://placeimg.com/500/300/nature"/>
</div>
<div class="col" style="flex-shrink: 0;margin-left: 10px;">
<div style="height: 50%;">
<img style="display: block;height: 97%;width: 100%;" src="https://placeimg.com/500/300/nature"/>
</div>
<div class="row items-end" style="height: 50%;">
<q-img style="height: 97%;width: 100%;" src="https://placeimg.com/500/300/nature">
<div class="absolute-full text-subtitle2 flex flex-center">
<span class="fz20 text-weight-bold">+</span>
<span class="text-h5 text-weight-bold">14</span>
</div>
</q-img>
</div>
</div>
</div>
<div class="col q-ml-md" style="height: 299px; border: 1px solid #F3F3F3;overflow: hidden;">
<div class="q-ma-sm">
<img height="280" style="width: 100%;" src="https://placeimg.com/500/300/nature"/>
</div>
</div>
</div>
<div class="bg-light-blue-1 q-pa-md fz14">
<div class="text-weight-bold ">{{$t('hotel.details.xiangqing')}}</div>
<div class="text-grey-8 q-mt-sm">
上野康福酒店位於臺東區下谷，地理位置優越，此酒店是您出行東京的理想
出發點。 在這裏，住客們可輕松前往市區內各大旅遊、購物、餐飲地點
。上野康福酒店一直致力於為您提供一流的設施與尊貴的服務，確保您在入
住期間愉快、愜意。上野康福酒店是出行東京的優選住宿，為您提供一站式高品質服務。
</div>
</div>
</div>
</q-card>
</template>
<script lang="ts">
import { defineComponent, ref, reactive, toRefs, provide, onMounted, inject, watch, onBeforeUnmount, computed } from 'vue'
import { useI18n } from 'vue-i18n'
import useScrollModule from '../../../module/scrollbar/scrollModule'
import { DirtionmaryHelper } from '../../../config/dictionary'
import message from '../../../utils/message'
import { ApiResult } from '../../../@types/enumHelper'
import HotelService from '../../../api/hotel'
import { moneyFormat } from '../../../utils/tools'
import { useQuasar } from 'quasar'
export default defineComponent({
props: {},
setup(props, context) {
const orderstatus = inject(DirtionmaryHelper.HOTEL_CAR_ORDER_STATUS) as any
const cars = inject(DirtionmaryHelper.HOTEL_CAR_LIST) as any
const editor = inject(DirtionmaryHelper.HOTEL_UPDATEHOTEL_CAR) as any
const { t } = useI18n()
const TCNumRef = ref(null) as any
const ContactNameRef = ref(null) as any
const ContactNumberRef = ref(null) as any
const $q = useQuasar()
const data = reactive({
})
data.scrollStyle = useScrollModule().scrollStyle
const info = ref(null)
const panning = ref(false)
// 今天购买数量
watch(cars.value, (n, o) => {
methods.getMoney()
})
const methods = {
}
return { ...toRefs(data), cars, TCNumRef, ContactNameRef, ContactNumberRef, ...methods, moneyFormat, info, panning,}
}
})
</script>
<style>
.hotelCard-img{
width: 228px;
height: 162px;
overflow: hidden;
}
.hotelCard-title{
width: 100%;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
</style>
\ No newline at end of file
src/i18n/zh-TW/index.ts
View file @ dab89c6b
......@@ -182,6 +182,12 @@ export default {
bigTips:"本房型不同的酒店入住人數限制不同，系統默認該房型只能入住一人",
yg:"預計 ",
outbind:"超出現有的庫存預定，我們會即時與酒店協商，請保證收訊通暢",
details: {
zuoji: '座機',
chuanzhen: '傳真',
guanwang: '官網',
xiangqing: '酒店詳情'
},
car: {
shoppingTitle: "購物車",
addShopping: "暫存購物車",
......
src/pages/eMail/eMail.html
View file @ dab89c6b
......@@ -9,14 +9,15 @@
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1">
</head>
<body>
<div style="width: 90%;background: #FFFFFF;box-shadow: 2px 1px 30px 0px rgba(0,0,0,0.14);border-radius: 10px;margin: auto;padding: 43px 0 48px 0;margin-top: 74px;margin-bottom: 64px;">
<div style="width: 100%;height: 100%;background: #f5f5f5;padding: 20px 0;border-radius: 3px;">
<div style="width: 90%;min-width: 375px;max-width: 840px;background: #FFFFFF;box-shadow: 2px 1px 30px 0px rgba(0,0,0,0.14);border-radius: 10px;margin: auto;padding: 43px 0 43px 0;margin-bottom: 34px;">
<div style="margin: 0 10%;">
<div style="text-align: center;">
<img alt="Logo" style="width: 80%;display: inline-block;" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1669115856000_639.png'/>
<img width="80%" height="auto" alt="Logo" style="min-height: 30px;display: inline-block;" src='https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1669115856000_639.png'/>
</div>
<div style="display: flex;align-items: center;flex-direction: row;justify-content: space-between;flex-wrap: nowrap;margin-top: 50px;">
<div style="display:flex;flex-direction: row;flex-wrap: nowrap;align-items: center;flex-grow: 1;">
<img alt="icon" style="flex-shrink: 0; width: 15px;height: 20px;display: inline-block;margin-right: 8px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1669115856000_378.png" />
<img width="15" height="20" alt="icon" style="flex-shrink: 0;display: inline-block;margin-right: 8px;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1669115856000_378.png" />
<div style="flex-grow: 1; height: 20px;font-size: 20px;font-family: Microsoft YaHei;font-weight: bold;color: #000000;">
<span style="position: relative;top: -5px;">{0}</span>
</div>
......@@ -30,7 +31,7 @@
Hello：
</div>
<div style="position: relative;">
<img alt="img" style="position: absolute;right: 0;bottom: 0; width: 413px;height: 354px;display: inline-block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1669115856000_41.png" />
<img width="50%" height="auto" alt="img" style="position: absolute;right: 0;bottom: 0;display: inline-block;" src="https://viitto-1301420277.cos.ap-chengdu.myqcloud.com/Test/Upload/Goods/1669115856000_41.png" />
<div style="position: relative;z-index: 2;">
<div style="font-size: 14px;font-family: Microsoft YaHei;font-weight: 400;color: #000000;line-height: 28px;">
<div style="margin-top: 36px;margin-bottom: 28px;">{1}</div>
......@@ -48,5 +49,6 @@
</div>
</div>
</div>
</div>
</body>
</html>
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