|
|
<template>
|
|
|
<view>
|
|
|
<view class="box-content">
|
|
|
<view class="box-card">
|
|
|
<!-- <view class="box-tip justify-between">
|
|
|
<text class="box-tiptxt">已选：{{selectInfo}}</text>
|
|
|
</view> -->
|
|
|
<u--form labelPosition="top" labelWidth="120px" :model="form" ref="form">
|
|
|
<u-form-item label="预约入场时间" labelPosition="top" borderBottom>
|
|
|
|
|
|
<view style="color: #EF9525;font-size: 24rpx;display: flex;" @click="showSelecttime=true">
|
|
|
<!-- {{selectInfo}} -->
|
|
|
<text>{{(form.time?timeFormat(formTime, 'yyyy年MM月DD日 HH:mm'):'请选择入场时间>')}}</text>
|
|
|
<u-icon name="arrow-down" color="#000"></u-icon>
|
|
|
</view>
|
|
|
<u-datetime-picker
|
|
|
:minDate="minDate"
|
|
|
:maxDate="maxDate"
|
|
|
:show="showSelecttime" closeOnClickOverlay @close="cancelTime"
|
|
|
@cancel="cancelTime" @confirm="confirmTime" v-model="form.time" mode="datetime">
|
|
|
</u-datetime-picker>
|
|
|
</u-form-item>
|
|
|
<u-form-item label="车牌号码" labelPosition="top" borderBottom ref="plate">
|
|
|
<plate @listenPlateChange="plateChange" :defaultPlate="plateNumber" />
|
|
|
</u-form-item>
|
|
|
<u-form-item label="手机号" labelPosition="top" borderBottom ref="mobile">
|
|
|
<u--input readonly placeholder="请输入手机号" v-model="form.mobile" border="surround" clearable>
|
|
|
</u--input>
|
|
|
</u-form-item>
|
|
|
</u--form>
|
|
|
|
|
|
<view class="box-tip box-tipgray flex-row align-center" @click="handleChange">
|
|
|
<u-icon :name="(form.checkUser?'checkmark-circle-fill':'checkmark-circle')" color="#EF9525">
|
|
|
</u-icon>
|
|
|
<view class="box-tiptxt" style="margin-left: 10rpx;">请认真阅读、知悉并遵守<text @click.stop="openNotice"
|
|
|
style="color: #EF9525;">《本馆停车须知》</text></view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="page-bottom">
|
|
|
<u-button type="primary" @click="submitOrder">确定</u-button>
|
|
|
</view>
|
|
|
|
|
|
<u-popup :show="showInfo" mode="bottom" @close="closeInfo" :round="10" closeable>
|
|
|
<view class="mpopup" :style="[{height:maxheight}]">
|
|
|
<view class="mpopup-title">
|
|
|
{{notice.name}}
|
|
|
</view>
|
|
|
<view class="mpopup-content" style="margin-top: 60rpx;">
|
|
|
<scroll-view scroll-y="true" style="line-height: 50rpx;font-size: 32rpx;text-indent: 2em;"
|
|
|
:style="[{height:scrollheight}]">
|
|
|
<rich-text :nodes="notice.value"></rich-text>
|
|
|
</scroll-view>
|
|
|
|
|
|
<view style="margin-top: 40rpx;"></view>
|
|
|
<u-button type="primary" @click="closeInfo">知道了</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
<u-popup :show="showSelectorder" mode="bottom" :closeOnClickOverlay="false" @close="closeorder" :round="10">
|
|
|
<view class="mpopup">
|
|
|
<view class="mpopup-title">
|
|
|
选择预约的活动或者预约的参观
|
|
|
</view>
|
|
|
<view class="mpopup-content" style="padding: 40rpx 20rpx;">
|
|
|
<view v-if="listOrder.length!=0">
|
|
|
<view class="mpopup-title" style="text-align: left;padding: 20rpx 0;font-size: 14px;">
|
|
|
预约的参观
|
|
|
</view>
|
|
|
<block v-for="(item,index) in listOrder" :key="index">
|
|
|
<view class="box-tip flex-row align-center" @click="handleSelectOrder(index,1)"
|
|
|
style="margin-bottom: 20rpx;">
|
|
|
<u-icon :name="(item.checked?'checkmark-circle-fill':'checkmark-circle')"
|
|
|
color="#EF9525">
|
|
|
</u-icon>
|
|
|
<view class="box-tiptxt" style="margin-left: 10rpx;">
|
|
|
{{$u.timeFormat(new Date(item.date), 'mm月dd日')}}
|
|
|
{{item.time}}丨{{item.details_count}} 位观众</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
<view v-if="listActivtyOrder.length!=0">
|
|
|
<view class="mpopup-title" style="text-align: left;padding: 20rpx 0;font-size: 14px;">
|
|
|
预约的活动
|
|
|
</view>
|
|
|
<block v-for="(item,index) in listActivtyOrder" :key="index">
|
|
|
<view class="box-tip flex-row align-center" @click="handleSelectOrder(index,2)"
|
|
|
style="margin-bottom: 20rpx;">
|
|
|
<u-icon :name="(item.checked?'checkmark-circle-fill':'checkmark-circle')"
|
|
|
color="#EF9525">
|
|
|
</u-icon>
|
|
|
<view class="box-tiptxt" style="margin-left: 10rpx;">
|
|
|
活动时间：{{item.number}}
|
|
|
报名数量：{{item.total}}</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
</block>
|
|
|
</view>
|
|
|
<u-button type="primary" @click="handleConfirmOrder">确定</u-button>
|
|
|
</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
|
|
|
<u-popup :show="successshow" customStyle="width:600rpx;height:300rpx;text-align:center" :round="10"
|
|
|
mode="center" width="600rpx" height="150rpx">
|
|
|
<view class="">
|
|
|
<view class="successBox">
|
|
|
<!-- <u-icon name="checkmark-circle" size="90" color="#EF9525"></u-icon> -->
|
|
|
<view class="h3">您已经预约成功</view>
|
|
|
<view class="p">即将跳转到车位预约 {{time}} s</view>
|
|
|
</view>
|
|
|
<view class="pinkBtn" @click="goHome">返回首页</view>
|
|
|
</view>
|
|
|
</u-popup>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import {
|
|
|
plate
|
|
|
} from '@/components/plate/index.vue'
|
|
|
export default {
|
|
|
name: "index",
|
|
|
components: {
|
|
|
plate
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
successshow: false,
|
|
|
time: 3,
|
|
|
showInfo: false,
|
|
|
showSelectorder: false,
|
|
|
maxheight: "",
|
|
|
scrollheight: "",
|
|
|
selectInfo: "--",
|
|
|
showSelecttime: false,
|
|
|
plateNumber: ['苏', 'E', '', '', '', '', ''],
|
|
|
t: null,
|
|
|
timer: null,
|
|
|
form: {
|
|
|
plate: "",
|
|
|
mobile: "",
|
|
|
time: '',
|
|
|
car_park_id: "",
|
|
|
checkUser: false,
|
|
|
car_type: 1,
|
|
|
type: "1",
|
|
|
car_park_id: 0,
|
|
|
activity_order_id: "",
|
|
|
visit_order_id: ""
|
|
|
},
|
|
|
formTime: Number(new Date()),
|
|
|
minDate:'',
|
|
|
maxDate:'',
|
|
|
listOrder: [],
|
|
|
listActivtyOrder: [],
|
|
|
orderType: 1,
|
|
|
orderid: "",
|
|
|
bookinfo: {},
|
|
|
notice: {}
|
|
|
}
|
|
|
},
|
|
|
onLoad(options) {
|
|
|
let that = this;
|
|
|
|
|
|
that.showInfo = true;
|
|
|
if (!that.util.isNull(options.id)) {
|
|
|
this.form.car_park_id = parseInt(options.id);
|
|
|
}
|
|
|
if (!that.util.isNull(options.currentPark)) {
|
|
|
this.form.type = options.currentPark;
|
|
|
}
|
|
|
|
|
|
// if (!that.util.isNull(options.bookinfo)) {
|
|
|
// let bookinfo = JSON.parse(unescape(options.bookinfo));
|
|
|
// this.bookinfo = bookinfo;
|
|
|
// this.form.time = bookinfo.time;
|
|
|
// this.formTime = bookinfo.time;
|
|
|
// this.orderType = bookinfo.orderType;
|
|
|
// this.selectInfo = bookinfo.info;
|
|
|
// if (this.orderType == 2)
|
|
|
// this.form.activity_order_id = bookinfo.orderid
|
|
|
// else
|
|
|
// this.form.visit_order_id = bookinfo.orderid
|
|
|
// this.orderid = bookinfo.orderid
|
|
|
// }
|
|
|
that.form.time = this.$moment(this.$moment().format('YYYY-MM-DD HH:mm:ss')).valueOf()
|
|
|
that.formTime = this.$moment(this.$moment().format('YYYY-MM-DD HH:mm:ss')).valueOf()
|
|
|
console.log(that.form.time)
|
|
|
this.minDate = this.$moment(this.$moment().format('YYYY-MM-DD HH:mm:ss')).valueOf()
|
|
|
this.maxDate = this.$moment(this.$moment().add('days',6).format('YYYY-MM-DD') + ' 16:00:00').valueOf()
|
|
|
console.log("this.minDate",this.minDate,this.maxDate)
|
|
|
that.loadConfigInfo();
|
|
|
|
|
|
that.util.getUserInfo(function(r) {
|
|
|
that.form.mobile = r.mobile;
|
|
|
}, true);
|
|
|
|
|
|
that.maxheight = wx.getSystemInfoSync().windowHeight * 0.6 + "px"
|
|
|
that.scrollheight = wx.getSystemInfoSync().windowHeight * 0.6 * 0.7 + "px"
|
|
|
},
|
|
|
onShow() {
|
|
|
|
|
|
},
|
|
|
onHide() {
|
|
|
clearInterval(this.t)
|
|
|
clearTimeout(this.timer)
|
|
|
},
|
|
|
|
|
|
onUnload() {
|
|
|
clearInterval(this.t)
|
|
|
clearTimeout(this.timer)
|
|
|
},
|
|
|
methods: {
|
|
|
timeFormat(val, format) {
|
|
|
return this.$moment(val).format(format)
|
|
|
},
|
|
|
goHome() {
|
|
|
uni.switchTab({
|
|
|
url: "/pages/index/index"
|
|
|
})
|
|
|
},
|
|
|
loadConfigInfo() {
|
|
|
var that = this;
|
|
|
this.util.request({
|
|
|
api: '/api/mobile/other/config-show',
|
|
|
data: {
|
|
|
tag: "car_park_notice"
|
|
|
},
|
|
|
utilSuccess: function(res) {
|
|
|
that.notice = res;
|
|
|
that.notice.value = that.notice.value.replace(/\<p/gi, "<p class='richp'");
|
|
|
|
|
|
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: res,
|
|
|
duration: 2000
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
openNotice() {
|
|
|
this.showInfo = true;
|
|
|
},
|
|
|
closeInfo() {
|
|
|
this.showInfo = false;
|
|
|
},
|
|
|
handleConfirmOrder() {
|
|
|
if (this.orderid === 0) {
|
|
|
this.util.toast("请选择预约的活动或者预约的参观");
|
|
|
return false;
|
|
|
}
|
|
|
this.showSelectorder = false;
|
|
|
},
|
|
|
handleSelectOrder(index, type) {
|
|
|
for (var m of this.listActivtyOrder) {
|
|
|
m.checked = false;
|
|
|
}
|
|
|
for (var m of this.listOrder) {
|
|
|
m.checked = false;
|
|
|
}
|
|
|
if (type == 1) {
|
|
|
this.listOrder[index].checked = true;
|
|
|
this.selectInfo = this.$moment(this.listOrder[index].date).format("MM月DD日") + " " + this.listOrder[
|
|
|
index].time
|
|
|
this.form.time = this.$moment(this.listOrder[index].date + " " + this.listOrder[
|
|
|
index].time.split("-")[0]).format("YYYY-MM-DD HH:mm:ss");
|
|
|
this.form.visit_order_id = this.orderid = this.listOrder[index].id;
|
|
|
|
|
|
} else {
|
|
|
this.listActivtyOrder[index].checked = true
|
|
|
this.selectInfo = this.$moment(this.listActivtyOrder[index].activity.start_time).format("MM月DD日 HH:mm")
|
|
|
|
|
|
this.form.time = this.$moment(this.listActivtyOrder[index].activity.start_time).format(
|
|
|
"YYYY-MM-DD HH:mm:ss");
|
|
|
this.form.activity_order_id = this.orderid = this.listActivtyOrder[index].id;
|
|
|
}
|
|
|
this.orderType = type;
|
|
|
},
|
|
|
openselectorder() {
|
|
|
this.showSelectorder = true;
|
|
|
},
|
|
|
closeorder() {
|
|
|
this.showSelectorder = false;
|
|
|
},
|
|
|
loadOrder(cb) {
|
|
|
var that = this;
|
|
|
this.util.request({
|
|
|
api: '/api/mobile/user/my-visit-order',
|
|
|
data: {
|
|
|
status: 1
|
|
|
},
|
|
|
utilSuccess: function(res) {
|
|
|
for (var mod of res) {
|
|
|
mod.checked = false;
|
|
|
}
|
|
|
that.listOrder = res;
|
|
|
cb(res)
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
this.util.toast(res)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
loadactivityOrder(cb) {
|
|
|
var that = this;
|
|
|
this.util.request({
|
|
|
api: '/api/mobile/user/my-activity-order',
|
|
|
data: {
|
|
|
status: 1
|
|
|
},
|
|
|
utilSuccess: function(res) {
|
|
|
for (var mod of res) {
|
|
|
mod.checked = false;
|
|
|
}
|
|
|
that.listActivtyOrder = res;
|
|
|
cb(res);
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
this.util.toast(res)
|
|
|
}
|
|
|
})
|
|
|
},
|
|
|
confirmTime(e) {
|
|
|
console.log(e)
|
|
|
this.form.time = e.value
|
|
|
this.formTime = e.value
|
|
|
let choosetime = parseInt(this.$moment(this.form.time).format("HH"))
|
|
|
let chooseMin = parseInt(this.$moment(this.form.time).format("mm"))
|
|
|
// let nowtime = parseInt(this.$moment().format("HH"))
|
|
|
// console.log(chooseMin)
|
|
|
if(choosetime<9 || choosetime>16 || (choosetime==16 && chooseMin>0)){
|
|
|
this.util.toast("请选择正确的入场时间");
|
|
|
return false;
|
|
|
}
|
|
|
this.showSelecttime = false;
|
|
|
},
|
|
|
cancelTime() {
|
|
|
this.showSelecttime = false;
|
|
|
},
|
|
|
plateChange(val) {
|
|
|
this.form.plate = val.join("")
|
|
|
},
|
|
|
handleChange() {
|
|
|
this.form.checkUser = !this.form.checkUser;
|
|
|
},
|
|
|
handleSelectTime() {
|
|
|
this.showSelecttime = true;
|
|
|
},
|
|
|
|
|
|
submitOrder() {
|
|
|
// if (this.util.isNull(this.orderid)) {
|
|
|
// this.util.toast("请选择参观预约或者活动预约");
|
|
|
// return false;
|
|
|
// }
|
|
|
if(this.$moment(this.form.time).format("HH")<9 || this.$moment(this.form.time).format("HH")>16){
|
|
|
this.util.toast("请选择正确的入场时间");
|
|
|
return false;
|
|
|
}
|
|
|
if (this.form.plate.length != 7 && this.form.plate.length != 8) {
|
|
|
this.util.toast("请正确填写车牌号");
|
|
|
return false;
|
|
|
}
|
|
|
if (this.util.isNull(this.form.mobile)) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "请填写手机号"
|
|
|
})
|
|
|
return false;
|
|
|
} else if (!uni.$u.test.mobile(this.form.mobile)) {
|
|
|
uni.showToast({
|
|
|
icon: "none",
|
|
|
title: "请正确填写手机号"
|
|
|
})
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
if (!this.form.checkUser) {
|
|
|
this.util.toast("请阅读预约通知");
|
|
|
return false;
|
|
|
}
|
|
|
|
|
|
this.form.time = this.timeFormat(this.form.time, 'yyyy-MM-DD HH:mm')
|
|
|
console.log(this.form.time)
|
|
|
// return
|
|
|
var that = this;
|
|
|
this.util.request({
|
|
|
api: '/api/mobile/carpark/order',
|
|
|
data: this.form,
|
|
|
method: "POST",
|
|
|
utilSuccess: function(res) {
|
|
|
that.successshow = true;
|
|
|
that.t = setInterval(function() {
|
|
|
if (that.time > 0)
|
|
|
that.time = that.time - 1;
|
|
|
}, 1000)
|
|
|
that.timer = setTimeout(function() {
|
|
|
uni.redirectTo({
|
|
|
url: '/pages/order/parkorder'
|
|
|
})
|
|
|
clearInterval(that.t);
|
|
|
clearTimeout(that.timer)
|
|
|
}, 3000)
|
|
|
// uni.showToast({
|
|
|
// icon: "none",
|
|
|
// title: "下单成功",
|
|
|
// complete() {
|
|
|
// uni.redirectTo({
|
|
|
// url: "/pages/success/success?from=park&id=" + res.id
|
|
|
// })
|
|
|
// }
|
|
|
// })
|
|
|
},
|
|
|
utilFail: function(res) {
|
|
|
that.util.toast(res);
|
|
|
}
|
|
|
})
|
|
|
|
|
|
},
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
page {
|
|
|
background: #f7f6f4;
|
|
|
}
|
|
|
|
|
|
.box-tip {
|
|
|
background: #FCF6E3;
|
|
|
height: 66rpx;
|
|
|
line-height: 66rpx;
|
|
|
box-sizing: border-box;
|
|
|
padding: 0rpx 12rpx;
|
|
|
}
|
|
|
|
|
|
.box-tipgray {
|
|
|
background: #f7f6f4 !important;
|
|
|
}
|
|
|
|
|
|
.box-tiptxt {
|
|
|
font-size: 24rpx;
|
|
|
color: #828282;
|
|
|
}
|
|
|
|
|
|
.box-tipbtn {
|
|
|
font-size: 24rpx;
|
|
|
text-decoration: underline;
|
|
|
color: #EF9525;
|
|
|
}
|
|
|
|
|
|
.box-content {
|
|
|
padding: 30rpx 24rpx;
|
|
|
}
|
|
|
|
|
|
.box-card {
|
|
|
background: #FFFFFF;
|
|
|
border-radius: 16rpx;
|
|
|
padding: 31rpx 18rpx;
|
|
|
margin-bottom: 20rpx;
|
|
|
}
|
|
|
|
|
|
.page-bottom {
|
|
|
background: #FFFFFF;
|
|
|
height: 108rpx;
|
|
|
box-shadow: 2rpx 3rpx 10rpx 0rpx rgba(107, 94, 77, 0.3);
|
|
|
width: 100%;
|
|
|
position: fixed;
|
|
|
bottom: 0;
|
|
|
left: 0;
|
|
|
padding: 15rpx 25rpx;
|
|
|
box-sizing: border-box;
|
|
|
z-index: 10;
|
|
|
}
|
|
|
|
|
|
.successBox {
|
|
|
|
|
|
.iconfont {
|
|
|
color: #00CCB9;
|
|
|
font-size: 180rpx;
|
|
|
}
|
|
|
|
|
|
.h3 {
|
|
|
font-size: 40rpx;
|
|
|
font-weight: 500;
|
|
|
color: #333333;
|
|
|
margin-top: 40rpx;
|
|
|
}
|
|
|
|
|
|
.p {
|
|
|
font-size: 28rpx;
|
|
|
font-weight: 400;
|
|
|
color: #333333;
|
|
|
margin-top: 24rpx;
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
.pinkBtn {
|
|
|
width: 50%;
|
|
|
background-image: linear-gradient(45deg, #EF9525 0%, #EF9525 100%);
|
|
|
border-radius: 44rpx;
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 500;
|
|
|
color: #FFFFFF;
|
|
|
text-align: center;
|
|
|
line-height: 70rpx;
|
|
|
margin: 30rpx auto;
|
|
|
}
|
|
|
|
|
|
.richp {
|
|
|
margin-bottom: 10rpx
|
|
|
}
|
|
|
</style>
|
