|
@@ -0,0 +1,326 @@
|
|
|
+<template>
|
|
|
+ <!-- 物流详情 -->
|
|
|
+ <view class="card_logist">
|
|
|
+ <view class="map_card">
|
|
|
+ <map style="width: 100%;" :style="{height:windowHeight * 2 + 'rpx'}" :latitude="latitude"
|
|
|
+ :longitude="longitude" :enable-3D="true" :scale="scale" :polyline="polylineList" :markers="markers" :v-if="showmap">
|
|
|
+ </map>
|
|
|
+ </view>
|
|
|
+ <view class="card_logistics">
|
|
|
+ <view class="img_head" @click="clickImg">
|
|
|
+ <image style="width: 80rpx;height: 40rpx;transform: rotate(0deg);" v-if="logisticsFlag"
|
|
|
+ src="../../static/unfold.png"></image>
|
|
|
+ <image style="width: 80rpx;height: 40rpx;transform: rotate(180deg);" v-else
|
|
|
+ src="../../static/unfold.png"></image>
|
|
|
+ </view>
|
|
|
+ <view class="card_wlxq" v-if="logisticsFlag">
|
|
|
+ <text class="title_logistics_il">物流详情</text>
|
|
|
+ <view class="card_steps" v-if="activitiesList.length > 0">
|
|
|
+ <view class="steps">
|
|
|
+ <view class="steps_item" v-for="(i, index) in activitiesList" :key="index">
|
|
|
+ <view class="s_r">
|
|
|
+ <text class="line"
|
|
|
+ :style="{ backgroundColor: index != 0 ? '#EAEAEA' : 'rgba(0,0,0,0)' }"></text>
|
|
|
+ <text class="index_title" :style="{ backgroundColor: i.backgroundColor, color: color }">
|
|
|
+ </text>
|
|
|
+ <text class="line1"
|
|
|
+ :style="{ backgroundColor: index != activitiesList.length - 1 ? '#EAEAEA' : 'rgba(0,0,0,0)' }">
|
|
|
+ </text>
|
|
|
+ </view>
|
|
|
+ <view class="s_l">
|
|
|
+ <text class="title_scacm_34">{{ i.text }}
|
|
|
+ <text v-if="i.phone">
|
|
|
+ 联系电话:<text style="color: #f29100;margin-right: 15rpx;">{{i.phone}}</text>
|
|
|
+ </text>
|
|
|
+ {{ i.text1 }}
|
|
|
+ </text>
|
|
|
+ <text class="date_scacm">{{ i.createdAt || ''}}</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="not_card" v-else style="padding-bottom: 20rpx;">
|
|
|
+ <image style="width: 280rpx;height: 220rpx;padding: 30rpx;" src="../../static/task/not.png"></image>
|
|
|
+ <text class="not_title">暂无物流信息</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+ const ENV = require('../../.env.js')
|
|
|
+ export default {
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ windowHeight: uni.getSystemInfoSync().windowHeight, //屏幕高度
|
|
|
+ orderList: {},
|
|
|
+ trackList: [],
|
|
|
+ map: null,
|
|
|
+ longitude: 106.6282014,
|
|
|
+ latitude: 26.64669,
|
|
|
+ scale: 13,
|
|
|
+ activitiesList: [],
|
|
|
+ active: 0,
|
|
|
+ statusList: [{
|
|
|
+ id: 3,
|
|
|
+ title: '待配送',
|
|
|
+ }, {
|
|
|
+ id: 4,
|
|
|
+ title: '配送中',
|
|
|
+ }, {
|
|
|
+ id: 5,
|
|
|
+ title: '已送达',
|
|
|
+ }, {
|
|
|
+ id: 6,
|
|
|
+ title: '已拒收',
|
|
|
+ }],
|
|
|
+ polylineList: [],
|
|
|
+ markers: [],
|
|
|
+ logisticsFlag: true,
|
|
|
+ showmap: false,
|
|
|
+ color: '#fff',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ uni.setNavigationBarTitle({
|
|
|
+ title: '物流详情',
|
|
|
+ })
|
|
|
+ var orderList = uni.getStorageSync('orderDetails')
|
|
|
+ this.orderList = orderList
|
|
|
+ this.$nextTick(() => {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.getList()
|
|
|
+ })
|
|
|
+ })
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
+ uni.request({
|
|
|
+ url: ENV.APP_DEV_URL + '/api/waybill-logistics',
|
|
|
+ method: 'GET',
|
|
|
+ data: {
|
|
|
+ waybillNo: this.orderList.waybillNo,
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ var arrList = res.data.data.list
|
|
|
+ arrList.forEach(async (item) => {
|
|
|
+ item.backgroundColor = '#ffffff'
|
|
|
+ item.text = ''
|
|
|
+ let arr = ''
|
|
|
+ this.statusList.forEach((item1) => {
|
|
|
+ if (item.status == item1.id) {
|
|
|
+ arr = item1.title
|
|
|
+ }
|
|
|
+ });
|
|
|
+ let yonTitle = ''
|
|
|
+ if (item.coolerBox.id) {
|
|
|
+ yonTitle = item.coolerBox.name
|
|
|
+ }
|
|
|
+ item.text = item.address + '【' + yonTitle + '】' + ' ' + '您的货物' +
|
|
|
+ arr
|
|
|
+ })
|
|
|
+ arrList[0].backgroundColor = '#2979ff'
|
|
|
+ this.activitiesList = arrList.reverse()
|
|
|
+ this.getTrack()
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ // 处理请求失败情况
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ // 获取轨迹
|
|
|
+ getTrack() {
|
|
|
+ uni.request({
|
|
|
+ url: ENV.APP_DEV_URL + '/api/waybill-task/locus',
|
|
|
+ method: 'GET',
|
|
|
+ data: {
|
|
|
+ waybillNo: this.orderList.waybillNo,
|
|
|
+ },
|
|
|
+ success: (res) => {
|
|
|
+ if (res.data.code == 200) {
|
|
|
+ let arr = res.data.data
|
|
|
+ let arrList = []
|
|
|
+ if (arr.length > 0) {
|
|
|
+ arr.forEach(item => {
|
|
|
+ if (item.T_site != '0,0' && item.T_site) {
|
|
|
+ const arr1 = item.T_site.split(',')
|
|
|
+ const list = {
|
|
|
+ latitude: arr1[1],
|
|
|
+ longitude: arr1[0],
|
|
|
+ }
|
|
|
+ arrList.push(list)
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ let polyline = [{
|
|
|
+ points: arrList,
|
|
|
+ color: '#3591FC',
|
|
|
+ width: 15,
|
|
|
+ arrowLine: true,
|
|
|
+ }]
|
|
|
+ this.polylineList = polyline
|
|
|
+ const markers0 = {
|
|
|
+ latitude: arrList[0].latitude,
|
|
|
+ longitude: arrList[0].longitude,
|
|
|
+ id: 0,
|
|
|
+ iconPath: '/static/task/startpoint.png',
|
|
|
+ width: 35,
|
|
|
+ height: 35,
|
|
|
+ }
|
|
|
+ const markers1 = {
|
|
|
+ latitude: arrList[arrList.length - 1].latitude,
|
|
|
+ longitude: arrList[arrList.length - 1].longitude,
|
|
|
+ id: 1,
|
|
|
+ iconPath: '/static/task/endpoint.png',
|
|
|
+ width: 35,
|
|
|
+ height: 35,
|
|
|
+ }
|
|
|
+ let markers = []
|
|
|
+ markers.push(markers0)
|
|
|
+ markers.push(markers1)
|
|
|
+ this.markers = markers
|
|
|
+ this.latitude = arrList[arrList.length - 1].latitude
|
|
|
+ this.longitude = arrList[arrList.length - 1].longitude
|
|
|
+ this.$forceUpdate()
|
|
|
+ this.showmap = true;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ fail: (err) => {
|
|
|
+ // 处理请求失败情况
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ clickImg() {
|
|
|
+ if (this.logisticsFlag) {
|
|
|
+ this.logisticsFlag = false
|
|
|
+ } else {
|
|
|
+ this.logisticsFlag = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+ .card_logist {
|
|
|
+ position: fixed;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ right: 0;
|
|
|
+ bottom: 0;
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card_logistics {
|
|
|
+ z-index: 2023;
|
|
|
+ position: absolute;
|
|
|
+ display: flex;
|
|
|
+ bottom: 0;
|
|
|
+ left: 20rpx;
|
|
|
+ right: 20rpx;
|
|
|
+ // width: calc(100% - 40rpx);
|
|
|
+ // margin: 20rpx 20rpx 0rpx 20rpx;
|
|
|
+ background-color: #fff;
|
|
|
+ border-top-right-radius: 10rpx;
|
|
|
+ border-top-left-radius: 10rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .img_head {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10rpx 0rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card_wlxq {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_logistics_il {
|
|
|
+ font-size: 30rpx;
|
|
|
+ font-weight: 600;
|
|
|
+ padding: 0rpx 20rpx 0rpx 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .card_steps {
|
|
|
+ display: flex;
|
|
|
+ padding: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .overturn {
|
|
|
+ transform: rotate(180deg);
|
|
|
+ }
|
|
|
+
|
|
|
+ .steps {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .steps_item {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+ flex: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s_r {
|
|
|
+ padding: 0 20rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ width: 50rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line {
|
|
|
+ width: 5rpx;
|
|
|
+ height: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .line1 {
|
|
|
+ width: 5rpx;
|
|
|
+ height: 90rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .index_title {
|
|
|
+ width: 24rpx;
|
|
|
+ height: 24rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ border: 4rpx solid #e3eeff;
|
|
|
+ }
|
|
|
+
|
|
|
+ .s_l {
|
|
|
+ flex: 1;
|
|
|
+ height: 120rpx;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ padding-bottom: 20rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .date_scacm {
|
|
|
+ font-size: 23rpx;
|
|
|
+ color: #afb4be;
|
|
|
+ }
|
|
|
+
|
|
|
+ .title_scacm_34 {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: 500;
|
|
|
+ color: rgba(102, 102, 102, 1);
|
|
|
+ }
|
|
|
+
|
|
|
+ .not_card {
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .not_title {
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #afb4be;
|
|
|
+ }
|
|
|
+</style>
|