door-uniapp-240802/service-uniapp-client/pages/index/technician.vue

<template>
	<view class="technician">
		
		<view class="technician-top">
			<view class="technician-search">
				<view class="search">
					
					<view @click="showSelectArea" class="left-area">
						<image src="@/static/home/address-icon.png"></image>
						<view class="area">{{ area }}</view>
						<image src="../../static/home/arrow-icon.png"></image>
						<view class="parting-line">|</view>
					</view>
					
					<view class="center-area">
						<image src="@/static/home/search-icon.png"></image>
						<van-field v-model="queryParams.title" :clearable="true" @clear="clearKey" center placeholder="请输入技师" />
					</view>
					
					<view class="right-area">
						<view @click="getTechnicianList" class="search-button">搜索</view>
					</view>
					
				</view>
			</view>
			
			<view class="technician-bottm">
				<view class="a"><van-icon name="chat-o" />24小时在线接单</view>
				<view class="a"><uni-icons type="staff" color="#fff" size="13" />随时随地</view>
				<view class="a"><uni-icons type="staff" color="#fff" size="13" />绿色安全</view>
			</view>
		</view>
		
		<!-- tab栏 -->
		<view class="tab">
			<van-tabs v-model:active="active" color="#EF8C94" background="transparent">
				<van-tab title="男士套餐"></van-tab>
				<van-tab title="女士套餐"></van-tab>
				<!-- 后面这两个个用于解决页面显示bug -->
				<van-tab title="免通行费"></van-tab>
				<van-tab disabled></van-tab>
				<van-tab disabled></van-tab>
			</van-tabs>
		</view>

		<van-list v-model:loading="loading" :finished="finished" @load="onLoad">
			<technician-list :technicianList="technicianList"></technician-list>
		</van-list>

		<selectArea :show="showAeraPro" @close="closeAreaPro" @select="selectArea"></selectArea>
		
	</view>
</template>

<script>
	import technicianList from "../../components/technicianList.vue"
	import selectArea from '../../components/selectArea.vue';
	import Position from '@/utils/position.js'
	
	export default {
		components: { technicianList , selectArea },
		data() {
			return {
				list: [],
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					title: ''
				},
				technicianList: [],
				loading: false,
				finished: false,
				showAeraPro: false,
				area: '',
				active : 0
			}
		},
		onShow() {
			this.getTechnicianList()
			this.initUserArea()
		},
		methods: {
			//list列表滑动到底部自动新增数据列表
			onLoad() {
				this.queryParams.pageSize += 10
				this.getTechnicianList()
			},
			
			//获取技师列表
			getTechnicianList() {
				this.$api('getTechnicianList', this.queryParams, res => {
					if (res.code == 200) {
						this.technicianList = res.result.records
						if (this.queryParams.pageSize > res.result.total) {
							this.finished = true
						}
						this.calculatedDistance()	//计算用户与技师距离
					}
					this.loading = false
				})
			},
			
			//清空输入框数据
			clearKey() { 
				this.getTechnicianList();
			},
			
			//关闭选择地区
			closeAreaPro() {
				this.showAeraPro = false;
			},
			
			//选择了地区信息
			selectArea(area) {
				this.area = area;
				this.showAeraPro = false;
				
				//更新所在地区
				this.updateSessionPositon(area)
			},
			
			//显示选择地区
			showSelectArea() {
				this.showAeraPro = true;
			},
			
			//获取用户详细地址(省市县)
			getLocation() { 
				Position.getLocationDetail().then(res => {
					sessionStorage.setItem("position", JSON.stringify(res))
					this.area = res.addressDetail.district
				})
			},
			
			//初始化用户所在地区
			initUserArea(){
				if(!sessionStorage.getItem('position')) return this.getLocation()		//获取(详细地址，包括省市区)
				let positionInfo = JSON.parse(sessionStorage.getItem('position'))
				this.area = positionInfo.addressDetail.district
			},
			
			//计算距离
			calculatedDistance() {
				Position.getLocation(result => {
					this.technicianList.forEach(item => {
						item.km =  Position.calculateDistance(result.latitude, result.longitude, item.latitude, item.longitude)
					})
				})
			},
			
			//更新用户所在区域(更新区县信息)
			updateSessionPositon(area){
				if(sessionStorage.getItem('position')){
					let position = JSON.parse(sessionStorage.getItem('position'))
					position.addressDetail.district = area
					sessionStorage.setItem('position',JSON.stringify(position))
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	body {
		background-color: #f3f3f3;
	}

	.technician-top {
		background: #F6BEC3;
	}

	.technician-bottm {
		display: flex;
		justify-content: space-around;
		font-size: 28rpx;
		height: 110rpx;
		align-items: center;
		color: #fff;
	}

	.technician-search {
		padding-top: 60rpx;
		
		.search {
			height: 82rpx;
			width: 710rpx;
			background: #FFFFFF;
			margin: 0px auto;
			border-radius: 41rpx;
			box-sizing: border-box;
			padding: 0 15rpx;
		
			display: flex;
			align-items: center;
			justify-content: space-between;
		
			.left-area,
			.center-area {
				display: flex;
				align-items: center;
			}
		
			.left-area {
				max-width: 160rpx;
				
				image {
					flex-shrink: 0;
					width: 26rpx;
					height: 26rpx;
				}
		
				.area {
					font-size: 24rpx;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					/* 限制显示两行 */
					-webkit-box-orient: vertical;
					overflow: hidden;
					text-overflow: ellipsis;
					color: #292929;
				}
		
				.parting-line {
					flex-shrink: 0;
					font-size: 26rpx;
					color: #ccc;
					margin: 0rpx 5rpx;
				}
			}
		
			.center-area {
				display: flex;
				flex-wrap: nowrap;
				align-items: center;
				width: calc(100% - 290rpx);
		
				image {
					width: 26rpx;
					height: 26rpx;
				}
		
				.van-field {
					background-color: transparent;
					box-sizing: border-box;
					height: 82rpx;
					line-height: 82rpx;
					width: calc(100% - 30rpx);
					padding: 0rpx 10rpx 0rpx 0rpx;
		
					input {
						height: 82rpx;
						font-size: 60rpx;
					}
				}
			}
		
			.right-area {
				.search-button {
					background: #F6BEC3;
					height: 60rpx;
					width: 130rpx;
					font-size: 26rpx;
					border-radius: 35rpx;
					color: white;
		
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}
		
		}
	}

	.technician-search-button {
		background-color: #F6BEC3;
		color: #fff;
		font-size: 26rpx;
		padding: 2rpx 24rpx;
		border-radius: 40rpx;
	}
</style>