mabaoDoctor/pages/patient/patientda.vue

<template style="background: #F6F6F6;">
	<view style="width: 100%;height: 100%;">
		<u-gap height="20" bg-color="#F6F6F6"></u-gap>
		<view style="padding: 40rpx 28rpx;margin-bottom: 200rpx;">
			<!-- 标题 -->
			<view class="flex align-center" style="font-size: 30rpx;font-weight: bold;margin-bottom: 40rpx;">
				<text style="margin-right: 40rpx;">{{name}}</text>
				<text style="margin-right: 24rpx;">{{sex}}</text>
				<text>{{age}}</text>
			</view>
			<!-- 线 -->
			<u-line color="#EFEFEF" />
			<!-- 内容 -->
			<view class="content">
				<!-- 姓名 -->
				<view style="margin-bottom: 28rpx; width: 100%;display: flex;">
					<view class="left_text">就诊人姓名:</view>
					<view class="right_text">{{name}}</view>
				</view>
				<!-- 性别 -->
				<view style="margin-bottom: 28rpx; width: 100%;display: flex;">
					<view class="left_text">就诊人性别:</view>
					<view class="right_text">{{sex}}</view>
				</view>
				<!-- 生日 -->
				<view style="margin-bottom: 28rpx; width: 100%;display: flex;">
					<view class="left_text">出生日期:</view>
					<view class="right_text">{{birthday}}</view>
				</view>
				<!-- 关系 -->
				<view style="margin-bottom: 28rpx; width: 100%;display: flex;">
					<view class="left_text">与用户关系:</view>
					<view class="right_text">{{relationship}}</view>
				</view>
				<!-- 信息 -->
				<view style="margin-bottom: 28rpx; width: 100%;display: flex;">
					<view class="left_text">就诊信息:</view>
					<view class="right_text">{{information}}</view>
				</view>
				<!-- 身份证 -->
				<view style="margin-bottom: 28rpx; width: 100%;display: flex;">
					<view class="left_text">就诊人身份证:</view>
					<view class="right_text">{{id}}</view>
				</view>
				<!-- 证件照 -->
				<view style="margin-bottom: 28rpx; width: 100%;display: flex;">
					<view class="left_text">证件照:</view>
					<view class="right_text">
						<image style="width: 124rpx;height: 124rpx;margin-right: 10rpx;" :src="photo1"></image>
						<image style="width: 124rpx;height: 124rpx;margin-right: 10rpx;" :src="photo2"></image>
					</view>
				</view>
				<!-- 病例 -->
				<view style="margin-bottom: 28rpx; width: 100%;display: flex;">
					<view class="left_text">病例:</view>
					<view class="right_text"></view>
				</view>
				<view>
					<view class="flex align-center" style="margin: 28rpx 0;" v-for="item,index in blList" :key='index'>
						<!-- 左边 -->
						<view style="width: 30%;" class="flex align-center">
							<view style="background-color: #EEAA3F;width: 12rpx;height: 12rpx;border-radius: 50%;margin-right: 16rpx;"></view>
							<view style="color: #EEAA3F;font-size: 30rpx;">{{item.order_status}}</view>
						</view>
						<!-- 中间 -->
						<view style="width: 40%;color: #999999;">
							{{item.created_at}}
						</view>
						<!-- 右边 -->
						<view style="width: 30%;height: 100%;" class="flex align-center justify-end">
							<!--  1.电话咨询 2.图文咨询 3.门诊预约 4.疫苗接种预约 5.儿保预约 -->
							<view class="zlbutton">{{item.product_type}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<!-- <view class="bottomButton">
			<view class="b">
				<u-button shape="circle" :custom-style="bStyle">电话随访</u-button>
			</view>
			<view class="b">
				<u-button shape="circle" :custom-style="btStyle" v-if="!guanzhu" @click="gzclick">关注</u-button>
				<u-button shape="circle" :custom-style="bfStyle" v-else @click="gzclick">已关注</u-button>
			</view>
		</view> -->
	</view>

</template>

<script>
	export default {
		onLoad(options) {
			this.name = '张三'
			this.sex = '1' //性别
			this.age = '500' //年龄
			this.birthday = '2020年10月27日15:28:25' //生日
			this.relationship = '亲爸' //关系
			this.information = '不知道什么病' //备注信息
			this.id = '999999999999999' //身份证
			this.photo1 = 'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png' //证件照
			this.photo2 = 'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png' //证件照
			this.patientDetail(options.id)
		},
		mounted() {

		},
		data() {
			return {
				name: '', //姓名
				sex: '', //性别
				age: '', //年龄
				birthday: '', //生日
				relationship: '', //关系
				information: '', //备注信息
				id: '', //身份证
				photo1: '', //证件照
				photo2: '', //证件照
				blList: [],
				guanzhu: false,
				//底部按钮样式
				bStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
				},
				btStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
					color: '#0B73B9',
					backgroundColor: '#FFFFFF'
				},
				bfStyle: {
					width: '100%',
					height: '100%',
					fontSize: '28rpx',
					color: '#ffffff',
					backgroundColor: '#0B73B9'
				}
			}
		},
		methods: {
			//点击关注
			gzclick(e) {
				console.log(this.guanzhu)
				if (this.guanzhu) {
					this.guanzhu = false
				} else {
					this.guanzhu = true
				}
			},
			patientDetail: async function(e) {
				let idde=e
				let res = await this.$request.post("doctor/patientsDetile", {
					patient_id:idde
				})
				this.name=res.data.patient.name
				this.sex=res.data.patient.sex
				this.age=res.data.patient.age
				this.birthday=res.data.patient.birthday
				this.relationship=res.data.patient.relationship_type	
				this.information=res.data.patient.info
				this.id=res.data.patient.card_number
				this.blList=res.data.patientOrder
				
				this.photo1 = res.data.patient.card_img_url //证件照
				this.photo2 = res.data.patient.card_back_img_url //证件照
			}
		}
	};
</script>

<style lang="scss">
	/* 底部按钮 */
	.bottomButton {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		height: 100rpx;
		display: flex;
		align-items: center;
		justify-content: flex-end;
		background-color: #FFFFFF;
		z-index: 1;

		.b {
			margin-right: 30rpx;
			padding: 20rpx 0rpx;
			height: 100%;
			width: 150rpx;
		}
	}

	// 内容
	.content {
		margin: 28rpx 0;
		font-size: 26rpx;
	}

	//淡色文字
	.left_text {
		width: 30%;
		color: #666666;
	}

	.right_text {
		width: 70%;
	}
	//种类按钮
	.zlbutton {
		background-color: #e6e6e6;
		border-radius: 27rpx;
		padding: 0 20rpx;
		height: 50rpx;
		font-size: 25rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #666666;
	}
</style>