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.
304 lines
5.9 KiB
304 lines
5.9 KiB
<template>
|
|
<view class="page">
|
|
<navbar title="提交预约" leftClick @leftClick="$utils.navigateBack" />
|
|
<view class="box">
|
|
<view class="info">
|
|
<view class="title">
|
|
{{ dict.title }}
|
|
</view>
|
|
<view class="tips">
|
|
项目/负责人：{{ detailTitle }}
|
|
</view>
|
|
<view class="tips">
|
|
开放时间：{{ detail.openTime }}
|
|
</view>
|
|
<view class="tips">
|
|
联系电话：{{ detail.phone }}
|
|
</view>
|
|
<view class="tips"
|
|
v-if="price">
|
|
价格：￥ {{ 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="">
|
|
{{ form.orderTime[0] || '请选择' }}
|
|
<view class="icon">
|
|
<uv-icon
|
|
name="arrow-down"
|
|
size="26rpx">
|
|
</uv-icon>
|
|
</view>
|
|
</view>
|
|
至
|
|
<view class="">
|
|
{{ form.orderTime[1] || '请选择' }}
|
|
<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: '我要研学'
|
|
},
|
|
],
|
|
type: '',
|
|
dict : {},
|
|
form : {
|
|
name : '',
|
|
phone : '',
|
|
orderTime : [],
|
|
},
|
|
selectDate : this.$dayjs().format('YYYY-MM-DD'),
|
|
timeColumns : [],
|
|
id : 0,
|
|
detail : {},
|
|
//订单类型(0-路径定制 1-遗产讲述 2-达人同游 3-我要跟拍 4-非遗体验 5-我要研学)
|
|
// 5-遗产路径待定
|
|
api : {
|
|
0 : 'queryAmusementById',//路径定制
|
|
1 : 'queryRoleInfoById',//遗产讲述
|
|
2 : 'queryRoleInfoById',//达人同游
|
|
3 : 'queryRoleInfoById',//我要跟拍
|
|
4 : 'queryExperienceById',//非遗体验
|
|
5 : 'queryAmusementById',//我要研学
|
|
// 6 : 'queryAmusementById',
|
|
},
|
|
}
|
|
},
|
|
computed : {
|
|
detailTitle(){
|
|
return this.detail.roleName ||
|
|
this.detail.amusementTitle ||
|
|
this.detail.experienceTitle
|
|
},
|
|
price(){
|
|
return this.detail.price ||
|
|
this.detail.amusementPrice
|
|
}
|
|
},
|
|
onLoad(args) {
|
|
this.id = args.id
|
|
|
|
this.type = args.type
|
|
this.dict = this.$config.dict[args.type]
|
|
},
|
|
onShow() {
|
|
this.getData()
|
|
this.getDataTime(0)
|
|
this.getDataTime(1)
|
|
},
|
|
methods: {
|
|
// 获取预约信息
|
|
getData(){
|
|
this.$api(this.api[this.dict.payType], {
|
|
roleInfoId : this.id,
|
|
amusementId : this.id,
|
|
experienceId : 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){
|
|
this.form.orderTime = []
|
|
e.value.forEach((n, i) => {
|
|
this.form.orderTime.push(n && n.timeDot)
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</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>
|