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.
293 lines
6.2 KiB
293 lines
6.2 KiB
<template>
|
|
<van-list v-if="technicianList.length > 0" v-model:loading="loading" :finished="finished" finished-text="没有更多了" @load="onLoad">
|
|
<view v-for="item in list" :key="item.id" class="technician-item"
|
|
@click="clickItem(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 == 'Y' ? item.setKm || 0 : 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-list>
|
|
|
|
<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 {
|
|
loading : false,
|
|
finished : false,
|
|
list : [],
|
|
queryParams : {
|
|
pageNo : 0,
|
|
pageSize : 10
|
|
},
|
|
position : null
|
|
}
|
|
},
|
|
created() {
|
|
this.paging()
|
|
},
|
|
methods: {
|
|
catch(index) { //缓存用户位置
|
|
if(this.position,index){
|
|
this.calculatedDistance(this.position,index)
|
|
}else{
|
|
Position.getLocation(result => {
|
|
this.position = result
|
|
this.calculatedDistance(result,index)
|
|
})
|
|
}
|
|
},
|
|
|
|
clickItem(item){
|
|
if (item.bookable != 'Y') {
|
|
return uni.showToast({
|
|
title: '技师未开启接单',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
this.select(item)
|
|
},
|
|
|
|
//计算距离
|
|
calculatedDistance(result,index){
|
|
console.log(index);
|
|
for(let i = index || 0 ; i < this.list.length ; i++){
|
|
let distance = Position.calculateDistance(result.latitude, result.longitude, this.list[i]
|
|
.latitude, this.list[i].longitude)
|
|
this.list[i].km = distance;
|
|
}
|
|
},
|
|
|
|
//滑动到屏幕底部触发
|
|
onLoad(){
|
|
this.queryParams.pageNo += 1
|
|
this.paging()
|
|
},
|
|
|
|
//分页
|
|
paging(){
|
|
this.loading = true
|
|
let { pageNo , pageSize } = this.queryParams
|
|
let startPostion = pageNo * pageSize
|
|
this.list.push(...this.technicianList.slice( startPostion , startPostion + pageSize))
|
|
this.catch(startPostion)
|
|
|
|
if(this.list.length >= this.technicianList.length){
|
|
this.finished = true
|
|
}
|
|
this.loading = false
|
|
}
|
|
}
|
|
}
|
|
</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: #55CCA7;
|
|
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 #55CCA7;
|
|
color: #55CCA7;
|
|
font-size: 20rpx;
|
|
padding: 5rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
|
|
.appointed-time {
|
|
width: 40%;
|
|
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-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: linear-gradient(170deg, #53CEAC, #5AC796);
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.notAvailable {
|
|
background: #ccc;
|
|
}
|
|
|
|
image {
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|