Skip to content

B
bigwood
Commit 446a3afd authored by 罗超's avatar 罗超
Browse files
Options

新增票券

parent 96bc7069
Hide whitespace changes
Inline Side-by-side
Showing with 1597 additions and 21 deletions
quasar.conf.js
View file @ 446a3afd
......@@ -64,7 +64,7 @@ module.exports = configure(function (ctx) {
publicPath: ctx.dev ? '/' : './',
env: ctx.dev
? {
BASE_APP_API: 'https://reborn.oytour.com/api/common/post',//http://192.168.10.11:8083/api/common/post
BASE_APP_API: 'http://192.168.10.11:8083/api/common/post',
JAVA_URL_API: 'http://efficient.oytour.com',
VERSION:require('./package.json').version,
......
src/@types/index.ts
View file @ 446a3afd
......@@ -228,3 +228,8 @@ export type HotelType = {
Id:number,
Name:string
}
export type SendType = {
Id:number,
Name:string,
Color:string
}
src/components/common/ImagePreview.vue
View file @ 446a3afd
<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" />
<q-img width="100%" height="100%" :src="images[currentIndex]" :img-style="{'transform':scaleString+' '+rotateString}" spinner-color="primary" spinner-size="30px" fit="none" />
<!-- <img :src="images[currentIndex]" class="drop-target" :style="{'transform':scaleString+' '+rotateString}"/> -->
</div>
<div class="img-preview-tools-box" style="box-shadow: none !important">
......
src/components/scattered/list/ListTable.vue
View file @ 446a3afd
......@@ -139,7 +139,8 @@ export default defineComponent({
const $router = useRouter()
watch(search, (n, o) => {
if (data.loading) return
search.displayFrom = 1
console.log('search change')
data.pages.displayFrom = 1
methods.initHotels()
})
......@@ -169,7 +170,7 @@ export default defineComponent({
mobileCols:[
{name:'hotelName',label:t('hotel.col.first'),field:(row:any)=>row.hotelName},
{name:'TotalInventory',label:t('hotel.col.three'),field:(row:any)=>row.TotalInventory},
{name:'LowerPrice',label:t('hotel.col.four'),field:(row:any)=>`¥${row.LowerPrice.toFixed(2)}${$t('unit.jp')} ${t('hotel.col.low')}`}
{name:'LowerPrice',label:t('hotel.col.four'),field:(row:any)=>`¥${row.LowerPrice.toFixed(2)}${t('unit.jp')} {t('hotel.col.low')}`}
],
showPriceList:false,
queryHotelObj:{},
......@@ -177,7 +178,7 @@ export default defineComponent({
orderSubmitItemObj:{} as any,
showOrderPreview: false,
showHotelDetailId: 0,
})
data.themeList = useHotel.getHotelTheme()
data.pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY)
......@@ -187,7 +188,7 @@ export default defineComponent({
initHotels() {
data.loading = true
data.hotels = []
let dataList = [];
let dataList = [] as any[];
data.travelLngLat = [];
let param = Object.assign(data.pages, search)
HotelService.GetJAPANHotelList(param)
......@@ -224,11 +225,11 @@ export default defineComponent({
})
//按价格升序
if(data.pages.sort==2){
data.hotels.sort(methods.getSortFun('asc', 'lowrateBySetCurrency'));
data.hotels.sort(methods.getSortFun('asc', 'lowrateBySetCurrency'));
}
//按照星级降序
if(data.pages.sort==1){
data.hotels.sort(methods.getSortFun('desc', 'reviewRating'));
data.hotels.sort(methods.getSortFun('desc', 'reviewRating'));
}
let jalanTotalCount = 0
if (r.data.data.parmResult && r.data.data.parmResult.numberOfResultMatched) {
......@@ -240,7 +241,7 @@ export default defineComponent({
ourHotelTotalCount = ourHotelList[0].totalHotelCount;
}
let totalCount = Number(jalanTotalCount) + Number(ourHotelTotalCount);
data.pageCount = r.data.data.parmResult.numberOfResultMatched
data.pageCount = Math.ceil(parseFloat(r.data.data.parmResult.numberOfResultMatched)/data.pages.numberOfResults)
data.groupBookingFlg = r.data.data.parmResult.groupBookingFlg;
data.JapanIncrease = r.data.data.parmResult.JapanIncrease;
data.loading = false
......@@ -261,6 +262,7 @@ export default defineComponent({
},
changePageHandler(n: any) {
data.pages.displayFrom = n
console.log(n)
methods.initHotels()
},
showHotelDetailHandler(hotelId:number){
......
src/components/ticket/TicketCard.vue 0 → 100644
View file @ 446a3afd
<template>
<q-card class="bg-white q-py-lg column" style="max-width: 1366px; min-width: 375px; width: 70%; height: 80vh">
<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="bg-info text-grey-100 rounded-borders q-mr-sm q-px-md">{{ $t('v102.ticket.jing') }}</div>
<div class="text-weight-bold fz20 ellipsis" style="width: 280px">飞弹日枝山王神社</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">
<span class="inline-block">飞弹日枝山王神社
<q-badge color="info" :label="$t('v102.ticket.jing')" />
</span>
</div>
<div :class="{'q-ml-md':$q.platform.is.desktop}">
<!-- <q-rating v-model="h.Star" size="1.5em" color="orange" :max="h.Star" readonly /> -->
</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="row nowrap">
<q-icon class="text-grey-13 q-mr-xs" name="place" size="xs"></q-icon>
<span class="col fz14 text-weight-bold text-blick">〒930-0064 富山県富山市山王町4-12</span>
</div>
<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">FAX：076-421-6488</span>
</div>
<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">FAX：076-421-6488</span>
</div>
<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="https://www.hie.jp/" target="_blank">https://www.hie.jp/</a>
</div>
</div>
<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="t.List">
<div 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">40分鐘</div>
</div>
</div>
<div class="col-7" :class="{ 'col-7': t.List.length >= 3, 'col-6': t.List.length == 2, 'col-12': t.List.length == 1 }">
<q-img @click="showImageHandler(`${t.List[0].Path}`)" :src="`${t.List[0].Path}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover" />
</div>
<div class="col q-pl-sm" v-if="t.List.length > 1">
<div :style="{ height: t.List.length > 2 ? '50%' : '100%' }">
<q-img @click="showImageHandler(`${t.List[1].Path}`)" :src="`${t.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="t.List.length > 2">
<q-img @click="showImageHandler(`${t.List[2].Path}`)" :src="`${t.List[2].Path}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
<div class="absolute-full text-subtitle2 flex flex-center" v-if="t.List.length > 3">
<span class="fz20 text-weight-bold">+</span>
<span class="text-h5 text-weight-bold">{{ t.List.length - 3 }}</span>
</div>
</q-img>
</div>
</div>
</div>
<div class="rounded-borders" :class="{ 'q-ml-sm col': $q.platform.is.desktop, 'q-mt-sm height-320': $q.platform.is.mobile }" style="overflow: hidden" id="baiduTicketMap">
<GoogleMap api-key="AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg" style="width: 100%; height: 100%" :center="center" :zoom="15" v-if="center">
<Marker :options="{ position: center }" />
</GoogleMap>
</div>
</div>
<div class="bg-light-blue-1 q-pa-md fz14 rounded-borders">
<div class="text-weight-bold">{{ $t('v102.ticket.detail') }}</div>
<div class="text-grey-8 q-mt-sm">山王祭与深川祭、神田祭并称东京三大传统祭祀庆典活动，于每年6月15日在这个神社举行，因为这里被称为“皇城之镇”（守护皇居的神社）。据说这里也是祈求婚姻美满的的神社，常有传统的神前结婚仪式在此举行。这里也有大量的鸟居，与京都的伏见稻荷大社相似，这一点足以让这里成为倍受游客欢迎的拍照留念之地。</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('v102.ticket.d1') }}</div>
<div class="col text-subtitle2 text-weight-bolder">07:00-15:30,15:30停止入场</div>
</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('v102.ticket.d2') }}</div>
<div class="col text-subtitle2 text-weight-bolder">
<q-badge outline color="positive" label="历史建筑" class="q-mr-md" />
<q-badge outline color="positive" label="人文景观" />
</div>
</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('v102.ticket.d3') }}</div>
<div class="col text-subtitle2 text-weight-bolder">07:00-15:30,15:30停止入场</div>
</div>
</div>
<div class="q-mt-lg">
<div class="bg-orange-1 q-pa-md rounded-borders fz14" style="border: 1px dashed orange">
<div class="text-weight-bold">{{ $t('v102.ticket.d4') }}</div>
<div class="text-grey-700 q-mt-sm">
1.所有游客均需申领使用“四川天府健康通”及通信大数据行程卡，绿码才能订票，红码、黄码游客不予订票，禁止进入景区；
2.景区针对行程卡带*的游客暂缓接待。
3.游客中有来自中高风险地游客，按照疫情防控要求暂不接待，无法订票；
4.所有外省来的游客必须要提供48小时内的核酸报告(按照进入景区的时间计算)，方能进入景区；
5.对14天内有中高风险地区旅居史的游客,暂缓接待；
6、接防疫办通知，四川省宜宾游客必须提供48小时核酸检测报告，宜宾市珙县人员暂缓接待；
7.其余规则严格按景区所在地政府新冠疫情防控相关规定和要求执行。特殊时期，疫情防控政策将根据全国疫情形势变化进行动态管理，给各位游客朋友带来的不便，敬请谅解；
8.疫情防控人人有责。请各旅行社及广大游客须主动配合各级疫情应急指挥部从严落实各项防控措施。对故意隐瞒情况的将依法追究责任；</div>
</div>
</div>
<div class="q-mt-lg">
<div class="bg-orange-1 q-pa-md rounded-borders fz14" style="border: 1px dashed orange">
<div class="text-weight-bold">{{ $t('v102.ticket.d5') }}</div>
<div class="text-grey-700 q-mt-sm">景区营业时间：7:00-15:30
可提前 7天 网上预订， 亦可于当日15:30 前预订景区门票。
(景区严禁携带宠物 景区单日 游客限量18000/日）
1、本景区限网上及手机客户端预订，不接受电话预订，且实行实名制预定，所有游客订票须录入身份证信息方可预定。
2、每个身份证，每日限购一张门票。每个用户每单限购八张门票，超过八张须分别下单。
3、儿童免票也需购票，方可入园。儿童免票对象（实行门票免票优惠的范围和群体）：6周岁（含6周岁）以下的儿童享受门票和观光车票全免。
4、优惠对象：在校学生（全日制教育含本科以下）、青少年（7周岁-18周岁）、省级宗教部门颁发证书的宗教界人士、60周岁-64周岁老年人（国家法定节假日）。
5、免票对象：对符合政策条件的现役军人、伤残军人、在职、退休、残疾消防员人员和消防救援院校学员、残疾人、离休干部、抗美援朝军人、6周岁（含6周岁）以下儿童、65周岁以上老年人（自2018年10月1日起执行）、60周岁以上老年人（非国家法定节假日）（自2018年10月1日起执行）。
联票预订规则：
①、景区联票限连续三天进入同一景区游览的游客预订；
②、联票分次预订分次使用，即在使用一次入园联票进入景区后，再预订二次入园联票；使用二次入园联票进入景区后，再预订三次入园联票。
③、景区接待量到达单日限量时，联票停止预订。
④、其余预订规则按照预订须知执行，退改签、取票规则按照退订须知、取票须知执行。
以上信息仅供参考，具体信息请以景区当天披露为准。</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">
import { DirtionmaryHelper } from "src/config/dictionary";
import useScrollModule from "src/module/scrollbar/scrollModule";
import { defineComponent, nextTick, reactive, toRefs, watch } from "vue";
import { GoogleMap, Marker } from 'vue3-google-map'
import ImagePreview from "../common/ImagePreview.vue";
export default defineComponent({
props:["ticket"],
components:{GoogleMap,ImagePreview},
setup(props) {
watch(
() => props.ticket,
(n, o) => {
data.t = n
}
)
const data = reactive({
t:{} as any,
scrollStyle: {} as any,
loading:false,
currentImage:'',
showImagePriview:false,
center:{} as any,
images:['http://imgfile.oytour.com/Upload/DMC/20200313032017962.jpg']
})
data.scrollStyle = useScrollModule().scrollStyle
data.t={
List:[{Path:'http://imgfile.oytour.com/Upload/DMC/20200313032017962.jpg'}]
}
const methods = {
showImageHandler(url: string) {
data.currentImage = url
data.showImagePriview = true
},
initMap(lat: any, lng: any) {
let country=localStorage.getItem(DirtionmaryHelper.USER_IN_COUNTRY) ?? 'GW'
if(country!='CN'){
data.center = { lat: parseFloat(lng), lng: parseFloat(lat) }
}else{
let Bmap = window.BMapGL
var b = new Bmap.Map('baiduTicketMap')
b.centerAndZoom(new Bmap.Point(lat, lng), 15)
b.enableScrollWheelZoom(true)
b.addOverlay(new Bmap.Marker(new Bmap.Point(lat, lng)))
}
},
}
nextTick(()=>{
methods.initMap('137.2133824', '36.6867861')
})
return {
...toRefs(data),
...methods
}
}
})
</script>
<style>
</style>
src/components/ticket/list/ListHeader.vue 0 → 100644
View file @ 446a3afd
<template>
<div class="rounded-borders bg-white row items-center q-pa-md">
<n-cascader v-if="$q.platform.is.desktop" class="col-2 no-border" @update:value="changearea" v-model:value="cascader.addressValue" size="large" :placeholder="$t('hotel.area')" clearable check-strategy="all" :options="provinces" value-field="ID" label-field="Name" remote :on-load="loadChilds" cascade />
<q-input v-model="searchClone.TicketName" standout :class="{'q-ml-lg':$q.platform.is.desktop,'col':$q.platform.is.mobile}" style="min-width:190px;" dense :label="$t('v102.ticket.name')" />
<div class="col" v-if="$q.platform.is.desktop"></div>
<q-btn v-if="searchClone.ViewType==1" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat :icon="$q.platform.is.desktop?'view_list':'view_stream'" class="bg-grey-3 hover q-mr-md" color="dark" @click="changeViewHandler(2)">
<q-tooltip class="bg-dark">{{ $t('v102.ticket.toggleListType1') }}</q-tooltip>
</q-btn>
<q-btn v-if="searchClone.ViewType==2" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" flat icon="grid_view" class="bg-grey-3 hover q-mr-md" color="dark" @click="changeViewHandler(1)">
<q-tooltip class="bg-dark">{{ $t('v102.ticket.toggleListType2') }}</q-tooltip>
</q-btn>
<q-btn color="primary" :round="$q.platform.is.mobile" :dense="$q.platform.is.mobile" :icon="$q.platform.is.mobile?'search':''" unelevated :label="$q.platform.is.mobile?'':$t('query')" @click="setSearchHandler"/>
<!-- view_list grid_view -->
</div>
</template>
<script lang="ts">
import { inject, reactive, toRefs } from 'vue'
import { DirtionmaryHelper } from 'src/config/dictionary'
import HotelService from 'src/api/hotel'
import { CascaderOption, NCascader } from 'naive-ui'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
export default {
components: { NCascader },
setup(props) {
const data = reactive({
addressParams: {
Id: '651'
},
provinces: [],
cascader: {
addressValue: null
} as any,
searchClone:{} as any
})
const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
data.searchClone = JSON.parse(JSON.stringify(search.msg))
const methods = {
initAddress() {
HotelService.GetDestination(data.addressParams)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
r.data.data.forEach((x: any) => {
x.isLeaf = false
x.depth = 1
})
data.provinces = r.data.data
} else {
message.errorMsg(r.data.message)
}
})
.catch(e => {
message.errorMsg(e.message)
})
},
loadChilds(option: CascaderOption) {
return new Promise<void>(resolve => {
HotelService.GetDestination({ Id: option.ID })
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
r.data.data.forEach((x: any) => {
x.isLeaf = true
x.depth = 2
})
option.children = r.data.data
resolve()
} else {
message.errorMsg(r.data.message)
resolve()
}
})
.catch(e => {
message.errorMsg(e.message)
resolve()
})
})
},
changearea(e: number, option: any, pathValues: Array<any>) {
data.searchClone.Province = 0
data.searchClone.City = 0
if (pathValues) {
if (pathValues.length > 0) {
data.searchClone.Province = pathValues[0].ID
}
if (pathValues.length > 1) {
data.searchClone.City = pathValues[1].ID
}
}
},
setSearchHandler(){
search.msg = JSON.parse(JSON.stringify(data.searchClone))
},
changeViewHandler(t:number){
data.searchClone.ViewType=t
methods.setSearchHandler()
}
}
methods.initAddress()
return {
...toRefs(data),
...methods
}
}
}
</script>
<style></style>
src/components/ticket/list/ListTable.vue 0 → 100644
View file @ 446a3afd
<template>
<div v-if="search.msg.ViewType == 1 || $q.platform.is.mobile" class="q-pt-lg row" :class="{ 'q-col-gutter-sm': $q.platform.is.mobile, 'q-col-gutter-lg': $q.platform.is.desktop }">
<q-card v-for="x in tickets" :class="{ 'col-4': $q.screen.lt.lg && $q.platform.is.desktop, 'col-3': $q.screen.gt.md && $q.platform.is.desktop, 'col-6': $q.platform.is.mobile && search.msg.ViewType == 1, 'col-12 q-mb-sm': $q.platform.is.mobile && search.msg.ViewType == 2 }" class="transparent" flat>
<img src="https://cdn.quasar.dev/img/mountains.jpg" />
<q-card-section class="bg-white">
<div class="text-subtitle1 text-weight-bolder ellipsis-2-lines cursor-pointer" :class="{ 'text-subtitle2': $q.platform.is.mobile }" @click="showCardHandler">四川阿壩州四姑娘山雙橋溝</div>
<div class="f12 text-grey-700 ellipsis">中國 四川省阿坝藏族羌族自治州 小金縣 四姑娘山風景區</div>
<div class="q-mt-lg row items-center">
<div class="text-grey-900 col" :class="{ f12: $q.platform.is.mobile, 'text-subtitle2 text-weight-bold': $q.platform.is.desktop }">
{{ $t('v102.ticket.showtt.t1') }}
<span class="text-weight-bolder">3</span>
{{ $t('v102.ticket.showtt.t2') }}
</div>
<q-btn color="primary" icon="local_grocery_store" unelevated dense size="sm" :label="$q.platform.is.desktop || search.msg.ViewType == 2 ? $t('v102.ticket.buy') : $t('v102.ticket.shortBuy')" @click="toPreviewOrderHandler(1003)"/>
</div>
</q-card-section>
</q-card>
</div>
<div v-if="search.msg.ViewType == 2 && $q.platform.is.desktop" class="q-pt-lg">
<q-card v-for="i in tickets" flat class="full-width q-pa-sm row q-mb-md">
<div>
<q-img src="http://imgfile.oytour.com/Upload/DMC/20200313032017962.jpg" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="130px" fit="cover" class="rounded-borders" />
</div>
<div class="q-ml-md col">
<div class="text-subtitle1 text-weight-bolder cursor-pointer" @click="showCardHandler">飞弹日枝山王神社</div>
<div class="f14 text-grey-600">
{{ $t('v102.ticket.addr') }}：
<span>〒930-0064 富山県富山市山王町4-12</span>
<q-btn color="primary" icon="map" :label="$t('v102.ticket.map')" size="sm" dense flat class="q-ml-md" />
</div>
<div>
<q-badge outline color="positive" label="历史建筑" class="q-mr-md" />
<q-badge outline color="positive" label="人文景观" />
</div>
</div>
<div>
<div class="text-h6 din text-negative">
<span>900.00</span>
<span class="f12 text-grey-600 q-ml-sm">{{$t('unit.jp')}}{{ $t('hotel.col.low') }}</span>
</div>
<div class="text-right">
<q-btn color="primary" icon="shopping_cart" :label="$t('v102.ticket.buy')" dense outline size="sm" @click="toPreviewOrderHandler(1003)"/>
</div>
</div>
</q-card>
</div>
<div class="bg-white q-my-md q-pa-sm rounded-borders">
<q-pagination class="full-width justify-end" v-model="pages.PageIndex" color="primary" :max="pages.PageCount" :input="true" @update:model-value="changePageHandler" />
</div>
<q-dialog v-model="showDetails">
<ticket-card></ticket-card>
</q-dialog>
</template>
<script lang="ts">
import { useQuasar } from 'quasar'
import { DirtionmaryHelper } from 'src/config/dictionary'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
import TicketCard from '../TicketCard.vue'
export default defineComponent({
components: { TicketCard },
setup(props) {
const $q = useQuasar()
const $router = useRouter()
const data = reactive({
loading: false,
pages: {
PageIndex: 1,
PageSize: 10,
PageCount: 30
},
tickets: [] as any[],
showDetails: false
})
if ($q.platform.is.desktop) {
if ($q.screen.gt.md) {
data.pages.PageSize = 12
} else {
data.pages.PageSize = 9
}
} else {
data.pages.PageSize = 10
}
const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
watch(search, (n, o) => {
if (data.loading) return
console.log('search change')
data.pages.PageIndex = 1
methods.getTickets()
})
const methods = {
getTickets() {
data.tickets = []
for (let i = 0; i < data.pages.PageSize; i++) {
data.tickets.push({})
}
},
toPreviewOrderHandler(id:number){
$router.push({ path:`/ticket/preview/${id}`})
},
changePageHandler(n: number) {
data.pages.PageIndex = n
methods.getTickets()
},
showCardHandler(){
data.showDetails=true
}
}
methods.getTickets()
return {
...toRefs(data),
...methods,
search
}
}
})
</script>
<style></style>
src/components/ticket/order/ModifyOrderAddress.vue 0 → 100644
View file @ 446a3afd
<template>
<q-card class="bg-white q-pa-md" style="max-width: 500px; min-width: 375px; ">
<div class="text-h6 q-mb-lg">
{{ $t('v102.to.m.t') }}
</div>
<div class="row items-center">
<span class="f12 text-grey-900 text-subtitle2 text-weight-bold" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile }">{{ $t('v102.ticket.gi') }}：</span>
<span class="col f12">
<q-radio v-model="m.OrderType" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="0" :label="$t('v102.ticket.zq')" />
<q-radio v-model="m.OrderType" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" :val="1" :label="$t('v102.ticket.yj')" />
</span>
</div>
<div v-if="m.OrderType == 0" class="bg-light-blue-1 q-pa-md fz14 rounded-borders q-mt-md">
<div class="text-weight-bold">{{ $t('v102.ticket.zqs') }}</div>
<div class="text-grey-900 q-mt-sm f12">{{ $t('v102.ticket.zqd') }}</div>
</div>
<div v-else>
<div class="q-mt-md">
<span class="f12 text-grey-900 text-subtitle2 text-weight-bold">{{ $t('v102.ticket.sj') }}</span>
</div>
<div class="row items-center q-mt-md text-grey-600 q-mb-md" v-if="$q.platform.is.desktop">
<div class="col q-mr-md">{{ $t('v102.ticket.sjc.c1') }}</div>
<div class="col q-mr-md">{{ $t('v102.ticket.sjc.c2') }}</div>
<!-- <div class="col-2 q-mr-md">{{ $t('v102.ticket.sjc.c3') }}</div> -->
<div class="col q-mr-md">{{ $t('v102.ticket.sjc.c4') }}</div>
<div class="col-4">{{ $t('v102.ticket.sjc.c5') }}</div>
</div>
<div style="border-top: 1px dashed #eee" :class="{ 'row items-center': $q.platform.is.desktop, column: $q.platform.is.mobile }">
<q-input dense standout v-model="m.ContactName" class="col q-mt-md" :class="{ 'q-mr-md': $q.platform.is.desktop }" :placeholder="$t('v102.ticket.sjcp.c1')" />
<q-input dense standout v-model="m.ContactEnName" class="col q-mt-md" :class="{ 'q-mr-md': $q.platform.is.desktop }" :placeholder="$t('v102.ticket.sjcp.c2')" />
<q-input dense standout v-model="m.ContactPhone" class="col q-mt-md" :class="{ 'q-mr-md': $q.platform.is.desktop }" :placeholder="$t('v102.ticket.sjcp.c4')" />
<q-input dense standout v-model="m.Address" class="col-4 q-mt-md" :placeholder="$t('v102.ticket.sjcp.c5')" />
</div>
</div>
<div class="q-mt-md">
<q-input v-model="m.Remark" standout autogrow :label="$t('v102.ticket.or')" />
</div>
<div class="q-mt-lg text-right">
<q-btn color="negative" class="q-px-lg" :label="$t('v102.to.m.c')" v-close-popup flat dense />
<q-btn color="primary" class="q-ml-md q-px-lg" :label="$t('v102.to.m.c')" v-close-popup unelevated dense />
</div>
</q-card>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, watch } from 'vue'
export default defineComponent({
props: ['order'],
setup(props) {
watch(
() => props.order,
(n, o) => {
data.m = JSON.parse(JSON.stringify(n))
}
)
const data = reactive({
m: {} as any
})
const methods = {}
data.m=JSON.parse(JSON.stringify(props.order))
return { ...toRefs(data), ...methods }
}
})
</script>
<style></style>
src/components/ticket/order/TicketOrderHeader.vue 0 → 100644
View file @ 446a3afd
<template>
<div class="rounded-borders bg-white row items-center q-pa-md">
<q-select v-if="$q.platform.is.desktop" class="q-mr-md" v-model="search.OrderStatus" @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.OrderNo" dense standout :label="$t('hotelorder.search.orderNum')" />
<q-field v-if="$q.platform.is.desktop" clearable v-model="dateRangeFormat" :label="$t('hotelorder.search.daterange')" standout class="col-2" style="min-width: 190px" 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="col"></div>
<q-btn 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-mt-md row">
<q-input v-model="search.OrderNo" dense standout :label="$t('hotelorder.search.orderNum')" class="mobile-only col q-mr-md" />
<q-input v-model="search.OrderId" dense standout :label="$t('hotelorder.search.orderId')" class="col" />
</div>
<div class="mobile-only q-mt-md">
<q-field clearable v-model="dateRangeFormat" :label="$t('hotelorder.search.daterange')" standout style="min-width: 190px" 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" @range-end="dateRangeHandler"></q-date>
</q-popup-proxy>
</q-field>
</div>
<div class="q-mt-md">
<q-input v-model="search.TicketName" dense standout :label="$t('v102.to.ticketName')" />
</div>
<q-select class="q-mt-md" v-model="search.OrderType" dense :options="orderTypes" emit-value option-label="TypeName" option-value="TypeId" map-options :label="$t('v102.to.qj')" standout />
<q-input v-model="search.ContactName" dense standout :label="$t('v102.to.qjc')" class="q-mt-md" v-if="search.OrderType == 1" />
<q-input v-model="search.ContactNumber" dense standout :label="$t('v102.to.qjp')" class="q-mt-md" v-if="search.OrderType == 1" />
</q-card>
</q-popup-proxy>
</q-btn>
<q-btn unelevated class="bg-blue-1 text-primary hover q-mr-md" :label="$t('hotelorder.recovery')" />
<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">
<q-tabs v-model="search.OrderStatus" class="text-cyan" dense>
<q-tab :name="x.StatusId" :label="x.StatusName" v-for="x in status" @click="setOrderStatus(x.StatusId)" />
</q-tabs>
</div>
</template>
<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { computed, defineComponent, inject, reactive, ref, toRefs } from 'vue'
import { OrderType, RoomType, StandardStatus } from '../../../@types'
import { getHotelOrderStatus, getHotelOrderType, getHotelRoomType, getTicketOrderType } from '../../../utils/tools'
import { date, useQuasar } from 'quasar'
import svgIcon from '../../global/svg-icon.vue'
export default defineComponent({
components: { svgIcon },
setup(props) {
const qDateProxy = ref(null) as any
const $q = useQuasar()
const data = reactive({
status: [] as Array<StandardStatus>,
cancelStatus: {} as StandardStatus | undefined,
dateRangeFormat: '',
dateRange: {} as any,
orderTypes: [] as Array<OrderType>,
canHide: false
})
const realSearch = inject(DirtionmaryHelper.TICKET_ORDER_SEARCH) as any
const search = reactive(JSON.parse(JSON.stringify(realSearch))) as any
const methods = {
initStatus() {
//通用的訂單類型
let allStatus = getHotelOrderStatus()
data.status = allStatus.filter((x: StandardStatus) => {
return x.StatusId != 3
})
data.cancelStatus = allStatus.find((x: StandardStatus) => {
return x.StatusId == 3
})
data.orderTypes = getTicketOrderType(true)
},
optionsFn(cd: any) {
return cd < date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
},
dateRangeHandler(e: any) {
search.StartTime = `${e.from.year}/${e.from.month}/${e.from.day}`
search.EndTime = `${e.to.year}/${e.to.month}/${e.to.day} `
data.dateRangeFormat = `${search.StartTime} - ${search.EndTime} `
if (qDateProxy.value) qDateProxy.value.hide()
},
setQueryHandler() {
realSearch.OrderId = search.OrderId
realSearch.RoomType = search.RoomType
realSearch.StartTime = search.StartTime
realSearch.EndTime = search.EndTime
realSearch.OrderStatus = search.OrderStatus
realSearch.OrderNo = search.OrderNo
realSearch.OrderType = search.OrderType
realSearch.TCNum = search.TCNum
realSearch.ContactName = search.ContactName
realSearch.ContactNumber = search.ContactNumber
console.log(realSearch)
},
setOrderStatus(statusId: number) {
realSearch.OrderStatus = statusId
}
}
const searchCnt = computed(() => {
let setCnt = 0
if ($q.platform.is.mobile) {
if (search.OrderStatus > 0) setCnt++
if (search.StartTime.length > 0) setCnt++
if (search.OrderNo > 0) setCnt++
}
if (search.OrderId.length > 0) setCnt++
if (search.RoomType > 0) setCnt++
if (search.OrderType > 0) setCnt++
if (search.OrderType == 1 && search.ContactName.length > 0) setCnt++
if (search.OrderType == 2 && search.ContactNumber.length > 0) setCnt++
return setCnt
})
methods.initStatus()
return {
...toRefs(data),
...methods,
search,
searchCnt
}
}
})
</script>
<style></style>
src/components/ticket/order/TicketOrderList.vue 0 → 100644
View file @ 446a3afd
<template>
<div>
<q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" flat v-for="x in orders">
<div class="row items-center desktop-only">
<div class="q-mr-md">
<q-btn :color="x.OrderType == 0 ? 'cyan' : 'negative'" unelevated disable size="sm" :label="`${x.OrderType == 0 ? $t('v102.ticket.zq') : $t('v102.ticket.yj')}`"></q-btn>
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
<div class="q-ml-md">
<q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId" @click="setCopyHandler(x)" />
<q-btn color="cyan" icon="check" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
</div>
<div class="col text-center f12 text-grey-6">
<span v-if="x.OrderType == 1">{{ $t('v102.ticket.sj') }}：{{ x.ContactName }}({{ x.ContactEnName }})/{{ x.ContactPhone }}</span>
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
<div class="q-ml-md f12" :class="[x.typeInfo.Color]">
<q-icon :name="x.typeInfo.Icon" />
<span class="q-ml-sm">{{ x.typeInfo.StatusName }}</span>
</div>
</div>
<div class="mobile-only">
<div class="row justify-between">
<div class="q-mr-md">
<q-btn :color="x.OrderType == 1 ? 'cyan' : 'negative'" unelevated disable size="sm" :label="`${x.OrderType == 1 ? $t('hotelorder.orderType.guest') : $t('hotelorder.orderType.tour')}`"></q-btn>
</div>
<div class="q-ml-md f12" :class="[x.typeInfo.Color]">
<q-icon :name="x.typeInfo.Icon" />
<span class="q-ml-sm">{{ x.typeInfo.StatusName }}</span>
</div>
</div>
<div class="bg-grey-2 rounded-borders q-pa-sm q-mt-md">
<div class="row items-center justify-between">
<div class="f12 text-grey-6">{{ $t('hotelorder.search.orderNum') }}：{{ x.OrderNo }}</div>
<div class="q-ml-md">
<q-btn color="dark" flat size="sm" :label="$t('hotelorder.copy')" v-if="copyId != x.OrderId" @click="setCopyHandler(x)" />
<q-btn color="cyan" outline size="sm" :label="$t('hotelorder.copyed')" v-else></q-btn>
</div>
</div>
<div class="f12 text-grey-6">
<span v-if="x.OrderType == 1">{{ $t('hotelorder.search.contactInfo') }}：{{ x.ContactName }}({{ x.ContactEnName }})/{{ x.ContactPhone }}</span>
</div>
<div class="f12 text-grey-6">{{ $t('hotelorder.createTime') }}：{{ x.CreateTime }}</div>
</div>
</div>
<div class="q-mt-md row">
<q-table separator="cell" :hide-bottom="!x.Remark" :pagination="{ rowsPerPage: 100 }" dense :rows="x.DetailList" bordered :columns="cols" class="sticky-rightrowspan-column-table light-border col no-shadow">
<template v-slot:body-cell-TicketInfo="props">
<q-td :props="props">
<div class="room-item f12 text-grey-6" v-for="x in props.row.TicketList">
<span class="q-mr-md"> {{ x.TypeName }}: {{ x.Num }} {{ $t('v102.ticket.unit') }} </span>
<span class="q-mr-md"> {{ $t('hotelorder.unitPrice') }}: {{ x.Price ?? 1 }} </span>
<span class="q-mr-md"> {{ $t('hotelorder.xj') }}: {{ x.Money ?? 1 }} </span>
</div>
</q-td>
</template>
<template v-slot:body-cell-TicketName="props">
<q-td :props="props">
<div class="max-hotelname ellipsis">{{ props.value }}</div>
<q-tooltip>{{ props.value }}</q-tooltip>
</q-td>
</template>
<template v-slot:bottom>
<div class="msl text-negative">{{ $t('v101.hotelRemark') }}：{{ x.Remark }}</div>
</template>
</q-table>
</div>
<div class="q-mt-md" v-if="x.OrderStatus != 3" :class="{ row: $q.platform.is.desktop, 'column reverse': $q.platform.is.mobile }">
<div class="pay row text-grey rounded-borders" :class="{ 'bg-grey-2 q-mt-md': $q.platform.is.mobile, col: $q.platform.is.desktop }">
<div class="bg-orange-1 col-12 rounded-borders q-pa-md">
<div v-if="x.OrderType == 1">
<div class="text-subtitle2 text-dark text-weight-bolder row items-center">
<span class="col">{{ $t('v102.ticket.sjc.c5') }}：</span>
<span class="f12" :class="[x.SendType.Color]">{{ x.SendType.Name }}</span>
</div>
<div class="f12 text-dark q-mt-sm">{{ x.Address }}</div>
</div>
<div v-else>
<div class="text-subtitle2 text-dark text-weight-bolder">{{ $t('v102.ticket.zqa') }}：</div>
<div class="f12 text-dark q-mt-sm">{{ x.ReviceAddress?x.ReviceAddress:$t('v102.ticket.nzqa') }}</div>
</div>
</div>
</div>
<div class="col desktop-only"></div>
<div class="rounded-borders bg-grey-2 q-pa-md" :class="{ 'q-mx-md': $q.platform.is.desktop, 'q-mt-md': $q.platform.is.mobile }">
<div class="row items-center justify-between q-mb-sm q-pb-sm" style="border-bottom: 1px dashed #ddd">
<div class="f12 text-grey">{{ $t('hotelorder.orderMoney') }}</div>
<div class="dark q-ml-xl">
<span class="f12">{{ $t('unit.jpc') }}</span>
<span class="din text-subtitle1">{{ moneyFormat(x.Money) }}</span>
<span class="f12">{{ $t('unit.jp') }}</span>
</div>
</div>
<div class="text-right">
<q-btn dense outline color="accent" size="sm" class="q-mt-sm" :label="$t('hotelorder.payinfo')" @click="ViewPayment"></q-btn>
</div>
</div>
<div class="rounded-borders q-pa-sm justify-between" :class="{ column: $q.platform.is.desktop, 'row items-center': $q.platform.is.mobile, 'bg-green-1': x.OrderStatus != 1, 'bg-grey-2': x.OrderStatus == 1 }">
<q-list dense v-if="x.OrderStatus == 1" :class="{ 'row items-center justify-between full-width': $q.platform.is.mobile }">
<q-item class="text-negative" clickable v-close-popup @click="cancelConfirmHandler(x.OrderId)">
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.cancel') }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="text-primary" clickable v-close-popup @click="modify(x)">
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.edit') }}</q-item-label>
</q-item-section>
</q-item>
<q-item class="text-positive" clickable v-close-popup>
<q-item-section>
<q-item-label>{{ $t('v101.Listofquotation.baojiadan') }}</q-item-label>
</q-item-section>
</q-item>
<!-- <q-item class="text-dark" clickable v-close-popup>
<q-item-section>
<q-item-label>{{ $t('hotelorder.opera.view') }}</q-item-label>
</q-item-section>
</q-item> -->
</q-list>
<div v-else>
<div class="f12 text-green-4">{{ $t('hotelorder.payed') }}</div>
<div class="text-subtitle1 din text-green-14">
{{ x.OrderIncome.toFixed(2) }}
<span class="text-green-4 f12">{{ $t('unit.jp') }}</span>
</div>
</div>
</div>
</div>
<div v-if="x.OrderStatus == 3">
<div class="q-mt-md q-pa-sm row items-center rounded-borders bg-orange-1" style="border-width: 0 5px; border-style: solid; border-color: #ffb74d">
<div class="text-subtitle2 text-weight-bolder text-grey-900">{{ $t('v101.cancelRemark') }}：</div>
<div class="f12 text-grey-600 q-ml-sm col">{{ x.CancelRemark ? x.CancelRemark : $t('v101.selfCancle') }}</div>
<div class="f12 text-grey-900">{{ x.CancelEmpName }} {{ x.CancelTime }}</div>
</div>
</div>
</q-card>
<q-card class="light-shadow q-pa-md bg-white rounded-borders q-mb-md" v-if="pages.pageCount > 0" flat>
<q-pagination class="full-width justify-end" v-model="pages.pageIndex" color="primary" :max="pages.pageCount" :input="true" @update:model-value="changePageHandler" />
</q-card>
<q-inner-loading :showing="loading" :label="$t('loading')" label-class="text-grey-6 f12" />
</div>
<div class="text-center q-mt-xl" v-if="(!orders || orders.length == 0) && !loading">
<svg-icon :size="50" color="nav" icon="General/Clipboard.svg"></svg-icon>
<div class="q-mt-md f12 text-grey-6">{{ $t('noneData') }}</div>
</div>
<q-dialog v-model="showBankAccount">
<q-card flat class="q-pa-md" style="background: #080655; width: 30vw; min-width: 375px">
<div class="row items-end">
<img src="../../../assets/images/green_pic.jpg" style="width: 100px" />
<div class="q-ml-md f12 text-grey-4 col text-right">水口支店　店番593</div>
</div>
<div class="q-mt-md">
<div class="f12 text-grey-1" style="opacity: 0.3">帳戶名：</div>
<div class="pf text-grey-4 text-weight-bolder text-subtitle1">株式会社ピースインターナショナル</div>
</div>
<div class="q-mt-md">
<div class="f12 text-grey-1" style="opacity: 0.3">口座番號：</div>
<div class="pf text-grey-4 text-weight-bolder text-subtitle1">
593-1070078
<span class="f12 text-grey-1 text-weight-400" style="opacity: 0.5">(レギュラー口座)</span>
</div>
</div>
<div class="q-mt-md">
<div class="f12 text-grey-1" style="opacity: 0.3">銀行住所</div>
<div class="pf text-grey-1 text-weight-bolder f12" style="opacity: 0.5">滋賀県甲賀市水口町本綾野5－21 （0748－65－1011）</div>
</div>
<div class="q-mt-md text-right">
<q-btn color="white" outline class="q-px-lg" style="opacity: 0.6" dense :label="$t('hotelorder.copy')" @click="setCopyHandler(null, '行名：京都銀行\n支店名：水口支店　店番593\n口座種別：レギュラー口座\n口座番号： 593-1070078\n账户名：株式会社ピースインターナショナル\n银行住所：滋賀県甲賀市水口町本綾野5－21\n银行邮变：〒528-0037\n電話番号：0748－65－1011\n')" />
</div>
</q-card>
</q-dialog>
<q-dialog v-model="showModify" persistent>
<modify-order-address :order="modifyOrder"></modify-order-address>
</q-dialog>
</template>
<script lang="ts">
import { DirtionmaryHelper } from '../../../config/dictionary'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import { ApiResult } from '../../../@types/enumHelper'
import message from '../../../utils/message'
import { SendType, StandardStatus } from '../../../@types'
import { useI18n } from 'vue-i18n'
import svgIcon from '../../global/svg-icon.vue'
import { copyToClipboard, useQuasar } from 'quasar'
import { getHotelOrderStatus, getSendType, moneyFormat } from '../../../utils/tools'
import ModifyOrderAddress from './ModifyOrderAddress.vue'
export default defineComponent({
components: { svgIcon, ModifyOrderAddress },
setup(props) {
const search = inject(DirtionmaryHelper.TICKET_ORDER_SEARCH) as any
const { t } = useI18n()
const $q = useQuasar()
watch(search, (n, o) => {
if (data.loading) return
data.loading = true
data.pages.pageIndex = 1
data.orders = []
methods.initOrders()
})
const data = reactive({
PaymentDialog: false,
orders: [] as Array<any>,
status: [] as Array<StandardStatus>,
sends: [] as Array<SendType>,
showBankAccount: false,
pages: {
pageIndex: 1,
pageSize: 10,
pageCount: 0
},
loading: false,
copyId: 0,
expendsOrderId: 0,
cols: [
{ name: 'Date', label: t('hotelorder.col.d'), field: (row: any) => row.Date, align: 'left' },
{ name: 'TicketName', label: t('hotelorder.col.hn'), field: (row: any) => row.TicketName, align: 'left' },
{ name: 'TicketInfo', label: t('hotelorder.col.r'), align: 'left' },
{ name: 'Money', label: t('hotelorder.col.m'), field: (row: any) => row.TicketMoney.toFixed(2), align: 'left' }
] as any[],
modifyOrder:{} as any,
showModify:false
})
const methods = {
ViewPayment() {
data.showBankAccount = true
},
initOrders() {
let param = Object.assign(data.pages, search)
//@TODO:
},
cancelConfirmHandler(orderId: number) {
$q.dialog({
title: t('dialog.titles.horder'),
message: t('dialog.contents.horder'),
cancel: true,
persistent: true
}).onOk(() => {
methods.cancelOrderHandler(orderId)
})
},
cancelOrderHandler(orderId: number) {
if (data.loading) return
data.loading = true
//@TODO:
},
setShowWarnHander(id: number) {
data.expendsOrderId = id == data.expendsOrderId ? 0 : id
},
changePageHandler(n: any) {
data.pages.pageIndex = n
methods.initOrders()
},
init() {
data.status = getHotelOrderStatus()
data.sends = getSendType()
methods.initOrders()
},
modify(order:any) {
data.modifyOrder=order
data.showModify =true
},
setCopyHandler(order: any, ctx?: string) {
if (ctx) {
data.copyId = -1
copyToClipboard(ctx)
} else {
data.copyId = order.OrderId
copyToClipboard(order.OrderNo)
}
setTimeout(() => {
data.copyId = 0
}, 2000)
}
}
methods.init()
data.orders.push(
{
OrderType: 0,
typeInfo: data.status[1],
OrderIncome: 0.0,
OrderNo: '20230106214591',
OrderId: 89123,
CreateTime: '2023/01/06 14:34:56',
DetailList: [
{
TicketName: '大阪環球影城',
TicketMoney: 4200.0,
Date: '2023/09/10',
TicketList: [
{
TypeName: '兒童票',
Num: 5,
Price: 400.0,
Money: 2000.0
},
{
TypeName: '成人票',
Num: 2,
Price: 800.0,
Money: 1600.0
},
{
TypeName: '學生票',
Num: 1,
Price: 600.0,
Money: 600.0
}
]
}
],
Remark: '迪士尼陆地乐园 客人姓名：Liu Chang+Hu Yuwei~~~~注意！！！ 人数：2大 日期：1月3号 价格：大人490元/张 共收980元，全款已收！',
Money:4200.0,
OrderStatus:1
},
{
OrderType: 1,
typeInfo: data.status[2],
OrderIncome: 0.0,
OrderNo: '2023010621459800',
OrderId: 891452,
ContactName: '罗超',
ContactEnName: 'LUOCHAO',
ContactPhone: '892788812',
Address: '318国道2913公桩左边的祝桑乡境内',
CreateTime: '2023/01/06 14:34:56',
DetailList: [
{
TicketName: '大阪環球影城',
TicketMoney: 4200.0,
Date: '2023/09/10',
TicketList: [
{
TypeName: '兒童票',
Num: 5,
Price: 400.0,
Money: 2000.0
},
{
TypeName: '成人票',
Num: 2,
Price: 800.0,
Money: 1600.0
},
{
TypeName: '學生票',
Num: 1,
Price: 600.0,
Money: 600.0
}
]
}
],
Remark: '迪士尼陆地乐园 客人姓名：Liu Chang+Hu Yuwei~~~~注意！！！ 人数：2大 日期：1月3号 价格：大人490元/张 共收980元，全款已收！',
Money:4200.0,
OrderStatus:2,
SendType: data.sends[0]
}
)
return {
...toRefs(data),
...methods,
moneyFormat
}
}
})
</script>
<style>
.light-border table,
.light-border table td,
.light-border .q-table__middle,
.light-border.borders,
.light-border table th {
border-color: #eee !important;
}
.light-border .room-item {
height: 28px;
line-height: 28px;
border-bottom: 1px solid #eee;
}
.light-border .room-item:last-child {
border-bottom: none;
}
.light-border .max-hotelname {
width: 140px;
height: 28px;
line-height: 28px;
}
.orderListDialog-title {
position: relative;
}
.orderListDialog-title span {
font-size: 20px;
}
.orderListDialog-close {
position: absolute;
right: 0;
top: -10px;
font-size: 26px;
}
.orderListDialog-bg {
background: #5098ff;
border-radius: 10px;
}
.orderListDialog-img {
background: url('../../../../assets/images/wallet.png') no-repeat right #5098ff;
background-size: 97px 100%;
}
</style>
src/config/dictionary.ts
View file @ 446a3afd
......@@ -35,6 +35,11 @@ class DirtionmaryHelper {
*/
static readonly HOTEL_ORDER_SEARCH = 'hotelordersearch'
/**
* 景點订单查询条件
*/
static readonly TICKET_ORDER_SEARCH = 'ticketordersearch'
/**
* 酒店購物車緩存
*/
......@@ -78,5 +83,10 @@ class DirtionmaryHelper {
* 用户是否在中国
*/
static readonly USER_IN_COUNTRY = 'userincountry'
/**
* 門票列表參數
*/
static readonly TICKET_QUERY_PARAM = "ticketlistquery"
}
export { userDictionmary,DirtionmaryHelper }
src/i18n/zh-TW/index.ts
View file @ 446a3afd
......@@ -179,7 +179,7 @@ export default {
orderId: '訂單流水號',
orderType: '訂單類型',
tcNum: '組團號',
contactInfo: '聯繫人信息',
contactInfo: '聯繫信息',
contactInfoHolder: '請輸入聯繫人/聯繫電話'
},
orderType: {
......@@ -782,7 +782,90 @@ export default {
quxiaodindan: '取消訂單'
}
}
},
//#endregion
//#region v1.0.2
v102:{
ticket:{
pageTitle:"票券檢索",
name:'請輸入票券名稱',
toggleListType1:"列表模式",
toggleListType2:"卡片模式",
showtt:{
t1:'共',
t2:'種票型'
},
buy:'立即订票',
shortBuy:'預訂',
addr:'地址',
map:'地圖',
jing:'景點',
detail:'景區詳情',
d1:'開放時間',
d2:'景區特色',
d3:'交通說明',
d4:'溫馨提醒',
d5:'預訂須知',
preview:{
pageTitle:'订单预览'
},
ordertip:'請在遊玩前一天的23:00前完成預訂',
pt:'遊玩日期',
tt:'選擇票型',
ti:'票券信息',
bc:'購買張數',
gi:'取票方式',
zq:'自行取票',
yj:'郵寄票券',
zqs:'自行取票說明',
zqd:'自行前往指定位置取票，當您完成付款後我們將通過郵件通知您取票的門票訊息',
sj:'收件人訊息',
unit:'張',
sex:{
man:'男',
women:'女'
},
sjc:{
c1:'中文姓名',
c2:'英文姓名',
c3:'性別',
c4:'聯絡電話',
c5:'收件地址'
},
sjcp:{
c1:'請輸入中文姓名',
c2:'請輸入英文姓名',
c4:'請輸入聯絡電話',
c5:'請輸入收件地址'
},
st:'結算帳單',
rtt:'退票限制',
rtc:'未消費隨時可退，多張票訂單不支持部分退款',
ms:'訂票明細',
nt:'沒有選擇票券',
ds:'訂單總額',
sb:'提交訂單',
or:'訂單備註',
zqa:'自取地址',
nzqa:'等待客服確認後，才能看到自取地址，我們將會第一時間通過郵件告知您'
},
to:{
pageTitle:'票券訂單列表',
ticketName:'票券名稱',
qj:'取券方式',
qjc:'取件人姓名(中/英)',
qjp:'取件人電話',
ps:{
p1:'等待配送',
p2:'已配送'
},
m:{
t:'修改取件方式',
c:'取消修改',
s:'保存修改'
}
}
},
//#endregion
}
src/pages/ticket/TicketList.vue 0 → 100644
View file @ 446a3afd
<template>
<div class="fix-height-subpage column no-wrap q-pa-md">
<list-header></list-header>
<list-table></list-table>
</div>
</template>
<script lang="ts">
import { inject, provide, reactive, toRefs, defineComponent } from 'vue';
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../config/dictionary';
import ListHeader from 'src/components/ticket/list/ListHeader.vue';
import ListTable from 'src/components/ticket/list/ListTable.vue';
export default defineComponent({
components: { ListHeader, ListTable },
setup(props) {
let { setTitle } = useMetaModule()
const { t } = useI18n()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
pageTitle.value = t('v102.ticket.pageTitle')
setTitle(pageTitle.value)
const data= reactive({
})
const search = reactive({
msg:{
StartDate: '',
Country: '651',
Province: 0,
City: 0,
TicketName:'',
ViewType:1
}
})
provide(DirtionmaryHelper.TICKET_QUERY_PARAM, search)
const menu=inject(DirtionmaryHelper.MENU_KEYS) as any
menu.value=8
const methods = {
}
return {
...toRefs(data),
...methods
}
}
})
</script>
<style>
</style>
src/pages/ticket/TicketOrder.vue 0 → 100644
View file @ 446a3afd
<template>
<div class="fix-height-subpage column no-wrap q-pa-md">
<ticket-order-header></ticket-order-header>
<ticket-order-list></ticket-order-list>
</div>
</template>
<script lang="ts">
import { defineComponent, inject, provide, reactive, toRefs, onMounted } from 'vue'
import { currentRouter } from 'src/router'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import TicketOrderHeader from 'src/components/ticket/order/TicketOrderHeader.vue'
import { DirtionmaryHelper } from 'src/config/dictionary'
import TicketOrderList from 'src/components/ticket/order/TicketOrderList.vue'
export default defineComponent({
components: {TicketOrderHeader, TicketOrderList},
setup(props) {
let { setTitle } = useMetaModule()
const { t } = useI18n()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
pageTitle.value = t('v102.to.pageTitle')
setTitle(pageTitle.value)
const search = reactive({
OrderId: '',
OrderNo: '',
OrderStatus: 0,
StartTime: '',
EndTime: '',
TicketName:'',
ContactName: '',
ContactNumber: ''
})
//search.OrderId = currentRouter.currentRoute.value.params.orderId
provide(DirtionmaryHelper.TICKET_ORDER_SEARCH, search)
const menu = inject(DirtionmaryHelper.MENU_KEYS) as any
menu.value = 9
const data = reactive({})
const methods = {}
onMounted(() => {})
return { ...toRefs(data), ...methods, search }
}
})
</script>
<style></style>
src/pages/ticket/TicketOrderPreview.vue 0 → 100644
View file @ 446a3afd
<template>
<div class="fix-height-subpage column no-wrap">
<div class="row q-pa-md" style="min-width: 375px; margin: 0 auto" :style="{ width: $q.screen.lt.xl ? '100%' : '1320px' }" :class="{'row':$q.screen.width>=1200 && $q.platform.is.desktop,'column':$q.screen.width<1200 || $q.platform.is.mobile}">
<div class="col">
<q-card class="q-pa-md" flat>
<div class="text-h6 q-mb-md">{{ $t('v102.ticket.ti') }}</div>
<div class="row q-pb-md q-mb-md" style="border-bottom: 1px solid #f1f1f1">
<div class="q-mr-md">
<q-img src="http://imgfile.oytour.com/Upload/DMC/20200313032017962.jpg" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="100px" fit="cover" class="rounded-borders" />
</div>
<div class="col">
<div class="text-subtitle1 text-weight-bolder cursor-pointer" @click="showCardHandler">飞弹日枝山王神社</div>
<div class="f14 text-grey-600">
{{ $t('v102.ticket.ordertip') }}
</div>
</div>
</div>
<div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div class="q-mt-lg" :class="{'column q-mb-md':($q.screen.width<1200 || $q.platform.is.mobile),'row items-center':!($q.screen.width<1200 || $q.platform.is.mobile)}">
<div class="f12 text-dark" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile,'q-mb-md':($q.screen.width<1200 || $q.platform.is.mobile) }">{{ $t('v102.ticket.pt') }}：</div>
<div class="text-subtitle2 text-weight-bolder">
<q-field standout :model-value="msg.StartTime" class="text-dark cursor-pointer">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">{{ msg.StartTime }}</div>
</template>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="msg.StartTime" :options="optionsFn" mask="YYYY/MM/DD"></q-date>
</q-popup-proxy>
</q-field>
</div>
</div>
</div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div :class="{'column':($q.screen.width<1200 || $q.platform.is.mobile),'row items-center':!($q.screen.width<1200 || $q.platform.is.mobile)}">
<div class="f12 text-dark" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile }">{{ $t('v102.ticket.tt') }}：</div>
<div class="row items-center col wrap q-mt-md">
<div class="q-pa-sm rounded-borders q-mr-md q-mb-md cursor-pointer row items-center" :class="{ 'bg-grey-2': !x.checked, 'bg-primary text-white': x.checked }" @click="changeTicketTypeHandler(x)" v-for="x in types">
<span style="border-right: 1px solid #eee" class="q-mr-sm q-pr-sm">{{ x.name }}</span>
<span>{{ x.price.toFixed(2) }}</span>
</div>
</div>
</div>
</div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div class="row">
<div class="f12 text-grey-900" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile }">{{ $t('v102.ticket.bc') }}：</div>
<div v-if="isCheck">
<template v-for="x in types">
<q-input style="width: 100%" v-if="x.checked" class="q-mb-md" @update:model-value="changePeople" v-model="x.num" mask="#" reverse-fill-mask dense standout>
<template v-slot:prepend>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="remove" @click="addPeople(x, 0)" />
</template>
<template v-slot:append>
<div class="q-mr-sm f12">{{ $t('v102.ticket.unit') }} {{ x.name }}</div>
<q-btn color="primary" size="sm" class="q-px-none" flat icon="add" @click="addPeople(x, 1)" />
</template>
</q-input>
</template>
</div>
</div>
</div>
</div>
</q-card>
<q-card class="q-pa-md q-mt-lg" flat>
<div>
<div class="text-h6 q-mb-md">{{ $t('v102.ticket.gi') }}</div>
<div class="row items-center">
<span class="f12 text-grey-900 text-subtitle2 text-weight-bold" :class="{ 'col-2': $q.platform.is.desktop, 'col-3': $q.platform.is.mobile }">{{ $t('v102.ticket.gi') }}：</span>
<span class="col f12">
<q-radio v-model="msg.CollectType" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="0" :label="$t('v102.ticket.zq')" />
<q-radio v-model="msg.CollectType" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="1" :label="$t('v102.ticket.yj')" />
</span>
</div>
<div v-if="msg.CollectType == '0'" class="bg-light-blue-1 q-pa-md fz14 rounded-borders q-mt-md">
<div class="text-weight-bold">{{ $t('v102.ticket.zqs') }}</div>
<div class="text-grey-900 q-mt-sm f12">{{ $t('v102.ticket.zqd') }}</div>
</div>
<div v-else>
<div class="q-mt-md">
<span class="f12 text-grey-900 text-subtitle2 text-weight-bold">{{ $t('v102.ticket.sj') }}</span>
</div>
<div class="row items-center q-mt-md text-grey-600 q-mb-md" v-if="$q.platform.is.desktop">
<div class="col q-mr-md">{{ $t('v102.ticket.sjc.c1') }}</div>
<div class="col q-mr-md">{{ $t('v102.ticket.sjc.c2') }}</div>
<!-- <div class="col-2 q-mr-md">{{ $t('v102.ticket.sjc.c3') }}</div> -->
<div class="col q-mr-md">{{ $t('v102.ticket.sjc.c4') }}</div>
<div class="col-4">{{ $t('v102.ticket.sjc.c5') }}</div>
</div>
<div style="border-top: 1px dashed #eee" :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<q-input dense standout v-model="msg.ConcatCNName" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.ticket.sjcp.c1')" />
<q-input dense standout v-model="msg.ConcatCNName" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.ticket.sjcp.c2')" />
<!-- <div class="col-2 q-mr-md q-mt-md">
<q-radio v-model="msg.Sex" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="1" :label="$t('v102.ticket.sex.man')" />
<q-radio v-model="msg.Sex" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="0" :label="$t('v102.ticket.sex.women')" />
</div> -->
<q-input dense standout v-model="msg.ConcatCNName" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.ticket.sjcp.c4')" />
<q-input dense standout v-model="msg.ConcatCNName" class="col-4 q-mt-md" :placeholder="$t('v102.ticket.sjcp.c5')" />
</div>
</div>
<div class="q-mt-md">
<q-input v-model="msg.Remark" standout autogrow :label="$t('v102.ticket.or') " />
</div>
</div>
</q-card>
<div class="q-mt-lg" v-if="!($q.screen.width<1200 || $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('v102.ticket.d5') }}</div>
<div class="text-grey-700 q-mt-sm">
景区营业时间：7:00-15:30 可提前 7天 网上预订， 亦可于当日15:30 前预订景区门票。 (景区严禁携带宠物 景区单日 游客限量18000/日） 1、本景区限网上及手机客户端预订，不接受电话预订，且实行实名制预定，所有游客订票须录入身份证信息方可预定。 2、每个身份证，每日限购一张门票。每个用户每单限购八张门票，超过八张须分别下单。 3、儿童免票也需购票，方可入园。儿童免票对象（实行门票免票优惠的范围和群体）：6周岁（含6周岁）以下的儿童享受门票和观光车票全免。 4、优惠对象：在校学生（全日制教育含本科以下）、青少年（7周岁-18周岁）、省级宗教部门颁发证书的宗教界人士、60周岁-64周岁老年人（国家法定节假日）。 5、免票对象：对符合政策条件的现役军人、伤残军人、在职、退休、残疾消防员人员和消防救援院校学员、残疾人、离休干部、抗美援朝军人、6周岁（含6周岁）以下儿童、65周岁以上老年人（自2018年10月1日起执行）、60周岁以上老年人（非国家法定节假日）（自2018年10月1日起执行）。 联票预订规则： ①、景区联票限连续三天进入同一景区游览的游客预订；
②、联票分次预订分次使用，即在使用一次入园联票进入景区后，再预订二次入园联票；使用二次入园联票进入景区后，再预订三次入园联票。 ③、景区接待量到达单日限量时，联票停止预订。 ④、其余预订规则按照预订须知执行，退改签、取票规则按照退订须知、取票须知执行。 以上信息仅供参考，具体信息请以景区当天披露为准。
</div>
</div>
</div>
</div>
<div class="" :class="{'q-ml-lg':!($q.screen.width<1200 || $q.platform.is.mobile),'q-mt-lg':($q.screen.width<1200 || $q.platform.is.mobile)}">
<div class="rounded-borders bg-white q-pa-md" style="width: 300px" :style="{'width':($q.screen.width<1200 || $q.platform.is.mobile)?'100%':'300px'}">
<div class="text-h6 text-grey-900">{{ $t('v102.ticket.st') }}</div>
<div class="q-mt-md q-mb-lg">
<div class="bg-red-1 q-pa-sm rounded-borders fz14" style="border: 1px dashed var(--q-negative)">
<div class="text-grey-900 text-subtitle2 text-weight-bold">{{ $t('v102.ticket.rtt') }}</div>
<div class="text-grey-700 q-mt-sm f12">{{ $t('v102.ticket.rtc') }}</div>
</div>
</div>
<div class="q-pt-md q-mb-lg" style="border-top: 1px dashed #eee">
<div class="text-grey-900 text-subtitle2 text-weight-bold">{{ $t('v102.ticket.ms') }}</div>
<div v-if="isCheck">
<template v-for="x in types">
<div class="row items-center q-mt-md" v-if="x.checked">
<q-badge color="grey-3" style="padding: 5px 8px" text-color="info" :label="x.name" />
<div class="col f12 text-right">{{x.price.toFixed(2)}} x {{x.num}}{{ $t('v102.ticket.unit') }}</div>
</div>
</template>
</div>
<div v-else class="text-center text-grey-600 q-py-lg">{{ $t('v102.ticket.nt') }}</div>
</div>
<div class="q-pt-md q-mb-lg text-right" style="border-top: 1px dashed #eee">
<span class="f12 text-dark q-mr-md">
{{ $t('v102.ticket.ds') }}：
</span>
<span class="text-h6 text-negative">
{{ msg.SumMoney.toFixed(2) }}
</span>
</div>
<div class="text-right">
<q-btn color="primary" unelevated class="q-px-lg" :disable="!isCheck" :label="$t('v102.ticket.sb')" />
</div>
</div>
</div>
<div class="q-mt-lg" v-if="($q.screen.width<1200 || $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('v102.ticket.d5') }}</div>
<div class="text-grey-700 q-mt-sm">
景区营业时间：7:00-15:30 可提前 7天 网上预订， 亦可于当日15:30 前预订景区门票。 (景区严禁携带宠物 景区单日 游客限量18000/日） 1、本景区限网上及手机客户端预订，不接受电话预订，且实行实名制预定，所有游客订票须录入身份证信息方可预定。 2、每个身份证，每日限购一张门票。每个用户每单限购八张门票，超过八张须分别下单。 3、儿童免票也需购票，方可入园。儿童免票对象（实行门票免票优惠的范围和群体）：6周岁（含6周岁）以下的儿童享受门票和观光车票全免。 4、优惠对象：在校学生（全日制教育含本科以下）、青少年（7周岁-18周岁）、省级宗教部门颁发证书的宗教界人士、60周岁-64周岁老年人（国家法定节假日）。 5、免票对象：对符合政策条件的现役军人、伤残军人、在职、退休、残疾消防员人员和消防救援院校学员、残疾人、离休干部、抗美援朝军人、6周岁（含6周岁）以下儿童、65周岁以上老年人（自2018年10月1日起执行）、60周岁以上老年人（非国家法定节假日）（自2018年10月1日起执行）。 联票预订规则： ①、景区联票限连续三天进入同一景区游览的游客预订；
②、联票分次预订分次使用，即在使用一次入园联票进入景区后，再预订二次入园联票；使用二次入园联票进入景区后，再预订三次入园联票。 ③、景区接待量到达单日限量时，联票停止预订。 ④、其余预订规则按照预订须知执行，退改签、取票规则按照退订须知、取票须知执行。 以上信息仅供参考，具体信息请以景区当天披露为准。
</div>
</div>
</div>
</div>
</div>
<q-dialog v-model="showDetails">
<ticket-card></ticket-card>
</q-dialog>
</template>
<script lang="ts">
import { inject, provide, reactive, toRefs, defineComponent } from 'vue'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../config/dictionary'
import TicketCard from '../../components/ticket/TicketCard.vue'
import { date } from 'quasar'
export default defineComponent({
components: { TicketCard },
setup(props) {
let { setTitle } = useMetaModule()
const { t } = useI18n()
const pageTitle = inject(DirtionmaryHelper.PAGE_TITLE_KEY) as any
pageTitle.value = t('v102.ticket.preview.pageTitle')
setTitle(pageTitle.value)
const data = reactive({
showDetails: false,
loading: false,
msg: {
StartTime: '',
TicketType: [] as any[],
CollectType: '0',
ConcatCNName: '',
ConcatENName: '',
Sex: '0',
Mobile: '',
Address: '',
SumMoney: 0.0,
Remark:''
},
types: [
{ id: 1, name: '兒童票', price: 900.0, checked: false, num: 1 },
{ id: 2, name: '成人票', price: 1800.0, checked: false, num: 1 },
{ id: 13, name: '學生票', price: 1200.0, checked: false, num: 1 },
{ id: 23, name: '家庭套票（2大1小）', price: 4000.0, checked: false, num: 1 }
],
isCheck: false
})
data.msg.StartTime = date.formatDate(date.addToDate(new Date(), { days: 1 }), 'MM月DD日 ddd')
const menu = inject(DirtionmaryHelper.MENU_KEYS) as any
menu.value = 8
const methods = {
showCardHandler() {
data.showDetails = true
},
optionsFn(cd: any) {
return cd > date.formatDate(new Date(), 'YYYY/MM/DD')
},
changeTicketTypeHandler(e: any) {
if (e.checked) {
e.num = 1
}
e.checked = !e.checked
data.isCheck = data.types.findIndex(x => x.checked) > -1
if(data.isCheck){
methods.calcSumMoneyHandler()
}else{
data.msg.SumMoney=0.0
}
},
addPeople(item: any, type: any) {
if (type == 1) {
item.num++
} else if (type == 0 && item.num > 1) {
item.num--
}
item.num = item.num != '' ? item.num : '1'
methods.calcSumMoneyHandler()
},
changePeople(val: string) {
// setTimeout(()=>{
// methods.calculateNum()
// },50)
},
calcSumMoneyHandler(){
data.msg.SumMoney=0.0
data.types.forEach(x=>{
if(x.checked){
data.msg.SumMoney+=x.price*x.num
}
})
}
}
return {
...toRefs(data),
...methods
}
}
})
</script>
<style></style>
src/router/routes.ts
View file @ 446a3afd
......@@ -10,12 +10,15 @@ const routes: RouteRecordRaw[] = [
{ path: '/hotel/order/:orderId?', component: () => import('pages/hotel/HotelOrder.vue') },
{ path: '/hotel/modify/:orderId', component: () => import('pages/hotel/ModifyHotelOrder.vue') },
{ path: '/hotel/offer/:orderId', component: () => import('pages/hotel/ListOfQuotation.vue') },
{ path: '/personal', component: () => import('pages/personal/personal.vue')},
{ path: '/scattered', component: () => import('pages/scattered/HotelList.vue')},
{ path: '/scattered/HotelDetails/:hotelId/:groupBookingFlg/:lowrateBySetCurrency', component: () => import('pages/scattered/hotelDetails.vue')},
{ path: '/scattered/HotelSure/:hotelId/:roomOptionCd', component: () => import('pages/scattered/HotelSure.vue')},
{ path: '/scattered/HotelOrder', component: () => import('pages/scattered/HotelOrder.vue')},
{ path: '/comingsoon', component: () => import('pages/ComingSoon.vue')}
{ path: '/personal', component: () => import('pages/personal/personal.vue') },
{ path: '/scattered', component: () => import('pages/scattered/HotelList.vue') },
{ path: '/scattered/HotelDetails/:hotelId/:groupBookingFlg/:lowrateBySetCurrency', component: () => import('pages/scattered/hotelDetails.vue') },
{ path: '/scattered/HotelSure/:hotelId/:roomOptionCd', component: () => import('pages/scattered/HotelSure.vue') },
{ path: '/scattered/HotelOrder', component: () => import('pages/scattered/HotelOrder.vue') },
{ path: '/comingsoon', component: () => import('pages/ComingSoon.vue') },
{ path: '/ticket/list', component: () => import('pages/ticket/TicketList.vue') },
{path: '/ticket/preview/:ticketId', component: () => import('pages/ticket/TicketOrderPreview.vue')},
{path: '/ticket/order', component: () => import('pages/ticket/TicketOrder.vue')}
]
},
{
......
src/utils/menus.ts
View file @ 446a3afd
......@@ -83,13 +83,13 @@ const useMenus={
childs:[
{
name:t('menu.ticket.second'),
url:'/comingsoon',
url:'/ticket/list',
id:8,
parentId:7,
},
{
name:t('menu.ticket.three'),
url:'/comingsoon',
url:'/ticket/order',
id:9,
parentId:7,
}
......
src/utils/tools.ts
View file @ 446a3afd
import { SitLang, StandardStatus, RoomType, OrderType, DinnerType, HotelType } from './../@types/index';
import { SitLang, StandardStatus, RoomType, OrderType, DinnerType, HotelType, SendType } from './../@types/index';
import { i18n } from '../boot/i18n'
const {t} =i18n.global
/**
......@@ -216,6 +216,24 @@ export function getHotelOrderType(getNormal:boolean = false):Array<OrderType>{
return types
}
export function getTicketOrderType(getNormal:boolean = false):Array<OrderType>{
let types = [] as Array<OrderType>
if(getNormal){
types.push({
TypeId:-1,
TypeName:t('hotelorder.orderType.default')
})
}
let typeLangs=[t('v102.ticket.zq'),t('v102.ticket.yj')]
typeLangs.forEach((x:string,i:number)=>{
types.push({
TypeId:i,
TypeName:x
})
})
return types
}
export function getDinners():DinnerType[]{
let dinners = [] as Array<DinnerType>
let dinStr = [t('dinner.a'),t('dinner.b'),t('dinner.c')]
......@@ -228,6 +246,20 @@ export function getDinners():DinnerType[]{
return dinners
}
export function getSendType():SendType[]{
let sendType = [] as Array<SendType>
let sendStr = [t('v102.to.ps.p1'),t('v102.to.ps.p2')]
let colors = ['text-negative','text-positive']
sendStr.forEach((x:string,i:number)=>{
sendType.push({
Id:i+2,
Name:x,
Color:colors[i]
})
})
return sendType
}
export function getHotelType():HotelType[]{
let hotelTypes = [] as Array<HotelType>
......
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