Skip to content

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

no message

parent 6b4157a3
Hide whitespace changes
Inline Side-by-side
Showing with 111 additions and 17 deletions
src/pages/CharteredBus/CharteredBusPreview.vue
View file @ dc1e660a
......@@ -56,7 +56,7 @@
</div>
</div>
</div>
<div :class="{ 'q-px-lg': $q.platform.is.desktop }">
<div v-if="msg.OrderType!=1" :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.CharteredBus.sjc.c25') }}{{ $t('v102.CharteredBus.d') }}：</div>
<div class="row items-center col wrap q-mt-md">
......@@ -67,6 +67,17 @@
</div>
</div>
</div>
<div v-if="msg.OrderType!=2" :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.CharteredBus.sjc.c26') }}{{ $t('v102.CharteredBus.d') }}：</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="changeDetailListHandler(x,4)" v-for="x in PlaceTypes2">
<span class="q-mr-sm q-pr-sm" :style="{'border-right': x.checked?'1px solid #ffffff':'1px solid gray'}">{{ x.Address }}</span>
<span>{{ x.Range }} m{{ $t('v102.CharteredBus.fw') }}</span>
</div>
</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.CharteredBus.tt') }}：</div>
......@@ -175,12 +186,12 @@
<div style="border-top: 1px dashed #eee" :class="{'row items-center':$q.platform.is.desktop,'column':$q.platform.is.mobile}">
<q-input v-if="msg.OrderType!=1" dense standout v-model="msg.GetonAddress" class="col q-mt-md col" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.CharteredBus.sjcp.c5')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestGetonAddress">
<template #prepend>
<q-icon class="text-red q-mr-xs" name="place" size="xs" @click="initMap(1,GetOnTheBusObj.Address,GetOnTheBusObj.Lng,GetOnTheBusObj.Lat)"></q-icon>
<q-icon class="text-red q-mr-xs" name="place" size="xs" @click="openMap(1,GetOnTheBusObj.Address,GetOnTheBusObj.Lng,GetOnTheBusObj.Lat)"></q-icon>
</template>
</q-input>
<q-input v-if="msg.OrderType!=2" dense standout v-model="msg.GetoffAddress" class="col q-mt-md" :class="{'q-mr-md':$q.platform.is.desktop}" :placeholder="$t('v102.CharteredBus.sjcp.c6')" :rules="[ val => val && val.length > 0 || ' ']" ref="guestGetoffAddress">
<template #append>
<q-icon class="text-red q-mr-xs" name="place" size="xs" @click="initMap(2,GetOffTheBusIdObj.Address,GetOffTheBusIdObj.Lng,GetOffTheBusIdObj.Lat)"></q-icon>
<q-icon class="text-red q-mr-xs" name="place" size="xs" @click="openMap(2,GetOffTheBusIdObj.Address,GetOffTheBusIdObj.Lng,GetOffTheBusIdObj.Lat)"></q-icon>
</template>
</q-input>
<q-field standout :model-value="msg.OrderDate" class="col text-dark cursor-pointer height" ref="guestTimeData">
......@@ -323,23 +334,61 @@
<CharteredBusCard :ProductId="ProductId"></CharteredBusCard>
</q-dialog>
<q-dialog v-model="showGoogleMap">
<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="baiduCharteredBusMapBaoChe">
<GoogleMap api-key="AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg" style="width: 100%; height: 100%" :center="center" :zoom="15" v-if="center">
<Marker :options="{ position: center }" />
<Circle></Circle>
</GoogleMap>
</div>
<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}">
<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"></div>
<div class="text-weight-bold fz20 ellipsis" style="width: 280px"><template v-if="detailsObj.CarType<3">{{ detailsObj.CarType==1?$t('v102.CharteredBus.baochetype1'):$t('v102.CharteredBus.baochetype2') }}</template>
<template v-else>
{{ $t('v102.CharteredBus.baochetype3') }}
</template></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"><template v-if="detailsObj.CarType<3">{{ detailsObj.CarType==1?$t('v102.CharteredBus.baochetype1'):$t('v102.CharteredBus.baochetype2') }}</template>
<template v-else>
{{ $t('v102.CharteredBus.baochetype3') }}
</template>
</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>
<div class="q-px-lg q-pb-sm text-red-14">
<q-select style="min-width: 190px;" unelevated v-model="keyword" dense :options="surroundingPois" emit-value option-label="title" option-value="title" map-options :label="msg.OrderType!=1?$t('v102.CharteredBus.sjc.c5'):$t('v102.CharteredBus.sjc.c6')" standout @update:model-value="changeKeyword" />
</div>
<div class="col rounded-borders bg-blue-1 q-mx-lg" id="baiduCharteredBusMapBaoChe" style="height: 800px;">
<GoogleMap class="q-pa-lg" api-key="AIzaSyCvRZN9lGl3y3EsM0A0sWPf1pZ2olGsyNg" style="width: 100%; height: 100%" :center="center" :zoom="15">
<Marker :options="{ position: center }" />
<LocalSearch></LocalSearch>
<Circle></Circle>
</GoogleMap>
</div>
<div class="row justify-end q-px-lg q-pt-sm">
<q-btn flat dense color="dark" :label="$t('close')" class="q-mr-sm" v-close-popup/>
<q-btn color="primary" unelevated :label="$t('v102.vehicle.add5')" @click="showGoogleMap=false"/>
</div>
</q-card>
</div>
</div>
</q-dialog>
</template>
<script lang="ts">
import { GoogleMap, Marker, Circle } from 'vue3-google-map'
import { GoogleMap, Marker, Circle,LocalSearch,Geocoder } from 'vue3-google-map'
import { useRouter } from 'vue-router'
import { ApiResult } from 'src/@types/enumHelper'
import TicketService from '../../api/CharteredBus'
import message from '../../utils/message'
import { currentRouter } from 'src/router'
import { ref, inject, provide, reactive, toRefs, defineComponent, watch } from 'vue'
import { ref, inject, provide, reactive, toRefs, defineComponent, watch,nextTick, } from 'vue'
import useMetaModule from '../../module/meta/metaModule'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from '../../config/dictionary'
......@@ -357,10 +406,14 @@ export default defineComponent({
setTitle(pageTitle.value)
const data = reactive({
Address:'' as String,
surroundingPois: [] as any,
keyword:'' as String,
GetOnTheBusObj: {} as any,
GetOffTheBusIdObj: {} as any,
center:{} as any,
radius: 0,
typeMap: 1,
showGoogleMap: false,
SetOutTime2: '',
timeData2: ref('19:42'),
......@@ -444,14 +497,28 @@ export default defineComponent({
const menu = inject(DirtionmaryHelper.MENU_KEYS) as any
menu.value = 5
const methods = {
initMap(type: Number,Address: String,lat: any, lng: any) {
return
changeKeyword(val: String) {
console.log(val,'====')
if(data.typeMap==1){
data.msg.GetonAddress = data.Address+val
}if(data.typeMap==2){
data.msg.GetoffAddress = data.Address+val
}
},
openMap(type: Number,Address: String,lat: any, lng: any){
data.typeMap = type
// data.keyword = Address
data.showGoogleMap = true
nextTick(() => {
methods.initMap(Address,lat,lng)
})
},
initMap(Address: String,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
}
let Bmap = window.BMapGL
let mPoint = new Bmap.Point(lat, lng)
var b = new Bmap.Map('baiduCharteredBusMapBaoChe')
b.centerAndZoom(mPoint, 15)
......@@ -479,8 +546,22 @@ export default defineComponent({
b.addOverlay(new Bmap.Marker(new Bmap.Point(lat, lng)))
b.addOverlay(label)
b.addOverlay(circle)
// console.log(new Bmap.Circle(new Bmap.radiu(lat, lng)),'-=====')
}
var geoc = new Bmap.Geocoder();
b.addEventListener('click', (e) =>{
geoc.getLocation(e.latlng,(t)=>{
data.surroundingPois = t.surroundingPois
data.keyword = data.surroundingPois[0].title
let newAddress = t.addressComponents.city+t.addressComponents.district+t.addressComponents.province+t.addressComponents.street+t.addressComponents.streetNumber
data.Address = newAddress
if(data.typeMap==1){
data.msg.GetonAddress = data.Address+data.keyword
}if(data.typeMap==2){
data.msg.GetoffAddress = data.Address+data.keyword
}
})
})
},
// 获取订单详情
getOrderInfo(){
......@@ -520,6 +601,7 @@ export default defineComponent({
methods.changeDetailListHandler(x,1)
}
})
data.types.forEach(x=>{
if(x.Id==r.data.data.CarId){
methods.changeDetailListHandler(x,3)
......@@ -602,6 +684,8 @@ export default defineComponent({
}
data.PlaceTypes = JSON.parse(JSON.stringify(r.data.data.PlaceList))
data.PlaceTypes2 = JSON.parse(JSON.stringify(r.data.data.PlaceList))
methods.changeDetailListHandler(data.PlaceTypes[0],2)
methods.changeDetailListHandler(data.PlaceTypes2[0],4)
data.types = r.data.data.CarTypeList
if(data.types&&data.types.length==0){
message.errorMsg(`${t('v102.ticket.nobj')}`)
......@@ -725,6 +809,16 @@ export default defineComponent({
x.checked = false
})
e.checked = !e.checked
data.GetOnTheBusObj = e
data.radius = e.Range
}
if(i==4){
data.PlaceTypes2.forEach(x=>{
x.checked = false
})
e.checked = !e.checked
data.GetOffTheBusIdObj = e
data.radius = e.Range
}
if(i==3){
data.types.forEach(x=>{
......
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