2024-04-25 11:42:21 +08:00
|
|
|
|
<template>
|
|
|
|
|
|
<view class="app_container">
|
|
|
|
|
|
<view class="app-top">
|
|
|
|
|
|
<view class="top-search">
|
|
|
|
|
|
<view class="top-input">
|
|
|
|
|
|
<input class="put" type="text" placeholder-class="put-pla" v-model="searchValue"
|
2024-05-16 15:16:11 +08:00
|
|
|
|
placeholder="搜索附近岗位或任务">
|
2024-04-25 11:42:21 +08:00
|
|
|
|
<button class="input-btn" @tap="search">搜索</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="view-map">
|
2024-05-15 16:16:35 +08:00
|
|
|
|
<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"
|
|
|
|
|
|
:MapUrl="$config.supperMap" :flag-tip="false"></super-map>
|
|
|
|
|
|
<!-- <view id="map" ></view> -->
|
|
|
|
|
|
<!-- <map style="width: 100%;height: 100%;" scale="16" :latitude="latitude" :longitude="longitude"
|
|
|
|
|
|
:markers="covers" @markertap="clickmark" @regionchange="show = false"></map> -->
|
2024-04-25 11:42:21 +08:00
|
|
|
|
<view class="position-bottom" v-if="show">
|
|
|
|
|
|
<view class="uni-margin-wrap">
|
|
|
|
|
|
<swiper class="swiper" circular :interval="2000" :duration="500">
|
|
|
|
|
|
<swiper-item class="wiperItem">
|
|
|
|
|
|
<view class="swiper-item uni-bg-red">
|
|
|
|
|
|
<view class="item-content">
|
|
|
|
|
|
<view class="content-title"> {{productInfo.missionTitle}} </view>
|
|
|
|
|
|
<view class="color_999999 fs_12 mar_top5">
|
|
|
|
|
|
<uni-icons type="location" color="#999999" size="12"></uni-icons>
|
|
|
|
|
|
{{ productInfo.cityId }} ｜ {{productInfo.address}} ｜ 距离：{{distance}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="color_999999 fs_12 mar_top5">
|
|
|
|
|
|
<uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
|
|
|
|
|
|
招聘时间: {{productInfo.stime}}-{{productInfo.etime}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<view class="color_999999 fs_12 mar_top5">
|
|
|
|
|
|
<uni-icons type="map-pin-ellipse" color="#999999" size="12"></uni-icons>
|
|
|
|
|
|
{{productInfo.experienceDesc}} | {{education[productInfo.education]}}
|
|
|
|
|
|
</view>
|
|
|
|
|
|
<button class="btns" hover-class="active" @tap="openMap">
|
|
|
|
|
|
<image class="btn-img" src="../../static/img/direction2.png" />查看详情
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</swiper-item>
|
|
|
|
|
|
</swiper>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</view>
|
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
import {
|
|
|
|
|
|
addZeroPrefix,
|
|
|
|
|
|
getDistanceFromLatLonInKm
|
|
|
|
|
|
} from '@/untils/tools.js'
|
|
|
|
|
|
import testData from '@/common/textdata.js';
|
|
|
|
|
|
import {
|
|
|
|
|
|
geQueryJobsByNearby
|
|
|
|
|
|
} from '@/api/map.js'
|
|
|
|
|
|
let taskpoint = require('../../static/img/taskpoint.png');
|
|
|
|
|
|
let gwpoint = require('../../static/img/gwpoint.png');
|
|
|
|
|
|
let mypoint = require('../../static/img/mypoint.png');
|
|
|
|
|
|
export default {
|
|
|
|
|
|
data() {
|
|
|
|
|
|
return {
|
|
|
|
|
|
education: testData.education,
|
|
|
|
|
|
show: false,
|
|
|
|
|
|
ID: 1,
|
|
|
|
|
|
searchValue: '',
|
|
|
|
|
|
latitude: 31.133980,
|
|
|
|
|
|
longitude: 104.404419,
|
|
|
|
|
|
covers: [],
|
|
|
|
|
|
rateValue: 2,
|
|
|
|
|
|
productInfo: {},
|
|
|
|
|
|
};
|
|
|
|
|
|
},
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
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 '无'
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
2024-05-15 16:16:35 +08:00
|
|
|
|
mounted() {
|
2024-04-25 11:42:21 +08:00
|
|
|
|
const _this = this
|
2024-04-25 19:53:08 +08:00
|
|
|
|
uni.getLocation({
|
|
|
|
|
|
type: 'gcj02',
|
|
|
|
|
|
success: function(res) {
|
|
|
|
|
|
const {
|
|
|
|
|
|
longitude,
|
|
|
|
|
|
latitude
|
|
|
|
|
|
} = res
|
|
|
|
|
|
_this.latitude = latitude
|
|
|
|
|
|
_this.longitude = longitude
|
|
|
|
|
|
_this.getList(longitude, latitude).then((covers) => {
|
2024-05-15 16:16:35 +08:00
|
|
|
|
_this.$refs.uMap.addFeature(covers)
|
2024-04-25 19:53:08 +08:00
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
fail: function(err) {
|
|
|
|
|
|
_this.$api.msg('无法获得周边信息')
|
|
|
|
|
|
},
|
|
|
|
|
|
complete: function(e) {}
|
|
|
|
|
|
})
|
2024-05-15 16:16:35 +08:00
|
|
|
|
},
|
|
|
|
|
|
onShow() {
|
|
|
|
|
|
// const _this = this
|
2024-04-25 19:53:08 +08:00
|
|
|
|
// this.mockGetLocation().then((myPoint) => {
|
2024-05-15 16:16:35 +08:00
|
|
|
|
// this.latitude = myPoint.latitude
|
|
|
|
|
|
// this.longitude = myPoint.longitude
|
2024-04-25 19:53:08 +08:00
|
|
|
|
// _this.getList(_this.longitude, _this.latitude).then((covers) => {
|
2024-04-25 11:42:21 +08:00
|
|
|
|
// _this.$api.msg('成功获得周边信息')
|
2024-05-16 15:16:11 +08:00
|
|
|
|
// console.log(covers)
|
2024-05-15 16:16:35 +08:00
|
|
|
|
// _this.$refs.uMap.addFeature(covers)
|
2024-04-25 19:53:08 +08:00
|
|
|
|
// })
|
2024-04-25 11:42:21 +08:00
|
|
|
|
// })
|
|
|
|
|
|
},
|
|
|
|
|
|
methods: {
|
|
|
|
|
|
openMap(lon, lat) {
|
|
|
|
|
|
//打开地图，并将门店位置传入
|
|
|
|
|
|
// type: post 岗位 mission 任务
|
|
|
|
|
|
switch (this.productInfo.type) {
|
|
|
|
|
|
case 'post':
|
|
|
|
|
|
const no = encodeURIComponent(1)
|
|
|
|
|
|
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
|
|
|
|
|
|
}
|
|
|
|
|
|
},
|
|
|
|
|
|
search() {
|
2024-05-16 15:16:11 +08:00
|
|
|
|
const _this = this
|
2024-05-15 16:16:35 +08:00
|
|
|
|
uni.getLocation({
|
|
|
|
|
|
type: 'gcj02',
|
|
|
|
|
|
success: function(res) {
|
|
|
|
|
|
const {
|
|
|
|
|
|
longitude,
|
|
|
|
|
|
latitude
|
|
|
|
|
|
} = res
|
|
|
|
|
|
_this.latitude = latitude
|
|
|
|
|
|
_this.longitude = longitude
|
|
|
|
|
|
_this.getList(longitude, latitude).then((covers) => {
|
2024-05-16 15:16:11 +08:00
|
|
|
|
_this.$api.msg('成功获得周边信息')
|
2024-05-15 16:16:35 +08:00
|
|
|
|
_this.$refs.uMap.addFeature(covers)
|
|
|
|
|
|
})
|
|
|
|
|
|
},
|
|
|
|
|
|
fail: function(err) {
|
|
|
|
|
|
_this.$api.msg('无法获得周边信息')
|
|
|
|
|
|
},
|
|
|
|
|
|
complete: function(e) {}
|
2024-04-25 11:42:21 +08:00
|
|
|
|
})
|
2024-05-16 15:16:11 +08:00
|
|
|
|
// this.getList(this.longitude, this.latitude).then((covers) => {
|
|
|
|
|
|
// this.$api.msg('成功获得周边信息')
|
|
|
|
|
|
// console.log(covers)
|
|
|
|
|
|
// this.$refs.uMap.addFeature(covers)
|
2024-05-15 16:16:35 +08:00
|
|
|
|
// })
|
2024-04-25 11:42:21 +08:00
|
|
|
|
},
|
2024-05-15 16:16:35 +08:00
|
|
|
|
clickmark(cover) {
|
|
|
|
|
|
if (cover.markerId === 1) return
|
2024-04-25 11:42:21 +08:00
|
|
|
|
this.show = true;
|
2024-05-15 16:16:35 +08:00
|
|
|
|
this.productInfo = cover.info
|
2024-04-25 11:42:21 +08:00
|
|
|
|
},
|
|
|
|
|
|
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,
|
2024-05-15 16:16:35 +08:00
|
|
|
|
title: item.missionTitle,
|
2024-04-25 11:42:21 +08:00
|
|
|
|
callout: {
|
|
|
|
|
|
content: item.missionTitle,
|
|
|
|
|
|
fontSize: 10,
|
|
|
|
|
|
borderColor: 'blue',
|
|
|
|
|
|
},
|
|
|
|
|
|
info: item
|
|
|
|
|
|
}))
|
|
|
|
|
|
arr.push({
|
|
|
|
|
|
id: 1,
|
|
|
|
|
|
latitude: lat,
|
|
|
|
|
|
longitude: lon,
|
|
|
|
|
|
iconPath: mypoint,
|
2024-05-15 16:16:35 +08:00
|
|
|
|
title: '我的位置',
|
2024-04-25 11:42:21 +08:00
|
|
|
|
width: 20,
|
|
|
|
|
|
height: 20
|
|
|
|
|
|
})
|
|
|
|
|
|
resolve(arr)
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
})
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
|
|
|
.color_999999 {
|
|
|
|
|
|
color: #999999;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.fs_12 {
|
|
|
|
|
|
font-size: 24rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.mar_top5 {
|
|
|
|
|
|
margin-top: 10rpx;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.active {
|
|
|
|
|
|
background: #EAEAEA !important;
|
|
|
|
|
|
color: #AFAFAF;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.card_mark {
|
|
|
|
|
|
.mark_l {
|
|
|
|
|
|
width: 56rpx;
|
|
|
|
|
|
height: 28rpx;
|
|
|
|
|
|
border-radius: 12rpx 0 12rpx 12rpx;
|
|
|
|
|
|
background: linear-gradient(157deg, #A043C1 0%, #4133A2 100%);
|
|
|
|
|
|
font-size: 28rpx;
|
|
|
|
|
|
font-family: PingFang-SC-Bold, PingFang-SC;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
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;
|
2024-05-15 16:16:35 +08:00
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
2024-04-25 11:42:21 +08:00
|
|
|
|
|
|
|
|
|
|
.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 {
|
2024-05-15 16:16:35 +08:00
|
|
|
|
flex: 1;
|
2024-04-25 11:42:21 +08:00
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
