563 lines
18 KiB
Vue
563 lines
18 KiB
Vue
<template>
|
|
<view class="bodys">
|
|
<view class="status_bar">
|
|
<!-- 这里是状态栏 -->
|
|
</view>
|
|
<view class="head">
|
|
<map id='midMap' ref='midMap' :latitude="latitude" :markers="markList" :longitude="longitude"
|
|
@tap="changeMap" scale="10">
|
|
</map>
|
|
<view class="search">
|
|
<view class="head_border">
|
|
</view>
|
|
<view class="controlss">
|
|
<view class="controlss-back">
|
|
<image src="../../static/img/left.svg" @click="backView" mode=""></image>
|
|
</view>
|
|
<view class="controlss-input" @click="goSearch">
|
|
<input type="text" placeholder="搜索工作的地点" disabled="true" />
|
|
<image src="../../static/img/search.svg" style="margin-left: auto;" mode=""></image>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="controlsPop">
|
|
<view class="listTitle">
|
|
附近零工岗位
|
|
</view>
|
|
<view class="borderbom"></view>
|
|
<scroll-view scroll-y lower-threshold="0" style="height: 92%;" @scrolltolower="upLoad"
|
|
v-if="companyList.length>0">
|
|
<block v-for="(item, index) in companyList" :key="item.id">
|
|
<companyList :companyitem="item" :near="true"></companyList>
|
|
<view class="baddd"></view>
|
|
</block>
|
|
</scroll-view>
|
|
<view class="nothingArea" v-else>
|
|
<image src="../../static/img/pic_notask.svg" mode="" class="nothing"></image>
|
|
<view class="nothingContnt">
|
|
暂无岗位信息
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import companyList from '@/components/companyList/companyList.vue';
|
|
import testData from '@/common/textdata.js';
|
|
import {
|
|
nearMission
|
|
} from '@/api/mission.js';
|
|
import {
|
|
getcoder,
|
|
querySearch
|
|
} from "@/api/map.js";
|
|
|
|
export default {
|
|
components: {
|
|
companyList
|
|
},
|
|
data() {
|
|
return {
|
|
longitude: 116.40,
|
|
latitude: 39.90,
|
|
// key: 'FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI',
|
|
key: 'MTCBZ-WAAWC-H3M22-AL6XI-G4XN6-YZFK5',
|
|
currentPoint: {},
|
|
companyList: [],
|
|
markList: [],
|
|
inpoints: [],
|
|
inputValue: '',
|
|
searchResult: false,
|
|
searchResultList: [],
|
|
page: {
|
|
current: 1,
|
|
size: 10,
|
|
total: 0
|
|
},
|
|
mapCtx: null,
|
|
type: ""
|
|
};
|
|
},
|
|
onLoad: function(option) {
|
|
if (option.item) {
|
|
const item = JSON.parse(decodeURIComponent(option.item));
|
|
var point = {
|
|
target: {
|
|
latitude: item.lat,
|
|
longitude: item.lng
|
|
}
|
|
};
|
|
this.currentPoint = point;
|
|
this.type = 'search';
|
|
}
|
|
},
|
|
onShow: function() {
|
|
if (this.type === 'search') {
|
|
this.changeMap(this.currentPoint);
|
|
} else {
|
|
this.getLocation();
|
|
}
|
|
// that.inputValue='';
|
|
//发起定位授权弹窗
|
|
// uni.authorize({
|
|
// scope: 'scope.userLocation',
|
|
// success() {
|
|
// that.getLocation()
|
|
// },
|
|
// fail() {
|
|
// uni.showModal({
|
|
// title: '提示',
|
|
// content: '获取您的位置，以便为您推荐合适工作信息',
|
|
// success: function (res) {
|
|
// if (res.confirm) {
|
|
// that.getLocation();
|
|
// } else if (res.cancel) {
|
|
// //默认位置
|
|
// var point = {
|
|
// target:{
|
|
// latitude:that.latitude,
|
|
// longitude:that.longitude
|
|
// }
|
|
// };
|
|
// that.currentPoint = point;
|
|
// that.changeMap(point);
|
|
// }
|
|
// }
|
|
// });
|
|
// }
|
|
// });
|
|
// that.getLocation();
|
|
},
|
|
methods: {
|
|
/*定位*/
|
|
getLocation: function() {
|
|
var that = this;
|
|
uni.getLocation({
|
|
type: 'wgs84',
|
|
success: function(res) {
|
|
//初始化当前点
|
|
var point = {
|
|
target: {
|
|
latitude: res.latitude,
|
|
longitude: res.longitude
|
|
}
|
|
};
|
|
that.currentPoint = point;
|
|
// that.latitude = res.latitude;
|
|
// that.longitude = res.longitude;
|
|
//设置当前点 并逆地址解析和获取任务
|
|
that.changeMap(point);
|
|
},
|
|
fail: function() {
|
|
//默认位置
|
|
var point = {
|
|
target: {
|
|
latitude: that.latitude,
|
|
longitude: that.longitude
|
|
}
|
|
};
|
|
that.currentPoint = point;
|
|
that.changeMap(point);
|
|
},
|
|
complete: function(e) {}
|
|
});
|
|
},
|
|
/*设置当前点 并逆地址解析和获取任务*/
|
|
changeMap: function(e) {
|
|
this.page.current = 1;
|
|
if (e) {
|
|
var point = {
|
|
target: {
|
|
latitude: e.target.latitude,
|
|
longitude: e.target.longitude
|
|
}
|
|
};
|
|
this.currentPoint = point;
|
|
this.latitude = e.target.latitude;
|
|
this.longitude = e.target.longitude;
|
|
this.markList = [];
|
|
this.getAddrByPoint(e.target);
|
|
this.getData(e.target);
|
|
}
|
|
},
|
|
/*逆地址解析*/
|
|
getAddrByPoint: function(point) {
|
|
var that = this;
|
|
var location = point.latitude + ',' + point.longitude
|
|
that.setCurrentMarker(point); //设置当前marker
|
|
getcoder(location, encodeURI(that.key), 0).then(res => {
|
|
var address = res.data.result.address_component.city + res.data.result
|
|
.formatted_addresses.recommend;
|
|
this.markList.forEach(ele => { //给当前marker添加label
|
|
if (ele.id === 0) {
|
|
ele.title = address;
|
|
ele['callout'] = {
|
|
content: address,
|
|
color: '#000000',
|
|
fontSize: 12,
|
|
borderRadius: 2,
|
|
borderWidth: 0,
|
|
borderColor: '#ffffff',
|
|
bgColor: '#ffffff',
|
|
padding: '5',
|
|
display: 'ALWAYS',
|
|
textAlign: 'center'
|
|
}
|
|
}
|
|
})
|
|
});
|
|
},
|
|
/*设置当前定位点marker*/
|
|
setCurrentMarker: function(point) {
|
|
this.markList.push({
|
|
id: 0,
|
|
latitude: point.latitude,
|
|
longitude: point.longitude,
|
|
title: '',
|
|
zIndex: 2,
|
|
iconPath: '/static/img/location.png',
|
|
// width: 20,
|
|
// height: 20
|
|
})
|
|
},
|
|
/*设置任务点*/
|
|
setmarkers: function() {
|
|
// 设置任务点
|
|
var inpoints = [];
|
|
inpoints.push({
|
|
latitude: this.currentPoint.target.latitude,
|
|
longitude: this.currentPoint.target.longitude
|
|
})
|
|
if (this.companyList.length) {
|
|
for (var i = 0; i < this.companyList.length && i < 10; i++) {
|
|
inpoints.push({
|
|
latitude: this.companyList[i].lat,
|
|
longitude: this.companyList[i].lon
|
|
})
|
|
this.markList.push({
|
|
id: i + 1,
|
|
latitude: this.companyList[i].lat,
|
|
longitude: this.companyList[i].lon,
|
|
zIndex: 1,
|
|
iconPath: '/static/img/point.png',
|
|
// width: 30,
|
|
// height: 30
|
|
})
|
|
}
|
|
}
|
|
this.inpoints = inpoints;
|
|
},
|
|
goSearch() {
|
|
uni.navigateTo({
|
|
url: '../seach/placeSearch'
|
|
});
|
|
},
|
|
// search:function(){
|
|
// if(this.inputValue){
|
|
// this.querySearch(this.inputValue)
|
|
// }else{
|
|
// return
|
|
// }
|
|
// },
|
|
// //关键词输入提示
|
|
// querySearch:function(queryString) {
|
|
// querySearch(queryString, encodeURI(this.key)).then(res => {
|
|
// if (res.data.status === 0) {
|
|
// this.searchResultList = res.data.data;
|
|
// if(this.searchResultList.length){
|
|
// this.searchResultList.forEach((item, index) => {
|
|
// item.title = this.getInf(item.title, this.inputValue);
|
|
// });
|
|
// }
|
|
// }
|
|
// });
|
|
// },
|
|
// // 8-2、选择地址
|
|
// handleSelect:function(item) {
|
|
// this.page.current=1;
|
|
// this.searchResult=false;
|
|
// this.inputValue='';
|
|
// this.searchResultList = [];
|
|
// var point = {
|
|
// target:{
|
|
// latitude:item.location.lat,
|
|
// longitude:item.location.lng
|
|
// }
|
|
// };
|
|
// this.currentPoint = point;
|
|
// this.changeMap(point);
|
|
// },
|
|
// //高亮
|
|
// getInf(str, key) {
|
|
// if (str && key) {
|
|
// let replaceReg = new RegExp(key, 'g')// 匹配关键字正则
|
|
// let replaceString = "<span style='color: #1b66ff;'>" + key + "</span>" // 高亮替换
|
|
// return str.replace(replaceReg, replaceString);
|
|
// }
|
|
// },
|
|
// cancel:function(){
|
|
// this.inputValue = '';
|
|
// this.searchResult = false;
|
|
// },
|
|
getData: function(obj) {
|
|
nearMission(this.page.current, this.page.size, obj.latitude, obj.longitude, 50).then(res => {
|
|
if (this.page.current === 1) {
|
|
this.companyList = [];
|
|
}
|
|
this.page.current += 1;
|
|
this.page.total = res.data.data.total;
|
|
if (res.data.data && res.data.data.records.length) {
|
|
this.companyList = this.companyList.concat(res.data.data.records);
|
|
}
|
|
//非上拉加载 即设置任务点
|
|
if (obj !== 'upload') {
|
|
this.setmarkers();
|
|
}
|
|
})
|
|
},
|
|
//上拉加载
|
|
upLoad: function() {
|
|
if (this.page.current <= Math.ceil(this.page.total / this.page.size)) {
|
|
this.getData('upload');
|
|
} else {
|
|
uni.showToast({
|
|
icon: "none",
|
|
title: '已经是最后一页',
|
|
})
|
|
return
|
|
}
|
|
},
|
|
backView: function() {
|
|
uni.navigateBack({
|
|
delta: 1
|
|
});
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
.status_bar {
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
}
|
|
|
|
.locationimg {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
position: fixed;
|
|
left: 355rpx;
|
|
top: 250rpx;
|
|
}
|
|
|
|
.baddd {
|
|
background: #f6f6f6;
|
|
height: 20rpx;
|
|
}
|
|
|
|
.head_border {
|
|
width: 60rpx;
|
|
height: 8rpx;
|
|
border-radius: 30rpx;
|
|
margin: 0 auto;
|
|
background-color: #ddd;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.head {
|
|
font-family: PingFangSC-Medium;
|
|
font-size: 30rpx;
|
|
font-weight: bold;
|
|
color: #333333;
|
|
text-align: center;
|
|
height: 50%;
|
|
position: relative;
|
|
/* border-bottom: 20rpx solid #f6f6f6; */
|
|
}
|
|
|
|
map {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
|
|
.head .search {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 0;
|
|
right: 0;
|
|
}
|
|
|
|
.head .search .controlss {
|
|
display: flex;
|
|
justify-content: center;
|
|
flex-direction: row;
|
|
margin: 0rpx 20rpx;
|
|
}
|
|
|
|
.head .search .controlss .controlss-back {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
margin-right: 20rpx;
|
|
padding: 5rpx;
|
|
background-color: #ffffff;
|
|
}
|
|
|
|
.head .search .controlss .controlss-input {
|
|
flex: 1;
|
|
padding: 10rpx 30rpx;
|
|
background-color: #ffffff;
|
|
border-radius: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
.head .search .controlss input {
|
|
text-align: left;
|
|
font-size: 28rpx;
|
|
color: rgba(51, 51, 51, 1);
|
|
font-weight: normal;
|
|
}
|
|
|
|
.head .search .controlss image {
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
}
|
|
|
|
.controlsPop {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
width: 750rpx;
|
|
height: 50%;
|
|
background-color: #fefefe;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.controlsPop .listTitle {
|
|
padding: 10rpx 20rpx;
|
|
font-size: 24rpx;
|
|
}
|
|
|
|
.controlsPop .nothingArea {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
}
|
|
|
|
.controlsPop .nothingContnt {
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 28rpx;
|
|
color: #333333;
|
|
margin-top: 30rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.controlsPop .nothing {
|
|
width: 400rpx;
|
|
height: 200rpx;
|
|
display: block;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
/*
|
|
.searchPage .headSearch .search-view {
|
|
border-bottom: 1rpx solid #dddddd;
|
|
padding: 10rpx 30rpx;
|
|
background: rgba(255, 255, 255, 1);
|
|
position: relative;
|
|
}
|
|
.searchPage .headSearch .close{
|
|
position: absolute;
|
|
right: 24rpx;
|
|
top: 0;
|
|
height: 60rpx;
|
|
padding: 5rpx 0;
|
|
line-height: 60rpx;
|
|
font-family: PingFangSC-Regular;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
}
|
|
.searchPage .headSearch .search-item{
|
|
display: flex;
|
|
width: 80%;
|
|
padding: 0 24rpx;
|
|
height: 60rpx;
|
|
line-height: 60rpx;
|
|
background: rgba(249, 249, 249, 1);
|
|
border-radius: 200px;
|
|
align-items: center;
|
|
}
|
|
.searchPage .headSearch .search-item input {
|
|
padding: 0 24rpx;
|
|
height: 80rpx;
|
|
font-weight: 400;
|
|
flex: 1;
|
|
text-align: start;
|
|
font-size: 28rpx;
|
|
font-family: PingFang-SC-Bold, PingFang-SC;
|
|
color: rgba(51, 51, 51, 1);
|
|
}
|
|
.searchPage .headSearch .search-item .placeholderClass {
|
|
color: #CCCCCC;
|
|
}
|
|
.searchPage .headSearch .search-item image {
|
|
height: 32rpx;
|
|
width: 32rpx;
|
|
}
|
|
|
|
.searchPage .scroll-view{
|
|
flex:1;
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
top:80rpx;
|
|
}
|
|
|
|
.searchPage .search-result {
|
|
background-color: #fff;
|
|
}
|
|
.searchPage .search-result li{
|
|
font-weight: normal;
|
|
text-align: left;
|
|
border-bottom:1rpx solid #f2f2f2;
|
|
padding: 28rpx 30rpx;
|
|
list-style:none;
|
|
}
|
|
.searchPage .search-result li .title{
|
|
font-size:32rpx;
|
|
} */
|
|
|
|
.highlight {
|
|
color: #1b66ff;
|
|
}
|
|
|
|
.searchPage .search-result li .address {
|
|
font-size: 24rpx;
|
|
color: #999999
|
|
}
|
|
|
|
.borderbom {
|
|
width: 100%;
|
|
height: 1rpx;
|
|
border-bottom: 1rpx solid #f2f2f2;
|
|
}
|
|
|
|
page {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.bodys {
|
|
width: 100%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
</style> |