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.
242 lines
4.8 KiB
242 lines
4.8 KiB
<template>
|
|
<view v-if="technicianList.length > 0" v-for="item in technicianList" :key="item.id" class="technician-item"
|
|
@click="select(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 ? item.setKm : 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-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 {
|
|
|
|
}
|
|
},
|
|
created(){
|
|
this.calculatedDistance()
|
|
},
|
|
methods : {
|
|
calculatedDistance(){ //计算距离
|
|
Position.getLocation(result => {
|
|
this.technicianList.forEach(item => {
|
|
let distance = Position.calculateDistance(result.latitude,result.longitude,item.latitude,item.longitude)
|
|
item.km = distance;
|
|
})
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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: #EF8C94;
|
|
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 #EF8C94;
|
|
color: #F6BEC3;
|
|
font-size: 20rpx;
|
|
padding: 5rpx;
|
|
border-radius: 5rpx;
|
|
}
|
|
}
|
|
|
|
.appointed-time {
|
|
width: 40%;
|
|
background: #FFE3E6;
|
|
height: 40rpx;
|
|
border-radius: 22.5rpx;
|
|
font-size: 20rpx;
|
|
color: #EF8C94;
|
|
|
|
.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: #EF8C94;
|
|
}
|
|
|
|
.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: #EF8C94;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.notAvailable{
|
|
background: #ccc;
|
|
}
|
|
|
|
image{
|
|
width: 25rpx;
|
|
height: 25rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|