| | |
| | | <template> |
| | | <view class="guiji"> |
| | | <map></map> |
| | | <map |
| | | :latitude="mapLatitude" |
| | | :longitude="mapLongitude" |
| | | :markers="markers" |
| | | :polyline="polyline" |
| | | :include-points="includePoints" |
| | | scale="14" /> |
| | | <view class="info"> |
| | | <view class="info_title">车辆编号:BH1018</view> |
| | | <view class="info_info">车辆类型:双排四座电动代步车</view> |
| | | <view class="info_info">车辆类型:双排四座电动代步车</view> |
| | | <view class="info_title">车辆编号:{{ info.bikeCode || '-' }}</view> |
| | | <view class="info_info">骑行开始时间:{{ info.rentDate || '-' }}</view> |
| | | <view class="info_info">骑行结束时间:{{ info.backDate || '-' }}</view> |
| | | <view class="info_info">骑行计费时长:{{ info.duration ? `${info.duration}分钟` : '-' }}</view> |
| | | </view> |
| | | </view> |
| | | </template> |
| | |
| | | export default { |
| | | data() { |
| | | return { |
| | | |
| | | id: null, |
| | | info: {}, |
| | | markers: [], |
| | | polyline: [], |
| | | includePoints: [], |
| | | mapLatitude: 31.8206, |
| | | mapLongitude: 117.2272 |
| | | }; |
| | | }, |
| | | onLoad(options) { |
| | | this.id = options.id |
| | | this.getInfo() |
| | | }, |
| | | methods: { |
| | | buildMarkers(startPoint, endPoint) { |
| | | const markers = [] |
| | | |
| | | if (startPoint) { |
| | | markers.push({ |
| | | id: 1, |
| | | latitude: startPoint.latitude, |
| | | longitude: startPoint.longitude, |
| | | width: 32, |
| | | height: 32, |
| | | iconPath: '/static/icon/ic_star@2x.png', |
| | | callout: { |
| | | content: '起点', |
| | | display: 'ALWAYS', |
| | | padding: 6, |
| | | borderRadius: 6, |
| | | bgColor: '#01B6AD', |
| | | color: '#FFFFFF', |
| | | fontSize: 12, |
| | | textAlign: 'center' |
| | | } |
| | | }) |
| | | } |
| | | |
| | | if (endPoint) { |
| | | markers.push({ |
| | | id: 2, |
| | | latitude: endPoint.latitude, |
| | | longitude: endPoint.longitude, |
| | | width: 32, |
| | | height: 32, |
| | | iconPath: '/static/icon/ic_end@2x.png', |
| | | callout: { |
| | | content: '终点', |
| | | display: 'ALWAYS', |
| | | padding: 6, |
| | | borderRadius: 6, |
| | | bgColor: '#FF5A31', |
| | | color: '#FFFFFF', |
| | | fontSize: 12, |
| | | textAlign: 'center' |
| | | } |
| | | }) |
| | | } |
| | | |
| | | return markers |
| | | }, |
| | | async getInfo() { |
| | | const res = await this.$u.api.orderRides({ |
| | | orderId: this.id |
| | | }) |
| | | |
| | | if (res.code === 200) { |
| | | const rideInfo = (res.data && res.data.rides && res.data.rides[0]) || {} |
| | | const tracks = Array.isArray(rideInfo.tracks) ? rideInfo.tracks.filter(item => item && item.latitude && item.longitude) : [] |
| | | const startPoint = tracks.length ? tracks[0] : null |
| | | const endPoint = tracks.length ? tracks[tracks.length - 1] : null |
| | | |
| | | this.info = rideInfo |
| | | this.includePoints = tracks |
| | | this.markers = this.buildMarkers(startPoint, endPoint) |
| | | this.polyline = tracks.length ? [{ |
| | | points: tracks, |
| | | color: '#01B6AD', |
| | | width: 6, |
| | | arrowLine: true, |
| | | borderColor: '#FFFFFF', |
| | | borderWidth: 1 |
| | | }] : [] |
| | | |
| | | if (startPoint) { |
| | | this.mapLatitude = startPoint.latitude |
| | | this.mapLongitude = startPoint.longitude |
| | | } |
| | | } |
| | | } |
| | | } |
| | | } |
| | | </script> |
| | |
| | | } |
| | | } |
| | | } |
| | | </style> |
| | | </style> |