sadjv1/anmo-server-uniapp/pages/therapist/therapistList.vue

1756 lines
50 KiB
Vue
Raw Permalink 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="padding-lr padding-tb-sm bg"
style="position: fixed;top: 0rpx;z-index: 999;width: 100%;background: #ffffff;">
<view class="flex justify-between">
<view class="flex justify-between margin-right-sm" @tap="Cityshow = true" style="line-height: 68rpx;">
<image src="../../static/images/index/place.png"
style="width: 34rpx;height: 34rpx;margin-top: 16rpx;"></image>
<view class="localName" style="margin-left: 4rpx;">{{city}}</view>
</view>
<view class="flex justify-between"
style="background-color: #f7f7f7;width: 200rpx;height: 58rpx;line-height: 58rpx;border-radius: 8rpx;">
<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="">
<u-search class="flex-sub" placeholder="请输入服务人员名称及关键词" :focus="false" shape="square"
v-model="artificerName" :show-action="true" :animation="true" bg-color="#F7F7F7" color="#999999"
@search="onSearch()" action-text="搜索" @custom="onSearch()">
</u-search>
</view>
</view>
<view class="content" style="margin-top: 30rpx;">
<view v-show="current === 0">
<view style="margin-top: 180rpx;padding: 0 20rpx;" class="flex text-center flex-wrap">
<view class="margin-bottom-sm bg radius" v-for="(item,index) in orderList" :key='index'
@click.stop="goOrderDetail(item)"
style="box-shadow: 6rpx 10rpx 4px #F5F5F5;width: 100%;padding: 20rpx;"
:id="'userId-' + item.userId">
<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;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
{{item.artificerName}}
</view>
</view>
<view class="" style="width: 150rpx;">
<view class="flex align-center" v-if="item.tripWay != 3 && numIndex != 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>
</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;">
<image src="../../static/images/shangjia.png"
style="width: 26rpx;height: 26rpx;"></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: 24rpx;height: 24rpx;">
</image>
<text class="zz_view"
v-if="item.status == 1 && item.time && numIndex == 1">最早可约{{item.time}}
</text>
</view>
<view class="" style="font-size: 24rpx;color: #f49650;font-weight: bold;"
v-if="item.tripWay == 3">
免出行费
</view>
</view>
<view class="text-center text-sm" @tap.stop="goOrder(item)" 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;">
立即预约
</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 class="" style="width: 85%;">
<view class="flex align-center justify-between">
<view class="zz_view" v-if="numIndex == 3">可用余额:{{item.money ? item.money : 0}}</view>
</view>
<view style="width: 100%;display: flex;justify-content: space-between;align-items: center;">
<view v-if="numIndex == 2">
<view class="text-center text-sm" @tap.stop="showPay(item)"
style="background: #096f4b;color: #ffffff;width: 135upx;border-radius: 16upx;line-height: 50upx;">
为TA充值
</view>
</view>
<view v-if="numIndex == 3">
<view class="text-center text-sm"
style="background: #096f4b;color: #ffffff;width: 135upx;border-radius: 16upx;line-height: 50upx;">
立即预约
</view>
</view>
</view>
</view>
</view>
</view>
</view>
<view v-show="current === 1">
<view class="flex text-center flex-wrap"
style="margin-top: 92px; padding: 0px 16px; justify-content: space-between;">
<div id="txMapContainer" style="width: 100%;height: calc(100vh - 140px);">&nbsp;</div>
<!-- 地图地图 -->
</view>
<u-popup v-model="showPopup" mode="bottom" height="" closeable :mask-close-able="false">
<view id="popView">
<!-- 与左侧的一模一样,那边改了,这边同步修改 -->
<!-- <view class="margin-bottom-sm bg radius" v-for="(item,index) in orderList" :key='index' @click.stop="goOrderDetail(item)" style="box-shadow: 6rpx 10rpx 4px #F5F5F5;width: 48%;" :id="'userId-' + item.userId"> -->
<view class="flex align-center" style="padding: 20rpx;">
<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: 70rpx;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;">
{{getOrderByCurrentMarkerIndex().artificerName}}
</view>
</view>
<view class="flex align-center" v-if="getOrderByCurrentMarkerIndex().tripWay != 3 && numIndex != 3"
style="width: 150rpx;">
<image src="../../static/images/address.png"
style="width: 29rpx;height: 29rpx;"></image>
<view style="color: #333333;margin-left: 4rpx;font-size: 24rpx;">
{{getOrderByCurrentMarkerIndex().distance}}</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>
</view>
<!-- <text style="color: #fff;float: right;font-size: 18rpx;">已服务{{getOrderByCurrentMarkerIndex().ordersCount}}单</text> -->
</view>
<view class="" style="font-size: 26rpx;color: #f49650;font-weight: bold;"
v-if="getOrderByCurrentMarkerIndex().tripWay == 3">
免出行费
</view>
<view class="flex" style="width: 150rpx;">
<image src="../../static/images/pinglun.png"
style="width: 29rpx;height: 29rpx;"></image>
<view style="margin-left: 10rpx;color: #999;font-size: 26rpx;">
{{getOrderByCurrentMarkerIndex().commentCount ? getOrderByCurrentMarkerIndex().commentCount : 0}}
</view>
</view>
<view class="flex">
<image src="../../static/images/aixin2.png"
style="width: 26rpx;height: 26rpx;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;">
<image src="../../static/images/shangjia.png"
style="width: 26rpx;height: 26rpx;"></image>
<view style="margin-left: 10rpx;color: #999;font-size: 26rpx;">商家</view>
</view>
<view class="flex align-center" style="width: 300rpx;">
<image src="../../static/images/time.png" style="width: 26rpx;height: 26rpx;">
</image>
<text class="zz_view"
v-if="getOrderByCurrentMarkerIndex().status == 1 && getOrderByCurrentMarkerIndex().time && numIndex == 1">最早可约:{{getOrderByCurrentMarkerIndex().time}}
</text>
</view>
</view>
<view class="text-center text-sm" @tap.stop="goOrder(getOrderByCurrentMarkerIndex())" 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: 20rpx;">
立即预约
</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: 20rpx;">
立即预约
</view>
</view>
</view>
<view class="" style="width: 85%;">
<view class="flex align-center justify-between">
<view class="zz_view" v-if="numIndex == 3">可用余额:{{getOrderByCurrentMarkerIndex().money ? getOrderByCurrentMarkerIndex().money : 0}}</view>
</view>
<view style="width: 100%;display: flex;justify-content: space-between;align-getOrderByCurrentMarkerIndex()s: center;">
<view v-if="numIndex == 2">
<view class="text-center text-sm" @tap.stop="showPay(getOrderByCurrentMarkerIndex())"
style="background: #096f4b;color: #ffffff;width: 135upx;border-radius: 16upx;line-height: 50upx;">
为TA充值
</view>
</view>
<view v-if="numIndex == 3">
<view class="text-center text-sm"
style="background: #096f4b;color: #ffffff;width: 135upx;border-radius: 16upx;line-height: 50upx;">
立即预约
</view>
</view>
</view>
</view>
</view>
</u-popup>
<!-- <div style="display: none;"> -->
<!-- </view> -->
<!-- <view><image src="../../../static/logo.png"/></view> -->
<!-- <view>
<image
style="width: 100%;height: 360rpx;border-radius: 10rpx 10rpx 0 0;"
:src="getOrderByCurrentMarkerIndex().artificerImg?getOrderByCurrentMarkerIndex().artificerImg: '../../static/logo.png'"
/>
</view>
<view>姓名:{{getOrderByCurrentMarkerIndex().artificerName}}</view>
<view>
<u-button>查看</u-button>
<u-button>选择</u-button>
</view> -->
<!-- </view>
</div> -->
</view>
</view>
<empty v-if="orderList.length == 0"></empty>
<u-select v-model="Cityshow" :list="cityList" @confirm="getCityData"></u-select>
<view style="position: fixed;z-index: 9999;bottom: 160rpx;" v-if="showTP">
<image src="https://wap.quanmindaojia.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-popup v-model="showpay" mode="bottom">
<view class="popup_pay">
<view style="background-color: #fff;">
<view style="padding: 0 20upx;margin-top: 60rpx;margin-bottom: 20rpx;">
<view class="padding margin-top" style="background: #f4f4f4;">
<view class="text-lg margin-bottom">充值金额</view>
<input type="number" placeholder="请输入充值金额" v-model="price">
<view style="width: 100%;height: 1rpx;background: #e8e8e8;margin-top: 15rpx;"></view>
</view>
<view
style="display: flex;height: 100upx;align-items: center;padding: 20upx 0;justify-content: center;"
v-for="(item,index) in openLists" :key='index'>
<image :src="item.image" style="width: 55upx;height: 55upx;border-radius: 50upx;">
</image>
<view style="font-size: 30upx;margin-left: 20upx;width: 70%;">
{{item.text}}
</view>
<radio-group name="openWay" style="margin-left: 45upx;" @tap='selectWay(item.id)'>
<label class="tui-radio">
<radio color="#096f4b" :checked="openWay === item.id ? true : false" />
</label>
</radio-group>
</view>
</view>
</view>
<view class="pay_btn" @click="pay()">确认支付</view>
</view>
</u-popup>
</view>
<!-- <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';
export default {
components: {
meTabs,
empty,
RenDropdownFilter
},
data() {
return {
Cityshow: false,
cityList: [],
items: ['选项1', '选项2'],
current: 1,
tpSel: 0,
tpCount: 0,
showTP: false,
showpay: false,
price: '',
numIndex: 1,
classifyId: '',
artificerName: '',
loading: true, // 是否显示骨架屏组件
defaultSelected: [],
value1: '',
value2: '',
value3: '',
game: [],
defaultIndex: [0, 0, 0],
filterData: [
[{
label: '智能优选',
value: '',
},
{
label: '距离优先',
value: 3,
},
{
label: '人气优先',
value: 2,
},
{
label: '同城',
value: 1,
}
],
[{
label: '服务',
value: '0',
},
{
label: '从高到低',
value: '1',
},
{
label: '从低到高',
value: '2',
}
],
[{
label: '距离',
value: '0',
},
{
label: '从远到近',
value: '1',
},
{
label: '从近到远',
value: '2',
}
],
],
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: '',
artificerId: '',
openWay: 1,
openLists: [],
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) {
// uni.showLoading({
// title: '加载中...',
// });
let that = this;
that.massageTypeId = e.massageTypeId;
// console.log('-------------1---------------');
// that.getLocation();//低精度,快就完事了
// that.getLocation(true);//高精度,慢慢查询
// console.log('-------------2---------------');
if (e.index) {
this.numIndex = e.index;
if (e.index == 2) {
uni.setNavigationBarTitle({
title: '为TA充值'
})
} else {
uni.setNavigationBarTitle({
title: '我的理疗师'
})
}
} else {
uni.setNavigationBarTitle({
title: '选择理疗师'
})
}
// #ifdef MP-WEIXIN
this.openWay = 1;
this.openLists = [{
image: '../../my/static/icon_weixin.png',
text: '微信',
id: 1
}, {
image: '../../static/images/lingqian.png',
text: '零钱支付',
id: 3
}]
// #endif
// #ifndef MP-WEIXIN
this.openWay = 1;
this.openLists = [{
image: '../../my/static/icon_weixin.png',
text: '微信',
id: 1
}, {
image: '../../my/static/zhifubao.png',
text: '支付宝',
id: 2
}, {
image: '../../static/images/lingqian.png',
text: '零钱支付',
id: 3
}]
// #endif
that.token = uni.getStorageSync('token')
that.city = uni.getStorageSync('city') ? uni.getStorageSync('city') : '请选择城市'
if (e.massageTypeId) {
that.massageTypeId = e.massageTypeId
}
if (e.classifyId) {
that.classifyId = e.classifyId
}
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.cmap) {
// that.cmap.setCenter(new TMap.LatLng(res.latitude, res.longitude));
// }
// if (that.infoWindow) {
// that.infoWindow.setPosition(new TMap.LatLng(res.latitude, res.longitude));
// }
// if(that.amap){
// }
that.page = 1
that.getlist()
},
fail: function(e) {
console.log('获取地址失败',e)
}
})
// 获取邀请码保存到本地
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)
}
}
})
}
// this.getlist()
},
onShow() {
let that = this
that.city = uni.getStorageSync('city') ? uni.getStorageSync('city') : '请选择城市'
that.token = uni.getStorageSync('token')
that.getKTCityList();
that.getTpCount();
that.getTpMy();
if (uni.getStorageSync('token')) {
that.getIsVip()
}
that.myId = uni.getStorageSync('userId')
// #ifdef MP-WEIXIN
//订阅
if (that.myId) {
if (this.showModal) {
// this.openMsg()
}
}
// #endif
},
onReady() {
console.log('this ->', this, uni);
this.initMap();
this.initMapPointThread();
},
onUnload() {
//this.closeSocket();
},
methods: {
onClickItem(e) {
if (this.current != e) {
this.current = e;
}
},
getCityData(e) {
console.log(e[0].label);
this.city = e[0].label;
uni.setStorageSync('city', this.city)
this.getKTCityList();
this.page = 1
this.getlist()
},
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;
}
});
},
getKTCityList() {
this.$Request.getT('/app/trip/selectTripList').then(res => {
if (res.code == 0) {
this.cityList = [];
let isOpen = false
let cityName = uni.getStorageSync('city') ? uni.getStorageSync('city') : '请选择城市'
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) {
this.orderList = []
// this.showTP = true;
} else {
this.showTP = false;
}
}
});
},
showPay(e) {
this.showpay = true
this.artificerId = e.artificerId
},
selectWay: function(id) {
this.openWay = id;
},
// 跳转订单
// goOrder(e) {
// uni.navigateTo({
// url: "/pages/index/order/orderDet?artificerId=" + e.artificerId + '&massageTypeId=' + this
// .massageTypeId + '&tripWay=' + e.tripWay
// })
// },
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
});
},
onSearch(e) {
// this.artificerName = e;
this.page = 1;
this.getlist()
},
// 开启订阅消息
openMsg() {
var that = this
uni.getSetting({
withSubscriptions: true, //是否获取用户订阅消息的订阅状态默认false不返回
success(ret) {
// if (ret.subscriptionsSetting.itemSettings && Object.keys(ret.subscriptionsSetting.itemSettings).length == 2) {
if (ret.subscriptionsSetting.itemSettings) {
uni.setStorageSync('sendMsg', true)
uni.openSetting({ // 打开设置页
success(rea) {
// console.log(rea.authSetting)
}
});
} else { // 用户没有点击“总是保持以上,不再询问”则每次都会调起订阅消息
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)
}
});
},
getlist() {
let index = this.list[this.listIndex].id
let data = {
classifyId: this.classifyId,
artificerName: this.artificerName,
page: this.page,
limit: this.limit,
massageTypeId: this.massageTypeId,
by: index, //价格
latitude: this.latitude,
longitude: this.longitude,
city: this.city
}
if (this.token) {
if (this.numIndex != 3) {
this.$Request.get("/app/artificer/selectArtificerList", data).then(res => {
this.loading = false;
uni.hideLoading()
if (res.code == 0) {
if (this.page == 1) {
this.orderList = [];
}
if (res.data.list.length > 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){
if(this.orderList.length){
let rmap = {};
this.orderList.forEach(x => {
rmap[x.userId] = x.latitude + ',' + x.longitude; //没有给个签到坐标
});
console.log('在orderList初始化',JSON.parse(JSON.stringify(rmap)));
this.pointMap = rmap;
this.creatMarker(rmap);
}
}
} else {
// this.orderList = []
// uni.showToast({
// title: '当前城市暂未开通,请切换城市',
// duration: 2000,
// icon: 'none'
// });
}
uni.stopPullDownRefresh();
}
})
} else {
let userId = this.$queue.getData('userId')
let data = {
userId: userId,
page: this.page,
limit: this.limit
}
this.$Request.get("/app/userMoney/selectUserMoneyArtificer", data).then(res => {
this.loading = false;
uni.hideLoading()
if (res.code == 0) {
if (this.page == 1) {
this.orderList = [];
}
res.data.list.forEach(d => {
if (d.artificer.lifePhoto) {
d.artificer.lifePhoto = d.artificer.lifePhoto.split(',')
}
d.artificer.money = d.money;
this.orderList.push(d.artificer)
});
uni.stopPullDownRefresh();
}
})
}
} else {
uni.hideLoading()
}
},
// 筛选
change(index) {
this.listIndex = index
// this.value1 = e[0][0].value
// this.value2 = e[1][0].value
// this.value3 = e[2][0].value
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
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()
}
});
},
// 跳转游戏列表
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() {
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'
});
},
// 跳转订单
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/index/order/orderDet?artificerId=" + e.artificerId + '&massageTypeId=' + this
.massageTypeId
})
} else {
uni.navigateTo({
url: '/pages/public/login'
});
}
},
goOrderDetail(e) {
if (this.numIndex == 1) {
if (e.status != 1) {
this.$queue.showToast('当前理疗师已下线,请预约其他理疗师!')
return;
}
uni.navigateTo({
url: "/pages/index/order/orderDetail?artificerId=" + e.artificerId + '&massageTypeId=' +
this.massageTypeId
})
} else {
uni.navigateTo({
url: '/pages/therapist/orderDetail?artificerId=' + e.artificerId
});
}
},
pay() {
this.showpay = false;
if (this.price === '') {
this.$queue.showToast('请输入充值金额!')
return;
}
this.$queue.showLoading('支付中...')
let that = this;
if (this.openWay == 1) {
// #ifdef MP-WEIXIN
that.$Request.postT("/app/wxPay/payUserMoneyArtificer", {
artificerId: that.artificerId,
money: that.price,
type: 3
}).then(red => {
if (red.code == 0) {
uni.requestPayment({
provider: 'wxpay',
timeStamp: red.data.timestamp,
nonceStr: red.data.noncestr,
package: red.data.package,
signType: red.data.signType,
paySign: red.data.sign,
success: function(redd) {
uni.hideLoading();
uni.showToast({
title: '充值成功!'
})
},
fail: function(err) {
uni.hideLoading();
that.$queue.showToast(
'支付失败');
}
});
} else {
uni.showToast({
title: red.msg,
icon: 'none'
})
}
});
// #endif
// #ifdef H5
let ua = navigator.userAgent.toLowerCase();
console.log(ua)
if (ua.indexOf('micromessenger') !== -1) {
that.$Request.post("/app/wxPay/payUserMoneyArtificer", {
money: that.price,
artificerId: that.artificerId,
type: 2
}).then(red => {
if (red.code == 0) {
that.callPay(red.data);
} else {
uni.showToast({
title: red.msg,
icon: 'none'
})
}
});
} else {
that.$Request.post("/app/wxPay/payUserMoneyArtificer", {
money: that.price,
artificerId: that.artificerId,
type: 4
}).then(red => {
if (red.code == 0) {
const urlArr = window.location.href;
const hostUrl = urlArr.split("/");
const callBack = hostUrl[0] + "//" + hostUrl[2] + "/";
const url = '&redirect_url=' + callBack + 'my/vip/index';
window.location = red.data.mweb_url + url
} else {
uni.showToast({
title: red.msg,
icon: 'none'
})
}
});
}
// #endif
// #ifdef APP-PLUS
that.$Request.post("/app/wxPay/payUserMoneyArtificer", {
money: that.price,
artificerId: that.artificerId,
type: 1
}).then(red => {
if (red.code == 0) {
console.log(JSON.stringify(red))
that.setPayment('wxpay', JSON.stringify(red
.data));
} else {
uni.showToast({
title: red.msg,
icon: 'none'
})
}
});
// #endif
} else if (this.openWay == 2) {
// #ifdef H5
that.$Request.post("/app/aliPay/payUserMoneyArtificer", {
money: that.price,
artificerId: that.artificerId,
classify: 2
}).then(red => {
if (red.code == 0) {
const div = document.createElement('div')
div.innerHTML = red.data //此处form就是后台返回接收到的数据
document.body.appendChild(div)
document.forms[0].submit()
} else {
uni.showToast({
title: red.msg,
icon: 'none'
})
}
});
// #endif
// #ifdef APP-PLUS
that.$Request.post("/app/aliPay/payUserMoneyArtificer", {
money: that.price,
artificerId: that.artificerId,
classify: 1
}).then(red => {
if (red.code == 0) {
that.setPayment('alipay', red.data);
} else {
uni.showToast({
title: red.msg,
icon: 'none'
})
}
});
// #endif
} else if (this.openWay == 3) {
uni.hideLoading();
uni.showModal({
title: '付款提示',
content: '确认支付' + that.price + '元吗?',
success: function(re) {
if (re.confirm) {
that.$queue.showLoading('支付中...')
// console.log('用户点击确定');
that.$Request.post("/app/userMoney/payUserMoneyArtificer", {
money: that.price,
artificerId: that.artificerId,
classify: 1
}).then(ret => {
uni.hideLoading();
if (ret.code == 0) {
uni.showToast({
title: '充值成功',
icon: 'none'
})
} else {
uni.showToast({
title: ret.msg,
icon: 'none'
})
}
});
}
}
})
}
},
callPay: function(response) {
if (typeof WeixinJSBridge === "undefined") {
if (document.addEventListener) {
document.addEventListener('WeixinJSBridgeReady', this.onBridgeReady(response), false);
} else if (document.attachEvent) {
document.attachEvent('WeixinJSBridgeReady', this.onBridgeReady(response));
document.attachEvent('onWeixinJSBridgeReady', this.onBridgeReady(response));
}
} else {
this.onBridgeReady(response);
}
},
onBridgeReady: function(response) {
let that = this;
if (!response.package) {
return;
}
WeixinJSBridge.invoke(
'getBrandWCPayRequest', {
"appId": response.appid, //公众号名称,由商户传入
"timeStamp": response.timestamp, //时间戳自1970年以来的秒数
"nonceStr": response.noncestr, //随机串
"package": response.package,
"signType": response.signType, //微信签名方式:
"paySign": response.sign //微信签名
},
function(res) {
if (res.err_msg === "get_brand_wcpay_request:ok") {
// 使用以上方式判断前端返回,微信团队郑重提示:
//res.err_msg将在用户支付成功后返回ok但并不保证它绝对可靠。
uni.hideLoading();
uni.showToast({
title: '充值成功!'
})
} else {
uni.hideLoading();
}
WeixinJSBridge.log(response.err_msg);
}
);
},
setPayment(name, order) {
let that = this;
uni.requestPayment({
provider: name,
orderInfo: order, //微信、支付宝订单数据
success: function(res) {
uni.hideLoading();
uni.showToast({
title: '充值成功!'
})
},
fail: function(err) {
uni.hideLoading();
console.log(12)
}
});
},
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;
setTimeout(() => {
uni.hideLoading();
this.current = 0;
if(that.orderList.length){
let rmap = {};
that.orderList.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 '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)),this.orderList);
let map = {};
let rmap = {};
this.orderList.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('1 - 关闭触发', 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('1 - 关闭 - 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;
}
.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;
}
.popup_pay {
width: 100%;
position: relative;
padding-bottom: 45rpx;
}
.pay_btn {
width: 90%;
margin: 0 auto;
text-align: center;
background: linear-gradient(to right, #223845, #00a85b);
height: 80rpx;
border-radius: 40rpx;
color: #ffffff;
line-height: 80rpx;
}
.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;
}
.aa {
background: linear-gradient(to right, #223845, #00a85b);
width: 46px;
text-align: center;
height: 22px;
line-height: 22px;
margin: 4px;
color: #ffffff;
box-shadow: 0 0 6rpx #dddddd;
border-radius: 8rpx;
}
.bb {
width: 46px;
text-align: center;
height: 20px;
line-height: 22px;
margin: 4px;
color: #666666;
}
//地图标点样式
/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>