179crm_user_app/pages_health/addDoc.vue

<template>
	<view class="content">
		<view class="inner">
			<view class="form-box">
				<text class="form-title">身体信息</text>
				<view class="form-item">
					<text class="label">身高</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.userName" placeholder="请输入身高"
						placeholder-class="form-input" />
					<text class="unit">cm</text>
				</view>
				<view class="form-item">
					<text class="label">体重</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.userName" placeholder="请输入体重"
						placeholder-class="form-input" />
					<text class="unit">kg</text>
				</view>
				<view class="form-item">
					<text class="label">腰围</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.userName" placeholder="请输入腰围"
						placeholder-class="form-input" />
					<text class="unit">cm</text>
				</view>
				<view class="form-item">
					<text class="label">臀围</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.userName" placeholder="请输入臀围"
						placeholder-class="form-input" />
					<text class="unit">cm</text>
				</view>


			</view>
			<view class="form-box">
				<text class="form-title">疾病史</text>
				<view class="form-item">
					<text class="label">高血糖</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="sexChange(1)" value="1" :checked="form.sex===1"
								style="margin-right: 16upx;" />
							<text class="sex-text">无</text>
						</label>
						<label style="margin-right: 50upx;">
							<radio @click="sexChange(2)" value="2" :checked="form.sex===2"
								style="margin-right: 16upx;" />
							<text class="sex-text">轻微</text>
						</label>
						<label>
							<radio @click="sexChange(3)" value="2" :checked="form.sex===2"
								style="margin-right: 16upx;" />
							<text class="sex-text">严重</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">测量值</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.userName" placeholder="请输入测量值"
						placeholder-class="form-input" />
					<text class="unit">mmol/L</text>
				</view>
				<view class="form-item">
					<text class="label">高血压</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="sexChange(1)" value="1" :checked="form.sex===1"
								style="margin-right: 16upx;" />
							<text class="sex-text">无</text>
						</label>
						<label style="margin-right: 50upx;">
							<radio @click="sexChange(2)" value="2" :checked="form.sex===2"
								style="margin-right: 16upx;" />
							<text class="sex-text">轻微</text>
						</label>
						<label>
							<radio @click="sexChange(3)" value="2" :checked="form.sex===2"
								style="margin-right: 16upx;" />
							<text class="sex-text">严重</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">收缩压</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.userName" placeholder="请输入测量值"
						placeholder-class="form-input" />
					<text class="unit">mmHg</text>
				</view>
				<view class="form-item">
					<text class="label">舒张压</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.userName" placeholder="请输入测量值"
						placeholder-class="form-input" />
					<text class="unit">mmHg</text>
				</view>
				<view class="form-item">
					<text class="label">高血脂</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="sexChange(1)" value="1" :checked="form.sex===1"
								style="margin-right: 16upx;" />
							<text class="sex-text">无</text>
						</label>
						<label style="margin-right: 50upx;">
							<radio @click="sexChange(2)" value="2" :checked="form.sex===2"
								style="margin-right: 16upx;" />
							<text class="sex-text">轻微</text>
						</label>
						<label>
							<radio @click="sexChange(3)" value="2" :checked="form.sex===2"
								style="margin-right: 16upx;" />
							<text class="sex-text">严重</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">高尿酸</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="sexChange(1)" value="1" :checked="form.sex===1"
								style="margin-right: 16upx;" />
							<text class="sex-text">无</text>
						</label>
						<label style="margin-right: 50upx;">
							<radio @click="sexChange(2)" value="2" :checked="form.sex===2"
								style="margin-right: 16upx;" />
							<text class="sex-text">轻微</text>
						</label>
						<label>
							<radio @click="sexChange(3)" value="2" :checked="form.sex===2"
								style="margin-right: 16upx;" />
							<text class="sex-text">严重</text>
						</label>
					</radio-group>
				</view>
				<view class="form-item">
					<text class="label">测量值</text>
					<input maxlength="10" class="input-width" type="text" v-model="form.userName" placeholder="请输入测量值"
						placeholder-class="form-input" />
					<text class="unit">μmol/L</text>
				</view>
				<view class="form-item">
					<text class="label">高体重</text>
					<radio-group style="display: flex;align-items: center;">
						<label style="margin-right: 50upx;">
							<radio @click="sexChange(1)" value="1" :checked="form.sex===1"
								style="margin-right: 16upx;" />
							<text class="sex-text">正常</text>
						</label>
						<label style="margin-right: 50upx;">
							<radio @click="sexChange(2)" value="2" :checked="form.sex===2"
								style="margin-right: 16upx;" />
							<text class="sex-text">偏瘦</text>
						</label>
						<label>
							<radio @click="sexChange(3)" value="2" :checked="form.sex===2"
								style="margin-right: 16upx;" />
							<text class="sex-text">偏重</text>
						</label>
					</radio-group>
				</view>

			</view>
			<view class="form-box">
				<text class="form-title">其他病史</text>
				<view class="form-item wrap">
					<view class="form-item-tag" v-for="(item, index) in tags" :key="index" @click="radioClick(item)">
					<view :class="checked==item.id?'tag active':'tag'">
						{{item.name}}
					</view>
					</view>
					<view class="form-item-tag mt16">
						<view class="tag">
							+ 其他
						</view>
						
					</view>
				</view>
			</view>
			<view class="form-box">
				<text class="form-title">症状史</text>
				<view class="form-item wrap">
					<view class="form-item-tag" v-for="(item, index) in tags" :key="index" @click="radioClick(item)">
						<view :class="checked==item.id?'tag active':'tag'">
							{{item.name}}
						</view>
					</view>
					<view class="form-item-tag mt16">
						<view class="tag">
							+ 其他
						</view>
						
					</view>
				</view>
			</view>
		</view>
		<view class="btn-box">
			<view class="sub-btn" @click="submit()">保存</view>
		</view>
	</view>
</template>

<script>
	import {
		getDocDetails,
		addDoc,
		editDoc
	} from '@/api/doc.js'
	export default {
		data() {
			return {
				type: null,
				patientId: null,
				famaleurl:"/static/images/health/female_profile.png",
				maleurl:"/static/images/health/my_heads.png",
				checked:1,
				tags: [{
					name: '心脏病',
					checked:true,
					id: 1
				},
				{
					name: '脑梗死',
						checked:false,
					id: 2
				},{
					name: '肾病',
						checked:false,
					id: 3
				},{
					name: '脂肪肝',
						checked:false,
					id: 4
				}],
				form: {
					userName: null,
					idCard: null,
					sex: null,
					birthday: null,
					remark: null,
				}
			};
		},
		onLoad(option) {
			this.type = option.type;
			console.log(this.type)
			if (this.type == 'edit') {
				this.docId = option.docId;
				// this.getDocDetails();
			}
		},
		methods: {
			sexChange(type) {
				this.form.sex = type
			},
			radioClick(item) {
			        this.checked=item.id
			      },
			getDocDetails() {
				var data = {
					docId: this.docId
				};
				getDocDetails(data).then(
					res => {
						if (res.code == 200) {
							this.form = res.data;

						} else {
							uni.showToast({
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			submit() {
				if (this.form.userName == null) {
					uni.showToast({
						icon: 'none',
						title: "姓名不能为空",
					});
					return;
				}
				if (this.form.idCard == null) {
					uni.showToast({
						icon: 'none',
						title: "身份证号不能为空",
					});
					return;
				}
				if (this.form.sex == null) {
					uni.showToast({
						icon: 'none',
						title: "性别不能为空",
					});
					return;
				}
				if (this.form.birthday == null) {
					uni.showToast({
						icon: 'none',
						title: "出生年月不能为空",
					});
					return;
				}
				if (this.type == "add") {
					this.addDoc()
				} else if (this.type == "edit") {
					this.editDoc()
				}

			},
			editDoc() {
				editDoc(this.form).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "操作成功",
							});
							setTimeout(function() {
								uni.$emit('refreshDoc');
								uni.navigateBack({
									delta: 1
								})
							}, 500);
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			addDoc() {
				addDoc(this.form).then(
					res => {
						if (res.code == 200) {
							uni.showToast({
								icon: 'success',
								title: "操作成功",
							});
							setTimeout(function() {
								uni.$emit('refreshDoc');
								uni.navigateBack({
									delta: 1
								})
							}, 500);
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg,
							});
						}
					},
					rej => {}
				);
			},
			// 出生日期选择
			bindDateChange: function(e) {
				this.form.birthday = e.target.value
			},
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
	}

	.content {
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.inner {
			// height: calc(100% - 120upx);
			padding: 20upx;

			.form-box {
				padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				margin-bottom: 20upx;

				.form-title {
					font-family: PingFang SC;
					font-weight: 600;
					font-size: 40rpx;
					color: #222426;
					text-align: left;
					padding: 30rpx 0;
					display: block;
				}

				.form-item {
					padding: 30upx 0;
					display: flex;
					align-items: flex-start;
					border-bottom: 1px solid #F1F1F1;

					&:last-child {
						border-bottom: none;
					}
        
					.label {
						width: 150upx;
						text-align: left;
						font-size: 32upx;
						line-height: 44upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						flex-shrink: 0;
					}

					input {
						text-align: left;
					}

					.unit {
						width: 150upx;
						text-align: right;
						font-size: 32upx;
						line-height: 44upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #222222;
						flex-shrink: 0;
					}
               
					.form-input {
						font-size: 30upx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #999999;
						text-align: left;
					}

					.form-item-tag{
						margin-right: 16rpx;
						.tag{
							border-radius: 8rpx 8rpx 8rpx 8rpx;
							border: 2rpx solid #ECECEC;
							display: flex;
							align-items: center;
							padding: 24rpx;
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							&.active{
								background: #F0FAFF;
								border: 2rpx solid #008FD3;
								color: #008FD3;
							}
						}
						
						
						
					}
				}
			}
		}

		.btn-box {
			height: 120upx;
			padding: 0 30upx;
			display: flex;
			align-items: center;
			justify-content: center;

			// position: fixed;
			// width: 90%;
			// bottom: 0;
			// left: 50%;
			// transform: translate(-50%,-50%);
			// background: #FFFFFF;
			.sub-btn {
				width: 100%;
				height: 88upx;
				line-height: 88upx;
				text-align: center;
				font-size: 32upx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				background: #008FD3;
				border-radius: 44upx;
				margin-bottom: 40upx;
			}
		}
	}
</style>