| | |
| | | </view> |
| | | <view class="nr-desc" v-if="info.statusDesc">{{info.statusDesc || ''}}</view> |
| | | <view class="item" style="padding: 10rpx;" v-if="info.type ===1 && info.status===4"> |
| | | <map name="mapAddr"></map> |
| | | <map |
| | | name="mapAddr" |
| | | :latitude="mapLat" |
| | | :longitude="mapLng" |
| | | :scale="mapScale" |
| | | :markers="markers" |
| | | :polyline="polyline" |
| | | show-location |
| | | style="width: 100%; height: 100%;" |
| | | ></map> |
| | | </view> |
| | | <view class="item"> |
| | | <view class="addr"> |
| | |
| | | <script> |
| | | import { mapState } from 'vuex' |
| | | import drawQrcode from 'weapp-qrcode' |
| | | var amapFile = require('@/utils/amap-wx.130.js') |
| | | |
| | | export default { |
| | | computed: { |
| | |
| | | showPay:false, |
| | | showPhone:false, |
| | | linkItem:{title:'',linkname:'',linkphone:''}, |
| | | qrcodeImage:null |
| | | qrcodeImage:null, |
| | | mapLat: 0, |
| | | mapLng: 0, |
| | | mapScale: 10, |
| | | markers: [], |
| | | polyline: [] |
| | | } |
| | | }, |
| | | onShow() { |
| | |
| | | this.info = res.data |
| | | uni.$emit('updateOrder',{info:this.info,delete:0}) |
| | | this.showQrcodeImg() |
| | | if (this.info.type === 1 && this.info.status === 4) { |
| | | this.getRoutePlanning() |
| | | } |
| | | } |
| | | }, |
| | | getRoutePlanning() { |
| | | var that = this |
| | | var driverLat = this.info.driverLat |
| | | var driverLng = this.info.driverLng |
| | | var depositShopLat = this.info.depositShopLat |
| | | var depositShopLng = this.info.depositShopLng |
| | | |
| | | if (!driverLat || !driverLng || !depositShopLat || !depositShopLng) { |
| | | return |
| | | } |
| | | |
| | | this.mapLat = driverLat |
| | | this.mapLng = driverLng |
| | | |
| | | var myAmapFun = new amapFile.AMapWX({ key: this.$gaodeMapKey }) |
| | | myAmapFun.getDrivingRoute({ |
| | | origin: driverLng + ',' + driverLat, |
| | | destination: depositShopLng + ',' + depositShopLat, |
| | | success: function(data) { |
| | | var points = [] |
| | | if (data.paths && data.paths.length > 0) { |
| | | var path = data.paths[0] |
| | | for (var i = 0; i < path.steps.length; i++) { |
| | | var step = path.steps[i] |
| | | var stepPoints = step.Polyline.split(';') |
| | | for (var j = 0; j < stepPoints.length; j++) { |
| | | var point = stepPoints[j].split(',') |
| | | points.push({ |
| | | latitude: point[1], |
| | | longitude: point[0] |
| | | }) |
| | | } |
| | | } |
| | | } |
| | | |
| | | that.polyline = [{ |
| | | points: points, |
| | | color: '#004096', |
| | | width: 6, |
| | | arrowLine: true |
| | | }] |
| | | |
| | | that.markers = [ |
| | | { |
| | | id: 1, |
| | | latitude: driverLat, |
| | | longitude: driverLng, |
| | | iconPath: '/static/icon/start.png', |
| | | width: 30, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | }, |
| | | { |
| | | id: 2, |
| | | latitude: depositShopLat, |
| | | longitude: depositShopLng, |
| | | iconPath: '/static/icon/end.png', |
| | | width: 30, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | }, |
| | | { |
| | | id: 3, |
| | | latitude: driverLat, |
| | | longitude: driverLng, |
| | | iconPath: '/static/icon/dizhi.png', |
| | | width: 24, |
| | | height: 30, |
| | | anchor: { x: 0.5, y: 0.5 } |
| | | } |
| | | ] |
| | | |
| | | if (points.length > 0) { |
| | | that.mapLat = points[Math.floor(points.length / 2)].latitude |
| | | that.mapLng = points[Math.floor(points.length / 2)].longitude |
| | | } |
| | | }, |
| | | fail: function(err) { |
| | | console.error('获取路径规划失败', err) |
| | | that.markers = [ |
| | | { |
| | | id: 1, |
| | | latitude: driverLat, |
| | | longitude: driverLng, |
| | | iconPath: '/static/icon/start.png', |
| | | width: 30, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | }, |
| | | { |
| | | id: 2, |
| | | latitude: depositShopLat, |
| | | longitude: depositShopLng, |
| | | iconPath: '/static/icon/end.png', |
| | | width: 30, |
| | | height: 40, |
| | | anchor: { x: 0.5, y: 1 } |
| | | } |
| | | ] |
| | | } |
| | | }) |
| | | } |
| | | } |
| | | } |
| | |
| | | position: fixed; |
| | | top: 0; |
| | | left: 0; |
| | | z-index: 9; |
| | | z-index: 99999; |
| | | .head-nav { |
| | | width: 100%; |
| | | display: flex; |