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.

721 lines
18 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<template>
<view class="wrap">
<!-- 自定义导航栏 -->
<view class="navBarBox" :style="{height:navBarBoxHeight+'rpx'}">
<!-- 状态栏占位 -->
<view class="statusBar" :style="{paddingTop: statusBarHeight+'px'}"></view>
<!-- 真正的导航栏内容 -->
<view class="navBar">
<image class="logo" src="/static/logo.png" mode="scaleToFill"></image>
<!-- <view>我是导航栏标题</view> -->
</view>
</view>
<view class="content" :style="{paddingTop: navBarBoxHeight+10+'rpx'}">
<view class="box-top">
<image src="../../static/img/index_bg.jpg" class="index_bg"></image>
</view>
<view class="box-body">
<view>
<view class="box-row">
<view class="box-col" @click="handleBook(1)">
<image src="../../static/img/index_icon_1.png" class="box-body-icon"></image>
<view class='box-body-title'>参观预约</view>
</view>
<view class="box-col" @click="handleBook(2)">
<image src="../../static/img/index_icon_2.png" class="box-body-icon"></image>
<view class='box-body-title'>活动预约</view>
</view>
<view class="box-col" @click="handleBook(3)">
<image src="../../static/img/index_icon_3.png" class="box-body-icon"></image>
<view class='box-body-title'>停车场预约</view>
</view>
<view class="box-col" @click="handleBook(4)">
<image src="../../static/img/index_icon_4.png" class="box-body-icon"></image>
<view class='box-body-title'>一键导航</view>
</view>
</u-row>
</view>
</view>
</view>
<view class="box-bottom">
<!-- 当前展览 -->
<view class="exhibit">
<view @click='toExhibitList'>
<view>
<span></span>
<span>当前展览</span>
</view>
<u-icon name="arrow-right"></u-icon>
</view>
<view class="exhibit_list" @click='todetail(exhibitObj.id)'>
<img :src="exhibitObj.head_upload.url" alt="">
<span>{{exhibitObj.name}}</span>
</view>
</view>
<!-- 展厅导览 -->
<!-- <view class="exhibit">
<view>
<view>
<span></span>
<span>展厅导览</span>
</view>
<u-icon name="arrow-right"></u-icon>
</view>
<view class="exhibit_list">
<img src="../../static/img/exhibit.png" alt="">
<span>追寻伟人足迹传承闻天家风张闻天家风展</span>
</view>
</view> -->
</view>
<!-- 参观预约 -->
<u-popup :show="showBook" mode="bottom" @close="closeBook" :round="10" closeable>
<view class="mpopup">
<view class="mpopup-title">
参观预约
</view>
<view class="mpopup-content">
<view class="book-box">
<view class="book-box-card">
<view class="book-box-title">
日期
</view>
<view class="book-box-row">
<view class="book-box-row-date">
<block v-for="(item,index) in listDatePrice" :key="index">
<view class="book-box-row-dateitem" :class="{'book-box-row-dateitem-on':item.checked,
'book-box-row-dateitem-none':item.is_open==0,
'book-box-row-dateitem-none':item.remain_count==0}" @click="handleDate(index)">
<view class="book-box-row-dateitem-status">
<u-icon name="checkmark" color="#fff" size="20rpx"
v-if="item.checked">
</u-icon>
<view v-else>
<text
v-if="item.is_open==1">{{item.remain_count==0?"不可预约":"可预约"}}</text>
<text v-else>闭馆</text>
</view>
</view>
<view>{{item.week}}</view>
<view>{{item.datef}}</view>
</view>
</block>
</view>
<view class="book-box-row-select" @click="openCalendar">
<view>
<view>指定</view>
<view>日期</view>
</view>
<view class="book-box-row-select-more">
<u-icon name="arrow-right" color="#cf995a" size="20rpx"></u-icon>
</view>
</view>
</view>
</view>
<view class="book-box-card">
<view class="book-box-title">
进馆时间
</view>
<view class="book-box-timerow">
<view class="book-box-row-timeitem" v-for="(item,index) in currentDate.rules"
:class="{'book-box-row-timeitem-on':item.checked,'timeitem-none':item.remain_count==0,'timeitem-none':item.isCanbook==false}"
:key="index" @click="handleSelectTime(index)">
<view class="book-box-row-timeitem-status" v-if="item.checked">
<u-icon name="checkmark" color="#fff" size="20rpx"></u-icon>
</view>
<view class="book-box-row-timeitem-txt">{{item.start_time+'-'+item.end_time}}
</view>
<block v-if="item.isCanbook">
<view class="book-box-row-timeitem-txt"
v-if="item.remain_count>0&&item.remain_count<=50">
{{item.remain_count}}张
</view>
<view class="book-box-row-timeitem-txt" v-else-if="item.remain_count>50">
余票充足
</view>
<view class="book-box-row-timeitem-txt" v-else>已约满</view>
</block>
<block v-else>
<view class="book-box-row-timeitem-txt">不可预约</view>
</block>
</view>
</view>
</view>
</view>
</view>
<view class="book-box-selectInfo">
<view class="book-box-selectInfo-left">已选:{{currentDate.datef||""}}
{{(currentTime.start_time||"")+"-"+(currentTime.end_time||"")}}
</view>
<view class="book-box-selectInfo-right">
</view>
</view>
<view class="mpopup-footer">
<view style="margin-right: 14rpx;flex: 1;">
<u-button type="primary" @click="tobook('team')">团体预约</u-button>
</view>
<view style="margin-left: 14rpx;flex: 1;">
<u-button type="primary" @click="tobook('user')">个人预约</u-button>
</view>
</view>
</view>
</u-popup>
<u-calendar ref="calendar" :show-confirm="false" :show="showCalendar" :minDate="minDate" :maxDate="maxDate"
color="#cf995a" round="20" defaultDate="2022-02-15" @confirm="handleSelectDate" @close="closecalendar">
</u-calendar>
<u-popup :show="showAuthorization" closeable mode="bottom" @close="closePhone" :round="10">
<view class="box">
<view class="box-title" style="text-align: center;padding: 20rpx 0;font-size: 32rpx;">
请授权您的手机号
</view>
<view class="box-content" style="padding: 20px;">
<u-button type="primary" open-type="getPhoneNumber" @getphonenumber="getPhoneNumber">
</u-button>
</view>
</view>
</u-popup>
</view>
<tabbar :current-page="0"></tabbar>
</view>
</template>
<script>
import tabbar from "../../components/tabbar/tabbar.vue"
export default {
components:{
tabbar
},
data() {
const d = new Date()
const year = d.getFullYear()
let month = d.getMonth() + 1
month = month < 10 ? `0${month}` : month
const date = d.getDate()
return {
// 状态栏高度
statusBarHeight: 0,
navBarBoxHeight:0,
exhibitObj:{},
showBook: false,
minDate: `${year}-${month}-${date + 1}`,
maxDate: `${year}-${month}-${date + 7}`,
showCalendar: false,
info: {},
listDatePrice: [],
currentDate: {},
currentTime: {},
currentIndex: 0,
listCalendar: [],
showAuthorization: false,
openType: 1
}
},
onShareAppMessage() {
return this.util.shareInfo
},
onLoad() {
//获取手机状态栏高度
this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
this.navBarBoxHeight = 80 + this.statusBarHeight*2
this.loadInfo();
this.getExhibit()
},
onReady() {
// 如果需要兼容微信小程序的话,需要用此写法
this.$refs.calendar.setFormatter(this.formatter)
},
onHide() {
this.showBook = false;
},
methods: {
toExhibitList(){
uni.navigateTo({
url: "/pages/exhibit/list"
});
},
togame() {
uni.navigateToMiniProgram({
appId: 'wx3aafff78f8750c1d',
success(res) {
// 打开成功
}
})
},
closePhone() {
this.showAuthorization = false
},
getPhoneNumber(e) {
var that = this;
this.util.request({
api: '/api/mobile/user/mobile',
data: {
code: e.detail.code
},
utilSuccess: function(res) {
that.util.getUserInfo(function(r) {
that.checkUser();
}, true)
},
utilFail: function(res) {
}
})
},
closecalendar() {
this.showCalendar = false;
},
handleSelectDate(e) {
let that = this;
if (e.length != 0) {
var date = e[0]
var mod = this.listCalendar.filter((p) => {
return p.is_open == 1 && p.remain_count != 0 && p.date == date;
})
if (mod.length != 0) {
this.load3Day(date, function(isCanbook) {
if (isCanbook) {
that.showCalendar = false;
} else {
that.util.toast("您选择的日期不可预约")
}
});
} else {
that.util.toast("您选择的日期不可预约")
}
}
},
openCalendar() {
var that = this;
var edate = this.$moment().add('days', 7).format("yyyy-MM-DD");
var ndate = this.$moment().add('days', 1).format("yyyy-MM-DD")
this.loadCalendar(ndate, edate, function(res) {
that.listCalendar = res;
that.showCalendar = true;
});
},
formatter(day) {
for (var m of this.listCalendar) {
let date = this.$moment(day.date).format("yyyy-MM-DD");
if (date == m.date) {
if (m.is_open == 1)
if (m.remain_count == 0) {
day.bottomInfo = '不可预约'
} else {
day.bottomInfo = '可预约'
}
else {
day.bottomInfo = '闭馆'
}
}
}
return day
},
handleDate(index) {
var nt = this.$moment().format("yyyy-MM-DD");
let list = this.listDatePrice;
let cdate = list[index];
if (cdate.is_open === 0) {
uni.showToast({
icon: "none",
title: "该日期已经闭馆"
})
return;
}
if (cdate.remain_count === 0) {
uni.showToast({
icon: "none",
title: "该日期已不可预约"
})
return;
}
for (var m of list) {
m.checked = false;
}
cdate.checked = true;
this.currentDate = cdate;
this.loadDefaultTime(cdate.rules);
this.listDatePrice = list;
this.$forceUpdate();
},
handleSelectTime(index) {
var mod = this.currentDate.rules[index];
if (!mod.isCanbook) {
return false
}
if (mod.remain_count == 0) {
this.util.toast("该时段已约满了");
return false
}
for (var m of this.currentDate.rules) {
m.checked = false;
}
mod.checked = true;
this.currentTime = mod;
this.$forceUpdate();
},
openActivity() {
uni.navigateTo({
url: "../activity/index"
})
},
openMap() {
uni.navigateTo({
url: "/pages/map/map"
})
},
openPark() {
uni.navigateTo({
url: "/pages/park/index"
})
},
loadUser(cb) {
var that = this;
this.util.getOpenidInfo(function(res) {
that.util.getUserInfo(function(r) {
cb(r);
}, true)
}, true);
},
handleBook(type) {
this.openType = type;
uni.$u.throttle(this.checkUser, 1500)
},
checkUser() {
let type = this.openType;
var that = this;
that.loadUser(function(res) {
if (that.util.isNull(res.mobile)) {
that.showAuthorization = true;
} else {
that.showAuthorization = false;
if (type == 1) that.openBook();
else if (type == 2) that.openActivity()
else if (type == 3) that.openPark()
else if (type == 4) that.openMap()
}
})
},
openBook() {
var that = this;
this.currentTime = this.currentDate = {};
var sdate = that.$moment().format("yyyy-MM-DD");
that.showBook = true;
that.load3Day(sdate)
},
closeBook() {
this.showBook = false;
},
tobook(type) {
if (this.util.isNull(this.currentDate.date)) {
this.util.toast("请选择预约的日期");
return false;
}
if (this.util.isNull(this.currentTime.id)) {
this.util.toast("请选择预约的时段");
return false;
}
uni.navigateTo({
url: "/pages/visit/book?from=" + type + "&currentDate=" + JSON.stringify(this.currentDate) +
"&currentTime=" + JSON.stringify(this.currentTime)
})
},
loadInfo() {
var that = this;
this.util.request({
api: '/api/mobile/visit/introduce',
utilSuccess: function(res) {
console.log(res);
that.info = res;
},
utilFail: function(res) {
}
})
},
// 获取展览一条
todetail(id){
uni.navigateTo({
url: "/pages/exhibit/detail?id="+id
});
},
getExhibit(){
var that = this;
this.util.request({
api: '/api/mobile/exhibit-hall/index',
data:{
page:1,
page_size:1,
state:1,
sort_name:'state',
sort_name_tow:'release_time',
sort_type:"DESC",
sort_type_tow:'DESC'
},
utilSuccess: function(res) {
console.log(res.data[0])
that.exhibitObj = res?.data[0]
},
utilFail: function(res) {
}
})
},
load3Day(sdate, callbak) { //加载7天数据
var that = this;
that.listDatePrice = [];
var edate = this.$moment(sdate).add('days', 2).format("yyyy-MM-DD");
var ndate = this.$moment(sdate).add('days', 0).format("yyyy-MM-DD")
var nt = this.$moment().format("yyyy-MM-DD");
var mt = this.$moment().add('days', 1).format("yyyy-MM-DD");
var ht = this.$moment().add('days', 2).format("yyyy-MM-DD");
var selectDate = (nt == sdate) ? ndate : sdate;
this.loadCalendar(sdate, edate, function(res) {
that.listDatePrice = res;
var i = 0;
let isOpenDate = false;
for (var m of that.listDatePrice) {
m.checked = false;
m.datef = that.$moment(m.date).format("MM月DD日");
var week = that.$moment(m.date).format("dddd");
if (m.date == nt)
m.week = "今天";
else if (m.date == mt) {
m.week = "明天";
} else if (m.date == ht) {
m.week = "后天";
} else {
m.week = week;
}
if (m.date == selectDate) {
if (m.is_open == 1 && m.remain_count > 0) {
m.checked = true;
that.currentDate = m;
that.currentIndex = i;
that.loadDefaultTime(m.rules);
isOpenDate = true;
} else {
isOpenDate = false;
/* uni.showToast({
icon: "none",
title: selectDate + "不可以预约",
complete() {
setTimeout(function() {
that.load3Day(that.$moment(selectDate).add('days', 1)
.format("yyyy-MM-DD"))
}, 2000)
}
}, 2000) */
}
}
i++;
}
if (callbak)
callbak(isOpenDate);
})
},
loadDefaultTime(rules) {
var that = this;
var nt = new Date();
that.currentTime = {};
let isDefault = false;
for (var mod of rules) {
mod.checked = false;
mod.endtime = that.currentDate.date + " " + mod.end_time;
var isCanbook = that.$moment(nt).isBefore(mod.endtime);
mod.isCanbook = isCanbook;
if (!isDefault && mod.remain_count > 0 && isCanbook) {
isDefault = true;
mod.checked = true;
that.currentTime = mod;
}
}
},
loadCalendar(sdate, edate, cb) {
var that = this;
this.util.request({
api: '/api/mobile/visit/get-calendar',
data: {
start_date: sdate,
end_date: edate
},
utilSuccess: function(res) {
cb(res);
},
utilFail: function(res) {
}
})
}
}
}
</script>
<style>
@import url("@/static/css/bookbox.css");
.wrap{
background-color: #cf995a;
}
.navBarBox {
/* background-color: #cf995a; */
position: fixed;
top:0;
left:0;
width:100%;
z-index:999;
background: linear-gradient(to bottom,#f6d593,#cf995a);
/* height:190rpx; */
}
.navBarBox .statusBar {}
.navBarBox .navBar {
padding: 20rpx 50rpx;
padding-left: 30rpx;
text-align: left;
height:80rpx;
/* display: flex;
flex-direction: row;
justify-content: center;
align-items: center; */
}
.navBarBox .navBar .logo {
width: 262rpx;
height: 46rpx;
/*
margin-right: 10rpx; */
}
.timeitem-none {
color: #ccc;
}
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding-bottom:120rpx;
/* padding-top:190rpx; */
}
.box-top {
width: 100%;
font-size: 0;
}
.index_bg {
width: 100%;
height: 497rpx;
}
.u-notice-bar {
border-top-left-radius: 15rpx !important;
border-top-right-radius: 15rpx !important;
}
.box-body {
width: 100%;
padding: 40rpx 0;
background-color: #f6f6f6;
}
.box-row {
display: flex;
padding: 0 50rpx;
justify-content: space-between;
}
.box-col {
text-align: center;
}
.box-body-icon {
width: 102rpx;
height: 102rpx;
}
.box-body-title {
margin-top: 10rpx;
font-size:28rpx;
}
.box-bottom{
background-color: #fff;
padding:50rpx 30rpx;
padding-top:35rpx;
width:100%;
}
.exhibit{
}
.exhibit>view:first-child{
display: flex;
justify-content: space-between;
font-size: 36rpx;
}
.exhibit>view:first-child span:first-child{
background-color: #DEA166;
width:5rpx;
height:50rpx;
margin-right:22rpx;
display: inline-block;
vertical-align: text-top;
}
.exhibit_list{
position: relative;
margin-top:35rpx;
margin-bottom:35rpx;
font-size: 0;
}
.exhibit_list img{
width:100%;
height:410rpx;
border-radius: 20rpx;
}
.exhibit_list span{
display: inline-block;
width:100%;
box-sizing: border-box;
border-radius:0 0 20rpx 20rpx;
position: absolute;
bottom:0;
left:0;
color:#fff;
font-size: 32rpx;
padding:20rpx 32rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
background: linear-gradient(to bottom,rgba(255,255,255,0),rgba(0,0,0,0.5));
}
.footer-img {
width: 421rpx;
height: 364rpx;
}
.richp {
margin-bottom: 10rpx;
}
</style>