179crm_user_app/pages_company/executionRecord.vue

<template>
	<view class="content">
		<ren-calendar ref='ren' :markDays='markDays' :headerBar='false' :open="false" @onDayClick='onDayClick'></ren-calendar>
		<view class="inner">
			<view class="title-box align-center justify-between">
				<text>用药情况</text>
				<view class="select-box" @click="navgetTo()">
					<text>打卡 (0/2)</text>
					<image class="w48 h48" src="@/static/images/health/right_arrow_right_icon24.png"></image>
				</view>
			</view>
			<view class="form-box">
				<view class="form-item">
					<view class="left">
						<text class="label">阿仑单抗 1.0mg</text>
						<text class="time">11:30</text>
					</view>
					<view class="check">
						<u-icon name="checkmark-circle-fill" color="#008FD3" size="18"></u-icon>
						<text>已用药</text>
					</view>
				</view>
			</view>
			<view class="title-box">
				健康数据
			</view>
			<view class="form-box">
				<view class="form-item">
					<text class="label">腰围</text>
					<view class="num">
						<text>70cm</text>
						<image class="w48 h48" src="@/static/images/health/right_arrow_right_icon24.png"></image>
					</view>
				</view>
				<view class="form-item">
					<text class="label">臀围</text>
					<view class="num">
						<text>70cm</text>
						<image class="w48 h48" src="@/static/images/health/right_arrow_right_icon24.png"></image>
					</view>
				</view>
				<view class="form-item">
					<text class="label">血糖</text>
					<view class="num">
						<text>4.0</text>
						<image class="w48 h48" src="@/static/images/health/right_arrow_right_icon24.png"></image>
					</view>
				</view>
				<view class="form-item">
					<text class="label">血压</text>
					<view class="num">
						<text>--</text>
						<image class="w48 h48" src="@/static/images/health/right_arrow_right_icon24.png"></image>
					</view>
				</view>
				<view class="form-item">
					<text class="label">尿酸</text>
					<view class="num">
						<text>正常</text>
						<image class="w48 h48" src="@/static/images/health/right_arrow_right_icon24.png"></image>
					</view>
				</view>
			</view>
			<view class="title-box align-center justify-between">
				<text class="left">指标信息</text>
				<view class="select-box2">
					<image class="w24 h24" src="@/static/images/company/edit_add_icon.png"></image>
					<text>选择指标项</text>
				</view>
			</view>
			<view class="form-box">
				<view class="form-item">
					<text class="label">促甲状腺素受体抗体(A-TSHR)</text>
					<view class="num">
						<text>2.12 1U/L</text>
					</view>
				</view>
				<view class="form-item">
					<text class="label">低密度脂蛋白胆固醇(LDL)</text>
					<view class="num">
						<text>3.00 mmol/L</text>
					</view>
				</view>
			</view>
			<view class="title-box">
				其他
			</view>
			<view class="form-box mb20">
				<view class="form-item">
					<text class="label">口感舌燥，恶心</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import RenCalendar from '@/components/ren-calendar/ren-calendar.vue'
	import {
		getDocDetails,
		addDoc,
		editDoc
	} from '@/api/doc.js'
	export default {
		components:{
		            RenCalendar
		        },
		data() {
			return {
				curDate:'',
				markDays:[],
				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) {
			let today = this.$refs.ren.getToday().date;
			            this.curDate = today;
			            this.markDays.push(today);
			this.type = option.type;
			console.log(this.type)
			if (this.type == 'edit') {
				this.docId = option.docId;
				// this.getDocDetails();
			}
		},
		methods: {
			//日历
			onDayClick(data){
			                this.curDate = data.date;
			            },
			navgetTo(){
				uni.navigateTo({
					url:'/pages_company/schedule'
				})
			},
			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:0 20upx;
            .title-box{
				font-family: PingFang SC, PingFang SC;
				font-weight: 500;
				font-size: 32rpx;
				color: #626468;
				padding: 24rpx 0;
               .select-box{
               	display: flex;
               	align-items: center;
				justify-content: center;
               	text{
               		font-family: PingFang SC;
               		font-weight: 400;
               		font-size: 24rpx;
               		color: #626468;
               		margin-left: 8rpx;
               	}
               }
			   .select-box2{
			   	width: 216rpx;
			   	height: 64rpx;
			   	background: #FFFFFF;
			   	border-radius: 32rpx 32rpx 32rpx 32rpx;
			   	display: flex;
			   	align-items: center;
			   				justify-content: center;
			   	text{
			   		font-family: PingFang SC;
			   		font-weight: 400;
			   		font-size: 24rpx;
			   		color: #626468;
			   		margin-left: 5rpx;
			   	}
			   }
				
			}
			.form-box {
				padding: 0 30upx;
				background: #FFFFFF;
				border-radius: 16upx;
				// margin-bottom: 20upx;
                
				.form-title {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: #626468;
					text-align: left;
					padding: 30rpx 0;
					display: block;
				}

				.form-item {
					padding: 30upx 0;
					display: flex;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid #F1F1F1;

					&:last-child {
						border-bottom: none;
					}
                    .left{
						display: flex;
						flex-direction: column;
						align-items: flex-start;
						.time{
							font-family: PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #898E91;
							text-align: left;
						}
					}
					.check{
						
						display: flex;
						align-items: center;
						justify-content: center;
						text{
							// font-family: PingFang SC;
							font-weight: 400;
							font-size: 24rpx;
							color: #008FD3;
							margin-left: 16rpx;
						}
					}
					.label {
						// width: 150upx;
						text-align: left;
						font-weight: 500;
						font-size: 32rpx;
						color: #222426;
						text-align: left;
					}
                    .num{
						font-family: PingFang SC;
						font-weight: 400;
						font-size: 32rpx;
						color: #222426;
						line-height: 34rpx;
						display: flex;
						align-items: center;
					}
				}
			}
		}

		.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>