You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
261 lines
5.4 KiB
261 lines
5.4 KiB
<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">{{ selectArea.name }}</view>
|
|
<image src="../../static/home/arrow-icon.png"></image>
|
|
<view class="parting-line">|</view>
|
|
</view>
|
|
|
|
<view class="center-area">
|
|
<van-search
|
|
v-model="queryParams.title"
|
|
:clearable="true"
|
|
background="transparent"
|
|
@clear="getTechnicianList"
|
|
@search="getTechnicianList"
|
|
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>
|
|
|
|
<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: ''
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getTechnicianList()
|
|
this.getLocation()
|
|
},
|
|
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;
|
|
|
|
},
|
|
|
|
//显示选择地区
|
|
showSelectArea() {
|
|
this.showAeraPro = true;
|
|
},
|
|
|
|
//获取用户详细地址(省市县)
|
|
getLocation() {
|
|
Position.getLocationDetail().then(res => {
|
|
if(!this.selectArea.name && this.configList.open_address == 0){
|
|
this.$store.commit('setArea', {
|
|
name : res.addressDetail.district
|
|
})
|
|
}
|
|
})
|
|
},
|
|
|
|
//计算距离
|
|
calculatedDistance() {
|
|
Position.getLocation(result => {
|
|
this.technicianList.forEach(item => {
|
|
item.km = Position.calculateDistance(result.latitude, result.longitude, item.latitude, item.longitude)
|
|
})
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
body {
|
|
background-color: #f3f3f3;
|
|
}
|
|
|
|
.technician-top {
|
|
background: linear-gradient(38deg, #4899A6, #60BDA2);
|
|
}
|
|
|
|
.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;
|
|
// background: transparent;
|
|
}
|
|
}
|
|
|
|
.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: #60BDA2;
|
|
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: #60BDA2;
|
|
color: #fff;
|
|
font-size: 26rpx;
|
|
padding: 2rpx 24rpx;
|
|
border-radius: 40rpx;
|
|
}
|
|
</style>
|