Skip to content

B
bigwood
Commit 85ce9ab0 authored by 罗超's avatar 罗超
Browse files
Options

解決衝突

parent e339448c
Show whitespace changes
Inline Side-by-side
Showing with 289 additions and 50 deletions
src/@types/index.ts
View file @ 85ce9ab0
......@@ -218,3 +218,12 @@ export type OrderType={
TypeId:number,
TypeName:string
}
export type DinnerType={
Id:number,
Name:string
}
export type HotelType = {
Id:number,
Name:string
}
src/App.vue
View file @ 85ce9ab0
......@@ -301,4 +301,6 @@ body
color: var(--q-gray-800) !important
.text-grey-900
color: var(--q-gray-900) !important
.no-padding .q-dialog__inner--minimized
padding: 0px !important
</style>
src/components/common/ImagePreview.vue 0 → 100644
View file @ 85ce9ab0
<template>
<div style="width: 100vw !important; height: 100vh !important; overflow: hidden" class="column items-center justify-center">
<q-img width="100%" height="100%" :src="images[currentIndex]" :img-style="{'transform':scaleString+' '+rotateString}" spinner-color="primary" spinner-size="30px" fit="cover" />
<!-- <img :src="images[currentIndex]" class="drop-target" :style="{'transform':scaleString+' '+rotateString}"/> -->
</div>
<div class="img-preview-tools-box" style="box-shadow: none !important">
<div class="img-preview-tools" style="box-shadow: none !important">
<div class="row items-center" style="box-shadow: none !important">
<q-icon name="first_page" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="changeImageIndexHandler(-1)"/>
<q-icon name="last_page" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="changeImageIndexHandler(1)"/>
<q-icon name="rotate_right" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="rotateHandler(1)"/>
<q-icon name="rotate_left" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="rotateHandler(-1)"/>
<q-icon name="crop_free" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(0)"/>
<q-icon name="zoom_out" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(-1)"/>
<q-icon name="zoom_in" size="28px" color="grey-2" class="q-mr-md cursor-pointer" v-ripple @click="zoomHandler(1)"/>
<q-icon name="close" size="28px" color="grey-2" class="cursor-pointer" v-ripple v-close-popup/>
<!-- crop_free rotate_right first_page -->
</div>
</div>
</div>
</template>
<script lang="ts">
import { defineComponent, toRefs, watch, reactive } from 'vue'
export default defineComponent({
props: ['current', 'images'],
setup(props) {
watch(
() => props.current,
(n, o) => {
data.current = props.current
data.images = props.images
data.currentIndex=data.images.indexOf(data.current)
data.currentIndex = data.currentIndex==-1?0:data.currentIndex
}
)
const data = reactive({
current: props.current,
currentIndex: 0,
images: props.images,
scale:1,
scaleString:'scale(1)',
rotate:0,
rotateString:'rotate(0deg)'
})
data.currentIndex=data.images.indexOf(data.current)
data.currentIndex = data.currentIndex==-1?0:data.currentIndex
const methods = {
zoomHandler(num:number){
if(num==0){
data.scale=1
}
if(data.scale<3 && num>0){
data.scale+=0.25
}
if(data.scale>0.25 && num<0){
data.scale-=0.25
}
data.scaleString=`scale(${data.scale})`
console.log(data.scale,data.scaleString)
},
rotateHandler(num:number){
if(num==0){
data.rotate=0
}
if(num>0){
data.rotate+=90
}
if(num<0){
data.rotate-=90
}
data.rotateString=`rotate(${data.rotate}deg)`
},
changeImageIndexHandler(num:number){
data.scale=1
data.scaleString=`scale(${data.scale})`
data.rotate=0
data.rotateString=`rotate(${data.rotate}deg)`
let i = data.currentIndex
i+=num
i = i<0?data.images.length-1:i
i = i==data.images.length?0:i
data.currentIndex = i
}
}
return {
...toRefs(data),
...methods
}
}
})
</script>
<style>
.img-preview-tools-box {
position: fixed;
z-index: 999999;
bottom: 100px;
}
.img-preview-tools-box .img-preview-tools {
background: rgba(0, 0, 0, 0.5);
border-radius: 48px;
padding: 10px 20px;
display: inline-block;
}
</style>
src/components/hotel/list/ListTable.vue
View file @ 85ce9ab0
......@@ -25,8 +25,10 @@
<q-td style="width:200px;" class="cursor-pointer ListTable-title" @click="showHotelDetailHandler(props.row.HotelId)">
<div class="ellipsis-3-lines" style="padding: 7px 16px;width: 200px;white-space: break-spaces;">
{{ props.row.HotelName }}
<!-- <q-tooltip style="padding:none;">
<hotel-card class="ListTable-show"></hotel-card>
</q-tooltip> -->
</div>
<!-- <hotelCard class="ListTable-show" v-if="props.rowIndex==0"></hotelCard> -->
</q-td>
<q-td>
<div class="td-item">{{ $t('hotel.table.price') }}</div>
......@@ -74,8 +76,25 @@
card-class="no-shadow bg-primary text-white"
:pagination="pages"
:loading="loading"
@row-click="viewHotelPriceListHandler"
>
<template v-slot:item="props">
<div @click="viewHotelPriceListHandler(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 style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('hotel.col.first')}}</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('hotel.col.three')}}</div>
<div style="font-size: 13px;">{{props.row.TotalInventory}}</div>
</div>
<div>
<div style="opacity: 0.54;font-weight: 500;font-size: 12px;margin-bottom: 4px;">{{$t('hotel.col.four')}}</div>
<div class="">
<span>¥{{props.row.LowerPrice.toFixed(2)}}円 {{$t('hotel.col.low')}}</span>
</div>
</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>
......@@ -229,7 +248,7 @@ export default defineComponent({
})
return lower
},
viewHotelPriceListHandler(e:any,row:any,index:number){
viewHotelPriceListHandler(row:any){
data.queryHotelObj = row
data.showPriceList = true
},
......
src/components/hotel/list/hotelDetails.vue
View file @ 85ce9ab0
<template>
<q-card class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px; width: 70%; height: 80vh">
<div class="row justify-between q-px-lg">
<div class="row items-center">
<div class="text-weight-bold fz20">{{h.Name}}</div>
<div class="q-ml-md">
<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="mobile-only row items-center">
<div class="text-weight-bold fz20 ellipsis" style="width:280px">{{h.Name}}{{h.Name}}{{h.Name}}</div>
<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">{{h.Name}}</div>
<div class="{'q-ml-md':$q.platform.is.desktop}">
<q-rating
v-model="h.Star"
size="2em"
size="1.5em"
color="orange"
:max="h.Star"
readonly
/>
</div>
</div>
<q-icon class="text-grey-13 cursor-pointer" name="close" size="md" v-close-popup></q-icon>
<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="q-py-md text-blue">
......@@ -24,35 +27,41 @@
</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">{{h.Address}}</span>
<span class="col fz14 text-weight-bold text-blick">{{h.Address}}</span>
</div>
<div class="q-pt-sm row">
<div class="q-pt-sm " :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<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">{{h.Tel}}</span>
</div>
<div class="q-mr-lg">
<div :class="{'q-mr-lg':$q.platform.is.desktop,'q-mt-sm':$q.platform.is.mobile}">
<span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.chuanzhen') }}:</span>
<span class="fz14 text-weight-bold text-blue q-ml-sm">{{h.Fax==''?$t('noneFax'):h.Fax}}</span>
</div>
<div class="q-ml-lg">
<div :class="{'q-mr-lg':$q.platform.is.desktop,'q-mt-sm':$q.platform.is.mobile}">
<span class="fz14 text-weight-bold text-blick">{{ $t('hotel.details.guanwang') }}:</span>
<a class="fz14 text-weight-bold text-blue q-ml-sm" :href="h.URL" target="_blank">{{h.URL}}</a>
</div>
</div>
<div class="q-py-lg row nowrap col" >
<div class="col-6 row col rounded-borders" style="overflow:hidden" v-if="h.List">
<div class="q-py-lg nowrap 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;">{{h.ChainBrand}}</div>
</div>
</div>
<div class="col-7" :class="{'col-7':h.List.length>=3,'col-6':h.List.length==2,'col-12':h.List.length==1}">
<q-img :src="`http://imgfile.oytour.com${h.List[0].Path}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
<q-img @click="showImageHandler(`http://imgfile.oytour.com${h.List[0].Path}`)" :src="`http://imgfile.oytour.com${h.List[0].Path}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
</div>
<div class="col q-pl-sm" v-if="h.List.length>1">
<div :style="{'height':h.List.length>2?'50%':'100%'}">
<q-img :src="`http://imgfile.oytour.com${h.List[1].Path}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
<q-img @click="showImageHandler(`http://imgfile.oytour.com${h.List[1].Path}`)" :src="`http://imgfile.oytour.com${h.List[1].Path}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
</div>
<div class="row items-end q-pt-sm" style="height: 50%" v-if="h.List.length>2">
<q-img :src="`http://imgfile.oytour.com${h.List[2].Path}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
<q-img @click="showImageHandler(`http://imgfile.oytour.com${h.List[2].Path}`)" :src="`http://imgfile.oytour.com${h.List[2].Path}`" 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">
<span class="fz20 text-weight-bold">+</span>
<span class="text-h5 text-weight-bold">{{(h.List.length-3)}}</span>
......@@ -61,63 +70,74 @@
</div>
</div>
</div>
<div class="col q-ml-sm rounded-borders" style="overflow: hidden" id="baiduMap"></div>
<div class=" rounded-borders" :class="{'q-ml-sm col-6':$q.platform.is.desktop,'q-mt-sm height-320':$q.platform.is.mobile}" style="overflow: hidden" id="baiduMap"></div>
</div>
<div class="bg-light-blue-1 q-pa-md fz14 rounded-borders">
<div class="text-weight-bold">{{ $t('hotel.details.xiangqing') }}</div>
<div class="text-grey-8 q-mt-sm">{{h.Descriptions}}</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div :class="{'q-px-lg':$q.platform.is.desktop}">
<div class="q-mt-lg row ">
<div class="col-3 f12 text-grey-500">{{ $t('hd.item.a') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ moneyFormat(h.InTangTax) }}</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div :class="{'q-px-lg':$q.platform.is.desktop}">
<div class="q-mt-lg row ">
<div class="col-3 f12 text-grey-500">{{ $t('hd.item.b') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ moneyFormat(h.CityTax) }}</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div :class="{'q-px-lg':$q.platform.is.desktop}">
<div class="q-mt-lg row ">
<div class="col-3 f12 text-grey-500">{{ $t('hd.item.c') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ $t('1603 0275') }}</div>
<div class="col text-subtitle2 text-weight-bolder">
{{ h.IsHavearking==0?$t('none'):$t('have') }}
<span class="q-ml-md hotel-info-item" v-if="h.IsHavearking==1">{{h.ParkFee==0?$t('free'):moneyFormat(h.ParkFee)+$t('unit.jp')}}</span>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
</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('hd.item.d') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ $t('1603 0275') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ $t('before')+h.DieLine+$t('unit.day') }}</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div :class="{'q-px-lg':$q.platform.is.desktop}">
<div class="q-mt-lg row ">
<div class="col-3 f12 text-grey-500">{{ $t('hd.item.e') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ $t('1603 0275') }}</div>
<div class="col text-subtitle2 text-weight-bolder">
{{ !h.isDinner?$t('none'):$t('have') }}
<span v-if="h.isDinner" class="q-ml-md hotel-info-item" v-for="x in h.Dinners">{{x.Name}}</span>
</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div :class="{'q-px-lg':$q.platform.is.desktop}">
<div class="q-mt-lg row ">
<div class="col-3 f12 text-grey-500">{{ $t('hd.item.f') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ $t('1603 0275') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ h.HotelTypeInfo?.Name }}</div>
</div>
</div>
<div class="q-px-lg">
<div class="q-mt-lg row items-center">
<div :class="{'q-px-lg':$q.platform.is.desktop}">
<div class="q-mt-lg row ">
<div class="col-3 f12 text-grey-500">{{ $t('hd.item.g') }}</div>
<div class="col text-subtitle2 text-weight-bolder">{{ $t('1603 0275') }}</div>
<div class="col text-subtitle2 text-weight-bolder row items-center q-gutter-sm" v-if="h.CheckHotelService">
<span class="hotel-info-item" v-for="(x,i) in h.CheckHotelService">{{ x.Content }}</span>
</div>
</div>
</div>
<div class="q-mt-lg">
<div :class="{'q-px-lg':$q.platform.is.desktop,'q-mt-lg':$q.platform.is.mobile}">
<div class="bg-orange-1 q-pa-md rounded-borders fz14" style="border: 1px dashed orange">
<div class="text-weight-bold">{{ $t('hotel.details.wenxintishi') }}</div>
<div class="text-grey-700 q-mt-sm">上野康福酒店位於臺東區下谷，地理位置優越，此酒店是您出行東京的理想 出發點。 在這裏，住客們可輕松前往市區內各大旅遊、購物、餐飲地點 。上野康福酒店一直致力於為您提供一流的設施與尊貴的服務，確保您在入 住期間愉快、愜意。上野康福酒店是出行東京的優選住宿，為您提供一站式高品質服務。</div>
<div class="text-weight-bold">{{ $t('hd.item.h') }}</div>
<div class="text-grey-700 q-mt-sm">{{h.WarmTip}}</div>
</div>
</div>
</q-scroll-area>
</q-card>
<q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
<q-dialog class="no-padding" v-model="showImagePriview" persistent v-if="images && images.length>0">
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</template>
<script lang="ts">
......@@ -128,8 +148,11 @@ import useScrollModule from 'src/module/scrollbar/scrollModule'
import HotelService from 'src/api/hotel'
import message from 'src/utils/message'
import { ApiResult } from 'src/@types/enumHelper'
import { moneyFormat } from 'src/utils/tools'
import { getDinners, getHotelType, moneyFormat } from 'src/utils/tools'
import { DinnerType, HotelType } from 'src/@types'
import ImagePreview from 'src/components/common/ImagePreview.vue'
export default defineComponent({
components: { ImagePreview },
props: {
hotelId: {
type: Number,
......@@ -149,7 +172,12 @@ export default defineComponent({
scrollStyle: {} as any,
loading:true,
h:{} as any,
hotelId:props.hotelId
hotelId:props.hotelId,
dinners:getDinners(),
hotelTyps:getHotelType(),
images:[] as Array<string>,
currentImage: '',
showImagePriview:false
})
data.scrollStyle = useScrollModule().scrollStyle
......@@ -161,14 +189,28 @@ export default defineComponent({
b.centerAndZoom(new Bmap.Point(lng, lat), 15)
b.enableScrollWheelZoom(true)
b.addOverlay(new Bmap.Marker(new Bmap.Point(lng, lat)))
//var a = ["114.066392,22.748699", "114.07991,22.640074"]
},
initHotel(){
data.loading=true
console.log(data.hotelId,'in')
HotelService.GetHotelDetail(data.hotelId).then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.h = r.data.data
let temp = r.data.data
temp.isDinner = temp.UseDinnerType && temp.UseDinnerType!=''
if(temp.isDinner){
temp.Dinners=data.dinners.filter((x:DinnerType)=> {
return temp.UseDinnerType.split(',').indexOf(x.Id.toString())!=-1
})
}
temp.HotelTypeInfo = data.hotelTyps.find((x:HotelType)=> x.Id == temp.HotelType)
let tempService = JSON.parse(temp.FacilityServices)[0]??{}
temp.CheckHotelService = tempService.list.filter((x:any)=>tempService.checked.indexOf(x.ID)!=-1)
data.h = temp
//http://imgfile.oytour.com${h.List[2].Path}
data.h.List.forEach((x:any) => {
data.images.push(`http://imgfile.oytour.com${x.Path}`)
});
methods.initMap(data.h.Lng,data.h.Lat)
} else {
message.errorMsg(r.data.message)
......@@ -179,6 +221,10 @@ export default defineComponent({
data.loading = false
message.errorMsg(e.message)
})
},
showImageHandler(url:string){
data.currentImage=url
data.showImagePriview=true
}
}
......@@ -203,4 +249,13 @@ export default defineComponent({
white-space: nowrap;
text-overflow: ellipsis;
}
.hotel-info-item::before{
display: inline;
content: '·';
font-weight: bolder;
margin-right: 4px;
}
.height-320{
height: 250px;
}
</style>
src/i18n/zh-TW/index.ts
View file @ 85ce9ab0
......@@ -16,6 +16,21 @@ export default {
verified: '已認證',
noneFax:'無傳真信息',
noneNotify:'暫無通知消息',
none:'無',
have:'有',
free:'免費',
before:'提前',
dinner:{
a:'早餐',
b:'午餐',
c:'晚餐'
},
hotelType:{
a:'商務酒店',
b:'豪華酒店',
c:'溫泉酒店',
d:'海濱度假酒店',
},
personal:{
pageTitle: "個人檔案",
trading: '累積交易額',
......@@ -57,7 +72,8 @@ export default {
d:'預約截止天數',
e:'是否含餐',
f:'酒店類型',
g:'設施服務'
g:'設施服務',
h:'溫馨提醒'
}
},
dialog:{
......@@ -80,7 +96,8 @@ export default {
jp: "円",
jpc: "¥",
night: "晚",
jf:"間房"
jf:"間房",
day:'天'
},
expends:{
on:"展開",
......@@ -354,7 +371,7 @@ export default {
registlink: "申請註冊",
title: "登入",
subTitle: "歡迎您的到來，開啟急速採購",
account: "帳戶（EMail）",
account: "帳戶（EMail/統編）",
password: "密碼",
forgot: "忘記密碼？",
signin: "登入",
......
src/utils/tools.ts
View file @ 85ce9ab0
import { SitLang, StandardStatus, RoomType, OrderType } from './../@types/index';
import { SitLang, StandardStatus, RoomType, OrderType, DinnerType, HotelType } from './../@types/index';
import { i18n } from '../boot/i18n'
const {t} =i18n.global
/**
......@@ -183,6 +183,32 @@ export function getHotelOrderType(getNormal:boolean = false):Array<OrderType>{
return types
}
export function getDinners():DinnerType[]{
let dinners = [] as Array<DinnerType>
let dinStr = [t('dinner.a'),t('dinner.b'),t('dinner.c')]
dinStr.forEach((x:string,i:number)=>{
dinners.push({
Id:i+1,
Name:x
})
})
return dinners
}
export function getHotelType():HotelType[]{
let hotelTypes = [] as Array<HotelType>
let types=[t('hotelType.a'),t('hotelType.b'),t('hotelType.c'),t('hotelType.c')]
types.forEach((x:string,i:number)=>{
hotelTypes.push({
Id:i+1,
Name:x
})
})
return hotelTypes
}
export function getLangs() {
const zhTw:SitLang={
langLocale:"zhTW",
......
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