webapp / GreenwayWeb

<template>
	<view class="page">

		<view class="add-list" >
			<u-form labelPosition="left" :model="ruleForm" ref="uForm" :labelWidth="250">
				<u-form-item label="*申请原因" prop="reasonForApplication" borderBottom>
				</u-form-item>
				<u-input v-model="ruleForm.reasonForApplication" type="textarea" :custom-style="customStyle"></u-input>
			</u-form>
		</view>
		<view class="add-list">
			<u-form labelPosition="left" :model="ruleForm" ref="uForm" :labelWidth="250">
				<u-form-item label="*申请时间" prop="applicationTime" borderBottom>
					<u-input v-model="ruleForm.applicationTime" type="select" @click="busStartshow = true"
						placeholder="请选择" :custom-style="selStyle" />
					<u-picker mode="time" v-model="busStartshow" :params="params" @confirm="busStTimeChange"></u-picker>
				</u-form-item>

			</u-form>
		</view>
		<!-- 保存按钮 -->
		<view class="page-footer">
			<u-button type="success" style="flex: 1; margin: 0 10px;" @click="go">提交申请</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				ruleForm: {
					reasonForApplication: '',
					applicationTime: '',
					contractId: 0,
					contractType: 0,
					createTime: '',
					createUser: ''
				},
				busStartshow: false,
				params: {
					year: true,
					month: true,
					day: true,
				},
				customStyle: {
					padding: '10px',
					backgroundColor: '#F0F0F0',
					borderRadius: '10px',

				},
				selStyle: {
					textAlign: 'right'
				}

			};
		},
		onLoad(option) {
			if(option.type == '1'){
				uni.setNavigationBarTitle({
				                title: '申请续租'
				            });
			}
			if (option.ids) {
				this.ruleForm.contractId = Number(option.ids)
			}
			if (option.type) {
				this.ruleForm.contractType = option.type
			
			}
		},
		onShow() {},
		methods: {
			getCurrentTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = ('0' + (now.getMonth() + 1)).slice(-2);
				const day = ('0' + now.getDate()).slice(-2);
				const hours = ('0' + now.getHours()).slice(-2);
				const minutes = ('0' + now.getMinutes()).slice(-2);
				const seconds = ('0' + now.getSeconds()).slice(-2);

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
			chek() {
				if (!this.ruleForm.reasonForApplication) {
					uni.showToast({
						icon: 'none',
						title: '请输入申请原因'
					});
					return false;
				}
				if (!this.ruleForm.applicationTime) {
					uni.showToast({
						icon: 'none',
						title: '请选择退租申请时间'
					});
					return false;
				}
				return true;
			},
			go() {
				this.ruleForm.createUser = uni.getStorageSync('user').phone
				this.ruleForm.createTime = this.getCurrentTime()
				let c1 = this.chek()
				if(!c1) {
					return
				}
				this.$http.sendRequest('/changeContractInformation/add', 'POST', this.ruleForm, 1).then(res => {

					if(res.data.code == '200') {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
						});
						setTimeout(()=>{
							uni.navigateBack()
						},1000)
					} else {
						uni.showToast({
							title: res.data.message,
							icon: 'none',
						});
					}

				})
			},
			timeChange(val) {
				const {
					year,
					month,
					day,
				} = val;
				return `${year}-${month}-${day}`;
			},
			busStTimeChange(val) {
				this.ruleForm.applicationTime = this.timeChange(val)
			},


		}
	}
</script>

<style scoped lang="scss">
	.page {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		overflow-y: scroll;
		height: calc(100% - 120rpx);
		background-color: #f6f6f6;
		padding: 0 10px;
	}

	.steps-box {
		padding-top: 40rpx;
	}

	.add-list {

		padding: 0 20px 20px 20px;
		background-color: #FFFFFF;
		border-radius: 20rpx;
		margin-top: 20rpx;
		width: 100%;


	}

	/* 保存按钮 */
	.page-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		display: flex;
		align-items: center;
		width: 100%;
		height: 125rpx;
		background-color: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.footer-buy {
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			height: 100%;

			.cart-add {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 100%;
				height: 100rpx;
				background-color: #3f9b6a;

				text {
					font-size: 28rpx;
					color: #FFFFFF;
				}
			}
		}
	}

	.feedback-data {
		width: 100%;
		padding-bottom: 20rpx;
		border-bottom: 2rpx solid #f6f6f6;

		.title {
			display: flex;
			align-items: center;
			height: 100rpx;

			text {
				font-size: 26rpx;
				color: #222222;
			}

			.star {
				color: red;
			}
		}

		.voucher-img {
			display: flex;
			align-items: center;

			.voucher-list {
				width: 33%;
				height: 100%;

				image {
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
				}
			}
		}
	}
</style>