Jingde-town-wechat-uniapp/pages_order/order/orderSubscribe.vue

<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>
		
		<view class="btn"
		@click="submit">
			提交预约
		</view>
		
		
		<!-- 选择日期 -->
		<uv-calendars 
		color="#B12026" 
		:date="selectDate"
		confirmColor="#B12026"
		:clearDate="false"
		:startDate="$dayjs().format('YYYY-MM-DD') "
		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 || 0
			}
		},
		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.travelRoleInfo || res.result.travelExperience || res.result.travelAmusement
					}
				})
			},
			// 获取预约信息
			getDataTime(timeType){
				this.$api('queryOrderTime', {
					timeType
				}, res => {
					if(res.code == 200){
						this.timeColumns.splice(timeType, 0, res.result)
						// this.form.orderTime.splice(timeType, 0, res.result[0].timeDot)
					}
				})
			},
			// 选择日期
			confirmDate(e){
				this.selectDate = e.fulldate
			},
			// 选择时间
			confirmTime(e){
				this.form.orderTime = []
				e.value.forEach((n, i) => {
					this.form.orderTime.push(n && n.timeDot)
					if(!this.form.orderTime[i]){
						this.form.orderTime[i] = this.timeColumns[i][0].timeDot
					}
				})
			},
			submit(){
				
				let data = {
					itemId : this.detail.id,
					orderPhone : this.form.phone,
					orderTitle : this.detailTitle,
					orderDate : this.selectDate,
					orderPrice : this.price,
					orderTime : this.form.orderTime.join('-'),
					orderType : this.dict.payType,
					orderName : this.form.name
				}
				
				
				if(this.$utils.verificationAll(data, {
					orderName : '请填写姓名',
					orderPhone : '请填写联系方式',
					orderTime : '请选择预约时间',
				})){
					return
				}
				
				this.$api('createOrder', data, res => {
					if(res.code == 200){
						uni.showToast({
							title: res.message,
							icon : 'none'
						})
						uni.redirectTo({
							url: '/pages_order/mine/subscribe'
						})
					}
				})
			},
		}
	}
</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;
				}
			}
		}
	}
}
.btn{
	margin: 0 auto;
	padding: 20rpx 0;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 80%;
	background-color: $uni-color;
	color: #fff;
	border-radius: 30rpx;
}
</style>