hospital-accompaniment-wechat/pages/workbench/caregiverDetails.vue

<template>
	<view class="container">
		<view class="item-box">
			<u-image :src="infoData.photographUrl" width="196rpx" height="256rpx" :lazy-load="true"></u-image>
			<view class="info-box">
				<view class=" item-txt">{{infoData.name || '-'}}</view>
				<view class="info-item age-box">
					<view class="box-l">
						<view class="item-txt">{{infoData.sex == '2' ? '女' : '男'}}</view>
						<view class="item-txt age">{{infoData.age || '0'}}岁</view>
					</view>
				</view>
				<view class="info-item item-txt">工作年限：{{infoData.workYears || 0}}年</view>
				<view class="info-item service-box">
					<span class="item-txt">服务中：{{infoData.inProgressCount || 0}}</span>
					<span class="item-txt total">服务总数： {{infoData.finishCount || 0}}</span>
				</view>
			</view>
		</view>

		<view class="certificate-box"
			v-if="infoData.nursingCertificateList && infoData.nursingCertificateList.length > 0">
			<view class="title">从业证书</view>
			<view class="box-item" v-for="item,index in infoData.nursingCertificateList">
				<u-image :src="item.pictureUrl" width="680rpx" height="350rpx" :lazy-load="true"></u-image>
				<span class="name">{{item.certificateName}}</span>
			</view>
		</view>

		<view class="btn-box">
			<span class="btn btn1" v-if="type == 'guanli'" @click="toEdit">编辑信息</span>
			<span class="btn btn2" @click.stop="confirmAndCall(infoData.phoneNumber)">联系护工</span>
			<span class="btn btn3" v-if="type == 'fenpei'" @click="confirmFen">确认分配</span>
			<span class="btn btn3" v-if="type == 'genghuan'" @click="confirmFen">确认更换</span>
		</view>

	</view>
</template>

<script>
	import {
		getNurseDetail,
		assignNurse
	} from '@/api/hospital.js'

	export default {
		data() {
			return {
				infoData: {},
				type: '',
				orderNo: '',
				id: '',

				popShow: false,
			}
		},
		onLoad(option) {
			if (option.id) {
				this.id = option.id
			}
			if (option.type) {
				this.type = option.type
			}
			if (option.orderNo) {
				this.orderNo = option.orderNo
				console.log('orderNo', this.orderNo);
			}
		},
		onShow() {
			this.getNurseDetail(this.id)
		},
		methods: {
			getNurseDetail(id) {
				let that = this;
				getNurseDetail(id).then(res => {
						if (res.code == 200) {
							this.infoData = res.data;
						}

					})
					.catch((err) => {
						console.log(err);
					})

			},

			toEdit() {
				uni.navigateTo({
					url: '/pages/workbench/caregiverForm?id=' + this.infoData.id + '&type=edit'
				})

			},

			confirmAndCall(phoneNumber) {
				// 先验证电话号码
				if (!this.isValidPhoneNumber(phoneNumber)) {
					uni.showToast({
						title: '电话号码格式不正确',
						icon: 'none'
					});
					return;
				}

				// 显示确认对话框
				uni.showModal({
					title: '确认拨打电话',
					content: `确定要拨打 ${phoneNumber} 吗？`,
					success: (res) => {
						if (res.confirm) {
							// 用户点击确定，执行拨打电话
							this.makePhoneCall(phoneNumber);
						}
					}
				});
			},

			isValidPhoneNumber(phoneNumber) {
				// 简单的电话号码验证
				return /^1[3-9]\d{9}$/.test(phoneNumber);
			},


			makePhoneCall(phoneNumber) {
				uni.makePhoneCall({
					phoneNumber: phoneNumber,
					success: () => {
						console.log('拨打电话成功');
					},
					fail: (err) => {
						console.error('拨打电话失败', err);
						uni.showToast({
							title: '拨打电话失败',
							icon: 'none'
						});
					}
				});
			},

			confirmFen() {
				let that = this;
				let txt = '';
				switch (this.type) {
					case 'fenpei':
						txt = '分配';
						break;

					case 'genghuan':
						txt = '更换';
						break;
				}

				//确认是否
				uni.showModal({
					title: '提示',
					content: '确定' + txt + '护工吗？',
					success: (res) => {
						if (res.confirm) {
							console.log('用户点击确定');
							let params = {
								id: that.orderNo,
								workerId: that.infoData.id
							};
							assignNurse(params).then(res => {
									if (res.code == 200) {
										uni.showToast({
											title: txt + '成功',
											icon: 'success'
										})
										setTimeout(() => {
											uni.navigateTo({
												url: '/pages/workbench/order/list'
											})
										}, 1000)
									}

								})
								.catch((err) => {
									console.log(err);
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				})

			},
		}
	}
</script>

<style scoped lang="scss">
	.container {
		padding: 20rpx 20rpx 200rpx;

		.item-box {
			display: flex;
			align-items: center;
			background-color: #fff;
			border-radius: 10rpx;
			padding: 20rpx;

			.info-box {
				display: flex;
				flex-direction: column;
				justify-content: space-between;
				margin-left: 20rpx;
				flex: 1;

				.info-item {
					margin-top: 30rpx;
				}

				.item-txt {
					font-size: 28rpx;
					color: #1a1a1a;
				}

				.age-box {
					display: flex;
					align-items: center;
					justify-content: space-between;

					.box-l {
						display: flex;
						align-items: center;

						.age {
							margin-left: 30rpx;
						}
					}

					.btn {
						font-size: 28rpx;
						color: #4B91D1;
					}
				}

				.service-box {

					display: flex;
					align-items: center;
					justify-content: space-between;

					.total {}
				}
			}
		}


		.certificate-box {
			display: flex;
			flex-direction: column;
			padding: 0 20rpx;
			margin-top: 20rpx;
			background-color: #fff;
			border-radius: 10rpx;

			.title {
				padding: 20rpx 0;
				font-size: 32rpx;
				font-weight: bold;
			}

			.box-item {
				display: flex;
				flex-direction: column;
				align-items: center;

				::v-deep .u-image {
					background-color: #f3f4f6;
				}

				.name {
					padding: 30rpx;
					font-size: 30rpx;
					font-weight: bold;
				}
			}
		}

		.btn-box {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-around;
			width: 100%;
			padding: 40rpx;
			box-sizing: border-box;
			background-color: #fff;

			.btn {
				width: 206rpx;
				height: 60rpx;
				border-radius: 10rpx;
				background-color: #4B91D1;
				text-align: center;
				line-height: 60rpx;
				color: #fff;
				font-size: 28rpx;
			}
		}
	}

	.pop-box {
		.pop-title {
			font-size: 32rpx;

			font-weight: bold;
			text-align: center;
			padding: 20rpx 0;

		}

		.pop-content {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 30rpx;
			font-size: 28rpx;
			color: #6F6F6F;
			padding: 0 20rpx;

			&>view {
				margin-bottom: 20rpx;

				&:last-child {
					margin-bottom: 0;

				}

			}

			.pop-item {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 500rpx;
				padding: 20rpx 0;
				background-color: #4B91D1;
				border-radius: 40rpx;
				color: #fff;

				.txt {
					font-size: 28rpx;
				}
			}

		}

		.footer-btn {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-top: 60rpx;

			.btn {
				width: 500rpx;
				padding: 20rpx 0;
				border: 1rpx solid #4B91D1;
				border-radius: 40rpx;
				color: #333;
				text-align: center;
			}
		}
	}
</style>