deming/pageE/tool/ManicureOrder.vue

<template>
	<view class="manicure-order">
		<view class="order-form">
			<view class="order-name">
				<view>美甲人：</view>
				<input type="text" v-model="name" />
			</view>
			<view class="order-date" @click="show=true">
				<view>美甲时间：</view>
				<img src="../static/mine/21.png" v-if="!time" />
				<view v-else>{{ time }}</view>
			</view>
		</view>
		<view class="order-btn" @click="addManicureOrder">确认订单</view>
		<u-picker mode="time" v-model="show" :params="params" @confirm="chooseDate"></u-picker>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
export default {
	data() {
		return {
			name: '',
			time: '',
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
				second: false
			},
			show: false
		}
	},
	methods: {
		validateValue() {
			if(this.$u.test.isEmpty(this.name)) {
				this.showToast('姓名不能为空', 'warning');
				return false;
			}
			if(this.$u.test.isEmpty(this.time)) {
				this.showToast('日期不能为空', 'warning');
				return false;
			}
			if(new Date() > new Date(this.time)) {
				this.showToast('日期错误', 'warning');	
				return false;
			}
			return true;
		},
		addManicureOrder() {
			if(!this.validateValue()) return false;
			this.$u.api.addManicure({
				name: this.name,
				time: new Date(this.time)
			}).then((res)=>{
				if(res.errCode == 0) {
					this.$refs.uToast.show({
						title: res.message,
						type: 'success',
						url: '/pageE/tool/Manicure'
					})
				} else {
					this.showToast(res.message, 'error');
				}
			})
		},
		chooseDate(e) {
			// let time = e.year + '年' + e.month + '月' + e.day + '日' + e.hour + '时' + e.minute + '分'
			let time = e.year + '-' + e.month + '-' + e.day + ' ' + e.hour + ':' + e.minute
			this.time = time
		},
		showToast(message, type) {
			this.$refs.uToast.show({
				title: message,
				type: type,
			})
		},
	},
};
</script>
<style lang="scss" scoped>
.manicure-order {
	min-height: calc(100vh - var(--window-top));
	background-color: #ECECEC;
	padding-top: 1rpx;
	.order-form {
		> view {
			height: 98rpx;
			background-color: #ffffff;
			padding: 35rpx 30rpx;
			&:not(:last-child) {
				margin-bottom: 2rpx;
			}
		}
		.order-name {
			display: flex;
			align-items: center;
			> view {
				font-size: 30rpx;
				color: rgba(51,51,51,1);
			}
			> input {
				flex: 1;
				text-align: right;
			}
		}
		.order-date {
			display: flex;
			align-items: center;
			justify-content: space-between;
			> img {
				width: 14rpx;
				height :24rpx;
			}
		}
	}
	.order-btn {
		width: 690rpx;
		height: 98rpx;
		background: rgba(255,120,15,1);
		border-radius: 49rpx;
		font-size: 36rpx;
		color: rgba(255,255,255,1);
		line-height: 98rpx;
		text-align: center;
		position: absolute;
		bottom: 40rpx;
		left: 50%;
		transform: translate(-50%, 0);
	}
}
</style>