his_user_miniapp/pages_index/components/choosePatient/choosePatient.vue

<template>
	<view class="patient-container">
		<view class="patient-box">
			<view class="patient-head">
				<view class="patient-title">选择就诊人</view>
				<view class="x-f" @click="addPatient()"><u-icon name="plus-circle" size="36rpx" color="#222"></u-icon>添加</view>
			</view>
			<scroll-view scroll-x :scroll-into-view="scrollIntoView" :scroll-with-animation="true" class="patient-list" v-if="patientList&&patientList.length>0">
				<view :id="'patient_'+i" :class="current == i ? 'patient-item patient-active':'patient-item'" v-for="(item,i) in patientList" :key="item.patientId" @click="handlePatient(item,i)">
					<view class="patient-name textOne">{{item.patientName}}</view>
					<view class="patient-info">
						<text class="text" v-if="item.sex==1">男</text>
						<text class="text" v-if="item.sex==2">女</text>
						<text class="text">{{$getAge(item.birthday)}}岁</text>
					</view>
					<view class="checkmarkempty" v-show="current == i">
						<u-icon name="checkmark" size="28rpx" color="#fff"></u-icon>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {getPatientList} from '@/api/patient'
	export default {
		props: ['patient'],
		data() {
			return {
				current: 0,
				scrollIntoView: 'patient_0',
				patientList: [],
			}
		},
		mounted() {
			this.getPatientList()
		},
		watch: {
			patient(newVal) {
				const index = this.patientList.findIndex(item=>item.patientId == newVal.patientId)
				this.current = index > -1 ? index : 0
				setTimeout(()=>{
					this.scrollIntoView = `patient_${this.current}`
				},100)
			}
		},
		methods: {
			getPatientList(){
				uni.showLoading({
					title:"正在加载中"
				})
				getPatientList().then(
					res => {
						uni.hideLoading()
						if(res.code==200){
							this.patientList=res.data;
							const patient = this.patientList&&this.patientList.length> 0 ? this.patientList[this.current] : null
							uni.$emit('refreshOrderPatient',patient)
						}else{
							uni.showToast({
								icon:'none',
								title: "请求失败",
							});
						}
					},
					rej => {}
				);
			},
			addPatient() {
				this.$emit('addPatient')
			},
			handlePatient(item,i) {
				const patient = this.patientList&&this.patientList.length> 0 ? this.patientList[i] : null
				uni.$emit('refreshOrderPatient',patient)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@mixin u-flex($flexD, $alignI, $justifyC) {
		display: flex;
		flex-direction: $flexD;
		align-items: $alignI;
		justify-content: $justifyC;
	}
	.patient{
		&-container {
			padding: 15rpx;
			
		}
		&-box {
			padding: 30rpx 24rpx;
			box-shadow: 0px 0px 5px 2px rgba(0,0,0,0.05);
			background-color: #fff;
			border-radius: 15rpx;
		}
		&-head {
			@include u-flex(row, center, space-between);
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #222;
		}
		&-title {
			font-size: 32rpx;
			font-weight: bold;
		}
		&-list {
			white-space: nowrap;
			width: 100%;
		}
		&-item {
			margin-top: 20rpx;
			width: 200rpx;
			margin-right: 16rpx;
			display: inline-block;
			box-sizing: border-box;
			padding: 10rpx 16rpx;
			border-radius: 12rpx;
			border: 1px solid #eee;
			font-size: 26rpx;
			font-family: PingFang SC;
			color: #999;
			position: relative;
		}
		&-active{
			border: 1px solid #FF5C03;
			&::after {
				position: absolute;
				bottom: 0;
				right: 0;
				content: "";
				height: 0;
				width: 0;
				border-top: 24rpx solid transparent;
				border-right: 24rpx solid #FF5C03;
				border-bottom: 24rpx solid #FF5C03;
				border-left: 24rpx solid transparent;
				border-radius: 0 0 12rpx 0;
			}
		}
		&-name {
			overflow: hidden;
			margin-bottom: 10rpx;
			font-size: 30rpx;
			font-weight: bold;
			color: #222;
		}
		&-info {
			@include u-flex(row, center, flex-start);
			.text{
				margin-right: 19upx;
			}
		}
	}
	.checkmarkempty {
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 2;
	}
</style>