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-input
								  :type="'select'"
								  placeholder="请选择人员"
								  :value="form.name"
								  :select-open="isShowArchive"
								  @click="isShowArchive = true"
								/>
							</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>
		
		
		<!-- 选择就诊人，可以新增 -->
		<u-popup
		  v-model="isShowArchive"
		  mode="bottom"
		  safe-area-inset-bottom
		  closeable
		  :border-radius="10"
		  :height="800"
		>
		  <view class="service-list" style="padding-bottom: 120rpx">
		    <view
		      class="service-list-item"
		      v-for="(item, i) in list_archive"
		      :key="i"
		      @click="confirmArchive(item)"
		    >
		      <view class="service-list-item__namewrap">
		        <view class="service-list-item__name">
		          {{ item.name }}
		        </view>
		        <view class="service-list-item__price">
		          {{ item.mobile }}
		        </view>
		      </view>
		      <view class="service-list-item__address">
		        <text>{{ item.address }}</text>
				<view class="icon">
					<u-icon name="edit-pen" :size="40" color="#999999" @tap="editUser(item),$event.stopPropagation()"></u-icon>
				</view>
		      </view>
		    </view>
		  </view>
		  <view class="service-list-btn">
		    <u-button
		      shape="circle"
		      ripple
		      :custom-style="orderBtnStyle"
		      @click="addArchive"
		      >新增被服务人</u-button
		    >
		  </view>
		</u-popup>
		<!-- 新增就诊人 -->
		<service-archive
		  ref="serviceArchive"
		  @addSuccess="addSuccess"
		></service-archive>
	</view>
</template>

<script>
	import serviceArchive from "@/component/serviceArchive/service-archive.vue";
	export default {
		components: {
		  serviceArchive,
		},
		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: '',
				isShowArchive: false,
				list_archive: [],
				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.getUserArchive();
			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
					}
				})
			},
			async getUserArchive() {
			  const res = await this.$u.api.userArchive({
			    page: 1,
			    page_size: 999,
			  });
			  this.list_archive = res.data;
			},
			// 服务对象
			confirmArchive(e) {
			  this.form.name = e.name
			  this.form.mobile = e.mobile
			  
			  this.isShowArchive = false;
			},
			addArchive() {
			  this.$refs.serviceArchive.isShow = true;
			},
			editUser(item){
				this.$refs.serviceArchive.form = item
				this.$refs.serviceArchive.isShow = true;
			},
			delUser(item){
				uni.showModal({
					title:'确认删除该人员？',
					success:async (res)=>{
						if(res.confirm){
							try {
								if (!item?.id) return
								const res = await this.$u.api.userArchiveDestroy({
									id: item?.id
								})
								this.getUserArchive()
							} catch (err) {
								console.error(err)
							}
						}
					}
				})
			},
			addSuccess(e) {
			  if (e) {
			    this.getUserArchive();
			  }
			},
			
			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;
		}
	}
	.service-list {
	  padding-top: 80rpx;
	
	  &-item {
	    border: 2rpx solid #e6e6eb;
	    border-radius: 10rpx;
	    background-color: #ffffff;
	    margin: 0 25rpx;
	    padding: 28rpx 39rpx;
	    display: flex;
	    align-items: center;
	    flex-wrap: wrap;
	
	    &__namewrap {
	      display: flex;
	      align-items: center;
	      width: 100%;
	    }
	
	    &__address {
		  margin-top:10rpx;
	      width: 100%;
	      padding-left: 14rpx;
		  display: flex;
		  justify-content: space-between;
		  align-items: center;
	    }
	
	    &__icon {
	      display: flex;
	      justify-content: center;
	      align-items: center;
	      // background: #f9f5e9;
	      // padding: 20rpx;
	    }
	
	    &__name {
	      padding-left: 14rpx;
	      font-size: 28rpx;
	      color: #333333;
	      font-weight: 500;
	    }
	
	    &__price {
	      color: #c20d12;
	      font-weight: 500;
	      margin-left: auto;
	    }
	  }
	
	  &-btn {
	    position: fixed;
	    bottom: 40rpx;
	    left: calc(50% - 144rpx);
	  }
	
	  &-item + &-item {
	    margin-top: 20rpx;
	  }
	}
</style>