special/pages/subpack/pages/apply/apply.vue

<template>
	<view class="container">
		<up-navbar class="u-navbar-box" title="护理申请" auto-back placeholder bgColor="transparent"
			:title-style="{fontWeight:'bold'}">
		</up-navbar>
		<scroll-view scroll-y class="flex-column flex-1" style="overflow: hidden;background-color: #F6F8FD;">
			<view class="p-32 flex-column" style="width: 686rpx;">
				<view class="w-100p flex-column">
					<view class="flex-row align-center">
						<view style="width: 6rpx;height: 32rpx;background-color: #39A1FF;border-radius: 4rpx;"></view>
						<text class="font-xmd text-black3" style="margin-left: 14rpx;">预约人信息</text>
					</view>
					<view class="flex-column py-4 px-24 mt-24"
						style="background: linear-gradient( 180deg, #E8F4FF 0%, #FFFFFF 100%);border-radius: 16rpx;">
						<view class="flex-row align-center justify-between">
							<text class="font text-black2">姓名</text>
							<view class="flex-row justify-end" style="width: 440rpx;">
								<up-input placeholder="请输入申请人姓名" border="none" v-model.trim="formData.name" clearable
									:maxlength="20" input-align="end"></up-input>
								<!-- <text class="font text-black2">请选择申请人</text> -->
							</view>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">护理需求</text>
							<view style="width: 440rpx;">
								<up-input placeholder="请输入护理需求" border="none" v-model.trim="formData.demand" clearable
									:maxlength="50"></up-input>
							</view>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">首选护理人员性别</text>
							<view style="width: 440rpx;">
								<u-input placeholder="请输入性别" border="none" type="number" v-model.trim="formData.sex"
									clearable :maxlength="11"></u-input>
							</view>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">所在医院</text>
							<view style="width: 440rpx;">
								<u-input placeholder="请输入所在医院" border="none" type="number"
									v-model.trim="formData.hospital" clearable :maxlength="11"></u-input>
							</view>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">详细地址</text>
							<view style="width: 440rpx;">
								<u-input placeholder="请输入详细地址" border="none" type="number"
									v-model.trim="formData.address" clearable :maxlength="11"></u-input>
							</view>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">预计天数</text>
							<view style="width: 440rpx;">
								<u-input placeholder="请输入预计天数" border="none" type="number"
									v-model.trim="formData.dayCount" clearable :maxlength="11"></u-input>
							</view>
						</view>
						<view class="flex-row align-center justify-between mt-4">
							<text class="font text-black2">备注</text>
							<view style="width: 440rpx;">
								<u-input placeholder="请输入备注" border="none" type="number" v-model.trim="formData.remark"
									clearable :maxlength="50"></u-input>
							</view>
						</view>
					</view>
				</view>

				<view class="w-100p flex-row align-center justify-center mt-4"
					style="background-color: #39A1FF;height: 88rpx;border-radius: 50rpx;" @click="handleSubmit">
					<text class="font-md text-white">确认提交</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import {
		applyUrl
	} from '@/common/config/api.js'
	export default {
		data() {
			return {
				formData: {
					personId: '6',
					name: '',
					demand: '',
					sex: '',
					hospital: '',
					address: '',
					dayCount: '',
					remark: ''
				}
			}
		},
		methods: {
			handleSubmit() {
				applyUrl({
						address: this.formData.address,
						applyDate: dayjs().format('YYYY-MM-DD'),
						careDays: this.formData.dayCount,
						careNeeds: this.formData.demand,
						hospital: this.formData.hospital,
						nurseGender: this.formData.sex,
						personId: this.formData.personId,
						personName: this.formData.name,
						remark: this.formData.remark
					})
					.then(res => {
						console.log('提交');
					})
					.catch(err => {
						console.log(err);
					})
			},
			goChoosePeople() {
				uni.navigateTo({
					url: '/pages/subpack/pages/choose-people/choose-people'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		// background-image: url('@/static/images/index-bg.png');
		// background-size: cover;
		// background-position: center;
		display: flex;
		flex-direction: column;
	}

	.u-navbar-box {
		background: radial-gradient(circle at left, #FFE5E4 0%, #EEF2F5 40%, #DBEEFB 100%);
	}
</style>