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.

494 lines
13 KiB

4 years ago
<template>
<view>
4 years ago
<view class="box-content">
<view class="box-card">
4 years ago
<view class="box-tip justify-between">
4 years ago
<text class="box-tiptxt">已选{{selectInfo}}</text>
4 years ago
</view>
<u--form labelPosition="top" labelWidth="120px" :model="form" ref="form">
4 years ago
<u-form-item label="预约入场时间" labelPosition="top" borderBottom>
2 years ago
<view style="color: #cf995a;font-size: 24rpx;">
2 years ago
{{selectInfo}}
<!--{{(form.time?timeFormat(_formTime, 'yyyy年MM月DD日 HH:mm'):'请选择入场时间>')}}-->
4 years ago
</view>
<u-datetime-picker :show="showSelecttime" closeOnClickOverlay @close="cancelTime"
@cancel="cancelTime" @confirm="confirmTime" v-model="form.time" mode="datetime">
4 years ago
</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">
4 years ago
<u--input readonly placeholder="请输入手机号" v-model="form.mobile" border="surround" clearable>
</u--input>
4 years ago
</u-form-item>
</u--form>
4 years ago
4 years ago
<view class="box-tip box-tipgray flex-row align-center" @click="handleChange">
2 years ago
<u-icon size='24' :name="(form.checkUser?'checkmark-circle-fill':'checkmark-circle')" color="#cf995a">
4 years ago
</u-icon>
4 years ago
<view class="box-tiptxt" style="margin-left: 10rpx;">请认真阅读知悉并遵守<text @click.stop="openNotice"
2 years ago
style="color: #cf995a;">本馆停车须知</text></view>
4 years ago
</view>
</view>
</view>
<view class="page-bottom">
4 years ago
<u-button type="primary" @click="submitOrder"></u-button>
4 years ago
</view>
4 years ago
<u-popup :show="showInfo" mode="bottom" @close="closeInfo" :round="10" closeable>
4 years ago
<view class="mpopup" :style="[{height:maxheight}]">
4 years ago
<view class="mpopup-title">
{{notice.name}}
</view>
4 years ago
<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>
4 years ago
</scroll-view>
4 years ago
4 years ago
<view style="margin-top: 40rpx;"></view>
4 years ago
<u-button type="primary" @click="closeInfo"></u-button>
</view>
</view>
</u-popup>
4 years ago
<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')"
2 years ago
color="#cf995a">
4 years ago
</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')"
2 years ago
color="#cf995a">
4 years ago
</u-icon>
4 years ago
<view class="box-tiptxt" style="margin-left: 10rpx;">
4 years ago
活动时间{{item.activity.start_time}}
4 years ago
报名数量{{item.total}}</text>
</view>
4 years ago
</view>
</block>
</view>
<u-button type="primary" @click="handleConfirmOrder"></u-button>
</view>
</view>
4 years ago
</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">
2 years ago
<!-- <u-icon name="checkmark-circle" size="90" color="#cf995a"></u-icon> -->
4 years ago
<view class="h3">您已经预约成功</view>
<view class="p">即将跳转到车位预约 {{time}} s</view>
</view>
<view class="pinkBtn" @click="goHome"></view>
</view>
4 years ago
</u-popup>
4 years ago
</view>
</template>
<script>
2 months ago
// import {
// Plate
// } from '@/components/plate/index.vue'
4 years ago
export default {
components: {
2 months ago
// plate:Plate
4 years ago
},
data() {
4 years ago
return {
successshow: false,
time: 3,
4 years ago
showInfo: false,
4 years ago
showSelectorder: false,
maxheight: "",
scrollheight: "",
4 years ago
selectInfo: "--",
4 years ago
showSelecttime: false,
4 years ago
plateNumber: ['苏', 'E', '', '', '', '', ''],
t: null,
timer: null,
4 years ago
form: {
plate: "",
mobile: "",
4 years ago
time: new Date(),
4 years ago
car_park_id: "",
checkUser: false,
car_type: 1,
4 years ago
type: "1",
4 years ago
car_park_id: 0,
activity_order_id: "",
visit_order_id: ""
4 years ago
},
4 years ago
_formTime: new Date(),
4 years ago
listOrder: [],
listActivtyOrder: [],
orderType: 1,
4 years ago
orderid: "",
bookinfo: {},
notice: {}
4 years ago
}
2 years ago
},
onShareAppMessage() {
return this.util.shareInfo
},
onShareTimeline(){
return this.util.shareInfo
4 years ago
},
4 years ago
onLoad(options) {
4 years ago
let that = this;
that.showInfo = true;
4 years ago
if (!that.util.isNull(options.id)) {
4 years ago
this.form.car_park_id = parseInt(options.id);
4 years ago
}
if (!that.util.isNull(options.currentPark)) {
this.form.type = options.currentPark;
}
4 years ago
if (!that.util.isNull(options.bookinfo)) {
let bookinfo = JSON.parse(unescape(options.bookinfo));
this.bookinfo = bookinfo;
4 years ago
this.form.time = bookinfo.time;
this._formTime = bookinfo.time;
4 years ago
this.orderType = bookinfo.orderType;
4 years ago
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.loadConfigInfo();
4 years ago
that.util.getUserInfo(function(r) {
that.form.mobile = r.mobile;
4 years ago
}, true);
that.maxheight = wx.getSystemInfoSync().windowHeight * 0.6 + "px"
that.scrollheight = wx.getSystemInfoSync().windowHeight * 0.6 * 0.7 + "px"
4 years ago
},
onShow() {
},
4 years ago
onHide() {
clearInterval(this.t)
clearTimeout(this.timer)
},
onUnload() {
clearInterval(this.t)
clearTimeout(this.timer)
},
methods: {
3 years ago
timeFormat(val, format) {
return this.$moment(val).format(format)
},
4 years ago
goHome() {
uni.switchTab({
url: "/pages/index/index"
})
4 years ago
},
4 years ago
loadConfigInfo() {
var that = this;
this.util.request({
api: '/api/mobile/other/config-show',
data: {
tag: "car_park_notice"
},
utilSuccess: function(res) {
4 years ago
that.notice = res;
that.notice.value = that.notice.value.replace(/\<p/gi, "<p class='richp'");
4 years ago
},
utilFail: function(res) {
uni.showToast({
icon: "none",
title: res,
duration: 2000
})
}
})
},
openNotice() {
this.showInfo = true;
},
closeInfo() {
this.showInfo = false;
},
4 years ago
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
4 years ago
this.form.time = this.$moment(this.listOrder[index].date + " " + this.listOrder[
3 years ago
index].time.split("-")[0]).format("YYYY-MM-DD HH:mm:ss");
4 years ago
this.form.visit_order_id = this.orderid = this.listOrder[index].id;
4 years ago
} else {
4 years ago
this.listActivtyOrder[index].checked = true
3 years ago
this.selectInfo = this.$moment(this.listActivtyOrder[index].activity.start_time).format("MM月DD日 HH:mm")
4 years ago
this.form.time = this.$moment(this.listActivtyOrder[index].activity.start_time).format(
3 years ago
"YYYY-MM-DD HH:mm:ss");
4 years ago
this.form.activity_order_id = this.orderid = this.listActivtyOrder[index].id;
4 years ago
}
this.orderType = type;
},
openselectorder() {
4 years ago
this.showSelectorder = true;
4 years ago
},
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)
4 years ago
this.showSelecttime = false;
},
cancelTime() {
this.showSelecttime = false;
},
4 years ago
plateChange(val) {
4 years ago
this.form.plate = val.join("")
4 years ago
},
handleChange() {
this.form.checkUser = !this.form.checkUser;
},
handleSelectTime() {
this.showSelecttime = true;
4 years ago
},
submitOrder() {
if (this.util.isNull(this.orderid)) {
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;
}
var that = this;
this.util.request({
api: '/api/mobile/carpark/order',
data: this.form,
4 years ago
method: "POST",
4 years ago
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({
2 years ago
url: '/packages/order/parkorder'
4 years ago
})
clearInterval(that.t);
clearTimeout(that.timer)
4 years ago
}, 3000)
// uni.showToast({
// icon: "none",
// title: "下单成功",
// complete() {
// uni.redirectTo({
// url: "/pages/success/success?from=park&id=" + res.id
// })
// }
// })
4 years ago
},
utilFail: function(res) {
that.util.toast(res);
}
})
},
4 years ago
}
}
</script>
4 years ago
<style lang="scss">
4 years ago
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;
}
4 years ago
4 years ago
.box-tipbtn {
font-size: 24rpx;
text-decoration: underline;
2 years ago
color: #cf995a;
4 years ago
}
.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;
4 years ago
z-index: 10;
4 years ago
}
.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%;
2 years ago
background-image: linear-gradient(45deg, #cf995a 0%, #cf995a 100%);
4 years ago
border-radius: 44rpx;
font-size: 30rpx;
font-weight: 500;
color: #FFFFFF;
text-align: center;
line-height: 70rpx;
margin: 30rpx auto;
}
.richp {
margin-bottom: 10rpx
4 years ago
}
4 years ago
</style>