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.
274 lines
4.9 KiB
274 lines
4.9 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="提交预约" leftClick @leftClick="$utils.navigateBack" />
|
|
<view class="box">
|
|
<view class="info">
|
|
<view class="title">
|
|
{{ title }}
|
|
</view>
|
|
<view class="tips">
|
|
项目：{{ detail.roleName }}
|
|
</view>
|
|
<view class="tips">
|
|
开放时间：06:00-21:00
|
|
</view>
|
|
<view class="tips">
|
|
联系电话：1311311311313
|
|
</view>
|
|
<view class="tips">
|
|
价格：￥{{ detail.price }}
|
|
</view>
|
|
</view>
|
|
<view class="form-time">
|
|
|
|
<!-- 预约日期 -->
|
|
<view class="title">
|
|
预约日期
|
|
</view>
|
|
<view class="line"
|
|
@click="$refs.calendars.open()">
|
|
<view class="">
|
|
{{ selectDate.split('-')[0] }}年
|
|
<view class="icon">
|
|
<uv-icon
|
|
name="arrow-down"
|
|
size="26rpx">
|
|
</uv-icon>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
{{ selectDate.split('-')[1] }}月
|
|
<view class="icon">
|
|
<uv-icon
|
|
name="arrow-down"
|
|
size="26rpx">
|
|
</uv-icon>
|
|
</view>
|
|
</view>
|
|
<view class="">
|
|
{{ selectDate.split('-')[2] }}日
|
|
<view class="icon">
|
|
<uv-icon
|
|
name="arrow-down"
|
|
size="26rpx">
|
|
</uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 预约时间 -->
|
|
<view class="title">
|
|
预约时间
|
|
</view>
|
|
<view class="line"
|
|
@click="$refs.picker.open()">
|
|
<view class="">
|
|
08:00
|
|
<view class="icon">
|
|
<uv-icon
|
|
name="arrow-down"
|
|
size="26rpx">
|
|
</uv-icon>
|
|
</view>
|
|
</view>
|
|
至
|
|
<view class="">
|
|
14:00
|
|
<view class="icon">
|
|
<uv-icon
|
|
name="arrow-down"
|
|
size="26rpx">
|
|
</uv-icon>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="box">
|
|
<view class="form-input">
|
|
<view class="title">
|
|
游客信息
|
|
</view>
|
|
<view class="input">
|
|
<view class="label">
|
|
姓名
|
|
</view>
|
|
<input type="text"
|
|
placeholder="请输入姓名"
|
|
v-model="form.name"/>
|
|
</view>
|
|
<view class="input">
|
|
<view class="label">
|
|
联系方式
|
|
</view>
|
|
<input type="text"
|
|
placeholder="请输入联系方式"
|
|
v-model="form.phone"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- 选择日期 -->
|
|
<uv-calendars
|
|
color="#B12026"
|
|
:date="selectDate"
|
|
confirmColor="#B12026"
|
|
:clearDate="false"
|
|
ref="calendars" @confirm="confirmDate" />
|
|
|
|
|
|
<!-- 选择时间 -->
|
|
<uv-picker ref="picker"
|
|
:columns="timeColumns"
|
|
confirmColor="#B12026"
|
|
keyName="timeDot"
|
|
@confirm="confirmTime"></uv-picker>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
tabs: [{
|
|
name: '路径定制'
|
|
},
|
|
{
|
|
name: '遗产讲述'
|
|
},
|
|
{
|
|
name: '达人同游'
|
|
},
|
|
{
|
|
name: '我要跟拍'
|
|
},
|
|
{
|
|
name: '非遗体验'
|
|
},
|
|
{
|
|
name: '遗产路径'
|
|
},
|
|
{
|
|
name: '我要研学'
|
|
},
|
|
],
|
|
title : '',
|
|
form : {
|
|
name : '',
|
|
phone : '',
|
|
},
|
|
selectDate : this.$dayjs().format('YYYY-MM-DD'),
|
|
timeColumns : [],
|
|
id : 0,
|
|
payType : 0,
|
|
detail : {},
|
|
}
|
|
},
|
|
onLoad(args) {
|
|
this.payType = args.payType
|
|
this.title = this.tabs[args.payType].name
|
|
this.id = args.id
|
|
},
|
|
onShow() {
|
|
this.getData()
|
|
this.getDataTime(0)
|
|
this.getDataTime(1)
|
|
},
|
|
methods: {
|
|
// 获取预约信息
|
|
getData(){
|
|
this.$api('queryRoleInfoById', {
|
|
roleInfoId : this.id,
|
|
}, res => {
|
|
uni.stopPullDownRefresh()
|
|
if(res.code == 200){
|
|
this.detail = res.result
|
|
}
|
|
})
|
|
},
|
|
// 获取预约信息
|
|
getDataTime(timeType){
|
|
this.$api('queryOrderTime', {
|
|
timeType
|
|
}, res => {
|
|
if(res.code == 200){
|
|
this.timeColumns.splice(timeType, 0, res.result)
|
|
}
|
|
})
|
|
},
|
|
// 选择日期
|
|
confirmDate(e){
|
|
this.selectDate = e.fulldate
|
|
},
|
|
// 选择时间
|
|
confirmTime(e){
|
|
console.log(e);
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.page{
|
|
.box{
|
|
border-radius: 20rpx;
|
|
margin: 20rpx;
|
|
background-color: #fff;
|
|
box-shadow: 0 0 16rpx 6rpx #00000011;
|
|
.info{
|
|
padding: 40rpx;
|
|
border-bottom: 1rpx dashed #000;
|
|
.title{
|
|
font-size: 34rpx;
|
|
font-weight: 900;
|
|
padding-bottom: 20rpx;
|
|
}
|
|
.tips{
|
|
font-size: 26rpx;
|
|
color: #666666;
|
|
padding: 10rpx 0;
|
|
}
|
|
}
|
|
.form-time{
|
|
padding: 40rpx;
|
|
.title{
|
|
font-weight: 900;
|
|
padding-bottom: 20rpx;
|
|
margin-top: 10rpx;
|
|
}
|
|
.line{
|
|
display: flex;
|
|
align-items: center;
|
|
>view{
|
|
border: 1rpx solid #333;
|
|
padding: 6rpx 20rpx;
|
|
margin: 10rpx;
|
|
border-radius: 10rpx;
|
|
font-size: 26rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
.icon{
|
|
padding: 0 10rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.form-input{
|
|
padding: 40rpx;
|
|
.input{
|
|
display: flex;
|
|
padding-top: 30rpx;
|
|
.label{
|
|
width: 200rpx;
|
|
}
|
|
input{
|
|
font-size: 26rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|