Skip to content

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

no message

parent 8a1d0b67
Show whitespace changes
Inline Side-by-side
Showing with 80 additions and 30 deletions
src/pages/scheduledTrip/detailsNew.vue
View file @ 768841c9
...@@ -37,7 +37,7 @@ ...@@ -37,7 +37,7 @@
@click="goScrollHandler(x.top + 20)" :name="x.display" :label="x.display"></q-tab> @click="goScrollHandler(x.top + 20)" :name="x.display" :label="x.display"></q-tab>
</q-tabs> </q-tabs>
</div> </div>
<div v-if="dataList" style="max-width: 1200px; margin-left: auto; margin-right: auto" class="q-mt-md q-mb-lg" :class="{ 'q-px-md': $q.screen.width < 1220 }"> <div v-if="dataList" style="width: 1200px; margin-left: auto; margin-right: auto" class="q-mt-md q-mb-lg" :class="{ 'q-px-md': $q.screen.width < 1220 }">
<div style="padding-bottom:calc((100% - 0px)/3);position:relative;"> <div style="padding-bottom:calc((100% - 0px)/3);position:relative;">
<div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0" class="overflow-hidden rounded-borders"> <div style="position: absolute; left: 0; top: 0; right: 0; bottom: 0" class="overflow-hidden rounded-borders">
<q-carousel <q-carousel
...@@ -122,7 +122,7 @@ ...@@ -122,7 +122,7 @@
/> />
</div> </div>
</div> </div>
<div class="q-mt-lg"> <div class="q-mt-lg" v-if="dataList.productRecommend">
<div class="q-mt-sm" v-for="(x, i) in dataList.productRecommend.split('\n')" :key="i"> <div class="q-mt-sm" v-for="(x, i) in dataList.productRecommend.split('\n')" :key="i">
<q-icon name="iconfont iconhongqi" color="primary" size="16px" class="q-mr-md" /> <q-icon name="iconfont iconhongqi" color="primary" size="16px" class="q-mr-md" />
{{ x }} {{ x }}
...@@ -202,9 +202,17 @@ ...@@ -202,9 +202,17 @@
class="q-mt-xl row" class="q-mt-xl row"
:class="{ 'q-px-md': $q.screen.width < 1220&&$q.screen.width>760, }" :class="{ 'q-px-md': $q.screen.width < 1220&&$q.screen.width>760, }"
> >
<div class="col q-ml-xl position-relative" <!-- col q-ml-xl position-relative -->
v-if="days.length>0&&dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop"> <!-- days.length>0&&dayList.length>3&&currentHeight > days[0].top-60&&currentHeight < navs[2].top&&$q.platform.is.desktop -->
<div style="position: sticky; top: 100px"> <div :class="{'fixed':$q.platform.is.desktop}"
:style="{'top':currentHeight>navs[1].top?'200px':'200px',
'left':currentHeight>navs[1].top?'120px':'130px',}"
v-if="
dataList.priceList.length > 0&&$q.platform.is.desktop&&currentHeight>navs[1].top-400
&&currentHeight<navs[2].top
">
<!-- position: sticky; top: 100px -->
<div style="">
<div <div
class="trip-module text-subtitle2 cursor-pointer q-mb-lg" class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
v-for="(x, i) in days" v-for="(x, i) in days"
...@@ -220,10 +228,21 @@ ...@@ -220,10 +228,21 @@
</div> </div>
</div> </div>
</div> </div>
<div :class="{'col-8':$q.platform.is.desktop,'col':$q.platform.is.mobile}"> <div style="width: 100%;" :class="{'col':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
<div class="text-h5 text-weight-bold text-left" id="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d1')}}</div> <div class="text-h5 text-weight-bold text-left q-pb-sm" id="feature" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d1')}}</div>
<div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.featureContent" v-if="dataList.feature.featureContent != ''" :class="{'q-px-md':$q.platform.is.mobile}"></div>
<div class="q-mt-md q-pb-xl" id="setZoom" ref="diyContext" :style="{ zoom: zoomDiyContext }" v-html="dataList.feature.featureHtml" v-if="dataList.feature.featureHtml != ''"></div> <div class="q-pb-xl" v-if="tripImages&&tripImages.length>0"
ref="diyContext">
<div v-for="(x,i) in tripImages">
<!-- <img class="block" :src="x.header" width="100%"> -->
<img class="block" :src="x.page" style="width: 100%;">
<div class="tripImages-footer">
<img class="block" :src="x.footer" style="width: 100%;">
</div>
</div>
</div>
<div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.featureContent" v-else-if="dataList.feature.featureContent != ''" :class="{'q-px-md':$q.platform.is.mobile}"></div>
<div class="q-mt-md q-pb-xl" id="setZoom" ref="diyContext" :style="{ zoom: zoomDiyContext }" v-html="dataList.feature.featureHtml" v-else-if="dataList.feature.featureHtml != ''"></div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" id="product" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d2')}}</div> <div class="text-h5 text-weight-bold text-left q-mt-xl" id="product" :class="{'q-px-md': $q.screen.width < 1220&&$q.platform.is.mobile}">{{$t('v103.scheduledTripDetails.righttitle.d2')}}</div>
<div class="q-pb-xl"> <div class="q-pb-xl">
<smaple :trip="dataList" :class="{'q-px-md':$q.platform.is.mobile}"></smaple> <smaple :trip="dataList" :class="{'q-px-md':$q.platform.is.mobile}"></smaple>
...@@ -247,7 +266,7 @@ ...@@ -247,7 +266,7 @@
<div class="q-mt-lg trip-text q-mb-xl" :class="{'q-px-md':$q.platform.is.mobile}"> <div class="q-mt-lg trip-text q-mb-xl" :class="{'q-px-md':$q.platform.is.mobile}">
<ul class="no-padding text-grey-9 q-ml-md"> <ul class="no-padding text-grey-9 q-ml-md">
<li v-for="(x,index) in 5" <li v-for="(x,index) in 5"
:class="{'q-mt-sm':index!=0}">{{$t(`v103.details.righttitle.d${index+7}`)}}</li> :class="{'q-mt-sm':index!=0}">{{$t(`v103.scheduledTripDetails.righttitle.d${index+7}`)}}</li>
</ul> </ul>
<div class="q-mt-lg f12 text-grey-6"> <div class="q-mt-lg f12 text-grey-6">
<q-icon name="iconfont icontishi" class="q-mr-sm" /> <q-icon name="iconfont icontishi" class="q-mr-sm" />
...@@ -255,9 +274,14 @@ ...@@ -255,9 +274,14 @@
</div> </div>
</div> </div>
</div> </div>
<template v-if="$q.platform.is.desktop"> <template v-if="$q.platform.is.desktop&&currentHeight>130">
<div class="col-1"></div> <!-- <div class="col-1"></div> -->
<div class="col q-ml-xl position-relative"> <!-- col q-ml-xl position-relative -->
<div
:class="{'absolute':currentHeight<1000,
'fixed':currentHeight>1000}"
:style="{'top':currentHeight<1000?'0':'100px',
'right':currentHeight<1000?'-150px':'70px',}">
<div style="position: sticky; top: 100px"> <div style="position: sticky; top: 100px">
<div <div
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md" class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
...@@ -297,6 +321,10 @@ import smaple from 'src/components/trip/smaple.vue' ...@@ -297,6 +321,10 @@ import smaple from 'src/components/trip/smaple.vue'
import Trip from 'src/components/trip/trip.vue' import Trip from 'src/components/trip/trip.vue'
import block from 'src/components/trip/block/index.vue' import block from 'src/components/trip/block/index.vue'
import { formatDate, moneyFormat } from 'src/utils/tools' import { formatDate, moneyFormat } from 'src/utils/tools'
import request from '../../api/requestPublic'
// import service from "../../api/axiosPublic"
import { HttpResponse } from "../../@types";
import Axios, { AxiosResponse, AxiosRequestConfig, AxiosError } from 'axios'
export default defineComponent({ export default defineComponent({
components: { components: {
calendar, calendar,
...@@ -412,7 +440,9 @@ export default defineComponent({ ...@@ -412,7 +440,9 @@ export default defineComponent({
], ],
priceListHeight: 0, priceListHeight: 0,
stickyHeight: 0, stickyHeight: 0,
zoomDiyContext: 1 zoomDiyContext: 1,
detailsImageList:[],
tripImages: []
}) })
data.scrollareaobj = inject(DirtionmaryHelper.SCROLL_AREA_OBJ) as any data.scrollareaobj = inject(DirtionmaryHelper.SCROLL_AREA_OBJ) as any
data.msg.configId = decodeURIComponent(currentRouter.currentRoute.value.params.id) data.msg.configId = decodeURIComponent(currentRouter.currentRoute.value.params.id)
...@@ -524,6 +554,22 @@ export default defineComponent({ ...@@ -524,6 +554,22 @@ export default defineComponent({
.then(r => { .then(r => {
if (r.data.resultCode == ApiResult.SUCCESS) { if (r.data.resultCode == ApiResult.SUCCESS) {
if (r.data.data) { if (r.data.data) {
data.tripImages = []
if(r.data.data.feature.tripImageList.length>0){
let OtherFile = r.data.data.feature.tripImageList
let header = r.data.data.feature.headerImage
let footer = r.data.data.feature.footerImage
OtherFile.forEach((x,i)=>{
let obj = {
header: header,
page: x,
footer: footer,
}
data.tripImages.push(obj)
})
}
console.log(data.tripImages,'-----')
// tripImageList detailsImageList headerImage footerImage
data.dataList = r.data.data data.dataList = r.data.data
if (data.dataList && data.dataList.dayList && data.dataList.dayList.length > 0) { if (data.dataList && data.dataList.dayList && data.dataList.dayList.length > 0) {
data.dataList.dayList.forEach(item => { data.dataList.dayList.forEach(item => {
...@@ -727,4 +773,8 @@ export default defineComponent({ ...@@ -727,4 +773,8 @@ export default defineComponent({
#setZoom>div{ #setZoom>div{
zoom: calc(100 / 1000) zoom: calc(100 / 1000)
} }
.tripImages-footer{
background: url('../../assets/img/trip/otherBjThree.jpg') repeat;
padding: 115px 0 32px 0;
}
</style> </style>
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