mabaoDoctor/pages/patient/patientxq.vue

<template>
	<view style="width: 100%;height: 100%;">
		<!-- 表单弹窗 -->
		<u-popup v-model="formshow" mode="center" border-radius="14" :closeable="false">
			<view style="width: 75vw;height: auto;margin: 30rpx 0;height: 50vh;">
				<view class="flex justify-center align-center" style=";font-size: 34rpx;font-weight: bold;margin-bottom:80rpx ;">修改备注</view>
				<view style="padding: 0 40rpx;margin-bottom: 40rpx;height: 60%;">
					<!-- 病症 -->

					<view style="margin-bottom: 20rpx;font-weight: 500;font-size: 28rpx;">备注:</view>
					<view style="border: 1rpx solid #C0C0C0;margin-bottom: 20rpx;height: 240rpx;border-radius: 12rpx;padding: 15rpx;">
						<input placeholder="请填写备注" @input="bzblur" />
					</view>


				</view>
				<!-- 两个按钮 -->
				<view style="display: flex;justify-content: center;align-items: center">
					<view style="display:flex;justify-content: center;align-items: center;width: 50%;">
						<u-button shape="shape" size="medium" @click="formshow = false">取消</u-button>
					</view>
					<view style="display:flex;justify-content: center;align-items: center ;width: 50%;">
						<u-button shape="shape" size="medium" type="primary" @click="qr">确认</u-button>
					</view>
				</view>
			</view>
		</u-popup>
		<view class="header-content">
			<image src="https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/img/mybanner.png" style="width:100%;height:260rpx;"></image>
		</view>
		<view style="padding: 50rpx 30rpx;">
			<!-- 头像 名字 按钮 -->
			<view class="flex" style="margin-bottom: 50rpx;">
				<!-- 头像 -->
				<view style="width: 20%;display: flex;align-items: center;">
					<image :src="img" mode="aspectFit" style="height: 100rpx;width: 100rpx;border-radius: 50%;"></image>
				</view>
				<!-- 名字 -->
				<view style="width: 52%;color: #FFFFFF;display: grid;align-items: center;">
					<view style="font-weight: bold;font-size: 36rpx;">{{name}}</view>
					<view style="font-size: 26rpx;">{{bz}}</view>
				</view>
				<!-- 按钮 -->
				<view style="width: 25%;display: flex;align-items: center;">
					<u-button shape="circle" :custom-style="customStyle" :hair-line="false" @click="formshow = true">设置备注</u-button>
				</view>
			</view>
			<!-- 用户资料 -->
			<view class="zl">
				<view>
					<view class="flex justify-center" style="font-size: 36rpx;font-weight: 600;margin-bottom: 20rpx;">
						<text>{{fwb}}</text>
					</view>
					<view>服务包数量</view>
				</view>
				<view>
					<view class="flex justify-center" style="font-size: 36rpx;font-weight: 600;margin-bottom: 20rpx;">
						<text>{{dd}}</text>
					</view>
					<view>订单数量</view>
				</view>
				<view>
					<view class="flex justify-center" style="font-size: 36rpx;font-weight: 600;margin-bottom: 20rpx;">
						<text>{{da}}</text>
					</view>
					<view>档案数量</view>
				</view>
			</view>
			<!-- 已购服务 -->
			<view>
				<view style="font-size: 30rpx;font-weight: bold;margin-bottom: 20rpx;">已购服务</view>
				<view v-for="(item,index) in tclist" :key="index" style="margin-bottom: 20rpx;">
					<view class="taocan">
						<view class="tc_left">
							{{item.pack_name}}
						</view>
						<view class="tc_right">
							<view>
								<view style="margin-bottom: 20rpx;">{{item.pack_intro}}</view>
								<!-- <view style="margin-bottom: 30rpx;">{{item.dd}}</view> -->
								<view>有效期:{{item.start_time}}至{{item.end_time}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 历史问诊 -->
			<view style="margin-bottom: 50rpx;">
				<!-- 标题 -->
				<view style="font-size: 30rpx;font-weight: bold;margin-bottom: 20rpx;">历史问诊</view>
				<!-- 卡片 -->
				<view class="lswz_card" v-for="(ritem,index) in recordlist" :key="index">
					<!-- 上部分 完成 问诊渠道-->
					<view style="display: flex;margin-bottom: 25rpx;">
						<view style="width: 70%;display: flex;color: #666666;align-items:center;">
							<!-- 小点 -->
							<view style="height: 12rpx;width: 12rpx;background-color: #666666;border-radius: 50%;margin: 0 10rpx;"></view>
							<!-- true为已完成 false未完成 -->
							<text v-if="ritem.order_status==1">未支付</text>
							<text v-else-if="ritem.order_status==2">待接单</text>
							<text v-else-if="ritem.order_status==3">进行中</text>
							<text v-else-if="ritem.order_status==4">已完成</text>
							<text v-else>已取消</text>

						</view>
						<view style="width: 30%;display: flex;align-items: center;justify-content: center;">
							<u-button size="mini" shape="circle" v-if="ritem.product_type == 1">电话咨询</u-button>
							<u-button size="mini" shape="circle" v-else-if="ritem.product_type == 2">图文咨询</u-button>
							<u-button size="mini" shape="circle" v-else-if="ritem.product_type == 3">门诊预约</u-button>
							<u-button size="mini" shape="circle" v-else-if="ritem.product_type == 4">疫苗接种预约</u-button>
							<u-button size="mini" shape="circle" v-else-if="ritem.product_type == 5">儿保预约</u-button>
							<u-button size="mini" shape="circle" v-else-if="ritem.product_type == 6">服务包</u-button>
							<u-button size="mini" shape="circle" v-else>充值</u-button>

						</view>
					</view>
					<u-line color="#EFEFEF" />
					<!-- 下部分 资料 -->
					<view style="margin-top: 15rpx;">
						<view style="font-size: 26rpx;">
							<view style="margin-bottom: 10rpx;display: flex;">
								<view style="width: 20%;color: #666666;">患者:</view>
								<view style="width: 80%;">{{ritem.name}}</view>
							</view>
							<view style="margin-bottom: 10rpx;display: flex;">
								<view style="width: 20%;color: #666666;">年龄:</view>
								<view style="width: 80%;">{{ritem.birthday}}</view>
							</view>
							<view style="margin-bottom: 10rpx;display: flex;">
								<view style="width: 20%;color: #666666;">订单号:</view>
								<view style="width: 80%;">{{ritem.order_sn}}</view>
							</view>
							<view style="margin-bottom: 10rpx;display: flex;">
								<view style="width: 20%;color: #666666;">下单时间:</view>
								<view style="width: 80%;">{{ritem.created_at}}</view>
							</view>
							<view style="margin-bottom: 10rpx;display: flex;">
								<view style="width: 20%;color: #666666;">结束时间:</view>
								<view style="width: 80%;">{{ritem.outtime}}</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 患者档案 -->
			<view style="margin-bottom: 200rpx;">
				<!-- 标题 -->
				<view style="font-size: 30rpx;font-weight: bold;margin-bottom: 20rpx;">患者档案</view>
				<!-- 列表 -->
				<view class="hzda_list" v-for="(ditem,index) in dalist" @click="clickda" :id='ditem.id' :key='index' :data-index="index">
					<!-- 头像 -->
					<view class="flex align-center justify-start " style="width: 18%;">
						<image :src="ditem.avatar" style="height: 72rpx;width: 72rpx;border-radius: 50%;"></image>
					</view>
					<!-- 信息 -->
					<view style="width: 70%">
						<view style="font-size: 30rpx;color: #333333;font-weight: bold;">{{ditem.name}}</view>
						<view style="color: #999999;font-size: 26rpx;">
							<text style="margin-right: 20rpx;">{{ditem.sex}}</text>
							<text>{{ditem.age}}</text>
						</view>
					</view>
					<!-- 箭头 -->
					<view class="flex align-center justify-end" style="width: 10%;">
						<u-icon name="arrow-right" color="#C0C0C0"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 按钮 -->
		<view class="bottomButton">
			<view class="b">
				<u-button shape="circle" :custom-style="bStyle" @click="phone">电话随访</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 {

		data() {
			return {
				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'
				},
				//收藏按钮样式
				customStyle: {
					width: '100%',
					height: '80rpx',
					backgroundColor: '#3a8fc5',
					color: '#FFFFFF',
					fontSize: '28rpx',
					display: 'flex',
					alignItems: 'center',
					justifyContent: 'center',
					border: '1rpx solid #3a8fc5'
				},
				//头像路径
				img: 'https://zhengda.oss-cn-chengdu.aliyuncs.com/baoma/static/头像.png',
				//名字
				name: '用户名',
				bz: '备注',
				user_id: 0,
				//已购服务
				tclist: [],
				//历史问诊
				recordlist: [],
				dalist: [],
				//列表
				fwb: '1', //服务包
				dd: '2', //订单
				da: '3', //档案
				//装设置备注值
				formshow: false,
				inputbz: ''
			}
		},
		onLoad(options) {
			console.log("ID",options.id);
			this.detailres(options.id)
			this.getguanzhu();
		},
		mounted() {

		},
		methods: {
			phone:async function(){
				//打电话
				let res = await this.$request.post("patient/callPhoneSure",{'user_id':this.user_id});
				if(res.status==0){
					let phone = res.data;
					// 去拨打电话即可
					uni.makePhoneCall({
					 	// 手机号
					    phoneNumber: phone, 
						// 成功回调
						success: (res) => {
							console.log('调用成功!')	
						},
						// 失败回调
						fail: (res) => {
							uni.showModal({
								title:"拨打电话调用失败",
							})
						}
					  });
				}else{
					uni.showToast({
						title:res.message,
						icon:'none',
						duration:3000
					})
				}
			},
			
			//点击档案
			clickda(e) {
				console.log(this.dalist[e.currentTarget.dataset.index])
				let idda = e.currentTarget.id
				uni.navigateTo({
					url: 'patientda?id=' + idda
				})
			},
			//点击关注
			gzclick: async function(e) {

				if (this.guanzhu) {
					console.log('取消关注')
					let res = await this.$request.post("doctor/userFollow", {
						'user_id': this.user_id,
						'is_ley': 1
					})
					this.guanzhu = false
				} else {
					let res = await this.$request.post("doctor/userFollow", {
						'user_id': this.user_id,
						'is_ley': 2
					})
					this.guanzhu = true
				}
			},
			detailres: async function(e) {
				let idXq = e
				console.log("给接口的ID",e)
				let res = await this.$request.post("doctor/userListDetile", {
					user_id: idXq
				})
				console.log("请求接口后数据",res)
				if (res.status == 0) {
					let user_arr = res.data.user_arr
					this.user_id = user_arr.id
					this.img = user_arr.avatar
					this.name = user_arr.nickname
					this.bz = user_arr.remark
					this.recordlist = res.data.order_arr //历史问诊
					this.dalist = res.data.patients_arr //患者档案
					this.getguanzhu(user_arr.id);
					this.fwb = res.data.nums.fuwu_num;
					this.dd = res.data.nums.order_num;
					this.da = res.data.nums.pati_num;

					// tclist渲染服务包
					this.tclist = res.data.fuwu_arr
				}else{
					uni.showToast({
						title:"请求失败",
						icon:'none'
					})
				}

			},
			getguanzhu: async function(id) {
				let res = await this.$request.post('doctor/getFollows', {
					'user_id': id
				});

				if (res.status == 0) {
					this.guanzhu = res.data
				}
			},
			bzblur(e) {
				this.inputbz = e.detail.value
			},
			qr: async function(e) {
				if (this.inputbz != '') {
					let res = await this.$request.post("doctor/remacks", {
						'id': this.user_id,
						'remak': this.inputbz
					});
 
					if (res.status == 0) {
						uni.showToast({
							title: '设置成功！'
						})
						this.bz = this.inputbz
						this.formshow = false
					} else {
						uni.showToast({
							title: '设置失败！',
							icon: "none"
						})
					}
				} else {
					uni.showToast({
						title: '请填写备注',
						icon: 'none'
					})
				}
			}
		}
	};
</script>

<style scoped lang="scss">
	.header-content {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		width: 100%;
		z-index: -1;
		overflow: hidden;
		box-sizing: border-box;

	}

	.custom-style {
		width: 100%;
		height: 80rpx;
		backgroundolor: #3a8fc5;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 10%;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	// 资料
	.zl {
		display: flex;
		align-items: center;
		justify-content: space-around;
		padding: 34rpx 28rpx;
		background-color: #ffffff;
		border-radius: 10rpx;
		text-indent: 2em;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
		margin-bottom: 30rpx;
		font-size: 26rpx;
	}

	// 套餐
	.taocan {
		width: 710rpx;
		height: 230rpx;
		position: relative;
		display: flex;
		border-radius: 10rpx;

		background: radial-gradient(circle at right top, transparent 15rpx, #ffffff 0) top left / 152rpx 51% no-repeat,
			radial-gradient(circle at right bottom, transparent 15rpx, #ffffff 0) bottom left /152rpx 51% no-repeat,
			radial-gradient(circle at left top, transparent 15rpx, #ffffff 0) top right /560rpx 51% no-repeat,
			radial-gradient(circle at left bottom, transparent 15rpx, #ffffff 0) bottom right /560rpx 51% no-repeat;
		filter: drop-shadow(0rpx 2rpx 12rpx 0rpx rgba(0, 0, 0, 0.04));
	}

	//套餐左
	.tc_left {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 151rpx;
		font-size: 30rpx;
		font-weight: bold;
		border-right: 1rpx dashed #f6f6f6;
	}

	// 套餐右
	.tc_right {
		display: flex;
		align-items: center;
		width: 550rpx;
		padding: 30rpx 20rpx;
		font-size: 20rpx;
	}

	//lswz_card历史问诊的卡片
	.lswz_card {
		width: 100%;
		background-color: #FFFFFF;
		border-radius: 15rpx;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
		padding: 30rpx;
		margin-bottom: 20rpx;
	}

	//hzda_list患者档案的列表
	.hzda_list {
		background-color: #FFFFFF;
		display: flex;
		border-radius: 10rpx;
		padding: 30rpx;
		margin-bottom: 20rpx;
		box-shadow: 0px 2px 12px 0px rgba(0, 0, 0, 0.04);
	}

	//底部按钮
	.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;
		}
	}
</style>