Skip to content

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

no message

parent 31ff93ae
Hide whitespace changes
Inline Side-by-side
Showing with 3177 additions and 71 deletions
src/assets/trip/block/index.css 0 → 100644
View file @ d7adc8d3
.trip-box{
/* width: 1000px; */
margin: 0 auto;
cursor: default;
}
.trip-block{
max-width: 100%;
padding-bottom: 40px;
padding-top: 40px;
border-bottom: #CCC 1px dotted;
}
.trip-block .trip-title {
min-height: 48px;
font-size: 20px;
/* background: #f3f3f3; */
padding:0 10px;
box-sizing: border-box;
color: #333;
font-family: 'PingFangR';
display: flex;
align-items: center;
}
.trip-block .trip-title .day{
width: 136px;
color: #4d4d4d;
font-size: 33px;
font-weight: normal;
letter-spacing: 3px;
}
.trip-block .trip-title p{
margin: 0;
}
.trip-block .trip-title p:nth-child(2){
color: #525252;
}
.trip-block .trip-title .desc{
color: #4d4d4d;
border-left: 1px solid #333;
padding-left: 25px;
height: 100%;
flex:1;
padding: 10px 10px 10px 20px;
}
.trip-block .trip-title .desc i{
font-size: 22px;
margin: 0 10px;
}
.trip-block .block-item{
margin-top: 20px;
}
.trip-block .block-item .item{
transition: box-shadow 250ms ease-out 0s;
font-size: 15px;
line-height: 1.5em;
color: #444;
background: rgba(23,23,23,.05);
box-sizing: border-box;
/* box-shadow: 0 0 12px rgba(0,0,0,0.1) inset; */
-webkit-transition: box-shadow 250ms ease-out 0s;
-moz-transition: box-shadow 250ms ease-out 0s;
-ms-transition: box-shadow 250ms ease-out 0s;
-o-transition: box-shadow 250ms ease-out 0s;
}
.trip-block .block-item .item:hover{
/* box-shadow: 0 0 12px rgba(0,0,0,0.1) inset; */
}
.trip-block .block-item .item h3{
/* margin: 18px 0; */
font-size: 18px;
font-family: 'PingFangR';
font-weight: 400;
color: #222;
position: relative;
z-index: 2;
}
.trip-block .block-item .item .playInfo{
margin-left: -5px;
height: 25px;
}
.playInfo .playInfo-item{
color: gray;
font-size: 12px;
margin-right: 20px;
}
.trip-block .block-item .item .playInfo .playInfo-item span{
display: inline;
}
.trip-block .block-item .item .playInfo .playInfo-item .iconfont{
font-size: 16px;
margin-right: 5px;
}
.trip-block .block-item .item h3 .iconfont{
font-size: 20px;
margin: 0 5px;
vertical-align: middle;
}
.trip-block .block-item .item h4{
position: relative;
width: 86px;
color: #EF4455;
font-size: 18px;
line-height: 20px;
margin: 0;
font-weight: 500;
}
.trip-block .block-item .item.big{
/* display: flex;
flex-direction: column; */
padding: 0px !important;
background: transparent;
}
.trip-block .block-item .item.big .left{
flex: 1;
}
.trip-block .block-item .item.big .left img{
width:100%;
height: 100%;
display: block;
}
.trip-block .block-item .item.big .right{
/* border: 1px solid #ccc; */
padding: 22px;
/* box-sizing: border-box; */
}
.trip-block .block-item .item.big .right .details{
height: 260px;
display: block;
margin-top: 15px;
/* font-size: 16px; */
line-height: 1.5em;
text-align: justify;
color: #444;
word-wrap: break-word;
word-break: break-all;
overflow: hidden;
}
.details span{
}
.trip-block .block-item .item .remark{
padding-left:15px;
font-size: 15px;
flex: 1;
color: #444;
list-style-position: outside;
list-style-type: decimal;
}
.trip-block .block-item .item .up{
padding: 22px;
margin: -22px;
}
.trip-block .block-item .item .up img{
width: 100%;
height: 100%;
}
.trip-block .block-item .item .down{
height: 260px;
overflow: hidden;
}
.trip-block .block-item .item.hor-box{
display: flex;
padding: 0px;
height: 246px;
overflow: hidden;
}
.trip-block .block-item .item.hor-box .remark{
transition: .4s;
padding: 22px;
overflow: hidden;
height: 173px;
}
.trip-block .block-item .item.hor-box .image{
flex: 1;
height: 100%;
}
.trip-block .block-item .item.hor-box .image img{
width: 100%;
/* height: 100%; */
flex: 1;
}
.trip-block .block-item .item .three-item{
height: 197px;
position: relative;
}
.trip-block .block-item .item .three-item:hover .image{
opacity: 1;
filter: alpha(opacity=100);
-moz-opacity: 1;
-webkit-transition: .3s;
transition: .3s;
}
.trip-block .block-item .item .three-item .image{
position: absolute;
-webkit-transition: .3s;
top: -40px;
left: -22px;
bottom: -22px;
right: -22px;
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
transition: .3s;
z-index: 0;
}
.trip-block .block-item .item .three-item .image img{
width: 100%;
height: 100%;
}
.trip-block .block-item .item .three-item:hover span {
opacity: 0;
filter: alpha(opacity=0);
-moz-opacity: 0;
transition: 200ms ease-out;
}
.trip-block .block-item .item .three-item span {
max-height: 151px;
display: inline-block;
overflow: hidden;
}
.trip-block .block-item .item .three-item:hover h3{
color:#f1f1f1;
}
.trip-block .block-item .restaurant{
margin:20px 0;
}
.trip-block .block-item .restaurant .restaurant-item{
display: flex;
}
.trip-block .block-item .restaurant .restaurant-item .key{
width:95px;
}
.trip-block .block-item .restaurant .restaurant-item .key img{
width:80px;
height: 28px;
}
.trip-block .block-item .restaurant .restaurant-item .val{
flex: 1;
font-size: 15px;
min-height: 28px;
color: #666;
line-height: 28px;
cursor: default;
vertical-align: top;
font-family: Roboto, Arial,微軟正黑體修正, 微軟正黑體, "Microsoft JhengHei", sans-serif;
}
.trip-block .flex{
display: flex;
}
.trip-block .block-item .five-box{
display: flex;
margin-bottom: 4px;
}
.trip-block .block-item .five-box .left{
position: relative;
width: 311px;
height: 497px;
overflow: hidden;
margin-right: 4px;
}
.trip-block .block-item .five-box .left .item{
height: 497px;
overflow: hidden;
}
.trip-block .block-item .five-box .left .image img{
width: 100%;
height: 100%;
}
.trip-block .block-item .five-box .left .item{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: transparent;
color: #f1f1f1;
}
.trip-block .block-item .five-box .left .item span{
opacity: 0;
transition: 0.3s;
}
.trip-block .block-item .five-box .left:hover .item{
transition: 0.3s;
background: rgba(0,0,0,0.2);
}
.trip-block .block-item .five-box .left:hover .item span{
opacity: 1;
transition: 0.3s;
color: #f1f1f1;
}
.trip-block .block-item .five-box .left .item h3{
color: #f1f1f1;
background: rgba(0,0,0,0.1)
}
.trip-block .block-item .five-box .right{
flex: 1;
height: 498px;
overflow: hidden;
}
.trip-block .block-item .five-box .right .item{
height: 247px;
overflow: hidden;
}
.trip-block .block-item .five-box .right .item .three-item{
height: 100%;
}
.trip-block .block-item .five-box .right .item .three-item span{
/* height: 137px;
overflow: hidden;
display: inline-block; */
}
.trip-block .block-item .item p{
margin: 0px !important;
padding: 0px !important;
}
.text-bold{
margin: 0;
font-size: 21px;
font-weight: bold;
letter-spacing: 1px;
line-height: 25px;
word-break: break-all;
word-wrap: break-word;
}
\ No newline at end of file
src/components/trip/block/allDay.vue 0 → 100644
View file @ d7adc8d3
<template>
<div class="block-item">
<!-- transition-prev="scale"
transition-next="scale" -->
<!-- transition-prev="slide-right"
transition-next="slide-left" -->
<q-carousel v-model="slide"
transition-prev="slide-right"
transition-next="slide-left"
swipeable animated
control-color="white" infinite height="100%"
class="my-bg-grey text-black shadow-1 no-shadow"
control-type="regular"
:arrows="day.details.length>0?true:false"
control-text-color="primary"
ref="carousel"
navigation
>
<template v-for="(x, i) in day.details">
<q-carousel-slide :name="i" class="column no-wrap">
<div class="bg-white row">
<template
v-if="x.fileType && x.fileType == '.mp4'">
<video
ref="myVideo"
width="100%"
height="246px"
:src="x.videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img
v-if="x.img"
:src="x.img"
:ratio=" 16/9 "
style="width: 100%"
@click="showPreview(day.details,i)"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="one-block q-px-md q-py-lg">
<div class="item big row">
<div class="row no-wrap">
<div class="right col">
<div class="details">
<div
v-if="x.title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="x.title"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
x.playTimeHour || x.playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="x.ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
x.playTimeHour ||
x.playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="x.playTimeHour"
>{{ x.playTimeHour }}小时
</span>
<span v-if="x.playTimeMinutes"
>{{ x.playTimeMinutes }}分钟</span
>
</span>
</div>
<span v-html="x.content"></span>
</div>
</div>
</div>
</div>
</div>
</q-carousel-slide>
</template>
<template v-slot:control>
<template v-if="day.details.length>1">
<q-carousel-control
position="top-right"
:offset="[10,188]"
class="q-gutter-xs"
>
<q-btn
push round dense color="primary" text-color="while" icon="arrow_left"
@click="$refs.carousel.previous()"
/>
<q-btn
push round dense color="primary" text-color="while" icon="arrow_right"
@click="$refs.carousel.next()"
/>
</q-carousel-control>
</template>
</template>
</q-carousel>
</div>
<q-dialog class="no-padding" v-model="showImagePriview" persistent>
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</template>
<script lang="ts">
import ImagePreview from "../../common/ImagePreview.vue";
import { date,useQuasar } from "quasar";
import { inject, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from 'src/config/dictionary'
import scheduledTripService from 'src/api/scheduledTrip'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
export default defineComponent({
components: { ImagePreview },
props: ['day','isDirect'],
setup(props) {
const $router = useRouter()
const { t } = useI18n()
const $q = useQuasar()
let {ctx:that, proxy} = getCurrentInstance()
const data= reactive({
showImagePriview:false,
currentImage:'',
images:[],
day: props.day,
isDirect: props.isDirect,
})
props.day.details.forEach(x=>{
if(x.img){
data.images.push(x.img)
}
})
const methods = {
showImageHandler(url: string) {
data.currentImage = url
data.showImagePriview = true
},
showPreview(imgs, index = 0) {
let timgs = [];
imgs.forEach((x) => {
timgs.push(x.img);
});
that.$viewerApi({
options: {
initialViewIndex: index,
},
images: timgs,
});
},
getHotelSuffix() {
let suffix = "";
if (props.day.jiu2.length > 1) {
if (props.isDirect === 1) {
suffix = "或同級";
}
} else {
if (
props.day.jiu2.length == 1 &&
props.day.jiu2[0].name != "温馨的家" &&
props.day.jiu2[0].name != "机场附近酒店"
) {
if (props.day.jiu2[0].status == 1) {
suffix = "【保证入住】";
} else {
if (props.isDirect === 1) {
suffix = "或同級";
}
}
}
}
return suffix;
},
goUrl(url) {
if (url != null && url.length > 0) {
window.open(url, "_blank");
}
},
}
return {
...toRefs(data),
...methods,
}
}
})
</script>
<style scoped>
.q-carousel__slide{
padding: 0 !important;
}
.q-img__image{
border-style: none !important;
}
</style>
\ No newline at end of file
src/components/trip/block/fiveday.vue 0 → 100644
View file @ d7adc8d3
<style scoped>
@import url('../../../assets/trip/block/index.css');
</style>
<template>
<div class="block-item">
<div class="one-block">
<div class="item big row">
<div class="row no-wrap col-8">
<div class="col-6">
<template
v-if="
day.details[0].fileType && day.details[0].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[0].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[0].img)"
v-if="day.details[0].img"
:src="day.details[0].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[0].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="right col" style="border: 1px solid #ccc; border-left: 0">
<div class="details">
<div
v-if="day.details[0].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[0].title"
@click.stop="goUrl(day.details[0].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[0].playTimeHour || day.details[0].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[0].ticketName != ''"
>
<!--<i class="iconfont icon-menpiao"></i>-->
<!--{{day.details[0].ticketName}}-->
</span>
<span
class="playInfo-item"
v-if="
day.details[0].playTimeHour ||
day.details[0].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[0].playTimeHour"
>{{ day.details[0].playTimeHour }}小时
</span>
<span v-if="day.details[0].playTimeMinutes"
>{{ day.details[0].playTimeMinutes }}分钟</span
>
</span>
</div>
<span v-html="day.details[0].content"></span>
</div>
</div>
</div>
<div
class="col q-pl-sm items-center"
v-if="day.details[1]"
style="overflow: hidden"
>
<div class="left big">
<template
v-if="
day.details[1].fileType && day.details[1].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[1].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[1].img)"
v-if="day.details[1].img"
:src="day.details[1].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[1].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="right" style="border: 1px solid #ccc">
<div class="details">
<div
v-if="day.details[1].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[1].title"
@click.stop="goUrl(day.details[1].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[1].playTimeHour || day.details[1].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[1].ticketName != ''"
>
<!--<i class="iconfont icon-menpiao"></i>-->
<!--{{day.details[1].ticketName}}-->
</span>
<span
class="playInfo-item"
v-if="
day.details[1].playTimeHour ||
day.details[1].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[1].playTimeHour"
>{{ day.details[1].playTimeHour }}小时
</span>
<span v-if="day.details[1].playTimeMinutes"
>{{ day.details[1].playTimeMinutes }}分钟</span
>
</span>
</div>
<span v-html="day.details[1].content"></span>
</div>
</div>
</div>
<div
class="col-12 item row justify-between no-wrap q-mt-sm"
style="background: #f6f6f6"
>
<div class="col-8 row">
<div class="col-6">
<div class="up" style="height: 265px">
<template
v-if="
day.details[2].fileType && day.details[2].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[2].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[2].img)"
v-if="day.details[2].img"
:src="day.details[2].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[2].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div style="border: 1px solid #ccc">
<div
class="down q-ma-lg"
style="height: 260px; overflow: hidden"
>
<div
v-if="day.details[2].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[2].title"
@click.stop="goUrl(day.details[2].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[2].playTimeHour ||
day.details[2].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[2].ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
day.details[2].playTimeHour ||
day.details[2].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[2].playTimeHour"
>{{ day.details[2].playTimeHour }}小时
</span>
<span v-if="day.details[2].playTimeMinutes"
>{{ day.details[2].playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="day.details[2].content"></span>
</div>
</div>
</div>
<div class="col q-pl-sm">
<div class="up" style="height: 265px">
<template
v-if="
day.details[3].fileType && day.details[3].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[2].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[3].img)"
v-if="day.details[3].img"
:src="day.details[3].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[3].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div style="border: 1px solid #ccc">
<div
class="down q-ma-lg"
style="height: 260px; overflow: hidden"
>
<div
v-if="day.details[3].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[3].title"
@click.stop="goUrl(day.details[3].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[3].playTimeHour ||
day.details[3].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[3].ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
day.details[3].playTimeHour ||
day.details[3].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[3].playTimeHour"
>{{ day.details[3].playTimeHour }}小时
</span>
<span v-if="day.details[3].playTimeMinutes"
>{{ day.details[3].playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="day.details[3].content"></span>
</div>
</div>
</div>
</div>
<div class="col q-ml-sm" style="border: 1px solid #ccc">
<div class="up" style="height: 265px">
<template
v-if="
day.details[4].fileType && day.details[4].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[4].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[4].img)"
v-if="day.details[4].img"
:src="day.details[4].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[4].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="down q-ma-lg" style="height: 260px; overflow: hidden">
<div
v-if="day.details[4].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[4].title"
@click.stop="goUrl(day.details[4].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[4].playTimeHour || day.details[4].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[4].ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
day.details[4].playTimeHour ||
day.details[4].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[4].playTimeHour"
>{{ day.details[4].playTimeHour }}小时
</span>
<span v-if="day.details[4].playTimeMinutes"
>{{ day.details[4].playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="day.details[4].content"></span>
</div>
</div>
</div>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if="day.tips.length > 0">
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t, k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div
class="restaurant"
:class="{
'row justify-between wrap': $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_breakfast.png" />
</div>
<div class="val">{{ day.can.breakfirst }}</div>
</div>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_lunch.png" />
</div>
<div class="val">{{ day.can.lanuch }}</div>
</div>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_dinner.png" />
</div>
<div class="val">{{ day.can.dinner }}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24 row">
<div class="key">
<img src="../../../assets/img/daily_hotel-1.png" />
</div>
<div class="val" v-if="day.jiu2.length > 0">
<span
v-for="(t, k) in day.jiu2"
@click.stop="goUrl(t.url)"
style="cursor: pointer"
:key="k"
>
{{ k == day.jiu2.length - 1 ? t.name : t.name + " / " }}
</span>
{{ getHotelSuffix() }}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
<q-dialog class="no-padding" v-model="showImagePriview" persistent>
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</template>
<script lang="ts">
import ImagePreview from "../../common/ImagePreview.vue";
import { date,useQuasar } from "quasar";
import { inject, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from 'src/config/dictionary'
import scheduledTripService from 'src/api/scheduledTrip'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
export default defineComponent({
components: { ImagePreview },
props: ['day','isDirect'],
setup(props) {
const $router = useRouter()
const { t } = useI18n()
const $q = useQuasar()
let {ctx:that, proxy} = getCurrentInstance()
const data= reactive({
showImagePriview:false,
currentImage:'',
images:[],
day: props.day,
isDirect: props.isDirect,
})
props.day.details.forEach(x=>{
if(x.img){
data.images.push(x.img)
}
})
const methods = {
showImageHandler(url: string) {
data.currentImage = url
data.showImagePriview = true
},
showPreview(imgs, index = 0) {
let timgs = [];
imgs.forEach((x) => {
timgs.push(x.img);
});
that.$viewerApi({
options: {
initialViewIndex: index,
},
images: timgs,
});
},
getHotelSuffix() {
let suffix = "";
if (props.day.jiu2.length > 1) {
if (props.isDirect === 1) {
suffix = "或同級";
}
} else {
if (
props.day.jiu2.length == 1 &&
props.day.jiu2[0].name != "温馨的家" &&
props.day.jiu2[0].name != "机场附近酒店"
) {
if (props.day.jiu2[0].status == 1) {
suffix = "【保证入住】";
} else {
if (props.isDirect === 1) {
suffix = "或同級";
}
}
}
}
return suffix;
},
goUrl(url) {
if (url != null && url.length > 0) {
window.open(url, "_blank");
}
},
}
return {
...toRefs(data),
...methods,
}
}
})
</script>
\ No newline at end of file
src/components/trip/block/fourday.vue 0 → 100644
View file @ d7adc8d3
<style scoped>
@import url('../../../assets/trip/block/index.css');
</style>
<template>
<div class="block-item">
<div class="one-block">
<div class="item big row items-center">
<div class="row no-wrap col-12">
<div class="col" style="position: relative; top: 0; left: 0">
<template
v-if="
day.details[0].fileType && day.details[0].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[0].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[0].img)"
v-if="day.details[0].img"
:src="day.details[0].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[0].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div
class="right col-4"
style="border: 1px solid #ccc; border-left: 0"
>
<div class="details">
<div
v-if="day.details[0].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[0].title"
@click.stop="goUrl(day.details[0].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[0].playTimeHour || day.details[0].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[0].ticketName != ''"
>
<!--<i class="iconfont icon-menpiao"></i>-->
<!--{{day.details[0].ticketName}}-->
</span>
<span
class="playInfo-item"
v-if="
day.details[0].playTimeHour ||
day.details[0].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[0].playTimeHour"
>{{ day.details[0].playTimeHour }}小时
</span>
<span v-if="day.details[0].playTimeMinutes"
>{{ day.details[0].playTimeMinutes }}分钟</span
>
</span>
</div>
<span v-html="day.details[0].content"></span>
</div>
</div>
</div>
<div
class="col-12 item row justify-between no-wrap q-mt-sm"
style="background: #f6f6f6"
>
<div
class="col row no-wrap"
style="position: relative; top: 0; left: 0"
>
<div class="col-6" style="border: 1px solid #ccc">
<div class="up" style="height: 260px">
<template
v-if="
day.details[1].fileType && day.details[1].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[1].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[1].img)"
v-if="day.details[1].img"
:src="day.details[1].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[1].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="down q-ma-lg">
<div
v-if="day.details[1].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[1].title"
@click.stop="goUrl(day.details[1].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[1].playTimeHour ||
day.details[1].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[1].ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
day.details[1].playTimeHour ||
day.details[1].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[1].playTimeHour"
>{{ day.details[1].playTimeHour }}小时
</span>
<span v-if="day.details[1].playTimeMinutes"
>{{ day.details[1].playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="day.details[1].content"></span>
</div>
</div>
<div class="col q-ml-sm" style="border: 1px solid #ccc">
<div class="up" style="height: 260px">
<template
v-if="
day.details[2].fileType && day.details[2].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[2].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[2].img)"
v-if="day.details[2].img"
:src="day.details[2].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[2].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="down q-ma-lg">
<div
v-if="day.details[2].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[2].title"
@click.stop="goUrl(day.details[2].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[2].playTimeHour ||
day.details[2].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[2].ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
day.details[2].playTimeHour ||
day.details[2].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[2].playTimeHour"
>{{ day.details[2].playTimeHour }}小时
</span>
<span v-if="day.details[2].playTimeMinutes"
>{{ day.details[2].playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="day.details[2].content"></span>
</div>
</div>
</div>
<div class="col-4">
<div class="q-ml-sm" style="border: 1px solid #ccc">
<div class="up" style="height: 260px">
<template
v-if="
day.details[3].fileType && day.details[3].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[3].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[3].img)"
v-if="day.details[3].img"
:src="day.details[3].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[3].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="down q-ma-lg">
<div
v-if="day.details[3].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[3].title"
@click.stop="goUrl(day.details[3].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[3].playTimeHour ||
day.details[3].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[3].ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
day.details[3].playTimeHour ||
day.details[3].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[3].playTimeHour"
>{{ day.details[3].playTimeHour }}小时
</span>
<span v-if="day.details[3].playTimeMinutes"
>{{ day.details[3].playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="day.details[3].content"></span>
</div>
</div>
</div>
</div>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if="day.tips.length > 0">
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t, k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div
class="restaurant"
:class="{
'row justify-between wrap': $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_breakfast.png" />
</div>
<div class="val">{{ day.can.breakfirst }}</div>
</div>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_lunch.png" />
</div>
<div class="val">{{ day.can.lanuch }}</div>
</div>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_dinner.png" />
</div>
<div class="val">{{ day.can.dinner }}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24 row">
<div class="key">
<img src="../../../assets/img/daily_hotel-1.png" />
</div>
<div class="val" v-if="day.jiu2.length > 0">
<span
v-for="(t, k) in day.jiu2"
@click.stop="goUrl(t.url)"
style="cursor: pointer"
:key="k"
>
{{ k == day.jiu2.length - 1 ? t.name : t.name + " / " }}
</span>
{{ getHotelSuffix() }}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
<q-dialog class="no-padding" v-model="showImagePriview" persistent>
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</template>
<script lang="ts">
import ImagePreview from "../../common/ImagePreview.vue";
import { date,useQuasar } from "quasar";
import { inject, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from 'src/config/dictionary'
import scheduledTripService from 'src/api/scheduledTrip'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
export default defineComponent({
components: { ImagePreview },
props: ['day','isDirect'],
setup(props) {
const $router = useRouter()
const { t } = useI18n()
const $q = useQuasar()
let {ctx:that, proxy} = getCurrentInstance()
const data= reactive({
showImagePriview:false,
currentImage:'',
images:[],
day: props.day,
isDirect: props.isDirect,
})
props.day.details.forEach(x=>{
if(x.img){
data.images.push(x.img)
}
})
const methods = {
showImageHandler(url: string) {
data.currentImage = url
data.showImagePriview = true
},
showPreview(imgs, index = 0) {
let timgs = [];
imgs.forEach((x) => {
timgs.push(x.img);
});
that.$viewerApi({
options: {
initialViewIndex: index,
},
images: timgs,
});
},
getHotelSuffix() {
let suffix = "";
if (props.day.jiu2.length > 1) {
if (props.isDirect === 1) {
suffix = "或同級";
}
} else {
if (
props.day.jiu2.length == 1 &&
props.day.jiu2[0].name != "温馨的家" &&
props.day.jiu2[0].name != "机场附近酒店"
) {
if (props.day.jiu2[0].status == 1) {
suffix = "【保证入住】";
} else {
if (props.isDirect === 1) {
suffix = "或同級";
}
}
}
}
return suffix;
},
goUrl(url) {
if (url != null && url.length > 0) {
window.open(url, "_blank");
}
},
}
return {
...toRefs(data),
...methods,
}
}
})
</script>
src/components/trip/block/index.vue 0 → 100644
View file @ d7adc8d3
<style scoped>
@import url('../../../assets/trip/block/index.css');
.fz15{
font-size: 15px;
}
.fz28{
font-size: 28px;
}
</style>
<template>
<div class="trip-box">
<div :class="{'trip-block':$q.platform.is.desktop,'q-pb-lg':$q.platform.is.mobile,'q-pt-lg':$q.platform.is.mobile&&i==0}" v-for="(item,i) in trips" :key="i" :id="`days_${i}`">
<template v-if="$q.platform.is.desktop">
<div class="trip-title">
<div>
<p class="day">第<span v-if='item.dayNum<10'>0</span>{{item.dayNum}}天</p>
<!-- <p>{{item.dateTime}}</p> -->
</div>
<div class="desc" v-html="item.title"></div>
</div>
<oneday v-if="item.details && item.details.length==1" :day='item' :isDirect="isDirect"></oneday>
<twoday v-if="item.details && item.details.length==2" :day='item' :isDirect="isDirect"></twoday>
<threeday v-if="item.details && item.details.length==3" :day='item' :isDirect="isDirect"></threeday>
<fourday v-if="item.details && item.details.length==4" :day='item' :isDirect="isDirect"></fourday>
<fiveday v-if="item.details && item.details.length>=5" :day='item' :isDirect="isDirect"></fiveday>
</template>
<template v-else>
<div>
<div class="bg-grey-3 q-px-lg q-py-md">
<div>
<div class="fz28 text-light-blue-6">第 <span class="fz28" style="font-weight: bold;"><span v-if='item.dayNum<10'>0</span>{{item.dayNum}}</span> 天</div>
<!-- <p>{{item.dateTime}}</p> -->
</div>
<div class="fz15 q-py-sm text-grey-8" v-html="item.title"></div>
</div>
<allDay :day='item' :isDirect="isDirect"></allDay>
</div>
</template>
</div>
</div>
</template>
<script lang="ts">
import oneday from './oneday.vue'
import twoday from './twoday.vue'
import threeday from './threeday.vue'
import fourday from './fourday.vue'
import fiveday from './fiveday.vue'
import allDay from './allDay.vue'
import { date,useQuasar } from "quasar";
import { inject, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance,nextTick } from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from 'src/config/dictionary'
import scheduledTripService from 'src/api/scheduledTrip'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
export default defineComponent({
components: { allDay,oneday,twoday,threeday,fourday,fiveday },
props: ['tripList', 'isDirect', 'clickDate','days','currentHeightDay'],
setup(props,context) {
const $router = useRouter()
const { t } = useI18n()
const $q = useQuasar()
let {ctx:that, proxy} = getCurrentInstance()
const data= reactive({
tripList: props.tripList,
isDirect: props.isDirect,
clickDate: props.clickDate,
currentHeightDay: props.currentHeightDay,
isReady: false,
trips: [],
daysClass: []
})
watch(()=>props.days,(n,o)=>{
if (n) {
data.daysClass = n
nextTick(()=>{
try{
data.daysClass.forEach((x,i)=>{
var object=document.querySelector(`#days_${i}`);
x.top = object.getBoundingClientRect().top+400
})
} catch (error) {
console.log('----异常')
}
setTimeout(()=>{
context.emit('getTopNum',JSON.stringify(data.daysClass))
},1000)
})
that.$forceUpdate()
}
},{deep: true})
watch(()=>props.clickDate,(n,o)=>{
if (val) {
data.trips.forEach((x, index) => {
x.dateTime = methods.setDate(index);
})
that.$forceUpdate()
}
},{deep: true})
const methods = {
init() {
data.tripList.forEach((x, j) => {
let useDinnerTypeBy = ''
let jin = [],
jiu = [],
jiu2 = [],
jiao = [],
dadian = [],
tips = [],
activy = [],
can = {
breakfirst: '敬请自理',
lanuch: '敬请自理',
dinner: '敬请自理'
}
x.dayArray.forEach((y, index) => {
if (y.type == 7 && y.childItem.title != '') {
let obj = {
title: y.childItem.title,
content: y.childItem.description,
img: y.childItem.imaArray && y.childItem.imaArray.length > 0 ? y
.childItem.imaArray[0].url : '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null,
url: ''
}
dadian.push(obj)
} else if (y.type == 1 && y.childItem.subTraffic.length > 0) {
let title = ''
y.childItem.subTraffic.forEach((z, i) => {
title += z.startCityName
if (z.arrivalType == 1) {
title += '<i class="iconfont icon-feiji"></i>'
} else if (z.arrivalType == 2) {
title += '<i class="iconfont icon-bus"></i>'
} else if (z.arrivalType == 3) {
title += '<i class="iconfont icon-icon31"></i>'
} else {
title += '<i class="iconfont icon-gaotiedongche"></i>'
}
if (i + 1 == y.childItem.subTraffic.length) {
title += z.arrivalCityName
}
})
let obj = {
title: title,
content: y.childItem.description,
img: '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null,
url: ''
}
jiao.push(obj)
} else if (y.type == 2 && y.childItem.imaArray.length > 0) {
let obj = {
title: y.childItem.couponsName,
content: y.childItem.description,
img: y.childItem.imaArray[0].url,
ticketName: y.childItem.couponsTicketName,
playTimeHour: y.childItem.playTimeHour,
playTimeMinutes: y.childItem.playTimeMinutes,
url: y.childItem.url,
scenicJson: y.childItem.scenicJson,
videoPath: y.childItem.imaArray[0].videoPath,
fileType: y.childItem.imaArray[0].fileType,
}
jin.push(obj)
} else if (y.type == 3 && y.childItem.hotelName != '' && y.childItem.imaArray
.length > 0) {
let obj = {
title: y.childItem.hotelName,
content: y.childItem.description,
img: y.childItem.imaArray[0].url,
ticketName: '',
playTimeHour: null,
playTimeMinutes: null,
url: y.childItem.url
}
jiu.push(obj)
} else if (y.type == 4) {
if (y.childItem.useDinnerType == "1") {
can.breakfirst = y.childItem.dinnerName
} else if (y.childItem.useDinnerType == "2") {
can.lanuch = y.childItem.dinnerName
} else if (y.childItem.useDinnerType == "3") {
can.dinner = y.childItem.dinnerName
}
} else if (y.type == 5) {
let obj = {
title: '自由活动',
content: y.childItem.description,
img: '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null,
url: ''
}
activy.push(obj)
} else if (y.type == 6) {
let obj = {
title: y.childItem.title,
content: y.childItem.description,
img: '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null,
url: ''
}
tips.push(obj)
}
if (y.type == 3) {
jiu2.push({
name: y.childItem.hotelName,
url: y.childItem.url,
status:y.childItem.status
});
useDinnerTypeBy = y.childItem.useDinnerType
}
})
if (can.breakfirst == '敬请自理' && useDinnerTypeBy.indexOf('1') != -1) {
can.breakfirst = '酒店内享用早餐'
} else if (can.breakfirst == '') {
can.breakfirst = '方便游玩敬请自理'
}
if (can.lanuch == '敬请自理' && useDinnerTypeBy.indexOf('2') != -1) {
can.lanuch = '酒店自助'
} else if (can.lanuch == '') {
can.lanuch = '方便游玩敬请自理'
}
if (can.dinner == '敬请自理' && useDinnerTypeBy.indexOf('3') != -1) {
can.dinner = '酒店自助'
} else if (can.dinner == '') {
can.dinner = '方便游玩敬请自理'
}
x.can = can
let details = [];
x.tips = tips
x.jiu2 = jiu2
if (jin.length > 0) {
details = jin
} else if (jiu.length > 0) {
details = jiu
} else if (dadian.length > 0) {
details = dadian
} else if (jiao.length > 0) {
if (j == data.tripList.length - 1) {
let obj = {
title: '温暖的家',
content: '感谢您参加本次行程，期待下次与您相遇',
img: ''
}
details.push(obj)
} else {
details = jiao
}
} else if (activy.length > 0) {
details = activy
}
x.title = dadian.length > 0 && dadian[0].title && dadian[0].title != '' ? dadian[0].title :
(jiao.length > 0 ? jiao[0].title : '集合出发')
x.details = details
if (x.details.length == 0) {
if (j == 0) {
let obj = {
title: '集合出发',
content: '向着远方的目标出发起飞',
img: '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null
}
details.push(obj)
} else if (j == this.tripList.length - 1) {
let obj = {
title: '温暖的家',
content: '感谢您参加本次行程，期待下次与您相遇',
img: '',
ticketName: '',
playTimeHour: null,
playTimeMinutes: null
}
details.push(obj)
}
} else {
if (x.title == '集合出发') {
x.details.forEach(xc => {
if (xc.title !== undefined)
x.title = xc.title + '~'
})
if (x.title == '集合出发') {
if (j > 0 && j < tripList.length - 1)
x.title = '自由活动'
} else {
x.title = x.title.substring(0, x.title.length - 1)
}
}
}
x.islast = (j + 1) == data.tripList.length
data.tripList[j] = x
x.dateTime = methods.setDate(j);
})
data.tripList.forEach(x=>{
x.dayArray.forEach(y=>{
// console.log(x.details,'----------')
})
})
data.trips = data.tripList
},
setDate (j) {
if (j === 0) {
return data.clickDate
} else {
let d = new Date(data.clickDate)
d = d.getTime(d);
let add = d + ((24 * 60 * 60 * 1000) * j)
let date = new Date(add); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
let Y = date.getFullYear() + '-';
let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
let D = date.getDate() < 10 ? ('0' + date.getDate()) + ' ' : date.getDate() + ' ';
return Y + M + D;
}
},
}
methods.init()
return {
...toRefs(data),
...methods,
}
}
})
</script>
\ No newline at end of file
src/components/trip/block/oneday.vue 0 → 100644
View file @ d7adc8d3
<style scoped>
@import url('../../../assets/trip/block/index.css');
</style>
<template>
<div class="block-item">
<div class="one-block">
<div class="item big row">
<div
class="row no-wrap"
:class="{
'col-8': day.details.length > 1,
col: day.details.length == 1,
}"
>
<div class="col-7">
<template
v-if="
day.details[0].fileType && day.details[0].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[0].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[0].img)"
v-if="day.details[0].img"
:src="day.details[0].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[0].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="right col" style="border: 1px solid #ccc; border-left: 0">
<div class="details">
<div
v-if="day.details[0].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[0].title"
@click.stop="goUrl(day.details[0].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[0].playTimeHour || day.details[0].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[0].ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
day.details[0].playTimeHour ||
day.details[0].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[0].playTimeHour"
>{{ day.details[0].playTimeHour }}小时
</span>
<span v-if="day.details[0].playTimeMinutes"
>{{ day.details[0].playTimeMinutes }}分钟</span
>
</span>
</div>
<span v-html="day.details[0].content"></span>
</div>
</div>
</div>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if="day.tips.length > 0">
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t, k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div
class="restaurant"
:class="{
'row justify-between wrap': $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_breakfast.png" />
</div>
<div class="val">{{ day.can.breakfirst }}</div>
</div>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_lunch.png" />
</div>
<div class="val">{{ day.can.lanuch }}</div>
</div>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_dinner.png" />
</div>
<div class="val">{{ day.can.dinner }}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24 row">
<div class="key">
<img src="../../../assets/img/daily_hotel-1.png" />
</div>
<div class="val" v-if="day.jiu2.length > 0">
<span
v-for="(t, k) in day.jiu2"
@click.stop="goUrl(t.url)"
style="cursor: pointer"
:key="k"
>
{{ k == day.jiu2.length - 1 ? t.name : t.name + " / " }}
</span>
{{ getHotelSuffix() }}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
<q-dialog class="no-padding" v-model="showImagePriview" persistent>
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</template>
<script lang="ts">
import ImagePreview from "../../common/ImagePreview.vue";
import { date,useQuasar } from "quasar";
import { inject, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from 'src/config/dictionary'
import scheduledTripService from 'src/api/scheduledTrip'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
export default defineComponent({
components: { ImagePreview },
props: ['day','isDirect'],
setup(props) {
const $router = useRouter()
const { t } = useI18n()
const $q = useQuasar()
let {ctx:that, proxy} = getCurrentInstance()
const data= reactive({
showImagePriview:false,
currentImage:'',
images:[],
day: props.day,
isDirect: props.isDirect,
})
props.day.details.forEach(x=>{
if(x.img){
data.images.push(x.img)
}
})
const methods = {
showImageHandler(url: string) {
data.currentImage = url
data.showImagePriview = true
},
showPreview(imgs, index = 0) {
let timgs = [];
imgs.forEach((x) => {
timgs.push(x.img);
});
that.$viewerApi({
options: {
initialViewIndex: index,
},
images: timgs,
});
},
getHotelSuffix() {
let suffix = "";
if (props.day.jiu2.length > 1) {
if (props.isDirect === 1) {
suffix = "或同級";
}
} else {
if (
props.day.jiu2.length == 1 &&
props.day.jiu2[0].name != "温馨的家" &&
props.day.jiu2[0].name != "机场附近酒店"
) {
if (props.day.jiu2[0].status == 1) {
suffix = "【保证入住】";
} else {
if (props.isDirect === 1) {
suffix = "或同級";
}
}
}
}
return suffix;
},
goUrl(url) {
if (url != null && url.length > 0) {
window.open(url, "_blank");
}
},
}
return {
...toRefs(data),
...methods,
}
}
})
</script>
src/components/trip/block/threeday.vue 0 → 100644
View file @ d7adc8d3
<style scoped>
@import url('../../../assets/trip/block/index.css');
</style>
<template>
<div class="block-item">
<div class="two-block">
<div class="column">
<div class="item col row no-wrap" style="background: #f6f6f6">
<div class="up col-8">
<template
v-if="
day.details[0].fileType && day.details[0].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="item.videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[0].img)"
v-if="day.details[0].img"
:src="day.details[0].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[0].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="row items-end" style="border: 1px solid #ccc; left: 0">
<div class="q-pb-lg">
<div class="down q-pa-lg col">
<div
v-if="day.details[0].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[0].title"
@click.stop="goUrl(day.details[0].url)"
style="
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
"
></div>
<div
class="playInfo"
v-if="
day.details[0].playTimeHour ||
day.details[0].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[0].ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
day.details[0].playTimeHour ||
day.details[0].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[0].playTimeHour"
>{{ day.details[0].playTimeHour }}小时
</span>
<span v-if="day.details[0].playTimeMinutes"
>{{ day.details[0].playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="day.details[0].content"></span>
</div>
</div>
</div>
</div>
<div class="item q-mt-sm col row no-wrap" style="background: #f6f6f6">
<div class="up row">
<div class="col" style="border: 1px solid #ccc; right: 0">
<div class="down q-ma-lg col">
<div
v-if="day.details[1].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[1].title"
@click.stop="goUrl(day.details[1].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[1].playTimeHour ||
day.details[1].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[1].ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
day.details[1].playTimeHour ||
day.details[1].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[1].playTimeHour"
>{{ day.details[1].playTimeHour }}小时
</span>
<span v-if="day.details[1].playTimeMinutes"
>{{ day.details[1].playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="day.details[1].content"></span>
</div>
</div>
<div class="col-8">
<template
v-if="
day.details[1].fileType && day.details[1].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[1].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[1].img)"
v-if="day.details[1].img"
:src="day.details[1].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[1].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
</div>
</div>
<div class="item col row no-wrap q-mt-sm" style="background: #f6f6f6">
<div class="up col-8">
<template
v-if="
day.details[2].fileType && day.details[2].fileType == '.mp4'
"
>
<video
ref="myVideo"
width="100%"
height="100%"
:src="day.details[2].videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(day.details[2].img)"
v-if="day.details[2].img"
:src="day.details[2].img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(day.details[2].img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="row items-end" style="border: 1px solid #ccc; left: 0">
<div class="q-pb-lg">
<div class="down q-pa-lg col">
<div
v-if="day.details[2].title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="day.details[2].title"
@click.stop="goUrl(day.details[2].url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="
day.details[2].playTimeHour ||
day.details[2].playTimeMinutes
"
>
<span
class="playInfo-item"
v-if="day.details[2].ticketName != ''"
>
</span>
<span
class="playInfo-item"
v-if="
day.details[2].playTimeHour ||
day.details[2].playTimeMinutes
"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="day.details[2].playTimeHour"
>{{ day.details[0].playTimeHour }}小时
</span>
<span v-if="day.details[2].playTimeMinutes"
>{{ day.details[0].playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="day.details[2].content"></span>
</div>
</div>
</div>
</div>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if="day.tips.length > 0">
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t, k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div
class="restaurant"
:class="{
'row justify-between wrap': $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_breakfast.png" />
</div>
<div class="val">{{ day.can.breakfirst }}</div>
</div>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_lunch.png" />
</div>
<div class="val">{{ day.can.lanuch }}</div>
</div>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_dinner.png" />
</div>
<div class="val">{{ day.can.dinner }}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24 row">
<div class="key">
<img src="../../../assets/img/daily_hotel-1.png" />
</div>
<div class="val" v-if="day.jiu2.length > 0">
<span
v-for="(t, k) in day.jiu2"
@click.stop="goUrl(t.url)"
style="cursor: pointer"
:key="k"
>
{{ k == day.jiu2.length - 1 ? t.name : t.name + " / " }}
</span>
{{ getHotelSuffix() }}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
<q-dialog class="no-padding" v-model="showImagePriview" persistent>
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</template>
<script lang="ts">
import ImagePreview from "../../common/ImagePreview.vue";
import { date,useQuasar } from "quasar";
import { inject, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from 'src/config/dictionary'
import scheduledTripService from 'src/api/scheduledTrip'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
export default defineComponent({
components: { ImagePreview },
props: ['day','isDirect'],
setup(props) {
const $router = useRouter()
const { t } = useI18n()
const $q = useQuasar()
let {ctx:that, proxy} = getCurrentInstance()
const data= reactive({
showImagePriview:false,
currentImage:'',
images:[],
day: props.day,
isDirect: props.isDirect,
})
props.day.details.forEach(x=>{
if(x.img){
data.images.push(x.img)
}
})
const methods = {
showImageHandler(url: string) {
data.currentImage = url
data.showImagePriview = true
},
showPreview(imgs, index = 0) {
let timgs = [];
imgs.forEach((x) => {
timgs.push(x.img);
});
that.$viewerApi({
options: {
initialViewIndex: index,
},
images: timgs,
});
},
getHotelSuffix() {
let suffix = "";
if (props.day.jiu2.length > 1) {
if (props.isDirect === 1) {
suffix = "或同級";
}
} else {
if (
props.day.jiu2.length == 1 &&
props.day.jiu2[0].name != "温馨的家" &&
props.day.jiu2[0].name != "机场附近酒店"
) {
if (props.day.jiu2[0].status == 1) {
suffix = "【保证入住】";
} else {
if (props.isDirect === 1) {
suffix = "或同級";
}
}
}
}
return suffix;
},
goUrl(url) {
if (url != null && url.length > 0) {
window.open(url, "_blank");
}
},
}
return {
...toRefs(data),
...methods,
}
}
})
</script>
src/components/trip/block/twoday.vue 0 → 100644
View file @ d7adc8d3
<style scoped>
@import url('../../../assets/trip/block/index.css');
</style>
<template>
<div class="block-item">
<div class="two-block">
<div class="column">
<template v-for="(item, index) in day.details">
<div
v-if="index < 1"
class="item"
:key="item.dayNum"
:class="{
col: index == 0,
'row no-wrap': index == 0,
'q-ml-sm': index == 1,
}"
style="background: #f6f6f6"
>
<div
class="up"
:class="{ 'col-8': day.details.length > 1 && index == 0 }"
:style="{ height: index == 1 ? '265px' : '' }"
>
<template v-if="item.fileType && item.fileType == '.mp4'">
<video
ref="myVideo"
width="100%"
height="100%"
:src="item.videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(item.img)"
v-if="item.img"
:src="item.img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(item.img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
<div class="row items-end" style="border: 1px solid #ccc; left: 0">
<div class="q-pb-lg">
<div class="down q-pa-lg" :class="{ col: index == 0 }">
<div
v-if="item.title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="item.title"
@click.stop="goUrl(item.url)"
style="
cursor: pointer;
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
"
></div>
<div
class="playInfo"
v-if="item.playTimeHour || item.playTimeMinutes"
>
<span class="playInfo-item" v-if="item.ticketName != ''">
</span>
<span
class="playInfo-item"
v-if="item.playTimeHour || item.playTimeMinutes"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="item.playTimeHour"
>{{ item.playTimeHour }}小时
</span>
<span v-if="item.playTimeMinutes"
>{{ item.playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="item.content"></span>
</div>
</div>
</div>
</div>
</template>
<template v-for="(item, index) in day.details">
<div
v-if="index == 1"
class="item up q-mt-sm row no-wrap col"
:key="item.dayNum"
style="background: #f6f6f6"
>
<div class="col q-pa-lg" style="border: 1px solid #ccc; right: 0">
<div class="down" :class="{ col: index == 0 }">
<div
v-if="item.title != ''"
class="text-h6 text-bold q-pb-sm"
v-html="item.title"
@click.stop="goUrl(item.url)"
style="cursor: pointer"
></div>
<div
class="playInfo"
v-if="item.playTimeHour || item.playTimeMinutes"
>
<span class="playInfo-item" v-if="item.ticketName != ''">
</span>
<span
class="playInfo-item"
v-if="item.playTimeHour || item.playTimeMinutes"
>
<i class="iconfont icon-shijian1"></i>
约
<span v-if="item.playTimeHour"
>{{ item.playTimeHour }}小时
</span>
<span v-if="item.playTimeMinutes"
>{{ item.playTimeMinutes }}分钟
</span>
</span>
</div>
<span v-html="item.content"></span>
</div>
</div>
<div class="col-8">
<template v-if="item.fileType && item.fileType == '.mp4'">
<video
ref="myVideo"
width="100%"
height="100%"
:src="item.videoPath"
controls="controls"
></video>
</template>
<template v-else>
<q-img @click="showImageHandler(item.img)"
v-if="item.img"
:src="item.img"
:ratio=" 16/9 "
fit="cover"
height="100%"
>
<template v-slot:error>
<div
class="absolute-full flex flex-center bg-blue-1 text-dark"
>
图片加载失败
</div>
</template>
</q-img>
<q-img @click="showImageHandler(item.img)"
v-else
src="../../../assets/img/nll.jpg"
:ratio=" 16/9 "
fit="cover"
height="100%"
></q-img>
</template>
</div>
</div>
</template>
</div>
<div class="item flex q-mt-sm q-pa-lg" v-if="day.tips.length > 0">
<h4>温馨提示</h4>
<div class="remark">
<span v-for="(t, k) in day.tips" :key="k" v-html="t.content"></span>
</div>
</div>
<div
class="restaurant"
:class="{
'row justify-between wrap': $q.platform.is.desktop,
column: $q.platform.is.mobile,
}"
>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_breakfast.png" />
</div>
<div class="val">{{ day.can.breakfirst }}</div>
</div>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_lunch.png" />
</div>
<div class="val">{{ day.can.lanuch }}</div>
</div>
<div class="restaurant-item">
<div class="key">
<img src="../../../assets/img/daily_dinner.png" />
</div>
<div class="val">{{ day.can.dinner }}</div>
</div>
</div>
<div class="restaurant">
<div class="restaurant-item col-24 row">
<div class="key">
<img src="../../../assets/img/daily_hotel-1.png" />
</div>
<div class="val" v-if="day.jiu2.length > 0">
<span
v-for="(t, k) in day.jiu2"
@click.stop="goUrl(t.url)"
style="cursor: pointer"
:key="k"
>
{{ k == day.jiu2.length - 1 ? t.name : t.name + " / " }}
</span>
{{ getHotelSuffix() }}
</div>
<div class="val" v-else>本日无酒店安排</div>
</div>
</div>
</div>
</div>
<q-dialog class="no-padding" v-model="showImagePriview" persistent>
<image-preview :current="currentImage" :images="images"></image-preview>
</q-dialog>
</template>
<script lang="ts">
import ImagePreview from "../../common/ImagePreview.vue";
import { date,useQuasar } from "quasar";
import { inject, reactive, toRefs, defineComponent,onMounted,ref,watch, getCurrentInstance } from 'vue';
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from 'src/config/dictionary'
import scheduledTripService from 'src/api/scheduledTrip'
import { ApiResult } from 'src/@types/enumHelper'
import message from 'src/utils/message'
export default defineComponent({
components: { ImagePreview },
props: ['day','isDirect'],
setup(props) {
const $router = useRouter()
const { t } = useI18n()
const $q = useQuasar()
let {ctx:that, proxy} = getCurrentInstance()
const data= reactive({
showImagePriview:false,
currentImage:'',
images:[],
day: props.day,
isDirect: props.isDirect,
})
props.day.details.forEach(x=>{
if(x.img){
data.images.push(x.img)
}
})
const methods = {
showImageHandler(url: string) {
console.log(url,'------')
data.currentImage = url
data.showImagePriview = true
},
showPreview(imgs, index = 0) {
let timgs = [];
imgs.forEach((x) => {
timgs.push(x.img);
});
that.$viewerApi({
options: {
initialViewIndex: index,
},
images: timgs,
});
},
getHotelSuffix() {
let suffix = "";
if (props.day.jiu2.length > 1) {
if (props.isDirect === 1) {
suffix = "或同級";
}
} else {
if (
props.day.jiu2.length == 1 &&
props.day.jiu2[0].name != "温馨的家" &&
props.day.jiu2[0].name != "机场附近酒店"
) {
if (props.day.jiu2[0].status == 1) {
suffix = "【保证入住】";
} else {
if (props.isDirect === 1) {
suffix = "或同級";
}
}
}
}
return suffix;
},
goUrl(url) {
if (url != null && url.length > 0) {
window.open(url, "_blank");
}
},
}
return {
...toRefs(data),
...methods,
}
}
})
</script>
src/components/trip/orderPreview.vue
View file @ d7adc8d3
......@@ -12,12 +12,19 @@
</div>
<div class="text-grey-6 f12 q-my-md">選擇數量</div>
<div class="row items-end">
<div class="col">
<span class="text-subtitle2 text-weight-bold">成人</span>
<span class="text-grey-6 f12 q-ml-sm">(12-99歲)</span>
<div class="col" :class="{'column':$q.platform.is.mobile}">
<div>
<span class="text-subtitle2 text-weight-bold">成人</span>
<span class="text-grey-6 f12 q-ml-sm">(12-99歲)</span>
</div>
<div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.originalB2CPrice, 0) }} /每人
</span>
</div>
</div>
<div class="row items-end">
<span class="text-grey-7 product-price" style="font-size: 13px">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.originalB2CPrice, 0) }} /每人
</span>
<q-input
......@@ -59,12 +66,20 @@
</div>
</div>
<div class="row items-end q-mt-md" v-if="p.isSupportChildren == 1">
<div class="col">
<span class="text-subtitle2 text-weight-bold">儿童</span>
<div class="col" :class="{'column':$q.platform.is.mobile}">
<div>
<span class="text-subtitle2 text-weight-bold">儿童</span>
<span class="text-grey-6 f12 q-ml-sm">(2-11歲,不占床)</span>
</div>
<div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px">
CNY
{{ moneyFormat(p.originalB2CPrice - p.childNoNeedPrice, 0) }} /每人
</span>
</div>
</div>
<div class="row items-end">
<span class="text-grey-7 product-price" style="font-size: 13px">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY
{{ moneyFormat(p.originalB2CPrice - p.childNoNeedPrice, 0) }} /每人
</span>
......@@ -108,12 +123,19 @@
</div>
<div class="row items-end q-mt-md" v-if="p.isSupportChildren == 1">
<div class="col">
<span class="text-subtitle2 text-weight-bold">婴儿</span>
<span class="text-grey-6 f12 q-ml-sm">(2歲以下)</span>
<div class="col" :class="{'column':$q.platform.is.mobile}">
<div>
<span class="text-subtitle2 text-weight-bold">婴儿</span>
<span class="text-grey-6 f12 q-ml-sm">(2歲以下)</span>
</div>
<div v-if="$q.platform.is.mobile">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.babyPrice, 0) }} /每人
</span>
</div>
</div>
<div class="row items-end">
<span class="text-grey-7 product-price" style="font-size: 13px">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.babyPrice, 0) }} /每人
</span>
<q-input
......@@ -164,12 +186,19 @@
>
<div class="text-grey-6 f12">單房服務</div>
<div class="row items-end">
<div class="col">
<span class="text-subtitle2 text-weight-bold">單房服務</span>
<span class="text-grey-6 f12 q-ml-sm">(獨立單間住宿)</span>
<div class="col" :class="{'column':$q.platform.is.mobile}">
<div>
<span class="text-subtitle2 text-weight-bold">單房服務</span>
<span class="text-grey-6 f12 q-ml-sm">(獨立單間住宿)</span>
</div>
<div v-if="$q.platform.is.mobile">
<span class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.singleRoomPrice, 0) }} /每人
</span>
</div>
</div>
<div class="row items-end">
<span class="text-grey-7 product-price" style="font-size: 13px">
<span v-if="$q.platform.is.desktop" class="text-grey-7 product-price" style="font-size: 13px">
CNY {{ moneyFormat(p.singleRoomPrice, 0) }} /每人
</span>
<q-input
......@@ -226,7 +255,7 @@
<span class="text-h6 text-primary product-price">CNY {{ moneyFormat(sumPrice,0) }}</span>
</div>
<div class="q-mt-md text-right">
<span class="q-mr-lg f12 text-negative" v-if="!p.startDate" >請選擇左側的出行日期</span>
<span class="q-mr-lg f12 text-negative" v-if="!p.startDate" >{{$q.platform.is.mobile?'請選擇上面的出行日期':'請選擇左側的出行日期'}} </span>
<q-btn color="primary" label="立即訂購" unelevated class="q-px-lg" :disable="sumPrice==0"/>
</div>
</div>
......
src/components/trip/smaple.vue
View file @ d7adc8d3
......@@ -2,40 +2,49 @@
<div class="q-mt-md">
<div class="text-subtitle2 text-weight-bold">產品概要</div>
<div class="row q-pt-md q-col-gutter-md">
<div class="row items-center q-pt-mb col-6" v-if="traffic!=''">
<div class="col-3 q-mr-md">往返交通：</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="traffic!=''">
<div class="q-mr-md col-3">往返交通：</div>
<div class="col text-grey-6">{{ traffic }}</div>
</div>
<div class="row items-center q-pt-mb col-6" v-if="hotel!=''">
<div class="col-3 q-mr-md">酒店住宿：</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="hotel!=''">
<div class="q-mr-md col-3">酒店住宿：</div>
<div class="col text-grey-6">{{ hotel }}</div>
</div>
<div class="row items-center q-pt-mb col-6">
<div class="col-3 q-mr-md">購物：</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}">
<div class="q-mr-md col-3">購物：</div>
<div class="col text-grey-6">{{ trip.shopList.length>0?`${trip.shopList.length}個購物點`:'無購物行程' }}</div>
</div>
<div class="row items-center q-pt-mb col-6" v-if="team!=''">
<div class="col-3 q-mr-md">團隊人數：</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="team!=''">
<div class="q-mr-md col-3">團隊人數：</div>
<div class="col text-grey-6">{{ team }}</div>
</div>
<div class="row items-center q-pt-mb col-6">
<div class="col-3 q-mr-md">景點：</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="q-mr-md col-3">景點：</div>
<div class="col text-grey-6">{{ trip.scenicList.length }}個景點或場館</div>
</div>
<div class="row items-center q-pt-mb col-6">
<div class="col-3 q-mr-md">自費項目：</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="q-mr-md col-3">自費項目：</div>
<div class="col text-grey-6">{{ trip.selfpayingList.length>0?`${trip.selfpayingList.length}個自費項目`:'無自費項目' }}</div>
</div>
<div class="row items-center q-pt-mb col-6" v-if="trip.freedomList.length>0">
<div class="col-3 q-mr-md">自由活動：</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" v-if="trip.freedomList.length>0">
<div class="q-mr-md col-3">自由活動：</div>
<div class="col text-grey-6">{{ trip.freedomList.length}} 次自由活動</div>
</div>
<div class="row items-center q-pt-mb col-6">
<div class="col-3 q-mr-md">餐食：</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="q-mr-md col-3">餐食：</div>
<div class="col text-grey-6">{{ dinner }}</div>
</div>
<div class="row items-center q-pt-mb col-6">
<div class="col-3 q-mr-md">服務用語</div>
<div class="row items-center q-pt-mb"
:class="{'col-6':$q.platform.is.desktop,'col-12':$q.platform.is.mobile}" >
<div class="q-mr-md col-3">服務用語</div>
<div class="col text-grey-6">普通話/日本語</div>
</div>
</div>
......
src/pages/scheduledTrip/detailsNew.vue
View file @ d7adc8d3
......@@ -12,16 +12,29 @@
<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 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">
<q-carousel animated v-model="slide" navigation height="400px" infinite autoplay transition-prev="slide-right" transition-next="slide-left">
<q-carousel
swipeable
animated
v-model="slide"
navigation
height="400px"
infinite
autoplay
transition-prev="slide-right"
transition-next="slide-left">
<q-carousel-slide v-for="(item, i) in dataList.imgCover" :name="i" :key="i" :img-src="item.Url" />
</q-carousel>
</div>
</div>
<div class="q-py-lg row" style="border-bottom: 1px solid #eee">
<div class="q-py-lg" :class="{'row':$q.platform.is.desktop,'column':$q.platform.is.mobile}" style="border-bottom: 1px solid #eee">
<div class="col q-mr-lg">
<div class="text-h6 ellipsis-2-lines">{{ dataList.title }}</div>
<div class="q-mt-md f12 text-grey-6">
<q-icon name="iconfont icondingweixiao" size="16px" class="q-mr-sm" />
<q-icon
name="iconfont icondingweixiao"
size="16px"
class="q-mr-sm"
/>
<span
>日本 -
......@@ -32,20 +45,54 @@
</span>
</div>
<div class="q-mt-md row">
<q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconOwner-1" label=" 印象自組團" />
<q-chip class="transparent q-mr-xl no-padding" square icon="iconfont icontime" :label="` 行程時間 ${dataList.dayList.length} 天`" />
<q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconnetwork-fill" label="日本語/中文 導覽" />
<q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconcancel" label="15天前可免費取消" />
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconOwner-1"
label=" 印象自組團"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont icontime"
:label="` 行程時間 ${dataList.dayList.length} 天`"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconnetwork-fill"
label="日本語/中文 導覽"
/>
<q-chip
class="transparent q-mr-xl no-padding"
square
icon="iconfont iconcancel"
label="15天前可免費取消"
/>
</div>
</div>
<div style="width: 293px" class="rounded-borders q-px-md q-py-lg">
<div class="product-price text-h6 text-right" v-if="dataList.priceList.length > 0">
<div
:style="{'width': $q.platform.is.mobile?'100%':'293px'}"
class="bg-grey-3 rounded-borders q-px-md"
:class="{'q-py-lg':$q.platform.is.desktop,
'row justify-between items-center q-mt-sm q-py-sm':$q.platform.is.mobile}"
>
<div
class="product-price text-h6"
v-if="dataList.priceList.length > 0"
>
<!-- CNY：{{ dataList. }} -->
CNY：{{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}
<span class="f12 text-grey-6">起</span>
</div>
<div v-else class="text-subtitle1 text-grey-6">暫無報價</div>
<q-btn color="primary" label="選擇方案" unelevated @click="goScrollHandler(priceListHeight, 1)" class="q-mt-md full-width" />
<q-btn
color="primary"
label="選擇方案"
unelevated
@click="goScrollHandler(priceListHeight)"
:class="{'q-mt-md full-width':$q.platform.is.desktop}"
/>
</div>
</div>
<div class="q-mt-lg">
......@@ -58,10 +105,26 @@
<div v-if="dataList" class="q-pa-lg q-mt-lg text-grey-9" ref="pricelistref">
<div style="max-width: 1200px; margin-left: auto; margin-right: auto">
<div class="text-h6">選擇方案</div>
<div class="rounded-borders bg-white q-pa-md q-mt-md" v-if="$q.platform.is.mobile">
<q-field class="q-my-md" stack-label label="選擇日期、選項" standout dense>
<div class="self-center full-width no-outline" tabindex="0">{{currentPrice.startDate}}</div>
<q-popup-proxy ref="qDateProxy">
<calendar class="bg-white q-pa-md"
:priceList="dataList.priceList"
@change="changeChosenDateHandler"
ref="calendarRef"
></calendar>
</q-popup-proxy>
</q-field>
<order-preview class="q-pa-md"
:price="currentPrice"
@reset="resetHandler"
></order-preview>
</div>
<div class="bg-white rounded-borders q-mt-md" v-if="dataList.priceList.length > 0">
<div class="q-pa-md row">
<div class="col">
<div class="text-subtitle1 text-weight-bold row items-center">
<div class="text-subtitle1 text-weight-bold row items-center" v-if="$q.platform.is.desktop">
<span class="q-mr-md">行程標準出行方案</span>
<q-chip square color="orange" size="sm" text-color="grey-2" class="text-light" label="15天前可免費取消" />
</div>
......@@ -73,7 +136,7 @@
</ul>
</div>
</div>
<div class="">
<div class="" v-if="$q.platform.is.desktop">
<div class="row items-center">
<span class="product-price text-h6 q-mr-md">CNY {{ moneyFormat(dataList.priceList[0].originalB2CPrice, 0) }}</span>
<q-btn color="primary" outline :label="showOrderPreview ? '取消選擇' : '選擇'" @click="showOrderPreview = !showOrderPreview" class="q-px-lg" />
......@@ -87,9 +150,9 @@
<q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconcancel" label="15天前可免費取消" />
<q-chip class="transparent q-mr-xl no-padding" square icon="iconfont iconroundcheck" label="6個工作日內（不含例休假）確認" />
</div>
<div class="q-mt-lg row">
<div class="q-mt-lg row" v-if="$q.platform.is.desktop">
<div class="col">
<calendar :priceList="dataList.priceList" @change="changeChosenDateHandler" ref="calendar"></calendar>
<calendar :priceList="dataList.priceList" @change="changeChosenDateHandler" ref="calendarRef"></calendar>
</div>
<div class="col q-ml-xl">
<order-preview :price="currentPrice" @reset="resetHandler"></order-preview>
......@@ -100,14 +163,37 @@
</div>
</div>
<div v-if="dataList" style="max-width: 1200px; margin-left: auto; margin-right: auto" class="q-mt-xl row" :class="{ 'q-px-md': $q.screen.width < 1220 }">
<div class="col-8">
<div class="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">
<div style="position: sticky; top: 100px">
<div
class="trip-module text-subtitle2 cursor-pointer q-mb-lg"
v-for="(x, i) in days"
:key="i"
@click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-moduleDay text-red active':
currentHeight >= x.top &&
(i == days.length - 1 || currentHeight < days[i + 1].top),
}"
>
{{ x.display }}
</div>
</div>
</div>
<div :class="{'col-8':$q.platform.is.desktop,'col':$q.platform.is.mobile}">
<div class="text-h5 text-weight-bold text-left" id="feature">行程特色</div>
<div class="q-mt-md trip-text q-pb-xl" v-html="dataList.feature.featureContent" v-if="dataList.feature.featureContent != ''"></div>
<div class="q-mt-md q-pb-xl" ref="diyContext" :style="{ zoom: zoomDiyContext }" v-html="dataList.feature.featureHtml" v-if="dataList.feature.featureHtml != ''"></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="text-h5 text-weight-bold text-left q-mt-xl" id="product">行程介紹</div>
<div class="q-pb-xl">
<smaple :trip="dataList"></smaple>
<trip :trip="dataList" @change="changeTripShowHandler"></trip>
<template v-if="dataList.dayList.length<=3">
<trip :trip="dataList" @change="changeTripShowHandler"></trip>
</template>
<template v-else>
<block :currentHeightDay="currentHeight" :days="days" :tripList="dayList" :isDirect="isDirect" :clickDate="clickDate"></block>
</template>
</div>
<div class="text-h5 text-weight-bold text-left q-mt-xl" id="price">費用說明</div>
<div class="text-subtitle1 text-weight-bold q-my-md">費用包含</div>
......@@ -133,22 +219,24 @@
</div>
</div>
</div>
<div class="col-1"></div>
<div class="col q-ml-xl position-relative">
<div style="position: sticky; top: 100px">
<div
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-module': currentHeight >= x.top && (i == navs.length - 1 || currentHeight < navs[i + 1].top)
}"
>
{{ x.display }}
<template v-if="$q.platform.is.desktop">
<div class="col-1"></div>
<div class="col q-ml-xl position-relative">
<div style="position: sticky; top: 100px">
<div
class="text-subtitle2 text-grey-6 cursor-pointer q-mb-md"
v-for="(x, i) in navs"
:key="i"
@click="goScrollHandler(x.top + 20)"
:class="{
'active-trip-module': currentHeight >= x.top && (i == navs.length - 1 || currentHeight < navs[i + 1].top)
}"
>
{{ x.display }}
</div>
</div>
</div>
</div>
</template>
</div>
<div class="goBackTop bg-primary" :class="{ showGoback: isShowTop }" @click="hangleGoUp">
<i class="iconfont iconarrow-top"></i>
......@@ -158,7 +246,7 @@
<script lang="ts">
import { date, useQuasar } from 'quasar'
import { inject, provide, reactive, toRefs, defineComponent, onMounted, ref, watch, getCurrentInstance, nextTick } from 'vue'
import { inject, reactive, toRefs, defineComponent, ref, watch, getCurrentInstance, nextTick } from 'vue'
import { useRouter } from 'vue-router'
import { useI18n } from 'vue-i18n'
import { DirtionmaryHelper } from 'src/config/dictionary'
......@@ -170,20 +258,23 @@ import calendar from 'src/components/trip/calendar.vue'
import OrderPreview from 'src/components/trip/orderPreview.vue'
import smaple from 'src/components/trip/smaple.vue'
import Trip from 'src/components/trip/trip.vue'
import block from 'src/components/trip/block/index.vue'
import { formatDate, moneyFormat } from 'src/utils/tools'
export default defineComponent({
components: {
calendar,
OrderPreview,
smaple,
Trip
Trip,
block
},
props: [],
setup(props) {
const $router = useRouter()
const { t } = useI18n()
const $q = useQuasar()
const calendar = ref(null)
const qDateProxy = ref(null)
const calendarRef = ref(null)
const navstext = ref([])
const getDivDom = el => {
navstext.value.push(el)
......@@ -191,8 +282,11 @@ export default defineComponent({
const diyContext = ref(null) as any
const pricelistref = ref(null) as any
let { ctx: that, proxy } = getCurrentInstance()
const data = reactive({
tab: '',
searchDate:'',
clickDate: '',
scrollareaobj: null,
isShowTop: false,
slide: 1,
......@@ -232,6 +326,7 @@ export default defineComponent({
videoPosition: 0,
currentHeight: 0,
isPictureInPicture: false,
days: [],
navs: [
{
val: 'feature',
......@@ -280,7 +375,15 @@ export default defineComponent({
if (localStorage.baseifo) {
data.TripConfig = JSON.parse(window.localStorage.getItem('baseifo'))
}
watch(()=>data.days,(n, o) => {
data.days = n
// console.log(data.days.length>1&&data.dayList.length>3&&data.currentHeight > data.days[0].top-60&&data.currentHeight < data.navs[2].top)
},{immediate: true,deep: true})
const methods = {
getTopNum(x){
data.days = JSON.parse(x)
},
//点击回到顶部
hangleGoUp() {
document.querySelector('#scrollId .q-scrollarea__container').scrollTop = 0
......@@ -338,11 +441,21 @@ export default defineComponent({
//console.log(e)
},
resetHandler() {
calendar.value.reset()
if($q.platform.is.mobile){
data.currentPrice.startDate = ''
// qDateProxy.value.show()
// setTimeout(()=>{
// calendarRef.value.reset()
// })
}else{
calendarRef.value.reset()
}
that.$forceUpdate()
},
changeChosenDateHandler(val) {
val.price.version = new Date().getTime()
data.currentPrice = JSON.parse(JSON.stringify(val.price))
if (qDateProxy.value) qDateProxy.value.hide()
},
showDialog() {
data.isShowDialog = true
......@@ -399,6 +512,11 @@ export default defineComponent({
}
if (data.dataList.feature.featureHtml != '') {
let tw = parseFloat(diyContext.value.getBoundingClientRect().width) / 1123.0
if($q.platform.is.mobile){
let zoombox = document.querySelector("#setZoom");
let div = zoombox.getElementsByTagName("div")[0]
div.style.zoom = document.documentElement.clientWidth/980.0
}
data.zoomDiyContext = tw > 1 ? 1 : tw.toFixed(2)
}
setTimeout(() => {
......@@ -407,6 +525,16 @@ export default defineComponent({
x.top = el.offsetTop - 90
})
data.priceListHeight = pricelistref.value.getBoundingClientRect().top + data.currentHeight - 60
data.days = []
data.dayList.forEach(x=>{
let dayListObj = {
val: 'day'+x.dayNum,
top: 0,
isActive: false,
display: x.dayNum>9?x.dayNum:'0'+x.dayNum,
}
data.days.push(dayListObj)
})
}, 1000)
})
} else {
......@@ -438,7 +566,8 @@ export default defineComponent({
...toRefs(data),
...methods,
moneyFormat,
calendar,
calendarRef,
qDateProxy,
getDivDom,
navstext,
diyContext,
......@@ -504,4 +633,37 @@ export default defineComponent({
border-radius: 5px;
background: var(--q-primary);
}
.trip-module{
color: #9E9E9E;
transition: all .3s;
font-weight: 100;
text-align: center;
line-height: 38px;
font-size: 18px;
width: 38px;
height: 38px;
border: 1px solid #ccc;
border-radius: 50%;
font-family: lettergothicstd;
}
.active-trip-moduleDay {
position: relative;
border: 0;
left: -15px;
font-size: 51px;
}
.active-trip-moduleDay.active::before {
opacity: 1;
}
.active-trip-moduleDay::before {
display: inline-block;
position: absolute;
top: 0px;
left: -50px;
content: 'DAY';
font-size: 13px;
font-family: fangsong;
line-height: 58px;
opacity: 0;
}
</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