You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
295 lines
8.9 KiB
295 lines
8.9 KiB
<template>
|
|
<view>
|
|
<view class="lgn_t_box">
|
|
{{scenicDetail}}
|
|
<image class="wei_box" :src="scenicDetail!=null&&scenicDetail.slogo!=null?scenicDetail.slogo:''" mode="aspectFill"></image>
|
|
<view class="wei_box_con">
|
|
<view class="xqi_2">
|
|
<view class="box_1 an_box_4">
|
|
<view class="an_t_1" style="font-weight: bold;">{{scenicDetail!=null&&scenicDetail.sname!=null?scenicDetail.sname:''}}</view>
|
|
<view class="yue_jq_box">
|
|
<image src="../../../../static/images/icon_time.png" class="yue_dgimg_size"></image>
|
|
<text class="at_t">入园时间：</text>
|
|
<text class="at_t">{{scenicDetail!=null&&scenicDetail.businesstime!=null?scenicDetail.businesstime:''}}</text>
|
|
</view>
|
|
<view class="yue_jq_box">
|
|
<image src="../../../../static/images/icon_phe.png" class="yue_dgimg_size"></image>
|
|
<text class="at_t">景区电话：</text>
|
|
<text class="at_t" @tap="getTel(scenicDetail.smobile)">{{scenicDetail!=null&&scenicDetail.smobile!=null?scenicDetail.smobile:''}}</text>
|
|
</view>
|
|
<view class="yue_jq_box" @tap="daohang()">
|
|
<image src="../../../../static/images/icn_mi.png" class="yue_dgimg_size"></image>
|
|
<text class="at_t">{{scenicDetail!=null&&scenicDetail.saddress!=null?scenicDetail.saddress:''}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="amt_30 box_1 an_box_4">
|
|
<scroll-view class="anx_scl_1 amb_30" scroll-x="true" @scroll="scroll" scroll-left="0">
|
|
<view class="scl_1_ut">
|
|
<view class="dy_fx">
|
|
<view :class="index == changeIndex? 'fx_1 ut_zhou cur_zhou' : 'fx_1 ut_zhou'"
|
|
v-for="(item,index) in timeList" :key="index" @tap="getDateIndex(item.value,index)">
|
|
<view class="at_t">{{item.date}}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<view>
|
|
<!-- 列表 -->
|
|
<view class="dy_fx yue_jq_box" style="align-items: center;" v-for="(item,index) in timeDataList"
|
|
:key="index">
|
|
<view class="fx_1">
|
|
<view class="">
|
|
<image src="../../../../static/images/icon_time.png" class="yue_dgimg_size"></image>
|
|
<text class="at_t">预约时间：{{item.startTime}}-{{item.endTime}}</text>
|
|
</view>
|
|
<view class="yue_tip_text"><text>已预约：{{item.reservedQuantity}}</text><text>可预约：{{item.reservableQuantity-item.reservedQuantity}}</text>
|
|
</view>
|
|
</view>
|
|
<view v-if="item.yState == 'OVERDUE'"><button class="btn_unke">已过时间</button></view>
|
|
<view v-if="item.yState == 'FULL'"><button class="btn_man">预约已满</button></view>
|
|
<view v-if="item.yState == 'YES'" @tap="gotoDetail(item)"><button
|
|
class="btn_ke">可预约</button></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import aes from "@/common/aes.js";
|
|
export default {
|
|
data() {
|
|
return {
|
|
scenicList: [],
|
|
scenicDetail: {},
|
|
changeIndex: 0,
|
|
scenicId: null,
|
|
timeDataList: [],
|
|
timeList: [],
|
|
};
|
|
},
|
|
onLoad(options) {
|
|
// uni.setStorageSync("userid",64)
|
|
var scenicId = 167;
|
|
this.scenicId = scenicId;
|
|
this.getDetail(scenicId);
|
|
this.getDateList();
|
|
},
|
|
methods: {
|
|
//景区详情 数据
|
|
getDetail: function(scenicId) {
|
|
var data = {
|
|
userkey: this.$param.userkey,
|
|
scenicId: scenicId
|
|
};
|
|
this.$Request.post(this.$config.scenicDetail, data).then(res => {
|
|
if (this.$util.isSuccess(res)) {
|
|
var data = res.data;
|
|
if(data!=null&&data.slogo&&data.slogo!=null&&data.slogo!=''){
|
|
data.slogo = this.$config.ROOTPATH + data.slogo;
|
|
}
|
|
this.scenicDetail = data;
|
|
}
|
|
});
|
|
},
|
|
//预约日期 数据
|
|
getDateList: function(date, index) {
|
|
const that = this
|
|
let getData
|
|
if (date) {
|
|
getData = date
|
|
} else {
|
|
getData = this.formatData(new Date())
|
|
}
|
|
let queryParams = {
|
|
date: getData,
|
|
scenicId: this.scenicId,
|
|
}
|
|
this.$Request.get(this.$config.appointmentList, queryParams).then(res => {
|
|
if (res.status == 200) {
|
|
//日期列表
|
|
var dayDate = res.data.canReserveDayNumber //可预约天数
|
|
var timeList = []
|
|
for (var i = 0; i < dayDate; i++) {
|
|
var map = this.getTime(i);
|
|
timeList.push(map);
|
|
}
|
|
this.timeList = timeList;
|
|
//日期数据
|
|
var timeData = res.data.timeList
|
|
|
|
this.timeDataList = timeData.map((item, index) => {
|
|
return {
|
|
id: item.appointmentTimeInfoId,
|
|
startTime: that.formatTime(item.startTime),
|
|
endTime: that.formatTime(item.endTime),
|
|
reservableQuantity: item.reservableQuantity,
|
|
reservedQuantity: item.reservedQuantity,
|
|
yState: this.getDataState(getData, item),
|
|
externalId: item.externalId
|
|
}
|
|
})
|
|
}
|
|
});
|
|
},
|
|
//预约日期 切换
|
|
getDateIndex(data, index) {
|
|
this.changeIndex = index;
|
|
this.getDateList(data)
|
|
},
|
|
//预约日期 状态
|
|
getDataState(getData, data) {
|
|
let newToday = this.formatData(new Date())
|
|
let today = this.numData(newToday)
|
|
let newData = this.numData(getData)
|
|
|
|
let yState = null
|
|
if (Number(today) < Number(newData)) {
|
|
yState = 'YES'
|
|
} else {
|
|
|
|
if (data.reservableQuantity - data.reservedQuantity == 0) {
|
|
yState = 'FULL'
|
|
} else {
|
|
var nowHours = new Date().getHours();
|
|
var nowMinute = new Date().getMinutes();
|
|
var nowTime = nowHours + ':' + nowMinute
|
|
yState = this.compareTime(data.startTime, data.endTime, nowTime)
|
|
}
|
|
}
|
|
return yState
|
|
},
|
|
//日期格式化
|
|
formatData(data) {
|
|
let newData = data
|
|
let newYear = newData.getFullYear();
|
|
let newMonth = newData.getMonth() + 1;
|
|
let newDate = newData.getDate();
|
|
if (newMonth >= 1 && newMonth <= 9) {
|
|
newMonth = "0" + newMonth;
|
|
}
|
|
if (newDate >= 0 && newDate <= 9) {
|
|
newDate = "0" + newDate;
|
|
}
|
|
return newYear + '-' + newMonth + '-' + newDate
|
|
},
|
|
//时间格式化
|
|
formatTime(time) {
|
|
var hour = time.split(":")[0];
|
|
var min = time.split(":")[1];
|
|
return hour + ':' + min;
|
|
},
|
|
numData(data) {
|
|
let newDate = data.split("-")
|
|
return newDate[0] + newDate[1] + newDate[2]
|
|
},
|
|
compareTime(startTime, endTime, nowTime) {
|
|
let state = null
|
|
if (this.time_to_sec(nowTime) <= this.time_to_sec(startTime)) {
|
|
if (state != 'NO') {
|
|
state = 'YES'
|
|
}
|
|
} else if (this.time_to_sec(startTime) < this.time_to_sec(nowTime) && this.time_to_sec(nowTime) <= this
|
|
.time_to_sec(endTime)) {
|
|
if (state != 'NO') {
|
|
state = 'YES'
|
|
}
|
|
} else if (this.time_to_sec(endTime) < this.time_to_sec(nowTime)) {
|
|
state = 'OVERDUE'
|
|
}
|
|
return state
|
|
},
|
|
//将时分秒转为时间戳
|
|
time_to_sec(time) {
|
|
if (time !== null) {
|
|
var s = "";
|
|
var hour = time.split(":")[0];
|
|
var min = time.split(":")[1];
|
|
s = Number(hour * 3600) + Number(min * 60);
|
|
return s;
|
|
}
|
|
},
|
|
//预约详情
|
|
gotoDetail(item) {
|
|
let data = {
|
|
id: item.id,
|
|
date: this.timeList[this.changeIndex].value,
|
|
scenicId: this.scenicId,
|
|
startTime: item.startTime,
|
|
endTime: item.endTime,
|
|
externalId: item.externalId
|
|
}
|
|
let parameData = JSON.stringify(data)
|
|
uni.navigateTo({
|
|
url: '/sunPackIndex/scenic/subscribe/yuyue/yue_form_js?data=' + parameData
|
|
});
|
|
},
|
|
//景区电话
|
|
getTel: function(mobile) {
|
|
if (this.$util.isBlack(mobile)) {
|
|
return;
|
|
}
|
|
uni.makePhoneCall({
|
|
phoneNumber: mobile //仅为示例
|
|
});
|
|
},
|
|
//地址导航
|
|
daohang() {
|
|
// #ifdef H5
|
|
|
|
if (this.$wechat.isWechat()) {
|
|
var mapParam = {
|
|
latitude: this.scenicDetail.lat,
|
|
longitude: this.scenicDetail.lng,
|
|
scale: 18,
|
|
name: this.scenicDetail.sname,
|
|
address: this.scenicDetail.saddress
|
|
};
|
|
this.$util.openLocation(mapParam);
|
|
return;
|
|
}
|
|
window.location.href =
|
|
'https://uri.amap.com/navigation?from=' +
|
|
this.$param.clng +
|
|
',' +
|
|
this.$param.clat +
|
|
',我的位置&to=' +
|
|
this.scenicDetail.lng +
|
|
',' +
|
|
this.scenicDetail.lat +
|
|
',' +
|
|
this.scenicDetail.saddress +
|
|
'&mode=walk&src=sjz_uniapp&callnative=1';
|
|
// #endif
|
|
},
|
|
//预约日期 格式化
|
|
getTime: function(aa) {
|
|
var newDate = new Date(),
|
|
time1 = newDate.getFullYear() + "-" + ((newDate.getMonth() + 1).length == 2 ? (newDate.getMonth() +
|
|
1) :
|
|
"0" + (newDate.getMonth() + 1)) + "-" + (newDate.getDate().length == 2 ? newDate.getDate() :
|
|
"0" +
|
|
newDate.getDate()); //time1表示当前时间
|
|
var date2 = new Date(newDate);
|
|
date2.setDate(newDate.getDate() + aa);
|
|
var time2 = date2.getFullYear() + "-" + ((date2.getMonth() + 1 + "").length == 2 ? (date2.getMonth() +
|
|
1) : "0" + (date2.getMonth() + 1)) + "-" + ((date2.getDate() + "").length == 2 ? date2
|
|
.getDate() : "0" + date2.getDate());
|
|
var map = {
|
|
year: date2.getFullYear() + "年",
|
|
date: (date2.getMonth() + 1) + "月" + date2.getDate() + "日",
|
|
value: time2
|
|
}
|
|
return map;
|
|
},
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style></style>
|
|
|
|
|