yikangyang-wx/package_sub/pages/ServeForm/ServeForm.vue

<template>
	<view class="page">
		<image class="bkg" :src="info.cover?info.cover.url:''"></image>
		<view class="cotainer">
			<view class="hospital">
				<view class="title">咨询科室：{{ info.name?info.name:'' }} - {{department_name?department_name:''}}</view>
				<view class="hospital-title">患者信息</view>
				<view class="hospital-form">
					<view class="form-card form-card-1">
						<u-form :model="form" :rules="rules" ref="uForm" :label-width="178" :error-type="['toast']">
							<u-form-item label="姓名" prop="name" required>
								<u-input v-model="form.name" placeholder="请填写姓名" />
							</u-form-item>
							<u-form-item label="性别" prop="sex" required>
								<view slot="right">
									<view class="sexs">
										<view v-for="item in list_sex" class="sexs-item" @click="confirmSex(item)"
											:class="form.sex==item?'sexs-active':''">{{item}}</view>
									</view>
								</view>
							</u-form-item>
							<u-form-item label="出生年月" prop="birthday" required>
								<u-input type="select" placeholder="请选择" v-model="form.birthday"
									:select-open="isShowTime" @click="isShowTime = true" />
							</u-form-item>
							<u-form-item label="所在城市" prop="city">
								<u-input v-model="form.city" placeholder="请填写所在城市" />
							</u-form-item>
							<u-form-item label="患者关系" prop="relationship" required>
								<u-input type="select" placeholder="请选择" v-model="form.relationship"
									:select-open="isShowRelationship" @click="isShowRelationship = true" />
							</u-form-item>
							<u-form-item label="手机号码" prop="mobile" required>
								<u-input v-model="form.mobile" placeholder="请填写手机号码" type="number" />
							</u-form-item>
							<u-form-item label="咨询类别" prop="type" required>
								<u-input type="select" placeholder="请选择" v-model="form.type" :select-open="isShowType"
									@click="isShowType = true" />
							</u-form-item>
							<view class="form-card-2">
								<u-form-item label="咨询信息" prop="content" label-position="top" :border-bottom="false">
									<u-input border :custom-style="{ 'letter-spacing': '2rpx' }" border-color="#dad9d9"
										placeholder="请简单描述您要咨询的内容(内容加密保护)" v-model="form.content"
										type="textarea"></u-input>
								</u-form-item>
							</view>
						</u-form>
					</view>
				</view>
			</view>

			<u-button ripple shape="circle" :custom-style="orderBtnStyle" :throttle-time="2000"
				@click="submit">提交咨询</u-button>
		</view>
		<!-- 出生年月 -->
		<u-picker v-model="isShowTime" :params="{
		    year: true,
		    month: true,
		    day: true,
		  }" mode="time" @confirm="confirmTime"></u-picker>
		<!-- 患者关系 -->
		<u-select v-model="isShowRelationship" value-name="value" @confirm="confirmRelationship" label-name="label"
			:list="list_relationship"></u-select>
		<!-- 咨询类别 -->
		<u-select v-model="isShowType" value-name="value" @confirm="confirmType" label-name="label"
			:list="list_type"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderBtnStyle: {
					'background-image': 'linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%)',
					'font-weight': '500',
					'font-size': '27rpx',
					'color': '#fff',
					'width': '440rpx',
					'height': '80rpx',
					'line-height': '80rpx'
				},
				serve_hospital_id: '',
				serve_hospital_department_id: '',
				info: {},
				department_name: '',
				form: {
					name: '',
					sex: '男',
					birthday: '',
					city: '',
					relationship: '',
					mobile: '',
					type: '',
					content: '',
				},
				rules: {
					name: [{
						required: true,
						message: "请填写姓名",
						trigger: ["blur", "change"],
					}],
					sex: [{
						required: true,
						message: "请选择性别",
						trigger: ["blur", "change"],
					}],
					birthday: [{
						required: true,
						message: "请选择出生日期",
						trigger: ["blur", "change"],
					}],
					relationship: [{
						required: true,
						message: "请选择患者关系",
						trigger: ["blur", "change"],
					}],
					mobile: [{
							required: true,
							message: "请填写手机号码",
							trigger: ["blur", "change"],
						},
						{
							// 自定义验证函数，见上说明
							validator: (rule, value, callback) => {
								return this.$u.test.mobile(value);
							},
							message: "手机号码不正确",
							// 触发器可以同时用blur和change
							trigger: ["change", "blur"],
						}
					],
					type: [{
						required: true,
						message: "请选择咨询类别",
						trigger: ["blur", "change"],
					}],
				},
				isShowTime: false,
				isShowRelationship: false,
				list_sex: ['男', '女'],
				list_relationship: [{
					label: '本人',
					value: '本人'
				}, {
					label: '家庭成员',
					value: '家庭成员'
				}, {
					label: '亲戚朋友',
					value: '亲戚朋友'
				}, {
					label: '其他',
					value: '其他'
				}],
				isShowType: false,
				list_type: [{
					label: '挂号',
					value: '挂号'
				}, {
					label: '陪诊',
					value: '陪诊'
				},{
					label: '照护',
					value: '照护'
				}, {
					label: '预约专家',
					value: '预约专家'
				}],

			};
		},
		mounted() {
			// if (this.$store.state.vuex_location !== 2) {
			// 	this.$store.dispatch('getLocation')
			// }
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			this.serve_hospital_id = options.id ? options.id : ''
			this.serve_hospital_department_id = options.department_id ? options.department_id : ''
			this.getDetail()
		},
		methods: {
			async getDetail() {
				const res = await this.$u.api.serveHospitalDetail({
					id: this.serve_hospital_id
				})
				this.info = res
				res.serve_hospital_department.map(item => {
					if (this.serve_hospital_department_id == item.id) {
						this.department_name = item.name
					}
				})
			},
			confirmSex(e) {
				this.form.sex = e
			},
			confirmTime(e) {
				this.form.birthday = `${e.year}-${e.month}-${e.day}`;
			},
			confirmRelationship(e) {
				this.form.relationship = e[0].value;
			},
			confirmType(e) {
				this.form.type = e[0].value;
			},
			submit() {
				this.$refs.uForm.validate(async (valid) => {
					if (valid) {
						const res = await this.$u.api.serveHospitalForm({
							serve_hospital_id: this.serve_hospital_id,
							serve_hospital_department_id: this.serve_hospital_department_id,
							...this.form
						});
						if (res) {
							uni.showToast({
								title: '提交成功',
								duration: 1500,
								icon:'none',
								success() {
									setTimeout(function() {
										uni.redirectTo({
											url:'/package_sub/pages/ServeOrder/ServeOrder'
										})
									}, 1500)
								}
							})
						}
					} else {
						console.log("验证失败");
					}
				});
			}

		},
		computed: {
			token() {
				return this.vuex_token || uni.getStorageSync('lifeData')?.vuex_token
			}
		}
	}
</script>

<style lang="scss">
	.page {
		position: relative;
		background-color: #f5efee;
		height: 100vh;
		padding-bottom: 80rpx;
	}

	.bkg {
		height: 540rpx;
		width: 100vw;
		position: absolute;
	}

	.cotainer {

		padding-top: 460rpx;
		padding-bottom: 80rpx;
		background-color: #f5efee;
	}

	.hospital {
		background-color: #fff;
		border-radius: 10rpx;
		filter: drop-shadow(2.192rpx 4.494rpx 5rpx rgba(33, 32, 32, 0.15));
		margin: 25rpx;
		margin-top: 0;
		padding-bottom: 60rpx;
		margin-bottom: 50rpx;

		.title {
			font-size: 28rpx;
			color: #222222;
			padding: 40rpx;
			border-bottom: 1rpx solid rgba(33, 32, 32, 0.15);
		}

		&-title {
			font-size: 28rpx;
			padding: 40rpx;
			color: #000;
			padding-bottom: 20rpx;
		}

		&-form {
			.form-card {
				padding: 0 60rpx;
			}
		}

		.sexs {
			display: flex;
			align-items: center;

			&-item {
				width: 130rpx;
				height: 48rpx;
				line-height: 48rpx;
				color: #000000;
				font-size: 24rpx;
				text-align: center;
				border-radius: 48rpx;
				background-color: #e4e9f0;
				margin-left: 10rpx
			}

			&-active {
				color: #fff;
				background: linear-gradient(-90deg, #e26165 0%, #c10d12 94%, #c10d12 100%);
			}
		}

		::v-deep .form-card .u-input__input {
			text-align: right;
		}

		::v-deep .form-card-2 .u-input__input {
			text-align: left;
		}


	}
</style>