baiyuApp/components/choosePatient/choosePatient.vue

<template>
	<view class="patient-container">
		<view class="patient-box">
			<view class="patient-head">
				<view class="patient-title">选择就诊人</view>
				<view class="patient-title x-f addbtn" style="color: #fff;" @click="addPatient()"><uni-icons type="plusempty" size="36rpx" color="#fff"></uni-icons>添加</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 style="display: flex;flex-direction: column;align-items: flex-start;justify-content: center;flex:1;overflow: hidden;">
						<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>
						<uni-icons v-show="current == i" class="checkmarkempty" type="checkmarkempty" size="28rpx" color="#fff"></uni-icons>
					</view>
				</view>
				<view :id="'patient_'+patientList.length" class="patient-item"  @click="addPatient()">
					<view class="additem">
						<uni-icons type="plusempty" size="36rpx" color="#2583EB" style="font-weight: bold;"></uni-icons>
						<view class="patient-name" style="color: #2583EB;margin-bottom: 0;margin-top: 8rpx;">添加</view>
					</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: [],
			}
		},
		methods: {
			getPatientList(){
				uni.showLoading({
					title:"正在加载中"
				})
				getPatientList().then(res => {
						uni.hideLoading()
						if(res.code==200){
							this.patientList=res.data;
							if(this.patient&&this.patient.patientId) {
								const index = this.patientList.findIndex(item=>item.patientId == this.patient.patientId)
								this.current = index > -1 ? index : 0
							} else {
								this.current = 0
							}
							const patient = this.patientList&&this.patientList.length> 0 ? this.patientList[this.current] : null
							this.scrollIntoView = 'patient_'+ this.current
							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
				this.current = i
				this.scrollIntoView = 'patient_'+ i
				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;
	}
	.additem {
		text-align: center;
		color: #2583EB !important;
		@include u-flex(column, center, center);
		height: 100%;
	}
	.addbtn {
		background-color: #2583EB;
		padding: 5rpx 10rpx;
		box-sizing: border-box;
		border-radius: 10rpx;
	}
	.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 {
			margin-top: 20rpx;
			white-space: nowrap;
			width: 100%;
		}
		&-item {
			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 #2583EB;
			&::after {
				position: absolute;
				bottom: 0;
				right: 0;
				content: "";
				height: 0;
				width: 0;
				border-top: 24rpx solid transparent;
				border-right: 24rpx solid #2583EB;
				border-bottom: 24rpx solid #2583EB;
				border-left: 24rpx solid transparent;
				border-radius: 0 0 12rpx 0;
			}
		}
		&-name {
			width: 100%;
			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>