297 lines
8.8 KiB
Vue
297 lines
8.8 KiB
Vue
<template>
|
|
<view>
|
|
<fl-page-header :autoback="true"
|
|
:left="false">
|
|
<template v-slot:center>
|
|
<view class="row items-center">
|
|
<text class="font-16 ">填写预约信息</text>
|
|
</view>
|
|
</template>
|
|
</fl-page-header>
|
|
|
|
<view :style="{
|
|
minHeight: 'calc(100vh - ' + filterBoxTop + ' - 226rpx'+')',
|
|
}"
|
|
class="fl-px-lg">
|
|
|
|
<view class="row justify-start item-center font-16 fl-mb-sm"
|
|
style="color:#fff">
|
|
<u-image src="../../static/icon-ticket-addr.png"
|
|
width="26rpx"
|
|
height="38rpx"></u-image>
|
|
<text class="fl-ml-xs fl-mr-md">门票系统的某个场馆</text>
|
|
</view>
|
|
<view class="row justify-center">
|
|
<u-image :src="formData.url"
|
|
width="664rpx"
|
|
height="354rpx"></u-image>
|
|
</view>
|
|
<view class="form-card"
|
|
style="background:#63BFA1;color:#fff;margin-top:32rpx">
|
|
<view class="form-item">
|
|
<view style="width: 200rpx; border-right: 2rpx solid #fff">门票名称</view>
|
|
<view style="margin-left: 32rpx">
|
|
{{formData.name}}
|
|
</view>
|
|
</view>
|
|
<u-divider lineColor="#C0DED4"></u-divider>
|
|
<view class="form-item">
|
|
<view style="width: 200rpx; border-right: 2rpx solid #fff">剩余数量</view>
|
|
<view style="margin-left: 32rpx">
|
|
{{formData.canReserve+'/'+formData.total}}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<u-divider lineColor="#C0DED4"></u-divider>
|
|
|
|
<view class="form-card">
|
|
<view class="form-item">
|
|
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4;font-size:28rpx">预留手机号<text style="font-size:20rpx">(+86)</text></view>
|
|
<view style="margin-left: 32rpx">
|
|
<u--input style="width: 360rpx"
|
|
border="none"
|
|
placeholder="填写手机号"
|
|
clearable
|
|
type="number"
|
|
v-model="formData.telNum"></u--input>
|
|
</view>
|
|
</view>
|
|
<u-divider lineColor="#C0DED4"></u-divider>
|
|
<view class="form-item">
|
|
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4;font-size:28rpx">验证码</view>
|
|
<view style="margin-left: 32rpx">
|
|
<u-input style="width: 360rpx"
|
|
border="none"
|
|
placeholder="填写验证码"
|
|
v-model.trim="formData.code"
|
|
clearable
|
|
type="number"
|
|
:maxlength="6">
|
|
<template slot="suffix">
|
|
<u-code ref="uCode"
|
|
@change="codeChange"
|
|
seconds="5"
|
|
changeText="X秒重新获取"></u-code>
|
|
<view style="color: #52b6ff; font-size: 20rpx"
|
|
@click="goSendCode">{{ tips }}</view>
|
|
</template>
|
|
</u-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="form-card fl-mt-md">
|
|
<view class="form-item">
|
|
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4">选择类型</view>
|
|
<view style="margin-left: 32rpx">
|
|
<u--input style="width: 360rpx"
|
|
v-model="formData.type"
|
|
border="none"
|
|
clearable
|
|
readonly>
|
|
<template slot="suffix">
|
|
<u-image src="../../static/icon-pick.png"
|
|
width="64rpx"
|
|
height="34rpx"
|
|
@click="typeShow = true"></u-image>
|
|
<u-picker :show="typeShow"
|
|
:columns="typeOption"
|
|
@cancel="handleTypeSelectCancel"
|
|
@confirm="(e) => handleTypeSelectConfirm(e, 'type')"></u-picker>
|
|
|
|
</template>
|
|
</u--input>
|
|
</view>
|
|
</view>
|
|
<u-divider lineColor="#C0DED4"></u-divider>
|
|
<view class="form-item">
|
|
<view style="width: 200rpx; border-right: 2rpx solid #C0DED4">选择时间</view>
|
|
<view style="margin-left: 32rpx">
|
|
<u-input style="width: 360rpx"
|
|
v-model="formData.time"
|
|
border="none"
|
|
clearable
|
|
readonly>
|
|
<template slot="suffix">
|
|
|
|
<u-image src="../../static/icon-pick.png"
|
|
width="64rpx"
|
|
height="34rpx"
|
|
@click="dateShow = true"></u-image>
|
|
<u-datetime-picker :show="dateShow"
|
|
mode="datetime"
|
|
:minDate="Date.now()"
|
|
@confirm="(e) => handleDateSelectConfirm(e, 'time')"
|
|
@cancel="handleDateSelectCancel"></u-datetime-picker>
|
|
</template>
|
|
</u-input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="row justify-center"
|
|
style="margin-top:182rpx">
|
|
<u-button text="预约"
|
|
style="
|
|
background-color: #40BE94;
|
|
border: transparent
|
|
font-weight: bolder;
|
|
font-size: 40rpx;
|
|
width: 436rpx;
|
|
height: 60rpx;
|
|
color:#fff;"
|
|
shape="circle"
|
|
:loading="btnLoading"
|
|
@click="handleReserve('/pages/ticket/index')"></u-button>
|
|
</view>
|
|
|
|
</view>
|
|
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
<script>
|
|
import { getTheDate } from "@/util/date";
|
|
import pageData from "../../static/pageData.json";
|
|
import { getLabelByOptions, calcRouteParams } from "@/util/form";
|
|
export default {
|
|
data () {
|
|
return {
|
|
filterBoxTop: null,
|
|
formData: {
|
|
url: '',
|
|
name: '',
|
|
canReserve: '',
|
|
total: '',
|
|
telNum: "",
|
|
code: "",
|
|
time: null,
|
|
type: ''
|
|
},
|
|
tips: "获取验证码",
|
|
btnLoading: false,
|
|
dateShow: false,
|
|
typeShow: false,
|
|
typeOption: [['双人', '单人票', '亲子票', '6人团队']
|
|
]
|
|
};
|
|
},
|
|
onLoad (pageParams) {
|
|
this.filterBoxTop = uni.getSystemInfoSync()["statusBarHeight"] + 44 + "px";
|
|
},
|
|
onShow () {
|
|
let data = uni.getStorageSync('elector-link')
|
|
Object.assign(this.formData, data)
|
|
console.log('data', data);
|
|
this.getPageData();
|
|
},
|
|
beforeDestroy () { },
|
|
methods: {
|
|
codeChange (text) {
|
|
this.tips = text;
|
|
},
|
|
async goSendCode () {
|
|
if (!this.formData.telNum) {
|
|
this.$refs.uToast.show({
|
|
type: "error",
|
|
message: "请输入手机号",
|
|
});
|
|
return;
|
|
}
|
|
|
|
if (this.$refs.uCode.canGetCode) {
|
|
uni.showLoading({
|
|
title: "正在获取验证码",
|
|
});
|
|
setTimeout(() => {
|
|
this.$refs.uToast.show({
|
|
type: "success",
|
|
message: "发送成功",
|
|
});
|
|
this.$refs.uCode.start();
|
|
}, 1000)
|
|
uni.hideLoading();
|
|
}
|
|
},
|
|
handleTypeSelectConfirm (e, field) {
|
|
this.formData[field] = e.value[0]
|
|
this.typeShow = false;
|
|
},
|
|
handleTypeSelectCancel (e) {
|
|
this.typeShow = false;
|
|
},
|
|
handleDateSelectConfirm (e, field) {
|
|
this.formData[field] = getTheDate(e.value);
|
|
this.dateShow = false;
|
|
},
|
|
handleDateSelectCancel (e) {
|
|
this.dateShow = false;
|
|
},
|
|
handleReserve (path, params) {
|
|
if (!this.formData.telNum || !this.formData.code || !this.formData.time || !this.formData.type) {
|
|
this.$refs.uToast.show({
|
|
type: "error",
|
|
message: "请完善信息！",
|
|
});
|
|
return;
|
|
}
|
|
uni.switchTab({
|
|
url: path,
|
|
});
|
|
// uni.navigateTo({
|
|
// url: path,
|
|
// });
|
|
},
|
|
getPageData (scroll) {
|
|
},
|
|
handleLink (path, params = {}) {
|
|
uni.navigateTo({
|
|
url: path + calcRouteParams(params),
|
|
});
|
|
},
|
|
scrollRequest () {
|
|
console.log('scrollRequest');
|
|
this.tableParams.page++;
|
|
this.getPageData(true);
|
|
},
|
|
handleFinishAll () {
|
|
},
|
|
handlePageType () {
|
|
this.getPageData();
|
|
},
|
|
handleContractClick (rowData) {
|
|
},
|
|
handleLabelByOptions (val, options) {
|
|
return getLabelByOptions(val, options);
|
|
},
|
|
handleTabBack (path) {
|
|
uni.switchTab({
|
|
url: path
|
|
});
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
/deep/ .u-image__image {
|
|
border-radius: 20rpx !important;
|
|
}
|
|
.form-card {
|
|
padding: 30rpx 32rpx;
|
|
background-color: #fff;
|
|
width: 100%;
|
|
box-sizing: border-box;
|
|
border-radius: 20rpx;
|
|
box-shadow: 0px 1px 2px #dddddd, 0px 1px 2px #ffffff, 0px 1px 2px #736f6f;
|
|
|
|
.form-item {
|
|
display: flex;
|
|
margin-top: 7rpx;
|
|
}
|
|
}
|
|
|
|
/deep/ .u-cell__body {
|
|
padding: 10rpx 5rpx;
|
|
}
|
|
</style>
|