hospital-accompaniment-wechat/pages/mine/patient/patient.vue

<template>
	<view class="container">
		<view class="address-list">
			<view class="address-item" v-for="item,index in patientList" :key="index" @click="selectAddress(item)">
				<span class="name">{{item.name}}，{{item.mobile}}</span>
				<view class="func-box">
					<span class="default" v-if="item.defaulted">默认</span>
					<u-radio-group v-else @change="changeDefault(item)">
						<u-radio :name="item.defaulted" shape="circle" label="设置默认" iconSize="14"
							labelSize="12"></u-radio>
					</u-radio-group>
					<view class="btn-box">
						<span class="btn-s" @click.stop="editAddress(item)"><u-icon name="edit-pen" size="22"  color="#4B91D1"></u-icon></span>
						<span class="btn-s" @click.stop="delAddress(item)"><u-icon name="trash" size="22" color="#FF0000"></u-icon></span>
					</view>
				</view>
			</view>
		</view>
		<view class="empty-box" v-if="!patientList.length">
			<u-image src="/static/none.png" mode="aspectFill" width="582rpx" height="582rpx"></u-image>
			<span class="empty-txt">暂无数据!</span>
		</view>
		<!-- 底部按钮 -->
		<view class="footer-box">
			<view class="btn-box">
				<view class="submit-btn" @click="addAddress()">添加就诊人</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getPatientList,
		delPatient,
		setDefaultPatient
	} from "@/api/user.js"
	export default {
		data() {
			return {
				patientList: [],
				type: '',
			}
		},
		onLoad(option) {
			if (option.type) {
				this.type = option.type
			}
		},
		onShow() {
			this.getList()
		},
		methods: {
			changeDefault(row) {
				console.log('row', row);
				let that = this;
				uni.showLoading({
					title: '切换中',
					mask: true,
				});
				setDefaultPatient(row.id).then(res => {
						if (res.code == 200) {
							uni.$u.toast('切换成功');
							this.patientList = []
							this.getList()
						}
					})
					.catch((err) => {
						console.log(err);
						this.patientList = []
						this.getList()
					})
					.finally(() => {
						uni.hideLoading();
					});

			},
			getList() {
				let that = this;
				uni.showLoading({
					title: '加载中',
					mask: true,
				});
				getPatientList().then(res => {
						let data = res.data;
						if (data) {
							this.patientList = data;
						}
					})
					.catch((err) => {
						console.log(err);
					})
					.finally(() => {
						uni.hideLoading();
					});
			},
			selectAddress(item) {
				let type = uni.getStorageSync('patientType')
				if (type && type == 'order') {
					uni.$emit('returnPatient', item);
					uni.navigateBack({
						delta: 1,
					});
				}

			},

			editAddress(item) {
				uni.navigateTo({
					url: `/pages/mine/patient/form?id=${item.id}&type=edit`
				})
			},

			delAddress(item) {
				uni.showModal({
					title: '提示',
					content: '是否删除该信息',
					success: (res) => {
						let that = this;
						if (res.confirm) {
							delPatient(item.id).then(res => {
									if (res.code == 200) {
										uni.$u.toast('删除成功');
										this.getList()
									}
								})
								.catch((err) => {
									console.log(err);
								})
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					},
				});
			},

			addAddress() {
				uni.navigateTo({
					url: `/pages/mine/patient/form?type=add`
				})
			},
		}
	}
</script>

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

		.address-list {
			display: flex;
			flex-direction: column;

			.address-item {
				display: flex;
				flex-direction: column;
				background-color: #fff;
				padding: 30rpx;
				margin-bottom: 20rpx;
				border-radius: 15rpx;


				.name {
					font-size: 32rpx;
					font-weight: 700;
					color: #1A1A1A;
					margin-bottom: 20rpx;
				}

				.address {
					font-size: 24rpx;
				}

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

					.default {
						padding: 10rpx 30rpx;
						background-color: #F0F1F5;
						border-radius: 15rpx;
						font-size: 28rpx;
						color: #302F33;
					}

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

						.btn-s {
							padding: 20rpx 10rpx;
						}
					}

					// ::v-deep .u-icon {
					// 	font-size: 34rpx;
					// 	margin-left: 20rpx;
					// }
				}

			}
		}

		.footer-box {
			position: fixed;
			bottom: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			width: 100%;
			padding: 50rpx 30rpx 50rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			background-color: #fff;
			box-shadow: 0 -2rpx 30rpx #c5c5c53a;

			.btn-box {
				width: 100%;

				.submit-btn {
					display: block;
					width: 100%;
					height: 80rpx;
					line-height: 80rpx;
					text-align: center;
					color: #fff;
					background-color: #026EB7;
					border-radius: 50rpx;
				}
			}
		}
	}
</style>