sdz/jobslink-user-clent
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

flat: 添加地图

Browse Source
This commit is contained in:
Apcallover
2024-04-25 11:42:21 +08:00
parent 25f9e96a57
commit 3a5b9dd6cd
10 changed files with 487 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
api/map.js
View File

@@ -59,4 +59,10 @@ export const querySearch = (keyword, key) => {
reject(err)
})
})
}
}
export const geQueryJobsByNearby = (params) => request({
url: '/api/jobslink-api/nearby/job/queryJobsByNearby',
method: 'get',
params
});

9
pages.json
View File

@@ -398,6 +398,15 @@
"navigationBarBackgroundColor": "#FFFFFF",
"enablePullDownRefresh": false
}
},
{
"path": "pages/project/map",
"style": {
"backgroundTextStyle": "dark",
"navigationBarTextStyle": "black",
"enablePullDownRefresh": true,
"navigationStyle": "custom"
}
}
],
"subPackages": [{

434
pages/project/map.vue Normal file
View File

@@ -0,0 +1,434 @@
<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"
placeholder="搜索地点或者附近的任务及岗位">
<button class="input-btn" @tap="search">搜索</button>
</view>
</view>
</view>
<view class="view-map">
<map style="width: 100%;height: 100%;" scale="16" :latitude="latitude" :longitude="longitude"
:markers="covers" @markertap="clickmark" @regionchange="show = false"></map>
<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 '无'
}
},
onShow() {
const _this = this
// uni.getLocation({
// type: 'gcj02',
// success: function(res) {
// const {
// longitude,
// latitude
// } = res
// _this.$api.msg('成功获得周边信息')
// console.log('成功获得周边信息', res)
// _this.latitude = latitude
// _this.longitude = longitude
// _this.$api.msg('获得周边信息')
// _this.getList(lon, lat).then((covers) => {
// _this.covers = covers
// })
// },
// fail: function(err) {
// _this.$api.msg('无法获得周边信息')
// },
// complete: function(e) {}
// })
this.mockGetLocation().then((myPoint) => {
// this.latitude = myPoint.latitude
// this.longitude = myPoint.longitude
_this.getList(_this.longitude, _this.latitude).then((covers) => {
_this.$api.msg('成功获得周边信息')
_this.covers = covers
})
})
},
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() {
this.getList(this.longitude, this.longitude).then((covers) => {
this.covers = covers
})
},
clickmark(e) {
if (e.detail.markerId === 1) return
this.show = true;
for (var i = 0; i < this.covers.length; i++) {
//遍历集合找出对应的maekerid的数据
if (this.covers[i].id == e.detail.markerId) {
this.productInfo = this.covers[i].info
break;
}
}
},
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 json = [{
// "id": "1783015444661387266",
// "createUser": "242452735",
// "createDept": "171612561",
// "createTime": "2024-04-24 14:09:43",
// "updateUser": "242452735",
// "updateTime": "2024-04-24 14:09:43",
// "status": 1,
// "isDeleted": 0,
// "missionTitle": "维修人员",
// "skillNames": "市场/品牌推广",
// "companyIndustry": "家政",
// "tradeId": "1754327500065390599",
// "tradeNames": "制造业",
// "wage": "3",
// "wageUnitCategory": 2,
// "lat": 31.131007394902717,
// "lon": 104.40944639490272,
// "type": "post",
// "address": "广告法规定发给对方的反感",
// "cityId": "北京-北京市-东城区 ",
// "missionDesc": "范德萨发大水发发的发的发的方法是否是对方感受感受地方噶 好好放个假非户籍",
// "stime": "2024-04-25 00:00:00",
// "etime": "2024-04-26 00:00:00",
// "etimePub": "",
// "education": 7,
// "experienceDesc": "不限经验",
// "callName": "叶婷婷",
// "callTel": "15196372910"
// }]
// const arr = json.map((item) => ({
// id: item.id,
// longitude: item.lon,
// latitude: item.lat,
// iconPath: item.type === 'post' ? gwpoint : taskpoint,
// width: 20,
// height: 20,
// callout: {
// content: item.missionTitle,
// fontSize: 10,
// borderColor: 'blue',
// },
// info: item
// }))
// arr.push({
// id: 1,
// latitude: lat,
// longitude: lon,
// iconPath: mypoint,
// width: 20,
// height: 20
// })
// resolve(arr)
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,
callout: {
content: item.missionTitle,
fontSize: 10,
borderColor: 'blue',
},
info: item
}))
arr.push({
id: 1,
latitude: lat,
longitude: lon,
iconPath: mypoint,
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;
.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 {
height: 100%;
width: 100%;
}
}
</style>

7
pages/project/project.vue
View File

@@ -3,9 +3,9 @@
<view class="titleSearch">
<view class="searchName">搜 索</view>
<u-search placeholder="搜零工岗位/搜全职岗位/搜政策" @focus="goSeach" shape="round" :showAction="false"></u-search>
<u-search placeholder="搜任务/搜岗位/搜政策" @focus="goSeach" shape="round" :showAction="false"></u-search>
</view>
<view class="navPosition" @click="navTo('/pages/project/projectList')">
<view class="navPosition" @click="navTo('/pages/project/map')">
<u-icon name="map" color="#2979ff" size="16"></u-icon>
<view class="positionText">四川德阳市</view>
<u-icon name="arrow-right" color="#666666" size="14"></u-icon>
@@ -174,7 +174,8 @@
isSearch: false,
searchData: {},
nonReactiveArray: ["推荐零工岗位", "推荐全职岗位"],
// nonReactiveArray: ["推荐任务", "推荐岗位", "个体户招工"],
nonReactiveArray: ["推荐零工任务", "推荐岗位"],
}
},
onLoad: function() {

BIN
static/img/direction.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 531 B

BIN
static/img/direction2.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 565 B

BIN
static/img/gwpoint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

BIN
static/img/mypoint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
static/img/taskpoint.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.4 KiB

35
untils/tools.js
View File

@@ -1,4 +1,4 @@
function onDialingPhoneNumber(phone) {
export function onDialingPhoneNumber(phone) {
return new Promise((resolve, reject) => {
uni.makePhoneCall({
phoneNumber: phone, // 电话号码
@@ -11,8 +11,39 @@ function onDialingPhoneNumber(phone) {
});
})
}
/**
* 个位数，加0前缀
* @param {*} number
* @returns
*/
export function addZeroPrefix(number) {
return number < 10 ? `0${number}` : number
}
export function getDistanceFromLatLonInKm(lat1, lon1, lat2, lon2) {
const R = 6371; // 地球平均半径，单位为公里
const dLat = deg2rad(lat2 - lat1);
const dLon = deg2rad(lon2 - lon1);
const a =
Math.sin(dLat / 2) * Math.sin(dLat / 2) +
Math.cos(deg2rad(lat1)) * Math.cos(deg2rad(lat2)) *
Math.sin(dLon / 2) * Math.sin(dLon / 2);
const c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1 - a));
const d = R * c;
return {
km: d,
m: d * 1000
};
}
// 将角度转换为弧度
function deg2rad(deg) {
return deg * (Math.PI / 180);
}
export default {
onDialingPhoneNumber
onDialingPhoneNumber,
addZeroPrefix,
getDistanceFromLatLonInKm
}