Skip to content

A
Athena
Commit 8936b4b9 authored by 华国豪's avatar 华国豪 🙄
Browse files
Options

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

parents b35a0cf3 20d3c16e
Show whitespace changes
Inline Side-by-side
Showing with 1396 additions and 135 deletions
src/components/FreeTravel/FreeDetail.vue
View file @ 8936b4b9
......@@ -2,17 +2,18 @@
<div class="commonF FreeDetail" v-if="loading">
<div class="w1200">
<div class="bannerImg">
<img style="width:100%;height:100%" src="../../assets/img/juan/banner.png" alt="">
<img style="width:100%;height:100%" :src="ActiveSrc" :onerror="defaultImg" alt="">
<ul class="banImgList basefix">
<li>
<img src="../../assets/img/juan/dongjin.png" alt="">
<li @mouseover="LiHover(item,index)" :class="LiactiveIndex==index?'Liactive':''" v-if="index<6" v-for="(item,index) in dataDetail.img_list" :key="index">
<img :src="ConcatImg(item.img_url)" 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">{{dataDetail.prod_name}}</p>
<p class="f14 c99" style="margin:15px 0">{{dataDetail.prod_desc}}</p>
<p class="f14 c99" style="margin:15px 0">{{dataDetail.introduction}}</p>
<el-row class="titleEl f14">
<el-col :span="6">
<img src="../../assets/img/free/xc.png" alt="">
......@@ -28,7 +29,9 @@
</el-col>
<el-col :span="6">
<img src="../../assets/img/free/qx.png" alt="">
<span>不可取消</span>
<span v-if="dataDetail.policy_no=='1'">不扣手续费，退全额</span>
<span v-if="dataDetail.policy_no=='2'">无法退费</span>
<span v-if="dataDetail.policy_no=='3'">指定手续费</span>
</el-col>
</el-row>
<div class="ListDiv">
......@@ -39,47 +42,66 @@
<span class="f18 pfR">方案选择</span>
</div>
<div style="padding-left:20px">
<p class="f12" style="margin-top:20px">请选择预计前往海洋馆的日期</p>
<p class="f12" style="margin-top:20px">请选择预计前往{{dataDetail.prod_name}}日期</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">
<el-col :span="8"><span @click.stop.prevent="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">
<el-col :span="8"><span @click.stop.prevent="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 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 @click="ChangeMonth(-1)" class="calendarSpan" style="display:block">
<span class="iconfont icon-img-rili"></span>
选择可预定日期
{{msgObj.dateStr}}
</span>
</div>
</el-popover>
<p class="f12">方案类型</p>
<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>
<span :class="mealTypeindex==index?'mealactive':''" @click="getmealTypeItem(item,index)" v-for="(item,index) in mealType.pkgs" :key="index+100">{{item.pkg_name}}</span>
</div>
<p style="margin:15px 0" class="f12">范围</p>
<el-row style="margin-bottom:10px">
<el-col :span="17"><span class="f12">{{mealTypeItem.price1_age_range}}</span></el-col>
<el-col :span="2"><span class="cee">￥{{mealTypeItem.price1_b2c}}</span></el-col>
<el-col :span="5"> <el-input-number size="mini" v-model="msgObj.price1_qty" :min="0" ></el-input-number></el-col>
</el-row>
<el-row v-if="mealTypeItem.price2_age_range!='~' && mealTypeItem.price2_age_range!='0~0'" style="margin-bottom:10px">
<el-col :span="17"><span class="f12">{{mealTypeItem.price2_age_range}}</span></el-col>
<el-col :span="2"><span class="cee">￥{{mealTypeItem.price2_b2c}}</span></el-col>
<el-col :span="5"> <el-input-number size="mini" v-model="msgObj.price2_qty" :min="0" ></el-input-number></el-col>
</el-row>
<el-row v-if="mealTypeItem.price3_age_range!='~'&& mealTypeItem.price3_age_range!='0~0'" style="margin-bottom:10px">
<el-col :span="17"><span class="f12">{{mealTypeItem.price3_age_range}}</span></el-col>
<el-col :span="2"><span class="cee">￥{{mealTypeItem.price3_b2c}}</span></el-col>
<el-col :span="5"> <el-input-number size="mini" v-model="msgObj.price3_qty" :min="0" ></el-input-number></el-col>
</el-row>
<el-row v-if="mealTypeItem.price4_age_range!='~'&& mealTypeItem.price4_age_range!='0~0'">
<el-col :span="17"><span class="f12">{{mealTypeItem.price4_age_range}}</span></el-col>
<el-col :span="2"><span class="cee">￥{{mealTypeItem.price4_b2c}}</span></el-col>
<el-col :span="5"> <el-input-number size="mini" v-model="msgObj.price4_qty" :min="0" ></el-input-number></el-col>
</el-row>
<p v-show="eventnoList.length>0" style="margin:15px 0" class="f12">场次</p>
<div style="margin-top:16px" class="typeList">
<span :class="eventTypeindex==index?'mealactive':''" @click="getEventTypeItem(item,index)" v-for="(item,index) in eventnoList" :key="index+100">{{item.day}}</span>
</div>
</div>
</div>
<div class="commomStyle">
......@@ -89,17 +111,33 @@
</div>
<div style="padding:20px">
<div class="f12">
<p>-行程特色-</p>
<div style="margin-top:15px">
・露天温泉、三温暖、大浴场、足汤等浴池， 尽情享受日式温泉设施
・场内提供多样商店街美食、拉麵、寿司等日式小吃与甜品店
・提供免费的浴衣，体验江户时代日本祭典文化气氛
　</div>
<div style="margin-bottom:20px">
{{dataDetail.prod_desc}}
</div>
<p class="f14 pfR" style="color:#000000;margin-bottom:15px" v-if="dataDetail.tour_list.length>0">行程列表</p>
<div v-for="(item,index) in dataDetail.tour_list" :key="index+100">
<p>第{{item.tour_day}}天</p>
<p style="padding:8px 0">说明{{item.tour_desc}}</p>
<div>
<img v-if="item.photo_url&&item.photo_url!=''" style="width:100;height: auto;display:block" :src="ConcatImg(item.photo_url)" alt="">
</div>
</div>
<p class="f14 pfR" style="color:#000000;margin-bottom:15px" v-if="dataDetail.meal_list.length>0">餐食列表</p>
<div v-for="(item,index) in dataDetail.meal_list" :key="index+100">
<p>行程第{{item.tour_day}}天提供餐食</p>
<p style="padding:8px 0">
<span>早餐：{{item.is_breakfast}}</span>
<span>午餐：{{item.is_lunch}}</span>
<span>晚餐：{{item.is_dinner}}</span>
</p>
</div>
</div>
<div class="commomStyle">
</div>
</div>
<!-- <div class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">费用说明</span>
......@@ -109,22 +147,26 @@
<li><img src="../../assets/img/free/gou.png" alt="">小费</li>
<li><img src="../../assets/img/free/cha.png" alt="">其他费用</li>
</ul>
</div> -->
<div v-if="dataDetail.prod_tips!=''" class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">温馨提示</span>
</div>
<ul class="fysm" style="padding:20px">
<div>{{dataDetail.prod_tips}}</div>
</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 日圆。
<p v-for="(item,index) in dataDetail.remind_list" :key="index+50"><span class="f26 pfR">.</span>{{item.remind_desc}}</p>
</div>
</div>
......@@ -132,26 +174,26 @@
</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>
<span class="cee f26 pfR">¥ {{dataDetail.b2c_price}}</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>
<span class="f14 pfR" style="color:#111111;margin-left:8px">{{dataDetail.prod_comment_info.sales_qty}}+已订购</span>
</p>
<el-row style="margin:20px">
<el-col :span="2">{{value}}</el-col>
<el-col :span="2">{{dataDetail.prod_comment_info.avg_scores}}</el-col>
<el-col :span="12"><el-rate
v-model="value"
v-model="dataDetail.prod_comment_info.avg_scores"
disabled
text-color="#ff9900">
</el-rate>
</el-col>
<el-col :span="4"><span class="f14 c99">(1314)</span></el-col>
<el-col :span="4"><span class="f14 c99">({{dataDetail.prod_comment_info.comment_record}})</span></el-col>
</el-row>
<div class="Btn">立即预定</div>
<div @click="YdBtn" class="Btn">立即预定</div>
</div>
</div>
</div>
......@@ -159,13 +201,16 @@
</template>
<script>
import moment from 'moment'
import calendar from "@/components/mall/LocalTourCalendar.vue";
import calendar from "@/components/mall/FreeCalendar.vue";
export default {
components: {
"v-calendar": calendar
},
data () {
return {
eventTypeindex:-1,
mealTypeindex:0,
LiactiveIndex:0,
value:4.2,
visible:false,
tomonth: moment().format("YYYY-MM"),
......@@ -173,15 +218,178 @@ export default {
num:1,
dataDetail: {},
loading: false,
DomainUrl:"",
ActiveSrc:'',
defaultImg: 'this.src="' + require('assets/img/juan/error.png') + '"',
isLogin:0,
mealType:{},
mealTypeItem:{},
dateList:[],
currentMonthDays:0,
id:0,
msgObj:{
price1_qty:0,
price2_qty:0,
price3_qty:0,
price4_qty:0,
order_note:'',
event_backup_data:'',
event_no:'1',
Mobile_Device:null,
},
eventnoList:[],
pkg_no:"",
}
},
created(){
console.log(moment("2019-02-01").isBefore("2019-02-02"))
},
mounted() {
let list=[];
let id = this.$route.query.id
let id = this.$route.query.id;
this.id=id;
this.getDetails(id)
this.creatCalendar(list);
this.getMealList(id);
},
methods: {
YdBtn(){
let that=this;
if(that.msgObj.s_date=="" || !that.msgObj.s_date){
this.Error("请选择日期！")
return;
}
if(that.msgObj.price1_qty+that.msgObj.price2_qty+that.msgObj.price3_qty+that.msgObj.price4_qty==0){
this.Error("出行人数至少一人！");
return;
}
that.msgObj.prod_name=that.dataDetail.prod_name;
that.msgObj.price1_age_range=that.mealTypeItem.price1_age_range;
that.msgObj.price2_age_range=that.mealTypeItem.price2_age_range;
that.msgObj.price3_age_range=that.mealTypeItem.price3_age_range;
that.msgObj.price4_age_range=that.mealTypeItem.price4_age_range;
that.msgObj.price1=that.mealTypeItem.price1;
that.msgObj.price2=that.mealTypeItem.price2;
that.msgObj.price3=that.mealTypeItem.price3;
that.msgObj.price4=that.mealTypeItem.price4;
that.msgObj.price1_b2c=that.mealTypeItem.price1_b2c;
that.msgObj.price2_b2c=that.mealTypeItem.price2_b2c;
that.msgObj.price3_b2c=that.mealTypeItem.price3_b2c;
that.msgObj.price4_b2c=that.mealTypeItem.price4_b2c;
that.msgObj.total_price=that.msgObj.price1_qty*that.mealTypeItem.price1+that.msgObj.price2_qty*that.mealTypeItem.price2+that.msgObj.price3_qty*that.mealTypeItem.price3+that.msgObj.price4_qty*that.mealTypeItem.price4;
that.msgObj.MySelfTotalPrice=that.msgObj.price1_qty*that.mealTypeItem.price1_b2c+that.msgObj.price2_qty*that.mealTypeItem.price2_b2c+that.msgObj.price3_qty*that.mealTypeItem.price3_b2c+that.msgObj.price4_qty*that.mealTypeItem.price4_b2c;
this.msgObj.prod_no=that.id;
// console.log("that.id",that.id)
if(this.getLocalStorage()){
let userInfo = this.getLocalStorage();
this.msgObj.CustomerId = userInfo.customerId;
}
sessionStorage.setItem("freeMsg",JSON.stringify(this.msgObj));
this.$router.push({path:'OrderConfirmation',query:{id:this.id}})
},
getEventTypeItem(item,index){
let num=item.event_times.substring(0,1);
this.eventTypeindex=index;
this.msgObj.event_no=num;
this.msgObj.event_backup_data=item.is_hl;
},
getmealTypeItem(item,index){
// console.log(item);
this.mealTypeItem=item;
this.mealTypeindex=index;
this.getEventNoList(item.pkg_no);
},
LiHover(item,index){
this.LiactiveIndex=index;
this.ActiveSrc=item.img_url;
},
ConcatImg(src){
// console.log("src",this.DomainUrl+src);
return this.DomainUrl+src;
},
getEventNoList(id){
this.apiJavaPost(
"/api/kkday/QueryEvent",
{
"prod_no": this.id,
// "prod_no": "20140",
"locale":"zh-cn" ,
"pkg_no": id,
// "pkg_no": "77524",
},
res => {
if (res.data.data.result === "00") {
// console.log("cahngxi",res);
if(res.data.data.events){
this.eventnoList=res.data.data.events;
}
}
})
},
getMealList(id){
this.apiJavaPost(
"/api/kkday/QueryPackage",
{
"prod_no": id ? id : "28474",
"locale":"zh-cn"
},
res => {
if (res.data.data.result === "00") {
this.mealType=res.data.data;
this.msgObj.guid=this.mealType.guid;
if(this.mealType.pkgs.length>0){
this.mealTypeItem=this.mealType.pkgs[0];
console.log("this.mealTypeItem",this.mealTypeItem)
this.pkg_no=this.mealTypeItem.pkg_no;
this.getEventNoList(id);
}
this.dateList=this.mealType.sale_dates.saleDt;
this.dateList.forEach(item=>{
item.YM=item.sale_day.substring(0,4)+"-"+item.sale_day.substring(4,6);
item.dateStr=item.sale_day.substring(0,4)+"-"+item.sale_day.substring(4,6)+"-"+item.sale_day.substring(6,8);
})
// console.log("this.dateList",this.dateList);
this.GetCurrentDays()
}else{
this.Error(res.data.data.result_msg)
}
})
},
// 获取当月天数
GetCurrentDays(){
let MonthdayList=[];
this.currentMonthDays = moment(this.tomonth).daysInMonth();
for(let i=1;i<=this.currentMonthDays;i++){
if(i<10){
i=`0${i}`;
}
let month={};
month.dateStr=`${this.tomonth}-${i}`;
MonthdayList.push(month)
}
// console.log("MonthdayList",MonthdayList)
let list=MonthdayList;
for(let i=0;i<list.length;i++){
for(let j=0;j<this.dateList.length;j++){
if(list[i].dateStr==this.dateList[j].dateStr){
list[i]=this.dateList[j];
}
}
}
this.creatCalendar(list)
},
getDetails(id){
// http://efficient.oytour.com/api/kkday/QueryProduct
this.apiJavaPost(
......@@ -191,13 +399,21 @@ export default {
"locale":"zh-cn"
},
res => {
if (res.data.resultCode === 1) {
if (res.data.data.result === "00") {
this.DomainUrl=res.data.data.KkdayDomain;
let data = res.data.data.prod
console.log(data)
this.loading = true
this.dataDetail = data
this.dataDetail = data;
if(this.dataDetail.prod_comment_info.avg_scores){
this.dataDetail.prod_comment_info.avg_scores=Number(this.dataDetail.prod_comment_info.avg_scores);
}
if(this.dataDetail.img_list.length>0){
this.ActiveSrc=this.DomainUrl+this.dataDetail.img_list[0].img_url;
}
} else {
this.Error(res.data.message);
this.Error(res.data.data.result_msg)
}
},
null
......@@ -210,35 +426,28 @@ export default {
this.tomonth = moment(this.tomonth)
.add(1, "month")
.format("YYYY-MM");
}else{
}
else if(num==-1){
this.tomonth =this.tomonth;
}
else{
this.tomonth = moment(this.tomonth)
.subtract(1, "month")
.format("YYYY-MM");
}
this.GetCurrentDays();
},
SelectChild(item){},
SelectChild(item){
this.msgObj.pkg_no=item.pkg_no;
this.msgObj.s_date=item.date_str;
this.msgObj.dateStr=item.date_str;
// console.log("this.msgObj",item)
this.visible=false;
},
creatCalendar(list) {
const that=this;
// 创建日历
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];
......@@ -277,8 +486,13 @@ export default {
return item;
}, []);
this.calendarTit = dateList;
this.$nextTick(() => {
this.$refs.child[0].getYearMonthDay(this.classArray);
if(this.$refs.Child){
this.$refs.Child[0].getYearMonthDay(this.classArray);
}
});
}
}
......@@ -296,8 +510,8 @@ export default {
}
.FreeDetail .Content .ListDiv .commomStyle .typeList span{
padding:0 24px;
background:rgba(255,186,193,1);
border:1px solid rgba(238, 68, 84, 1);
background:#fff;
border:1px solid #999999;
border-radius:2px;
margin-right: 10px;
font-size:14px;
......@@ -305,8 +519,13 @@ export default {
line-height:32px;
display: inline-block;
cursor: pointer;
margin-bottom:20px;
}
.FreeDetail .Content .ListDiv .commomStyle .typeList .mealactive{
background:rgba(255,186,193,1);
border:1px solid rgba(238, 68, 84, 1);
}
.FreeDetail .Content .ListDiv .commomStyle .choosedate{
width:166px;
height:40px;
......@@ -393,12 +612,17 @@ export default {
width: 100%;
height: 100%;
}
.FreeDetail .bannerImg .banImgList .Liactive{
border:2px solid #EE4454;
}
.FreeDetail .bannerImg .banImgList li{
display: inline-block;
width: 100px;
height: 66px;
margin:0 0 20px 20px;
border:2px solid rgba(204, 204, 204, 0.6);
box-sizing: border-box;
cursor: pointer;
}
.FreeDetail .bannerImg{
width:100%;
......
src/components/FreeTravel/OrderConfirmation.vue
View file @ 8936b4b9
......@@ -4,9 +4,9 @@
<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="ListDiv">
<el-form class="OrderConForm" ref="freeMsg" :model="freeMsg" label-width="100px">
<div class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
......@@ -19,61 +19,146 @@
</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-input placeholder="姓" size="mini" style="width:100px" v-model="freeMsg.buyer_last_name"></el-input>
<el-input placeholder="名" size="mini" style="width:100px;margin-left:10px" v-model="freeMsg.buyer_first_name"></el-input>
</el-form-item>
<el-form-item label="手机号" prop="buyer_tel_number" :rules="[{required: true, message: '电话号码不能为空', trigger: 'blur'},{ required: true, trigger: 'blur', pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/ ,message: '请填写正确的手机号'}]">
<el-select @change="GenderSelect" v-show="tel_country_code.length>0" size="mini" style="margin-right:8px" v-model="freeMsg.buyer_tel_country_code" filterable placeholder="请选择">
<el-option
v-for="(item,index) in tel_country_code"
:key="index"
:label="item.Country_Name"
:value="item.Tel_Area">
</el-option>
</el-select>
<el-input size="mini" style="width:300px" v-model="freeMsg.buyer_tel_number"></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 label="Email" prop="buyer_email" :rules="[{ required: true, message: '请输入邮箱地址', trigger: 'blur' },{ type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
]">
<el-input placeholder="接收确认邮件，获得出行资讯" size="mini" style="width:300px" v-model="freeMsg.buyer_email"></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 label="导览语系">
<el-select @change="GenderSelect" size="mini" style="margin-right:8px" v-model="freeMsg.guide_lang" filterable placeholder="请选择">
<el-option
v-for="item in guide_langList"
:key="item.code"
:label="item.name"
:value="item.code">
</el-option>
</el-select>
</el-form-item>
</el-col>
</el-row>
</div>
</div>
</el-form>
<el-form class="OrderConForm" ref="listform" :model="listform" label-width="100px">
<!-- 必填多个客户freeMsg -->
<div class="commomStyle">
<div v-show="item.cus_type!='contact'" v-for="(item,index) in listform.customNew" :key="index">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">优惠券</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>
<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-col :span="20">
<el-form-item label="本国姓名" :prop="'customNew.'+index+'.native_last_name'" :rules="[{ required: true, message: '请输入本国姓名', trigger: 'blur' }]">
<el-input v-model="item.native_last_name" v-on:input="setEngName(1,index,item.native_last_name)" placeholder="姓" size="mini" style="width:100px"></el-input>
<el-input v-model="item.native_first_name" v-on:input="setEngName(2,index,item.native_first_name)" placeholder="名" size="mini" style="width:100px;margin-left:10px"></el-input>
</el-form-item>
<el-form-item label="英文姓名" :prop="'customNew.'+index+'.english_last_name'" :rules="[{ required: true, message: '请输入英文姓名', trigger: 'blur' }]">
<el-input v-model="item.english_last_name" placeholder="姓" size="mini" style="width:100px"></el-input>
<el-input v-model="item.english_first_name" placeholder="名" size="mini" style="width:100px;margin-left:10px"></el-input>
</el-form-item>
<el-form-item label="性别">
<el-select @change="GenderSelect" size="mini" style="margin-right:8px" v-model="item.gender" filterable placeholder="请选择">
<el-option label="男" value="F"></el-option>
<el-option label="女" value="M"></el-option>
</el-select>
</el-form-item>
<el-form-item label="手机号" :prop="'customNew.'+index+'.tel_number'" :rules="[{required: true, message: '电话号码不能为空', trigger: 'blur'},{ required: true, trigger: 'blur', pattern: /^1[3|4|5|7|8|9][0-9]\d{8}$/ ,message: '请填写正确的手机号'}]">
<el-select v-show="tel_country_code.length>0" v-model="item.tel_country_code" size="mini" style="margin-right:8px" filterable placeholder="请选择">
<el-option
v-for="(item,index) in tel_country_code"
:key="index"
:label="item.Country_Name"
:value="item.Tel_Area">
</el-option>
</el-select>
<el-input size="mini" style="width:300px" v-model="item.tel_number"></el-input>
</el-form-item>
<el-form-item label="国籍" :prop="'customNew.'+index+'.nationality'" :rules="[{required: true, message: '国籍不能为空', trigger: 'blur'}]">
<el-select v-show="tel_country_code.length>0" v-model="item.nationality" size="mini" style="margin-right:8px" filterable placeholder="请选择">
<el-option
v-for="(item,index) in tel_country_code"
:key="index"
:label="item.Country_Name"
:value="item.Country_Code">
</el-option>
</el-select>
</el-form-item>
<el-form-item label="出生日期" :prop="'customNew.'+index+'.birth'" :rules="[{ type: 'string', required: true, message: '请选择日期', trigger: 'change' }]">
<el-date-picker size="small" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="item.birth"></el-date-picker>
</el-form-item>
<el-form-item label="护照号" :prop="'customNew.'+index+'.passport_no'" :rules="[{ required: true, message: '请输入护照信息', trigger: 'blur' }]">
<el-input v-model="item.passport_no" placeholder="请输入护照号" size="mini" style="width:220px"></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>
</el-form>
<el-form class="OrderConForm" :model="freeMsg" label-width="100px">
<div v-show="payObj.type=='01'" class="commomStyle">
<div class="titleDiv">
<span class="redSpan"></span>
<span class="f18 pfR">提示</span>
<span class="f18 pfR">支付方式</span>
</div>
<div class="f12" style="padding:20px">
<div class="f12" style="padding:20px;padding-left:80px">
<el-form-item label="信用卡号">
<el-input placeholder="信用卡号" size="mini" style="width:220px" v-model="payObj.credit_card.number"></el-input>
</el-form-item>
<el-form-item label="信用卡cvv">
<el-input placeholder="信用卡cvv" size="mini" style="width:220px" v-model="payObj.credit_card.cvv"></el-input>
</el-form-item>
<el-form-item label="信用卡到期日">
<el-date-picker
size="small" value-format="yyyy-MM-dd" type="date" placeholder="选择日期"
v-model="payObj.credit_card.expiry"></el-date-picker>
东京市从2002年10月起征收住宿税。征税标准根据住宿金额按每人每晚征收，
每晚住宿费在1万日元以上每人每晚征收100日元，1.5万日元
以上每人每晚征收200日元，部分房价不包含住宿税，需客人另付前台 。
</el-form-item>
<el-form-item label="信用卡持有人">
<el-input placeholder="信用卡cvv" size="mini" style="width:220px" v-model="payObj.credit_card.holder"></el-input>
</el-form-item>
<el-form-item label="信用卡类型">
<el-select size="mini" style="margin-right:8px" v-model="payObj.credit_card.type" filterable placeholder="请选择">
<!-- <el-option
v-for="(item,index) in tel_country_code"
:key="index"
:label="item.info"
:value="item.code">
</el-option> -->
</el-select>
</el-form-item>
</div>
</div>
<div class="OrderConBtn">
</el-form>
<div :loading="BtnLoading" @click="PayBtn" 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">
......@@ -81,22 +166,52 @@
<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>
<el-row class="cee f22">
<el-col :span="10">{{freeMsg.prod_name}}</el-col>
<el-col :span="14" style="text-align:right">
<p class="cee f22 pfR" v-if="dataDetail.prod">
<span v-if="dataDetail.prod.policy_no=='1'">不扣手续费，退全额</span>
<span v-if="dataDetail.prod.policy_no=='2'">无法退费</span>
<span v-if="dataDetail.prod.policy_no=='3'">指定手续费</span>
</p>
</el-col>
</el-row>
<p style="margin:15px 0" class="f14"><span class="c99" style="margin-right:20px">日期</span><span class="c66">{{freeMsg.dateStr}}</span></p>
<p class="f14"><span class="c99" style="margin-right:20px">人数</span>
<span v-if="freeMsg.price1_qty>0" class="c66">({{freeMsg.price1_age_range}}) x {{freeMsg.price1_qty}}</span>&nbsp;&nbsp;&nbsp;
<span v-if="freeMsg.price2_qty>0" class="c66">({{freeMsg.price2_age_range}}) x {{freeMsg.price2_qty}}</span>&nbsp;&nbsp;&nbsp;
<span v-if="freeMsg.price3_qty>0" class="c66">({{freeMsg.price3_age_range}}) x {{freeMsg.price3_qty}}</span>&nbsp;&nbsp;&nbsp;
<span v-if="freeMsg.price4_qty>0" class="c66">({{freeMsg.price4_age_range}}) x {{freeMsg.price4_qty}}</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>
<span style="float:right" class="cee f26 pfR">¥ {{freeMsg.MySelfTotalPrice}}</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 v-if="freeMsg.price1_qty>0">
<el-col :span="6">({{freeMsg.price1_age_range}}) x {{freeMsg.price1_qty}}</el-col>
<el-col :span="12"><div class="dashDiv"></div></el-col>
<el-col style="text-align:center" :span="6">￥{{freeMsg.price1_b2c}}</el-col>
</el-row>
<el-row v-if="freeMsg.price2_qty>0">
<el-col :span="6">({{freeMsg.price2_age_range}}) x {{freeMsg.price2_qty}}</el-col>
<el-col :span="12"><div class="dashDiv"></div></el-col>
<el-col style="text-align:center" :span="6">￥{{freeMsg.price2_b2c}}</el-col>
</el-row>
<el-row v-if="freeMsg.price3_qty>0">
<el-col :span="6">({{freeMsg.price3_age_range}}) x {{freeMsg.price3_qty}}</el-col>
<el-col :span="12"><div class="dashDiv"></div></el-col>
<el-col style="text-align:center" :span="6">￥{{freeMsg.price3_b2c}}</el-col>
</el-row>
<el-row v-if="freeMsg.price4_qty>0">
<el-col :span="6">({{freeMsg.price4_age_range}}) x {{freeMsg.price4_qty}}</el-col>
<el-col :span="12"><div class="dashDiv"></div></el-col>
<el-col style="text-align:center" :span="6">￥{{freeMsg.price4_b2c}}</el-col>
</el-row>
</div>
......@@ -113,21 +228,314 @@ import moment from 'moment'
export default {
data () {
return {
BtnLoading:false,
dataDetail:{},
form:{},
freeMsg:{
custom:[],
},
booking_field:{},
markMsg:{
contact:false,
peopleType:1,
birth:false,
english_first_name:false,//英文名
english_last_name:false,//英文姓
gender:false,//性别
guide_lang:false,//导游语言
native_first_name:false,//本国名
native_last_name:false,//本国姓
tel_country_code:false,//电话国号
tel_number:false,//电话号码
},
tel_country_code:[],
guide_langList:[],
pickerOptions0: {
disabledDate(time) {
return time.getTime() > Date.now() - 8.64e7
}
},
concat:false,
payObj:{
type:'02',
credit_card:{},
},
listform:{
customNew:[],
},
}
},
created(){
this.freeMsg = JSON.parse(sessionStorage.getItem("freeMsg"));
let id = this.$route.query.id;
this.freeMsg.buyer_country="TW";
this.freeMsg.guide_lang="zh-tw";
this.freeMsg.custom=[];
this.freeMsg.pay={};
this.freeMsg.buyer_tel_country_code="";
this.freeMsg.pay={
type: "02",
// credit_card: {
// number: "",
// cvv: "",
// expiry: "",
// holder: "",
// type: ""
// }
};
console.log("this.freeMsg",this.freeMsg)
this.getDetails(id)
this.GetInfo();
},
mounted() {
},
methods: {
GenderSelect(){
this.$forceUpdate()
},
PayBtn(){
let freeformval=false;
let listformval=false;
this.$refs.freeMsg.validate((valid) => {
if (valid) {
freeformval=true;
}
});
this.$refs.listform.validate((valid) => {
if (valid) {
listformval=true;
}
});
if(!freeformval&&!listformval){
return;
}
if(this.freeMsg.buyer_last_name==""||!this.freeMsg.buyer_last_name){
this.Error("请输入预订人的名");
return;
}
if(this.freeMsg.buyer_first_name==""||!this.freeMsg.buyer_first_name){
this.Error("请输入预订人的姓");
return;
}
if(this.freeMsg.buyer_tel_number==""||!this.freeMsg.buyer_tel_number){
this.Error("请输入预订人的电话号码");
return;
}
if(this.freeMsg.buyer_email==""||!this.freeMsg.buyer_email){
this.Error("请输入预订人的电子邮件");
return;
}
if(this.concat){
if(this.listform.customNew.length>0){
let msg=Object.assign({},this.listform.customNew[0]);
msg.cus_type="contact";
this.listform.customNew.push(msg);
}
}
this.freeMsg.custom=this.listform.customNew;
if(this.payObj.type=='01'){
let credit_card=this.payObj.credit_card;
if(credit_card.number=="" || !credit_card.number){
this.Error("请填写信用卡号！");
return;
}
if(credit_card.cvv=="" || !credit_card.cvv){
this.Error("请填写信用卡cvv！");
return;
}
if(credit_card.expiry=="" || !credit_card.expiry){
this.Error("请填写信用卡到期时间！");
return;
}
if(credit_card.holder=="" || !credit_card.holder){
this.Error("请填写信用卡持有者！");
return;
}
if(credit_card.type=="" || !credit_card.type){
this.Error("请选择信用卡类型！");
return;
}
this.freeMsg.pay=this.payObj;
}
this.BtnLoading=true;
this.apipost('dmc_post_Get_KKDayOrderBooking',this.freeMsg,res=>{
console.log("res",res);
this.BtnLoading=false;
if(res.data.data.orderId) {
this.Success("下单成功！")
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
setEngName(type,index, name) {
if (type == 1 && name != "") {
this.listform.customNew[index].english_last_name = this.$languageUtils.ConvertChineseToPinYin(name);
} else {
this.listform.customNew[index].english_first_name = this.$languageUtils.ConvertChineseToPinYin(name);
}
this.$forceUpdate()
},
getDetails(id){
// http://efficient.oytour.com/api/kkday/QueryProduct
this.apiJavaPost(
"/api/kkday/QueryProduct",
{
"prod_no": id ? id : "28474",
"locale":"zh-cn"
},
res => {
if (res.data.resultCode === 1) {
this.DomainUrl=res.data.data.KkdayDomain;
let data = res.data.data;
// console.log(data)
this.dataDetail = data;
this.booking_field=data.booking_field;
let customObj=this.booking_field.custom;
let list_option=this.booking_field.custom.cus_type.list_option;
if(list_option.length==0){
this.markMsg.peopleType=1;
}
this.listform.customNew=[];
let peoplenum=this.freeMsg.price1_qty+this.freeMsg.price2_qty+this.freeMsg.price3_qty+this.freeMsg.price4_qty;
if(list_option.length==0){
this.markMsg.peopleType=1;
let msg={
cus_type:"cus_01",
english_last_name:"",
english_first_name:'',
native_last_name:'',
native_first_name:'',
gender:'F',
birth:'',
nationality:'CN',
passport_no:'',
tel_country_code:'',
tel_number:"",
};
this.listform.customNew.push(msg);
}
list_option.forEach(item => {
if(item=="cus_01"){
this.markMsg.peopleType=1;
let msg={
cus_type:"cus_01",
english_last_name:"",
english_first_name:'',
native_last_name:'',
native_first_name:'',
gender:'F',
birth:'',
nationality:'CN',
passport_no:'',
tel_country_code:'',
tel_number:"",
};
this.listform.customNew.push(msg);
}
if(item=="contact"){
this.concat=true;
}
if(item=="cus_02"){
this.markMsg.peopleType=2;
for(let i=0;i<peoplenum;i++){
let msg={
cus_type:"cus_02",
english_last_name:"",
english_first_name:'',
native_last_name:'',
native_first_name:'',
gender:'F',
birth:'',
nationality:'CN',
passport_no:'',
tel_country_code:'',
tel_number:"",
};
this.listform.customNew.push(msg);
}
}
console.log("this.listform.customNew",this.listform.customNew)
});
// 判断生日是否必填
if(customObj.birth){
this.markMsg.birth=true;
}
// 英文名
if(customObj.english_first_name){
this.markMsg.english_first_name=true;
}
if(customObj.english_last_name){
this.markMsg.english_last_name=true;
}
// 性别
if(customObj.gender){
this.markMsg.gender=true;
}
// 导游语言
if(customObj.guide_lang){
this.markMsg.guide_lang=true;
this.guide_langList=customObj.guide_lang.list_option;
}
// 导游语言
if(customObj.native_first_name){
this.markMsg.native_first_name=true;
}
// 导游语言
if(customObj.native_last_name){
this.markMsg.native_last_name=true;
}
// 国家区域
if(customObj.tel_country_code){
this.markMsg.tel_country_code=true;
// this.tel_country_code=customObj.tel_country_code.list_option;
}
// 电话号码
if(customObj.tel_number){
this.markMsg.tel_number=true;
}
} else {
this.Error(res.data.message);
}
},
null
);
},
GetInfo(){
this.apipost('dmc_post_GetTelephoneCountryCode',{},res=>{
console.log("res",res);
if(res.data.resultCode == 1) {
this.tel_country_code=res.data.data.jo.CountryAreas;
this.payObj.type=res.data.data.paytype;
}else{
this.$message.error(res.data.message)
}
},err=>{})
},
}
}
</script>
<style>
@import '../../assets/css/common.css';
.OrderCon .OrderConForm .OrderConBtn{
.OrderCon .OrderConBtn{
width:100%;
height:66px;
line-height:66px;
......
src/components/mall/FreeCalendar.vue 0 → 100644
View file @ 8936b4b9
<style>
.LocalTourCalendar .calendar{
width: 100%;
overflow: hidden;
table-layout: fixed;
}
.LocalTourCalendar .calendar th{
height: 20px;
padding: 10px 0;
line-height: 20px;
color: #999999;
text-align: center;
font-size: 14px;
}
.LocalTourCalendar .dayList{
position: relative;
float: left;
width: 58px;
height: 44px;
cursor: pointer;
border: 1px solid transparent;
background-color: #F5F5F5;
font-size: 12px;
border-bottom:1px solid #E1E1E1;
border-right:1px solid #E1E1E1;
box-sizing: border-box;
}
.LocalTourCalendar .dayList:nth-child(7n){
border-right: none;
}
.LocalTourCalendar .dayList.noPrice{
cursor: default;
color: #ccc;
background-color: #FFFFFF;
}
.LocalTourCalendar .dayList.selectDay{
border: 1px solid #ff4646;
background-color: #f9f7f6;
}
.LocalTourCalendar .dayList.yesPrice{
font-weight: bold;
font-family: 'PingFangR';
}
.LocalTourCalendar .dayList p{
float: initial;
width: 100%;
text-align: left;
padding-left:5px;
margin: 2px 0;
box-sizing: border-box;
}
.LocalTourCalendar .dayList p.price{
float: initial;
width: 100%;
text-align: right;
padding:0;
margin: 2px 0;
color: #FF5A00;
font-size: 12px;
padding-right: 5px;
box-sizing: border-box;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.LocalTourCalendar .monthDayList{
/* overflow: auto; */
border-top:1px solid #E1E1E1;
}
.LocalTourCalendar .monthDayList:after {
clear: both;
content: '.';
display: block;
height: 0;
overflow: hidden;
}
.LocalTourCalendar .dayList.yesPrice:hover{
background: #FF680B;
color:#fff!important;
}
.LocalTourCalendar .dayList.yesPrice:hover .price{
color:#fff!important;
}
</style>
<template>
<div class="LocalTourCalendar" id='LocalTourCalendar'>
<table class="calendar" cellspacing=0 cellpadding=0>
<thead>
<th style="color:#666666;font-size:12px;" v-for="(i,index) in week" :key="index">{{i}}</th>
</thead>
</table>
<div class="monthDayList">
<div @click="selectDate(item)" v-for="(item,index) in daysData" class="dayList" :key="index" :class="{selectDay:isSelect == index,noPrice:item.pkg_no==''||!item.pkg_no,yesPrice:item.pkg_no!=''&&item.pkg_no}">
<p>{{item.day}}</p>
<!-- -->
<!-- <p class="price" v-if="item.price!='0.00' && item.price">￥{{item.price | priceFormat}}</p> -->
</div>
</div>
</div>
</template>
<script>
import moment from 'moment'
import bus from '../../plugins/event-bus'
export default {
props:{
dateData: Array,
day:String,
},
data(){
return{
today:moment().format("YYYY-MM-DD"),
week:['周日','周一','周二','周三','周四','周五','周六'],
// priceData:this.dateData[0],
priceData:[],
currentDay: this.day,
DaysInMonth:[],
daysData:[],
isSelect:-1,
mydate:-1,
}
},mounted(){
// this.getYearMonthDay();
},created(){
},methods:{
selectDate(item){
let a=false;
a=moment(this.today).isBefore(moment(item.date_str));
if(item.pkg_no &&item.pkg_no!="" && a){
this.$emit('SelectChild',item);
}
},
getYearMonthDay(list){
this.priceData=list[0];
let day=this.day;
let currentYear = day.substring(0,4); //当前年份
let currentMonth =day.substring(5,7); //当前月份
let date = new Date();
let strDate = date.getDate();
let strMonth = (date.getMonth()+1).toString();
// alert(typeof strMonth)
//判断是否是闰年
if (this.isleapYears(currentYear)) {
this.$data.DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}else{
this.$data.DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31];
}
let monthDay = this.$data.DaysInMonth[Number(currentMonth)-1];//当前月的天数
let daysData = [];
//给数据源赋值
for (let i = 0 ;i < Number(monthDay) ;i++) {
var priceDict = {'day':String(i+1),'price':0,'dis':false,date_str:''};
daysData.push(priceDict);
}
this.daysData = daysData;
var currentDay = `${currentYear}-${currentMonth}-01`;
var dateObject = new Date(currentDay);
var firstDay = dateObject.getDay();//得到每个月1号是周几
// for (let i in this.priceData) {
let today=moment().format("YYYY-MM-DD");
for (let i=0;i<this.priceData.length;i++) {
let price = this.priceData[i];
let dateStr=moment(price.dateStr).format("YYYY-MM-DD");
var dayIndex = price.dateStr.substring(price.dateStr.length-2,price.dateStr.length);
var dayDict = daysData[Number(dayIndex)-1];
if (moment(dateStr).isBefore(today)){
dayDict.pkg_no='';
}else{
dayDict.pkg_no = price.pkg_no;
}
// dayDict.price = price.price;
dayDict.date_str=price.dateStr;
dayDict.sale_day=price.sale_day;
// dayDict.couponsId=price.couponsId;
// dayDict.priceId=price.priceId;
// dayDict.ticketId=price.ticketId;
if(dayIndex<strDate&&strMonth==currentMonth){
dayDict.price='';
}
}
if (firstDay > 0) {
var firstDayData = [];
for (var i=0; i< firstDay;i++) {
var dict = {'day':' ',price:'','dis':true};
firstDayData.push(dict);
}
this.daysData = firstDayData.concat(daysData);
}else{
this.daysData = daysData;
}
// console.log("this.daysData",this.daysData)
},
isleapYears(year){
if (((year % 4)==0) && ((year % 100)!=0) || ((year % 400)==0)) {
return true;
} else{
return false;
}
},
}
}
</script>
src/components/taskPage/Img5.vue 0 → 100644
View file @ 8936b4b9
<style scoped>
.div1{
width: 100%;
height: auto;
position: relative;
}
.div1 img {
width: 100%;
/* position: absolute; */
z-index:100;
}
.Homeimg{
position: absolute;
z-index: 20000;
width: 45px!important;
height: 45px!important;
left: 56px;
top: 39px;
cursor: pointer;
}
.bottom img{
width: 100%;
position: absolute;
z-index: 1
}
a{
text-decoration: none;
color:#111111;
}
.FM_div{
width:100%;
height:auto;
position: relative;
}
.FM_div img{
width:100%;
position: absolute;
z-index:100;
}
.div3 img{
width:100%;
height: 100%;
}
.pcDiv .video1{
position:absolute;
top: 38%;
left: 32.5%;
width: 37.1%;
}
.pcDiv .video2{
position:absolute;
top: 58.7%;
left: 32.5%;
width: 37.1%;
}
.pcDiv .video3{
position:absolute;
top: 76%;
left: 26.3%;
width: 21%;
}
.phoneDiv .video1{
position: absolute;
top: 41.1%;
left: 10.7%;
width: 81%;
}
.phoneDiv .video2{
position:absolute;
top: 58.9%;
left: 10.7%;
width: 81%;
}
.phoneDiv .video3{
position:absolute;
top: 84.4%;
left: 10%;
width: 34%;
}
</style>
<template>
<div>
<div style="position: relative;" v-show="isPhone">
<img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
<div class="div3 div1 phoneDiv" ref="div3" >
<img class="img" src="../../assets/img/juan/img5_1.jpg" alt=""/>
<div class="video1">
<video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
<source src="../../assets/media/rqq.mp4" type="video/mp4">
<source src="../../assets/media/rqq.mp4" type="video/ogg">
<source src="../../assets/media/rqq.mp4" type="video/webm">
</video>
</div>
<div class="video2">
<video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
<source src="../../assets/media/hxs.mp4" type="video/mp4">
<source src="../../assets/media/hxs.mp4" type="video/ogg">
<source src="../../assets/media/hxs.mp4" type="video/webm">
</video>
</div>
<div class="video3" ref="video3">
<video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
<source src="../../assets/media/mhb.mp4" type="video/mp4">
<source src="../../assets/media/mhb.mp4" type="video/ogg">
<source src="../../assets/media/mhb.mp4" type="video/webm">
</video>
</div>
</div>
</div>
<div style="position: relative;" v-show="!isPhone">
<img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt />
<div class="div1 pcDiv" ref="div1">
<img class="img" src="../../assets/img/juan/img5.jpg" alt=""/>
<div class="video1">
<video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
<source src="../../assets/media/rqq.mp4" type="video/mp4">
<source src="../../assets/media/rqq.mp4" type="video/ogg">
<source src="../../assets/media/rqq.mp4" type="video/webm">
</video>
</div>
<div class="video2">
<video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
<source src="../../assets/media/hxs.mp4" type="video/mp4">
<source src="../../assets/media/hxs.mp4" type="video/ogg">
<source src="../../assets/media/hxs.mp4" type="video/webm">
</video>
</div>
<div class="video3" ref="video3">
<video style="width:100%;height:100%;border:none" loop="loop" controls="controls" autoplay="autoplay">
<source src="../../assets/media/mhb.mp4" type="video/mp4">
<source src="../../assets/media/mhb.mp4" type="video/ogg">
<source src="../../assets/media/mhb.mp4" type="video/webm">
</video>
</div>
</div>
</div>
</div>
</template>
<script>
export default {
data() {
return {
ab:0,
SaleList:[],
cityId:262,
companyId:0,
isPhone:false,
height2:"0px",
ab3:0
};
},
mounted() {
this.$nextTick(()=>{
// this.getFirstImg();
// this.AutoExchange();
let Width = window.outerWidth;
console.log("Width",Width);
console.log("111",this.$refs.video3.style.width);
let video3Width=this.$refs.video3.style.width
let width=Width
})
  var ua = navigator.userAgent.toLowerCase();//获取判断用的对象
let userAgentInfo = navigator.userAgent;
let Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
for (let v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
this.isPhone = true;
// this.AutoExchange3();
break;
}
}
},
created() {
this.cityId=localStorage.cityId?localStorage.cityId:0;
this.companyId=localStorage.site?parseInt(localStorage.site):0;
let oWidth = window.screen.width;
},
components: {
},
methods: {
goLocalDes(idDes,obj){
let path = 'detailTwo'
path=`${path}/${encodeURIComponent(idDes)}/${obj.tcid}`;
let routeData = this.$router.resolve({ path:path});
window.open(routeData.href, '_blank');
},
goUrl(path){
this.$router.push({ path,query:{}})
},
}
};
</script>
src/components/taskPage/JuanDetails.vue
View file @ 8936b4b9
......@@ -144,7 +144,7 @@ export default {
},
},mounted(){
document.getElementsByClassName("DetailDiv")[0].onclick=function(){return false;}
},created(){
......
src/components/taskPage/JuanList.vue
View file @ 8936b4b9
......@@ -188,7 +188,8 @@
}
.juanList .serachDiv .searchInput{
background:rgba(255,255,255,1);
border-radius:4px;
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
width:556px;
height:48px;
position: relative;
......@@ -227,7 +228,7 @@
box-shadow: 0 0 15px 0 #888;
}
.juanList .serachDiv .hotList .el-col{
border-right:1px solid #E9E9E9;
border-right:1px dashed #E9E9E9;
padding-left: 15px;
box-sizing: border-box;
}
......@@ -329,7 +330,7 @@
<p class="f30 pfR" style="text-align:center;color:#fff">全世界最棒的旅游体验</p>
<p style="text-align:center;color:#fff;margin-bottom:15px">探索有趣又独特目的地旅游体验</p>
<div @click.stop.prevent="getRef($event,2)" class="searchInput">
<el-input ref="inputs" @focus="InputFocus" @blur="InputBlur" @input="InputChange" v-model="text" placeholder="请输入"></el-input>
<el-input ref="inputs" @focus="InputFocus" @input="InputChange" v-model="text" placeholder="请输入"></el-input>
<span @click="SearchText" class="searchBtn"><i class="iconfont icon-search"></i></span>
</div>
<div @click.stop.prevent="getRef($event,2)" v-loading="serachLoading" v-if="searchShow" class="searchHot">
......@@ -344,14 +345,21 @@
<el-col :span="8">
<li @click="SearchLi('京都')">京都<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('奈良')">奈良<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('曼谷')">曼谷</li>
<li @click="SearchLi('古巴')">古巴</li>
</el-col>
<el-col :span="8">
<li @click="SearchLi('北海道')">北海道<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('东京都')">东京都<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('巴黎')">巴黎</li>
<li @click="SearchLi('纽约')">纽约</li>
</el-col>
<el-col :span="8">
<li @click="SearchLi('札幌')">札幌<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('神户')">神户<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('伦敦')">伦敦</li>
</el-col>
</el-row>
......@@ -361,7 +369,7 @@
</div>
<div class="w1200" style="margin-top:100px;padding-bottom:10px">
<p v-show="TOPlist.length>0" class="f30 pfR" style="">探索<span style="color:#EE4454">. 热门城市</span></p>
<p v-show="TOPlist.length>0" class="f30 pfR" style="">探索<span style="color:#EE4454">. 热门体验</span></p>
<div class="hotCity">
<div v-for="(item,index) in TOPlist" @click="Gourl(item)" :key="index" @mouseenter="mouseOver(index)" class="cityItem" :class="HoverIndex==index?'cityItemBig':''">
<img :src="item.imgs" :onerror="defaultImg" alt="">
......@@ -545,8 +553,6 @@ export default {
pageIndex:1,
},
dataloading:false,
focusa:0,
focusb:0,
}
},
methods:{
......@@ -564,9 +570,6 @@ export default {
}else{
this.searchHot=true;
}
},
InputBlur(){
},
handleCurrentChange(val) {
// 翻页
......
src/components/taskPage/JuanSaid.vue
View file @ 8936b4b9
......@@ -5,7 +5,7 @@
transition: all 0.6s;
}
.tst-one{
background: url('../../assets/img/juan/bg3.jpg') 100% center;
background: url('../../assets/img/juan/bg4_1.jpg') 100% center;
background-size: cover;
}
.tst-two{
......@@ -17,12 +17,16 @@
background-size: cover;
}
.tst-four{
background: url('../../assets/img/juan/tuan4.jpg') 100% center;
background: url('../../assets/img/juan/bg3.jpg') 100% center;
background-size: cover;
}
.tst-five{
background: url('../../assets/img/juan/tuan5.jpg') 100% center;
background-size: cover;
}
.tstt{
background: url('../../assets/img/juan/bg3.jpg') 100% center;
background: url('../../assets/img/juan/listbanner.png') 100% center;
background-size: cover;
height: 350px;
cursor: pointer;
......@@ -163,13 +167,138 @@
width: 25%;
text-align: center;
}
.juanHome .serachDiv{
width:560px;
margin:0 auto;
}
.juanHome .serachDiv .searchInput{
background:rgba(255,255,255,1);
border-top-left-radius: 4px;
border-bottom-left-radius: 4px;
width:556px;
height:48px;
position: relative;
}
.juanHome .serachDiv .searchInput input{
width: 486px;
height: 46px;
border: none;
outline: none;
border-radius:4px;
padding-left: 15px;
box-sizing: border-box;
}
.juanHome .serachDiv .searchInput .searchBtn{
width: 70px;
height:48px;
display: inline-block;
background: #EE4454;
position: absolute;
top: 0;
text-align: center;
line-height: 48px;
cursor: pointer;
}
.juanHome .serachDiv .searchInput .searchBtn i{
color:#fff;
font-size:18px;
}
.juanHome .serachDiv .searchHot{
background:rgba(255,255,255,1);
border-radius:4px;
width:556px;
margin-top:6px;
padding:20px;
box-sizing: border-box;
box-shadow: 0 0 15px 0 #888;
}
.juanHome .serachDiv .hotList .el-col{
border-right:1px dashed #E9E9E9;
padding-left: 15px;
box-sizing: border-box;
}
.juanHome .serachDiv .hotList .el-col:last-child{
border: none;
}
.juanHome .serachDiv .hotList .el-col li{
padding-bottom: 10px;
cursor: pointer;
}
.juanHome .serachDiv .hotList .el-col li img{
margin-left: 8px;
}
.juanHome .serachDiv .hotList .el-col li:last-child{
padding: 0;
}
.juanHome .serachDiv .ScrollHot{
max-height: 300px;
overflow-y: scroll;
}
.juanHome .searchUl li{
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
font-size: 14px;
margin:6px 0;
}
.juanHome .searchUl li:hover{
text-decoration: underline;
color:#EE4454;
cursor: pointer;
}
.juanHome .serachDiv .ScrollHot::-webkit-scrollbar{width: 4px;height: 8px;}
.juanHome .serachDiv .ScrollHot::-webkit-scrollbar-thumb{border-radius: 4px;box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);background: #c9c9c9;}
.juanHome .serachDiv .ScrollHot::-webkit-scrollbar-track{box-shadow: inset 0 0 2px rgba(0, 0, 0, 0.2);border-radius: 4px;background: #EDEDED;}
</style>
<template>
<div class="juan commonF">
<div @click="getRef($event,1)" class="juan juanHome commonF">
<!-- 图片 -->
<div style="position:relative">
<!-- <img @click="goUrl('Home')" class="Homeimg" src="../../assets/img/juan/home.png" alt /> -->
<div class="tstt" @click="goUrl('FoodImg2')"></div>
<div class="tstt"></div>
<div style="position: absolute;top:100px;width:100%;z-index:1000">
<div class="serachDiv">
<p class="f30 pfR" style="text-align:center;color:#fff">全世界最棒的旅游体验</p>
<p style="text-align:center;color:#fff;margin-bottom:15px">探索有趣又独特目的地旅游体验</p>
<div @click.stop.prevent="getRef($event,2)" class="searchInput">
<el-input ref="inputs" @focus="InputFocus" @input="InputChange" v-model="text" placeholder="请输入"></el-input>
<span @click="SearchText" class="searchBtn"><i class="iconfont icon-search"></i></span>
</div>
<div @click.stop.prevent="getRef($event,2)" v-loading="serachLoading" v-if="searchShow" class="ScrollHot searchHot">
<ul class="searchUl">
<li @click="Gourl(item)" v-for="(item,index) in searchList" :key="index+5000000">{{item.title}}</li>
<li v-show="searchList.length==0" style="margin:6px 0;text-align:center">暂无数据</li>
</ul>
</div>
<div @click.stop.prevent="getRef($event,2)" v-show="searchHot" class="searchHot">
<p class="pfR">热门目的地</p>
<el-row class="hotList" style="margin-top:15px">
<el-col :span="8">
<li @click="SearchLi('京都')">京都<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('奈良')">奈良<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('曼谷')">曼谷</li>
<li @click="SearchLi('古巴')">古巴</li>
</el-col>
<el-col :span="8">
<li @click="SearchLi('北海道')">北海道<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('东京都')">东京都<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('巴黎')">巴黎</li>
<li @click="SearchLi('纽约')">纽约</li>
</el-col>
<el-col :span="8">
<li @click="SearchLi('札幌')">札幌<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('神户')">神户<img style="width:11px;height:14px" src="../../assets/img/visa/hot.png" alt=""></li>
<li @click="SearchLi('伦敦')">伦敦</li>
</el-col>
</el-row>
</div>
</div>
</div>
<!-- <el-carousel class="carousel" style="height:600px">
<el-carousel-item>
<img @click="goUrl('FoodImg')" src="../../assets/img/juan/bg1.jpg" alt="">
......@@ -223,13 +352,15 @@
<p class="f30" style="text-align:center;margin-top:100px">本季<span style="color:#EE4454">. 精选特惠</span></p>
<p class="f20" style="color:#999999;text-align:center">Selected Recommendation</p>
<div class="jxth destiDiv basefix">
<div @click="goUrl('FoodImg2')" class="destiItem tst-one">
<div @click="goUrl('FoodImg4')" class="destiItem tst-one">
</div>
<div @click="goUrl('Fire')" class="destiItem tst-two">
</div>
<div @click="goUrl('FoodImg')" class="destiItem tst-three">
</div>
<div @click="goUrl('FoodImg4')" class="destiItem tst-four">
<div @click="goUrl('FoodImg2')" class="destiItem tst-four">
</div>
<div @click="goUrl('Img5')" class="destiItem tst-five">
</div>
<!-- <div class="destiItem">
<img src="../../assets/img/home/tour1.png" alt="">
......@@ -334,9 +465,76 @@ export default {
height: 0,
width: 0,
userInfo: {},
searchShow:false,
serachLoading:false,
searchHot:false,
text:'',
searchList:[],
SearchMsg:{
pageSize:18,
pageIndex:1,
},
}
},
methods:{
Gourl(item){
let path="JuanDetails";
this.$router.push({ path,query:{id:item.id}})
},
getRef(e,num){
if(num==1){
this.searchShow=false;
this.searchHot=false;
}
},
InputFocus(){
if(this.text!=""){
this.searchShow=true;
this.InputChange();
}else{
this.searchHot=true;
}
},
InputChange(){
this.searchHot=false;
if(this.text==""){
this.searchHot=true;
this.searchShow=false;
this.serachLoading=false;
return;
}
this.searchShow=true;
this.serachLoading=true;
this.SearchMsg.texts=this.text;
this.SearchMsg.pageSize=1000;
this.apiJavaPost('/api/rssarticle/searchArticle',this.SearchMsg,res=>{
console.log("res",res);
this.serachLoading=false;
if(res.data.resultCode==1){
let data=res.data.data.list;
this.searchList=data;
}else{
this.Error(res.data.message);
}
},null)
},
SearchText(){
this.searchHot=false;
this.searchShow=false;
let that=this;
if(this.text==""){
this.Error("请输入搜索词！")
return;
}
this.goDestion(this.text);
},
SearchLi(str){
this.text=str;
this.SearchText();
this.searchHot=false;
},
goDestion(str){
let path="JuanList";
this.$router.push({ path,query:{search:str}})
......
src/router.js
View file @ 8936b4b9
......@@ -10,6 +10,7 @@ import FoodImg2 from "./components/taskPage/FoodImg2";
import FoodImg4 from "./components/taskPage/FoodImg4";
import xiazaiAPP from "./components/taskPage/xiazaiAPP";
import Fire from "./components/taskPage/Fire";
import Img5 from "./components/taskPage/Img5";
Vue.use(Router);
......@@ -764,6 +765,15 @@ export default new Router({
headerShow: true,
},
},
{
path: "/Img5",
name: "Img5",
component: Img5,
meta: {
title: "卷妹说",
headerShow: true,
},
},
]
});
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