sadjv3/anmo-shop/pages/therapist/therapist.vue

1533 lines
43 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="">
<view class="" style="position: fixed;top: 0rpx;z-index: 999;width: 100%;background: #ffffff;">
<view class="padding-top-sm bg flex align-center" style="padding: 10rpx 20rpx;background: #ffffff;">
<view v-if="XCXIsSelect != '否'" class="flex align-center justify-between margin-right-sm"
@tap="showCityList" style="line-height: 68rpx;">
<image src="../../static/images/index/place.png" style="width: 34rpx;height: 34rpx;"></image>
<view class="localName" style="margin-left: 4rpx;">{{ city }}</view>
</view>
<u-search class="flex-sub" placeholder="请输入理疗师名字" :focus="false" shape="square" v-model="artificerName"
:show-action="true" :animation="true" bg-color="#F7F7F7" color="#1A1A1A" @search="onSearch()"
action-text="搜索" @custom="onSearch()"></u-search>
<!-- <u-search style="width: 100%;" placeholder="搜索需要的理疗师师" :focus="true" v-model="keyword" :show-action="true"
:animation="true" shape="square" bg-color="#F7F7F7" color="#1A1A1A" action-text="取消" @custom="goBack()"
@search="doSearch(false)"></u-search> -->
<view class="flex align-center justify-between"
style="width: 100px;height: 32px;line-height: 32px;border-radius: 4px;margin-left: 10px;">
<view id="liebiao" @click="onClickItem(0)" :class="current == '0' ? 'aa' : 'bb'">列表</view>
<view id="ditu" @click="onClickItem(1)" :class="current == '1' ? 'aa' : 'bb'">地图</view>
</view>
</view>
<!-- <view class="bg flex justify-between padding">
<view class="" v-for="(item,index) in tablist" :key="index" :class="tabIndex==item.id?'actve':''"
@click="tanChange(item.id)">
{{item.value}}
</view>
</view>
<view class="bg flex align-center justify-between padding-lr padding-bottom">
<view v-for="(item,index) in list" :key="index" @click="change(index)"
:style="listIndex==index?'color:#20C675;font-size:30rpx;':''">
{{item.name}}
</view>
</view> -->
<view class="tabview1" v-if="XCXIsSelect != '否'">
<view class="tabview" v-if="tablist && tablist.length > 1">
<view v-for="(item, index) in tablist" :key="index" @tap="tanChange(index, item)"
:class="tabIndex == item.id ? 'tabItem_sel' : 'tabItem'">
<view>{{ item.value }}</view>
</view>
</view>
<!-- <view class="tabsx">
<view v-for="(item,index) in list" :key="index" :class="listIndex==index?'active':''"
@click="change(index)">{{item.name}}</view>
</view> -->
</view>
</view>
<view v-show="current === 0">
<view v-if="orderList.length" :style="XCXIsSelect != '否' ? '' : 'margin-top: 200rpx;'"
style="margin-top: 200rpx;padding: 0 20rpx;justify-content: space-between;"
class=" flex text-center flex-wrap">
<view class="margin-bottom-sm bg radius" v-for="(item, index) in orderList" :key='index'
@click="goOrder(item)" style="box-shadow: 6rpx 10rpx 4px #F5F5F5;width: 100%;padding: 20rpx;">
<view class="flex align-center">
<view style="width: 170upx;height: 170upx;border-radius: 10rpx;position: relative;">
<image :src="item.artificerImg ? item.artificerImg : '../../static/logo.png'"
@click.stop="saveImgs(item.artificerImg)"
style="width: 170upx;height: 170upx;border-radius: 50%;" mode="aspectFill"></image>
<image v-if="item.isHot == 1"
src="https://admin.sjajk.com/file/uploadPath/2023/02/16/9ae1b7e9fa931b5fc24cd8edecc10d9f.png"
style="width: 30rpx;height: 36rpx;position: absolute;z-index: 99;top: 40rpx;left: 110rpx;">
</image>
<view class="zpmore_view" v-if="item.lifePhoto" @click.stop="saveImgss(item.lifePhoto, 0)">
更多照片</view>
</view>
<view class="margin-left flex flex-direction" style="width: 85%;">
<view class="flex align-center" style="justify-content: start;">
<view class="flex align-center" style="width: 120rpx;">
<view class="text-bold text-30 margin-right-xs"
style="width: 100rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: left;">
{{ item.artificerName }}
</view>
</view>
<view class="" style="width: 150rpx;">
<view class="flex align-center" v-if="item.tripWay != 3" style="width: 150rpx;">
<image src="../../static/images/address.png"
style="width: 24rpx;height: 24rpx;"></image>
<view style="color: #333333;margin-left: 4rpx;font-size: 24rpx;">
{{ item.distance }}
</view>
</view>
</view>
<view class="kyy_view" v-if="item.state == 1">可服务</view>
<view class="kfw_view" v-else-if="item.state == 2">可预约</view>
<view class="byy_view" v-else>休息中</view>
</view>
<view class="flex" style="margin: 16rpx 0 6px 0;justify-content: start;">
<view class="flex align-center" style="width: 120rpx;">
<view v-if="item.ordersScore">
<image src="../../static/images/start.png" style="width: 24upx;height: 22upx;">
</image>
<text class="margin-left-xs" style="color: #fe831e;">{{ item.ordersScore
}}.0</text>
<!-- <image
src="https://admin.sjajk.com/file/uploadPath/2023/02/16/d45855dcf1e01210a4224a408225e8e0.png"
style="width: 40rpx;height:40rpx;">
</image> -->
</view>
<!-- <text style="color: #fff;float: right;font-size: 18rpx;">已服务{{item.ordersCount}}单</text> -->
</view>
<view class="flex align-center" style="width: 150rpx;">
<image src="../../static/images/pinglun.png" style="width: 24rpx;height: 24rpx;">
</image>
<view style="margin-left: 10rpx;color: #999;font-size: 26rpx;">
{{ item.commentCount ? item.commentCount : 0 }}
</view>
</view>
<view class="flex align-center">
<image src="../../static/images/aixin2.png"
style="width: 24rpx;height: 24rpx;margin-left: 40rpx;"></image>
<view style="margin-left: 10rpx;color: #999;font-size: 26rpx;">
{{ item.collectCount ? item.collectCount : 0 }}
</view>
</view>
</view>
<view style="width: 100%;display: flex;justify-content: start;align-items: center;">
<view class="flex flex-wrap align-center" style="width: 120rpx;"
v-if="XCXIsSelect != '否'">
<image src="../../static/images/shangjia.png" style="width: 24rpx;height: 24rpx;">
</image>
<view style="margin-left: 10rpx;color: #999;font-size: 26rpx;">商家</view>
</view>
<view class="flex align-center" style="width: 260rpx;">
<image src="../../static/images/time.png" style="width: 26rpx;height: 26rpx;">
</image>
<text class="zz_view" v-if="item.status == 1 && item.time">最早可约{{ item.time
}}</text>
</view>
<view class="" style="font-size: 24rpx;color: #f49650;" v-if="item.tripWay == 3">
免出行费
</view>
</view>
<view class="text-center text-sm" v-if="item.status == 1"
style="background: linear-gradient(to right, #223845, #00a85b);color: #ffffff;width: 100%;border-radius: 30upx;height: 60upx;line-height: 60upx;margin-top: 10rpx;"
@click.stop="goOrder(item)">
立即预约
</view>
<view class="text-center text-sm" @click.stop="showTips()" v-else
style="background: #d9d9d9;color: #ffffff;width: 100%;border-radius: 30upx;height: 60upx;line-height: 60upx;margin-top: 10rpx;">
立即预约
</view>
</view>
</view>
</view>
</view>
<empty v-if="orderList.length == 0"></empty>
</view>
<view v-show="current === 1">
<view class="flex text-center flex-wrap"
style="margin-top: 135px; padding: 0px 16px; justify-content: space-between;">
<div id="txMapContainer" style="width: 100%;height: calc(100vh - 188px);">&nbsp;</div>
<!-- 地图地图 -->
</view>
<u-popup v-model="showPopup" mode="bottom" height="" closeable :mask-close-able="false">
<view id="popView">
<view class="flex align-center">
<view style="width: 170upx;height: 170upx;border-radius: 10rpx;position: relative;">
<image
:src="getOrderByCurrentMarkerIndex().artificerImg ? getOrderByCurrentMarkerIndex().artificerImg : '../../static/logo.png'"
@click.stop="saveImgs(getOrderByCurrentMarkerIndex().artificerImg)"
style="width: 170upx;height: 170upx;border-radius: 50%;" mode="aspectFill"></image>
<image v-if="getOrderByCurrentMarkerIndex().isHot == 1"
src="https://admin.sjajk.com/file/uploadPath/2023/02/16/9ae1b7e9fa931b5fc24cd8edecc10d9f.png"
style="width: 30rpx;height: 36rpx;position: absolute;z-index: 99;top: 40rpx;left: 110rpx;">
</image>
<view class="zpmore_view" v-if="getOrderByCurrentMarkerIndex().lifePhoto"
@click.stop="saveImgss(getOrderByCurrentMarkerIndex().lifePhoto, 0)">更多照片</view>
</view>
<view class="margin-left flex flex-direction" style="width: 85%;">
<view class="flex align-center" style="justify-content: start;">
<view class="flex align-center" style="width: 120rpx;">
<view class="text-bold text-30 margin-right-xs"
style="width: 100rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: left;">
{{ getOrderByCurrentMarkerIndex().artificerName }}
</view>
</view>
<view class="" style="width: 150rpx;">
<view class="flex align-center" v-if="getOrderByCurrentMarkerIndex().tripWay != 3"
style="width: 150rpx;">
<image src="../../static/images/address.png"
style="width: 24rpx;height: 24rpx;"></image>
<view style="color: #333333;margin-left: 4rpx;font-size: 24rpx;">
{{ getOrderByCurrentMarkerIndex().distance }}
</view>
</view>
</view>
<view class="kyy_view" v-if="getOrderByCurrentMarkerIndex().state == 1">可服务</view>
<view class="kfw_view" v-else-if="getOrderByCurrentMarkerIndex().state == 2">可预约</view>
<view class="byy_view" v-else>休息中</view>
</view>
<view class="flex" style="margin: 16rpx 0 6px 0;justify-content: start;">
<view class="flex align-center" style="width: 120rpx;">
<view v-if="getOrderByCurrentMarkerIndex().ordersScore">
<image src="../../static/images/start.png" style="width: 24upx;height: 22upx;">
</image>
<text class="margin-left-xs" style="color: #fe831e;">{{
getOrderByCurrentMarkerIndex().ordersScore }}.0</text>
<!-- <image
src="https://admin.sjajk.com/file/uploadPath/2023/02/16/d45855dcf1e01210a4224a408225e8e0.png"
style="width: 40rpx;height:40rpx;">
</image> -->
</view>
<!-- <text style="color: #fff;float: right;font-size: 18rpx;">已服务{{getOrderByCurrentMarkerIndex().ordersCount}}单</text> -->
</view>
<view class="flex align-center" style="width: 150rpx;">
<image src="../../static/images/pinglun.png" style="width: 24rpx;height: 24rpx;">
</image>
<view style="margin-left: 10rpx;color: #999;font-size: 26rpx;">
{{ getOrderByCurrentMarkerIndex().commentCount ?
getOrderByCurrentMarkerIndex().commentCount : 0 }}
</view>
</view>
<view class="flex align-center">
<image src="../../static/images/aixin2.png"
style="width: 24rpx;height: 24rpx;margin-left: 40rpx;"></image>
<view style="margin-left: 10rpx;color: #999;font-size: 26rpx;">
{{ getOrderByCurrentMarkerIndex().collectCount ?
getOrderByCurrentMarkerIndex().collectCount : 0 }}
</view>
</view>
</view>
<view style="width: 100%;display: flex;justify-content: start;align-items: center;">
<view class="flex flex-wrap align-center" style="width: 120rpx;"
v-if="XCXIsSelect != '否'">
<image src="../../static/images/shangjia.png" style="width: 24rpx;height: 24rpx;">
</image>
<view style="margin-left: 10rpx;color: #999;font-size: 26rpx;">商家</view>
</view>
<view class="flex align-center" style="width: 260rpx;">
<image src="../../static/images/time.png" style="width: 26rpx;height: 26rpx;">
</image>
<text class="zz_view"
v-if="getOrderByCurrentMarkerIndex().status == 1 && getOrderByCurrentMarkerIndex().time">最早可约{{
getOrderByCurrentMarkerIndex().time }}</text>
</view>
<view class="" style="font-size: 24rpx;color: #f49650;"
v-if="getOrderByCurrentMarkerIndex().tripWay == 3">
免出行费
</view>
</view>
<view class="text-center text-sm" v-if="getOrderByCurrentMarkerIndex().status == 1"
style="background: linear-gradient(to right, #223845, #00a85b);color: #ffffff;width: 100%;border-radius: 30upx;height: 60upx;line-height: 60upx;margin-top: 10rpx;"
@click.stop="goOrder(getOrderByCurrentMarkerIndex())">
立即预约
</view>
<view class="text-center text-sm" v-else
style="background: #d9d9d9;color: #ffffff;width: 100%;border-radius: 30upx;height: 60upx;line-height: 60upx;margin-top: 10rpx;">
立即预约
</view>
</view>
</view>
</view>
</u-popup>
</view>
<view style="display:none;position: fixed;z-index: 999;bottom: 160rpx;" v-if="showTP">
<image src="https://admin.sjajk.com/file/uploadPath/2023/02/16/15ade225e9fa8a1d82b325c06dc2b653.png"
style="width: 690rpx;margin: 30rpx;height: 600rpx;"></image>
<view
style="position: absolute;bottom: 100rpx;width: 100%;text-align: center;display: flex;justify-content: center;">
<view>
<view style="color: #333333;font-size: 28rpx;"><text style="font-size: 44rpx;color:#ee6c54">{{
tpCount }}</text>人已投票</view>
<view class="tp_view" v-if="tpSel == 2" @tap="saveTP">投票</view>
<view class="ytp_view" v-if="tpSel == 1">已投票</view>
</view>
</view>
</view>
<!-- 经验筛选 -->
<u-select v-model="Cityshow" :list="cityList" @confirm="getCity"></u-select>
<!-- <u-skeleton :loading="loading" :animation="true" elColor='#FFFFFF' bgColor='#FFFFFF'></u-skeleton> -->
</view>
</template>
<script>
import meTabs from "@/components/mescroll-uni/me-tabs/me-tabs.vue";
import empty from '@/components/empty.vue'
import RenDropdownFilter from '@/components/ren-dropdown-filter/ren-dropdown-filter.vue'
import commonConfig from 'common/config.js';
import * as webMap from 'utils/webMap.js';
// 调用手机系统权限
// #ifdef APP-PLUS
import permision from "@/components/permission.js";
// #endif
export default {
components: {
meTabs,
empty,
RenDropdownFilter
},
data() {
return {
artificerName: '',
tpSel: 0,
tpCount: 0,
showTP: false,
Cityshow: false,
loading: true, // 是否显示骨架屏组件
defaultSelected: [],
value1: '',
value2: '',
value3: '',
game: [],
defaultIndex: [0, 0, 0],
filterData: [
[{
label: '推荐',
value: '',
}],
[{
label: '服务热度',
value: '0',
},
{
label: '从高到低',
value: '1',
},
{
label: '从低到高',
value: '2',
}
],
[{
label: '距离',
value: '0',
},
{
label: '从远到近',
value: '2',
},
{
label: '从近到远',
value: '1',
}
],
],
list: [{
name: '综合',
id: 1
}, {
name: '距离',
id: 2
}, {
name: '销量',
id: 3
}, {
name: '好评',
id: 4
}],
listIndex: 0,
city: '请选择城市',
orderList: [],
page: 1,
limit: 10,
token: '',
XCXIsSelect: '否',
isVip: false,
showModal: true,
arr: [],
tab: '',
cityList: [],
tablist: [],
tabIndex: 0,
orderIndex: 0,
current: 0,
myId: uni.getStorageSync('userId') ? uni.getStorageSync('userId') : '',
//地图相关
latitude: '43.86487',
longitude: '',
address: '',
mapScale: 16, // 地图默认放大倍数
markers: [], // 地图上markers列表
cmap: null, //当前的map对象
amap: null,
infoWindow: null,
marker: null,
socketConnect: null,
pointMap: {}, //点map
pointThread: null,
massageTypeId: null,
currentMarkerIndex: -1,
showPopup: false,
}
},
onLoad(e) {
console.log(e.massageTypeId)
let that = this
that.massageTypeId = e.massageTypeId
//that.massageTypeId = e.massageTypeId;
// that.getLocation();//低精度,快就完事了
// that.getLocation(true);//高精度,慢慢查询
uni.getLocation({
type: 'gcj02',
geocode: true, //设置该参数为true可直接获取经纬度及城市信息
highAccuracyExpireTime: 500,
success: function(res) {
console.log(res, '地理位置')
that.latitude = res.latitude
that.longitude = res.longitude
uni.setStorageSync('latitude', res.latitude)
uni.setStorageSync('longitude', res.longitude)
if (that.amap) {
that.amap.setCenter(new AMap.LngLat(res.latitude, res.longitude));
}
if (that.infoWindow) {
that.infoWindow.setPosition(new TMap.LatLng(res.latitude, res.longitude));
}
that.page = 1
that.getTypeList();
},
fail: function(e) {
console.log('获取地址失败1', e)
// #ifdef APP-PLUS
that.checkPermission();
// #endif
}
})
// 获取邀请码保存到本地
if (e.invitation) {
that.$queue.setData('inviterCode', e.invitation);
}
if (this.myId) {
that.$Request.getT('/app/common/type/235').then(res => { //报名成功通知
if (res.code == 0) {
if (res.data && res.data.value) {
that.arr.push(res.data.value)
}
}
})
that.$Request.getT('/app/common/type/236').then(res => { //活动即将开始提醒
if (res.code == 0) {
if (res.data && res.data.value) {
that.arr.push(res.data.value)
}
}
})
}
},
onShow() {
let that = this
that.getKTCityList();
that.XCXIsSelect = this.$queue.getData("XCXIsSelect");
that.city = uni.getStorageSync('city') ? uni.getStorageSync('city') : '请选择城市'
that.getTpCount();
that.getTpMy();
that.token = uni.getStorageSync('token')
// if (uni.getStorageSync('token')) {
if (that.latitude && that.longitude) {
that.page = 1
that.getlist()
} else {
uni.getLocation({
type: 'gcj02',
highAccuracyExpireTime: 500,
geocode: true, //设置该参数为true可直接获取经纬度及城市信息
success: function(res) {
console.log(res, '地理位置')
that.latitude = res.latitude
that.longitude = res.longitude
that.page = 1
that.getTypeList();
// that.getlist()
},
fail: function() {
console.log('获取地址失败2')
}
})
}
// }
that.myId = uni.getStorageSync('userId')
// console.log(that.showModal, '------', that.myId)
// #ifdef MP-WEIXIN
//订阅
if (that.myId) {
that.getIsVip()
if (this.showModal) {
// this.openMsg()
}
}
// #endif
},
onReady() {
console.log('this ->', this, uni);
this.initMap();
//this.initMapPointThread();
},
onUnload() {
//this.closeSocket();
},
methods: {
showTips() {
uni.showToast({
title: '理疗师已下线',
icon: 'none'
})
},
onClickItem(e) {
if (this.current != e) {
this.current = e;
}
},
showCityList() {
// #ifdef APP-PLUS
if (this.latitude === '' || this.longitude === '') {
this.checkPermission();
return;
}
// #endif
this.Cityshow = true;
},
async checkPermission() {
let status = permision.isIOS ? await permision.requestIOS('location') : await permision.requestAndroid(
'android.permission.ACCESS_FINE_LOCATION');
if (status === null || status === 1) {
status = 1;
} else if (status === 2) {
uni.showModal({
content: "系统定位已关闭",
confirmText: "确定",
showCancel: false,
success: function(res) {}
})
} else if (status.code) {
uni.showModal({
content: status.message
})
} else {
uni.showModal({
title: '定位服务已关闭',
content: "您需要打开定位权限,否则我们将无法获得到您附近的项目服务,导致我们无法为您提供服务,请到>设置>隐私>定位服务>中开启【盛安到家】定位权限",
confirmText: "设置",
success: function(res) {
if (res.confirm) {
permision.gotoAppSetting();
}
}
})
}
return status;
},
saveImgss(imgs, index) {
console.log(imgs, index)
// let that = this
let imgArr = imgs
// this.imgArr.push(imgs);
// console.log(this.imgArr)
// //预览图片
uni.previewImage({
urls: imgArr,
current: imgArr[index]
});
},
saveImgs(imgs) {
let imgArr = [];
imgArr.push(imgs);
// //预览图片
uni.previewImage({
urls: imgArr,
current: 0
});
},
saveTP() {
if (!this.token) {
uni.navigateTo({
url: '/pages/public/login'
});
return;
}
let userId = this.$queue.getData('userId');
let userName = this.$queue.getData('userName');
this.$queue.showLoading('投票中...');
this.$Request.postJson('/app/message/insertMessage', {
state: 11,
content: this.city,
userName: userName,
userId: userId
})
.then(res => {
if (res.code === 0) {
uni.showToast({
title: '投票成功!'
});
this.getTpCount();
this.getTpMy();
} else {
uni.hideLoading();
uni.showModal({
showCancel: false,
title: '投票失败',
content: res.msg
});
}
});
},
getTpMy() {
this.$Request.getT('/app/message/selectMessageByUserId?page=1&limit=1&state=11').then(res => {
if (res.code == 0) {
if (res.data && res.data.list && res.data.list.length > 0) {
this.tpSel = 1;
} else {
this.tpSel = 2;
}
}
});
},
getTpCount() {
this.$Request.getT('/app/message/selectCityCount?city=' + this.city).then(res => {
if (res.code == 0) {
this.tpCount = res.data ? res.data : 0;
}
});
},
getCity(e) {
console.log(e[0].label);
this.city = e[0].label;
uni.setStorageSync('city', this.city)
this.getKTCityList();
this.page = 1
this.getlist()
},
getKTCityList() {
let cityName = uni.getStorageSync('city') ? uni.getStorageSync('city') : '请选择城市'
if (cityName === '请选择城市') {
return;
}
this.$Request.getT('/app/trip/selectTripList').then(res => {
if (res.code == 0) {
this.cityList = [];
let isOpen = false
res.data.forEach((d, index) => {
if (cityName === d.city) {
isOpen = true;
}
let data = {}
data.label = d.city
data.value = index
this.cityList.push(data);
});
if (!isOpen) {
debugger;
this.orderList = []
this.showTP = true;
// uni.showToast({
// title: '当前城市暂未开通,请切换城市',
// duration: 2000,
// icon: 'none'
// });
} else {
this.showTP = false;
}
}
});
},
getTypeList() {
this.$Request.get("/app/dict/list", {
type: '服务类型'
}).then(res => {
if (res.code == 0) {
if (res.data) {
this.tablist = res.data
this.tabIndex = res.data[0].id;
this.page = 1;
this.getlist()
//开启地图线程
this.initMapPointThread();
}
}
});
},
// selectCity(longitude, latitude) {
// this.$Request.get('/app/Login/selectCity?lat=' + latitude + '&lng=' + longitude).then(res => {
// if (res.code == 0) {
// // this.city = res.data.city ? res.data.city : '未知'
// // uni.setStorageSync('city', res.data.city)
// let data = {
// num: 1,
// size: 10
// }
// this.getData(data)
// }
// });
// },
tanChange(index, item) {
this.orderIndex = index
this.tabIndex = item.id
this.page = 1
this.getlist()
},
// 开启订阅消息
openMsg() {
console.log('订阅消息')
var that = this
uni.getSetting({
withSubscriptions: true, //是否获取用户订阅消息的订阅状态默认false不返回
success(ret) {
if (ret.subscriptionsSetting.itemSettings) {
uni.setStorageSync('sendMsg', true)
uni.openSetting({ // 打开设置页
success(rea) {
console.log(rea.authSetting)
}
});
} else { // 用户没有点击“总是保持以上,不再询问”则每次都会调起订阅消息
console.log(99999)
uni.setStorageSync('sendMsg', false)
uni.showModal({
title: '提示',
content: '为了更好的体验,请绑定消息推送',
confirmText: '确定',
cancelText: '取消',
success: function(res) {
if (res.confirm) {
wx.requestSubscribeMessage({
tmplIds: that.arr,
success(re) {
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
// uni.setStorageSync('sendMsg', true)
}
},
fail: (res) => {
console.log(res)
}
})
// uni.setStorageSync('sendMsg', true)
console.log('确认')
that.showModal = false
} else if (res.cancel) {
console.log('取消')
// uni.setStorageSync('sendMsg', false)
that.showModal = true
}
}
})
}
}
})
},
getIsVip() {
this.$Request.get("/app/UserVip/isUserVip").then(res => {
if (res.code == 0) {
this.isVip = res.data
uni.setStorageSync('isVIP', res.data)
}
});
},
onSearch(e) {
// this.artificerName = e;
this.page = 1;
this.getlist()
},
getlist() {
if (this.city === '请选择城市') {
return;
}
if (this.tabIndex == 0) {
return;
}
// let index = this.list[this.listIndex].id
let index = 2
let data = {
// id: curTab,
artificerName: this.artificerName,
classifyId: this.tabIndex,
page: this.page,
limit: this.limit,
// massageTypeId: this.massageTypeId,
// condition: this.value1, //智能优选
// authentication: this.value2, //不限男女
by: index, //价格
latitude: this.latitude,
longitude: this.longitude,
city: this.city
}
// console.log(data)
this.$Request.get("/app/artificer/selectArtificerList", data).then(res => {
this.loading = false;
if (res.code == 0) {
for (var i = 0; i < res.data.list.length; i++) {
if (res.data.list[i].lifePhoto) {
res.data.list[i].lifePhoto = res.data.list[i].lifePhoto.split(',')
}
if (res.data.list[i].distance > 1000) {
res.data.list[i].distance = (res.data.list[i].distance / 1000).toFixed(1) +
'km'
} else {
res.data.list[i].distance = (res.data.list[i].distance).toFixed(1) + 'm'
}
}
if (this.page == 1) {
this.orderList = res.data.list
} else {
this.orderList = [...this.orderList, ...res.data.list]
}
//加载到地图里
if (this.amap) {
// debugger;
console.log(this.orderList)
if (this.orderList.length > 0) {
let rmap = {};
let onLineArtificerList = this.orderList.filter((item) => item.status == 1);
onLineArtificerList.forEach(x => {
rmap[x.userId] = x.latitude + ',' + x.longitude; //没有给个签到坐标
});
console.log('在orderList初始化', JSON.parse(JSON.stringify(rmap)));
this.pointMap = rmap;
this.creatMarker(rmap);
}
}
}
uni.stopPullDownRefresh();
})
},
// 切换菜单
tabChange() {
if (uni.getStorageSync('sendMsg')) {
console.log('授权+1')
wx.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
console.log(JSON.stringify(re), 111111111111)
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
// console.log(re)
}
},
fail: (res) => {
// console.log(res)
}
})
}
this.defaultIndex = [0, 0, 0]
// this.$refs.uDropdown.close();
this.page = 1
this.getlist()
},
// 筛选
change(index) {
// this.value1 = e[0][0].value
// this.value2 = e[1][0].value
// this.value3 = e[2][0].value
this.listIndex = index
this.page = 1
this.getlist()
},
// 选择城市
goSelectCity() {
// uni.navigateTo({
// url: '/pages/index/citys/citys'
// });
let that = this
uni.chooseLocation({
success: function(res) {
console.log('位置名称:' + res.name);
console.log('详细地址:' + res.address);
console.log('纬度:' + res.latitude);
console.log('经度:' + res.longitude);
that.latitude = res.latitude
that.longitude = res.longitude
uni.setStorageSync('latitude', res.latitude)
uni.setStorageSync('longitude', res.longitude)
that.selectCity(that.longitude, that.latitude);
}
});
},
selectCity(longitude, latitude) {
this.$Request.get('/app/Login/selectCity?lat=' + latitude + '&lng=' + longitude).then(res => {
if (res.code == 0) {
this.city = res.data.city ? res.data.city : '未知'
uni.setStorageSync('city', res.data.city)
this.page = 1
this.getlist()
}
});
},
// 乐享低价
goLowTaking() {
uni.navigateTo({
url: '/pages/index/order/lowTaking'
});
},
// 跳转游戏列表
goNav(url) {
console.log(url, '1111112333')
if (uni.getStorageSync('sendMsg')) {
console.log('授权+1')
wx.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
console.log(JSON.stringify(re), 111111111111)
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
if (url.indexOf('/pages/') !== -1) {
uni.navigateTo({
url
});
} else {
//#ifndef H5
uni.navigateTo({
url: '/pages/index/webView?url=' + url
});
//#endif
//#ifdef H5
window.location.href = url;
//#endif
}
},
// 跳转搜索
goSearch(index) {
if (uni.getStorageSync('sendMsg')) {
console.log('授权+1')
wx.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
// console.log(JSON.stringify(re), 111111111111)
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
uni.navigateTo({
url: '/pages/index/search/index?index=' + index
});
},
// 跳转订单
goOrder(e) {
console.log('授权', uni.getStorageSync('sendMsg'))
if (uni.getStorageSync('sendMsg')) {
console.log('授权+1')
wx.requestSubscribeMessage({
tmplIds: this.arr,
success(re) {
console.log(JSON.stringify(re), 111111111111)
var datas = JSON.stringify(re);
if (datas.indexOf("accept") != -1) {
console.log(re)
}
},
fail: (res) => {
console.log(res)
}
})
}
if (this.token) {
uni.navigateTo({
url: '/pages/therapist/orderDetail?artificerId=' + e.artificerId + "&classifyId=" + this
.tabIndex
});
} else {
uni.navigateTo({
url: '/pages/public/login'
});
}
},
//地图初始化,
getLocation(isHighAccuracy = false) {
console.log('获取地理位置,精度:', isHighAccuracy);
let that = this;
//获取地理坐标
uni.getLocation({
// type: 'wgs84',
type: 'gcj02',
highAccuracyExpireTime: isHighAccuracy ? 5000 : 500,
isHighAccuracy,
success: function(res) {
let longitude = res.longitude;
let latitude = res.latitude;
console.log('当前位置的经度:' + longitude);
console.log('当前位置的纬度:' + latitude);
getApp().globalData['longitude'] = longitude;
getApp().globalData['latitude'] = latitude;
console.log('定位成功', latitude, longitude);
if (that.amap) {
uni.amap.setCenter([longitude, latitude])
}
},
fail(res) {
console.log('定位失败!', res);
}
});
//读取缓存里面的经纬度
let longitude = getApp().globalData['longitude'] || 0;
let latitude = getApp().globalData['latitude'] || 0;
return {
latitude,
longitude
};
},
initMap() {
let amap = webMap.creatAMap('txMapContainer');
uni.amap = amap;
this.amap = amap;
let that = this;
setTimeout(() => {
uni.hideLoading();
this.current = 0;
uni.getLocation({
// type: 'wgs84',
type: 'gcj02',
highAccuracyExpireTime: 3000,
isHighAccuracy: true,
success: function(res) {
let longitude = res.longitude;
let latitude = res.latitude;
console.log('当前位置的经度:' + longitude);
console.log('当前位置的纬度:' + latitude);
console.log('定位成功', latitude, longitude);
if (amap) {
uni.amap.setCenter([longitude, latitude])
}
},
fail(res) {
console.log('定位失败!', res);
}
});
if (that.orderList.length > 0) {
let rmap = {};
let onLineArtificerList = this.orderList.filter((item) => item.status == 1);
onLineArtificerList.forEach(x => {
rmap[x.userId] = x.latitude + ',' + x.longitude; //没有给个签到坐标
});
console.log('在initMap初始化', JSON.parse(JSON.stringify(rmap)));
this.pointMap = rmap;
that.creatMarker(rmap);
}
}, 500);
},
creatMarker(map) {
let that = this;
webMap.addMarker(uni.amap, map, this.orderList, (e, udata) => {
that.currentMarkerIndex = udata.userId;
that.showPopup = true;
});
},
updateMarker(map) {
this.creatMarker(map);
},
getUserId() {
return this.myId;
},
getBusinessId() {
// return '12345678900987654321';
//return this.massageTypeId;
return this.tabIndex;
// return '98';
},
getOrderByCurrentMarkerIndex(key = this.currentMarkerIndex) {
return ((this.orderList || []).find(x => x.userId == key) || {});
},
creatSocket() {
let deviceId = this.getBusinessId();
let socketConnect = uni.connectSocket({
url: commonConfig.WS_UPLOAD_MAP_PATH + deviceId,
data() {
return {
msg: ''
}
},
header: {
'content-type': 'application/json',
// 'token': token
},
method: 'GET',
success(res) {
// 这里是接口调用成功的回调,不是连接成功的回调,请注意
// uni.showLoading({
// title: '连接成功!'
// });
},
fail(err) {
// 这里是接口调用失败的回调,不是连接失败的回调,请注意
// uni.showLoading({
// title: '连接失败!'
// });
}
});
uni.onSocketOpen((res) => {
// uni.hideLoading()
// uni.showToast({
// icon: 'none',
// title: '连接成功'
// })
console.log('onOpen', res);
});
uni.onSocketError((err) => {
// this.connecting = false
// this.connected = false
// uni.hideLoading()
// uni.showModal({
// content: '网络较差,请稍后再试',
// showCancel: false
// })
console.log('onError', err);
});
uni.onSocketMessage((res) => {
let that = this;
console.log('onMessage', res)
let datas = JSON.parse(res.data)
// let data = {
// chat: {
// userHead: '../../static/logo.png'
// },
// content: datas.content,
// type: datas.type,
// sendType: datas.sendType
// }
// that.ListItem.push(data);
//解析点
this.pointMap = {};
switch (datas.type) {
case 'getCoordinate': {
console.log('坐标包:', JSON.parse(JSON.stringify(datas.data)));
let map = {};
let rmap = {};
let onLineArtificerList = this.orderList.filter((item) => item.status == 1);
onLineArtificerList.forEach(x => {
map[x.userId] = x;
let zb = datas.data[x.userId];
if (!zb) {
//datas.data[x.userId] = x.latitude + ',' + x.longitude; //没有给个签到坐标
rmap[x.userId] = x.latitude + ',' + x.longitude; //没有给个签到坐标
} else {
rmap[x.userId] = zb;
}
});
// let data = datas.data;
// let rdata = {};
// data.forEach(x => rdata[x.userId]);
//rmap = datas.data; //debug
console.log('坐标最终结果:', JSON.parse(JSON.stringify(rmap)));
this.pointMap = rmap;
that.creatMarker(rmap);
break;
}
default: {
}
}
});
uni.onSocketClose((res) => {
console.log('onClose', res)
console.log('2 - 关闭触发', uni.pointThread)
//this.closeSocket();
this.socketConnect = null;
this.pointThread = null;
uni.pointThread = null;
uni.userSocketConnect = null;
});
this.socketConnect = socketConnect;
uni.userSocketConnect = socketConnect;
},
sendMsg(msg) {
uni.sendSocketMessage({
data: JSON.stringify(msg),
success: (...e) => {
console.log('发送成功!', ...e);
},
fail: (...e) => {
console.log('发送失败!', ...e);
},
});
},
closeSocket() {
console.log('2-关闭 - closeSocket')
uni.closeSocket();
//temp1.pointThread
clearInterval(uni.pointThread);
},
initMapPointThread() {
let that = this;
//创建连接
if (!that.socketConnect) {
this.closeSocket();
//that.socketConnect = uni.userSocketConnect;
}
if (uni.userSocketConnect) {
this.closeSocket()
//that.socketConnect = uni.userSocketConnect;
}
setTimeout(x => {
console.log('重新开始');
that.creatSocket();
//开始循环
setTimeout(x => {
that.forSendMsg();
}, 500);
}, 500)
},
forSendMsg() {
let that = this;
if (!that.mapPointThreadIsRun) {
that.sendMsgFn();
let pointThread = setInterval(() => {
that.sendMsgFn();
}, 3 * 60 * 1000); //3 * 60 * 1000
this.pointThread = pointThread;
uni.pointThread = pointThread;
}
},
sendMsgFn() {
let that = this;
let userId = that.getUserId();
let businessId = that.getBusinessId();
let msg = {
sendType: "getCoordinate",
userId,
businessId,
rkey: `map:location:${businessId}:*`
}
that.sendMsg(msg);
},
},
onReachBottom: function() {
this.page = this.page + 1;
this.getlist()
},
onPullDownRefresh: function() {
this.page = 1;
this.getlist()
},
}
</script>
<style lang="scss">
page {
background-color: #F7F7F7;
}
.jishi_name {
max-width: 80rpx;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
.zz_view {
color: #333333;
font-size: 24rpx;
padding: 6rpx 10rpx;
border-radius: 10rpx;
}
.zpmore_view {
position: absolute;
bottom: -20rpx;
left: 14rpx;
color: #f9f3d3;
background: linear-gradient(to right, #0a0c16, #4d4d53);
width: 130upx;
text-align: center;
border-radius: 30rpx;
height: 42rpx;
line-height: 42rpx;
font-size: 24rpx;
margin-left: 10rpx;
}
.byy_view {
background: #ebebeb;
width: 100upx;
text-align: center;
border-radius: 50rpx;
height: 40rpx;
line-height: 40rpx;
font-size: 24rpx;
color: #000000;
// border: 3upx solid #999999;
margin-top: 6rpx;
margin-left: 40rpx;
}
.kfw_view {
background: #ffaa00;
width: 100upx;
text-align: center;
border-radius: 50rpx;
height: 40rpx;
line-height: 40rpx;
font-size: 24rpx;
color: #FFFFFF;
margin-top: 6rpx;
margin-left: 40rpx;
}
.kyy_view {
background: #096f4b;
width: 100upx;
text-align: center;
border-radius: 50rpx;
height: 40rpx;
line-height: 40rpx;
font-size: 24rpx;
color: #FFFFFF;
margin-top: 6rpx;
margin-left: 40rpx;
}
.bg {
background: #FFFFFF;
}
.ytp_view {
background: #e3e3e3;
width: 400rpx;
border-radius: 10rpx;
font-size: 28rpx;
text-align: center;
height: 80rpx;
line-height: 80rpx;
color: #848484;
margin-top: 40rpx;
}
.tp_view {
background: #ee6c54;
width: 400rpx;
border-radius: 10rpx;
font-size: 28rpx;
text-align: center;
height: 80rpx;
line-height: 80rpx;
color: #FFFFFF;
margin-top: 40rpx;
}
.sticky-tabs {
z-index: 990;
position: sticky;
top: var(--window-top);
// background-color: #fff;
}
/* // 使用mescroll-uni,则top为0 */
.mescroll-uni,
/deep/.mescroll-uni {
.sticky-tabs {
top: 0;
}
}
.demo-tip {
padding: 18upx;
font-size: 24upx;
text-align: center;
}
.line_s {
display: inline-flex;
width: 10rpx;
height: 10rpx;
background: #1AD566;
border-radius: 50%;
margin-right: 10rpx;
}
.line_x {
display: inline-flex;
width: 10rpx;
height: 10rpx;
background: #000000;
border-radius: 50%;
margin-right: 10rpx;
}
.box {
// border: 3rpx solid #005dff;
background: #E8FAE1;
color: #096f4b;
padding: 5rpx 15rpx;
font-size: 26rpx;
letter-spacing: 2rpx;
border-radius: 8rpx;
// margin-top: 10rpx;
margin-right: 8upx;
}
.actve {
font-size: 30rpx;
font-family: PingFang SC;
font-weight: 800;
color: #20C675;
}
.tabview1 {
// width: 686upx;
// height: 100upx;
background: #FFFFFF;
// z-index: 99;
// display: flex;
// line-height: 100upx;
.tabview {
// width: 686upx;
// // height: 100upx;
border-radius: 24rpx 24rpx 0 0;
// margin-top: -50upx;
// z-index: 99;
display: flex;
line-height: 100upx;
.tabItem_sel {
font-size: 32upx;
font-family: PingFang SC;
font-weight: 800;
color: #ffffff;
background: linear-gradient(to right, #223845, #00a85b);
flex: 1;
text-align: center;
}
.tabItem {
font-size: 32upx;
font-family: PingFang SC;
color: #333333;
flex: 1;
text-align: center;
}
}
.tabsx {
width: 686upx;
border-radius: 24rpx;
padding-bottom: 10rpx;
display: flex;
align-items: center;
justify-content: space-between;
padding: 20rpx 30rpx;
font-size: 26rpx;
.active {
color: #20C675;
font-size: 30rpx;
font-weight: bold;
}
}
}
.aa {
background: linear-gradient(to right, #223845, #00a85b);
width: 46px;
text-align: center;
height: 24px;
line-height: 24px;
margin-left: 4px;
color: #ffffff;
box-shadow: 0 0 3px #dddddd;
border-radius: 4px;
}
.bb {
width: 46px;
text-align: center;
height: 24px;
line-height: 24px;
margin-left: 4px;
color: #666666;
border-radius: 4px;
background-color: #f7f7f7;
}
//地图标点样式
/deep/.custom-content-marker {
width: 70px;
height: 70px;
.marker_border {
//border: black solid;
width: 60px;
height: 60px;
padding: 5px;
background: white;
box-shadow: 0px 5px 10px #888888;
border-radius: 50%;
}
.marker_foot {
// height: 50px;
// width: 50px;
// background: black;
// transform: rotate(45deg);
// position: absolute;
// top: 50px;
// overflow: hidden;
}
}
/deep/.custom-content-marker img {
width: 100%;
height: 100%;
border-radius: 50%;
}
</style>