Skip to content

A
Athena
Commit 154e435a authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

Merge branch 'master' of http://gitlab.oytour.com/huaguohao/athena

parents 809eb502 dcfa16f4
Show whitespace changes
Inline Side-by-side
Showing with 659 additions and 13 deletions
public/index.html
View file @ 154e435a
......@@ -810,6 +810,13 @@
};
google.maps.MarkerWithLabel = MarkerWithLabel;
</script>
<script>
document.ondragover = function (e) { e.preventDefault(); };
document.ondrop = function (e) { e.preventDefault(); };
$(document).on("dragstart", function (e) {
return false;
});
</script>
<!-- <script src="http://pv.sohu.com/cityjson?ie=utf-8"></script> -->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=86f2f611126f36b93cf2ef280300524f&plugin=AMap.CitySearch"></script>
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
......
src/components/FreeTravel/FreeDetail.vue
View file @ 154e435a
<template>
<div id="FreeDetail">
<div class="commonF FreeDetail">
<div class="w1200">
<div class="bannerImg">
<img style="width:100%;height:100%" src="../../assets/img/juan/banner.png" alt="">
<ul class="banImgList basefix">
<li>
<img src="../../assets/img/juan/dongjin.png" alt="">
</li>
</ul>
</div>
<div class="Content basefix" style="margin-top:20px;margin-bottom:50px">
<div class="left" style="width:795px;margin-right:47px">
<p class="pfR">【东京人气温泉】大江户温泉物语实体门票（台湾邮寄）</p>
<p class="f14 c99" style="margin:15px 0">东京旅行必去台场的大江户温泉物语，体验江户时代造景的主题乐园。在 KKday 购买比官网便宜的台场大江户门票，带你穿上浴衣漫步在江户时代街道，泡汤、美食、休閒娱乐一次满足，适合全家大小、三五好友一起来同乐！</p>
<el-row class="titleEl f14">
<el-col :span="6">
<img src="../../assets/img/free/xc.png" alt="">
<span>行程时间12小时</span>
</el-col>
<el-col :span="6">
<img src="../../assets/img/free/yy.png" alt="">
<span>日语/English导游</span>
</el-col>
<el-col :span="6">
<img src="../../assets/img/free/yxq.png" alt="">
<span>有效期内任何一天使用</span>
</el-col>
<el-col :span="6">
<img src="../../assets/img/free/qx.png" alt="">
<span>不可取消</span>
</el-col>
</el-row>
<div class="ListDiv">
<!--方案选择 -->
<div style="padding-bottom:40px" class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">方案选择</span>
</div>
<div style="padding-left:20px">
<p class="f12" style="margin-top:20px">请选择预计前往海洋馆的日期</p>
<el-popover popper-class="calendarPopover" v-model="visible"
placement="bottom-start"
trigger="click">
<div class="calendarDiv">
<div style="font-size:16px;padding:10px;text-align:center;overflow:auto;">
<el-col :span="8"><span @click="ChangeMonth(0)" class="month_circle">
<i class="iconfont icon-xiangzuo"></i>
</span> </el-col>
<el-col :span="8" style="color:#333333;">
<span class="pfR" style="position:relative;top:5px">{{tomonth}}</span>
</el-col>
<el-col :span="8"><span @click="ChangeMonth(1)" class="month_circle">
<i class="iconfont icon-arrowright1"></i>
</span></el-col>
</div>
<v-calendar ref="child" v-on:SelectChild="SelectChild" v-for="(item,index) in classArray" :key="index" v-bind:dateData="classArray" :day ="tomonth">
</v-calendar>
</div>
<div class="choosedate" slot="reference">
<span class="calendarSpan" >
<span class="iconfont icon-img-rili"></span>
选择可预定日期
</span>
</div>
</el-popover>
<p class="f12">方案类型</p>
<div style="margin-top:16px" class="typeList">
<span>门票（成人）</span>
<span>门票（儿童：7-15岁）</span>
<span>门票（成人）</span>
</div>
<p style="margin:15px 0" class="f12">数量</p>
<el-row>
<el-col :span="17"><span class="f12">成人</span></el-col>
<el-col :span="2"><span class="cee">￥152</span></el-col>
<el-col :span="5"> <el-input-number size="mini" v-model="num" @change="handleChange" :min="0" ></el-input-number></el-col>
</el-row>
</div>
</div>
<div class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">行程介绍</span>
</div>
<div style="padding:20px">
<div class="f12">
<p>-行程特色-</p>
<div style="margin-top:15px">
・露天温泉、三温暖、大浴场、足汤等浴池， 尽情享受日式温泉设施
・场内提供多样商店街美食、拉麵、寿司等日式小吃与甜品店
・提供免费的浴衣，体验江户时代日本祭典文化气氛
　</div>
</div>
</div>
</div>
<div class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">费用说明</span>
</div>
<ul class="fysm" style="padding:20px">
<li><img src="../../assets/img/free/gou.png" alt="">门票</li>
<li><img src="../../assets/img/free/gou.png" alt="">小费</li>
<li><img src="../../assets/img/free/cha.png" alt="">其他费用</li>
</ul>
</div>
<div class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">注意事项</span>
</div>
<div class="f12" style="padding:20px">
指定效期区间 2018-07-25 2020-03-31 ，逾期失效。
中途离场无法再度入场，必须重新购票。
请勿携带外食入场。
身上有刺青、刺青贴纸、身体彩绘或酒醉、皮肤病等其他传染疾病、携带宠物者，无法入场。
国中生以下孩童须监护人一同到场。
包尿布的旅客请不要入浴。（请使用小孩浴池）
本门票仅含入场及泡汤费用，有部分设施需另行收费。
若待超过凌晨 2 点，出馆前会被多收 2,160 日圆。
</div>
</div>
</div>
</div>
<div class="right" style="width:358px;border:1px solid rgba(224, 224, 224, 1);box-sizing:border-box">
<div style="width:100%;height:72px;line-height:72px;background:rgba(237,244,255,1);padding-left:20px;box-sizing:border-box">
<span class="cee f26 pfR">¥ 1658.00</span>
<span class="c66 f12">/起</span>
</div>
<p style="padding-left:20px;margin-top:20px">
<img style="width:12px;height:14px" src="../../assets/img/free/huo.png" alt="">
<span class="f14 pfR" style="color:#111111;">7.8K+已订购</span>
</p>
<el-row style="margin:20px">
<el-col :span="2">{{value}}</el-col>
<el-col :span="12"><el-rate
v-model="value"
disabled
text-color="#ff9900">
</el-rate>
</el-col>
<el-col :span="4"><span class="f14 c99">(1314)</span></el-col>
</el-row>
<div class="Btn">立即预定</div>
</div>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
import calendar from "@/components/mall/LocalTourCalendar.vue";
export default {
components: {
"v-calendar": calendar
},
data () {
return {
value:4.2,
visible:false,
tomonth: moment().format("YYYY-MM"),
classArray: [],
num:1,
}
},
mounted() {
let list=[];
this.creatCalendar(list);
},
methods: {
handleChange(){},
// 改变月份
ChangeMonth(num){
if(num==1){
this.tomonth = moment(this.tomonth)
.add(1, "month")
.format("YYYY-MM");
}else{
this.tomonth = moment(this.tomonth)
.subtract(1, "month")
.format("YYYY-MM");
}
this.GetCurrentDays();
},
SelectChild(item){},
creatCalendar(list) {
// 创建日历
let dateList =list;
// if (list && list.length > 0) {
// list.forEach((x, index) => {
// // if(parseFloat(999) > 0){
// let msg = {
// dateStr: x.timeStr,
// cDate: x.timeStr.replace("-", "年").replace("-", "月"),
// price: x.price,
// b2BMemberPrice: x.price,
// b2BPrice: x.price,
// b2CMemberPrice: x.price,
// id: index,
// dateStrS: x.timeStr.substring(0, x.timeStr.length - 3)
// };
// dateList.push(msg);
// // }
// });
// }
let monthArray = [];
for (var i in dateList) {
var data = dateList[i];
var dateDict = {
mounth: data.dateStr.substring(0, data.dateStr.length - 3)
};
monthArray.push(dateDict);
}
//数组去重,获取有几个月
var hash = {};
monthArray = monthArray.reduce(function(item, next) {
hash[next.mounth] ? "" : (hash[next.mounth] = true && item.push(next));
return item;
}, []);
//数据分组
let classArray = [];
for (var j in monthArray) {
var newArray = new Array();
for (var i in dateList) {
var data = dateList[i];
if (
data.dateStr.substring(0, data.dateStr.length - 3) ==
monthArray[j].mounth
) {
newArray.push(data);
}
}
classArray.push(newArray);
}
this.classArray = classArray;
var hash = {};
dateList = dateList.reduce(function(item, next) {
hash[next.dateStrS]
? ""
: (hash[next.dateStrS] = true && item.push(next));
return item;
}, []);
this.calendarTit = dateList;
this.$nextTick(() => {
this.$refs.child[0].getYearMonthDay(this.classArray);
});
}
}
}
</script>
<style>
@import '../../assets/css/common.css';
.FreeDetail .Content .ListDiv .commomStyle .fysm li img{
margin-right:6px;
}
.FreeDetail .Content .ListDiv .commomStyle .fysm li{
display: inline-block;
margin:0 35px 15px 0;
}
.FreeDetail .Content .ListDiv .commomStyle .typeList span{
padding:0 24px;
background:rgba(255,186,193,1);
border:1px solid rgba(238, 68, 84, 1);
border-radius:2px;
margin-right: 10px;
font-size:14px;
height:32px;
line-height:32px;
display: inline-block;
cursor: pointer;
}
.FreeDetail .Content .ListDiv .commomStyle .choosedate{
width:166px;
height:40px;
line-height:40px;
background:rgba(238,68,84,1);
border-radius:2px;
text-align: center;
color:#fff;
font-size: 14px;
margin:20px 0;
cursor: pointer;
}
.calendarPopover{
padding:0;
}
.calendarDiv{
width:406px;
background:rgba(255,255,255,1);
z-index: 100;
border: 1px solid #E1E1E1;
}
.calendarDiv .month_circle{
display: inline-block;
width:28px;
height:28px;
background:rgba(227,227,227,1);
color: #fff;
text-align: center;
line-height: 28px;
border-radius: 2px;
cursor: pointer;
}
.FreeDetail .Content .ListDiv .commomStyle .titleDiv .redSpan{
width:4px;
height:20px;
background:rgba(238,68,84,1);
display: inline-block;
position: absolute;
left: 0;
top: 15px;
}
.FreeDetail .Content .ListDiv .commomStyle .titleDiv{
width:100%;
height:50px;
line-height:50px;
border-bottom:1px solid rgba(224, 224, 224, 1);
background: #EDF4FF;
position: relative;
padding-left: 20px;
box-sizing: border-box;
}
.FreeDetail .Content .ListDiv .commomStyle div{
box-sizing: border-box;
}
.FreeDetail .Content .ListDiv .commomStyle{
border:1px solid rgba(224, 224, 224, 1);
width:792px;
box-sizing: border-box;
margin-top: 30px;
}
.FreeDetail .Content .titleEl .el-col{
display: inline-flex;
align-items: center;
}
.FreeDetail .Content .titleEl .el-col img{
margin-right: 6px;
}
.FreeDetail .Content .right .Btn{
width:320px;
height:50px;
line-height:50px;
background:rgba(238,68,84,1);
border-radius:4px;
color:#fff;
text-align: center;
margin: 10px 0 15px 20px;
box-sizing: border-box;
cursor: pointer;
}
.FreeDetail .Content>div{
float: left;
}
.FreeDetail .bannerImg .banImgList li img{
width: 100%;
height: 100%;
}
.FreeDetail .bannerImg .banImgList li{
width: 100px;
height: 66px;
margin:0 0 20px 20px;
border:2px solid rgba(204, 204, 204, 0.6);
box-sizing: border-box;
}
.FreeDetail .bannerImg{
width:100%;
height:340px;
position: relative;
}
.FreeDetail .bannerImg .banImgList{
position: absolute;
bottom: 0;
left: 0;
}
</style>
src/components/FreeTravel/OrderConfirmation.vue 0 → 100644
View file @ 154e435a
<template>
<div class="OrderCon commonF">
<div class="w1200">
<div class="Content basefix" style="margin-top:20px">
<div class="left" style="width:795px;margin-right:17px">
<el-form class="OrderConForm" ref="form" :model="form" label-width="80px">
<div class="ListDiv">
<div class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">预订人资料</span>
</div>
<div style="padding:20px">
<el-row>
<el-col style="padding-top:8px" :span="2">
<span class="f12 c88">预定人</span>
</el-col>
<el-col :span="20">
<el-form-item label="姓名">
<el-input placeholder="姓" size="mini" style="width:100px" v-model="form.name"></el-input>
<el-input placeholder="名" size="mini" style="width:100px;margin-left:10px" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="手机号">
<el-input size="mini" style="width:300px" v-model="form.name"></el-input>
</el-form-item>
<el-form-item label="Email">
<el-input placeholder="接收确认邮件，获得出行资讯" size="mini" style="width:300px" v-model="form.name"></el-input>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
<div class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">优惠券</span>
</div>
<div style="padding:20px">
<el-row>
<el-col style="padding-top:8px" :span="2">
<span class="f12 c88">优惠券</span>
</el-col>
<el-col :span="14">
<el-form-item class="yhqform" label="其他优惠券码，请直接输入">
<el-input placeholder="优惠券码" size="mini" style="width:180px" v-model="form.name"></el-input>
</el-form-item>
</el-col>
<el-col style="padding-top:8px" :span="2">
<el-button size="small" style="border:1px solid #EE4454;color:#EE4454">确定</el-button>
</el-col>
</el-row>
</div>
</div>
<div class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">提示</span>
</div>
<div class="f12" style="padding:20px">
东京市从2002年10月起征收住宿税。征税标准根据住宿金额按每人每晚征收，
每晚住宿费在1万日元以上每人每晚征收100日元，1.5万日元
以上每人每晚征收200日元，部分房价不包含住宿税，需客人另付前台 。
</div>
</div>
<div class="OrderConBtn">
下一步，支付
</div>
</div>
</el-form>
</div>
<div class="right" style="width:388px;box-sizing:border-box">
<div style="border:1px solid rgba(224, 224, 224, 1);box-sizing:border-box">
<div style="width:388px;height:194px;border-radius:3px;">
<img style="width:100%;height:100%" src="../../assets/img//juan/dongjin.png" alt="">
</div>
<div style="padding:15px">
<p class="cee f22">【东京人气温泉】大江户温泉物语实体门票（台湾邮寄）</p>
<p style="margin:15px 0" class="f14"><span class="c99" style="margin-right:20px">日期</span><span class="c66">2019-02-20</span></p>
<p class="f14"><span class="c99" style="margin-right:20px">人数</span><span class="c66">成人x1</span></p>
</div>
</div>
<div style="margin-top:20px;border:1px solid rgba(224, 224, 224, 1);box-sizing:border-box">
<div style="width:100%;height:72px;line-height:72px;background:rgba(237,244,255,1);padding:0 20px;box-sizing:border-box">
<span class="f20">订单总额</span>
<span style="float:right" class="cee f26 pfR">¥ 1658.00</span>
</div>
<div class="f14" style="padding:20px">
<el-row>
<el-col :span="4">成人x1</el-col>
<el-col :span="14"><div class="dashDiv"></div></el-col>
<el-col :span="6">￥152</el-col>
</el-row>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
export default {
data () {
return {
form:{},
}
},
mounted() {
},
methods: {
}
}
</script>
<style>
@import '../../assets/css/common.css';
.OrderCon .OrderConForm .OrderConBtn{
width:100%;
height:66px;
line-height:66px;
background:rgba(238,68,84,1);
border-radius:4px;
text-align: center;
color: #fff;
font-size: 18px;
margin-bottom:60px;
cursor: pointer;
}
.OrderCon .OrderConForm .yhqform .el-form-item__label{
width:200px!important;
}
.OrderCon .OrderConForm .el-form-item__label{
color:#111111;
}
.OrderCon .OrderConForm .el-input__inner{
border: none;
outline: none;
border-bottom: 1px solid #DDDDDD;
border-radius: 0;
}
.OrderCon .right .dashDiv{
border-bottom: 1px dashed #999999;
margin-top:10px;
}
.OrderCon .Content .ListDiv .commomStyle .fysm li img{
margin-right:6px;
}
.OrderCon .Content .ListDiv .commomStyle .fysm li{
display: inline-block;
margin:0 35px 15px 0;
}
.OrderCon .Content .ListDiv .commomStyle .typeList span{
padding:0 24px;
background:rgba(255,186,193,1);
border:1px solid rgba(238, 68, 84, 1);
border-radius:2px;
margin-right: 10px;
font-size:14px;
height:32px;
line-height:32px;
display: inline-block;
}
.OrderCon .Content .ListDiv .commomStyle .choosedate{
width:166px;
height:40px;
line-height:40px;
background:rgba(238,68,84,1);
border-radius:2px;
text-align: center;
color:#fff;
font-size: 14px;
margin:20px 0;
}
.calendarPopover{
padding:0;
}
.calendarDiv{
width:406px;
background:rgba(255,255,255,1);
z-index: 100;
border: 1px solid #E1E1E1;
}
.calendarDiv .month_circle{
display: inline-block;
width:28px;
height:28px;
background:rgba(227,227,227,1);
color: #fff;
text-align: center;
line-height: 28px;
border-radius: 2px;
cursor: pointer;
}
.OrderCon .Content .ListDiv .commomStyle .titleDiv .redSpan{
width:4px;
height:20px;
background:rgba(238,68,84,1);
display: inline-block;
position: absolute;
left: 0;
top: 15px;
}
.OrderCon .Content .ListDiv .commomStyle .titleDiv{
width:100%;
height:50px;
line-height:50px;
border-bottom:1px solid rgba(224, 224, 224, 1);
background: #EDF4FF;
position: relative;
padding-left: 20px;
box-sizing: border-box;
}
.OrderCon .Content .ListDiv .commomStyle div{
box-sizing: border-box;
}
.OrderCon .Content .ListDiv .commomStyle{
border:1px solid rgba(224, 224, 224, 1);
width:792px;
box-sizing: border-box;
margin-bottom: 30px;
}
.OrderCon .Content .titleEl .el-col{
display: inline-flex;
align-items: center;
}
.OrderCon .Content .titleEl .el-col img{
margin-right: 6px;
}
.OrderCon .Content .right .Btn{
width:320px;
height:50px;
line-height:50px;
background:rgba(238,68,84,1);
border-radius:4px;
color:#fff;
text-align: center;
margin: 10px 0 15px 20px;
box-sizing: border-box;
}
.OrderCon .Content>div{
float: left;
}
</style>
src/router.js
View file @ 154e435a
......@@ -672,6 +672,24 @@ export default new Router({
title: "卷妹说-热门目的地详情"
}
},
{
path: "/FreeDetail",
name: "FreeDetail",
component: resolve =>
require(["@/components/FreeTravel/FreeDetail.vue"], resolve),
meta: {
title: "自由行-详情"
}
},
{
path: "/OrderConfirmation",
name: "OrderConfirmation",
component: resolve =>
require(["@/components/FreeTravel/OrderConfirmation.vue"], resolve),
meta: {
title: "自由行-订单确认"
}
},
]
},
{
......
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