flat: 地图
This commit is contained in:
史典卓
6
App.vue
6
App.vue
@@ -16,11 +16,7 @@
|
|||||||
export default {
|
export default {
|
||||||
onLaunch: function(options) {
|
onLaunch: function(options) {
|
||||||
this.$store.dispatch('InitArea')
|
this.$store.dispatch('InitArea')
|
||||||
if (options.query.token) {
|
if (this.$store.state.user.token) {
|
||||||
uni.reLaunch({
|
|
||||||
url: '/pages/login/blank?token=' + options.query.token
|
|
||||||
})
|
|
||||||
} else if (this.$store.state.user.token) {
|
|
||||||
this.$store.dispatch('startRefreshTokenTimer')
|
this.$store.dispatch('startRefreshTokenTimer')
|
||||||
this.$store.dispatch('startRefreshNewsTimer')
|
this.$store.dispatch('startRefreshNewsTimer')
|
||||||
this.$store.dispatch('refreshAuthState')
|
this.$store.dispatch('refreshAuthState')
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view style="display: flex;align-items: center;position:absolute;right:0;">
|
<view style="display: flex;align-items: center;position:absolute;right:0;">
|
||||||
<image src="../../static/img/location_new.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
|
<image src="../../static/img/location_new.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
|
||||||
<view>--km</view>
|
<view>{{distance(companyitem)}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="comment" v-if='comment' @tap.stop="goComment(companyitem.missionNo)">
|
<view class="comment" v-if='comment' @tap.stop="goComment(companyitem.missionNo)">
|
||||||
@@ -57,7 +57,10 @@
|
|||||||
dateFormat
|
dateFormat
|
||||||
} from "../../untils/format.js";
|
} from "../../untils/format.js";
|
||||||
import dictionary from '@/common/textdata.js';
|
import dictionary from '@/common/textdata.js';
|
||||||
|
import {
|
||||||
|
addZeroPrefix,
|
||||||
|
getDistanceFromLatLonInKm
|
||||||
|
} from '@/untils/tools.js'
|
||||||
export default {
|
export default {
|
||||||
beforeCreate: function() {},
|
beforeCreate: function() {},
|
||||||
props: {
|
props: {
|
||||||
@@ -78,6 +81,9 @@
|
|||||||
near: {
|
near: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
position: {
|
||||||
|
default: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -94,6 +100,24 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
distance(item) {
|
||||||
|
const {
|
||||||
|
lon,
|
||||||
|
lat
|
||||||
|
} = item
|
||||||
|
if (this.position && lon > 0) {
|
||||||
|
const {
|
||||||
|
longitude,
|
||||||
|
latitude
|
||||||
|
} = this.position
|
||||||
|
const {
|
||||||
|
m,
|
||||||
|
km
|
||||||
|
} = getDistanceFromLatLonInKm(lat, lon, latitude, longitude)
|
||||||
|
return m > 1000 ? `${km.toFixed(2)}km` : `${m.toFixed(2)}m`
|
||||||
|
}
|
||||||
|
return '--km'
|
||||||
|
},
|
||||||
goComment: function(no) {
|
goComment: function(no) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `../../pageMy/mycomment/mycomment?missionNo=${encodeURIComponent(no)}`
|
url: `../../pageMy/mycomment/mycomment?missionNo=${encodeURIComponent(no)}`
|
||||||
|
|||||||
@@ -34,7 +34,7 @@
|
|||||||
</view>
|
</view>
|
||||||
<view style="display: flex;align-items: center;position:absolute;right:0;">
|
<view style="display: flex;align-items: center;position:absolute;right:0;">
|
||||||
<image src="../../static/img/location_new.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
|
<image src="../../static/img/location_new.png" style="width: 30rpx;height: 30rpx;" mode=""></image>
|
||||||
<view>--km</view>
|
<view>{{distance(companyitem)}}</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="comment" v-if='comment' @tap.stop="goComment(companyitem.missionNo)">
|
<view class="comment" v-if='comment' @tap.stop="goComment(companyitem.missionNo)">
|
||||||
@@ -60,7 +60,10 @@
|
|||||||
import {
|
import {
|
||||||
defaults
|
defaults
|
||||||
} from "lodash";
|
} from "lodash";
|
||||||
|
import {
|
||||||
|
addZeroPrefix,
|
||||||
|
getDistanceFromLatLonInKm
|
||||||
|
} from '@/untils/tools.js'
|
||||||
export default {
|
export default {
|
||||||
beforeCreate: function() {},
|
beforeCreate: function() {},
|
||||||
props: {
|
props: {
|
||||||
@@ -81,6 +84,9 @@
|
|||||||
near: {
|
near: {
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false
|
default: false
|
||||||
|
},
|
||||||
|
position: {
|
||||||
|
default: null
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
data() {
|
data() {
|
||||||
@@ -101,6 +107,24 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
|
distance(item) {
|
||||||
|
const {
|
||||||
|
lon,
|
||||||
|
lat
|
||||||
|
} = item
|
||||||
|
if (this.position && lon > 0) {
|
||||||
|
const {
|
||||||
|
longitude,
|
||||||
|
latitude
|
||||||
|
} = this.position
|
||||||
|
const {
|
||||||
|
m,
|
||||||
|
km
|
||||||
|
} = getDistanceFromLatLonInKm(lat, lon, latitude, longitude)
|
||||||
|
return m > 1000 ? `${km.toFixed(2)}km` : `${m.toFixed(2)}m`
|
||||||
|
}
|
||||||
|
return '--km'
|
||||||
|
},
|
||||||
goComment: function(no) {
|
goComment: function(no) {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: `../../pageMy/mycomment/mycomment?missionNo=${encodeURIComponent(no)}`
|
url: `../../pageMy/mycomment/mycomment?missionNo=${encodeURIComponent(no)}`
|
||||||
@@ -112,7 +136,7 @@
|
|||||||
case 0:
|
case 0:
|
||||||
this.navTo(
|
this.navTo(
|
||||||
`/pages/projectInfo/projectInfo?missionNo=${encodeURIComponent(item.missionNo)}&isCan=1`
|
`/pages/projectInfo/projectInfo?missionNo=${encodeURIComponent(item.missionNo)}&isCan=1`
|
||||||
)
|
)
|
||||||
break
|
break
|
||||||
case 1:
|
case 1:
|
||||||
this.navTo(`/pages/projectInfo/workInfo?workId=${encodeURIComponent(item.id)}&isCan=1`)
|
this.navTo(`/pages/projectInfo/workInfo?workId=${encodeURIComponent(item.id)}&isCan=1`)
|
||||||
|
|||||||
@@ -5,46 +5,6 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import 'ol/ol.css';
|
|
||||||
import Map from 'ol/Map';
|
|
||||||
import View from 'ol/View';
|
|
||||||
import TileLayer from 'ol/layer/Tile';
|
|
||||||
import SourceVector from 'ol/source/Vector';
|
|
||||||
import LayerVector from 'ol/layer/Vector';
|
|
||||||
import * as control from 'ol/control';
|
|
||||||
import {
|
|
||||||
toLonLat
|
|
||||||
} from 'ol/proj';
|
|
||||||
import Overlay from 'ol/Overlay';
|
|
||||||
import {
|
|
||||||
toStringHDMS
|
|
||||||
} from 'ol/coordinate';
|
|
||||||
import {
|
|
||||||
Select
|
|
||||||
} from 'ol/interaction'
|
|
||||||
import {
|
|
||||||
GeoJSON
|
|
||||||
} from 'ol/format';
|
|
||||||
import {
|
|
||||||
Style,
|
|
||||||
Circle,
|
|
||||||
Fill,
|
|
||||||
Stroke,
|
|
||||||
Icon,
|
|
||||||
Text
|
|
||||||
} from 'ol/style';
|
|
||||||
import Feature from 'ol/Feature';
|
|
||||||
import {
|
|
||||||
Point,
|
|
||||||
Polygon
|
|
||||||
} from 'ol/geom';
|
|
||||||
import {
|
|
||||||
Logo,
|
|
||||||
TileSuperMapRest,
|
|
||||||
FeatureService,
|
|
||||||
GetFeaturesByGeometryParameters
|
|
||||||
} from '@supermap/iclient-ol';
|
|
||||||
const geoJSONParser = new GeoJSON();
|
|
||||||
let mypoint = require('@/static/img/mypoint.png');
|
let mypoint = require('@/static/img/mypoint.png');
|
||||||
export default {
|
export default {
|
||||||
name: "uMapView",
|
name: "uMapView",
|
||||||
@@ -114,297 +74,12 @@
|
|||||||
};
|
};
|
||||||
},
|
},
|
||||||
mounted() {
|
mounted() {
|
||||||
if (this.init) {
|
|
||||||
this.initMap()
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {}
|
||||||
initMap(options) {
|
|
||||||
let lat, lon;
|
|
||||||
if (options) {
|
|
||||||
lat = options.lat
|
|
||||||
lon = options.lon
|
|
||||||
} else {
|
|
||||||
lat = this.latitude
|
|
||||||
lon = this.longitude
|
|
||||||
}
|
|
||||||
this.map = new Map({
|
|
||||||
target: 'map',
|
|
||||||
controls: control.defaults({
|
|
||||||
attribution: false,
|
|
||||||
zoom: this.ScaleZoom,
|
|
||||||
}),
|
|
||||||
layers: [
|
|
||||||
new TileLayer({ // 使用瓦片
|
|
||||||
source: new TileSuperMapRest({
|
|
||||||
url: this.MapUrl,
|
|
||||||
wrapX: true,
|
|
||||||
}),
|
|
||||||
projection: 'EPSG:4326',
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
view: new View({
|
|
||||||
center: [lon, lat],
|
|
||||||
maxZoom: this.maxZoom,
|
|
||||||
minZoom: this.minZoom,
|
|
||||||
zoom: this.zoom,
|
|
||||||
projection: 'EPSG:4326',
|
|
||||||
})
|
|
||||||
});
|
|
||||||
//添加查询结果图层
|
|
||||||
this.vectorSource = new SourceVector({
|
|
||||||
wrapX: false
|
|
||||||
});
|
|
||||||
const resultLayer = new LayerVector({
|
|
||||||
source: this.vectorSource,
|
|
||||||
});
|
|
||||||
|
|
||||||
//添加点图层
|
|
||||||
this.addPointsSource = new SourceVector({
|
|
||||||
wrapX: false
|
|
||||||
});
|
|
||||||
const addPointsLayer = new LayerVector({
|
|
||||||
source: this.addPointsSource,
|
|
||||||
});
|
|
||||||
this.map.addLayer(addPointsLayer);
|
|
||||||
this.map.addLayer(resultLayer);
|
|
||||||
this.map.on('pointermove', (e) => {
|
|
||||||
if (this.isShowToolTip) {
|
|
||||||
this.helpTooltip.setPosition(undefined);
|
|
||||||
this.helpTooltipElement.classList.add('hidden');
|
|
||||||
}
|
|
||||||
this.$emit('regionchange', e.pixel)
|
|
||||||
});
|
|
||||||
this.map.on('singleclick', (e) => {
|
|
||||||
this.$emit('clickMap', e.coordinate)
|
|
||||||
});
|
|
||||||
|
|
||||||
if (this.open) {
|
|
||||||
this.addFeature([{
|
|
||||||
id: 1,
|
|
||||||
latitude: lat,
|
|
||||||
longitude: lon,
|
|
||||||
iconPath: mypoint,
|
|
||||||
title: '',
|
|
||||||
width: 20,
|
|
||||||
height: 20
|
|
||||||
}])
|
|
||||||
}
|
|
||||||
|
|
||||||
if (this.flagTip) {
|
|
||||||
this.createHelpTooltip()
|
|
||||||
}
|
|
||||||
|
|
||||||
},
|
|
||||||
addMarker(point) {
|
|
||||||
console.log('point', point)
|
|
||||||
// this.ceateMarker([104.404419, 31.133980])
|
|
||||||
},
|
|
||||||
addFeature(covers) {
|
|
||||||
console.log(covers)
|
|
||||||
const features = covers.map((item) => ({
|
|
||||||
type: 'Feature',
|
|
||||||
geometry: {
|
|
||||||
type: 'Point',
|
|
||||||
coordinates: [item.longitude, item.latitude],
|
|
||||||
},
|
|
||||||
properties: {
|
|
||||||
iconPath: item.iconPath,
|
|
||||||
text: item.title,
|
|
||||||
value: JSON.stringify(item),
|
|
||||||
scale: item.id === 1 ? [0.15, 0.15] : [0.1, 0.1]
|
|
||||||
}
|
|
||||||
}))
|
|
||||||
this.careateFeature(features)
|
|
||||||
|
|
||||||
},
|
|
||||||
ceateMarker(point) {
|
|
||||||
// 创建一个坐标点
|
|
||||||
const pointed = new Point(point); // 这里的[0, 0]应该替换为您的经度和纬度
|
|
||||||
|
|
||||||
// 创建一个特征
|
|
||||||
const pointFeature = new Feature({
|
|
||||||
geometry: pointed,
|
|
||||||
name: 'My Point'
|
|
||||||
});
|
|
||||||
|
|
||||||
pointFeature.setStyle(new Style({
|
|
||||||
image: new Circle({
|
|
||||||
fill: new Fill({
|
|
||||||
color: [255, 0, 0, 0.5]
|
|
||||||
}),
|
|
||||||
stroke: new Stroke({
|
|
||||||
color: 'red',
|
|
||||||
width: 2
|
|
||||||
}),
|
|
||||||
radius: 8
|
|
||||||
})
|
|
||||||
}));
|
|
||||||
|
|
||||||
pointFeature.setProperties({
|
|
||||||
POP: 1,
|
|
||||||
CAPITAL: 'test'
|
|
||||||
});
|
|
||||||
this.addPointsSource.clear()
|
|
||||||
// 将特征添加到矢量图层
|
|
||||||
this.addPointsSource.addFeature(pointFeature);
|
|
||||||
// 确保更新地图视图以显示新的标点
|
|
||||||
this.map.getView().fit(this.addPointsSource.getExtent());
|
|
||||||
// // 或者移动视图
|
|
||||||
// _this.map.getView().animate({
|
|
||||||
// duration: 850,
|
|
||||||
// zoom: 5,
|
|
||||||
// center: point,
|
|
||||||
// });
|
|
||||||
|
|
||||||
},
|
|
||||||
careateFeature(result) {
|
|
||||||
if (this.vectorSourceIcon) {
|
|
||||||
this.vectorSourceIcon.clear()
|
|
||||||
const geojsonObject = {
|
|
||||||
type: 'FeatureCollection',
|
|
||||||
features: result,
|
|
||||||
};
|
|
||||||
this.vectorSourceIcon.addFeatures(geoJSONParser.readFeatures(geojsonObject))
|
|
||||||
this.vectorSourceIcon.changed()
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const geojsonObject = {
|
|
||||||
type: 'FeatureCollection',
|
|
||||||
features: result,
|
|
||||||
};
|
|
||||||
// 创建一个图层作为点位
|
|
||||||
this.vectorSourceIcon = new SourceVector({
|
|
||||||
features: geoJSONParser.readFeatures(geojsonObject)
|
|
||||||
});
|
|
||||||
this.vectorLayerIcon = new LayerVector({
|
|
||||||
source: this.vectorSourceIcon,
|
|
||||||
style: feature => {
|
|
||||||
return new Style({
|
|
||||||
image: new Icon({
|
|
||||||
anchor: [0.5, 0.9],
|
|
||||||
scale: feature.get('scale'),
|
|
||||||
src: feature.get('iconPath'),
|
|
||||||
}),
|
|
||||||
text: new Text({
|
|
||||||
text: feature.get('text'),
|
|
||||||
fill: new Fill({
|
|
||||||
color: '#000'
|
|
||||||
}),
|
|
||||||
stroke: new Stroke({
|
|
||||||
color: '#fff',
|
|
||||||
width: 3
|
|
||||||
}),
|
|
||||||
font: 'normal 12px Calibri, sans-serif',
|
|
||||||
textAlign: 'center', // 文本对齐
|
|
||||||
offsetX: 0,
|
|
||||||
offsetY: 15,
|
|
||||||
rotation: 0, // 文本旋转
|
|
||||||
}),
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.map.addLayer(this.vectorLayerIcon);
|
|
||||||
// 添加事件
|
|
||||||
this.selectInteraction = new Select({
|
|
||||||
layers: [this.vectorLayerIcon]
|
|
||||||
});
|
|
||||||
this.selectInteraction.on('select', (event) => {
|
|
||||||
const selectedFeatures = event.selected;
|
|
||||||
if (selectedFeatures.length) {
|
|
||||||
const select = selectedFeatures[0].values_
|
|
||||||
this.$emit('markertap', JSON.parse(select.value))
|
|
||||||
// tooltip
|
|
||||||
if (this.flagTip) {
|
|
||||||
const coordinate = selectedFeatures[0].values_.geometry.flatCoordinates;
|
|
||||||
this.helpTooltipElement.innerHTML = select.text;
|
|
||||||
console.log(this.helpTooltip)
|
|
||||||
this.helpTooltip.setPosition(coordinate);
|
|
||||||
this.helpTooltipElement.classList.remove('hidden');
|
|
||||||
this.map.addOverlay(this.helpTooltip);
|
|
||||||
this.isShowToolTip = true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
});
|
|
||||||
this.map.addInteraction(this.selectInteraction);
|
|
||||||
},
|
|
||||||
createHelpTooltip() {
|
|
||||||
this.helpTooltipElement
|
|
||||||
if (this.helpTooltipElement) {
|
|
||||||
this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
|
|
||||||
}
|
|
||||||
this.helpTooltipElement = document.createElement('div');
|
|
||||||
this.helpTooltipElement.className = 'tooltip hidden';
|
|
||||||
this.helpTooltip = new Overlay({
|
|
||||||
element: this.helpTooltipElement,
|
|
||||||
offset: [-30, 20],
|
|
||||||
positioning: 'center-left'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
.app-content {}
|
|
||||||
|
|
||||||
.editPane {
|
|
||||||
position: absolute;
|
|
||||||
right: 65px;
|
|
||||||
top: 8px;
|
|
||||||
text-align: center;
|
|
||||||
background: #FFF;
|
|
||||||
z-index: 1000;
|
|
||||||
border-radius: 4px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ol-popup {
|
|
||||||
position: absolute;
|
|
||||||
background-color: white;
|
|
||||||
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
|
||||||
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
|
||||||
padding: 15px;
|
|
||||||
border-radius: 10px;
|
|
||||||
border: 1px solid #cccccc;
|
|
||||||
bottom: 12px;
|
|
||||||
left: -50px;
|
|
||||||
min-width: 120px;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ol-popup:after,
|
|
||||||
.ol-popup:before {
|
|
||||||
top: 100%;
|
|
||||||
border: solid transparent;
|
|
||||||
content: " ";
|
|
||||||
height: 0;
|
|
||||||
width: 0;
|
|
||||||
position: absolute;
|
|
||||||
pointer-events: none;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ol-popup:after {
|
|
||||||
border-top-color: white;
|
|
||||||
border-width: 10px;
|
|
||||||
left: 48px;
|
|
||||||
margin-left: -10px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ol-popup:before {
|
|
||||||
border-top-color: #cccccc;
|
|
||||||
border-width: 11px;
|
|
||||||
left: 48px;
|
|
||||||
margin-left: -11px;
|
|
||||||
}
|
|
||||||
|
|
||||||
.tooltip {
|
|
||||||
position: relative;
|
|
||||||
background: rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 4px;
|
|
||||||
color: white;
|
|
||||||
padding: 4px 8px;
|
|
||||||
opacity: 0.7;
|
|
||||||
white-space: nowrap;
|
|
||||||
}
|
|
||||||
</style>
|
</style>
|
||||||
410
components/uMapView/uMapViewcopy.vue
Normal file
410
components/uMapView/uMapViewcopy.vue
Normal file
@@ -0,0 +1,410 @@
|
|||||||
|
<template>
|
||||||
|
<view class="app-content">
|
||||||
|
<view id="map" style="width: 100%;height: 100%;"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import 'ol/ol.css';
|
||||||
|
import Map from 'ol/Map';
|
||||||
|
import View from 'ol/View';
|
||||||
|
import TileLayer from 'ol/layer/Tile';
|
||||||
|
import SourceVector from 'ol/source/Vector';
|
||||||
|
import LayerVector from 'ol/layer/Vector';
|
||||||
|
import * as control from 'ol/control';
|
||||||
|
import {
|
||||||
|
toLonLat
|
||||||
|
} from 'ol/proj';
|
||||||
|
import Overlay from 'ol/Overlay';
|
||||||
|
import {
|
||||||
|
toStringHDMS
|
||||||
|
} from 'ol/coordinate';
|
||||||
|
import {
|
||||||
|
Select
|
||||||
|
} from 'ol/interaction'
|
||||||
|
import {
|
||||||
|
GeoJSON
|
||||||
|
} from 'ol/format';
|
||||||
|
import {
|
||||||
|
Style,
|
||||||
|
Circle,
|
||||||
|
Fill,
|
||||||
|
Stroke,
|
||||||
|
Icon,
|
||||||
|
Text
|
||||||
|
} from 'ol/style';
|
||||||
|
import Feature from 'ol/Feature';
|
||||||
|
import {
|
||||||
|
Point,
|
||||||
|
Polygon
|
||||||
|
} from 'ol/geom';
|
||||||
|
import {
|
||||||
|
Logo,
|
||||||
|
TileSuperMapRest,
|
||||||
|
FeatureService,
|
||||||
|
GetFeaturesByGeometryParameters
|
||||||
|
} from '@supermap/iclient-ol';
|
||||||
|
const geoJSONParser = new GeoJSON();
|
||||||
|
let mypoint = require('@/static/img/mypoint.png');
|
||||||
|
export default {
|
||||||
|
name: "uMapView",
|
||||||
|
props: {
|
||||||
|
latitude: {
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
longitude: {
|
||||||
|
required: true,
|
||||||
|
},
|
||||||
|
zoom: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 10,
|
||||||
|
},
|
||||||
|
maxZoom: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 20,
|
||||||
|
},
|
||||||
|
minZoom: {
|
||||||
|
type: Number,
|
||||||
|
required: false,
|
||||||
|
default: 0,
|
||||||
|
},
|
||||||
|
ScaleZoom: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
MapUrl: { // 瓦片地图URL
|
||||||
|
type: String,
|
||||||
|
required: true,
|
||||||
|
default: '',
|
||||||
|
},
|
||||||
|
flagTip: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
open: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
init: {
|
||||||
|
type: Boolean,
|
||||||
|
required: false,
|
||||||
|
default: true,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 实例化对象
|
||||||
|
map: null,
|
||||||
|
addPointsSource: null,
|
||||||
|
vectorSource: null,
|
||||||
|
vectorSourceIcon: null,
|
||||||
|
vectorLayerIcon: null,
|
||||||
|
selectInteraction: null,
|
||||||
|
helpTooltipElement: null,
|
||||||
|
helpTooltip: null,
|
||||||
|
isclearPoint: null,
|
||||||
|
overlay: null,
|
||||||
|
// 控制参数
|
||||||
|
isShowToolTip: false,
|
||||||
|
};
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
if (this.init) {
|
||||||
|
this.initMap()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initMap(options) {
|
||||||
|
let lat, lon;
|
||||||
|
if (options) {
|
||||||
|
lat = options.lat
|
||||||
|
lon = options.lon
|
||||||
|
} else {
|
||||||
|
lat = this.latitude
|
||||||
|
lon = this.longitude
|
||||||
|
}
|
||||||
|
this.map = new Map({
|
||||||
|
target: 'map',
|
||||||
|
controls: control.defaults({
|
||||||
|
attribution: false,
|
||||||
|
zoom: this.ScaleZoom,
|
||||||
|
}),
|
||||||
|
layers: [
|
||||||
|
new TileLayer({ // 使用瓦片
|
||||||
|
source: new TileSuperMapRest({
|
||||||
|
url: this.MapUrl,
|
||||||
|
wrapX: true,
|
||||||
|
}),
|
||||||
|
projection: 'EPSG:4326',
|
||||||
|
}),
|
||||||
|
],
|
||||||
|
view: new View({
|
||||||
|
center: [lon, lat],
|
||||||
|
maxZoom: this.maxZoom,
|
||||||
|
minZoom: this.minZoom,
|
||||||
|
zoom: this.zoom,
|
||||||
|
projection: 'EPSG:4326',
|
||||||
|
})
|
||||||
|
});
|
||||||
|
//添加查询结果图层
|
||||||
|
this.vectorSource = new SourceVector({
|
||||||
|
wrapX: false
|
||||||
|
});
|
||||||
|
const resultLayer = new LayerVector({
|
||||||
|
source: this.vectorSource,
|
||||||
|
});
|
||||||
|
|
||||||
|
//添加点图层
|
||||||
|
this.addPointsSource = new SourceVector({
|
||||||
|
wrapX: false
|
||||||
|
});
|
||||||
|
const addPointsLayer = new LayerVector({
|
||||||
|
source: this.addPointsSource,
|
||||||
|
});
|
||||||
|
this.map.addLayer(addPointsLayer);
|
||||||
|
this.map.addLayer(resultLayer);
|
||||||
|
this.map.on('pointermove', (e) => {
|
||||||
|
if (this.isShowToolTip) {
|
||||||
|
this.helpTooltip.setPosition(undefined);
|
||||||
|
this.helpTooltipElement.classList.add('hidden');
|
||||||
|
}
|
||||||
|
this.$emit('regionchange', e.pixel)
|
||||||
|
});
|
||||||
|
this.map.on('singleclick', (e) => {
|
||||||
|
this.$emit('clickMap', e.coordinate)
|
||||||
|
});
|
||||||
|
|
||||||
|
if (this.open) {
|
||||||
|
this.addFeature([{
|
||||||
|
id: 1,
|
||||||
|
latitude: lat,
|
||||||
|
longitude: lon,
|
||||||
|
iconPath: mypoint,
|
||||||
|
title: '',
|
||||||
|
width: 20,
|
||||||
|
height: 20
|
||||||
|
}])
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.flagTip) {
|
||||||
|
this.createHelpTooltip()
|
||||||
|
}
|
||||||
|
|
||||||
|
},
|
||||||
|
addMarker(point) {
|
||||||
|
console.log('point', point)
|
||||||
|
// this.ceateMarker([104.404419, 31.133980])
|
||||||
|
},
|
||||||
|
addFeature(covers) {
|
||||||
|
console.log(covers)
|
||||||
|
const features = covers.map((item) => ({
|
||||||
|
type: 'Feature',
|
||||||
|
geometry: {
|
||||||
|
type: 'Point',
|
||||||
|
coordinates: [item.longitude, item.latitude],
|
||||||
|
},
|
||||||
|
properties: {
|
||||||
|
iconPath: item.iconPath,
|
||||||
|
text: item.title,
|
||||||
|
value: JSON.stringify(item),
|
||||||
|
scale: item.id === 1 ? [0.15, 0.15] : [0.1, 0.1]
|
||||||
|
}
|
||||||
|
}))
|
||||||
|
this.careateFeature(features)
|
||||||
|
|
||||||
|
},
|
||||||
|
ceateMarker(point) {
|
||||||
|
// 创建一个坐标点
|
||||||
|
const pointed = new Point(point); // 这里的[0, 0]应该替换为您的经度和纬度
|
||||||
|
|
||||||
|
// 创建一个特征
|
||||||
|
const pointFeature = new Feature({
|
||||||
|
geometry: pointed,
|
||||||
|
name: 'My Point'
|
||||||
|
});
|
||||||
|
|
||||||
|
pointFeature.setStyle(new Style({
|
||||||
|
image: new Circle({
|
||||||
|
fill: new Fill({
|
||||||
|
color: [255, 0, 0, 0.5]
|
||||||
|
}),
|
||||||
|
stroke: new Stroke({
|
||||||
|
color: 'red',
|
||||||
|
width: 2
|
||||||
|
}),
|
||||||
|
radius: 8
|
||||||
|
})
|
||||||
|
}));
|
||||||
|
|
||||||
|
pointFeature.setProperties({
|
||||||
|
POP: 1,
|
||||||
|
CAPITAL: 'test'
|
||||||
|
});
|
||||||
|
this.addPointsSource.clear()
|
||||||
|
// 将特征添加到矢量图层
|
||||||
|
this.addPointsSource.addFeature(pointFeature);
|
||||||
|
// 确保更新地图视图以显示新的标点
|
||||||
|
this.map.getView().fit(this.addPointsSource.getExtent());
|
||||||
|
// // 或者移动视图
|
||||||
|
// _this.map.getView().animate({
|
||||||
|
// duration: 850,
|
||||||
|
// zoom: 5,
|
||||||
|
// center: point,
|
||||||
|
// });
|
||||||
|
|
||||||
|
},
|
||||||
|
careateFeature(result) {
|
||||||
|
if (this.vectorSourceIcon) {
|
||||||
|
this.vectorSourceIcon.clear()
|
||||||
|
const geojsonObject = {
|
||||||
|
type: 'FeatureCollection',
|
||||||
|
features: result,
|
||||||
|
};
|
||||||
|
this.vectorSourceIcon.addFeatures(geoJSONParser.readFeatures(geojsonObject))
|
||||||
|
this.vectorSourceIcon.changed()
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const geojsonObject = {
|
||||||
|
type: 'FeatureCollection',
|
||||||
|
features: result,
|
||||||
|
};
|
||||||
|
// 创建一个图层作为点位
|
||||||
|
this.vectorSourceIcon = new SourceVector({
|
||||||
|
features: geoJSONParser.readFeatures(geojsonObject)
|
||||||
|
});
|
||||||
|
this.vectorLayerIcon = new LayerVector({
|
||||||
|
source: this.vectorSourceIcon,
|
||||||
|
style: feature => {
|
||||||
|
return new Style({
|
||||||
|
image: new Icon({
|
||||||
|
anchor: [0.5, 0.9],
|
||||||
|
scale: feature.get('scale'),
|
||||||
|
src: feature.get('iconPath'),
|
||||||
|
}),
|
||||||
|
text: new Text({
|
||||||
|
text: feature.get('text'),
|
||||||
|
fill: new Fill({
|
||||||
|
color: '#000'
|
||||||
|
}),
|
||||||
|
stroke: new Stroke({
|
||||||
|
color: '#fff',
|
||||||
|
width: 3
|
||||||
|
}),
|
||||||
|
font: 'normal 12px Calibri, sans-serif',
|
||||||
|
textAlign: 'center', // 文本对齐
|
||||||
|
offsetX: 0,
|
||||||
|
offsetY: 15,
|
||||||
|
rotation: 0, // 文本旋转
|
||||||
|
}),
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.map.addLayer(this.vectorLayerIcon);
|
||||||
|
// 添加事件
|
||||||
|
this.selectInteraction = new Select({
|
||||||
|
layers: [this.vectorLayerIcon]
|
||||||
|
});
|
||||||
|
this.selectInteraction.on('select', (event) => {
|
||||||
|
const selectedFeatures = event.selected;
|
||||||
|
if (selectedFeatures.length) {
|
||||||
|
const select = selectedFeatures[0].values_
|
||||||
|
this.$emit('markertap', JSON.parse(select.value))
|
||||||
|
// tooltip
|
||||||
|
if (this.flagTip) {
|
||||||
|
const coordinate = selectedFeatures[0].values_.geometry.flatCoordinates;
|
||||||
|
this.helpTooltipElement.innerHTML = select.text;
|
||||||
|
console.log(this.helpTooltip)
|
||||||
|
this.helpTooltip.setPosition(coordinate);
|
||||||
|
this.helpTooltipElement.classList.remove('hidden');
|
||||||
|
this.map.addOverlay(this.helpTooltip);
|
||||||
|
this.isShowToolTip = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
this.map.addInteraction(this.selectInteraction);
|
||||||
|
},
|
||||||
|
createHelpTooltip() {
|
||||||
|
this.helpTooltipElement
|
||||||
|
if (this.helpTooltipElement) {
|
||||||
|
this.helpTooltipElement.parentNode.removeChild(this.helpTooltipElement);
|
||||||
|
}
|
||||||
|
this.helpTooltipElement = document.createElement('div');
|
||||||
|
this.helpTooltipElement.className = 'tooltip hidden';
|
||||||
|
this.helpTooltip = new Overlay({
|
||||||
|
element: this.helpTooltipElement,
|
||||||
|
offset: [-30, 20],
|
||||||
|
positioning: 'center-left'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.app-content {}
|
||||||
|
|
||||||
|
.editPane {
|
||||||
|
position: absolute;
|
||||||
|
right: 65px;
|
||||||
|
top: 8px;
|
||||||
|
text-align: center;
|
||||||
|
background: #FFF;
|
||||||
|
z-index: 1000;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-popup {
|
||||||
|
position: absolute;
|
||||||
|
background-color: white;
|
||||||
|
-webkit-filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||||||
|
filter: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.2));
|
||||||
|
padding: 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
border: 1px solid #cccccc;
|
||||||
|
bottom: 12px;
|
||||||
|
left: -50px;
|
||||||
|
min-width: 120px;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-popup:after,
|
||||||
|
.ol-popup:before {
|
||||||
|
top: 100%;
|
||||||
|
border: solid transparent;
|
||||||
|
content: " ";
|
||||||
|
height: 0;
|
||||||
|
width: 0;
|
||||||
|
position: absolute;
|
||||||
|
pointer-events: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-popup:after {
|
||||||
|
border-top-color: white;
|
||||||
|
border-width: 10px;
|
||||||
|
left: 48px;
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.ol-popup:before {
|
||||||
|
border-top-color: #cccccc;
|
||||||
|
border-width: 11px;
|
||||||
|
left: 48px;
|
||||||
|
margin-left: -11px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tooltip {
|
||||||
|
position: relative;
|
||||||
|
background: rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 4px;
|
||||||
|
color: white;
|
||||||
|
padding: 4px 8px;
|
||||||
|
opacity: 0.7;
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -3,7 +3,7 @@ module.exports = {
|
|||||||
// 图片地址
|
// 图片地址
|
||||||
imageUrl: '',
|
imageUrl: '',
|
||||||
// 天地图tk
|
// 天地图tk
|
||||||
apiKey: 'e4266a5e84fe6c10f60c559967f0a03f',
|
apiKey: 'aa9b92683ff22363aa17baa16599cff8',
|
||||||
// 显示标题
|
// 显示标题
|
||||||
showTitle: false,
|
showTitle: false,
|
||||||
// map 1、黑色模块 2、白色模块
|
// map 1、黑色模块 2、白色模块
|
||||||
|
|||||||
9
main.js
9
main.js
@@ -16,6 +16,10 @@ import {
|
|||||||
|
|
||||||
import empty from '@/components/empty/empty.vue'
|
import empty from '@/components/empty/empty.vue'
|
||||||
|
|
||||||
|
function haslogin() {
|
||||||
|
return !!store.state.user.token
|
||||||
|
}
|
||||||
|
|
||||||
function navTo(url, needLogin) {
|
function navTo(url, needLogin) {
|
||||||
console.log(url)
|
console.log(url)
|
||||||
if (needLogin) {
|
if (needLogin) {
|
||||||
@@ -46,11 +50,12 @@ Vue.component('jl-button', JlButton)
|
|||||||
Vue.component('jl-form', JlForm)
|
Vue.component('jl-form', JlForm)
|
||||||
Vue.component('jl-form-item', JlFormItem)
|
Vue.component('jl-form-item', JlFormItem)
|
||||||
Vue.component('cs-button', CSButton)
|
Vue.component('cs-button', CSButton)
|
||||||
Vue.component('super-map', superMapView)
|
// Vue.component('super-map', superMapView)
|
||||||
Vue.component('empty', empty)
|
Vue.component('empty', empty)
|
||||||
Vue.prototype.$api = {
|
Vue.prototype.$api = {
|
||||||
msg,
|
msg,
|
||||||
sleep
|
sleep,
|
||||||
|
haslogin
|
||||||
}
|
}
|
||||||
Vue.prototype.tools = tools
|
Vue.prototype.tools = tools
|
||||||
Vue.prototype.$config = config
|
Vue.prototype.$config = config
|
||||||
|
|||||||
@@ -65,11 +65,7 @@
|
|||||||
},
|
},
|
||||||
"h5": {
|
"h5": {
|
||||||
"sdkConfigs": {
|
"sdkConfigs": {
|
||||||
"maps": {
|
"maps": {}
|
||||||
"qqmap": {
|
|
||||||
"key": "FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
"template": "index.html",
|
"template": "index.html",
|
||||||
"router": {
|
"router": {
|
||||||
|
|||||||
@@ -1,153 +1,158 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="body">
|
<view class="body">
|
||||||
<!-- <view class="tab">
|
<!-- <view class="tab">
|
||||||
<v-tabs :tabs="['全部任务','全部岗位']" v-model="activeTab" color="#999" activeColor="#000" fontSize="36rx"
|
<v-tabs :tabs="['全部任务','全部岗位']" v-model="activeTab" color="#999" activeColor="#000" fontSize="36rx"
|
||||||
activeFontSize="36rpx" @change='changeTab' />
|
activeFontSize="36rpx" @change='changeTab' />
|
||||||
</view> -->
|
</view> -->
|
||||||
<block v-for="(page, pIndex) in data" :key="pIndex">
|
<block v-for="(page, pIndex) in data" :key="pIndex">
|
||||||
<block v-for="(item, index) in page" :key="item.id">
|
<block v-for="(item, index) in page" :key="item.id">
|
||||||
<view class="probody">
|
<view class="probody">
|
||||||
<company-list :companyitem="item" :noApply="false"></company-list>
|
<company-list :companyitem="item" :position="userLocation" :noApply="false"></company-list>
|
||||||
<view class="baddd"></view>
|
<view class="baddd"></view>
|
||||||
<!-- <block>
|
<!-- <block>
|
||||||
<image src="/static/img/tab.orange.svg" mode="" v-if="item.status === 1"></image>
|
<image src="/static/img/tab.orange.svg" mode="" v-if="item.status === 1"></image>
|
||||||
<image src="/static/img/tab.blue.svg" mode="" v-else-if="item.status === 2"></image>
|
<image src="/static/img/tab.blue.svg" mode="" v-else-if="item.status === 2"></image>
|
||||||
<image src="/static/img/tab.green.svg" mode="" v-else-if="item.status === 3"></image>
|
<image src="/static/img/tab.green.svg" mode="" v-else-if="item.status === 3"></image>
|
||||||
<image src="/static/img/tab.gray.svg" mode="" v-else></image>
|
<image src="/static/img/tab.gray.svg" mode="" v-else></image>
|
||||||
</block> -->
|
</block> -->
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
</block>
|
</block>
|
||||||
<view class="nothing" v-if="data.length === 0">
|
<view class="nothing" v-if="data.length === 0">
|
||||||
<image src="/static/img/pic_notask.svg" mode=""></image>
|
<image src="/static/img/pic_notask.svg" mode=""></image>
|
||||||
<view class="nothingContnt">
|
<view class="nothingContnt">
|
||||||
暂无收藏信息
|
暂无收藏信息
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import vTabs from '@/components/v-tabs/v-tabs.vue';
|
import vTabs from '@/components/v-tabs/v-tabs.vue';
|
||||||
import companyList from '@/components/companyList/collectionList.vue';
|
import companyList from '@/components/companyList/collectionList.vue';
|
||||||
import {
|
import {
|
||||||
myCollection
|
myCollection
|
||||||
} from '@/api/mission.js';
|
} from '@/api/mission.js';
|
||||||
|
import {
|
||||||
export default {
|
mapGetters
|
||||||
components: {
|
} from 'vuex'
|
||||||
vTabs,
|
export default {
|
||||||
companyList
|
components: {
|
||||||
},
|
vTabs,
|
||||||
data() {
|
companyList
|
||||||
return {
|
},
|
||||||
data: [],
|
data() {
|
||||||
activeTab: 0,
|
return {
|
||||||
current: 1,
|
data: [],
|
||||||
size: 10,
|
activeTab: 0,
|
||||||
total: 0
|
current: 1,
|
||||||
}
|
size: 10,
|
||||||
},
|
total: 0
|
||||||
onLoad: function() {
|
}
|
||||||
this.init()
|
},
|
||||||
},
|
computed: {
|
||||||
/*页面滚动到底部 换页*/
|
...mapGetters(['userLocation']),
|
||||||
onReachBottom: function() {
|
},
|
||||||
if (this.current <= Math.ceil(this.total / this.size)) {
|
onLoad: function() {
|
||||||
this.getData();
|
this.init()
|
||||||
} else {
|
},
|
||||||
uni.showToast({
|
/*页面滚动到底部 换页*/
|
||||||
icon: "none",
|
onReachBottom: function() {
|
||||||
title: '已经是最后一页',
|
if (this.current <= Math.ceil(this.total / this.size)) {
|
||||||
})
|
this.getData();
|
||||||
}
|
} else {
|
||||||
},
|
uni.showToast({
|
||||||
/*下拉刷新*/
|
icon: "none",
|
||||||
onPullDownRefresh:function(){
|
title: '已经是最后一页',
|
||||||
this.init()
|
})
|
||||||
},
|
}
|
||||||
methods: {
|
},
|
||||||
init(){
|
/*下拉刷新*/
|
||||||
this.current = 1
|
onPullDownRefresh: function() {
|
||||||
this.data = []
|
this.init()
|
||||||
this.getData()
|
},
|
||||||
},
|
methods: {
|
||||||
getData() {
|
init() {
|
||||||
var status = Number(this.activeTab) + 1
|
this.current = 1
|
||||||
myCollection(this.current, this.size, status).then(res => {
|
this.data = []
|
||||||
uni.stopPullDownRefresh();
|
this.getData()
|
||||||
if (this.current === 1) {
|
},
|
||||||
this.data = [];
|
getData() {
|
||||||
}
|
var status = Number(this.activeTab) + 1
|
||||||
this.current += 1;
|
myCollection(this.current, this.size, status).then(res => {
|
||||||
this.total = res.data.data.total;
|
uni.stopPullDownRefresh();
|
||||||
if (res.data.data && res.data.data.records.length) {
|
if (this.current === 1) {
|
||||||
this.data.push(res.data.data.records);
|
this.data = [];
|
||||||
}
|
}
|
||||||
})
|
this.current += 1;
|
||||||
},
|
this.total = res.data.data.total;
|
||||||
gomap: function() {
|
if (res.data.data && res.data.data.records.length) {
|
||||||
uni.navigateTo({
|
this.data.push(res.data.data.records);
|
||||||
url: '../mapSeach/mapSeach'
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
changeTab: function(e) {
|
gomap: function() {
|
||||||
this.activeTab = e;
|
uni.navigateTo({
|
||||||
this.init()
|
url: '../mapSeach/mapSeach'
|
||||||
}
|
})
|
||||||
}
|
},
|
||||||
}
|
changeTab: function(e) {
|
||||||
|
this.activeTab = e;
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
page {
|
page {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
height: 46px;
|
height: 46px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.probody image {
|
.probody image {
|
||||||
width: 88rpx;
|
width: 88rpx;
|
||||||
height: 88rpx;
|
height: 88rpx;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.probody {
|
.probody {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.baddd {
|
.baddd {
|
||||||
background: #f6f6f6;
|
background: #f6f6f6;
|
||||||
height: 20rpx;
|
height: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nothing {
|
.nothing {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 50%;
|
padding-top: 50%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nothing image {
|
.nothing image {
|
||||||
width: 400rpx;
|
width: 400rpx;
|
||||||
height: 200rpx;
|
height: 200rpx;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nothingContnt {
|
.nothingContnt {
|
||||||
font-family: PingFangSC-Regular;
|
font-family: PingFangSC-Regular;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-top: 30rpx;
|
margin-top: 30rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,153 +1,158 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="body">
|
<view class="body">
|
||||||
<!-- <view class="tab">
|
<!-- <view class="tab">
|
||||||
<v-tabs :tabs="['全部任务','全部岗位']" v-model="activeTab" color="#999" activeColor="#000" fontSize="36rx"
|
<v-tabs :tabs="['全部任务','全部岗位']" v-model="activeTab" color="#999" activeColor="#000" fontSize="36rx"
|
||||||
activeFontSize="36rpx" @change='changeTab' />
|
activeFontSize="36rpx" @change='changeTab' />
|
||||||
</view> -->
|
</view> -->
|
||||||
<block v-for="(page, pIndex) in data" :key="pIndex">
|
<block v-for="(page, pIndex) in data" :key="pIndex">
|
||||||
<block v-for="(item, index) in page" :key="item.id">
|
<block v-for="(item, index) in page" :key="item.id">
|
||||||
<view class="probody">
|
<view class="probody">
|
||||||
<company-list :companyitem="item" :noApply="false"></company-list>
|
<company-list :companyitem="item" :position="userLocation" :noApply="false"></company-list>
|
||||||
<view class="baddd"></view>
|
<view class="baddd"></view>
|
||||||
<!-- <block>
|
<!-- <block>
|
||||||
<image src="/static/img/tab.orange.svg" mode="" v-if="item.status === 1"></image>
|
<image src="/static/img/tab.orange.svg" mode="" v-if="item.status === 1"></image>
|
||||||
<image src="/static/img/tab.blue.svg" mode="" v-else-if="item.status === 2"></image>
|
<image src="/static/img/tab.blue.svg" mode="" v-else-if="item.status === 2"></image>
|
||||||
<image src="/static/img/tab.green.svg" mode="" v-else-if="item.status === 3"></image>
|
<image src="/static/img/tab.green.svg" mode="" v-else-if="item.status === 3"></image>
|
||||||
<image src="/static/img/tab.gray.svg" mode="" v-else></image>
|
<image src="/static/img/tab.gray.svg" mode="" v-else></image>
|
||||||
</block> -->
|
</block> -->
|
||||||
</view>
|
</view>
|
||||||
</block>
|
</block>
|
||||||
</block>
|
</block>
|
||||||
<view class="nothing" v-if="data.length === 0">
|
<view class="nothing" v-if="data.length === 0">
|
||||||
<image src="/static/img/pic_notask.svg" mode=""></image>
|
<image src="/static/img/pic_notask.svg" mode=""></image>
|
||||||
<view class="nothingContnt">
|
<view class="nothingContnt">
|
||||||
暂无申请信息
|
暂无申请信息
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import vTabs from '@/components/v-tabs/v-tabs.vue';
|
import vTabs from '@/components/v-tabs/v-tabs.vue';
|
||||||
import companyList from '@/components/companyList/applyList.vue';
|
import companyList from '@/components/companyList/applyList.vue';
|
||||||
import {
|
import {
|
||||||
myMission
|
myMission
|
||||||
} from '@/api/mission.js';
|
} from '@/api/mission.js';
|
||||||
|
import {
|
||||||
export default {
|
mapGetters
|
||||||
components: {
|
} from 'vuex'
|
||||||
vTabs,
|
export default {
|
||||||
companyList
|
components: {
|
||||||
},
|
vTabs,
|
||||||
data() {
|
companyList
|
||||||
return {
|
},
|
||||||
data: [],
|
data() {
|
||||||
activeTab: 0,
|
return {
|
||||||
current: 1,
|
data: [],
|
||||||
size: 10,
|
activeTab: 0,
|
||||||
total: 0
|
current: 1,
|
||||||
}
|
size: 10,
|
||||||
},
|
total: 0
|
||||||
onLoad: function() {
|
}
|
||||||
this.init()
|
},
|
||||||
},
|
onLoad: function() {
|
||||||
/*页面滚动到底部 换页*/
|
this.init()
|
||||||
onReachBottom: function() {
|
},
|
||||||
if (this.current <= Math.ceil(this.total / this.size)) {
|
/*页面滚动到底部 换页*/
|
||||||
this.getData();
|
onReachBottom: function() {
|
||||||
} else {
|
if (this.current <= Math.ceil(this.total / this.size)) {
|
||||||
uni.showToast({
|
this.getData();
|
||||||
icon: "none",
|
} else {
|
||||||
title: '已经是最后一页',
|
uni.showToast({
|
||||||
})
|
icon: "none",
|
||||||
}
|
title: '已经是最后一页',
|
||||||
},
|
})
|
||||||
/*下拉刷新*/
|
}
|
||||||
onPullDownRefresh:function(){
|
},
|
||||||
this.init()
|
/*下拉刷新*/
|
||||||
},
|
onPullDownRefresh: function() {
|
||||||
methods: {
|
this.init()
|
||||||
init(){
|
},
|
||||||
this.current = 1
|
computed: {
|
||||||
this.data = []
|
...mapGetters(['userLocation']),
|
||||||
this.getData()
|
},
|
||||||
},
|
methods: {
|
||||||
getData() {
|
init() {
|
||||||
var status = Number(this.activeTab) + 1
|
this.current = 1
|
||||||
myMission(this.current, this.size, status).then(res => {
|
this.data = []
|
||||||
uni.stopPullDownRefresh();
|
this.getData()
|
||||||
if (this.current === 1) {
|
},
|
||||||
this.data = [];
|
getData() {
|
||||||
}
|
var status = Number(this.activeTab) + 1
|
||||||
this.current += 1;
|
myMission(this.current, this.size, status).then(res => {
|
||||||
this.total = res.data.data.total;
|
uni.stopPullDownRefresh();
|
||||||
if (res.data.data && res.data.data.records.length) {
|
if (this.current === 1) {
|
||||||
this.data.push(res.data.data.records);
|
this.data = [];
|
||||||
}
|
}
|
||||||
})
|
this.current += 1;
|
||||||
},
|
this.total = res.data.data.total;
|
||||||
gomap: function() {
|
if (res.data.data && res.data.data.records.length) {
|
||||||
uni.navigateTo({
|
this.data.push(res.data.data.records);
|
||||||
url: '../mapSeach/mapSeach'
|
}
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
changeTab: function(e) {
|
gomap: function() {
|
||||||
this.activeTab = e;
|
uni.navigateTo({
|
||||||
this.init()
|
url: '../mapSeach/mapSeach'
|
||||||
}
|
})
|
||||||
}
|
},
|
||||||
}
|
changeTab: function(e) {
|
||||||
|
this.activeTab = e;
|
||||||
|
this.init()
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped>
|
<style scoped>
|
||||||
page {
|
page {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.tab {
|
.tab {
|
||||||
height: 46px;
|
height: 46px;
|
||||||
}
|
}
|
||||||
|
|
||||||
.body {
|
.body {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
}
|
}
|
||||||
|
|
||||||
.probody image {
|
.probody image {
|
||||||
width: 88rpx;
|
width: 88rpx;
|
||||||
height: 88rpx;
|
height: 88rpx;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
right: 0;
|
right: 0;
|
||||||
top: 0;
|
top: 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.probody {
|
.probody {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
}
|
}
|
||||||
|
|
||||||
.baddd {
|
.baddd {
|
||||||
background: #f6f6f6;
|
background: #f6f6f6;
|
||||||
height: 20rpx;
|
height: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nothing {
|
.nothing {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
padding-top: 50%;
|
padding-top: 50%;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nothing image {
|
.nothing image {
|
||||||
width: 400rpx;
|
width: 400rpx;
|
||||||
height: 200rpx;
|
height: 200rpx;
|
||||||
display: block;
|
display: block;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.nothingContnt {
|
.nothingContnt {
|
||||||
font-family: PingFangSC-Regular;
|
font-family: PingFangSC-Regular;
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: #666;
|
color: #666;
|
||||||
margin-top: 30rpx;
|
margin-top: 30rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -12,10 +12,10 @@
|
|||||||
<view v-if="loading" class="btn nocheck" loading="true"></view>
|
<view v-if="loading" class="btn nocheck" loading="true"></view>
|
||||||
<view v-else-if="validate" class="btn" @click="login">立即登录</view>
|
<view v-else-if="validate" class="btn" @click="login">立即登录</view>
|
||||||
<view v-else class="btn nocheck">立即登录</view>
|
<view v-else class="btn nocheck">立即登录</view>
|
||||||
<!-- <view class="changeLogintype">
|
<view class="changeLogintype">
|
||||||
<view class="" @click="goReg">手机注册</view>
|
<view class="" @click="goReg">手机注册</view>
|
||||||
<view class="" @click="goForget">忘记密码</view>
|
<view class="" @click="goForget">忘记密码</view>
|
||||||
</view> -->
|
</view>
|
||||||
</login-template>
|
</login-template>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
@@ -74,8 +74,8 @@
|
|||||||
},
|
},
|
||||||
login(e) {
|
login(e) {
|
||||||
if (this.validate) {
|
if (this.validate) {
|
||||||
this.userChecked = true;
|
// this.userChecked = true;
|
||||||
console.log(this.userChecked)
|
// console.log(this.userChecked)
|
||||||
// if (!this.userChecked) {
|
// if (!this.userChecked) {
|
||||||
// uni.showToast({
|
// uni.showToast({
|
||||||
// title:'请先阅读并同意《服务及隐私协议》',
|
// title:'请先阅读并同意《服务及隐私协议》',
|
||||||
@@ -169,4 +169,15 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
/* #endif */
|
/* #endif */
|
||||||
|
.changeLogintype {
|
||||||
|
margin: 0 auto;
|
||||||
|
font-family: PingFangSC-Regular;
|
||||||
|
font-size: 14px;
|
||||||
|
color: #1B66FF;
|
||||||
|
margin-top: 15px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -1,106 +1,113 @@
|
|||||||
<template>
|
<template>
|
||||||
<view class="login-body">
|
<view class="login-body">
|
||||||
<view class="nothing" style="height: 100rpx;"></view>
|
<view class="nothing" style="height: 100rpx;"></view>
|
||||||
<view class="titleText">{{title}}</view>
|
<view class="titleText">{{title}}</view>
|
||||||
<slot></slot>
|
<slot></slot>
|
||||||
<view v-if="!hideBottom" class="bottomt">
|
<view v-if="!hideBottom" class="bottomt">
|
||||||
<view class="bottomt-box">
|
<view class="bottomt-box">
|
||||||
<!-- <view class="check-icon" @click="checkChanged">
|
<view class="check-icon" @click="checkChanged">
|
||||||
<image v-if="userChecked" src="../../static/img/checkOk.png" style="width: 30rpx;height:30rpx;"></image>
|
<image v-if="userChecked" :src="checked" style="width: 30rpx;height:30rpx;">
|
||||||
<view class="noneCheck" v-else></view>
|
</image>
|
||||||
</view>
|
<view class="noneCheck" v-else></view>
|
||||||
已阅读并同意<text class="bottomtText" @click="goMent">《服务及隐私协议》</text> -->
|
</view>
|
||||||
|
已阅读并同意<text class="bottomtText" @click="goMent">《服务及隐私协议》</text>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {mapGetters} from 'vuex'
|
import checked from '../../static/img/checkOk.png'
|
||||||
export default {
|
import {
|
||||||
|
mapGetters
|
||||||
|
} from 'vuex'
|
||||||
|
export default {
|
||||||
|
|
||||||
data(){
|
data() {
|
||||||
return{
|
return {
|
||||||
|
checked
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
title: String,
|
||||||
|
hideBottom: Boolean
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
goMent() {
|
||||||
|
uni.navigateTo({
|
||||||
|
url: '/pages/user/agreement'
|
||||||
|
})
|
||||||
|
},
|
||||||
|
checkChanged() {
|
||||||
|
let checkedValue = !this.userChecked;
|
||||||
|
this.$store.dispatch('UserCheckedBtn', checkedValue)
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
props: {
|
computed: {
|
||||||
title: String,
|
...mapGetters(['userChecked'])
|
||||||
hideBottom: Boolean
|
},
|
||||||
},
|
mounted() {
|
||||||
methods: {
|
|
||||||
goMent() {
|
|
||||||
uni.navigateTo({
|
|
||||||
url: '/pages/user/agreement'
|
|
||||||
})
|
|
||||||
},
|
|
||||||
checkChanged(){
|
|
||||||
let checkedValue=!this.userChecked;
|
|
||||||
this.$store.dispatch('UserCheckedBtn',checkedValue)
|
|
||||||
|
|
||||||
}
|
},
|
||||||
},
|
}
|
||||||
computed:{
|
|
||||||
...mapGetters(['userChecked'])
|
|
||||||
},
|
|
||||||
mounted() {
|
|
||||||
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<style lang="scss">
|
||||||
.login-body {
|
.login-body {
|
||||||
min-height: 880rpx;
|
min-height: 880rpx;
|
||||||
height: 100%;
|
height: 100%;
|
||||||
position: relative;
|
position: relative;
|
||||||
width: 80%;
|
width: 80%;
|
||||||
margin: 0 auto;
|
margin: 0 auto;
|
||||||
}
|
}
|
||||||
|
|
||||||
.titleText {
|
.titleText {
|
||||||
font-family: PingFangSC-Medium;
|
font-family: PingFangSC-Medium;
|
||||||
font-size: 46rpx;
|
font-size: 46rpx;
|
||||||
color: #333333;
|
color: #333333;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
padding: 30rpx 0;
|
padding: 30rpx 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottomtText {
|
.bottomtText {
|
||||||
color: #151515;
|
color: #151515;
|
||||||
}
|
}
|
||||||
|
|
||||||
.bottomt {
|
.bottomt {
|
||||||
font-family: PingFangSC-Regular;
|
font-family: PingFangSC-Regular;
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
color: #999999;
|
color: #999999;
|
||||||
position: absolute;
|
position: absolute;
|
||||||
bottom: 80rpx;
|
bottom: 80rpx;
|
||||||
left: 0;
|
left: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
.bottomt-box{
|
|
||||||
display: flex;
|
.bottomt-box {
|
||||||
justify-content: center;
|
display: flex;
|
||||||
align-items: center;
|
justify-content: center;
|
||||||
}
|
align-items: center;
|
||||||
}
|
}
|
||||||
.check-icon{
|
}
|
||||||
font-size: 28rpx;
|
|
||||||
font-weight: 400;
|
.check-icon {
|
||||||
color: #999999;
|
font-size: 28rpx;
|
||||||
align-items: center;
|
font-weight: 400;
|
||||||
width: 30rpx;
|
color: #999999;
|
||||||
height: 30rpx;
|
align-items: center;
|
||||||
margin-right: 12rpx;
|
width: 30rpx;
|
||||||
.noneCheck{
|
height: 30rpx;
|
||||||
width: 26rpx;
|
margin-right: 12rpx;
|
||||||
height: 26rpx;
|
|
||||||
border-radius: 50%;
|
.noneCheck {
|
||||||
border: 2rpx solid #999999;
|
width: 26rpx;
|
||||||
margin-right:12rpx;
|
height: 26rpx;
|
||||||
}
|
border-radius: 50%;
|
||||||
}
|
border: 2rpx solid #999999;
|
||||||
|
margin-right: 12rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -133,7 +133,7 @@
|
|||||||
getLocation: function() {
|
getLocation: function() {
|
||||||
var that = this;
|
var that = this;
|
||||||
uni.getLocation({
|
uni.getLocation({
|
||||||
type: 'gcj02',
|
type: 'wgs84',
|
||||||
success: function(res) {
|
success: function(res) {
|
||||||
//初始化当前点
|
//初始化当前点
|
||||||
var point = {
|
var point = {
|
||||||
|
|||||||
@@ -3,16 +3,27 @@
|
|||||||
<view class="app-top">
|
<view class="app-top">
|
||||||
<view class="top-search">
|
<view class="top-search">
|
||||||
<view class="top-input">
|
<view class="top-input">
|
||||||
<input class="put" type="text" placeholder-class="put-pla" v-model="searchValue"
|
<input
|
||||||
placeholder="搜索附近岗位或任务">
|
class="put"
|
||||||
|
type="text"
|
||||||
|
placeholder-class="put-pla"
|
||||||
|
v-model="searchValue"
|
||||||
|
placeholder="搜索附近岗位或任务"
|
||||||
|
/>
|
||||||
<button class="input-btn" @tap="search">搜索</button>
|
<button class="input-btn" @tap="search">搜索</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="view-map">
|
<view class="view-map">
|
||||||
<super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
<!-- <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
||||||
:zoom="14" :min-zoom="10" :max-zoom="20" @markertap="clickmark" @regionchange="show = false"
|
:zoom="14" :min-zoom="10" :max-zoom="20" @markertap="clickmark" @regionchange="show = false"
|
||||||
:MapUrl="$config.supperMap" :flag-tip="false"></super-map>
|
:MapUrl="$config.supperMap" :flag-tip="false"></super-map> -->
|
||||||
|
<zhuo-tianditu-MultiPoint-Mapper
|
||||||
|
ref="tMap"
|
||||||
|
@onSelect="clickmark"
|
||||||
|
:api-key="$config.apiKey"
|
||||||
|
></zhuo-tianditu-MultiPoint-Mapper>
|
||||||
|
|
||||||
<!-- <view id="map" ></view> -->
|
<!-- <view id="map" ></view> -->
|
||||||
<!-- <map style="width: 100%;height: 100%;" scale="16" :latitude="latitude" :longitude="longitude"
|
<!-- <map style="width: 100%;height: 100%;" scale="16" :latitude="latitude" :longitude="longitude"
|
||||||
:markers="covers" @markertap="clickmark" @regionchange="show = false"></map> -->
|
:markers="covers" @markertap="clickmark" @regionchange="show = false"></map> -->
|
||||||
@@ -22,21 +33,22 @@
|
|||||||
<swiper-item class="wiperItem">
|
<swiper-item class="wiperItem">
|
||||||
<view class="swiper-item uni-bg-red">
|
<view class="swiper-item uni-bg-red">
|
||||||
<view class="item-content">
|
<view class="item-content">
|
||||||
<view class="content-title"> {{productInfo.missionTitle}} </view>
|
<view class="content-title">{{ productInfo.missionTitle }}</view>
|
||||||
<view class="color_999999 fs_12 mar_top5">
|
<view class="color_999999 fs_12 mar_top5">
|
||||||
<uni-icons type="location" color="#999999" size="12"></uni-icons>
|
<uni-icons type="location" color="#999999" size="12"></uni-icons>
|
||||||
{{ productInfo.cityId }} ｜ {{productInfo.address}} ｜ 距离：{{distance}}
|
{{ productInfo.cityId }} ｜ {{ productInfo.address }} ｜ 距离：{{ distance }}
|
||||||
</view>
|
</view>
|
||||||
<view class="color_999999 fs_12 mar_top5">
|
<view class="color_999999 fs_12 mar_top5">
|
||||||
<uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
|
<uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
|
||||||
招聘时间: {{productInfo.stime}}-{{productInfo.etime}}
|
招聘时间: {{ productInfo.stime }}-{{ productInfo.etime }}
|
||||||
</view>
|
</view>
|
||||||
<view class="color_999999 fs_12 mar_top5">
|
<view class="color_999999 fs_12 mar_top5">
|
||||||
<uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
|
<uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
|
||||||
{{productInfo.experienceDesc}} | {{education[productInfo.education]}}
|
{{ productInfo.experienceDesc }} | {{ education[productInfo.education] }}
|
||||||
</view>
|
</view>
|
||||||
<button class="btns" hover-class="active" @tap="openMap">
|
<button class="btns" hover-class="active" @tap="openMap">
|
||||||
<image class="btn-img" src="../../static/img/direction2.png" />查看详情
|
<image class="btn-img" src="../../static/img/direction2.png" />
|
||||||
|
查看详情
|
||||||
</button>
|
</button>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -49,356 +61,357 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { addZeroPrefix, getDistanceFromLatLonInKm } from '@/untils/tools.js';
|
||||||
addZeroPrefix,
|
import testData from '@/common/textdata.js';
|
||||||
getDistanceFromLatLonInKm
|
import { geQueryJobsByNearby } from '@/api/map.js';
|
||||||
} from '@/untils/tools.js'
|
import { mapGetters } from 'vuex';
|
||||||
import testData from '@/common/textdata.js';
|
let taskpoint = require('../../static/img/taskpoint.png');
|
||||||
import {
|
let gwpoint = require('../../static/img/gwpoint.png');
|
||||||
geQueryJobsByNearby
|
let mypoint = require('../../static/img/mypoint.png');
|
||||||
} from '@/api/map.js'
|
export default {
|
||||||
let taskpoint = require('../../static/img/taskpoint.png');
|
data() {
|
||||||
let gwpoint = require('../../static/img/gwpoint.png');
|
return {
|
||||||
let mypoint = require('../../static/img/mypoint.png');
|
education: testData.education,
|
||||||
export default {
|
show: false,
|
||||||
data() {
|
ID: 1,
|
||||||
return {
|
searchValue: '',
|
||||||
education: testData.education,
|
latitude: 31.13398,
|
||||||
show: false,
|
longitude: 104.404419,
|
||||||
ID: 1,
|
covers: [],
|
||||||
searchValue: '',
|
rateValue: 2,
|
||||||
latitude: 31.133980,
|
productInfo: {},
|
||||||
longitude: 104.404419,
|
};
|
||||||
covers: [],
|
},
|
||||||
rateValue: 2,
|
computed: {
|
||||||
productInfo: {},
|
...mapGetters(['userLocation']),
|
||||||
};
|
distance() {
|
||||||
|
const { lon, lat } = this.productInfo;
|
||||||
|
if (lon) {
|
||||||
|
const { m, km } = getDistanceFromLatLonInKm(lat, lon, this.latitude, this.longitude);
|
||||||
|
return m > 1000 ? `${km.toFixed(2)}km` : `${m.toFixed(2)}m`;
|
||||||
|
}
|
||||||
|
return '无';
|
||||||
},
|
},
|
||||||
computed: {
|
},
|
||||||
distance() {
|
mounted() {
|
||||||
const {
|
const _this = this;
|
||||||
lon,
|
uni.getLocation({
|
||||||
lat
|
type: 'wgs84',
|
||||||
} = this.productInfo
|
success: function (res) {
|
||||||
if (lon) {
|
console.log(res, '成功获得周边信息');
|
||||||
const {
|
const { longitude, latitude } = res;
|
||||||
m,
|
_this.latitude = latitude;
|
||||||
km
|
_this.longitude = longitude;
|
||||||
} = getDistanceFromLatLonInKm(lat, lon, this.latitude, this.longitude)
|
_this.getList(longitude, latitude).then((covers) => {
|
||||||
return m > 1000 ? `${km.toFixed(2)}km` : `${m.toFixed(2)}m`
|
_this.covers = covers;
|
||||||
}
|
_this.$nextTick(() => {
|
||||||
return '无'
|
_this.$refs.tMap.addFeature(covers);
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
fail: function (err) {
|
||||||
|
console.log(err, '无法获得周边信息');
|
||||||
|
_this.$api.msg('无法获得周边信息');
|
||||||
|
},
|
||||||
|
complete: function (e) {},
|
||||||
|
});
|
||||||
|
console.log('userLocation', this.userLocation);
|
||||||
|
if (this.userLocation) {
|
||||||
|
const { longitude, latitude } = this.userLocation;
|
||||||
|
this.$refs.tMap.open(longitude, latitude);
|
||||||
|
} else {
|
||||||
|
this.$store.dispatch('getUserLocation');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
onShow() {
|
||||||
|
// const _this = this
|
||||||
|
// this.mockGetLocation().then((myPoint) => {
|
||||||
|
// this.latitude = myPoint.latitude
|
||||||
|
// this.longitude = myPoint.longitude
|
||||||
|
// _this.getList(_this.longitude, _this.latitude).then((covers) => {
|
||||||
|
// _this.$api.msg('成功获得周边信息')
|
||||||
|
// console.log(covers)
|
||||||
|
// _this.$refs.uMap.addFeature(covers)
|
||||||
|
// })
|
||||||
|
// })
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
onSelect(item) {},
|
||||||
|
openMap(lon, lat) {
|
||||||
|
//打开地图，并将门店位置传入
|
||||||
|
// type: post 岗位 mission 任务
|
||||||
|
switch (this.productInfo.type) {
|
||||||
|
case 'post':
|
||||||
|
const no = encodeURIComponent(this.productInfo.id);
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/projectInfo/workInfo?workId=${encodeURIComponent(no)}&isCan=${1}`,
|
||||||
|
});
|
||||||
|
break;
|
||||||
|
case 'mission':
|
||||||
|
const no1 = encodeURIComponent(this.productInfo.missionNo);
|
||||||
|
uni.navigateTo({
|
||||||
|
url: `/pages/projectInfo/projectInfo?missionNo=${no1}&isCan=${1}`,
|
||||||
|
});
|
||||||
|
break;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
mounted() {
|
search() {
|
||||||
const _this = this
|
const _this = this;
|
||||||
uni.getLocation({
|
uni.getLocation({
|
||||||
type: 'gcj02',
|
type: 'wgs84',
|
||||||
success: function(res) {
|
success: function (res) {
|
||||||
const {
|
const { longitude, latitude } = res;
|
||||||
longitude,
|
_this.latitude = latitude;
|
||||||
latitude
|
_this.longitude = longitude;
|
||||||
} = res
|
|
||||||
_this.latitude = latitude
|
|
||||||
_this.longitude = longitude
|
|
||||||
_this.getList(longitude, latitude).then((covers) => {
|
_this.getList(longitude, latitude).then((covers) => {
|
||||||
_this.$refs.uMap.addFeature(covers)
|
_this.$api.msg('成功获得周边信息');
|
||||||
})
|
_this.$refs.uMap.addFeature(covers);
|
||||||
|
});
|
||||||
},
|
},
|
||||||
fail: function(err) {
|
fail: function (err) {
|
||||||
_this.$api.msg('无法获得周边信息')
|
_this.$api.msg('无法获得周边信息');
|
||||||
},
|
},
|
||||||
complete: function(e) {}
|
complete: function (e) {},
|
||||||
})
|
});
|
||||||
},
|
// this.getList(this.longitude, this.latitude).then((covers) => {
|
||||||
onShow() {
|
// this.$api.msg('成功获得周边信息')
|
||||||
// const _this = this
|
// console.log(covers)
|
||||||
// this.mockGetLocation().then((myPoint) => {
|
// this.$refs.uMap.addFeature(covers)
|
||||||
// this.latitude = myPoint.latitude
|
|
||||||
// this.longitude = myPoint.longitude
|
|
||||||
// _this.getList(_this.longitude, _this.latitude).then((covers) => {
|
|
||||||
// _this.$api.msg('成功获得周边信息')
|
|
||||||
// console.log(covers)
|
|
||||||
// _this.$refs.uMap.addFeature(covers)
|
|
||||||
// })
|
|
||||||
// })
|
// })
|
||||||
},
|
},
|
||||||
methods: {
|
clickmark(cover) {
|
||||||
openMap(lon, lat) {
|
if (cover.markerId === 1) return;
|
||||||
//打开地图，并将门店位置传入
|
this.show = true;
|
||||||
// type: post 岗位 mission 任务
|
this.productInfo = cover.info;
|
||||||
switch (this.productInfo.type) {
|
},
|
||||||
case 'post':
|
mockGetLocation() {
|
||||||
const no = encodeURIComponent(1)
|
return new Promise((resolve) => {
|
||||||
uni.navigateTo({
|
resolve({
|
||||||
url: `/pages/projectInfo/workInfo?workId=${encodeURIComponent(no)}&isCan=${1}`
|
longitude: 104.40632,
|
||||||
})
|
latitude: 31.122989,
|
||||||
break
|
altitude: null,
|
||||||
case 'mission':
|
accuracy: 25.998,
|
||||||
const no1 = encodeURIComponent(this.productInfo.missionNo)
|
altitudeAccuracy: null,
|
||||||
uni.navigateTo({
|
heading: null,
|
||||||
url: `/pages/projectInfo/projectInfo?missionNo=${no1}&isCan=${1}`
|
speed: null,
|
||||||
})
|
errMsg: 'getLocation:ok',
|
||||||
break
|
verticalAccuracy: 0,
|
||||||
|
horizontalAccuracy: 25.998,
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async getList(lon, lat) {
|
||||||
|
return new Promise(async (resolve) => {
|
||||||
|
let params = {
|
||||||
|
lon,
|
||||||
|
lat,
|
||||||
|
distanceRange: 20,
|
||||||
|
taskTitle: this.searchValue,
|
||||||
|
};
|
||||||
|
let resData = await geQueryJobsByNearby(params);
|
||||||
|
if (resData.data.code === 200) {
|
||||||
|
const arr = resData.data.data.map((item) => ({
|
||||||
|
id: item.id,
|
||||||
|
longitude: item.lon,
|
||||||
|
latitude: item.lat,
|
||||||
|
lon: item.lon,
|
||||||
|
lat: item.lat,
|
||||||
|
label: item.missionTitle,
|
||||||
|
iconPath: item.type === 'post' ? gwpoint : taskpoint,
|
||||||
|
width: 20,
|
||||||
|
height: 20,
|
||||||
|
title: item.missionTitle,
|
||||||
|
callout: {
|
||||||
|
content: item.missionTitle,
|
||||||
|
fontSize: 10,
|
||||||
|
borderColor: 'blue',
|
||||||
|
},
|
||||||
|
info: item,
|
||||||
|
}));
|
||||||
|
arr.push({
|
||||||
|
id: 1,
|
||||||
|
latitude: lat,
|
||||||
|
longitude: lon,
|
||||||
|
iconPath: mypoint,
|
||||||
|
title: '我的位置',
|
||||||
|
width: 20,
|
||||||
|
height: 20,
|
||||||
|
lon: lat,
|
||||||
|
lat: lon,
|
||||||
|
label: '我的位置',
|
||||||
|
});
|
||||||
|
resolve(arr);
|
||||||
}
|
}
|
||||||
},
|
});
|
||||||
search() {
|
},
|
||||||
const _this = this
|
},
|
||||||
uni.getLocation({
|
};
|
||||||
type: 'gcj02',
|
|
||||||
success: function(res) {
|
|
||||||
const {
|
|
||||||
longitude,
|
|
||||||
latitude
|
|
||||||
} = res
|
|
||||||
_this.latitude = latitude
|
|
||||||
_this.longitude = longitude
|
|
||||||
_this.getList(longitude, latitude).then((covers) => {
|
|
||||||
_this.$api.msg('成功获得周边信息')
|
|
||||||
_this.$refs.uMap.addFeature(covers)
|
|
||||||
})
|
|
||||||
},
|
|
||||||
fail: function(err) {
|
|
||||||
_this.$api.msg('无法获得周边信息')
|
|
||||||
},
|
|
||||||
complete: function(e) {}
|
|
||||||
})
|
|
||||||
// this.getList(this.longitude, this.latitude).then((covers) => {
|
|
||||||
// this.$api.msg('成功获得周边信息')
|
|
||||||
// console.log(covers)
|
|
||||||
// this.$refs.uMap.addFeature(covers)
|
|
||||||
// })
|
|
||||||
},
|
|
||||||
clickmark(cover) {
|
|
||||||
if (cover.markerId === 1) return
|
|
||||||
this.show = true;
|
|
||||||
this.productInfo = cover.info
|
|
||||||
},
|
|
||||||
mockGetLocation() {
|
|
||||||
return new Promise((resolve) => {
|
|
||||||
resolve({
|
|
||||||
"longitude": 104.40632,
|
|
||||||
"latitude": 31.122989,
|
|
||||||
"altitude": null,
|
|
||||||
"accuracy": 25.998,
|
|
||||||
"altitudeAccuracy": null,
|
|
||||||
"heading": null,
|
|
||||||
"speed": null,
|
|
||||||
"errMsg": "getLocation:ok",
|
|
||||||
"verticalAccuracy": 0,
|
|
||||||
"horizontalAccuracy": 25.998
|
|
||||||
})
|
|
||||||
})
|
|
||||||
},
|
|
||||||
async getList(lon, lat) {
|
|
||||||
return new Promise(async (resolve) => {
|
|
||||||
let params = {
|
|
||||||
lon,
|
|
||||||
lat,
|
|
||||||
distanceRange: 20,
|
|
||||||
taskTitle: this.searchValue
|
|
||||||
}
|
|
||||||
let resData = await geQueryJobsByNearby(params)
|
|
||||||
if (resData.data.code === 200) {
|
|
||||||
const arr = resData.data.data.map((item) => ({
|
|
||||||
id: item.id,
|
|
||||||
longitude: item.lon,
|
|
||||||
latitude: item.lat,
|
|
||||||
iconPath: item.type === 'post' ? gwpoint : taskpoint,
|
|
||||||
width: 20,
|
|
||||||
height: 20,
|
|
||||||
title: item.missionTitle,
|
|
||||||
callout: {
|
|
||||||
content: item.missionTitle,
|
|
||||||
fontSize: 10,
|
|
||||||
borderColor: 'blue',
|
|
||||||
},
|
|
||||||
info: item
|
|
||||||
}))
|
|
||||||
arr.push({
|
|
||||||
id: 1,
|
|
||||||
latitude: lat,
|
|
||||||
longitude: lon,
|
|
||||||
iconPath: mypoint,
|
|
||||||
title: '我的位置',
|
|
||||||
width: 20,
|
|
||||||
height: 20
|
|
||||||
})
|
|
||||||
resolve(arr)
|
|
||||||
}
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
.color_999999 {
|
.color_999999 {
|
||||||
color: #999999;
|
color: #999999;
|
||||||
}
|
}
|
||||||
|
|
||||||
.fs_12 {
|
.fs_12 {
|
||||||
font-size: 24rpx;
|
font-size: 24rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.mar_top5 {
|
.mar_top5 {
|
||||||
margin-top: 10rpx;
|
margin-top: 10rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.active {
|
.active {
|
||||||
background: #EAEAEA !important;
|
background: #eaeaea !important;
|
||||||
color: #AFAFAF;
|
color: #afafaf;
|
||||||
}
|
}
|
||||||
|
|
||||||
.card_mark {
|
.card_mark {
|
||||||
.mark_l {
|
.mark_l {
|
||||||
width: 56rpx;
|
width: 56rpx;
|
||||||
height: 28rpx;
|
height: 28rpx;
|
||||||
border-radius: 12rpx 0 12rpx 12rpx;
|
border-radius: 12rpx 0 12rpx 12rpx;
|
||||||
background: linear-gradient(157deg, #A043C1 0%, #4133A2 100%);
|
background: linear-gradient(157deg, #a043c1 0%, #4133a2 100%);
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
font-family: PingFang-SC-Bold, PingFang-SC;
|
font-family: PingFang-SC-Bold, PingFang-SC;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
color: #FFFFFF;
|
color: #ffffff;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.position-bottom {
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
height: 406rpx;
|
||||||
|
bottom: 50rpx;
|
||||||
|
|
||||||
|
.uni-margin-wrap {
|
||||||
|
height: 406rpx;
|
||||||
|
|
||||||
|
.swiper {
|
||||||
|
height: 406rpx;
|
||||||
|
|
||||||
|
.wiperItem {
|
||||||
|
padding-left: 50rpx;
|
||||||
|
height: 406rpx;
|
||||||
|
width: 660rpx !important;
|
||||||
|
|
||||||
|
.swiper-item {
|
||||||
|
width: 660rpx;
|
||||||
|
height: 406rpx;
|
||||||
|
background: #ffffff;
|
||||||
|
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
||||||
|
border-radius: 27rpx;
|
||||||
|
overflow: hidden;
|
||||||
|
|
||||||
|
.item-top {
|
||||||
|
display: flex;
|
||||||
|
align-content: center;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
.top-img {
|
||||||
|
width: 215rpx;
|
||||||
|
height: 120rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item-content {
|
||||||
|
padding: 15rpx 33rpx;
|
||||||
|
|
||||||
|
.content-title {
|
||||||
|
font-size: 32rpx;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btns {
|
||||||
|
margin-top: 20rpx;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
width: 223rpx;
|
||||||
|
height: 64rpx;
|
||||||
|
background: linear-gradient(to right, #a043c1 0%, #4133a2 100%);
|
||||||
|
border-radius: 15rpx;
|
||||||
|
color: #ffffff;
|
||||||
|
font-size: 26rpx;
|
||||||
|
font-weight: 800;
|
||||||
|
color: #ffffff;
|
||||||
|
line-height: 64rpx;
|
||||||
|
|
||||||
|
.btn-img {
|
||||||
|
width: 32rpx;
|
||||||
|
height: 32rpx;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.app_container {
|
||||||
|
position: fixed;
|
||||||
|
left: 0;
|
||||||
|
top: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
|
||||||
|
.app-top {
|
||||||
|
display: flex;
|
||||||
|
background: linear-gradient(to right, #e8e8e8, #e8e8e8);
|
||||||
|
padding-bottom: 16rpx;
|
||||||
|
padding-top: 24rpx;
|
||||||
|
|
||||||
|
.top-search {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.position-bottom {
|
.top-input {
|
||||||
position: absolute;
|
width: 710rpx;
|
||||||
left: 0;
|
|
||||||
right: 0;
|
|
||||||
height: 406rpx;
|
|
||||||
bottom: 50rpx;
|
|
||||||
|
|
||||||
.uni-margin-wrap {
|
.put {
|
||||||
height: 406rpx;
|
padding-left: 30rpx;
|
||||||
|
height: 72rpx;
|
||||||
.swiper {
|
background: #ffffff;
|
||||||
height: 406rpx;
|
border-radius: 36rpx;
|
||||||
|
|
||||||
.wiperItem {
|
|
||||||
padding-left: 50rpx;
|
|
||||||
height: 406rpx;
|
|
||||||
width: 660rpx !important;
|
|
||||||
|
|
||||||
.swiper-item {
|
|
||||||
width: 660rpx;
|
|
||||||
height: 406rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(0, 0, 0, 0.5);
|
|
||||||
border-radius: 27rpx;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
.item-top {
|
|
||||||
display: flex;
|
|
||||||
align-content: center;
|
|
||||||
justify-content: space-between;
|
|
||||||
|
|
||||||
.top-img {
|
|
||||||
width: 215rpx;
|
|
||||||
height: 120rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.item-content {
|
|
||||||
padding: 15rpx 33rpx;
|
|
||||||
|
|
||||||
.content-title {
|
|
||||||
font-size: 32rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.btns {
|
|
||||||
margin-top: 20rpx;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
width: 223rpx;
|
|
||||||
height: 64rpx;
|
|
||||||
background: linear-gradient(to right, #A043C1 0%, #4133A2 100%);
|
|
||||||
border-radius: 15rpx;
|
|
||||||
color: #FFFFFF;
|
|
||||||
font-size: 26rpx;
|
|
||||||
font-weight: 800;
|
|
||||||
color: #FFFFFF;
|
|
||||||
line-height: 64rpx;
|
|
||||||
|
|
||||||
.btn-img {
|
|
||||||
width: 32rpx;
|
|
||||||
height: 32rpx;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
|
||||||
|
|
||||||
|
/deep/ .put-pla {
|
||||||
|
height: 33rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
font-weight: 400;
|
||||||
|
color: #999999;
|
||||||
|
line-height: 33rpx;
|
||||||
|
}
|
||||||
|
|
||||||
}
|
.input-btn {
|
||||||
}
|
position: absolute;
|
||||||
|
right: 30rpx;
|
||||||
.app_container {
|
top: 50%;
|
||||||
position: fixed;
|
transform: translate(0, -50%);
|
||||||
left: 0;
|
color: #ffffff;
|
||||||
top: 0;
|
width: 120rpx;
|
||||||
right: 0;
|
height: 56rpx;
|
||||||
bottom: 0;
|
line-height: 56rpx;
|
||||||
display: flex;
|
font-size: 28rpx;
|
||||||
flex-direction: column;
|
background: linear-gradient(157deg, #a043c1 0%, #4133a2 100%);
|
||||||
|
border-radius: 29rpx;
|
||||||
.app-top {
|
|
||||||
display: flex;
|
|
||||||
background: linear-gradient(to right, #e8e8e8, #e8e8e8);
|
|
||||||
padding-bottom: 16rpx;
|
|
||||||
padding-top: 24rpx;
|
|
||||||
|
|
||||||
.top-search {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
.top-input {
|
|
||||||
width: 710rpx;
|
|
||||||
|
|
||||||
.put {
|
|
||||||
padding-left: 30rpx;
|
|
||||||
height: 72rpx;
|
|
||||||
background: #FFFFFF;
|
|
||||||
border-radius: 36rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
/deep/ .put-pla {
|
|
||||||
height: 33rpx;
|
|
||||||
font-size: 24rpx;
|
|
||||||
font-weight: 400;
|
|
||||||
color: #999999;
|
|
||||||
line-height: 33rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
.input-btn {
|
|
||||||
position: absolute;
|
|
||||||
right: 30rpx;
|
|
||||||
top: 50%;
|
|
||||||
transform: translate(0, -50%);
|
|
||||||
color: #FFFFFF;
|
|
||||||
width: 120rpx;
|
|
||||||
height: 56rpx;
|
|
||||||
line-height: 56rpx;
|
|
||||||
font-size: 28rpx;
|
|
||||||
background: linear-gradient(157deg, #A043C1 0%, #4133A2 100%);
|
|
||||||
border-radius: 29rpx;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.view-map {
|
|
||||||
flex: 1;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.view-map {
|
||||||
|
flex: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
@@ -31,7 +31,7 @@
|
|||||||
<block v-if="activeTab == 0">
|
<block v-if="activeTab == 0">
|
||||||
<view v-if="newList.length > 0">
|
<view v-if="newList.length > 0">
|
||||||
<block v-for="(item, index) in newList" :key="index">
|
<block v-for="(item, index) in newList" :key="index">
|
||||||
<companyList :companyitem="item"></companyList>
|
<companyList :companyitem="item" :position="userLocation"></companyList>
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
<view v-else>
|
<view v-else>
|
||||||
@@ -51,7 +51,7 @@
|
|||||||
|
|
||||||
<view v-if="companyList.length > 0">
|
<view v-if="companyList.length > 0">
|
||||||
<block v-for="(item, index) in companyList" :key="item.id">
|
<block v-for="(item, index) in companyList" :key="item.id">
|
||||||
<workList :companyitem="item" :near="activeTab === 0"></workList>
|
<workList :companyitem="item" :position="userLocation" :near="activeTab === 0"></workList>
|
||||||
</block>
|
</block>
|
||||||
</view>
|
</view>
|
||||||
<view v-else>
|
<view v-else>
|
||||||
@@ -109,7 +109,9 @@
|
|||||||
getcoder
|
getcoder
|
||||||
} from "@/api/map.js";
|
} from "@/api/map.js";
|
||||||
import verticalMenu from '@/components/vertical-menu/vertical-menu.vue';
|
import verticalMenu from '@/components/vertical-menu/vertical-menu.vue';
|
||||||
|
import {
|
||||||
|
mapGetters
|
||||||
|
} from 'vuex'
|
||||||
export default {
|
export default {
|
||||||
components: {
|
components: {
|
||||||
vTabs,
|
vTabs,
|
||||||
@@ -117,15 +119,16 @@
|
|||||||
verticalMenu,
|
verticalMenu,
|
||||||
workList
|
workList
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
...mapGetters(['userLocation']),
|
||||||
|
},
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
policyContentList: [],
|
policyContentList: [],
|
||||||
activeTab: 0,
|
activeTab: '0',
|
||||||
companyList: [],
|
companyList: [],
|
||||||
recommendList: [],
|
recommendList: [],
|
||||||
newList: [],
|
newList: [],
|
||||||
|
|
||||||
nearPage: {
|
nearPage: {
|
||||||
current: 1,
|
current: 1,
|
||||||
size: 10,
|
size: 10,
|
||||||
@@ -142,10 +145,7 @@
|
|||||||
total: 0
|
total: 0
|
||||||
},
|
},
|
||||||
currentAddress: '',
|
currentAddress: '',
|
||||||
currentPoint: {
|
|
||||||
latitude: 0,
|
|
||||||
longitude: 0
|
|
||||||
},
|
|
||||||
key: 'FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI',
|
key: 'FW3BZ-6JTK6-GCUS5-MZCRR-3GPR5-HJFEI',
|
||||||
open: false,
|
open: false,
|
||||||
showPopUp: false,
|
showPopUp: false,
|
||||||
@@ -157,10 +157,11 @@
|
|||||||
if (option.tabIndex) {
|
if (option.tabIndex) {
|
||||||
this.activeTab = option.tabIndex
|
this.activeTab = option.tabIndex
|
||||||
}
|
}
|
||||||
this.getData()
|
this.$store.dispatch('getUserLocation')
|
||||||
this.getPolicy()
|
this.download()
|
||||||
},
|
},
|
||||||
onShow: function() {
|
onShow: function() {
|
||||||
|
|
||||||
const enumTitle = {
|
const enumTitle = {
|
||||||
"0": '最新零工岗位',
|
"0": '最新零工岗位',
|
||||||
"1": '最新全职岗位',
|
"1": '最新全职岗位',
|
||||||
@@ -169,7 +170,7 @@
|
|||||||
uni.setNavigationBarTitle({
|
uni.setNavigationBarTitle({
|
||||||
title: enumTitle[this.activeTab]
|
title: enumTitle[this.activeTab]
|
||||||
})
|
})
|
||||||
if (this.$store.state.user.token) {
|
if (this.$api.haslogin()) {
|
||||||
this.$store.dispatch('refreshAuthState').then((e) => {
|
this.$store.dispatch('refreshAuthState').then((e) => {
|
||||||
var auth = this.$store.state.auth
|
var auth = this.$store.state.auth
|
||||||
if (!auth.bankCardState) {
|
if (!auth.bankCardState) {
|
||||||
@@ -177,7 +178,6 @@
|
|||||||
}
|
}
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
const value = uni.getStorageSync('active');
|
const value = uni.getStorageSync('active');
|
||||||
if (value) {
|
if (value) {
|
||||||
this.activeTab = value;
|
this.activeTab = value;
|
||||||
@@ -190,13 +190,7 @@
|
|||||||
},
|
},
|
||||||
/*下拉刷新*/
|
/*下拉刷新*/
|
||||||
onPullDownRefresh: function() {
|
onPullDownRefresh: function() {
|
||||||
if (!this.$store.state.user.token) {
|
this.download();
|
||||||
uni.redirectTo({
|
|
||||||
url: "/pages/login/login"
|
|
||||||
});
|
|
||||||
} else {
|
|
||||||
this.download();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
step() {
|
step() {
|
||||||
@@ -228,30 +222,6 @@
|
|||||||
url: '/pageMy/my/resume/addSkill'
|
url: '/pageMy/my/resume/addSkill'
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
/*定位*/
|
|
||||||
getLocation: function() {
|
|
||||||
var that = this;
|
|
||||||
uni.getLocation({
|
|
||||||
type: 'gcj02',
|
|
||||||
success: function(res) {
|
|
||||||
that.currentPoint = {
|
|
||||||
latitude: res.latitude,
|
|
||||||
longitude: res.longitude
|
|
||||||
}
|
|
||||||
// that.getAddrByPoint(res);
|
|
||||||
that.getNearList(that.currentPoint)
|
|
||||||
},
|
|
||||||
complete: function(e) {}
|
|
||||||
});
|
|
||||||
},
|
|
||||||
/*逆地址解析*/
|
|
||||||
getAddrByPoint: function(point) {
|
|
||||||
var that = this;
|
|
||||||
var location = point.latitude + ',' + point.longitude
|
|
||||||
getcoder(location, encodeURI(that.key), 0).then(res => {
|
|
||||||
that.currentAddress = res.data.result.address
|
|
||||||
});
|
|
||||||
},
|
|
||||||
goSeach: function() {
|
goSeach: function() {
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '../seach/seach'
|
url: '../seach/seach'
|
||||||
@@ -271,8 +241,8 @@
|
|||||||
this.activeTab = e;
|
this.activeTab = e;
|
||||||
},
|
},
|
||||||
//附近任务；
|
//附近任务；
|
||||||
getNearList: function(point) {
|
getNearList: function() {
|
||||||
nearMission(this.nearPage.current, this.nearPage.size).then(res => {
|
nearMission(this.nearPage.current, this.nearPage.size, 1).then(res => {
|
||||||
if (this.nearPage.current === 1) {
|
if (this.nearPage.current === 1) {
|
||||||
this.companyList = [];
|
this.companyList = [];
|
||||||
}
|
}
|
||||||
@@ -313,7 +283,7 @@
|
|||||||
},
|
},
|
||||||
//最新任务；
|
//最新任务；
|
||||||
getNewList: function() {
|
getNewList: function() {
|
||||||
newMissionAll(this.newPage.current, this.newPage.size, '').then(res => {
|
newMissionAll(this.newPage.current, this.newPage.size, '', 1).then(res => {
|
||||||
if (this.newPage.current === 1) {
|
if (this.newPage.current === 1) {
|
||||||
this.newList = [];
|
this.newList = [];
|
||||||
}
|
}
|
||||||
@@ -326,32 +296,31 @@
|
|||||||
},
|
},
|
||||||
//上拉加载
|
//上拉加载
|
||||||
upLoad: function() {
|
upLoad: function() {
|
||||||
if (this.activeTab === 0) {
|
if (this.activeTab === '0') {
|
||||||
if (this.nearPage.current <= Math.ceil(this.nearPage.total / this.nearPage.size)) {
|
|
||||||
this.getNearList(this.currentPoint);
|
|
||||||
} else {
|
|
||||||
uni.showToast({
|
|
||||||
icon: "none",
|
|
||||||
title: '已经是最后一页',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.activeTab === 1) {
|
|
||||||
if (this.recommendPage.current <= Math.ceil(this.recommendPage.total / this.recommendPage
|
|
||||||
.size)) {
|
|
||||||
this.getRecommendList();
|
|
||||||
} else {
|
|
||||||
uni.showToast({
|
|
||||||
icon: "none",
|
|
||||||
title: '已经是最后一页',
|
|
||||||
})
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
if (this.activeTab === 2) {
|
|
||||||
if (this.newPage.current <= Math.ceil(this.newPage.total / this.newPage.size)) {
|
if (this.newPage.current <= Math.ceil(this.newPage.total / this.newPage.size)) {
|
||||||
this.getNewList();
|
this.getNewList()
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
icon: "none",
|
||||||
|
title: '已经是最后一页',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.activeTab === '1') {
|
||||||
|
if (this.nearPage.current <= Math.ceil(this.nearPage.total / this.nearPage.size)) {
|
||||||
|
this.getNearList();
|
||||||
|
} else {
|
||||||
|
uni.showToast({
|
||||||
|
icon: "none",
|
||||||
|
title: '已经是最后一页',
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
if (this.activeTab === '2') {
|
||||||
|
if (this.newPage.current <= Math.ceil(this.newPage.total / this.newPage.size)) {
|
||||||
|
this.getPolicy();
|
||||||
} else {
|
} else {
|
||||||
uni.showToast({
|
uni.showToast({
|
||||||
icon: "none",
|
icon: "none",
|
||||||
@@ -365,25 +334,24 @@
|
|||||||
download: function() {
|
download: function() {
|
||||||
console.log(this.activeTab)
|
console.log(this.activeTab)
|
||||||
if (this.activeTab === '0') {
|
if (this.activeTab === '0') {
|
||||||
this.nearPage.current = 1;
|
this.newPage.current = 1;
|
||||||
console.log('123123')
|
this.getNewList();
|
||||||
this.getLocation();
|
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
uni.stopPullDownRefresh();
|
uni.stopPullDownRefresh();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (this.activeTab === '1') {
|
if (this.activeTab === '1') {
|
||||||
this.recommendPage.current = 1;
|
this.nearPage.current = 1;
|
||||||
this.getRecommendList();
|
this.getNearList();
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
uni.stopPullDownRefresh();
|
uni.stopPullDownRefresh();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
if (this.activeTab === '2') {
|
if (this.activeTab === '2') {
|
||||||
this.newPage.current = 1;
|
// this.newPage.current = 1;
|
||||||
this.getNewList();
|
this.getPolicy();
|
||||||
setTimeout(function() {
|
setTimeout(function() {
|
||||||
uni.stopPullDownRefresh();
|
uni.stopPullDownRefresh();
|
||||||
}, 1000);
|
}, 1000);
|
||||||
@@ -391,20 +359,13 @@
|
|||||||
}
|
}
|
||||||
},
|
},
|
||||||
getData: function() {
|
getData: function() {
|
||||||
if (!this.$store.state.user.token) {
|
uni.$emit('newsReadChange');
|
||||||
uni.redirectTo({
|
this.nearPage.current = 1;
|
||||||
url: "/pages/login/login"
|
this.recommendPage.current = 1;
|
||||||
});
|
this.newPage.current = 1;
|
||||||
} else {
|
this.getRecommendList();
|
||||||
uni.$emit('newsReadChange');
|
this.getNewList();
|
||||||
this.nearPage.current = 1;
|
this.getNearList();
|
||||||
this.recommendPage.current = 1;
|
|
||||||
this.newPage.current = 1;
|
|
||||||
this.getLocation();
|
|
||||||
this.getRecommendList();
|
|
||||||
this.getNewList();
|
|
||||||
this.getNearList();
|
|
||||||
}
|
|
||||||
},
|
},
|
||||||
|
|
||||||
|
|
||||||
@@ -442,7 +403,8 @@
|
|||||||
.content {
|
.content {
|
||||||
background-color: #f3f4f8;
|
background-color: #f3f4f8;
|
||||||
padding-top: 20rpx;
|
padding-top: 20rpx;
|
||||||
min-height: 80vh;
|
/* min-height: 80vh; */
|
||||||
|
min-height: calc(100vh - var(--window-top) - var(--status-bar-height) - var(--window-bottom));
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
|||||||
@@ -244,7 +244,7 @@
|
|||||||
getLocation: function() {
|
getLocation: function() {
|
||||||
var that = this;
|
var that = this;
|
||||||
uni.getLocation({
|
uni.getLocation({
|
||||||
type: 'gcj02',
|
type: 'wgs84',
|
||||||
success: function(res) {
|
success: function(res) {
|
||||||
that.currentPoint = {
|
that.currentPoint = {
|
||||||
latitude: res.latitude,
|
latitude: res.latitude,
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -101,9 +101,10 @@
|
|||||||
工作地址：{{info.address || '暂无'}}
|
工作地址：{{info.address || '暂无'}}
|
||||||
</view>
|
</view>
|
||||||
<view class="map">
|
<view class="map">
|
||||||
<super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
<!-- <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
||||||
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" :MapUrl="$config.supperMap" :init="false"
|
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" :MapUrl="$config.supperMap" :init="false"
|
||||||
:flag-tip="false"></super-map>
|
:flag-tip="false"></super-map> -->
|
||||||
|
<zhuo-tianditu-MultiPoint-Mapper ref="tMap" :api-key="$config.apiKey"></zhuo-tianditu-MultiPoint-Mapper>
|
||||||
</view>
|
</view>
|
||||||
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
||||||
</view>
|
</view>
|
||||||
@@ -324,6 +325,8 @@
|
|||||||
detail(self.missionNo).then(res => {
|
detail(self.missionNo).then(res => {
|
||||||
self.info = res.data.data;
|
self.info = res.data.data;
|
||||||
self.status = res.data.data.detailStatus;
|
self.status = res.data.data.detailStatus;
|
||||||
|
this.$refs.tMap.open(self.info.lon, self.info.lat)
|
||||||
|
|
||||||
// AddressToLocation({
|
// AddressToLocation({
|
||||||
// smart_address: res.data.data.address
|
// smart_address: res.data.data.address
|
||||||
// }).then((result) => {
|
// }).then((result) => {
|
||||||
@@ -337,13 +340,18 @@
|
|||||||
// self.longitude = self.info.lon;
|
// self.longitude = self.info.lon;
|
||||||
// self.covers[0].latitude = self.info.lat;
|
// self.covers[0].latitude = self.info.lat;
|
||||||
// self.covers[0].longitude = self.info.lon;
|
// self.covers[0].longitude = self.info.lon;
|
||||||
if (!(self.info.lat && self.info.lat === -1)) {
|
if (self.info.lon > 1 && self.info.lat > 1) {
|
||||||
self.$refs.uMap.initMap({
|
self.$nextTick(() => {
|
||||||
lat: self.info.lat,
|
self.$api.sleep(500).then(() => {
|
||||||
lon: self.info.lon,
|
this.$refs.tMap.addFeature([{
|
||||||
|
id: self.info.id,
|
||||||
|
label: self.info.missionTitle,
|
||||||
|
lat: self.info.lat,
|
||||||
|
lon: self.info.lon,
|
||||||
|
}])
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
|
|
||||||
self.showDetail = true;
|
self.showDetail = true;
|
||||||
self.getCollectStatus();
|
self.getCollectStatus();
|
||||||
if (self.type === 1) {
|
if (self.type === 1) {
|
||||||
|
|||||||
@@ -105,9 +105,10 @@
|
|||||||
</view>
|
</view>
|
||||||
<view class="map">
|
<view class="map">
|
||||||
<!-- <seeLocation ref="cMap" :apikey="$config.apiKey"></seeLocation> -->
|
<!-- <seeLocation ref="cMap" :apikey="$config.apiKey"></seeLocation> -->
|
||||||
<super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
<!-- <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
||||||
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" :MapUrl="$config.supperMap" :init="false"
|
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" :MapUrl="$config.supperMap" :init="false"
|
||||||
:flag-tip="false"></super-map>
|
:flag-tip="false"></super-map> -->
|
||||||
|
<zhuo-tianditu-MultiPoint-Mapper ref="tMap" :api-key="$config.apiKey"></zhuo-tianditu-MultiPoint-Mapper>
|
||||||
</view>
|
</view>
|
||||||
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
||||||
</view>
|
</view>
|
||||||
@@ -332,14 +333,21 @@
|
|||||||
self.info = resData.data.data;
|
self.info = resData.data.data;
|
||||||
self.status = resData.data.data.status;
|
self.status = resData.data.data.status;
|
||||||
self.missionNo = resData.data.data.missionNo;
|
self.missionNo = resData.data.data.missionNo;
|
||||||
self.latitude = self.info.lat;
|
// self.latitude = self.info.lat;
|
||||||
self.longitude = self.info.lon;
|
// self.longitude = self.info.lon;
|
||||||
self.covers[0].latitude = self.info.lat;
|
// self.covers[0].latitude = self.info.lat;
|
||||||
self.covers[0].longitude = self.info.lon;
|
// self.covers[0].longitude = self.info.lon;
|
||||||
if (!(self.info.lat && self.info.lat === -1)) {
|
this.$refs.tMap.open(self.info.lon, self.info.lat)
|
||||||
self.$refs.uMap.initMap({
|
if (self.info.lon > 1 && self.info.lat > 1) {
|
||||||
lat: self.info.lat,
|
this.$nextTick(() => {
|
||||||
lon: self.info.lon,
|
self.$api.sleep(1000).then(() => {
|
||||||
|
this.$refs.tMap.addFeature([{
|
||||||
|
id: self.info.id,
|
||||||
|
label: self.info.jobName,
|
||||||
|
lat: self.info.lat,
|
||||||
|
lon: self.info.lon,
|
||||||
|
}])
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
// this.$refs.cMap.open()
|
// this.$refs.cMap.open()
|
||||||
|
|||||||
@@ -109,9 +109,10 @@
|
|||||||
工作地址：{{info.address || '暂无'}}
|
工作地址：{{info.address || '暂无'}}
|
||||||
</view>
|
</view>
|
||||||
<view class="map">
|
<view class="map">
|
||||||
<super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
<!-- <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
||||||
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false" :init="false"
|
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false" :init="false"
|
||||||
:MapUrl="$config.supperMap" :flag-tip="false"></super-map>
|
:MapUrl="$config.supperMap" :flag-tip="false"></super-map> -->
|
||||||
|
<zhuo-tianditu-MultiPoint-Mapper ref="tMap" :api-key="$config.apiKey"></zhuo-tianditu-MultiPoint-Mapper>
|
||||||
</view>
|
</view>
|
||||||
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
||||||
</view>
|
</view>
|
||||||
@@ -338,10 +339,17 @@
|
|||||||
self.longitude = self.info.lon;
|
self.longitude = self.info.lon;
|
||||||
self.covers[0].latitude = self.info.lat;
|
self.covers[0].latitude = self.info.lat;
|
||||||
self.covers[0].longitude = self.info.lon;
|
self.covers[0].longitude = self.info.lon;
|
||||||
if (!(self.info.lat && self.info.lat === -1)) {
|
this.$refs.tMap.open(self.info.lon, self.info.lat)
|
||||||
self.$refs.uMap.initMap({
|
if (self.info.lon > 1 && self.info.lat > 1) {
|
||||||
lat: self.info.lat,
|
self.$nextTick(() => {
|
||||||
lon: self.info.lon,
|
self.$api.sleep(1000).then(() => {
|
||||||
|
this.$refs.tMap.addFeature([{
|
||||||
|
id: self.info.id,
|
||||||
|
label: self.info.jobName,
|
||||||
|
lat: self.info.lat,
|
||||||
|
lon: self.info.lon,
|
||||||
|
}])
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
self.showDetail = true;
|
self.showDetail = true;
|
||||||
|
|||||||
@@ -106,9 +106,10 @@
|
|||||||
工作地址：{{info.address || '暂无'}}
|
工作地址：{{info.address || '暂无'}}
|
||||||
</view>
|
</view>
|
||||||
<view class="map">
|
<view class="map">
|
||||||
<super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
<!-- <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
||||||
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false" :init="false"
|
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" @regionchange="show = false" :init="false"
|
||||||
:MapUrl="$config.supperMap" :flag-tip="false"></super-map>
|
:MapUrl="$config.supperMap" :flag-tip="false"></super-map> -->
|
||||||
|
<zhuo-tianditu-MultiPoint-Mapper ref="tMap" :api-key="$config.apiKey"></zhuo-tianditu-MultiPoint-Mapper>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow!=='0'"></view>
|
<view class="" style="height:200rpx;background-color: #f6f6f6;" v-if="isShow!=='0'"></view>
|
||||||
@@ -272,6 +273,7 @@
|
|||||||
this.id = option.id; //消息id
|
this.id = option.id; //消息id
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
mounted() {},
|
||||||
onShow: function() {
|
onShow: function() {
|
||||||
this.showDetail = true
|
this.showDetail = true
|
||||||
this.getData();
|
this.getData();
|
||||||
@@ -316,14 +318,22 @@
|
|||||||
self.info = res.data.data;
|
self.info = res.data.data;
|
||||||
self.status = res.data.data.status;
|
self.status = res.data.data.status;
|
||||||
self.missionNo = res.data.data.missionNo;
|
self.missionNo = res.data.data.missionNo;
|
||||||
self.latitude = self.info.lat;
|
this.$refs.tMap.open(self.info.lon, self.info.lat)
|
||||||
self.longitude = self.info.lon;
|
|
||||||
self.covers[0].latitude = self.info.lat;
|
// self.latitude = self.info.lat;
|
||||||
self.covers[0].longitude = self.info.lon;
|
// self.longitude = self.info.lon;
|
||||||
if (!(self.info.lat && self.info.lat === -1)) {
|
// self.covers[0].latitude = self.info.lat;
|
||||||
self.$refs.uMap.initMap({
|
// self.covers[0].longitude = self.info.lon;
|
||||||
lat: self.info.lat,
|
if (self.info.lon > 1 && self.info.lat > 1) {
|
||||||
lon: self.info.lon,
|
self.$nextTick(() => {
|
||||||
|
self.$api.sleep(1000).then(() => {
|
||||||
|
this.$refs.tMap.addFeature([{
|
||||||
|
id: self.info.id,
|
||||||
|
label: self.info.jobName,
|
||||||
|
lat: self.info.lat,
|
||||||
|
lon: self.info.lon,
|
||||||
|
}])
|
||||||
|
})
|
||||||
})
|
})
|
||||||
}
|
}
|
||||||
self.showDetail = true;
|
self.showDetail = true;
|
||||||
|
|||||||
@@ -87,9 +87,10 @@
|
|||||||
任务地址：{{ info.address }}
|
任务地址：{{ info.address }}
|
||||||
</view>
|
</view>
|
||||||
<view class="map">
|
<view class="map">
|
||||||
<super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
<!-- <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
||||||
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" :MapUrl="$config.supperMap"
|
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" :MapUrl="$config.supperMap"
|
||||||
:flag-tip="false"></super-map>
|
:flag-tip="false"></super-map> -->
|
||||||
|
<zhuo-tianditu-MultiPoint-Mapper ref="tMap" :api-key="$config.apiKey"></zhuo-tianditu-MultiPoint-Mapper>
|
||||||
</view>
|
</view>
|
||||||
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
||||||
</view>
|
</view>
|
||||||
@@ -282,10 +283,23 @@
|
|||||||
recruit_missionDetail(self.missionNo, self.type).then(res => {
|
recruit_missionDetail(self.missionNo, self.type).then(res => {
|
||||||
self.info = res.data.data;
|
self.info = res.data.data;
|
||||||
self.status = res.data.data.detailStatus;
|
self.status = res.data.data.detailStatus;
|
||||||
self.latitude = self.info.lat;
|
// self.latitude = self.info.lat;
|
||||||
self.longitude = self.info.lon;
|
// self.longitude = self.info.lon;
|
||||||
self.covers[0].latitude = self.info.lat;
|
// self.covers[0].latitude = self.info.lat;
|
||||||
self.covers[0].longitude = self.info.lon;
|
// self.covers[0].longitude = self.info.lon;
|
||||||
|
this.$refs.tMap.open(self.info.lon, self.info.lat)
|
||||||
|
if (self.info.lon > 1 && self.info.lat > 1) {
|
||||||
|
self.$nextTick(() => {
|
||||||
|
self.$api.sleep(1000).then(() => {
|
||||||
|
this.$refs.tMap.addFeature([{
|
||||||
|
id: self.info.id,
|
||||||
|
label: self.info.missionTitle,
|
||||||
|
lat: self.info.lat,
|
||||||
|
lon: self.info.lon,
|
||||||
|
}])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
self.showDetail = true;
|
self.showDetail = true;
|
||||||
if (self.type === 1) {
|
if (self.type === 1) {
|
||||||
// 设置已读
|
// 设置已读
|
||||||
|
|||||||
@@ -95,9 +95,10 @@
|
|||||||
岗位地址：{{ info.address }}
|
岗位地址：{{ info.address }}
|
||||||
</view>
|
</view>
|
||||||
<view class="map">
|
<view class="map">
|
||||||
<super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
<!-- <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
||||||
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" :MapUrl="$config.supperMap"
|
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" :MapUrl="$config.supperMap"
|
||||||
:flag-tip="false"></super-map>
|
:flag-tip="false"></super-map> -->
|
||||||
|
<zhuo-tianditu-MultiPoint-Mapper ref="tMap" :api-key="$config.apiKey"></zhuo-tianditu-MultiPoint-Mapper>
|
||||||
</view>
|
</view>
|
||||||
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
||||||
</view>
|
</view>
|
||||||
@@ -263,10 +264,23 @@
|
|||||||
self.info = resData.data.data;
|
self.info = resData.data.data;
|
||||||
self.status = resData.data.data.status;
|
self.status = resData.data.data.status;
|
||||||
self.missionNo = resData.data.data.missionNo;
|
self.missionNo = resData.data.data.missionNo;
|
||||||
self.latitude = self.info.lat;
|
// self.latitude = self.info.lat;
|
||||||
self.longitude = self.info.lon;
|
// self.longitude = self.info.lon;
|
||||||
self.covers[0].latitude = self.info.lat;
|
// self.covers[0].latitude = self.info.lat;
|
||||||
self.covers[0].longitude = self.info.lon;
|
// self.covers[0].longitude = self.info.lon;
|
||||||
|
this.$refs.tMap.open(self.info.lon, self.info.lat)
|
||||||
|
if (self.info.lon > 1 && self.info.lat > 1) {
|
||||||
|
self.$nextTick(() => {
|
||||||
|
self.$api.sleep(1000).then(() => {
|
||||||
|
this.$refs.tMap.addFeature([{
|
||||||
|
id: self.info.id,
|
||||||
|
label: self.info.jobName,
|
||||||
|
lat: self.info.lat,
|
||||||
|
lon: self.info.lon,
|
||||||
|
}])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
self.showDetail = true;
|
self.showDetail = true;
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
|||||||
@@ -95,9 +95,10 @@
|
|||||||
岗位地址：{{ info.address }}
|
岗位地址：{{ info.address }}
|
||||||
</view>
|
</view>
|
||||||
<view class="map">
|
<view class="map">
|
||||||
<super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
<!-- <super-map ref="uMap" style="width: 100%;height: 100%;" :latitude="latitude" :longitude="longitude"
|
||||||
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" :MapUrl="$config.supperMap"
|
:open="true" :zoom="14" :min-zoom="10" :max-zoom="20" :MapUrl="$config.supperMap"
|
||||||
:flag-tip="false"></super-map>
|
:flag-tip="false"></super-map> -->
|
||||||
|
<zhuo-tianditu-MultiPoint-Mapper ref="tMap" :api-key="$config.apiKey"></zhuo-tianditu-MultiPoint-Mapper>
|
||||||
</view>
|
</view>
|
||||||
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
<!-- <map class="map" :latitude="latitude" :longitude="longitude" :markers="covers"></map> -->
|
||||||
</view>
|
</view>
|
||||||
@@ -250,10 +251,23 @@
|
|||||||
self.info = res.data.data;
|
self.info = res.data.data;
|
||||||
self.status = res.data.data.status;
|
self.status = res.data.data.status;
|
||||||
self.missionNo = res.data.data.missionNo;
|
self.missionNo = res.data.data.missionNo;
|
||||||
self.latitude = self.info.lat;
|
// self.latitude = self.info.lat;
|
||||||
self.longitude = self.info.lon;
|
// self.longitude = self.info.lon;
|
||||||
self.covers[0].latitude = self.info.lat;
|
// self.covers[0].latitude = self.info.lat;
|
||||||
self.covers[0].longitude = self.info.lon;
|
// self.covers[0].longitude = self.info.lon;
|
||||||
|
this.$refs.tMap.open(self.info.lon, self.info.lat)
|
||||||
|
if (self.info.lon > 1 && self.info.lat > 1) {
|
||||||
|
self.$nextTick(() => {
|
||||||
|
self.$api.sleep(1000).then(() => {
|
||||||
|
this.$refs.tMap.addFeature([{
|
||||||
|
id: self.info.id,
|
||||||
|
label: self.info.jobName,
|
||||||
|
lat: self.info.lat,
|
||||||
|
lon: self.info.lon,
|
||||||
|
}])
|
||||||
|
})
|
||||||
|
})
|
||||||
|
}
|
||||||
self.showDetail = true;
|
self.showDetail = true;
|
||||||
}, error => {
|
}, error => {
|
||||||
console.log(error);
|
console.log(error);
|
||||||
|
|||||||
File diff suppressed because it is too large
Load Diff
@@ -89,7 +89,7 @@ const user = {
|
|||||||
// longitude: 104.404419,
|
// longitude: 104.404419,
|
||||||
// })
|
// })
|
||||||
uni.getLocation({
|
uni.getLocation({
|
||||||
type: 'gcj02',
|
type: 'wgs84',
|
||||||
success: function(res) {
|
success: function(res) {
|
||||||
const {
|
const {
|
||||||
longitude,
|
longitude,
|
||||||
|
|||||||
@@ -0,0 +1,226 @@
|
|||||||
|
<template>
|
||||||
|
<view style="width: 100%;height: 100%;">
|
||||||
|
<view id="mapDiv" class="mapDiv" :apikey="apiKey" :prop="option" :change:prop="Trenderjs.initTMap"></view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import tools from '../../tools.js'
|
||||||
|
import iconPath from '../../static/point.png'
|
||||||
|
export default {
|
||||||
|
name: 'TianDiTu-Map',
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
Tmap: null,
|
||||||
|
option: {
|
||||||
|
type: '',
|
||||||
|
apikey: '',
|
||||||
|
cover: null,
|
||||||
|
lng: '',
|
||||||
|
lat: '',
|
||||||
|
png: iconPath
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
apiKey: {
|
||||||
|
type: String,
|
||||||
|
require: true,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
customIcon: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
compliteonLoadTianDiTu() {
|
||||||
|
this.$emit('onLoadTianDiTu')
|
||||||
|
},
|
||||||
|
initCharts(lng, lat) {
|
||||||
|
this.option = {
|
||||||
|
...this.option,
|
||||||
|
apikey: this.apiKey,
|
||||||
|
lng,
|
||||||
|
lat,
|
||||||
|
png: this.customIcon || this.option.png,
|
||||||
|
type: 'open'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
upDataCharts(lng, lat) {
|
||||||
|
this.option = {
|
||||||
|
...this.option,
|
||||||
|
type: 'Icon',
|
||||||
|
lng,
|
||||||
|
lat,
|
||||||
|
png: this.customIcon || this.option.png,
|
||||||
|
type: 'update'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addFeature(cover) {
|
||||||
|
this.option = {
|
||||||
|
...this.option,
|
||||||
|
type: 'Icon',
|
||||||
|
cover,
|
||||||
|
png: this.customIcon || this.option.png,
|
||||||
|
type: 'addFeature'
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectItem(info) {
|
||||||
|
this.$emit('onSelect', info)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
<script module="Trenderjs" lang="renderjs">
|
||||||
|
var Tmap = null;
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
options: {},
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// if (typeof window.T === 'object') {
|
||||||
|
// console.warn('--------天地图已加载--------');
|
||||||
|
// } else {
|
||||||
|
// if (this.apiKey) {
|
||||||
|
// const script = document.createElement('script')
|
||||||
|
// script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=' + this.apiKey
|
||||||
|
// script.onload = this.initChartsRender.bind(this)
|
||||||
|
// document.head.appendChild(script)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
initTMap(newValue, oldValue, ownerInstance, instance) {
|
||||||
|
this.options = newValue
|
||||||
|
if (newValue.type === 'open' && newValue.apikey) {
|
||||||
|
if (!window.T) {
|
||||||
|
const script = document.createElement('script')
|
||||||
|
script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=' + this.options.apikey
|
||||||
|
script.onload = this.initChartsRender.bind(this)
|
||||||
|
document.head.appendChild(script)
|
||||||
|
console.log('open')
|
||||||
|
} else {
|
||||||
|
const {
|
||||||
|
lng,
|
||||||
|
lat
|
||||||
|
} = this.options
|
||||||
|
|
||||||
|
Tmap = null;
|
||||||
|
Tmap = new T.Map('mapDiv', {
|
||||||
|
projection: 'EPSG:4326',
|
||||||
|
});
|
||||||
|
this.upDataChartsRender(lng, lat)
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
const {
|
||||||
|
lng,
|
||||||
|
lat,
|
||||||
|
cover
|
||||||
|
} = newValue
|
||||||
|
|
||||||
|
switch (newValue.type) {
|
||||||
|
case 'update':
|
||||||
|
this.upDataChartsRender(lng, lat)
|
||||||
|
break;
|
||||||
|
case 'addFeature':
|
||||||
|
Tmap.clearOverLays()
|
||||||
|
cover.map((item, index) => {
|
||||||
|
this.setIcon(item.lon, item.lat, false, true, false, item)
|
||||||
|
})
|
||||||
|
break;
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initChartsRender() {
|
||||||
|
this.$ownerInstance.callMethod('compliteonLoadTianDiTu')
|
||||||
|
const {
|
||||||
|
lng,
|
||||||
|
lat
|
||||||
|
} = this.options
|
||||||
|
var that = this;
|
||||||
|
Tmap = new T.Map('mapDiv', {
|
||||||
|
projection: 'EPSG:4326',
|
||||||
|
});
|
||||||
|
this.upDataChartsRender(lng, lat)
|
||||||
|
},
|
||||||
|
upDataChartsRender(lng, lat, zoom = 15) {
|
||||||
|
if (!Tmap) return
|
||||||
|
Tmap.centerAndZoom(new T.LngLat(lng, lat), zoom);
|
||||||
|
},
|
||||||
|
setIcon(lng, lat, isClear, isClick = false, isLabel = false, item) {
|
||||||
|
if (isClear) {
|
||||||
|
Tmap.clearOverLays()
|
||||||
|
}
|
||||||
|
const latlng = new T.LngLat(lng, lat)
|
||||||
|
const icon = new T.Icon({
|
||||||
|
iconUrl: this.options.png,
|
||||||
|
iconSize: new T.Point(30, 30),
|
||||||
|
iconAnchor: new T.Point(15, 30)
|
||||||
|
});
|
||||||
|
if (isLabel) {
|
||||||
|
const label = new T.Label({
|
||||||
|
text: `<div style="max-width: 50px; overflow: hidden">${item.label}</div>`,
|
||||||
|
position: latlng,
|
||||||
|
offset: new T.Point(-50, 0)
|
||||||
|
});
|
||||||
|
Tmap.addOverLay(label);
|
||||||
|
}
|
||||||
|
const marker = new T.Marker(latlng, {
|
||||||
|
icon
|
||||||
|
});
|
||||||
|
|
||||||
|
if (isClick) {
|
||||||
|
this.removeMarkerClick(marker);
|
||||||
|
//注册标注的点击事件
|
||||||
|
marker.addEventListener("click", this.MarkerClick.bind(null, item));
|
||||||
|
}
|
||||||
|
|
||||||
|
Tmap.addOverLay(marker);
|
||||||
|
},
|
||||||
|
removeMarkerClick(marker) {
|
||||||
|
//移除标注的点击事件
|
||||||
|
marker.removeEventListener("click", this.MarkerClick);
|
||||||
|
},
|
||||||
|
MarkerClick(item, e) {
|
||||||
|
this.openInfo(item.label, e)
|
||||||
|
this.$ownerInstance.callMethod('selectItem', item)
|
||||||
|
},
|
||||||
|
openInfo(content, e) {
|
||||||
|
const point = e.lnglat;
|
||||||
|
const marker = new T.Marker(point); // 创建标注
|
||||||
|
const markerInfoWin = new T.InfoWindow(content, {
|
||||||
|
offset: new T.Point(0, -30)
|
||||||
|
}); // 创建信息窗口对象
|
||||||
|
Tmap.openInfoWindow(markerInfoWin, point); //开启信息窗口
|
||||||
|
}
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
#mapDiv {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .tdt-control-copyright {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .tdt-label {
|
||||||
|
/* background: transparent;
|
||||||
|
box-shadow: none;
|
||||||
|
border: 0; */
|
||||||
|
}
|
||||||
|
|
||||||
|
/deep/ .tdt-pane {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@@ -0,0 +1,206 @@
|
|||||||
|
<template>
|
||||||
|
<view style="width: 100%; height: 100%;">
|
||||||
|
<view class="mask" style="width: 100%; height: 100%;">
|
||||||
|
<tiandituMap ref="tiandituMapRefs" @onLoadTianDiTu="initMaps" @onSelect="selectPoint" :apiKey="apiKey"
|
||||||
|
:customIcon="icon">
|
||||||
|
</tiandituMap>
|
||||||
|
</view>
|
||||||
|
</view>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import tiandituMap from './tianditu-map.vue'
|
||||||
|
import tools from '../../tools.js'
|
||||||
|
export default {
|
||||||
|
name: 'zhuozhuoTiandituPlugin',
|
||||||
|
components: {
|
||||||
|
tiandituMap,
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
apiKey: {
|
||||||
|
type: String,
|
||||||
|
require: true,
|
||||||
|
default: ''
|
||||||
|
},
|
||||||
|
icon: {
|
||||||
|
type: String,
|
||||||
|
default: ''
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
winWidth: 0,
|
||||||
|
winHeight: 0,
|
||||||
|
winTop: 0,
|
||||||
|
visible: false,
|
||||||
|
datalist: [],
|
||||||
|
selectItem: {},
|
||||||
|
iStatusBarHeight: 0,
|
||||||
|
option: {
|
||||||
|
apikey: 123123,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
var that = this
|
||||||
|
// #ifdef APP
|
||||||
|
// 44 + 10 44: search Input height
|
||||||
|
const searchHeight = this.search ? 54 : 10
|
||||||
|
const {
|
||||||
|
statusBarHeight,
|
||||||
|
screenHeight,
|
||||||
|
windowHeight
|
||||||
|
} = uni.getSystemInfoSync()
|
||||||
|
if (screenHeight === windowHeight) {
|
||||||
|
that.iStatusBarHeight = statusBarHeight + searchHeight;
|
||||||
|
} else {
|
||||||
|
that.iStatusBarHeight = 0;
|
||||||
|
}
|
||||||
|
// #endif
|
||||||
|
uni.getSystemInfo({
|
||||||
|
success: function(res) {
|
||||||
|
that.winWidth = res.windowWidth
|
||||||
|
that.winHeight = res.windowHeight
|
||||||
|
that.winTop = res.windowTop
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
open(lon, lat) {
|
||||||
|
if (lon && lat) {
|
||||||
|
this.visible = true
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.tiandituMapRefs.initCharts(lon, lat)
|
||||||
|
})
|
||||||
|
} else {
|
||||||
|
console.error('请传入lon, lat')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
upDateLonLat(cover) {
|
||||||
|
if (lon && lat) {
|
||||||
|
this.$refs.tiandituMapRefs.upDataCharts(lon && lat)
|
||||||
|
} else {
|
||||||
|
console.error('请传入lon, lat')
|
||||||
|
}
|
||||||
|
},
|
||||||
|
addFeature(cover) {
|
||||||
|
if (cover && Array.isArray(cover) && cover.length) {
|
||||||
|
this.$refs.tiandituMapRefs.addFeature(cover)
|
||||||
|
} else {
|
||||||
|
console.error('请传入 cover', cover)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
selectPoint(e) {
|
||||||
|
this.$emit('onSelect', e)
|
||||||
|
},
|
||||||
|
initMaps() {
|
||||||
|
console.warn('--------天地图加载完成--------');
|
||||||
|
this.$emit('onLoad')
|
||||||
|
},
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
<style scope>
|
||||||
|
.mask {
|
||||||
|
/* overflow: hidden; */
|
||||||
|
/* position: fixed;
|
||||||
|
left: 0;
|
||||||
|
z-index: 399; */
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* footer */
|
||||||
|
.list-boxd {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
left: 0;
|
||||||
|
z-index: 401;
|
||||||
|
right: 0;
|
||||||
|
border-radius: 14px 14px 0 0;
|
||||||
|
background: #FFFFFF;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-header {
|
||||||
|
height: 20px;
|
||||||
|
position: relative;
|
||||||
|
border-bottom: 1px solid #f3f4f6;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-header::after {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
content: '';
|
||||||
|
height: 6px;
|
||||||
|
width: 60px;
|
||||||
|
border-top: 1px solid #e8e8e8;
|
||||||
|
border-bottom: 1px solid #e8e8e8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.list-content {
|
||||||
|
max-height: 50vh;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card {
|
||||||
|
min-height: 44px;
|
||||||
|
padding: 12px;
|
||||||
|
position: relative;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-left {
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-right {
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.arrow {
|
||||||
|
border-top: 2px solid #666666;
|
||||||
|
border-right: 2px solid #666666;
|
||||||
|
width: 10px;
|
||||||
|
height: 10px;
|
||||||
|
transform: rotate(45deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card:active {
|
||||||
|
background-color: #f3f4f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.card::after {
|
||||||
|
position: absolute;
|
||||||
|
content: '';
|
||||||
|
bottom: 0;
|
||||||
|
height: 1px;
|
||||||
|
background-color: #e8e8e8;
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card:last-child::after {
|
||||||
|
height: 0;
|
||||||
|
background-color: #FFFFFF;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-title {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-text {
|
||||||
|
color: #e8e8e8;
|
||||||
|
font-size: 13px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
83
uni_modules/zhuo-tianditu-MultiPoint-Mapper/package.json
Normal file
83
uni_modules/zhuo-tianditu-MultiPoint-Mapper/package.json
Normal file
@@ -0,0 +1,83 @@
|
|||||||
|
{
|
||||||
|
"id": "zhuo-tianditu-MultiPoint-Mapper",
|
||||||
|
"displayName": "zhuo-tianditu-MultiPoint-Mapper",
|
||||||
|
"version": "1.0.0",
|
||||||
|
"description": "zhuo-tianditu-MultiPoint-Mapper",
|
||||||
|
"keywords": [
|
||||||
|
"zhuo-tianditu-MultiPoint-Mapper"
|
||||||
|
],
|
||||||
|
"repository": "",
|
||||||
|
"engines": {
|
||||||
|
"HBuilderX": "^3.1.0"
|
||||||
|
},
|
||||||
|
"dcloudext": {
|
||||||
|
"type": "component-vue",
|
||||||
|
"sale": {
|
||||||
|
"regular": {
|
||||||
|
"price": "0.00"
|
||||||
|
},
|
||||||
|
"sourcecode": {
|
||||||
|
"price": "0.00"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
"contact": {
|
||||||
|
"qq": ""
|
||||||
|
},
|
||||||
|
"declaration": {
|
||||||
|
"ads": "",
|
||||||
|
"data": "",
|
||||||
|
"permissions": ""
|
||||||
|
},
|
||||||
|
"npmurl": ""
|
||||||
|
},
|
||||||
|
"uni_modules": {
|
||||||
|
"dependencies": [],
|
||||||
|
"encrypt": [],
|
||||||
|
"platforms": {
|
||||||
|
"cloud": {
|
||||||
|
"tcb": "u",
|
||||||
|
"aliyun": "u",
|
||||||
|
"alipay": "u"
|
||||||
|
},
|
||||||
|
"client": {
|
||||||
|
"Vue": {
|
||||||
|
"vue2": "u",
|
||||||
|
"vue3": "u"
|
||||||
|
},
|
||||||
|
"App": {
|
||||||
|
"app-vue": "u",
|
||||||
|
"app-nvue": "u",
|
||||||
|
"app-uvue": "u"
|
||||||
|
},
|
||||||
|
"H5-mobile": {
|
||||||
|
"Safari": "u",
|
||||||
|
"Android Browser": "u",
|
||||||
|
"微信浏览器(Android)": "u",
|
||||||
|
"QQ浏览器(Android)": "u"
|
||||||
|
},
|
||||||
|
"H5-pc": {
|
||||||
|
"Chrome": "u",
|
||||||
|
"IE": "u",
|
||||||
|
"Edge": "u",
|
||||||
|
"Firefox": "u",
|
||||||
|
"Safari": "u"
|
||||||
|
},
|
||||||
|
"小程序": {
|
||||||
|
"微信": "u",
|
||||||
|
"阿里": "u",
|
||||||
|
"百度": "u",
|
||||||
|
"字节跳动": "u",
|
||||||
|
"QQ": "u",
|
||||||
|
"钉钉": "u",
|
||||||
|
"快手": "u",
|
||||||
|
"飞书": "u",
|
||||||
|
"京东": "u"
|
||||||
|
},
|
||||||
|
"快应用": {
|
||||||
|
"华为": "u",
|
||||||
|
"联盟": "u"
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
1
uni_modules/zhuo-tianditu-MultiPoint-Mapper/readme.md
Normal file
1
uni_modules/zhuo-tianditu-MultiPoint-Mapper/readme.md
Normal file
@@ -0,0 +1 @@
|
|||||||
|
# zhuo-tianditu-MultiPoint-Mapper
|
||||||
BIN
uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point.png
Normal file
BIN
uni_modules/zhuo-tianditu-MultiPoint-Mapper/static/point.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.5 KiB |
106
uni_modules/zhuo-tianditu-MultiPoint-Mapper/tools.js
Normal file
106
uni_modules/zhuo-tianditu-MultiPoint-Mapper/tools.js
Normal file
@@ -0,0 +1,106 @@
|
|||||||
|
/**
|
||||||
|
* @param title String，提示的内容
|
||||||
|
* @param duration String，提示的延迟时间，单位毫秒，默认：1500
|
||||||
|
* @param mask Boolean，是否显示透明蒙层，防止触摸穿透，默认：false
|
||||||
|
* @param icon String，图标：success、error、fail、exception、loading、none，默认：none
|
||||||
|
**/
|
||||||
|
export function createMessage(title, duration = 1500, mask = false, icon = "none") {
|
||||||
|
uni.showToast({
|
||||||
|
title,
|
||||||
|
duration: duration,
|
||||||
|
mask,
|
||||||
|
icon
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* @param url String，请求的地址，默认：none
|
||||||
|
* @param data Object，请求的参数，默认：{}
|
||||||
|
* @param method String，请求的方式，默认：GET
|
||||||
|
* @param loading Boolean，是否需要loading ，默认：false
|
||||||
|
* @param header Object，headers，默认：{}
|
||||||
|
* @returns promise
|
||||||
|
**/
|
||||||
|
export function createRequest(url, data = {}, loading = false, method = 'GET', header = {}) {
|
||||||
|
if (loading) {
|
||||||
|
uni.showLoading({
|
||||||
|
title: '请稍后',
|
||||||
|
mask: true
|
||||||
|
})
|
||||||
|
}
|
||||||
|
return new Promise((resolve, reject) => {
|
||||||
|
uni.request({
|
||||||
|
url: url,
|
||||||
|
method: method,
|
||||||
|
data: data,
|
||||||
|
header: header,
|
||||||
|
success: res => {
|
||||||
|
if (res.statusCode === 200) {
|
||||||
|
resolve(res.data)
|
||||||
|
} else {
|
||||||
|
if (res.data.msg) {
|
||||||
|
const str = typeof res.data.resolve === 'string' ? ',' + res.data.resolve :
|
||||||
|
''
|
||||||
|
createMessage(res.data.msg + str)
|
||||||
|
}
|
||||||
|
throw new Error('请求错误 ' + url)
|
||||||
|
reject()
|
||||||
|
}
|
||||||
|
},
|
||||||
|
fail: (err) => {
|
||||||
|
reject(err)
|
||||||
|
},
|
||||||
|
complete: () => {
|
||||||
|
uni.hideLoading();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
})
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 数据格式化
|
||||||
|
* @param obj Object，响应的数据
|
||||||
|
* @param type Number 0 ｜ 1，处理类型
|
||||||
|
* @returns Object {address = string, name = string, location = {lon, lat }, infomation = {}}
|
||||||
|
*/
|
||||||
|
export function formatterAdressLocation(obj, type) {
|
||||||
|
switch (type) {
|
||||||
|
case 1:
|
||||||
|
return {
|
||||||
|
address: obj.formatted_address,
|
||||||
|
name: '',
|
||||||
|
location: obj.location,
|
||||||
|
infomation: obj.addressComponent
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
const [lon, lat] = obj.lonlat.split(',')
|
||||||
|
return {
|
||||||
|
address: obj.address,
|
||||||
|
name: obj.name,
|
||||||
|
location: {
|
||||||
|
lon,
|
||||||
|
lat
|
||||||
|
},
|
||||||
|
infomation: obj
|
||||||
|
}
|
||||||
|
break
|
||||||
|
case 3:
|
||||||
|
return {
|
||||||
|
address: obj.location.keyWord,
|
||||||
|
name: '',
|
||||||
|
location: {
|
||||||
|
lon: obj.location.lon,
|
||||||
|
lat: obj.location.lat,
|
||||||
|
},
|
||||||
|
infomation: obj.location
|
||||||
|
}
|
||||||
|
default:
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
export default {
|
||||||
|
createMessage,
|
||||||
|
createRequest,
|
||||||
|
formatterAdressLocation
|
||||||
|
}
|
||||||
@@ -190,24 +190,24 @@ export function Promisify(func) {
|
|||||||
export function GoLogin() {
|
export function GoLogin() {
|
||||||
if (showModal) {
|
if (showModal) {
|
||||||
showModal = false
|
showModal = false
|
||||||
location.href = "https://dy12333.org.cn/h5/"
|
// location.href = "https://dy12333.org.cn/h5/"
|
||||||
// uni.showModal({
|
uni.showModal({
|
||||||
// title: "提示",
|
title: "提示",
|
||||||
// content: "您还未登录，点击确认去登录",
|
content: "您还未登录，点击确认去登录",
|
||||||
// success({
|
success({
|
||||||
// confirm
|
confirm
|
||||||
// }) {
|
}) {
|
||||||
// if (confirm) {
|
if (confirm) {
|
||||||
// uni.redirectTo({
|
uni.redirectTo({
|
||||||
// url: "/pages/login/login"
|
url: "/pages/login/login"
|
||||||
// });
|
});
|
||||||
// }
|
}
|
||||||
// showModal = true
|
showModal = true
|
||||||
// },
|
},
|
||||||
// fail() {
|
fail() {
|
||||||
// showModal = true
|
showModal = true
|
||||||
// }
|
}
|
||||||
// })
|
})
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|||||||
@@ -6,7 +6,7 @@ module.exports = {
|
|||||||
port: 1887,
|
port: 1887,
|
||||||
proxy: {
|
proxy: {
|
||||||
'/api': {
|
'/api': {
|
||||||
target: 'http://10.165.0.173:8000',
|
target: 'http://39.98.184.58:8000',
|
||||||
ws: true,
|
ws: true,
|
||||||
pathRewrite: {
|
pathRewrite: {
|
||||||
'^/api': '/'
|
'^/api': '/'
|
||||||
|
|||||||
Reference in New Issue
Block a user