Commit ffb9b711 authored by 黄奎's avatar 黄奎

页面修改

parent 308e3d4b
...@@ -3,95 +3,182 @@ import axios from 'axios' ...@@ -3,95 +3,182 @@ import axios from 'axios'
import md5 from 'js-md5' import md5 from 'js-md5'
//域名管理对象 //域名管理对象
Vue.prototype.domainManager = function() { Vue.prototype.domainManager = function () {
let domainUrl = ''; let domainUrl = '';
domainUrl = "http://192.168.2.214:8082"; domainUrl = "http://192.168.2.214:8082";
//domainUrl="http://192.168.0.110"; domainUrl = "http://192.168.0.110";
//let locationName = location.hostname; //let locationName = location.hostname;
// if (locationName.indexOf('testerp.oytour') !== -1) { // if (locationName.indexOf('testerp.oytour') !== -1) {
// domainUrl = "http://testapi.oytour.com"; // domainUrl = "http://testapi.oytour.com";
// } else if (locationName.indexOf('oytour') !== -1) { // } else if (locationName.indexOf('oytour') !== -1) {
// domainUrl = "http://reborn.oytour.com"; // domainUrl = "http://reborn.oytour.com";
// } // }
var obj = { var obj = {
//主地址 //主地址
DomainUrl: domainUrl, DomainUrl: domainUrl,
//常用提交数据URL //常用提交数据URL
PostUrl: domainUrl + "/api/common/post", PostUrl: domainUrl + "/api/common/post",
}; };
return obj; return obj;
} }
//HTTP提交数据 //HTTP提交数据
Vue.prototype.apipost = function(cmd, msg, successCall, faildCall) { Vue.prototype.apipost = function (cmd, msg, successCall, faildCall) {
if (msg == null || msg == "") { if (msg == null || msg == "") {
msg = {} msg = {}
} }
var timestamp = (new Date()).valueOf(); var timestamp = (new Date()).valueOf();
var apiurl = this.domainManager().PostUrl; var apiurl = this.domainManager().PostUrl;
var token = ""; var token = "";
var key = ""; var key = "";
var tempLanguage = 0; var tempLanguage = 0;
if (this.getLocalStorage() != null) { if (this.getLocalStorage() != null) {
token = this.getLocalStorage().token; token = this.getLocalStorage().token;
key = this.getLocalStorage().SecretKey; key = this.getLocalStorage().SecretKey;
} }
var encodeMsg = encodeURIComponent(JSON.stringify(msg)).toLowerCase(); var encodeMsg = encodeURIComponent(JSON.stringify(msg)).toLowerCase();
var md5Str = md5(`cmd=${cmd}&msg=${encodeMsg}&timestamp=${timestamp}&token=${token}&key=${key}`); var md5Str = md5(`cmd=${cmd}&msg=${encodeMsg}&timestamp=${timestamp}&token=${token}&key=${key}`);
var postData = { var postData = {
msg: msg, msg: msg,
cmd: cmd, cmd: cmd,
timestamp: timestamp, timestamp: timestamp,
token: token, token: token,
sign: md5Str, sign: md5Str,
languageId: tempLanguage languageId: tempLanguage
} }
this.$axios.post(apiurl, postData, { this.$axios.post(apiurl, postData, {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
'Referer-Viitto': this.$route.path 'Referer-Viitto': this.$route.path
} }
}) })
.then(res => { .then(res => {
successCall(res); successCall(res);
}, faildCall) }, faildCall)
} }
//获取缓存 //获取缓存
Vue.prototype.getLocalStorage = function() { Vue.prototype.getLocalStorage = function () {
try { try {
var localStorageData = window.localStorage["b2bUser"]; var localStorageData = window.localStorage["b2bUser"];
if (localStorageData !== undefined && localStorageData != 'undefined') { if (localStorageData !== undefined && localStorageData != 'undefined') {
return JSON.parse(localStorageData); return JSON.parse(localStorageData);
} else { } else {
return null; return null;
}
} catch (error) {
return null;
} }
} catch (error) {
return null;
}
} }
//向外跳转 //向外跳转
Vue.prototype.OpenNewUrl = function(URL) { Vue.prototype.OpenNewUrl = function (URL) {
if (URL && URL != '') { if (URL && URL != '') {
if (URL.indexOf("https") != -1) { if (URL.indexOf("https") != -1) {
var str = 'http://' + URL.substring(8); var str = 'http://' + URL.substring(8);
window.open(str, '_blank'); window.open(str, '_blank');
} else if (URL.indexOf("http") != -1) { } else if (URL.indexOf("http") != -1) {
var str = 'http://' + URL.substring(7); var str = 'http://' + URL.substring(7);
window.open(str, '_blank'); window.open(str, '_blank');
} else { } else {
window.open("http://" + URL, '_blank'); window.open("http://" + URL, '_blank');
}
} }
}
} }
//公用跳转 //公用跳转
Vue.prototype.CommonJump = function(path, obj) { Vue.prototype.CommonJump = function (path, obj) {
this.$router.push({ this.$router.push({
path: path, path: path,
query: obj query: obj
}); });
}
Vue.prototype.createCalendar = function (dateStr) {
var days = [];
var date;
if (dateStr) {
date = new Date(dateStr);
} else {
var now = new Date();
date = new Date(this.formatDate(now.getFullYear(), now.getMonth() + 1, 1));
}
var currentDay = date.getDate();
var currentYear = date.getFullYear();
var currentMonth = date.getMonth() + 1;
var currentWeek = date.getDay(); // 1...6,0
var str = this.formatDate(
currentYear,
currentMonth,
currentDay
);
days.length = 0;
// 当月第一天是周日,放在第一行第1个位置,前面0个
//初始化第一周
for (var i = currentWeek; i >= 0; i--) {
var d = new Date(str);
d.setDate(d.getDate() - i);
var dayobject = {};
dayobject.day = d;
days.push(dayobject); //将日期放入data 中的days数组 供页面渲染使用
}
//其他周
var temp = 35;
if (
currentWeek +
new Date(currentYear, currentMonth, 0).getDate() > 35
) {
temp = 41;
}
for (var i = 1; i < temp - currentWeek; i++) {
var d = new Date(str);
d.setDate(d.getDate() + i);
var dayobject = {};
dayobject.day = d;
days.push(dayobject);
}
return {
DayArray: days,
CurrentDay: currentDay,
CurrentMonth: currentMonth,
CurrentYear: currentYear,
CurrentWeek: currentWeek
};
}
//格式化日期
Vue.prototype.formatDate = function (year, month, day) {
var y = year;
var m = month;
if (m < 10) m = "0" + m;
var d = day;
if (d < 10) d = "0" + d;
return y + "-" + m + "-" + d;
}
//格式化日期二
Vue.prototype.formatDate2=function(dateStr)
{
var date=new Date(dateStr);
return {
CYear:date.getFullYear(),
CMonth:(date.getMonth()+1),
CDay:date.getDate(),
}
}
//添加月份
Vue.prototype.AddMonth=function(dateStr,month)
{
var v = new Date(dateStr);
if (v) {
var t = new Date(v.getFullYear(), v.getMonth(), v.getDate(), v.getHours(), v.getMinutes(), v.getSeconds(), v.getMilliseconds());
t.setMonth(v.getMonth() + month);
if (t.getDate() != v.getDate()) { t.setDate(0); }
return t;
}
} }
\ No newline at end of file
<style> <style>
.calendar-box { .calendar-box {
/* height:460px; */ /* height:460px; */
} }
.calendar-box .calendar { .calendar-box .calendar {
...@@ -63,118 +63,139 @@ ...@@ -63,118 +63,139 @@
margin: 10px 0; margin: 10px 0;
color: #ff4646; color: #ff4646;
} }
.Tripcan_info{
width:100%; .Tripcan_info {
width: 100%;
min-width: 300px; min-width: 300px;
height:100%; height: 100%;
border:1px solid #d1d1d1; border: 1px solid #d1d1d1;
margin-top:25px; margin-top: 25px;
background-color:#fff; background-color: #fff;
} }
.trafficInfo{
float:left; .trafficInfo {
width:60%; float: left;
min-height:190px; width: 60%;
border-right:1px solid #d1d1d1; min-height: 190px;
border-right: 1px solid #d1d1d1;
} }
.trafficTitle{
margin:20px; .trafficTitle {
margin: 20px;
} }
.trafficFlight{
padding:20px .trafficFlight {
padding: 20px
} }
.trafficList{
display:inline-block; .trafficList {
width:30%; display: inline-block;
text-align:center; width: 30%;
text-align: center;
vertical-align: middle; vertical-align: middle;
} }
.trafficTime{
display:flex; .trafficTime {
width:100px; display: flex;
margin:auto; width: 100px;
font-weight:bold; margin: auto;
font-weight: bold;
justify-content: space-between; justify-content: space-between;
} }
.TripStartInfo{
float:left; .TripStartInfo {
width:40%; float: left;
padding:20px; width: 40%;
color:#9a9696; padding: 20px;
color: #9a9696;
} }
.tripRightspan{
color:black; .tripRightspan {
color: black;
} }
.TripCanbao{
display:flex; .TripCanbao {
margin-top:10px; display: flex;
margin-top: 10px;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
} }
.TripCanbao>div:last-child{
color:orange; .TripCanbao>div:last-child {
font-size:28px; color: orange;
font-size: 28px;
font-weight: bold; font-weight: bold;
} }
.TripQi{
font-size:14px; .TripQi {
font-size: 14px;
font-weight: normal; font-weight: normal;
margin-left:10px; margin-left: 10px;
} }
.Tripcan_info:after { .Tripcan_info:after {
clear: both; clear: both;
content: '.'; content: '.';
display: block; display: block;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
} }
.monthDayList::after{
.monthDayList::after {
clear: both; clear: both;
content: '.'; content: '.';
display: block; display: block;
height: 0; height: 0;
overflow: hidden; overflow: hidden;
}
.monthDayList{
background-color: #fff;
}
.trip_BtnDiv{
margin-top:20px;
}
.traffic_Line{
position:relative;
width:70px;
height:1px;
margin:10px auto;
background-color: #d1d1d1;
}
.traffic_Line>div:first-child{
width:7px;
height:7px;
border-radius: 50%;
background-color: #d1d1d1;
position: absolute;
left:-3px;
top:-3px;
}
.traffic_Line>div:last-child{
width:7px;
height:7px;
border-radius: 50%;
background-color: #d1d1d1;
position: absolute;
right:-3px;
top:-3px;
}
@media only screen and (max-width: 1200px){
.trafficInfo {
width:100%;
border-right:0;
} }
.TripStartInfo{
width:100%; .monthDayList {
background-color: #fff;
}
.trip_BtnDiv {
margin-top: 20px;
}
.traffic_Line {
position: relative;
width: 70px;
height: 1px;
margin: 10px auto;
background-color: #d1d1d1;
}
.traffic_Line>div:first-child {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #d1d1d1;
position: absolute;
left: -3px;
top: -3px;
}
.traffic_Line>div:last-child {
width: 7px;
height: 7px;
border-radius: 50%;
background-color: #d1d1d1;
position: absolute;
right: -3px;
top: -3px;
} }
}
@media only screen and (max-width: 1200px) {
.trafficInfo {
width: 100%;
border-right: 0;
}
.TripStartInfo {
width: 100%;
}
}
</style> </style>
<template> <template>
<div class="q-mt-lg q-mb-lg"> <div class="q-mt-lg q-mb-lg">
...@@ -186,10 +207,20 @@ ...@@ -186,10 +207,20 @@
</thead> </thead>
</table> </table>
<div class="monthDayList"> <div class="monthDayList">
<div v-for="(item,index) in daysData" class="dayList" :key="index" @click="item.price?selectDate(index):''" <div class="hotelProductManage2_calendarItem" v-for="(item, index) in monthList" :key="index">
:class="{selectDay:isSelect == index,noPrice:!item.price,yesPrice:item.price}"> <div class="calendarItem_month">
<p>{{item.day}}</p> {{item.monthStr}}</div>
<p v-if="item.price" class="price">{{item.price}}</p> <div class="calendarItem_week">
<div v-for="(i,index) in week" :key="index">{{i}}</div>
</div>
<div class="calendarItem_day">
<div v-for="(subItem, index2) in item.dayArray" :key="index2"
:class="subItem.daymonth===item.month? 'nowMonth':'otherMonth'">
<div>
{{subItem.day}}
</div>
</div>
</div>
</div> </div>
</div> </div>
<div class="Tripcan_info"> <div class="Tripcan_info">
...@@ -215,22 +246,22 @@ ...@@ -215,22 +246,22 @@
</div> </div>
</div> </div>
<div class="TripStartInfo"> <div class="TripStartInfo">
<div> <div>
出发日期 :<span class="tripRightspan">2019-06-11(二)</span> 出发日期 :<span class="tripRightspan">2019-06-11(二)</span>
</div> </div>
<div>
团位编号 :<span class="tripRightspan">191919</span>
</div>
<div class="TripCanbao">
<div>可报名人数 <span class="tripRightspan">6位</span></div>
<div> <div>
团位编号 :<span class="tripRightspan">191919</span> 27900<span class="TripQi"></span>
</div>
<div class="TripCanbao">
<div>可报名人数 <span class="tripRightspan">6位</span></div>
<div>
27900<span class="TripQi"></span>
</div>
</div>
<div class="trip_BtnDiv">
<q-btn style="width:48%" type="a" label="专人需求单" color="secondary"/>
<q-btn style="width:48%;margin-left:10px;" type="a" label="立即预定" color="primary"/>
</div> </div>
</div>
<div class="trip_BtnDiv">
<q-btn style="width:48%" type="a" label="专人需求单" color="secondary" />
<q-btn style="width:48%;margin-left:10px;" type="a" label="立即预定" color="primary" />
</div>
</div> </div>
</div> </div>
</div> </div>
...@@ -238,7 +269,6 @@ ...@@ -238,7 +269,6 @@
</div> </div>
</template> </template>
<script> <script>
// import bus from '../../plugins/event-bus'
export default { export default {
props: { props: {
dateData: Array, dateData: Array,
...@@ -247,120 +277,81 @@ ...@@ -247,120 +277,81 @@
data() { data() {
return { return {
week: ['日', '一', '二', '三', '四', '五', '六'], week: ['日', '一', '二', '三', '四', '五', '六'],
monthList: [], //月份数据
priceData: this.dateData, priceData: this.dateData,
currentDay: this.day, currentDay: this.day,
DaysInMonth: [], //daysData: [],
daysData: [],
isSelect: -1, isSelect: -1,
mydate: -1,
} }
}, },
mounted() { mounted() {
console.log(this.dateData, 'dateDate'); this.getMonthsData()
console.log(this.day, 'daydaydaydayday'); //console.log(this.dateData, 'dateDate');
//console.log(this.day, 'daydaydaydayday');
}, },
created() { created() {
this.getYearMonthDay() //this.getMonthsData()
// bus.$on('order-chosen_calendar', this.orderChosen)
}, },
methods: { methods: {
orderChosen: function (date) { orderChosen: function (date) {
let day = parseInt(date.split('-')[2]).toString() // let day = parseInt(date.split('-')[2]).toString()
this.daysData.forEach((x, index) => { // this.daysData.forEach((x, index) => {
if (x.day === day) { // if (x.day === day) {
this.isSelect = index; // this.isSelect = index;
this.$emit('ChildrenSelect', date) // this.$emit('ChildrenSelect', date)
} // }
}); // });
// this.$emit('ChildrenSelect', clickDate)
}, },
selectDate(index) { selectDate(index) {
if (this.$data.daysData[index].day == 0) { // if (this.$data.daysData[index].day == 0) {
// bus.$emit('chosen-tripdate', null) // return;
return; // }
} // if (this.isSelect == index) {
if (this.isSelect == index) { // this.isSelect = -1;
this.isSelect = -1; // return;
// bus.$emit('chosen-tripdate', null) // }
return; // this.isSelect = index;
}
this.isSelect = index;
let currentDay = this.currentDay.split('-') // let currentDay = this.currentDay.split('-')
let clickDay = parseInt(this.$data.daysData[index].day) // let clickDay = parseInt(this.$data.daysData[index].day)
clickDay = clickDay < 10 ? ('0' + clickDay) : clickDay // clickDay = clickDay < 10 ? ('0' + clickDay) : clickDay
let clickDate = currentDay[0] + '-' + currentDay[1] + '-' + clickDay // let clickDate = currentDay[0] + '-' + currentDay[1] + '-' + clickDay
this.$emit('ChildrenSelect', clickDate) // this.$emit('ChildrenSelect', clickDate)
}, },
getYearMonthDay() { //生成月份和每一天
let currentYear = this.currentDay.substring(0, 4); //当前年份 getCalendarMonth(qDate, key) {
let currentMonth = this.currentDay.substring(5, 7); //当前月份 let tempMonthData = this.createCalendar(qDate);
let date = new Date(); let tempMonth = tempMonthData.DayArray;
let strDate = date.getDate(); let days = [];
let strMonth = (date.getMonth() + 1).toString(); for (let i = 0; i < tempMonth.length; i++) {
// alert(typeof strMonth) var tempDay = new Date(tempMonth[i].day);
//判断是否是闰年 var newDayStr = this.formatDate(tempDay.getFullYear(), (tempDay.getMonth() + 1), tempDay.getDate());
if (this.isleapYears(currentYear)) { days.push({
this.$data.DaysInMonth = [31, 29, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; date: tempMonth[i].day,
} else { daymonth: (tempDay.getMonth() + 1),
this.$data.DaysInMonth = [31, 28, 31, 30, 31, 30, 31, 31, 30, 31, 30, 31]; dayStr: newDayStr,
} day: tempDay.getDate()
let monthDay = this.$data.DaysInMonth[Number(currentMonth) - 1]; //当前月的天数 });
let daysData = []; };
//给数据源赋值 this.monthList.push({
for (var i = 0; i < Number(monthDay); i++) { monthStr: tempMonthData.CurrentYear + "-" + tempMonthData.CurrentMonth,
var priceDict = { month: tempMonthData.CurrentMonth,
'day': String(i + 1), dayArray: days,
'price': 0, });
'dis': false console.log("this.monthList", this.monthList);
};
daysData.push(priceDict);
}
this.daysData = daysData;
var currentDay = `${currentYear}-${currentMonth}-01`;
var dateObject = new Date(currentDay);
var firstDay = dateObject.getDay(); //得到每个月1号是周几
for (var i in this.priceData) {
var price = this.priceData[i];
var dayIndex = price.startDate.substring(price.startDate.length - 2, price.startDate.length);
var dqmonth= price.startDate.split('-')[1];
console.log(dqmonth,'dqmonthdqmonthdqmonthdqmonthdqmonth');
console.log(dayIndex,'dayIndexxxxx');
var dayDict = daysData[Number(dayIndex) - 1];
dayDict.price = price.b2BPrice;
console.log(strDate,'strDate');
console.log(currentMonth,'currentMonth');
console.log(strMonth,'strMonth');
// if (dayIndex < strDate && strMonth == currentMonth) {
// dayDict.price = '';
// }
if (dqmonth != 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,'daysdataaaaaasadasd');
}, },
isleapYears(year) { //获取月份
if (((year % 4) == 0) && ((year % 100) != 0) || ((year % 400) == 0)) { getMonthsData: function () {
return true; var currentDate = this.formatDate2(new Date());
} else { let month = currentDate.CYear + "-" + currentDate.CMonth + '-1'
return false; for (let i = 0; i < 2; i++) {
if (i != 0) {
let newDate = this.formatDate2(this.AddMonth(month, 1));
month = newDate.CYear + "-" + newDate.CMonth + '-1';
}
this.getCalendarMonth(month, i);
} }
}, },
} }
......
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