door-uniapp-240802/service-uniapp-client/components/selectTechnicianCompoents.vue

<template>
	<view v-if="technicianList.length > 0" v-for="item in technicianList" :key="item.id" class="technician-item"
	 @click="select(item)">
		<view class="technician-img-and-status">
			<view class="img-box">
				<image :src="item.image" mode="widthFix"></image>
			</view>
			<view v-if="item.bookable == 'Y'" class="technician-status">
				可服务
			</view>
		</view>
		<view class="technician-server-info">
			<view class="technician-server-top">
				<view class="technician-name">
					<text class="name">{{ item.title }}</text>
					<text class="btn">更多照片</text>
				</view>
				<view class="appointed-time">
					<view class="capsule">
						<view class="earliest-reducible">最早可约</view>
						<view class="today">今天{{ item.useTime}}</view>
					</view>
				</view>
			</view>
			<view class="technician-server-center">
				<view class="server-num">
					已服务{{ item.isFw }}单
				</view>
				<view class="position">
					<view class="position-icon">
						<image src="@/static/technician/position.png" mode="aspectFill"></image>
					</view>
					<view class="distance">
						{{ item.setKmOpen ? item.setKm : item.km || 0 }}km
					</view>
				</view>
			</view>
			<view class="technician-server-bottom">
				<view class="evaluate">
					<view class="evaluate-icon">
						<image src="@/static/technician/evaluate-icon.png"></image>
					</view>
					<view class="evaluate-title">
						评价
					</view>
				</view>
				<view class="book-now" :class="{ notAvailable : item.bookable != 'Y'}">
					{{ item.bookable != 'Y' ? '不可预约' : '立即预约' }}
				</view>
			</view>
		</view>
	</view>
	
	<van-empty v-else image="/static/empty/data.png" image-size="400rpx" description="此项目暂无技师服务"/>
	
</template>

<script>
	import Position from '@/utils/position.js'
	export default {
		name:"selectTechnicianCompoents",
		props : ['technicianList', "select"],
		data() {
			return {
				
			}
		},
		created(){
			this.calculatedDistance()
		},
		methods : {
			calculatedDistance(){		//计算距离
				Position.getLocation(result => {
					this.technicianList.forEach(item => {
						let distance = Position.calculateDistance(result.latitude,result.longitude,item.latitude,item.longitude)
						item.km = distance;
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
.technician-item {
	display: flex;
	background: white;
	padding: 20rpx;
	margin-bottom: 20rpx;

	.technician-img-and-status {
		position: relative;
		height: 150rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;

		.img-box {
			width: 150rpx;
			height: 150rpx;
			background: #ccc;
			border-radius: 10rpx;
			overflow: hidden;
			
			image{
				width: 150rpx;
			}
		}

		.technician-status {
			display: flex;
			justify-content: center;
			align-items: center;
			position: absolute;
			left: 10%;
			bottom: -15rpx;
			background: #EF8C94;
			width: 80%;
			color: white;
			font-size: 22rpx;
			height: 35rpx;
			border-radius: 5rpx;
		}
	}

	.technician-server-info {
		display: flex;
		width: calc(100% - 150rpx);
		padding: 0rpx 20rpx;
		flex-direction: column;
		justify-content: space-between;

		.technician-server-top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;

			.technician-name {
				.name {
					font-weight: 600;
					margin-right: 10rpx;
				}

				.btn {
					border: 1px solid #EF8C94;
					color: #F6BEC3;
					font-size: 20rpx;
					padding: 5rpx;
					border-radius: 5rpx;
				}
			}

			.appointed-time {
				width: 40%;
				background: #FFE3E6;
				height: 40rpx;
				border-radius: 22.5rpx;
				font-size: 20rpx;
				color: #EF8C94;
			
				.capsule {
					display: flex;
					height: 100%;
					align-items: center;
			
					.earliest-reducible {
						display: flex;
						align-items: center;
						justify-content: center;
						width: 50%;
						height: 100%;
						color: white;
						border-radius: 20rpx;
						background: #EF8C94;
					}
			
					.today {
						width: 50%;
						text-align: center;
					}
				}
			}
		}

		.technician-server-center {
			display: flex;
			align-items: center;
			font-size: 26rpx;
			color: #888;

			.position {
				display: flex;
				margin-left: 10rpx;
			}


			image {
				width: 25rpx;
				height: 25rpx;
			}
		}

		.technician-server-bottom {
			display: flex;
			justify-content: space-between;
			
			.evaluate{
				display: flex;
				align-items: center;
				color: #333;
				font-size: 20rpx;
				
				.evaluate-icon{
					margin-right: 10rpx;
				}
			}
			
			.book-now{
				display: flex;
				align-items: center;
				justify-content: center;
				height: 50rpx;
				width: 160rpx;
				border-radius: 40rpx;
				color: white;
				background: #EF8C94;
				font-size: 24rpx;
			}
			
			.notAvailable{
				background: #ccc;
			}
			
			image{
				width: 25rpx;
				height: 25rpx;
			}
		}
	}
}
</style>