xinelu-applet-ui/pagesB/screenorder/screenorder.vue

<template>
	<view class="screenorder">
		<view class="user_info">
			<view class="basic">
				<view class="name">{{userInfo.patientName}}</view>
				<view style="margin-right: 30rpx; color: #333">年龄：{{userInfo.age}}</view>
				<view style="color: #333;">性别：{{userInfo.sex}}</view>
			</view>
			<view class="illness" v-if="userInfo.diseaseList">
				<view v-show="userInfo.diseaseList.includes(0)">
					<span>无</span>
				</view>
				<view v-show="userInfo.diseaseList.includes(1)">
					<span>高血压</span>
				</view>
				<view v-show="userInfo.diseaseList.includes(2) ">
					<span>高血糖</span>
				</view>
				<view v-show="userInfo.diseaseList.includes(3)">
					<span>高血脂</span>
				</view>
			</view>
		</view>
		<view class="line"></view>
		<view class="title">
			<!-- <view></view> -->
			<text>基本信息</text>
		</view>

		<u-form labelPosition="left" :model="formData" :rules="rules" ref="form1">
			<u-form-item label="预约机构" labelWidth="80">
				<view class="uniDataSelectClass">
					<uni-data-select v-model="formData.hospitalId" :localdata="DeptList" @change="changeDept"
						:clear="false">
					</uni-data-select>
				</view>
			</u-form-item>
			<u-form-item label="预约项目" labelWidth="80">
				<view class="uniDataSelectClass">
					<uni-data-select v-model="formData.projectId" :localdata="ProList" @change="changePro"
						:clear="false">
					</uni-data-select>
				</view>
			</u-form-item>
			<u-form-item label="预约时间" labelWidth="80">
				<uni-datetime-picker v-model="datetimerange" type="datetimerange" rangeSeparator="至" />
			</u-form-item>
		</u-form>
		<!-- <view style="display: flex;justify-content: center;margin-top: 80rpx;"><uni-data-checkbox multiple v-model="test" :localdata="test1"></uni-data-checkbox></view> -->
		<view style="height: 180rpx;"></view>
		<view class="btn">
			<u-button type="success" text="提交预约信息" @click="process()">提交预约信息</u-button>
		</view>
		<u-action-sheet :show="showSex" :actions="actions" title="请选择性别" @close="showSex = false" @select="sexSelect">
		</u-action-sheet>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	import {
		screenOrder,
		getDeptList,
		getProlist
	} from '@/api/pagesB/screenOrder/index.js'
	import {
		getSex,
		getBirthday,
		getAgeFun
	} from '@/api/conversion.js'
	export default {
		data() {
			return {
				showSex: false,
				userInfo: {},
				datetimerange: [Date.now(), this.todayEndTime()],
				test: ['1'],
				formData: {
					patientName: '',
					identity: '',
					certType: '',
					sex: '',
					birthDate: '',
					phone: '',
					address: '',
					disease: '',
					height: '',
					weight: '',
					applyStartTime: '',
					applyEndTime: '',
					hospitalId: '',
					hospitalName: '',
					projectId: '',
					projectName: ''
				},
				actions: [{
						name: '男',
						disabled: true
					},
					{
						name: '女',
						disabled: true
					},
				],
				disease: [{
						text: '高血压',
						value: '1'
					},
					{
						text: '高血糖',
						value: '2'
					},
					{
						text: '高血脂',
						value: '3'
					},
					{
						text: '无',
						value: '0'
					}
				],
				DeptList: [],
				ProList: [],
				test1: [{
					text: '同意《用户服务协议》及《隐私政策》',
					value: '1'
				}],
				rules: {
					patientName: [{
						required: true,
						message: '请填写姓名',
						trigger: ['blur', 'change']
					}],
					identity: [{
						required: true,
						message: '请填写身份证号',
						trigger: ['blur']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.idCard(value);
						},
						message: '请输入正确的身份证号',
						trigger: ['blur'],
					}],
					phone: [{
						required: true,
						message: '请填写联系电话',
						trigger: ['blur']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.mobile(value);
						},
						message: '手机号码不正确',
						trigger: ['blur'],
					}],
					address: [{
						required: true,
						message: '请填写家庭住址',
						trigger: ['blur', 'change']
					}],
					height: [{
						required: true,
						message: '请填写身高',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.number(value);
						},
						message: '身高格式为数字（小数）',
						trigger: ['blur'],
					}],
					weight: [{
						required: true,
						message: '请填写体重',
						trigger: ['blur', 'change']
					}, {
						validator: (rule, value, callback) => {
							return uni.$u.test.number(value);
						},
						message: '体重格式为数字（小数）',
						trigger: ['blur'],
					}]
				}
			}
		},
		onReady() {
			this.$refs.form1.setRules(this.rules);
		},
		onLoad(e) {
			// console.log(e,'4')
			if (e) {
				this.userInfo = JSON.parse(e.userinfo)
				this.formData.disease = this.userInfo.diseaseList.join(',')

				if (this.userInfo.sex == 'MALE') {
					this.userInfo.sex = '男'
				} else {
					this.userInfo.sex = '女'
				}
				this.userInfo.age = getAgeFun(this.userInfo.birthDate)
			}
			this.getDeptAndPro()
		},

		methods: {
			getDeptAndPro() {
				getDeptList().then(res => {
					this.DeptList = res.data.map(item => {
						return {
							text: item.hospitalName,
							value: item.id
						}
					})
				})
				getProlist({
					projectType: 1,
					status: 0
				}).then(res => {
					if (res.code == 200) {
						this.ProList = res.data.map(item => {
							return {
								text: item.projectName,
								value: item.projectId
							}
						})
					}
				})
			},
			changeDept(e) {
				this.formData.hospitalName = this.DeptList.find(item => item.value == e).text
			},
			changePro(e) {
				this.formData.projectName = this.ProList.find(item => item.value == e).text
			},
			todayEndTime() {
				let todayYear = (new Date()).getFullYear();
				let todayMonth = (new Date()).getMonth();
				let todayDay = (new Date()).getDate();
				let todayTime = (new Date(todayYear, todayMonth, todayDay, '23', '59', '59')).getTime();
				return todayTime
			},
			changeDisease() {
				if (this.formData.diseaseList.length != 0 && this.formData.diseaseList.find(item => item != '0')) {
					this.diseaseList[3].disable = true
				}
				if (this.formData.diseaseList.length != 0 && this.formData.diseaseList.find(item => item == '0')) {
					this.diseaseList[0].disable = true
					this.diseaseList[1].disable = true
					this.diseaseList[2].disable = true
					this.formData.diseaseList = ['0']
					this.diseaseList[3].disable = false
				}
				if (this.formData.diseaseList.length == 0) {
					for (let item in this.diseaseList) {
						this.diseaseList[item].disable = false
					}
				}
			},
			changeCheckbox(e) {
				if (e.detail.value.length != 0 && e.detail.value.find(item => item != '0')) {
					this.diseaseList[3].disable = true
				}
				if (e.detail.value.length != 0 && e.detail.value.find(item => item == '0')) {
					this.diseaseList[0].disable = true
					this.diseaseList[1].disable = true
					this.diseaseList[2].disable = true
				}
				if (e.detail.value.length == 0) {
					for (let item in this.diseaseList) {
						this.diseaseList[item].disable = false
					}
				}
			},
			process() {
				if (!this.formData.hospitalId) {
					uni.showModal({
						title: '提示',
						content: '请选择预约机构',
					})
					return
				}
				if (!this.formData.projectId) {
					uni.showModal({
						title: '提示',
						content: '请选择预约项目',
					})
					return
				}
				if (!this.datetimerange[0] || !this.datetimerange[1]) {
					uni.showModal({
						title: '提示',
						content: '预约时间请填写完整！',
					})
					return
				}

				const value= uni.getStorageSync('userinfo');
				this.formData.patientId =value.id
				this.formData.identity = this.userInfo.cardNo
				this.formData.diseaseList = this.userInfo.diseaseList
				this.formData.applyStartTime = this.datetimerange[0]
				this.formData.applyEndTime = this.datetimerange[1]
				if (this.formData.sex == '男') {
					this.formData.sex = 'MALE'
				} else {
					this.formData.sex = 'FEMALE'
				}
				screenOrder(this.formData).then(res => {
					// this.formData.diseaseList = this.formData.diseaseList.slice(',')
					if (this.formData.sex == 'MALE') {
						this.formData.sex = '男'
					} else {
						this.formData.sex = '女'
					}
					if (res.code == 200) {
						uni.showToast({
							title: '预约成功',
							duration: 1000
						});
						setTimeout(() => {
							// uni.navigateTo({
							// url: `../screensuccess/screensuccess?registerId=${res.data.data}`
							// url: `/pageB/orderlist/orderlist?patientId=${this.formData.patientId}`
							// url: '/pageB/orderlist/orderlist'/
							// })
							uni.navigateBack({
								delta: 1
							})
						}, 1000)
					} else if (res.code == 500) {
						this.$refs.uToast.show({
							title: res.msg,
							type: 'error'
						})
						
					}
				})
			},
			submit() {
				let that = this
				that.$refs.form1.validate(valid => {
					// console.log(111)
					if (valid) {



					}
				}).catch(errors => {
					return
				})

			},
			IdentityBlur(e) {
				this.formData.sex = getSex(e)
				this.formData.birthDate = getBirthday(e)
			}
		}
	}
</script>

<style lang="scss">
	// .uniDataSelectClass {
	//   .uni-select__selector {
	//         z-index: 99;
	//     }
	// }
	::v-deep.u-btn--success.data-v-3bf2dba7 {
		color: #ffffff;
		border-color: #4AC4AB;
		background-color: #4AC4AB !important;
	}

	.user_info {
		border: 1px solid #4AC4AB;
		border-radius: 10rpx;
		padding: 40rpx 30rpx;
		background: #f6f6f6;
		margin-top: 50rpx;

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

			.name {
				font-size: 42rpx;
				margin-right: 30rpx;
				font-weight: 900;
			}
		}

		.illness {
			display: flex;
			margin-top: 25rpx;

			view {
				width: 60px;
				font-size: 14px;
				background-color: #4AC4AB;
				text-align: center;
				color: #fff;
				padding: 8rpx 6rpx;
				border-radius: 20px;
				margin-right: 10px;
			}
		}
	}

	.line {
		height: 2rpx;
		border-bottom: 1px dashed #999;
		margin: 40rpx -40rpx;
	}

	.title {
		display: flex;
		font-size: 34rpx;
		margin-bottom: 20rpx;

		// color: #555;
		// background: #f6f6f6;
		// margin: 0 -40rpx 0 -40rpx;
		// padding: 20rpx 0;
		view {
			width: 10rpx;
			background: #4AC4AB;
			height: 40rpx;
			margin: 0 15rpx 0 0;
		}
	}

	.screenorder {
		padding: 0 40rpx;
	}

	/deep/.u-button--primary.data-v-2bf0e569 {
		background-color: #4AC4AB !important;
		border-color: #4AC4AB !important;
	}

	.btn {
		// display: flex;
		// flex-direction: column;
		// align-items: center;
		position: fixed;
		bottom: 50rpx;
		width: 90%;
		z-index: 2;

		/deep/.u-button {
			height: 90rpx !important;
		}
	}

	/deep/.u-button__text {
		font-size: 34rpx !important;
	}
</style>