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.
1017 lines
27 KiB
1017 lines
27 KiB
<template>
|
|
<view class="pages-technician">
|
|
<fixed>
|
|
<uni-nav-bar :fixed="false" :shadow="false" :statusBar="true" :onlyLeft="true" :color="`#fff`"
|
|
:backgroundColor="primaryColor">
|
|
<view @tap.stop="toChooseLocation" class="map-info flex-y-center" slot="left">
|
|
<view class="flex-y-center pl-md c-base">
|
|
<i class="iconfont iconjuli mr-sm"></i>
|
|
<view class="map-text max-400 ellipsis">
|
|
{{location&&location.address ?location.address : isLoad ? '定位失败' : '定位中...'}}
|
|
</view>
|
|
<i class="iconfont icon-down"></i>
|
|
</view>
|
|
</view>
|
|
</uni-nav-bar>
|
|
<view class="fix-info fill-body rel">
|
|
<view class="space-top abs" :style="{background:primaryColor}"></view>
|
|
<view class="search-info fill-base pt-lg pl-lg pr-lg pb-md abs">
|
|
<view class="flex-center pb-md">
|
|
<!-- <view class="city-info">
|
|
<picker @change="pickerChange($event)" :value="cityIndex" :range="cityList"
|
|
range-key="title">
|
|
<view class="city-info flex-y-center">
|
|
<view>
|
|
<block v-if="cityList&&cityList.length > 0">
|
|
{{cityList[cityIndex].title.length > 3 ? cityList[cityIndex].title.substring(0,3) + '...':cityList[cityIndex].title}}
|
|
</block>
|
|
<block v-else>请选择</block>
|
|
</view>
|
|
<i class="iconfont iconshaixuanxia-1 ml-sm"></i>
|
|
</view>
|
|
</picker>
|
|
</view> -->
|
|
<view class="flex-1">
|
|
<search @input="toSearch" type="input" :padding="0" :radius="30" backgroundColor="#F0F0F0"
|
|
placeholder="请输入技师姓名">
|
|
</search>
|
|
</view>
|
|
</view>
|
|
<!-- <tab @change="handerTabChange" :list="tabList" :activeIndex="activeIndex*1"
|
|
:activeColor="primaryColor" width="33.3%" height="100rpx"></tab> -->
|
|
|
|
</view>
|
|
</view>
|
|
<view class="tabContent">
|
|
<tab @change="handerTabChange" :isLine="false" :list="tabList1" :activeIndex="activeIndex*1"
|
|
:activeColor="primaryColor" :width="100/4 + '%'" height="84rpx"></tab>
|
|
</view>
|
|
</fixed>
|
|
|
|
<block v-if="list.data.length>0">
|
|
<view class="list-item" v-for="(item,index) in list.data" :key="index">
|
|
<!-- <view class="top-tag flex-center f-icontext abs" v-if="item.coach_type_status==1">优</view> -->
|
|
<view class="flex-center flex-column">
|
|
<view class="item-img rel">
|
|
<image @tap.stop="toPreviewImage(index,1)" mode="" lazy-load class="item-img"
|
|
:src="item.work_img">
|
|
</image>
|
|
<!-- <image @tap.stop="item.coach_type_status==1?toPreviewImage(index,1):''" lazy-load class="abs"
|
|
:class="[`${imgType[item.coach_type_status]}-img`]"
|
|
:src="`https://lbqny.migugu.com/admin/anmo/mine/${imgType[item.coach_type_status]}.png`"
|
|
v-if="item.coach_type_status">
|
|
</image> -->
|
|
</view>
|
|
<!-- <view class="item-tag flex-center f-icontext c-base radius-20"
|
|
:class="[{'can-service':item.text_type==1}]">
|
|
{{item.text_type == 1 ?'可服务': '服务中'}}
|
|
</view> -->
|
|
</view>
|
|
<view class="flex-1 ml-md max-510 itemInfoContent">
|
|
<view class="flex-between">
|
|
<view class="flex-y-center f-title">
|
|
<view class="text-bold ellipsis" style="max-width: 60px;color: #333333;">{{item.coach_name}}</view>
|
|
<view class="star-text">{{item.star}}分</view>
|
|
<!-- <view @tap.stop="toPreviewImage(index)" class="more-img flex-center ml-sm f-icontext"
|
|
:style="{color:primaryColor,border:`1rpx solid ${primaryColor}`}">更多照片</view> -->
|
|
</view>
|
|
<view class="flex-center">
|
|
<i class="iconfont iconjuli" style="color:#71787E"></i>
|
|
<view class="distance">{{item.distance}}</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="flex-y-center timeInfo" v-if="item.near_time">
|
|
<view class="zao">
|
|
最早可约
|
|
</view>
|
|
<view class="can-service-btn flex-center rel">
|
|
{{item.near_time}}
|
|
<!-- <view class="bg abs" :style="{background:primaryColor}"></view> -->
|
|
<!-- <view class="text flex-center abs" :style="{color:primaryColor}"> {{item.near_time}}</view> -->
|
|
</view>
|
|
</view>
|
|
<view class="flex-between mendianInfo">
|
|
<view class="mendian" @click="goShop(item)">
|
|
<image src="../static/mendian.png" mode=""></image>
|
|
<text>{{item.company_name}}</text>
|
|
</view>
|
|
<view class="flex-y-center f-icontext">
|
|
<!-- <view class="flex-y-center"><i class="iconfont iconyduixingxingshixin icon-font-color"></i>
|
|
<view class="star-text">{{item.star}}</view>
|
|
</view> -->
|
|
<view class="order-num">已服务 {{item.order_num > 9999 ? '9999+' : item.order_num}}单</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
<view class="flex-between">
|
|
<view class="flex-y-center f-desc c-caption">
|
|
<view @tap.stop="toShowPopup(index,'message')" class="flex-y-center"><i
|
|
class="iconfont iconpinglun mr-sm"></i>{{item.comment_num}} </view>
|
|
<view @tap.stop="toCollect(index)" class="flex-y-center ml-md"><i class="iconfont mr-sm"
|
|
:class="[{'iconshoucang1':!item.is_collect},{'iconshoucang2':item.is_collect}]"
|
|
:style="{color:item.is_collect ? primaryColor :''}"></i>{{item.collect_num}} </view>
|
|
<view @tap.stop="goInfo(index)" class="flex-y-center ml-md">
|
|
<i class="iconfont iconxiangqing mr-sm"></i>
|
|
<view class="f-icontext">详情</view>
|
|
</view>
|
|
</view>
|
|
|
|
<view @tap.stop="toShowPopup(index,'technician')" class="item-btn flex-center f-desc c-base"
|
|
:style="{background:item.user_id?primaryColor:'#888'}">预约
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
|
|
<!-- #ifdef H5 -->
|
|
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0" :loading="loading" v-if="loading">
|
|
</load-more>
|
|
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1"></abnor>
|
|
<!-- #endif -->
|
|
<!-- #ifndef H5 -->
|
|
<load-more :noMore="list.current_page>=list.last_page&&list.data.length>0&&location.lng" :loading="loading"
|
|
v-if="loading">
|
|
</load-more>
|
|
<abnor v-if="!loading&&list.data.length<=0&&list.current_page==1&&location.lng"></abnor>
|
|
<abnor @confirm="toOpenLocation" :tip="[{ text: '定位失败，请开启地理位置授权后刷新页面重试~', color: 0 }]"
|
|
:button="[{ text: '开启定位' , type: 'confirm' }]" btnSize="" v-if="!loading && !location.lng"> </abnor>
|
|
<!-- #endif -->
|
|
|
|
<view class="space-footer"></view>
|
|
|
|
<uni-popup ref="technician_item" type="bottom">
|
|
<view class="technician-popup fill-base" v-if="showInd!=-1">
|
|
<view class="pd-lg"
|
|
:class="[{'flex-center': showType == 'technician'},{'flex-warp': showType == 'message'}]">
|
|
<image class="item-avatar radius" :src="list.data[showInd].work_img"></image>
|
|
<view @tap.stop="$refs.technician_item.close()" class="flex-1 ml-md">
|
|
<view class="flex-between">
|
|
<view class="flex-y-baseline f-caption c-caption">
|
|
<view class="f-title c-title mr-sm max-350 ellipsis">
|
|
{{list.data[showInd].coach_name}}
|
|
</view>从业{{list.data[showInd].work_time}}年
|
|
</view>
|
|
<i class="iconfont icon-close"></i>
|
|
</view>
|
|
<scroll-view scroll-y @touchmove.stop.prevent class="technician-text f-caption c-caption mt-sm"
|
|
v-if="showType == 'message'">
|
|
{{list.data[showInd].text}}
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
<view class="space-sm fill-body"></view>
|
|
<scroll-view scroll-y @touchmove.stop.prevent class="list-content">
|
|
<block v-if="showType == 'technician'">
|
|
<view class="list-item flex-center pd-lg fill-base radius-16" :class="[{'b-1px-t':index != 0}]"
|
|
v-for="(item,index) in serviceList" :key="index">
|
|
<image @tap.stop="goDetail(index)" mode="aspectFill" class="avatar lg radius-16"
|
|
:src="item.cover"></image>
|
|
<view class="flex-1 ml-md">
|
|
<view @tap.stop="goDetail(index)" class="f-title c-title max-510 ellipsis">
|
|
{{item.title}}
|
|
</view>
|
|
<view class="f-caption c-caption mt-sm mb-sm ellipsis">{{item.total_sale}}人选择</view>
|
|
<view class="flex-between">
|
|
<view class="flex-y-baseline f-desc c-caption max-350 ellipsis">
|
|
<view class="text-delete mr-sm" v-if="item.init_price">¥{{item.init_price}}
|
|
</view>
|
|
<view class="f-title c-warning mr-sm">¥{{item.price}}</view>/
|
|
{{item.time_long}}分钟
|
|
</view>
|
|
<view class="flex-warp">
|
|
<block v-if="item.num">
|
|
<button @tap.stop="changeNum(-1,index)" class="reduce"
|
|
:style="{borderColor:primaryColor,color:primaryColor}"><i
|
|
class="iconfont icon-jian-bold"></i></button>
|
|
<button class="addreduce clear-btn">{{item.num || 0}}</button>
|
|
</block>
|
|
<button @tap.stop="changeNum(1,index)" class="add"
|
|
:style="{background:primaryColor,borderColor:primaryColor}"><i
|
|
class="iconfont icon-jia-bold"></i></button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-if="showType == 'message'">
|
|
<view class="list-message flex-warp pd-lg" :class="[{'b-1px-t':index!=0}]"
|
|
v-for="(item,index) in commentList.data" :key="index">
|
|
<image class="item-avatar radius" :src="item.avatarUrl"></image>
|
|
<view class="flex-1 ml-md">
|
|
<view class="flex-between">
|
|
<view class="flex-y-center">
|
|
<view class="f-paragraph c-title mr-md">{{item.nickName}}</view>
|
|
<view class="flex-warp">
|
|
<i class="iconfont iconyduixingxingshixin icon-font-color"
|
|
:style="{backgroundImage: aindex< item.star?`-webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%)`:`-webkit-linear-gradient(270deg, #f4f6f8 0%, #ccc 100%)`}"
|
|
v-for="(aitem,aindex) in 5" :key="aindex"></i>
|
|
</view>
|
|
</view>
|
|
<view class="f-icontext c-caption">{{item.create_time}}</view>
|
|
</view>
|
|
<view class="flex-warp mt-sm">
|
|
<view class="pt-sm pb-sm pl-md pr-md mt-sm mr-sm radius fill-body f-caption c-desc"
|
|
v-for="(item,index) in item.lable_text" :key="index">{{item}}</view>
|
|
</view>
|
|
<view class="f-caption c-caption mt-md">
|
|
<text decode="emsp" style="word-break:break-all;">{{item.text}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</block>
|
|
</scroll-view>
|
|
<view style="margin: 0 100rpx;"
|
|
v-if="!loading&&((showType == 'technician' && serviceList.length<=0) || (showType == 'message' && commentList.data.length<=0))">
|
|
<abnor></abnor>
|
|
</view>
|
|
<block v-if="showType == 'message' && commentList.last_page > 1">
|
|
<view class="space-lg b-1px-t"></view>
|
|
<view
|
|
@tap.stop="$refs.technician_item.close(),$util.goUrl({url:`/user/pages/comment?index=${showInd}`})"
|
|
class="more-btn flex-center f-paragraph c-base radius"
|
|
style="width:300rpx;height: 80rpx;margin:0 auto" :style="{background:primaryColor}">查看更多
|
|
</view>
|
|
<view class="space-lg"></view>
|
|
</block>
|
|
<view class="flex-between pd-lg b-1px-t" v-if="showType == 'technician' && carList.car_count > 0">
|
|
<view class="flex-center">合计：<view class="f-title c-warning text-bold ml-sm">¥{{carList.car_price}}
|
|
</view>
|
|
</view>
|
|
<view @tap.stop="toOrder" class="order-btn flex-center f-desc c-base radius"
|
|
:style="{background: primaryColor}">提交订单
|
|
</view>
|
|
</view>
|
|
<view class="space-safe"></view>
|
|
</view>
|
|
</uni-popup>
|
|
|
|
<view :style="{height: `${configInfo.tabbarHeight}px`}"></view>
|
|
<tabbar :cur="1"></tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
mapState,
|
|
mapActions,
|
|
mapMutations
|
|
} from "vuex"
|
|
import tabbar from "@/components/tabbar.vue"
|
|
export default {
|
|
components: {
|
|
tabbar
|
|
},
|
|
data() {
|
|
return {
|
|
options: {},
|
|
imgType: {
|
|
1: 'top',
|
|
2: 'hot',
|
|
3: 'new'
|
|
},
|
|
loading: true,
|
|
showInd: -1,
|
|
showType: '',
|
|
lockTap: false,
|
|
serviceList: [],
|
|
commentList: [],
|
|
isLoad: false,
|
|
sort_order:'desc'
|
|
}
|
|
},
|
|
computed: mapState({
|
|
pageActive: state => state.technician.pageActive,
|
|
cityId: state => state.technician.cityId,
|
|
cityIndex: state => state.technician.cityIndex,
|
|
cityList: state => state.technician.cityList,
|
|
activeIndex: state => state.technician.activeIndex,
|
|
tabList: state => state.technician.tabList,
|
|
tabList1: state => state.service.tabList,
|
|
param: state => state.technician.param,
|
|
list: state => state.technician.list,
|
|
primaryColor: state => state.config.configInfo.primaryColor,
|
|
subColor: state => state.config.configInfo.subColor,
|
|
configInfo: state => state.config.configInfo,
|
|
userInfo: state => state.user.userInfo,
|
|
location: state => state.user.location,
|
|
carList: state => state.order.carList,
|
|
}),
|
|
async onLoad() {
|
|
// #ifdef H5
|
|
uni.setNavigationBarTitle({
|
|
title: '技师'
|
|
})
|
|
// #endif
|
|
// #ifndef H5
|
|
this.$util.showLoading()
|
|
// #endif
|
|
if (this.pageActive) {
|
|
this.isLoad = true
|
|
this.loading = false
|
|
this.$util.hideAll()
|
|
return
|
|
}
|
|
await this.initIndex()
|
|
this.updateTechnicianItem({
|
|
key: 'pageActive',
|
|
val: true
|
|
})
|
|
},
|
|
onPullDownRefresh() {
|
|
// #ifndef APP-PLUS
|
|
uni.showNavigationBarLoading()
|
|
// #endif
|
|
this.initRefresh();
|
|
uni.stopPullDownRefresh()
|
|
},
|
|
onReachBottom() {
|
|
if (this.list.current_page >= this.list.last_page || this.loading) return;
|
|
this.loading = true;
|
|
this.getList(this.param.page + 1);
|
|
},
|
|
onShareAppMessage(e) {
|
|
let {
|
|
id: pid
|
|
} = this.userInfo
|
|
let path = `/pages/technician?pid=${pid}`
|
|
this.$util.log(path)
|
|
return {
|
|
title: '',
|
|
imageUrl: '',
|
|
path,
|
|
}
|
|
},
|
|
methods: {
|
|
...mapActions(['getConfigInfo', 'getUserInfo', 'getCarList', 'getCityList', 'getServiceCoachList']),
|
|
...mapMutations(['updateUserItem', 'updateTechnicianItem']),
|
|
async initIndex(refresh = false) {
|
|
// #ifdef H5
|
|
// if (!refresh && this.$jweixin.isWechat()) {
|
|
// await this.$jweixin.initJssdk();
|
|
// this.toAppShare()
|
|
// }
|
|
// #endif
|
|
if (!this.configInfo.id || refresh) {
|
|
await this.getConfigInfo()
|
|
}
|
|
await this.getList(1, true)
|
|
},
|
|
pickerChange(e, val) {
|
|
let ind = e.target.value
|
|
this.updateTechnicianItem({
|
|
key: 'cityIndex',
|
|
val: ind
|
|
})
|
|
this.updateTechnicianItem({
|
|
key: 'cityId',
|
|
val: this.cityList[ind].id
|
|
})
|
|
this.getList(1)
|
|
},
|
|
initRefresh() {
|
|
this.initIndex(true)
|
|
},
|
|
toAppShare() {
|
|
let {
|
|
id: pid
|
|
} = this.userInfo
|
|
let title = '技师'
|
|
let page_url = window.location.href
|
|
if (page_url.includes('?pid=')) {
|
|
page_url = page_url.split('?pid=')[0]
|
|
}
|
|
let href = `${page_url}?pid=${pid}`
|
|
let imageUrl = ''
|
|
this.$jweixin.wxReady(() => {
|
|
this.$jweixin.showOptionMenu()
|
|
this.$jweixin.shareAppMessage(title, '', href, imageUrl)
|
|
this.$jweixin.shareTimelineMessage(title, href, imageUrl)
|
|
})
|
|
},
|
|
toOpenLocation() {
|
|
this.$util.checkAuth({
|
|
type: 'userLocation'
|
|
})
|
|
// #ifdef APP-PLUS
|
|
uni.getSystemInfo({
|
|
success: (sys) => {
|
|
if (sys.platform == 'ios') {
|
|
plus.runtime.openURL("app-settings://");
|
|
} else {
|
|
var main = plus.android.runtimeMainActivity();
|
|
var Intent = plus.android.importClass(
|
|
"android.content.Intent");
|
|
//可能应该直接进入应用列表的权限设置？=> android.settings.APPLICATION_SETTINGS
|
|
var mIntent = new Intent(
|
|
'android.settings.LOCATION_SOURCE_SETTINGS'
|
|
);
|
|
main.startActivity(mIntent);
|
|
}
|
|
}
|
|
})
|
|
// #endif
|
|
},
|
|
toSearch(val) {
|
|
let param = this.$util.deepCopy(this.param)
|
|
param.page = 1
|
|
param.coach_name = val
|
|
this.updateTechnicianItem({
|
|
key: 'param',
|
|
val: param
|
|
})
|
|
setTimeout(()=>{
|
|
this.getList()
|
|
},1000)
|
|
|
|
},
|
|
// 选择地区
|
|
async toChooseLocation(e) {
|
|
await this.$util.checkAuth({
|
|
type: 'userLocation'
|
|
})
|
|
let [, {
|
|
address = '',
|
|
longitude: lng,
|
|
latitude: lat,
|
|
province = '',
|
|
city = '',
|
|
district = '',
|
|
}] = await uni.chooseLocation();
|
|
if (!lng) return
|
|
let location = {
|
|
lng,
|
|
lat,
|
|
address,
|
|
province,
|
|
city,
|
|
district
|
|
}
|
|
this.updateUserItem({
|
|
key: 'location',
|
|
val: location
|
|
})
|
|
this.param.page = 1
|
|
this.getList()
|
|
},
|
|
async getList(page = 0, refresh = false) {
|
|
if (page) {
|
|
let param = this.$util.deepCopy(this.param)
|
|
param.page = page
|
|
this.updateTechnicianItem({
|
|
key: 'param',
|
|
val: param
|
|
})
|
|
}
|
|
let {
|
|
location
|
|
} = this
|
|
if (!location.lat) {
|
|
// #ifdef H5
|
|
// if (this.$jweixin.isWechat()) {
|
|
// this.$util.showLoading()
|
|
// // await this.$jweixin.initJssdk();
|
|
// await this.$jweixin.wxReady2();
|
|
// let {
|
|
// latitude: lat = 0,
|
|
// longitude: lng = 0
|
|
// } = await this.$jweixin.getWxLocation()
|
|
// location = {
|
|
// lng,
|
|
// lat,
|
|
// address: '定位失败',
|
|
// province: '',
|
|
// city: '',
|
|
// district: ''
|
|
// }
|
|
// if (lat && lng) {
|
|
// let key = `${lat},${lng}`
|
|
// let data = await this.$api.base.getMapInfo({
|
|
// location: key
|
|
// })
|
|
// let {
|
|
// status,
|
|
// result
|
|
// } = JSON.parse(data)
|
|
// if (status == 0) {
|
|
// let {
|
|
// address,
|
|
// address_component
|
|
// } = result
|
|
// let {
|
|
// province,
|
|
// city,
|
|
// district
|
|
// } = address_component
|
|
// location = {
|
|
// lng,
|
|
// lat,
|
|
// address,
|
|
// province,
|
|
// city,
|
|
// district
|
|
// }
|
|
// }
|
|
// }
|
|
// }
|
|
// #endif
|
|
// #ifndef H5
|
|
location = await this.$util.getBmapLocation()
|
|
// #endif
|
|
this.updateUserItem({
|
|
key: 'location',
|
|
val: location
|
|
})
|
|
}
|
|
let {
|
|
lng = 0,
|
|
lat = 0
|
|
} = location
|
|
|
|
let {
|
|
list: oldList,
|
|
param,
|
|
tabList,
|
|
tabList1,
|
|
activeIndex,
|
|
cityList,
|
|
cityIndex,
|
|
cityId: city_id
|
|
} = this
|
|
console.log(activeIndex,tabList1)
|
|
if (refresh) {
|
|
await this.getCityList({
|
|
lng,
|
|
lat
|
|
})
|
|
}
|
|
|
|
let {
|
|
id: type
|
|
} = tabList[activeIndex]
|
|
console.log(type)
|
|
let ind = cityList.findIndex(item => {
|
|
return item.id == city_id
|
|
})
|
|
city_id = ind == -1 ? 0 : city_id
|
|
cityIndex = ind == -1 ? 0 : ind
|
|
|
|
|
|
this.updateTechnicianItem({
|
|
key: 'cityIndex',
|
|
val: cityIndex
|
|
})
|
|
|
|
this.updateTechnicianItem({
|
|
key: 'cityId',
|
|
val: city_id
|
|
})
|
|
|
|
param = Object.assign({}, param, {
|
|
lng,
|
|
lat,
|
|
type,
|
|
city_id
|
|
})
|
|
await this.getServiceCoachList(param)
|
|
this.loading = false
|
|
this.$util.hideAll()
|
|
},
|
|
async handerTabChange(index) {
|
|
this.sort_order=='desc'?this.tabList1[index].sign=1:this.tabList1[index].sign=0
|
|
this.sort_order=='desc'?this.sort_order='asc':this.sort_order='desc'
|
|
this.updateTechnicianItem({
|
|
key: 'activeIndex',
|
|
val: index
|
|
})
|
|
this.showInd = -1
|
|
this.$util.showLoading()
|
|
uni.pageScrollTo({
|
|
scrollTop: 0
|
|
})
|
|
console.log(this.param,index)
|
|
let param = Object.assign({}, this.param, {
|
|
sort_field:index==2?'distance':index==1?'order_num':index==3?'star':'',
|
|
sort_order:this.sort_order
|
|
})
|
|
await this.getServiceCoachList(param)
|
|
this.$util.hideAll()
|
|
// this.getList(1)
|
|
},
|
|
goShop(item){
|
|
console.log(item,"hhhh")
|
|
this.$util.goUrl({
|
|
url:'/user/pages/myGroup/myGroup?isGroup=false&company_id='+item.company_id
|
|
})
|
|
},
|
|
toPreviewImage(index, key = 0) {
|
|
let {
|
|
self_img: urls,
|
|
work_img
|
|
} = this.list.data[index]
|
|
if (key) {
|
|
urls = [work_img]
|
|
}
|
|
this.$util.previewImage({
|
|
current: urls[0],
|
|
urls
|
|
})
|
|
},
|
|
async toShowPopup(index, key) {
|
|
this.showInd = index
|
|
this.showType = key
|
|
if (key == 'technician') {
|
|
let {
|
|
user_id = 0
|
|
} = this.list.data[index]
|
|
if (!user_id) return
|
|
await this.getServiceList()
|
|
} else {
|
|
await this.getCommentList()
|
|
}
|
|
this.$refs.technician_item.open()
|
|
},
|
|
async getCommentList() {
|
|
let {
|
|
id: coach_id
|
|
} = this.list.data[this.showInd]
|
|
let param = {
|
|
coach_id,
|
|
page: 1,
|
|
}
|
|
this.commentList = await this.$api.service.commentList(param)
|
|
},
|
|
async getServiceList() {
|
|
let {
|
|
id: coach_id
|
|
} = this.list.data[this.showInd]
|
|
await this.getCarList({
|
|
coach_id
|
|
})
|
|
let {
|
|
data
|
|
} = await this.$api.service.coachServiceList({
|
|
coach_id
|
|
})
|
|
let arr = []
|
|
this.carList.list.map(item => {
|
|
arr.push(item.service_id)
|
|
})
|
|
data.map(item => {
|
|
if (arr.includes(item.id)) {
|
|
let carInd = arr.findIndex(aitem => {
|
|
return aitem == item.id
|
|
})
|
|
item.num = this.carList.list[carInd].num
|
|
item.cart_id = this.carList.list[carInd].id
|
|
}
|
|
})
|
|
this.serviceList = data
|
|
},
|
|
async toCollect(index) {
|
|
let {
|
|
id,
|
|
is_collect,
|
|
collect_num
|
|
} = this.list.data[index]
|
|
let methodModel = is_collect ? 'delCollect' : 'addCollect'
|
|
await this.$api.mine[methodModel]({
|
|
coach_id: id
|
|
})
|
|
this.$util.showToast({
|
|
title: is_collect ? '取消成功' : '收藏成功'
|
|
})
|
|
this.list.data[index].is_collect = is_collect == 1 ? 0 : 1
|
|
this.list.data[index].collect_num = is_collect == 1 ? collect_num - 1 :
|
|
collect_num + 1
|
|
},
|
|
// 技师详情
|
|
goInfo(index) {
|
|
let {
|
|
id
|
|
} = this.list.data[index]
|
|
this.$util.goUrl({
|
|
url: `/user/pages/technician-info?id=${id}`
|
|
})
|
|
},
|
|
// 服务详情
|
|
goDetail(index) {
|
|
let {
|
|
id
|
|
} = this.serviceList[index]
|
|
let url = `/user/pages/detail?id=${id}`
|
|
this.$util.goUrl({
|
|
url
|
|
})
|
|
},
|
|
// 加/减数量
|
|
async changeNum(mol, serInd) {
|
|
let {
|
|
id: coach_id
|
|
} = this.list.data[this.showInd]
|
|
let {
|
|
id: service_id,
|
|
cart_id = 0
|
|
} = this.serviceList[serInd]
|
|
if (this.lockTap) return;
|
|
this.lockTap = true;
|
|
let methodModel = mol > 0 ? 'addCar' : 'delCar'
|
|
let param = mol > 0 ? {
|
|
service_id,
|
|
coach_id,
|
|
num: 1
|
|
} : {
|
|
id: cart_id,
|
|
num: 1
|
|
}
|
|
if (methodModel == 'delCar' && !param.id) {
|
|
this.lockTap = false
|
|
return
|
|
}
|
|
try {
|
|
let add_cart_id = await this.$api.order[methodModel](param)
|
|
let {
|
|
num = 0,
|
|
cart_id = 0
|
|
} = this.serviceList[serInd]
|
|
this.serviceList[serInd].num = num + mol
|
|
if (add_cart_id && mol > 0 && !cart_id) {
|
|
this.serviceList[serInd].cart_id = add_cart_id
|
|
}
|
|
if (this.serviceList[serInd].num < 1) {
|
|
this.serviceList[serInd].cart_id = 0
|
|
}
|
|
await this.getCarList({
|
|
coach_id
|
|
})
|
|
this.lockTap = false
|
|
} catch (e) {
|
|
this.lockTap = false
|
|
}
|
|
},
|
|
// 下单
|
|
toOrder() {
|
|
if (this.carList.car_count < 1) {
|
|
this.$util.showToast({
|
|
title: `请选择服务`
|
|
})
|
|
return
|
|
}
|
|
let {
|
|
id
|
|
} = this.list.data[this.showInd]
|
|
this.$refs.technician_item.close()
|
|
this.$util.goUrl({
|
|
url: `/user/pages/order?id=${id}`
|
|
})
|
|
},
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
/deep/.fixed-top{
|
|
z-index:997 !important;
|
|
}
|
|
.pages-technician {
|
|
min-height: calc(100vh);
|
|
background-color: #F4F6F8;
|
|
.fix-info {
|
|
height: 176rpx;
|
|
|
|
.space-top {
|
|
width: 100%;
|
|
height: 40rpx;
|
|
top: 0;
|
|
}
|
|
|
|
.search-info {
|
|
width: 100%;
|
|
top: 0;
|
|
// border-radius: 40rpx;
|
|
/deep/.search-item{
|
|
padding:40rpx;
|
|
|
|
}
|
|
.city-info {
|
|
width: 170rpx;
|
|
|
|
.iconfont {
|
|
font-size: 20rpx;
|
|
transform: scale(0.5);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.tabContent{
|
|
padding-right: 10px;
|
|
/deep/.tab-item{
|
|
background-color:#F3F5F7
|
|
}
|
|
}
|
|
.list-item {
|
|
display:flex;
|
|
align-items: center;
|
|
margin:0 24rpx;
|
|
margin-bottom: 20rpx;
|
|
box-shadow: 0px 4rpx 10rpx 0px rgba(53,107,194,0.06);
|
|
border-radius: 30rpx;
|
|
padding:30rpx;
|
|
background-color: #fff;
|
|
.itemInfoContent{
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
height: 262rpx;
|
|
}
|
|
.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: 210rpx;
|
|
height: 262rpx;
|
|
border-radius: 20rpx;
|
|
}
|
|
|
|
|
|
.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;
|
|
}
|
|
|
|
.item-tag.can-service {
|
|
color: #EBDDB1;
|
|
background: linear-gradient(270deg, #4C545A 0%, #282B34 100%);
|
|
}
|
|
|
|
.more-img {
|
|
width: 104rpx;
|
|
height: 33rpx;
|
|
border-radius: 3px;
|
|
transform: rotateZ(360deg);
|
|
}
|
|
.timeInfo{
|
|
border: 1px solid #08BF77;
|
|
border-radius: 10rpx;
|
|
width: fit-content;
|
|
.zao{
|
|
background: #08BF77;
|
|
padding:12rpx 0rpx;
|
|
color:#fff;
|
|
font-size: 24rpx;
|
|
width: 122rpx;
|
|
text-align: center;
|
|
}
|
|
}
|
|
|
|
.can-service-btn {
|
|
width: 122rpx;
|
|
text-align: center;
|
|
// margin-left: 8rpx;
|
|
// padding:12rpx 0rpx;
|
|
color: #71787E;
|
|
font-size: 24rpx;
|
|
|
|
.bg {
|
|
width: 64rpx;
|
|
height: 28rpx;
|
|
opacity: 0.1;
|
|
border-radius: 3rpx;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 1;
|
|
}
|
|
|
|
.text {
|
|
width: 64rpx;
|
|
height: 28rpx;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 2
|
|
}
|
|
}
|
|
.mendianInfo{
|
|
// margin:26rpx 0 16rpx 0;
|
|
.mendian{
|
|
display:flex;
|
|
align-items: center;
|
|
image{
|
|
width:30rpx;
|
|
height:30rpx;
|
|
}
|
|
text{
|
|
margin-left:12rpx;
|
|
font-size: 24rpx;
|
|
font-family: Alibaba PuHuiTi;
|
|
font-weight: 400;
|
|
color: #71787E;
|
|
}
|
|
}
|
|
}
|
|
|
|
.iconyduixingxingshixin {
|
|
font-size: 28rpx;
|
|
background-image: -webkit-linear-gradient(270deg, #FAD961 0%, #F76B1C 100%);
|
|
}
|
|
|
|
.star-text {
|
|
color: #F4563C;
|
|
font-size:30rpx;
|
|
margin-left:27rpx;
|
|
}
|
|
.distance{
|
|
color: #71787E;
|
|
font-size:24rpx;
|
|
}
|
|
|
|
.order-num {
|
|
color: #71787E;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.item-btn {
|
|
width: 120rpx;
|
|
height: 54rpx;
|
|
border-radius: 27rpx;
|
|
}
|
|
}
|
|
|
|
.technician-popup {
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
|
|
.item-avatar {
|
|
width: 88rpx;
|
|
height: 88rpx;
|
|
background: #f4f6f8;
|
|
}
|
|
|
|
.icon-close {
|
|
font-size: 50rpx;
|
|
}
|
|
|
|
.technician-text {
|
|
max-height: 150rpx;
|
|
}
|
|
|
|
.list-content {
|
|
max-height: 50vh;
|
|
|
|
.list-message {
|
|
.item-avatar {
|
|
width: 52rpx;
|
|
height: 52rpx;
|
|
background: #f4f6f8;
|
|
}
|
|
|
|
.iconyduixingxingshixin {
|
|
font-size: 28rpx;
|
|
margin-right: 5rpx;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.order-btn {
|
|
width: 200rpx;
|
|
height: 72rpx;
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
</style>
|
|
|