Skip to content

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

no message

parent 446a3afd
Hide whitespace changes
Inline Side-by-side
Showing with 330 additions and 152 deletions
src/components/ticket/TicketCard.vue
View file @ 0230bf83
......@@ -4,11 +4,11 @@
<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>
<div class="text-weight-bold fz20 ellipsis" style="width: 280px">{{t.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">
<span class="inline-block">飞弹日枝山王神社
<span class="inline-block">{{t.Name}}
<q-badge color="info" :label="$t('v102.ticket.jing')" />
</span>
</div>
......@@ -21,43 +21,68 @@
<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>
<span class="col fz14 text-weight-bold text-blick">{{t.Address}}</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>
<span class="fz14 text-weight-bold text-blue q-ml-sm q-mr-md">FAX：{{t.Tel}}</span>
</div>
<div :class="{ 'q-mr-lg': $q.platform.is.desktop, 'q-mt-sm': $q.platform.is.mobile }">
<!-- <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> -->
<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>
<a class="fz14 text-weight-bold text-blue q-ml-sm" :href="t.Url" target="_blank">{{t.Url}}</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 rounded-borders relative-position" :class="{ 'col-6': $q.platform.is.desktop, 'height-320': $q.platform.is.mobile }" style="overflow: hidden" v-if="t.PicPathList">
<div v-if="t.PlayTimeHour||t.PlayTimeMinutes" 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 class="bg-dark text-white" style="padding: 0 4px; font-size: 12px">{{ $t('v102.ticket.recommendTime') }}</div>
<div class="text-dark" style="padding: 0 4px; font-size: 12px; background: #f0bd86">
<template v-if="t.PlayTimeHour">
{{t.PlayTimeHour}}{{ $t('v102.ticket.hour') }}
</template>
<template v-if="t.PlayTimeMinutes">
{{t.PlayTimeMinutes}}}{{ $t('v102.ticket.minutes') }}
</template>
</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 class="col-7" :class="{ 'col-7': t.PicPathList.length >= 3, 'col-6': t.PicPathList.length == 2, 'col-12': t.PicPathList.length == 1 }">
<q-img @click="showImageHandler(`${t.PicPathList[0]}`)" :src="`${t.PicPathList[0]}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
{{$t('v102.ticket.load')}}
</div>
</template>
</q-img>
</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 class="col q-pl-sm" v-if="t.PicPathList.length > 1">
<div :style="{ height: t.PicPathList.length > 2 ? '50%' : '100%' }">
<q-img @click="showImageHandler(`${t.PicPathList[1]}`)" :src="`${t.PicPathList[1]}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
{{$t('v102.ticket.load')}}
</div>
</template>
</q-img>
</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">
<div class="row items-end q-pt-sm" style="height: 50%" v-if="t.PicPathList.length > 2">
<q-img @click="showImageHandler(`${t.PicPathList[2]}`)" :src="`${t.PicPathList[2]}`" spinner-color="drk" spinner-size="20px" height="100%" mode="cover">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
{{$t('v102.ticket.load')}}
</div>
</template>
<div class="absolute-full text-subtitle2 flex flex-center" v-if="t.PicPathList.length > 3">
<span class="fz20 text-weight-bold">+</span>
<span class="text-h5 text-weight-bold">{{ t.List.length - 3 }}</span>
<span class="text-h5 text-weight-bold">{{ t.PicPathList.length - 3 }}</span>
</div>
</q-img>
</div>
......@@ -71,20 +96,23 @@
</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 class="text-grey-8 q-mt-sm">{{t.Feature}}</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 class="col text-subtitle2 text-weight-bolder">{{t.OpeningHours}} {{t.OpeningHours.substring(6,13)}} {{ $t('v102.ticket.stoppage') }}</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="人文景观" />
<template v-if="t.GeographicTag||t.ScenicSpotTag">
<q-badge v-if="t.GeographicTag" v-for="s in t.GeographicTag.split(',')" outline color="positive" :label="s" class="q-mr-md" />
<q-badge v-if="t.ScenicSpotTag" v-for="s in t.ScenicSpotTag.split(',')" outline color="warning" :label="s" class="q-mr-md" />
</template>
<template v-else>-</template>
</div>
</div>
</div>
......@@ -92,54 +120,20 @@
<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 class="col text-subtitle2 text-weight-bolder">{{t.TrafficInfo?t.TrafficInfo:'-'}}</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 class="text-grey-700 q-mt-sm">{{t.About}}</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 class="text-grey-700 q-mt-sm">{{t.BookingInfo}}</div>
</div>
</div>
</q-scroll-area>
......@@ -164,7 +158,7 @@ export default defineComponent({
watch(
() => props.ticket,
(n, o) => {
data.t = n
// data.t = n
}
)
const data = reactive({
......@@ -174,14 +168,13 @@ export default defineComponent({
currentImage:'',
showImagePriview:false,
center:{} as any,
images:['http://imgfile.oytour.com/Upload/DMC/20200313032017962.jpg']
images:[]
})
data.scrollStyle = useScrollModule().scrollStyle
data.t={
List:[{Path:'http://imgfile.oytour.com/Upload/DMC/20200313032017962.jpg'}]
}
data.t = props.ticket
// data.images = data.t.PicPathList
const methods = {
showImageHandler(url: string) {
data.currentImage = url
......@@ -200,9 +193,9 @@ export default defineComponent({
}
},
}
nextTick(()=>{
methods.initMap('137.2133824', '36.6867861')
methods.initMap(data.t.Lng,data.t.Lat)
})
return {
...toRefs(data),
......
src/components/ticket/list/ListHeader.vue
View file @ 0230bf83
<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')" />
<q-field v-if="$q.platform.is.desktop" stack-label :label="$t('daterange')" standout class="q-ml-lg col-2" style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="searchClone.OpenTime" :options="optionsFn" mask="YYYY/MM/DD" @update:model-value="dateRangeHandler"></q-date>
</q-popup-proxy>
</q-field>
<q-input v-model="searchClone.Name" standout :class="{'q-ml-lg':$q.platform.is.desktop,'col':$q.platform.is.mobile}" style="min-width:150px;" 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-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 q-ml-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-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 q-ml-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"/>
<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-my-md" v-if="$q.platform.is.mobile">
<n-cascader 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 />
</div>
<div class="q-my-md" v-if="$q.platform.is.mobile">
<q-field stack-label :label="$t('daterange')" standout class="col-2" style="min-width: 190px" dense>
<div class="self-center full-width no-outline" tabindex="0">{{ searchClone.OpenTime }}</div>
<q-popup-proxy :offset="[0, 10]" ref="qDateProxy">
<q-date v-model="searchClone.OpenTime" :options="optionsFn" mask="YYYY/MM/DD" @update:model-value="dateRangeHandler"></q-date>
</q-popup-proxy>
</q-field>
</div>
<div class="row items-center">
<q-input v-model="searchClone.StartPrice" class="col q-mr-md" mask="#.##" reverse-fill-mask dense type="text" standout :label="$t('hotel.minPrice')" />
<q-input v-model="searchClone.EndPrice" class="col" dense mask="#.##" reverse-fill-mask ftype="text" standout :label="$t('hotel.maxPrice')" />
</div>
</q-card>
</q-popup-proxy>
</q-btn>
<q-btn v-if="$q.platform.is.desktop" color="primary" unelevated :label="$t('query')" @click="setSearchHandler"/>
<q-btn v-else 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 svgIcon from '../../global/svg-icon.vue'
import { date } from 'quasar'
import { useQuasar } from 'quasar'
import { computed, ref, 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 },
components: { svgIcon, NCascader },
setup(props) {
const $q = useQuasar()
const qDateProxy = ref(null) as any
const data = reactive({
defalutUrl: ref('https://cdn.quasar.dev/img/mountains.jpg'),
addressParams: {
Id: '651'
},
......@@ -32,7 +71,8 @@ export default {
cascader: {
addressValue: null
} as any,
searchClone:{} as any
searchClone:{} as any,
canHide: false,
})
const search = inject(DirtionmaryHelper.TICKET_QUERY_PARAM) as any
data.searchClone = JSON.parse(JSON.stringify(search.msg))
......@@ -77,14 +117,14 @@ export default {
})
},
changearea(e: number, option: any, pathValues: Array<any>) {
data.searchClone.Province = 0
data.searchClone.City = 0
data.searchClone.QProvince = 0
data.searchClone.QCity = 0
if (pathValues) {
if (pathValues.length > 0) {
data.searchClone.Province = pathValues[0].ID
data.searchClone.QProvince = pathValues[0].ID
}
if (pathValues.length > 1) {
data.searchClone.City = pathValues[1].ID
data.searchClone.QCity = pathValues[1].ID
}
}
},
......@@ -94,10 +134,28 @@ export default {
changeViewHandler(t:number){
data.searchClone.ViewType=t
methods.setSearchHandler()
}
},
dateRangeHandler(e: any) {
if (qDateProxy.value) qDateProxy.value.hide()
},
optionsFn(cd: any) {
return cd >= date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD')
},
}
const searchCnt = computed(() => {
let setCnt = 0
if ($q.platform.is.mobile) {
if (data.searchClone.QProvince > 0) setCnt++
if (data.searchClone.OpenTime) setCnt++
}
if (data.searchClone.StartPrice>0) setCnt++
if (data.searchClone.EndPrice>0) setCnt++
return setCnt
})
methods.initAddress()
return {
qDateProxy,
searchCnt,
...toRefs(data),
...methods
}
......
src/components/ticket/list/ListTable.vue
View file @ 0230bf83
<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-img :src="x.PicPathList[0]" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="100%" fit="cover" class="rounded-borders">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
{{$t('v102.ticket.load')}}
</div>
</template>
</q-img>
<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="text-subtitle1 text-weight-bolder ellipsis-2-lines cursor-pointer" :class="{ 'text-subtitle2': $q.platform.is.mobile }" @click="showCardHandler(x)">{{x.Name}}</div>
<div class="f12 text-grey-700 ellipsis">{{$t('v102.ticket.Japan')}} {{x.ProvinceName}} {{x.CityName}} {{x.Address}}</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>
<span class="text-weight-bolder">{{x.TicketPriceList.length}}</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)"/>
<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(x.ID)"/>
</div>
</q-card-section>
</q-card>
......@@ -20,27 +26,33 @@
<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" />
<q-img :src="i.PicPathList[0]" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="130px" fit="cover" class="rounded-borders">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-blue-1 text-dark">
{{$t('v102.ticket.load')}}
</div>
</template>
</q-img>
</div>
<div class="q-ml-md col">
<div class="text-subtitle1 text-weight-bolder cursor-pointer" @click="showCardHandler">飞弹日枝山王神社</div>
<div class="text-subtitle1 text-weight-bolder cursor-pointer" @click="showCardHandler(i)">{{i.Name}}</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" />
<span>{{i.CityName}} {{i.Address}}</span>
<q-btn color="primary" icon="map" :label="$t('v102.ticket.map')" size="sm" dense flat class="q-ml-md" @click="showCardHandler(i)"/>
</div>
<div>
<q-badge outline color="positive" label="历史建筑" class="q-mr-md" />
<q-badge outline color="positive" label="人文景观" />
<q-badge v-if="i.GeographicTag" v-for="s in i.GeographicTag.split(',')" outline color="positive" :label="s" class="q-mr-md" />
<q-badge v-if="i.ScenicSpotTag" v-for="s in i.ScenicSpotTag.split(',')" outline color="warning" :label="s" class="q-mr-md" />
</div>
</div>
<div>
<div class="text-h6 din text-negative">
<span>900.00</span>
<span>{{i.MinPrice.toFixed(2)}}</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)"/>
<q-btn color="primary" icon="shopping_cart" :label="$t('v102.ticket.buy')" dense outline size="sm" @click="toPreviewOrderHandler(i.ID)"/>
</div>
</div>
</q-card>
......@@ -50,12 +62,15 @@
<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>
<ticket-card :ticket="detailsObj"></ticket-card>
</q-dialog>
</template>
<script lang="ts">
import { ApiResult } from '../../../@types/enumHelper'
import { useQuasar } from 'quasar'
import TicketService from '../../../api/ticket'
import message from '../../../utils/message'
import { DirtionmaryHelper } from 'src/config/dictionary'
import { defineComponent, inject, reactive, toRefs, watch } from 'vue'
import { useRouter } from 'vue-router'
......@@ -74,6 +89,7 @@ export default defineComponent({
PageCount: 30
},
tickets: [] as any[],
detailsObj: {} as any,
showDetails: false
})
......@@ -97,19 +113,32 @@ export default defineComponent({
const methods = {
getTickets() {
data.tickets = []
for (let i = 0; i < data.pages.PageSize; i++) {
data.tickets.push({})
}
let param = Object.assign(data.pages, search.msg)
TicketService.getTicketList(param)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.tickets = r.data.data.pageData
data.pages.PageCount = r.data.data.pageCount
} else {
message.errorMsg(r.data.message)
}
}).catch(e => {
message.errorMsg(e.message)
data.loading = false
})
},
toPreviewOrderHandler(id:number){
$router.push({ path:`/ticket/preview/${id}`})
//
let onldOpen = `${search.msg.OpenTime.split('/')}`
let newOpen = onldOpen.substring(0,4) + onldOpen.substring(5,7) + onldOpen.substring(8,10)
$router.push({ path:`/ticket/preview/${id}/${newOpen}`})
},
changePageHandler(n: number) {
data.pages.PageIndex = n
methods.getTickets()
},
showCardHandler(){
showCardHandler(x:any){
data.detailsObj=x
data.showDetails=true
}
}
......
src/i18n/zh-TW/index.ts
View file @ 0230bf83
......@@ -789,9 +789,19 @@ export default {
v102:{
ticket:{
pageTitle:"票券檢索",
name:'請輸入票券名稱',
name:'請輸入景點名稱',
toggleListType1:"列表模式",
toggleListType2:"卡片模式",
Japan: '日本',
stoppage:'停止如場',
recommendTime: '推薦遊玩',
hour: '小時',
minutes: '分鐘',
ticketet: '兒童票',
ticketcr: '成人票',
ticketxs: '學生票',
ticketjt: '家庭套票（2大1小）',
load:'加載失敗',
showtt:{
t1:'共',
t2:'種票型'
......@@ -864,8 +874,10 @@ export default {
t:'修改取件方式',
c:'取消修改',
s:'保存修改'
}
}
},
},
},
//#endregion
}
src/pages/ticket/TicketList.vue
View file @ 0230bf83
......@@ -6,6 +6,7 @@
</template>
<script lang="ts">
import { date } from 'quasar'
import { inject, provide, reactive, toRefs, defineComponent } from 'vue';
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
......@@ -25,12 +26,15 @@ export default defineComponent({
})
const search = reactive({
msg:{
StartDate: '',
Country: '651',
Province: 0,
City: 0,
TicketName:'',
ViewType:1
QCountry: '651',
QProvince: 0,
QCity: 0,
QDistrict: 0,
Name:'',
OpenTime: date.formatDate(date.addToDate(new Date(), { days: 1 }), 'YYYY/MM/DD'),
StartPrice: '',
EndPrice: '',
ViewType:1,//列表模式
}
})
provide(DirtionmaryHelper.TICKET_QUERY_PARAM, search)
......
src/pages/ticket/TicketOrderPreview.vue
View file @ 0230bf83
<template>
<div class="fix-height-subpage column no-wrap">
<div class="fix-height-subpage column no-wrap" v-if="detailsObj">
<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" />
<q-img v-if="detailsObj.PicPathList&&detailsObj.PicPathList.length>0" :src="detailsObj.PicPathList[0]" :ratio="16 / 9" spinner-color="grey" spinner-size="50px" width="100px" fit="cover" class="rounded-borders">
<template v-slot:error>
<div class="absolute-full flex flex-center bg-negative text-white">
Cannot load image
</div>
</template>
</q-img>
</div>
<div class="col">
<div class="text-subtitle1 text-weight-bolder cursor-pointer" @click="showCardHandler">飞弹日枝山王神社</div>
<div class="text-subtitle1 text-weight-bolder cursor-pointer" @click="showCardHandler">{{detailsObj.Name}}</div>
<div class="f14 text-grey-600">
{{ $t('v102.ticket.ordertip') }}
</div>
......@@ -20,12 +26,12 @@
<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">
<q-field standout :model-value="msg.UseDate" class="text-dark cursor-pointer">
<template v-slot:control>
<div class="self-center full-width no-outline" tabindex="0">{{ msg.StartTime }}</div>
<div class="self-center full-width no-outline" tabindex="0">{{ msg.UseDate }}</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-date v-model="msg.UseDate" :options="optionsFn" mask="YYYY/MM/DD"></q-date>
</q-popup-proxy>
</q-field>
</div>
......@@ -35,7 +41,7 @@
<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">
<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="changeDetailListHandler(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>
......@@ -69,11 +75,11 @@
<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')" />
<q-radio v-model="msg.MailingState" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="1" :label="$t('v102.ticket.zq')" />
<q-radio v-model="msg.MailingState" checked-icon="task_alt" unchecked-icon="panorama_fish_eye" val="2" :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 v-if="msg.MailingState == '1'" 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>
......@@ -89,14 +95,14 @@
<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')" />
<q-input dense standout v-model="msg.Name" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.ticket.sjcp.c1')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestEName"/>
<q-input dense standout v-model="msg.EName" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.ticket.sjcp.c2')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestName"/>
<!-- <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')" />
<q-input dense standout v-model="msg.Mobile" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.ticket.sjcp.c4')" :rules="[ val => val && val.length == 11 || ' ']" ref="guestMobile"/>
<q-input dense standout v-model="msg.MailingAddress" class="col-4 q-mt-md" :placeholder="$t('v102.ticket.sjcp.c5')" :rules="[(val:any, rules:any) => rules.email(val) || ' ']" ref="guestEmail"/>
</div>
</div>
<div class="q-mt-md">
......@@ -142,11 +148,11 @@
{{ $t('v102.ticket.ds') }}：
</span>
<span class="text-h6 text-negative">
{{ msg.SumMoney.toFixed(2) }}
{{ msg.Money.toFixed(2) }}
</span>
</div>
<div class="text-right">
<q-btn color="primary" unelevated class="q-px-lg" :disable="!isCheck" :label="$t('v102.ticket.sb')" />
<q-btn color="primary" unelevated class="q-px-lg" :disable="!isCheck" :label="$t('v102.ticket.sb')" @click="submit"/>
</div>
</div>
</div>
......@@ -163,12 +169,16 @@
</div>
</div>
<q-dialog v-model="showDetails">
<ticket-card></ticket-card>
<ticket-card :ticket="detailsObj"></ticket-card>
</q-dialog>
</template>
<script lang="ts">
import { inject, provide, reactive, toRefs, defineComponent } from 'vue'
import { ApiResult } from 'src/@types/enumHelper'
import TicketService from '../../api/ticket'
import message from '../../utils/message'
import { currentRouter } from 'src/router'
import { ref, inject, provide, reactive, toRefs, defineComponent, watch } from 'vue'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../config/dictionary'
......@@ -187,45 +197,112 @@ export default defineComponent({
showDetails: false,
loading: false,
msg: {
StartTime: '',
TicketType: [] as any[],
CollectType: '0',
ConcatCNName: '',
ConcatENName: '',
Sex: '0',
Mobile: '',
OrderId: 0,
Money: 0.0,
Remark: '',
MailingState: '1',//邮寄状态 1自取 2邮寄
MailingAddress: '',//MailingState =2 填写邮寄
UseDate:'',//门票日期
Name:'',
EName:'',
Sex: '',//1男2女
Birthday: '',
Mobile:'',
CouponsId:'',//景点id
DetailList:[] as any,
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 }
{ id: 1, name: `${t('v102.ticket.ticketet')}`, price: 900.0, checked: false, num: 1 },
{ id: 2, name: `${t('v102.ticket.ticketcr')}`, price: 1800.0, checked: false, num: 1 },
{ id: 13, name: `${t('v102.ticket.ticketxs')}`, price: 1200.0, checked: false, num: 1 },
{ id: 23, name: `${t('v102.ticket.ticketjt')}`, price: 4000.0, checked: false, num: 1 }
],
isCheck: false
isCheck: false,
OpenTime: '',
detailsObj: {} as any,
})
data.msg.StartTime = date.formatDate(date.addToDate(new Date(), { days: 1 }), 'MM月DD日 ddd')
const guestName = ref(null) as any
const guestEName = ref(null) as any
const guestMobile = ref(null) as any
const guestEmail = ref(null) as any
let time = currentRouter.currentRoute.value.params.Time
data.OpenTime = time.substring(0,4)+'-'+time.substring(4,6)+'-'+time.substring(6,8)
data.msg.CouponsId = currentRouter.currentRoute.value.params.ticketId
data.msg.UseDate = date.formatDate(date.addToDate(new Date(), { days: 1 }), 'MM月DD日 ddd')
const menu = inject(DirtionmaryHelper.MENU_KEYS) as any
menu.value = 8
const methods = {
getInfo(){
if(data.OpenTime){
let param = {
CouponsId:data.msg.CouponsId,
OpenTime:data.OpenTime
}
TicketService.getTicketInfo(param)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.detailsObj = r.data.data
console.log(data.detailsObj,'----')
} else {
message.errorMsg(r.data.message)
}
}).catch(e => {
message.errorMsg(e.message)
data.isCheck = false
})
}
},
submit(){
console.log(data.isCheck,'0099')
if(!data.isCheck) return
if(data.msg.MailingState=='2'){
let flag = false
guestName.value.validate()
guestEName.value.validate()
guestMobile.value.validate()
guestEmail.value.validate()
flag = !guestName.value.hasError && !guestEName.value.hasError && !guestMobile.value.hasError && !guestEmail.value.hasError
if(!flag) return
}else{
data.msg.Name = ''
data.msg.EName = ''
data.msg.Mobile = ''
data.msg.MailingAddress = ''
}
let param = Object.assign(data.msg)
return
TicketService.setTicketOrder(param)
.then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) {
data.isCheck = false
data.pages.PageCount = r.data.data.pageCount
} else {
message.errorMsg(r.data.message)
}
}).catch(e => {
message.errorMsg(e.message)
data.isCheck = false
})
},
showCardHandler() {
data.showDetails = true
},
optionsFn(cd: any) {
return cd > date.formatDate(new Date(), 'YYYY/MM/DD')
},
changeTicketTypeHandler(e: any) {
changeDetailListHandler(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()
methods.calcMoneyHandler()
}else{
data.msg.SumMoney=0.0
data.msg.Money=0.0
}
},
addPeople(item: any, type: any) {
......@@ -235,26 +312,31 @@ export default defineComponent({
item.num--
}
item.num = item.num != '' ? item.num : '1'
methods.calcSumMoneyHandler()
methods.calcMoneyHandler()
},
changePeople(val: string) {
// setTimeout(()=>{
// methods.calculateNum()
// },50)
},
calcSumMoneyHandler(){
data.msg.SumMoney=0.0
calcMoneyHandler(){
data.msg.Money=0.0
data.types.forEach(x=>{
if(x.checked){
data.msg.SumMoney+=x.price*x.num
data.msg.Money+=x.price*x.num
}
})
}
}
methods.getInfo()
return {
...toRefs(data),
...methods
...methods,
guestName,
guestEName,
guestMobile,
guestEmail
}
}
})
......
src/router/routes.ts
View file @ 0230bf83
......@@ -17,7 +17,7 @@ const routes: RouteRecordRaw[] = [
{ 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/preview/:ticketId/:Time', component: () => import('pages/ticket/TicketOrderPreview.vue')},
{path: '/ticket/order', component: () => import('pages/ticket/TicketOrder.vue')}
]
},
......
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