From 8c4dd05b10fcaeb94c09613699aab923318a1c6d Mon Sep 17 00:00:00 2001
From: qingyiay <2386314947@qq.com>
Date: 星期日, 02 七月 2023 18:13:27 +0800
Subject: [PATCH] 称重逻辑简化，提高可读性
---
pages/public-page/mapRoute/mapRoute.vue | 472 +++++++++++++++++++++++++++++++---------------------------
1 files changed, 253 insertions(+), 219 deletions(-)
diff --git a/pages/public-page/mapRoute/mapRoute.vue b/pages/public-page/mapRoute/mapRoute.vue
index b534ca6..1587f90 100644
--- a/pages/public-page/mapRoute/mapRoute.vue
+++ b/pages/public-page/mapRoute/mapRoute.vue
@@ -1,8 +1,16 @@
<template>
<view>
- <view class="page-body" style="margin-top: 4rpx;">
+ <view class="page-body"
+ style="margin-top: 4rpx;">
<view class="page-section page-section-gap">
- <map style="width: 100%; height: 600px;" :latitude="latitude" :longitude="longitude" :markers="markers" :polyline="polyline"></map>
+ <map style="width: 100%; height: 600px;"
+ :latitude="latitude"
+ :longitude="longitude"
+ :markers="markers"
+ :polyline="polyline"
+ @markertap="awaken"
+ @callouttap="awaken"
+ @tap="awaken"></map>
</view>
</view>
<view class="tip">
@@ -15,245 +23,271 @@
<text>{{ duration || '' }}</text>
</view>
</view>
- <view class="open-button" @click="awaken"><button type="default">璺宠浆</button></view>
+ <view class="open-button"
+ @click="awaken"><u-button type="primary">浣跨敤鎵嬫満鍦板浘</u-button></view>
</view>
</template>
<script>
-export default {
- data() {
- return {
- latitude: 38.04606544104117,
- longitude: 114.48735479816793,
- customerId: '',
- filedId: '',
- orderType: '',
- toFiledId: '',
- // 璧风偣缁忕含搴�
- originlongitude: 39.909,
- originlatitude: 116.39742,
- // 缁堢偣
- finishlongitude: null,
- finishlatitude: null,
- markers: [
- {
- latitude: null,
- longitude: null,
- iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png',
- width: 23,
- height: 33,
- id: 0,
- callout: {
- content: '璧风偣', //鏂囨湰
- color: '#000000', //鏂囧瓧棰滆壊
- fontSize: 14, //鏂囨湰澶у皬
- borderRadius: 15, //杈规鍦嗚
- borderWidth: '10',
- bgColor: '#e51860', //鑳屾櫙棰滆壊
- display: 'ALWAYS' //甯告樉
+ import { onlineurl } from '@/api/request.js'
+ export default {
+ data() {
+ return {
+ onlineurl,
+ latitude: 38.04606544104117,
+ longitude: 114.48735479816793,
+ customerId: '',
+ filedId: '',
+ orderType: '',
+ toFiledId: '',
+ // 璧风偣缁忕含搴�
+ originlongitude: 39.909,
+ originlatitude: 116.39742,
+ // 缁堢偣
+ finishlongitude: null,
+ finishlatitude: null,
+ markers: [{
+ latitude: null,
+ longitude: null,
+ iconPath: `${onlineurl}/appimg/image/banner/location.png`,
+ width: 23,
+ height: 33,
+ id: 0,
+ callout: {
+ content: '璧风偣', //鏂囨湰
+ color: '#ffffff', //鏂囧瓧棰滆壊
+ fontSize: 10, //鏂囨湰澶у皬
+ borderRadius: 12, //杈规鍦嗚
+ borderWidth: '10',
+ bgColor: '#08b078', //鑳屾櫙棰滆壊
+ display: 'ALWAYS' //甯告樉
+ }
+ },
+ {
+ latitude: null,
+ longitude: null,
+ iconPath: `${onlineurl}/appimg/image/banner/location.png`,
+ width: 23,
+ height: 33,
+ id: 1,
+ callout: {
+ content: '缁堢偣', //鏂囨湰
+ color: '#ffffff', //鏂囧瓧棰滆壊
+ fontSize: 10, //鏂囨湰澶у皬
+ borderRadius: 12, //杈规鍦嗚
+ borderWidth: '10',
+ bgColor: '#fc645c', //鑳屾櫙棰滆壊
+ display: 'ALWAYS' //甯告樉
+ }
}
- },
- {
- latitude: null,
- longitude: null,
- iconPath: 'https://mx.jzeg.cn:9095/appimg/image/banner/location.png',
- width: 23,
- height: 33,
- id: 1,
- callout: {
- content: '缁堢偣', //鏂囨湰
- color: '#ffffff', //鏂囧瓧棰滆壊
- fontSize: 14, //鏂囨湰澶у皬
- borderRadius: 15, //杈规鍦嗚
- borderWidth: '10',
- bgColor: '#e51860', //鑳屾櫙棰滆壊
- display: 'ALWAYS' //甯告樉
- }
- }
- ],
- polyline: [
- {
+ ],
+ polyline: [{
// 姣忎釜鐐圭殑缁忕含搴�
- points: [{ latitude: 38.04606544104117, longitude: 114.48735479816793 }, { latitude: 38.049531, longitude: 114.53521899999998 }],
+ points: [{ latitude: 38.04606544104117, longitude: 114.48735479816793 }, {
+ latitude: 38.049531,
+ longitude: 114.53521899999998
+ }],
// 棰滆壊
color: '#0091ff',
// 瀹藉害
width: 10
- }
- ],
- distance: null,
- duration: null,
- fromLocation: {},
- toLocation: {}
- };
- },
- methods: {
- getLocation() {
- uni.showLoading({
- title: '鍔犺浇涓��'
- });
- let QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
- let qqmapsdk = new QQMapWX({
- key: 'HTNBZ-LZGRQ-YDB5S-B4KAS-KLHJH-GHBUE' // 蹇呭～
- });
- const params = this.toFiledId ? { filedId: this.filedId, toFiledId: this.toFiledId } : { customerId: this.customerId, filedId: this.filedId };
- this.$reqGet('getAppLocation', params).then(result => {
- console.log(result, '鑵捐缁忕含搴�');
- let _this = this;
- console.log(_this.orderType, '绫诲瀷');
- let fromLocation;
- let toLocation;
- if (_this.orderType == '澶栬喘' || _this.orderType == '澶栭攢') {
- fromLocation = {
- longitude: result.data.customerLongitude,
- latitude: result.data.customerLatitude
- };
- toLocation = {
- longitude: result.data.filedLongitude,
- latitude: result.data.filedLatitude
- };
- } else if (_this.orderType == '鍐呰喘' || _this.orderType == '鍐呴攢') {
- fromLocation = {
- longitude: result.data.filedLongitude,
- latitude: result.data.filedLatitude
- };
- toLocation = {
- longitude: result.data.customerLongitude,
- latitude: result.data.customerLatitude
- };
- } else {
- fromLocation = {
- longitude: result.data.filedLongitude,
- latitude: result.data.filedLatitude
- };
- toLocation = {
- longitude: result.data.toFiledLongitude,
- latitude: result.data.toFiledLatitude
- };
+ }],
+ distance: null,
+ duration: null,
+ fromLocation: {},
+ toLocation: {}
+ };
+ },
+ methods: {
+ getLocation() {
+ uni.showLoading({
+ title: '鍔犺浇涓��'
+ });
+ let QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
+ let qqmapsdk = new QQMapWX({
+ key: 'HTNBZ-LZGRQ-YDB5S-B4KAS-KLHJH-GHBUE' // 蹇呭～
+ });
+ const params = this.toFiledId ? { filedId: this.filedId, toFiledId: this.toFiledId } : {
+ customerId: this
+ .customerId,
+ filedId: this.filedId
+ };
+ this.$reqGet('getAppLocation', params).then(result => {
+ console.log(result, '鑵捐缁忕含搴�');
+ let _this = this;
+ console.log(_this.orderType, '绫诲瀷');
+ let fromLocation;
+ let toLocation;
+ if (_this.orderType == '澶栬喘' || _this.orderType == '澶栭攢') {
+ fromLocation = {
+ longitude: result.data.customerLongitude,
+ latitude: result.data.customerLatitude
+ };
+ toLocation = {
+ longitude: result.data.filedLongitude,
+ latitude: result.data.filedLatitude
+ };
+ }
+ // else if (_this.orderType == '鍐呰喘' || _this.orderType == '鍐呴攢') {
+ // fromLocation = {
+ // longitude: result.data.filedLongitude,
+ // latitude: result.data.filedLatitude
+ // };
+ // toLocation = {
+ // longitude: result.data.customerLongitude,
+ // latitude: result.data.customerLatitude
+ // };
+ // }
+ else {
+ fromLocation = {
+ longitude: result.data.filedLongitude,
+ latitude: result.data.filedLatitude
+ };
+ toLocation = {
+ longitude: result.data.toFiledLongitude,
+ latitude: result.data.toFiledLatitude
+ };
+ // _this.fromLocation = fromLocation;
+ // _this.toLocation = toLocation;
+ }
+ console.log(fromLocation, toLocation);
_this.fromLocation = fromLocation;
_this.toLocation = toLocation;
- }
- _this.fromLocation = fromLocation;
- _this.toLocation = toLocation;
- //璋冪敤璺濈璁＄畻鎺ュ彛
- qqmapsdk.direction({
- mode: 'driving',
- //from鍙傛暟涓嶅～榛樿褰撳墠鍦板潃
- from: fromLocation,
- to: toLocation,
- success: function(res) {
- console.log(res);
- let ret = res;
- let coors = ret.result.routes[0].polyline,
- pl = [];
- //鍧愭爣瑙ｅ帇锛堣繑鍥炵殑鐐逛覆鍧愭爣锛岄�氳繃鍓嶅悜宸垎杩涜鍘嬬缉锛�
- let kr = 1000000;
- for (let i = 2; i < coors.length; i++) {
- coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
- }
- //灏嗚В鍘嬪悗鐨勫潗鏍囨斁鍏ョ偣涓叉暟缁刾l涓�
- for (let i = 0; i < coors.length; i += 2) {
- pl.push({ latitude: coors[i], longitude: coors[i + 1] });
- }
- console.log(pl);
- //璁剧疆polyline灞炴�э紝灏嗚矾绾挎樉绀哄嚭鏉�,灏嗚В鍘嬪潗鏍囩涓�涓暟鎹綔涓鸿捣鐐�
- _this.longitude = pl[0].longitude;
- _this.latitude = pl[0].latitude;
- _this.polyline = [
- {
+ //璋冪敤璺濈璁＄畻鎺ュ彛
+ qqmapsdk.direction({
+ mode: 'driving',
+ //from鍙傛暟涓嶅～榛樿褰撳墠鍦板潃
+ from: fromLocation,
+ to: toLocation,
+ success: function(res) {
+ console.log(res);
+ let ret = res;
+ let coors = ret.result.routes[0].polyline,
+ pl = [];
+ //鍧愭爣瑙ｅ帇锛堣繑鍥炵殑鐐逛覆鍧愭爣锛岄�氳繃鍓嶅悜宸垎杩涜鍘嬬缉锛�
+ let kr = 1000000;
+ for (let i = 2; i < coors.length; i++) {
+ coors[i] = Number(coors[i - 2]) + Number(coors[i]) / kr;
+ }
+ //灏嗚В鍘嬪悗鐨勫潗鏍囨斁鍏ョ偣涓叉暟缁刾l涓�
+ for (let i = 0; i < coors.length; i += 2) {
+ pl.push({ latitude: coors[i], longitude: coors[i + 1] });
+ }
+ console.log(pl);
+ //璁剧疆polyline灞炴�э紝灏嗚矾绾挎樉绀哄嚭鏉�,灏嗚В鍘嬪潗鏍囩涓�涓暟鎹綔涓鸿捣鐐�
+ _this.longitude = pl[0].longitude;
+ _this.latitude = pl[0].latitude;
+ _this.polyline = [{
points: pl,
- color: '#FF0000DD',
+ color: '#04b474',
width: 4,
arrowLine: true
+ }];
+ if (_this.orderType == '澶栬喘' || _this.orderType == '澶栭攢') {
+ _this.$set(_this.markers[0], 'longitude', result.data
+ .customerLongitude);
+ _this.$set(_this.markers[0], 'latitude', result.data.customerLatitude);
+ _this.$set(_this.markers[1], 'longitude', result.data.filedLongitude);
+ _this.$set(_this.markers[1], 'latitude', result.data.filedLatitude);
}
- ];
- if (_this.orderType == '澶栬喘' || _this.orderType == '澶栭攢') {
- _this.$set(_this.markers[0], 'longitude', result.data.customerLongitude);
- _this.$set(_this.markers[0], 'latitude', result.data.customerLatitude);
- _this.$set(_this.markers[1], 'longitude', result.data.filedLongitude);
- _this.$set(_this.markers[1], 'latitude', result.data.filedLatitude);
- } else if (_this.orderType == '鍐呰喘' || _this.orderType == '鍐呴攢') {
- _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude);
- _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude);
- _this.$set(_this.markers[1], 'longitude', result.data.customerLongitude);
- _this.$set(_this.markers[1], 'latitude', result.data.customerLatitude);
- } else {
- _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude);
- _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude);
- _this.$set(_this.markers[1], 'longitude', result.data.toFiledLongitude);
- _this.$set(_this.markers[1], 'latitude', result.data.toFiledLatitude);
+ // else if (_this.orderType == '鍐呰喘' || _this.orderType == '鍐呴攢') {
+ // _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude);
+ // _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude);
+ // _this.$set(_this.markers[1], 'longitude', result.data
+ // .customerLongitude);
+ // _this.$set(_this.markers[1], 'latitude', result.data.customerLatitude);
+ // }
+ else {
+ _this.$set(_this.markers[0], 'longitude', result.data.filedLongitude);
+ _this.$set(_this.markers[0], 'latitude', result.data.filedLatitude);
+ _this.$set(_this.markers[1], 'longitude', result.data
+ .toFiledLongitude);
+ _this.$set(_this.markers[1], 'latitude', result.data.toFiledLatitude);
+ }
+ },
+ fail: function(error) {
+ console.error(error);
+ },
+ complete: function(res) {
+ console.log(res);
+ uni.hideLoading();
+ _this.distance = res.result.routes[0].distance;
+ _this.distance = (_this.distance / 1000).toFixed(2);
+ _this.duration = _this.handleTime(res.result.routes[0].duration);
}
- },
- fail: function(error) {
- console.error(error);
- },
- complete: function(res) {
- console.log(res);
- uni.hideLoading();
- _this.distance = res.result.routes[0].distance;
- _this.distance = (_this.distance / 1000).toFixed(2);
- _this.duration = _this.handleTime(res.result.routes[0].duration);
- }
+ });
});
- });
+ },
+ //
+ handleTime(time) {
+ let now = new Date(); // 鑾峰彇褰撳墠鏃堕棿
+ now.setMinutes(now.getMinutes() + time);
+ let hours = now
+ .getHours()
+ .toString()
+ .padStart(2, '0');
+ let minutes = now
+ .getMinutes()
+ .toString()
+ .padStart(2, '0');
+ return hours + ':' + minutes;
+ },
+ // 鍞ら啋
+ awaken() {
+ uni.openLocation({
+ latitude: this.markers[1].latitude,
+ longitude: this.markers[1].longitude,
+ name: '鐩殑鍦�',
+ address: '鐩殑鍦�'
+ });
+ }
},
- //
- handleTime(time) {
- let now = new Date(); // 鑾峰彇褰撳墠鏃堕棿
- now.setMinutes(now.getMinutes() + time);
- let hours = now
- .getHours()
- .toString()
- .padStart(2, '0');
- let minutes = now
- .getMinutes()
- .toString()
- .padStart(2, '0');
- return hours + ':' + minutes;
+ onLoad(params) {
+ this.customerId = params.customerId;
+ this.filedId = params.filedId;
+ this.orderType = params.orderType;
+ if (params.toFiledId) {
+ this.toFiledId = params.toFiledId;
+ }
},
- // 鍞ら啋
- awaken() {
- uni.openLocation({
- latitude: this.markers[1].latitude,
- longitude: this.markers[1].longitude,
- name: '鐩殑鍦颁綅缃�',
- address: '鐩殑鍦颁綅缃�'
- });
+ onShow() {
+ this.getLocation();
+ // this.awaken();
}
- },
- onLoad(params) {
- this.customerId = params.customerId;
- this.filedId = params.filedId;
- this.orderType = params.orderType;
- if (params.toFiledId) {
- this.toFiledId = params.toFiledId;
- }
- },
- onShow() {
- this.getLocation();
- // this.awaken();
- }
-};
+ };
</script>
-<style lang="scss" scoped>
-.tip {
- margin-top: 60rpx;
- width: 94%;
- height: 40rpx;
- font-size: 40rpx;
- display: flex;
- justify-content: space-around;
- .first {
- color: #c78a64;
- text {
- font-size: 45rpx;
- color: #f81414;
+<style lang="scss"
+ scoped>
+ .tip {
+ width: 94%;
+ font-size: 40rpx;
+ margin: vww(22) auto;
+ display: flex;
+ justify-content: space-around;
+
+ .first {
+ color: #515151;
+
+ text {
+ font-size: 45rpx;
+ color: #f81414;
+ }
}
}
-}
-.open-button {
- width: 200rpx;
- margin: 10rpx 0;
-}
-</style>
+
+ .open-button {
+ width: 100%;
+ margin: 40rpx 0;
+ display: flex;
+ justify-content: center;
+
+ /deep/.u-button {
+ width: 300rpx;
+ border: 1px solid #3b56eb;
+ border-radius: 37rpx 37rpx 37rpx 37rpx;
+ background-color: transparent;
+ color: #3b56eb;
+ }
+ }
+</style>
\ No newline at end of file
--
Gitblit v1.9.1