566 lines
14 KiB
Vue
566 lines
14 KiB
Vue
<template>
|
||
<view class="nearby">
|
||
<view class="select_box">
|
||
<picker @change="changeType" :value="typeIndex" :range="typeList">
|
||
<view class="sel_left">
|
||
{{typeList[typeIndex] ? typeList[typeIndex] : '全部'}}
|
||
<image :src="BASE_IMG_URL+'newxia.png'" class="xiaimg" mode="scaleToFill"></image>
|
||
</view>
|
||
</picker>
|
||
<picker @change="changeNear" :value="nearIndex" :range="nearList" :range-key="'name'">
|
||
<view class="sel_left">
|
||
{{nearList[nearIndex] ? nearList[nearIndex].name : '附近'}}
|
||
<image :src="BASE_IMG_URL+'newxia.png'" class="xiaimg" mode="scaleToFill"></image>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="map_show" :style="{height:isFullScreen ? mapHeight : '400rpx'}">
|
||
<map style="width: 750rpx; " :style="{height:isFullScreen ? mapHeight : '400rpx'}" :latitude="latitude" :longitude="longitude"
|
||
:markers="covers" @markertap="changeLiInfo"></map>
|
||
</view>
|
||
<view class="kehu-btn" v-show="isFullScreen" @click="isFullScreen = false">
|
||
查看详情
|
||
</view>
|
||
<view v-show="!isFullScreen" class="position">
|
||
<view class="xiawarp" @click="isFullScreen = true">
|
||
<image :src="BASE_IMG_URL+'xia_a.png'" class="xiaimg" mode="scaleToFill"></image>
|
||
</view>
|
||
<view class="map_rim">
|
||
<view>[当前位置]{{address}}</view>
|
||
<image :src="BASE_IMG_URL+'ydw.png'" class="weizhiimg" mode="scaleToFill"></image>
|
||
</view>
|
||
<view class="" style="padding:24rpx 30rpx">
|
||
<u-search @change="searchName" placeholder="请输入搜索关键词" />
|
||
</view>
|
||
|
||
<scroll-view scroll-y="true" class="scroll" :style="{height:height}">
|
||
<view v-if="showList" style="padding-bottom:calc(env(safe-area-inset-bottom) / 2)">
|
||
<view class="map_group" v-for="(item,index) in list" :key="index">
|
||
<view class="name_li">
|
||
<view class="name">
|
||
{{item.name}}
|
||
<text style="color:#008EFF;font-size:22rpx;margin-left:10rpx;" v-if="item.owner_staff_id > 0">归属人({{item.owner_staff.name}})</text>
|
||
</view>
|
||
<view class="status" v-if="item.follow">{{item.follow}}</view>
|
||
</view>
|
||
<view class="text">距离{{item.juli}} ｜ {{item.address_detail?item.address_detail:''}}</view>
|
||
<view class="text">跟进时间：{{item.next_time}}</view>
|
||
<view class="bntlist">
|
||
<view class="anniu luxian" @click="lookMap(item)">查看路线</view>
|
||
<view class="anniu" style="color:#008EFF" v-if="item.owner_staff_id > 0" @click="toMore(item.id)">查看详情</view>
|
||
<view class="anniu lingqu" style="color:#008EFF" v-else @click="toGroupCompany(item)">领取</view>
|
||
</view>
|
||
</view>
|
||
<u-empty v-if="list.length == 0" text="暂无更多"></u-empty>
|
||
</view>
|
||
<view v-else>
|
||
<view class="backlist" @click="backList">返回列表</view>
|
||
<view class="map_group">
|
||
<view class="name_li">
|
||
<view class="name">{{liInfo.name}} <text style="color:#008EFF;font-size:22rpx;margin-left:10rpx;" v-if="item.owner_staff_id > 0">归属人({{item.owner_staff.name}})</text></view>
|
||
<view class="status" v-if="liInfo.follow">{{liInfo.follow}}</view>
|
||
</view>
|
||
<view class="text">距离{{liInfo.juli}} ｜ {{liInfo.address_detail?liInfo.address_detail:''}}</view>
|
||
<view class="text">跟进时间：{{liInfo.next_time}}</view>
|
||
<view class="bntlist">
|
||
<view class="anniu luxian" @click="lookMap(liInfo)">查看路线</view>
|
||
<view class="anniu" style="color:#008EFF" v-if="liInfo.owner_staff_id > 0" @click="toMore(liInfo.id)">查看详情</view>
|
||
<view class="anniu lingqu" style="color:#008EFF" v-else @click="toGroupCompany(liInfo)">领取</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import { BASE_IMG_URL } from '@/util/api.js'
|
||
import uniTabbar from '@/components/tabbar/tabbar.vue'
|
||
import { netNearKehuList } from '@/api/index.js'
|
||
import { netReceiveKehu } from '@/api/kehu.js'
|
||
import { netAgentList } from '@/api/clues.js'
|
||
import { netMapKey } from '@/api/login.js'
|
||
var QQMapWX;
|
||
var qqmapsdk;
|
||
|
||
export default {
|
||
components:{
|
||
uniTabbar
|
||
},
|
||
data() {
|
||
return {
|
||
BASE_IMG_URL:BASE_IMG_URL,
|
||
tipNumber:null,
|
||
latitude: '',
|
||
longitude: '',
|
||
covers: [],
|
||
typeList:['全部客户','我的客户','下属负责的客户'],
|
||
typeIndex:null,
|
||
nearList:[
|
||
{id:0,name:'附近1KM',num:1},
|
||
{id:1,name:'附近3KM',num:3},
|
||
{id:2,name:'附近5KM',num:5},
|
||
{id:3,name:'附近10KM',num:10},
|
||
{id:4,name:'附近30KM',num:30},
|
||
{id:5,name:'附近200KM',num:200},
|
||
{id:6,name:'附近400KM',num:400},
|
||
{id:7,name:'附近600KM',num:600},
|
||
{id:8,name:'附近800KM',num:800},
|
||
{id:9,name:'全部',num:1000000},
|
||
],
|
||
nearIndex:2,
|
||
showMask:false,
|
||
maskType:1, //1 全部 2附近
|
||
address:'',
|
||
|
||
list:[],
|
||
showList:true,
|
||
liInfo:{},
|
||
liId:'',
|
||
isFullScreen:true,
|
||
name:'', //搜索
|
||
otherArr:[], //其他人
|
||
// #ifdef H5
|
||
height: 'calc(100vh - env(safe-area-inset-bottom) - 822rpx)',
|
||
// #endif
|
||
// #ifndef H5
|
||
height: '400rpx',
|
||
// #endif
|
||
mapHeight:'400rpx'
|
||
}
|
||
},
|
||
onLoad() {
|
||
//获取设备信息
|
||
uni.getSystemInfo({
|
||
success: (res) => {
|
||
let ratio = 750/res.screenWidth
|
||
let height = res.windowHeight * ratio - 200
|
||
this.mapHeight = height+'rpx'
|
||
let scrollH = res.windowHeight * ratio - 750
|
||
this.height = scrollH+'rpx'
|
||
}
|
||
})
|
||
//获取地图key
|
||
this.getKey()
|
||
},
|
||
onShow() {
|
||
// this.getTip()
|
||
},
|
||
methods: {
|
||
//获取地图key
|
||
getKey() {
|
||
netMapKey().then(res=>{
|
||
if(res.data.map_key){
|
||
QQMapWX = require('../../util/qqmap-wx-jssdk.min.js')
|
||
qqmapsdk = new QQMapWX({
|
||
key: res.data.map_key // 必填
|
||
})
|
||
//获取位置
|
||
this.getAddressinfo()
|
||
}else{
|
||
uni.showToast({
|
||
title:'请在后台配置地图key',
|
||
icon:'none'
|
||
})
|
||
}
|
||
})
|
||
},
|
||
getTip(){
|
||
netAgentList().then(res=>{
|
||
this.tipNumber = res.data.total
|
||
uni.setStorageSync('token',res.data.userinfo.token)
|
||
uni.setStorageSync('roleType',res.data.userinfo.role_type)
|
||
uni.setStorageSync('rules',res.data.userinfo.rules)
|
||
})
|
||
},
|
||
//搜索
|
||
searchName(e) {
|
||
this.name = e
|
||
this.getKehuList()
|
||
},
|
||
getAddressinfo() {
|
||
uni.getLocation({
|
||
// #ifdef H5
|
||
type: 'wgs84',
|
||
// #endif
|
||
// #ifndef H5
|
||
type: 'gcj02',
|
||
// #endif
|
||
isHighAccuracy: true,
|
||
altitude: true,
|
||
success:(res)=>{
|
||
this.longitude = res.longitude
|
||
this.latitude = res.latitude
|
||
let covers = [
|
||
{
|
||
id:0,
|
||
latitude:res.latitude,
|
||
longitude:res.longitude,
|
||
iconPath:'../../static/selfweizhi.png',
|
||
width:20,
|
||
height:20,
|
||
label: {
|
||
content: '自己所在位置',
|
||
bgColor:'#fff',
|
||
fontSize: 12,
|
||
bgColor:'#008EFF',
|
||
color: '#fff',
|
||
padding:5,
|
||
textAlign: 'center',
|
||
borderRadius: 10
|
||
}
|
||
}
|
||
]
|
||
this.covers = covers
|
||
|
||
//获取 客户列表
|
||
this.getKehuList()
|
||
// #ifndef H5
|
||
//地址逆解析
|
||
qqmapsdk.reverseGeocoder({
|
||
location: {
|
||
longitude: res.longitude,
|
||
latitude: res.latitude
|
||
},
|
||
success:(res)=>{
|
||
this.address = res.result.address
|
||
},
|
||
fail:(err)=>{
|
||
console.log('12465',err)
|
||
}
|
||
})
|
||
// #endif
|
||
// #ifdef H5
|
||
this.$jsonp('https://apis.map.qq.com/ws/geocoder/v1',{
|
||
key:key,
|
||
output:'jsonp',
|
||
location:`${res.latitude},${res.longitude}`,
|
||
get_poi:'1'
|
||
}).then(res=>{
|
||
this.address = res.result.address_component.province+res.result.address_component.city+res.result.formatted_addresses.rough
|
||
})
|
||
// #endif
|
||
},
|
||
fail:(err)=>{
|
||
if(err.errMsg == 'getLocation:fail auth deny'){
|
||
uni.showToast({
|
||
title:'请允许使用位置信息',
|
||
icon:'none'
|
||
})
|
||
}
|
||
}
|
||
})
|
||
},
|
||
//获取 列表
|
||
getKehuList() {
|
||
let params = {
|
||
lng: this.longitude,
|
||
lat: this.latitude,
|
||
type: this.typeIndex,
|
||
name: this.name,
|
||
distance: this.nearList[this.nearIndex] ? this.nearList[this.nearIndex].num : ''
|
||
}
|
||
netNearKehuList(params).then(res=>{
|
||
this.list = res.data
|
||
this.handleCover(res.data)
|
||
})
|
||
},
|
||
handleCover(data) {
|
||
data.forEach((ele,index)=>{
|
||
if(ele.type == 3) {
|
||
this.otherArr.push(ele.id)
|
||
}
|
||
let coversArr = []
|
||
coversArr = coversArr.concat(this.covers)
|
||
coversArr.push({
|
||
id:ele.id,
|
||
latitude:ele.lat,
|
||
longitude:ele.lng,
|
||
iconPath:ele.type == 0 ? '../../static/selfweizhi.png' : ele.type == 1 ? '../../static/weizhi.png' : ele.type == 2 ? '../../static/greenweizhi.png' : '../../static/otherweizhi.png',
|
||
width:20,
|
||
height:20,
|
||
label: {
|
||
content: ele.name,
|
||
fontSize: 12,
|
||
bgColor:ele.type == 0 ? '#008EFF' : ele.type == 1 ? '#03aa96' : ele.type == 2 ? '#2cee99' : '#fe1212',
|
||
color: '#fff',
|
||
padding:5,
|
||
textAlign: 'center',
|
||
borderRadius: 10
|
||
}
|
||
})
|
||
this.covers = coversArr
|
||
})
|
||
},
|
||
//点击标记点 触发
|
||
changeLiInfo(e) {
|
||
let id = e.detail.markerId
|
||
if(id == 0 || (this.otherArr.indexOf(id) != -1)) {
|
||
return
|
||
}
|
||
this.isFullScreen = false
|
||
this.showList = false
|
||
this.list.forEach(ele=>{
|
||
if(ele.id == id) {
|
||
this.liInfo = ele
|
||
}
|
||
})
|
||
},
|
||
backList () {
|
||
this.showList = true
|
||
},
|
||
//全部 搜索条件
|
||
showAll() {
|
||
this.showMask = true
|
||
this.maskType = 1
|
||
},
|
||
changeType(e) {
|
||
this.typeIndex = e.detail.value
|
||
this.getKehuList()
|
||
},
|
||
changeNear(e) {
|
||
this.nearIndex = e.detail.value
|
||
this.getKehuList()
|
||
},
|
||
//查看 路线
|
||
lookMap(item) {
|
||
uni.openLocation({
|
||
latitude: Number(item.lat),
|
||
longitude: Number(item.lng),
|
||
success:(res)=>{
|
||
console.log(res)
|
||
},
|
||
fail:(err)=>{
|
||
console.log(err)
|
||
}
|
||
})
|
||
},
|
||
//查看 详情
|
||
toMore(id) {
|
||
uni.navigateTo({
|
||
url: '/pages/index/groupCompany/groupCompany?id='+id+'&type=1'
|
||
})
|
||
},
|
||
toGroupCompany(item) {
|
||
uni.showModal({
|
||
title:'是否确定领取公池客户',
|
||
content:'领取后长时间未跟进，客户将自动转为公共客户',
|
||
success:(res)=>{
|
||
if(res.confirm){
|
||
netReceiveKehu({customer_id:item.id}).then(res=>{
|
||
uni.showToast({
|
||
title:res.msg,
|
||
icon:'none'
|
||
})
|
||
setTimeout(()=>{
|
||
this.getKehuList()
|
||
let id = item.id
|
||
let arr = this.list
|
||
arr.forEach(ele=>{
|
||
if(ele.id == id){
|
||
this.liInfo = ele
|
||
}
|
||
})
|
||
},2000)
|
||
})
|
||
}
|
||
}
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
page{
|
||
background:#fff;
|
||
}
|
||
</style>
|
||
<style scoped lang="scss">
|
||
.select_box{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
height:110rpx;
|
||
background:#fff;
|
||
padding:0 20rpx;
|
||
position: relative;
|
||
.sel_left{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding:0 20rpx;
|
||
width:300rpx;
|
||
height:80rpx;
|
||
border-radius: 25rpx;
|
||
font-size:24rpx;
|
||
color:#333;
|
||
background:#f5f5f5;
|
||
.xiaimg{
|
||
width:20rpx;
|
||
height:30rpx;
|
||
}
|
||
}
|
||
}
|
||
.mask{
|
||
position: absolute;
|
||
width:750rpx;
|
||
top:110rpx;
|
||
bottom:0;
|
||
background:rgba(0,0,0,0.5);
|
||
z-index: 9;
|
||
.maskbox{
|
||
position: absolute;
|
||
left:0;
|
||
top:0;
|
||
width:750rpx;
|
||
background:#fff;
|
||
.leftbox{
|
||
padding:30rpx;
|
||
.leftli{
|
||
padding:20rpx;
|
||
border-bottom:1rpx solid #CCC;
|
||
font-size:24rpx;
|
||
color:#333;
|
||
}
|
||
.leftli_active{
|
||
color:$uni-text-color;
|
||
border-bottom:1rpx solid $uni-text-color;
|
||
}
|
||
}
|
||
.maskbtnli{
|
||
width:750rpx;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
padding:20rpx 0 30rpx;
|
||
.maskbtn{
|
||
width:300rpx;
|
||
height:60rpx;
|
||
border-radius: 30rpx;
|
||
line-height: 60rpx;
|
||
text-align: center;
|
||
font-size:24rpx;
|
||
color:#fff;
|
||
}
|
||
.sure{
|
||
background:$uni-text-color;
|
||
}
|
||
.reset{
|
||
background: $uni-text-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.nearby {
|
||
.map_show {
|
||
width: 750rpx;
|
||
height: 400rpx;
|
||
}
|
||
.kehu-btn{
|
||
width:750rpx;
|
||
height:100rpx;
|
||
padding-bottom: calc(env(safe-area-inset-bottom) / 2);
|
||
background:#fff;
|
||
border-top:1rpx solid #CCC;
|
||
font-size:26rpx;
|
||
color:#666;
|
||
text-align: center;
|
||
line-height: 100rpx;
|
||
color:$uni-text-color;
|
||
}
|
||
.scroll {
|
||
// 487 687
|
||
// height: 500rpx;
|
||
|
||
background:#fff;
|
||
|
||
.backlist{
|
||
font-size:24rpx;
|
||
color:$uni-text-color;
|
||
padding:20rpx;
|
||
}
|
||
.map_group {
|
||
background-color: #fff;
|
||
padding:30rpx;
|
||
border-bottom:1rpx solid #ccc;
|
||
.name_li{
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
.name{
|
||
font-size:32rpx;
|
||
color:#333;
|
||
}
|
||
.status{
|
||
font-size:24rpx;
|
||
color:#fff;
|
||
padding:5rpx 8rpx;
|
||
border-radius: 10rpx;
|
||
background:$uni-text-color;
|
||
}
|
||
}
|
||
.text{
|
||
font-size:24rpx;
|
||
color:#666;
|
||
margin:15rpx 0;
|
||
}
|
||
.bntlist{
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
.anniu{
|
||
width:240rpx;
|
||
height:60rpx;
|
||
border-radius: 30rpx;
|
||
font-size:26rpx;
|
||
color:#fff;
|
||
text-align: center;
|
||
line-height: 60rpx;
|
||
background:#fff;
|
||
border:1px solid $uni-text-color;
|
||
|
||
}
|
||
.luxian{
|
||
background:$uni-text-color;
|
||
border:1px solid $uni-text-color;
|
||
}
|
||
.lingqu{
|
||
background: #fff;
|
||
border:1px solid $uni-text-color;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.xiawarp{
|
||
background:#fff;
|
||
padding:10rpx 0;
|
||
text-align: center;
|
||
.xiaimg{
|
||
width:30rpx;
|
||
height:30rpx;
|
||
}
|
||
}
|
||
.map_rim {
|
||
display: flex;
|
||
padding: 0 20rpx;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
background-color: #fff;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
font-size:24rpx;
|
||
color:#333;
|
||
border: 1rpx solid #EAEAEA;
|
||
.weizhiimg{
|
||
width:30rpx;
|
||
height:30rpx;
|
||
}
|
||
}
|
||
|
||
|
||
}
|
||
</style>
|