yudao-mall-uniapp/pages/XDHome/technicianList/technicianList.vue

<!-- 技师列表 -->
<!-- 首页，支持店铺装修 -->
<template>
	<s-layout class='ss-w-100 ss-h-100 box-sizing' style="position: relative;" title="技师" navbar="custom"
		tabbar="/pages/XDHomePage/technicianList/technicianList">
		<view class="body" :style="'padding-top:'+bottomHeight">
			<!-- 头部 -->
			<view style="margin-top: 20rpx;padding: 10rpx;" id="head-box">
				<!-- 导航标题 -->
				<view class="ss-flex ss-w-100">
					<view class="ss-flex">
						<view style="width:40rpx;height:40rpx;">
							<image referrerpolicy="no-referrer"
								src="/static/lanhu_shouye/6461e1be91dd49c48afbbacf664a38ec_mergeImage.png"
								class="icon-image"></image>
						</view>
						<view style="font-size:26rpx;color:#fff;margin-left:15rpx;">
							技师列表
						</view>
					</view>
					<view class="ss-flex-1"></view>
					<view style="width:40rpx;height:40rpx;">
						<image referrerpolicy="no-referrer"
							src="/static/lanhu_shouye/61f5a7931f9d41caafd7d60ec1efadb4_mergeImage.png"
							class="icon-image"></image>
					</view>
					<view style="width:40rpx;height:40rpx;margin-left:15rpx;margin-right:15rpx;">
						<image referrerpolicy="no-referrer"
							src="/static/lanhu_shouye/psza2ppvfwx4d6fnhi4tcrcfmrgvqf7x4jb799f8f8-619e-4a58-9606-3e6cd5bf62c6.png"
							class="icon-image"></image>
					</view>
				</view>
				<!-- 搜索框 -->
				<view style="width:100%;height:60rpx;margin-top:20rpx;">
					<uni-search-bar radius="30" v-model="searchInfo" placeholder="请输入搜索关键字" cancelButton="none" clearButton="none" @confirm="onSearch" ></uni-search-bar>
				</view>
				<!-- 多种搜索 -->
				<view style="width:100%;height:60rpx;margin-top:20rpx;" class="ss-flex">
					<view style="width:40rpx;height:40rpx;margin-left:15rpx;margin-right:15rpx;">
						<image referrerpolicy="no-referrer"
							src="/static/lanhu_shouye/psza2ppvfwx4d6fnhi4tcrcfmrgvqf7x4jb799f8f8-619e-4a58-9606-3e6cd5bf62c6.png"
							class="icon-image"></image>
					</view>
					<view style="width:25%;height:40rpx;">
						<uni-data-select
							class="icon-image"
						    v-model="address"
						    :localdata="range"
							:clear="false"
						    @change="changeAddress"
						></uni-data-select>
					</view>
					<view style="width:20rpx;"></view>
					<view style="width:25%;height:40rpx;" class="distance">
						<uni-data-select
							class="icon-image"
						    v-model="distance"
						    :localdata="distanceData"
							:clear="false"
						    @change="changeDistance"
						></uni-data-select>
					</view>
					<view class="ss-flex-1"></view>
					<view style="width:120rpx;display:flex;margin-right:20rpx;" @click="searchAll">
						<view style="width:80rpx;height:40rpx;line-height:40rpx;text-align:center;font-size:26rpx;color:#fff;">筛选</view>
						<view style="width:40rpx;height:40rpx;margin-left:15rpx;margin-right:15rpx;">
							<image referrerpolicy="no-referrer"
								src="/static/lanhu_shouye/psza2ppvfwx4d6fnhi4tcrcfmrgvqf7x4jb799f8f8-619e-4a58-9606-3e6cd5bf62c6.png"
								class="icon-image"></image>
						</view>
					</view>
					
				</view>
			</view>
			<!-- 中部 -->
			<view class="list-wrap">
				<scroll-view scroll-y="true" class="list">
					<view class="ss-flex-2 box-sizing list-box" v-for="item in 10" :key="item">
						<!-- 左右布局 -->
						<view style="width:190rpx;">
							<view style="width:190rpx;height:160rpx;">
								<image referrerpolicy="no-referrer"
									src="/static/lanhu_shouye/psq752p4oxrur1kwz38o9hz2uugu327v8c905774083-1ff9-40d7-8687-01c969b1461d.png"
									class="icon-image"></image>
							</view>
							<view class="bt-box">
								可预约
							</view>
						</view>
						<!-- 右边布局 -->
						<view class="ss-flex-1" style="margin-left: 20rpx;">
							<view class="ss-flex">
								<view style="font-size: 30rpx;color:#1A2433;font-weight: 650;">王琳haha</view>
								<view class="ss-flex" style="margin-left:20rpx;margin-top:5rpx;">
									<view style="width:25rpx;height:25rpx;">
										<image class="icon-image" referrerpolicy="no-referrer"
											src="/static/lanhu_shouye/ps45z8ynos8u6p0hlyciknnu9trq6jgvec6ac864-6e48-46fc-a850-9e88158e568c.png" />
									</view>
									<view style="font-size: 24rpx;margin-left:5rpx;color:#009FE8;margin-top: 5rpx;">4.8</view>
								</view>
								<view class="ss-flex-1"></view>
								<view class="job-box">
									NO.00158
								</view>
							</view>
							<view class="ss-flex-2">
								<view class="flag-box" style="background-color: #E57F3A;">
									新人
								</view>
								<view class="flag-box" style="background-color: #E50012;">
									明星
								</view>
								<view class="flag-box" style="background-color: #48B790;">
									手法哈哈哈哈
								</view>
							</view>
							<uni-tooltip style="margin-top: 5rpx;" content="哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈哈哈哈" placement="bottom">
								<view class="text-info-box">
									哈哈哈哈哈哈哈，哈哈哈哈哈哈哈，哈哈哈哈，哈哈哈哈哈哈哈，
								</view>
							</uni-tooltip>
							<view class="ss-flex-2">
								<view class="ss-flex-2 shop-box ss-row-center" style="height:25rpx;">
									<view style="width:17rpx;height:17rpx;margin-top:3rpx;" class="ss-flex-2">
										<image class="icon-image" referrerpolicy="no-referrer"
											src="/static/lanhu_shouye/ps45z8ynos8u6p0hlyciknnu9trq6jgvec6ac864-6e48-46fc-a850-9e88158e568c.png" />
									</view>
									<view style="font-size:16rpx;margin-left: 5rpx;color:#444;">秋水伊人</view>
								</view>
							</view>
							<view class="ss-flex-2 ss-row-center ss-col-center" style="box-sizing: border-box;">
								<view style="width:23rpx;height:25rpx;">
									<image class="icon-image" referrerpolicy="no-referrer"
										src="/static/lanhu_shouye/ps45z8ynos8u6p0hlyciknnu9trq6jgvec6ac864-6e48-46fc-a850-9e88158e568c.png" />
								</view>
								<view style="font-size: 22rpx;margin-left:5rpx;margin-top: 15rpx;">
									15
								</view>
								<view style="width:17rpx;height:25rpx;margin-left:30rpx;">
									<image class="icon-image" referrerpolicy="no-referrer"
										src="/static/lanhu_shouye/ps45z8ynos8u6p0hlyciknnu9trq6jgvec6ac864-6e48-46fc-a850-9e88158e568c.png" />
								</view>
								<view style="font-size: 22rpx;margin-left:5rpx;color:#009FE8;margin-top: 15rpx;">
									15.256km
								</view>
								<view style="font-size: 16rpx;margin-left:20rpx;color:#666;margin-top: 15rpx;">
									莱山区哈哈哈
								</view>
								<view class="ss-flex-1"></view>
								<view class="bt-box-two" @click="onTechnician">点TA</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
		<!-- 弹窗 -->
		<view v-if="isShow" class="popup-box" :style="'top:'+topSize" @click="close(2)">
			<view style="position: relative;width:100%;background-color: #fff;" @click.stop="prevent">
				<view style="display: flex;flex-direction:row;border-bottom: 4rpx solid #DCDCDC;">
					<!-- 左右布局 -->
					<view style="width:160rpx;background-color: #DCDCDC;color:#6B6B6B;font-size:26rpx;">
						<view style="width:100%;height:90rpx;line-height: 90rpx;text-align: center;font-size:34rpx;color:#333;font-weight: 650;background-color: #fff;">技师筛选</view>
						<view style="width:100%;height:90rpx;line-height: 90rpx;text-align: center;">时段</view>
						<view style="width:100%;height:90rpx;line-height: 90rpx;text-align: center;">价格</view>
						<view style="width:100%;height:90rpx;line-height: 90rpx;text-align: center;">服务状态</view>
						<view style="width:100%;height:90rpx;line-height: 90rpx;text-align: center;">服务类别</view>
					</view>
					<view class="ss-flex-1 box-sizing" style="padding-top:10rpx;">
						<view class="search-title">
							技师登记
						</view>
						<view class="content-info-box">
							<view class="content-text" @click.stop="newInfo(1)">新人组</view>
							<view class="content-text">明星组</view>
							<view class="content-text">专业组</view>
							<view class="content-text">5星好评</view>
						</view>
						<view class="search-title">
							技师性别
						</view>
						<view class="content-info-box">
							<view class="content-text">女技师</view>
							<view class="content-text">男技师</view>
							<view class="content-text">性别不限</view>
						</view>
						<view class="search-title">
							服务类别
						</view>
						<view class="content-info-box">
							<view class="content-text">上门服务</view>
							<view class="content-text">店面体验</view>
						</view>
						<view class="search-title">
							服务状态
						</view>
						<view class="content-info-box">
							<view class="content-text">空闲中</view>
							<view class="content-text">休息中</view>
							<view class="content-text">服务中</view>
						</view>
						<view class="search-title">
							技师年龄（岁）
						</view>
						<view style="width: 95%;margin-left:2.5%;">
							<slider :value="age" @change="sliderChange" min="18" max="55" show-value />
						</view>
						<view class="search-title">
							技师距离（km）
						</view>
						<view style="width: 95%;margin-left:2.5%;">
							<slider :value="distanceNum" @change="changeDistanceTwo" min="3" max="20" show-value />
						</view>
					</view>
				</view>
				<view style="display: flex;flex-wrap: nowrap;width:100%;height: 120rpx;">
					<view class="button-info-box" style="color:#41474B;background-color: #DCDCDC;">重置</view>
					<view class="button-info-box" style="color:#fff;background-color: #49B58E;">完成</view>
				</view>
			</view>
		</view>
	</s-layout>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad,
		onPageScroll,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	import $share from '@/sheep/platform/share';
	// 隐藏原生tabBar
	// uni.hideTabBar();

	/**搜索栏*/
	const searchInfo=ref('')
	//搜索事件
	const onSearch=async(e)=>{
		console.log(e,'触发搜索事件')
	}
	const address=ref(0)
	const range=ref([
        { value: 0, text: "华庭路橡树湾小区10-909" },
        { value: 1, text: "足球" },
        { value: 2, text: "游泳" },
      ])
	const changeAddress=async(e)=>{
		console.log(e,'获取地址信息')
	}
	const distance=ref(0)
	const distanceData=ref(
	[{ value: 0, text: "距离" },
	{ value: 1, text: "0~3km" },
	{ value: 2, text: "3~5km" },
	{ value: 2, text: "5~10km" },]
	)
	const changeDistance=async(e)=>{
		console.log(e,'获取距离')
	}
	const topSize=ref('0rpx')
	const isShow=ref(false)
	const searchAll=async()=>{
		//获取头部盒子宽高
		const query = uni.createSelectorQuery().select("#head-box")
		//获取宽度
		query.boundingClientRect(function(data){
			console.log(data,'元素的各种信息')
			topSize.value=(data.height*2+20)+'rpx'
			isShow.value=true
		}).exec()
	}
	const age=ref(21)
	const sliderChange=async(e)=>{
		console.log(e.detail.value,'技师年龄')
		age.value=e.detail.value
	}
	const distanceNum=ref(3)
	const changeDistanceTwo=async(e)=>{
		console.log(e.detail.value,'技师距离')
		distanceNum.value=e.detail.value
	}
	const newInfo=async(e)=>{
		console.log(e,'pppppppppppppp')
	}
	const prevent=async()=>{
		console.log('阻止事件冒泡')
	}
	const close=async(e)=>{
		console.log(e,'qqqqqq')
		isShow.value=false
	}
	

	//获取顶部安全距离
	const app = uni.getSystemInfoSync()
	const bottomHeightOne = (app.statusBarHeight) + 'rpx'
	const bottomHeight = ref(bottomHeightOne)
	
	// 点击技师，跳转到技师详情
	const onTechnician=async()=>{
		uni.navigateTo({
			url:'/pages/XDHome/technician/technicianDetails/technicianDetails'
		})
	}
	onLoad((options) => {

	});
</script>
<style scoped>
/deep/uni-slider .uni-slider-handle-wrapper{
	height:18rpx !important;
}
.distance{
	/deep/.uni-select__input-text{
		width:130rpx;
		color:#fff;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		font-size:24rpx;
		text-align: right;
	}
}
/deep/.uni-select__input-text{
	width:180rpx;
	color:#fff;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-size:24rpx;
	text-align: right;
}
/deep/.uni-searchbar__box{
	height:100% !important;
}
/deep/.uni-select{
	border: none !important;
	padding-left: 0rpx;
}
</style>
<style scoped lang="scss">
.list-box{
	width:95%;
	margin-left:2.5%;
	margin-top: 20rpx;
	padding-bottom: 20rpx;
	border-bottom: 3rpx dashed #AAAAAA;
}
.bt-box-two{
	padding: 5rpx;
	padding-left: 20rpx;
	padding-right: 20rpx;
	font-size: 20rpx;
	color:#fff;
	background-color: #009FE8;
	border-radius: 5rpx;
}
.shop-box{
	padding:3rpx;
	padding-left: 15rpx;
	padding-right: 15rpx;
	// background-color: #E3007F;
	color:#fff;
	border-radius: 5rpx;
	box-sizing: border-box;
}
.text-info-box{
	width: 100%;
	font-size: 23rpx;
	color: #6F7379;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	text-overflow: ellipsis;
	min-height: 60rpx;
}
.flag-box{
	font-size: 16rpx !important;
	color:#fff;
	margin-right: 15rpx;
	padding-top:2rpx;
	padding-bottom:2rpx;
	text-align: center;
	box-sizing: border-box;
	border-radius: 5rpx;
	margin-top:5rpx;
	padding-left:15rpx;
	padding-right:15rpx;
}
.job-box{
	font-size: 22rpx;
	color: #fff;
	background-color: #898F96;
	padding:3rpx;
	padding-left: 5rpx;
	padding-right: 5rpx;
	-moz-box-sizing: border-box;
}
.bt-box{
	width:100rpx;
	height:30rpx;
	line-height:30rpx;
	text-align:center;
	color:#fff;
	background-color: #009FE8;
	font-size: 20rpx;
	padding:3rpx;
	border-radius: 5rpx;
	margin-top:10rpx;
	margin-left:40rpx;
}
.button-info-box{
	width:41%;
	margin-left:6%;
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	font-size:40rpx;
	margin-top:25rpx;
	border-radius: 10rpx;
}
.content-text{
	width: 30%;
	height: 60rpx;
	line-height: 60rpx;
	text-align: center;
	font-size: 28rpx;
	color:#707374;
	background-color: #EFEEF1;
	margin-top:15rpx;
	border-radius: 10rpx;
	margin-left: 2.5%;
}
.content-info-box{
	width: 95%;
	margin-left:2.5%;
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	align-items: center;
}
.search-title{
	width: 90%;
	height: 50rpx;
	margin-left:5%;
	margin-top: 20rpx;
	font-size: 30rpx;
	color: #333;
	font-weight: 650;
	text-align: left;
}
.popup-box{
	position: absolute;
	left:0;
	bottom:0;
	right:0;
	z-index: 999;
	background-color: rgba(0, 0, 0, .2);
}
.icon-image{
	width:100%;
	height:100%;
}
// 上中下布局样式
.body {
	display: flex;
	flex-direction: column;
	height: calc(100vh - 50px);
	background: linear-gradient(to bottom, #08A3E9, #fff);
	box-sizing: border-box;
}
// 中部滚动
.list-wrap {
	flex-grow: 1;
	position: relative;
	background-color: #fff;
	border-radius: 10rpx;
	width: 95%;
	margin-left: 2.5%;
	box-sizing: border-box;
}
.list {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	padding:10rpx;
	box-sizing: border-box;
}
.list-scroll-view {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-left: 2vw;
	margin-right: 2vw;
}
.course-card {
	width: 47vw;
	margin-top: 10px;
	margin-bottom: 10px;
}
</style>