306 lines
8.4 KiB
Vue
306 lines
8.4 KiB
Vue
|
<template>
|
||
|
|
<view class="technician-list-item">
|
||
|
|
|
||
|
|
<view class="list-item flex-center pd-lg fill-base radius-16 rel">
|
||
|
|
<image mode="aspectFill" class="king-img abs" src="https://lbqny.migugu.com/admin/anmo/mine/king.gif"
|
||
|
|
v-if="info.coach_type_status==1">
|
||
|
|
</image>
|
||
|
|
<view class="flex-center flex-column">
|
||
|
|
<view class="item-img rel">
|
||
|
|
<!-- #ifdef H5 -->
|
||
|
|
<view class="item-img radius">
|
||
|
|
<view @tap.stop="toPreviewImage('work_img')" class="h5-image item-img radius"
|
||
|
|
:style="{ backgroundImage : `url('${info.work_img}')`}">
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view @tap.stop="info.coach_type_status==1?toPreviewImage('work_img'):''" class="h5-image abs"
|
||
|
|
:class="[`${imgType[info.coach_type_status]}-img`]"
|
||
|
|
:style="{ backgroundImage : info.coach_type_status === 3? `url('https://lbqny.migugu.com/admin/anmo/mine/${imgType[info.coach_type_status]}.png')` : `url('https://lbqny.migugu.com/admin/anmo/mine/${imgType[info.coach_type_status]}.gif')`}"
|
||
|
|
v-if="info.coach_type_status">
|
||
|
|
</view>
|
||
|
|
<!-- #endif -->
|
||
|
|
<!-- #ifndef H5 -->
|
||
|
|
<image @tap.stop="toPreviewImage('work_img')" mode="aspectFill" class="item-img radius"
|
||
|
|
:src="info.work_img">
|
||
|
|
</image>
|
||
|
|
<image @tap.stop="info.coach_type_status==1?toPreviewImage('work_img'):''" class="abs"
|
||
|
|
:class="[`${imgType[info.coach_type_status]}-img`]"
|
||
|
|
:src=" info.coach_type_status === 3 ? `https://lbqny.migugu.com/admin/anmo/mine/${imgType[info.coach_type_status]}.png` : `https://lbqny.migugu.com/admin/anmo/mine/${imgType[info.coach_type_status]}.gif`"
|
||
|
|
v-if="info.coach_type_status">
|
||
|
|
</image>
|
||
|
|
<!-- #endif -->
|
||
|
|
</view>
|
||
|
|
<view class="item-tag flex-center f-icontext c-base radius-20"
|
||
|
|
:style="{background: info.text_type === 1 ? service_btn_color : info.text_type == 3?primaryColor: info.text_type==4?'#e1493b':'',color:info.text_type === 1 ? service_font_color :[3,4].includes(info.text_type) ? '#fff' : ''}">
|
||
|
|
{{textType[info.text_type]}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex-1 ml-md max-510">
|
||
|
|
<view class="flex-between">
|
||
|
|
<view @tap.stop="goInfo">
|
||
|
|
<view class="flex-y-center f-title c-title">
|
||
|
|
<view class="text-bold max-200 ellipsis">{{info.coach_name}}</view>
|
||
|
|
<view @tap.stop="toPreviewImage('self_img')"
|
||
|
|
class="more-img flex-center ml-sm f-icontext ml-lg"
|
||
|
|
:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}">生活照</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex-y-center f-icontext mt-sm">
|
||
|
|
<view class="flex-y-center"><i class="iconfont iconyduixingxingshixin icon-font-color"></i>
|
||
|
|
<view class="star-text">{{info.star}}</view>
|
||
|
|
</view>
|
||
|
|
<view class="order-num">
|
||
|
|
已服务 {{info.order_num > 9999 ? '9999+' : info.order_num}}单</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex-y-center f-icontext mt-sm mb-sm">
|
||
|
|
<view class="flex-center">
|
||
|
|
<i class="iconfont iconjuli" :style="{color:primaryColor}"></i>
|
||
|
|
<view class="f-desc c-title ml-sm">{{info.distance}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="can-service-btn f-caption c-base radius-10"
|
||
|
|
:style="{border:`2rpx solid ${primaryColor}`}" v-if="info.near_time">
|
||
|
|
<view class="text"
|
||
|
|
:style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">最早可约</view>
|
||
|
|
<view class="time" :style="{color:primaryColor}">{{'时间'+info.near_time+''}}</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="flex-between">
|
||
|
|
<view class="flex-y-center f-desc c-caption">
|
||
|
|
<view @tap.stop="goInfo" class="flex-y-center">
|
||
|
|
<block v-if="from!='collect' && plugAuth.store && info.store && info.store.id">
|
||
|
|
<i class="iconfont iconshangjia_1 c-caption mr-sm"></i>
|
||
|
|
商家
|
||
|
|
</block>
|
||
|
|
<block v-else-if="from!='collect' && info.admin_id && info.admin_name && merchantAuth">
|
||
|
|
<i class="iconfont iconshangjia_1 c-caption mr-sm"></i>
|
||
|
|
{{info.admin_name}}
|
||
|
|
</block>
|
||
|
|
<block v-else>
|
||
|
|
<i class="iconfont iconxiangqing c-caption mr-sm"></i>
|
||
|
|
详情
|
||
|
|
</block>
|
||
|
|
</view>
|
||
|
|
<view @tap.stop="toEmit('comment')" class="flex-y-center ml-lg"><i
|
||
|
|
class="iconfont iconpinglun mr-sm"></i>{{info.comment_num > 9999 ? '9999+':info.comment_num}}
|
||
|
|
</view>
|
||
|
|
<view @tap.stop="toEmit('collect')" class="flex-y-center ml-lg"><i class="iconfont mr-sm"
|
||
|
|
:class="[{'iconshoucang1':!info.is_collect},{'iconshoucang2':info.is_collect}]"
|
||
|
|
:style="{color:info.is_collect ? primaryColor :''}"></i>{{info.collect_num > 9999 ? '9999+':info.collect_num}}
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<auth @tap.stop.prevent :needAuth="userInfo && (!userInfo.phone || !userInfo.nickName)" :must="true"
|
||
|
|
:type="!userInfo.phone ? 'phone' : 'userInfo'" @go="toEmit('order')" style="width:130rpx;">
|
||
|
|
<view class="item-btn flex-center f-desc c-base"
|
||
|
|
:style="{background: `linear-gradient(68deg, ${primaryColor}, ${subColor})`}">
|
||
|
|
预约TA
|
||
|
|
</view>
|
||
|
|
</auth>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
mapState,
|
||
|
|
mapMutations
|
||
|
|
} from "vuex"
|
||
|
|
export default {
|
||
|
|
components: {},
|
||
|
|
props: {
|
||
|
|
from: {
|
||
|
|
type: String,
|
||
|
|
default () {
|
||
|
|
return 'list'
|
||
|
|
}
|
||
|
|
},
|
||
|
|
info: {
|
||
|
|
type: Object,
|
||
|
|
default () {
|
||
|
|
return {}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
imgType: {
|
||
|
|
1: 'top',
|
||
|
|
2: 'hot',
|
||
|
|
3: 'new'
|
||
|
|
},
|
||
|
|
textType: {
|
||
|
|
1: '可服务',
|
||
|
|
2: '服务中',
|
||
|
|
3: '可预约',
|
||
|
|
4: '不可预约'
|
||
|
|
}
|
||
|
|
}
|
||
|
|
},
|
||
|
|
computed: mapState({
|
||
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
||
|
|
subColor: state => state.config.configInfo.subColor,
|
||
|
|
plugAuth: state => state.config.configInfo.plugAuth,
|
||
|
|
merchantAuth: state => state.config.merchantAuth,
|
||
|
|
service_btn_color: state => state.config.configInfo.service_btn_color,
|
||
|
|
service_font_color: state => state.config.configInfo.service_font_color,
|
||
|
|
userInfo: state => state.user.userInfo,
|
||
|
|
}),
|
||
|
|
methods: {
|
||
|
|
toPreviewImage(key) {
|
||
|
|
let urls = this.info[key]
|
||
|
|
if (key == 'work_img') {
|
||
|
|
urls = [urls]
|
||
|
|
}
|
||
|
|
this.$util.previewImage({
|
||
|
|
current: urls[0],
|
||
|
|
urls
|
||
|
|
})
|
||
|
|
},
|
||
|
|
// 技-师详情
|
||
|
|
goInfo() {
|
||
|
|
let {
|
||
|
|
id,
|
||
|
|
store = {},
|
||
|
|
admin_id = 0,
|
||
|
|
admin_name
|
||
|
|
} = this.info
|
||
|
|
let {
|
||
|
|
from,
|
||
|
|
plugAuth = {},
|
||
|
|
merchantAuth = 0
|
||
|
|
} = this
|
||
|
|
this.$util.goUrl({
|
||
|
|
url: from != 'collect' && plugAuth.store && store && store.id ?
|
||
|
|
`/shopstore/pages/detail?id=${store.id}` : from != 'collect' && merchantAuth && admin_id &&
|
||
|
|
admin_name ? `/user/pages/merchant-info?id=${admin_id}` :
|
||
|
|
`/user/pages/technician-info?id=${id}`
|
||
|
|
})
|
||
|
|
},
|
||
|
|
toEmit(key) {
|
||
|
|
this.$emit(key)
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.technician-list-item {
|
||
|
|
|
||
|
|
.list-item {
|
||
|
|
.top-tag {
|
||
|
|
width: 40rpx;
|
||
|
|
height: 30rpx;
|
||
|
|
color: #B75E1D;
|
||
|
|
background: linear-gradient(90deg, #DFB885 0%, #FCE0AD 100%);
|
||
|
|
border-radius: 8rpx 0 8rpx 0;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-img {
|
||
|
|
width: 124rpx;
|
||
|
|
height: 124rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.king-img {
|
||
|
|
width: 90rpx;
|
||
|
|
height: 90rpx;
|
||
|
|
top: 110rpx;
|
||
|
|
left: -15rpx;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
.top-img {
|
||
|
|
width: 146rpx;
|
||
|
|
height: 140rpx;
|
||
|
|
top: -7rpx;
|
||
|
|
left: -11rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.hot-img {
|
||
|
|
width: 75rpx;
|
||
|
|
height: 51rpx;
|
||
|
|
top: 77rpx;
|
||
|
|
left: 25rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.new-img {
|
||
|
|
width: 38rpx;
|
||
|
|
height: 52rpx;
|
||
|
|
top: 83rpx;
|
||
|
|
left: 78rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-tag {
|
||
|
|
width: 100rpx;
|
||
|
|
height: 32rpx;
|
||
|
|
color: #000;
|
||
|
|
background: rgba(216, 216, 216, 0.3);
|
||
|
|
margin-top: 19rpx;
|
||
|
|
margin-bottom: 6rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.more-img {
|
||
|
|
width: 94rpx;
|
||
|
|
height: 33rpx;
|
||
|
|
border-radius: 3px;
|
||
|
|
transform: rotateZ(1turn);
|
||
|
|
}
|
||
|
|
|
||
|
|
.can-service-btn {
|
||
|
|
height: 80rpx;
|
||
|
|
margin-bottom: 30rpx;
|
||
|
|
width: 130rpx;
|
||
|
|
|
||
|
|
.bg {
|
||
|
|
width: 64rpx;
|
||
|
|
height: 28rpx;
|
||
|
|
opacity: 0.1;
|
||
|
|
border-radius: 3rpx;
|
||
|
|
top: 0;
|
||
|
|
left: 0;
|
||
|
|
z-index: 1;
|
||
|
|
}
|
||
|
|
|
||
|
|
.text {
|
||
|
|
height: 40rpx;
|
||
|
|
line-height: 40rpx;
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
|
||
|
|
.time {
|
||
|
|
height: 40rpx;
|
||
|
|
line-height: 40rpx;
|
||
|
|
text-align: center;
|
||
|
|
width: 100%;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.iconyduixingxingshixin {
|
||
|
|
font-size: 28rpx;
|
||
|
|
background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
|
||
|
|
}
|
||
|
|
|
||
|
|
.star-text {
|
||
|
|
color: #FF9519;
|
||
|
|
margin-left: 6rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.order-num {
|
||
|
|
color: #4D4D4D;
|
||
|
|
margin-left: 16rpx;
|
||
|
|
}
|
||
|
|
|
||
|
|
.item-btn {
|
||
|
|
width: 130rpx;
|
||
|
|
height: 52rpx;
|
||
|
|
border-radius: 100rpx;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|