mudi-app/pages/mian/subscribe/subscribe.vue

<template>
	<view class="subscribe">
		<u-navbar :title="title" title-width="400" class="navBar" :title-bold="true">
			<view class="right active" slot="right" v-if="isSubmit" @click="submit">
				确定预约
			</view>
			<view class="right" slot="right" v-else>
				确定预约
			</view>
		</u-navbar>
		<view class="info">
			<Item :info="info" width="240rpx" height="180rpx"></Item>
		</view>

		<view class="contact">
			<view class="title">
				联系人信息
			</view>

		</view>

		<u-form :model="form" ref="uForm" label-width="160" class="form">
			<u-form-item prop="mobile" label="姓名">
				<u-input v-model="form.name" input-align="right" :clearable="false" placeholder="姓名" />
			</u-form-item>

			<u-form-item prop="mobile" label="手机号">
				<u-input v-model="form.mobile" input-align="right" :clearable="false" placeholder="手机号" />
			</u-form-item>

			<u-form-item prop="mobile" label="期望时间">
				<view class="date" @click="show = true">
					{{appointmentTime}}
					<u-icon name="arrow-right" color="#bfc2cc" class="icon" size="28"></u-icon>
				</view>
				<!-- 	<u-calendar v-model="show" :mode="mode" max-date="2050-01-01" input-align="right" @change="change">
				</u-calendar> -->

				<u-popup v-model="show" height="50%" mode="bottom">
					<time-selector @selectTime="change" style="width: 100%;height: 100%;" selectedTabColor="red"
						selectedItemColor="#3ad2e3">
					</time-selector>
				</u-popup>


			</u-form-item>

			<view class="leave">
				<view class="title">留言</view>
				<u-input v-model="form.leave" type="textarea" :clearable="false" placeholder="更多墓地需 (选填)"
					class="textarea" />
			</view>
		</u-form>
	</view>
</template>

<script>
	import timeSelector from '@/components/xiujun-time-selector/index.vue';
	import Item from '../../../components/listItem.vue'
	export default {
		data() {
			return {
				title: '预约',
				info: null,
				appointmentTime: '',
				form: {
					mobile: '',
					time: '',
					name: '',
					leave: '',
				},
				show: false,
				mode: 'date',
			}
		},
		methods: {
			change(e) {
				console.log(e)
				let data = e.split('(')
				data[1] = data[1].split('-')[1]
				data = data[0] + ' ' + data[1];
				let nayitian = e.split('(')[1].split(')')[0]
				let shen_me_shi_hou = e.split('(')[1].split(')')[1].split('-')[1]		
				// console.log(nayitian, shen_me_shi_hou, 999999999 )
				this.appointmentTime = nayitian + "  " + shen_me_shi_hou
				console.log(data, 45566)
				this.form.time = Date.parse(data)
				// setTimeout(()=> {
					this.show = false
				// },400)
			},
			async submit() {
				if (!this.$u.test.mobile(this.form.mobile)) {
					this.$u.toast('手机号有误');
					return;
				}
				let res = await this.$u.api.pagoda.addPagodaReservation({
					pagodaId: this.info.pagodaId,
					userName: this.form.name,
					reservedCall: this.form.mobile,
					appointmentTime: this.form.time,
					leaveComments: this.form.leave
				})
				console.log(res, 999)
				uni.navigateTo({
					url: './subscibe_OK'
				})
			}
		},
		computed: {
			time() {
				return this.form.time === '' ? '选择日期' : this.form.time
			},
			isSubmit() {
				let {
					mobile,
					time,
					name,
				} = this.form

				return mobile.length > 9 && time !== '' && name !== ''
			}
		},
		components: {
			Item,
			timeSelector
		},
		onLoad() {
			this.info = JSON.parse(JSON.stringify(this.vuex_cemeteryData))
			// 清空vuex数据
			this.$u.vuex('vuex_cemeteryData', '')
		}
	}
</script>

<style lang="scss" scoped>
	.subscribe {
		.navBar {
			.right {
				width: 144rpx;
				height: 60rpx;
				border-radius: 12rpx;
				background-color: #dfe0e5;
				color: #FFFFFF;
				font-size: 24rpx;
				text-align: center;
				line-height: 60rpx;
				margin-right: 36rpx;
			}

			.active {
				background-color: #e67d29;
			}
		}

		.info {
			height: 228rpx;
			display: flex;
			align-items: center;
			padding: 0 36rpx;
			background-color: #FFFFFF;
		}

		.contact {
			.title {
				height: 106rpx;
				background-color: #f5f7fa;
				color: #909399;
				font-size: 24rpx;
				line-height: 108rpx;
				padding-left: 36rpx;
			}
		}

		.form {
			padding: 0 36rpx;

			.date {
				width: 100%;
				text-align: right;
				float: right;

				.icon {
					margin-left: 20rpx;
				}
			}

			.leave {
				.title {
					margin: 36rpx;
					margin-left: 0;
					font-size: 28rpx;
				}

					.textarea {
					background-color: #f5f7fa;
					width: 100%;
					height: 300rpx;
					border-radius: 12rpx;
					padding: 24rpx !important;
				
					/deep/ .uni-textarea-textarea {
						height: 240rpx;
					}
					
					/deep/ .uni-textarea-placeholder {
						height: 100rpx;
					}
				}
			}

		}
	}
</style>