reservation-uniapp-250509/service-uniapp-client/components/technicianList.vue

<template>
	<view class="technician-commodity">
		<view v-if="technicianList.length > 0" class="collect-list">
			<view @click="gototechnicianDetail(item)" v-for="item in technicianList" :key="item.id" class="collect-item">

				<view class="collect-main">
					<view class="technician-head b-relative">
						<view class="img-box">
							<image :src="item.image" mode="aspectFill" class="bg"></image>
							<image v-if="item.icon" :src="item.icon" mode="aspectFit" class="hot"></image>
							<view v-if="item.bookable == 'Y'" class="available-for-service">
								<image src="@/static/address/lightning-icon.png" mode="aspectFit"></image>
								<text class="desc">可服务</text>
							</view>
						</view>
					</view>

					<view class="detail-info">

						<view class="technician-base-info">
							<view class="name-and-level">
								<view class="technician-name">{{ item.title }}</view>
								<van-icon name="star" color="#E8615E" size="25rpx" />
								<text class="score">{{ item.level }}</text>
							</view>
							<view class="alert-collect">
								<image src="@/static/technician/address.png" mode="aspectFit"></image>
								<text class="alert-add-collect">
									{{ item.setKmOpen ? item.setKm || 0 : item.km || 0 }}km
								</text>
							</view>
						</view>

						<view class="appointed-time">
							<view class="capsule">
								<view class="earliest-reducible">最早可约</view>
								<view class="today">今天{{ item.useTime}}</view>
							</view>
						</view>

						<view class="technician-desc">
							{{ item.notes }}
						</view>

					</view>

				</view>

				<view class="public-praise">
					<view class="server-num">已服务{{ item.isFw }}+单</view>
					<!-- <view class="server-num">已服务666666+单</view> -->

					<view class="evaluate-collect-subscribe">
						<view class="evaluate-collect">
							<image src="@/static/collect/review-icon.png" mode="aspectFit"></image>
							<view class="evaluate-num">{{item.pinNum}}评价</view>
							<image src="@/static/technician/collect.png" mode="aspectFit"></image>
							<view class="collect-num">{{ item.collectNum }}收藏</view>
						</view>

						<view @click="gototechnicianDetail(item)" class="subscribe" :class="{ notAvailable : item.bookable != 'Y'}">{{ item.bookable == 'Y' ? '立即预约' : '不可预约' }}</view>
						<!-- <view @click="gototechnicianDetail(item)" class="subscribe">
							{{ item.bookable == 'Y' ? '立即预约' : '不可预约' }}</view> -->
					</view>
				</view>

			</view>
		</view>
		
		<van-empty v-else image="/static/empty/data.png" image-size="400rpx" description="暂无技师"/>
	</view>
</template>

<script>
	export default {
		props: ['technicianList'],
		data() {
			return {}
		},
		methods: {
			//跳转技师详情页面 setKmOpen 是否开启假距离 distance 距离信息
			gototechnicianDetail(item) {
				uni.navigateTo({
					url: `/pages/technician/technicianDetail?id=${item.id}&setKmOpen=${item.setKmOpen}&distance=${item.setKmOpen == 'Y' ? item.setKm : item.km}`
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.technician-commodity {
		width: 750rpx;
		margin: 0 auto;
		background: #F5F5F5;
		min-height: 100vh;
		box-sizing: border-box;

		.collect-list {
			padding: 20rpx;

			.collect-item {
				background: white;
				border-radius: 20rpx;
				padding: 20rpx;
				margin-bottom: 20rpx;

				.collect-main {
					display: flex;

					.technician-head {
						width: 150rpx;
						height: 150rpx;
						border-radius: 10rpx;
						border: 1px solid #5EBAA2;
						
						.img-box{
							.bg {
								width: 150rpx;
								height: 150rpx;
								border-radius: 10rpx;
								overflow: hidden;
								
								&::v-deep div{
									background-position: center top !important;
									background-size: 100% !important;
								}
							
								image {
									height: 100%;
								}
							}
							
							.hot {
								position: absolute;
								left: -28rpx;
								top: -34rpx;
								width: 80rpx;
								height: 80rpx;
							}
							
							.available-for-service {
								display: flex;
								justify-content: center;
								align-items: center;
								position: absolute;
								left: 50%;
								bottom: -13rpx;
								width: 70%;
								height: 40rpx;
								background: #60C285;
								border-radius: 10rpx;
								color: white;
								transform: translate(-50%);
							
								.desc {
									font-size: 18rpx;
								}
							
								image {
									width: 23rpx;
									height: 23rpx;
									vertical-align: middle;
								}
							}
						}

					}

					.detail-info {
						display: flex;
						flex-direction: column;
						justify-content: space-between;
						width: calc(100% - 150rpx);
						padding-left: 15rpx;

						.technician-base-info {
							display: flex;
							justify-content: space-between;
							height: 45rpx;

							.name-and-level {
								display: flex;
								align-items: center;

								.technician-name {
									color: #333;
									font-size: 28rpx;
									font-weight: 500;
									margin-right: 10rpx;
								}

								.score {
									color: #E8615E;
									margin-left: 5rpx;
									font-size: 20rpx;
								}
							}

							.alert-collect {
								display: flex;
								align-items: center;
								color: #6E6E6E;
								font-size: 20rpx;

								.alert-add-collect {
									margin-left: 5rpx;
								}
							}

							text {
								display: block;
							}
						}

						.appointed-time {
							width: 48%;
							background: #E7FDF7;
							height: 40rpx;
							border-radius: 22.5rpx;
							font-size: 20rpx;
							color: #5DB9A3;

							.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: #52CFB0;
								}

								.today {
									width: 50%;
									text-align: center;
								}
							}
						}

						.technician-desc {
							color: #666666;
							overflow: hidden;
							min-height: 2em;
							font-size: 22rpx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							text-overflow: ellipsis;
						}

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

				.public-praise {
					display: flex;
					align-items: center;
					margin-top: 20rpx;
					font-size: 26rpx;

					.server-num {
						width: 170rpx;
						font-size: 22rpx;
						color: #666666;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}

					.evaluate-collect-subscribe {
						width: calc(100% - 170rpx);
						display: flex;
						justify-content: space-between;
						padding-left: 15rpx;

						.evaluate-collect {
							display: flex;
							align-items: center;

							.evaluate-num {
								color: #B6B6B6;
								margin-right: 20rpx;
							}

							.collect-num {
								color: #B6B6B6;
							}

							image {
								margin-right: 5rpx;
							}
						}

						.subscribe {
							display: flex;
							align-items: center;
							justify-content: center;
							height: 60rpx;
							width: 180rpx;
							border-radius: 40rpx;
							color: white;
							background: linear-gradient(170deg, #53CEAC, #5AC796);
						}

						.notAvailable {
							background: #ccc;
						}
					}

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

	.cell {
		display: flex;
		width: calc(100% + 16px);
		height: 20px;
		line-height: 20px;
		font-size: 12px;
		background-color: #E7FDF7;
		border-radius: 20px;
		color: #98D6C7;
	}

	.button {
		height: 30px;
		font-size: 14px;
		color: #fff;
		background-color: #55CCA7;
		line-height: 32px;
		width: 100px;
		text-align: center;
		border-radius: 20px;
	}

	.evaluate {
		display: flex;
		justify-content: space-between;
		width: 130px;
		color: #C3C3C3;
	}

	.img {
		position: absolute;
		top: -12px;
		left: -13px;
		height: 30px;
		width: 50px;
		z-index: 50;
	}

	.thumb-img {
		height: 83px;
		border-radius: 10px;
		border: 2px solid #00ff7f;
		overflow: hidden;
	}

	.thumb-text {
		font-size: 14px;
		background-color: #60C285;
		text-align: center;
		height: 22px;
		color: #fff;
		position: absolute;
		width: 70px;
		border-radius: 5px;
		top: 73px;
		left: 8px;

	}

	.thumb-text image {
		width: 10px;
		height: 12px;
	}
</style>