| | |
| | |
|
| | | </map>
|
| | | <view class="main_content">
|
| | | <view class="info">
|
| | | <view class="info"> |
| | | <view class="stock_status" v-if="info.overStock && info.overStock == 1"> |
| | | <image src="@/static/ic_tip@2x.png" mode=""></image> |
| | | <view class="">因库存不足,订单暂时无法配载</view> |
| | | </view>
|
| | | <view class="head">
|
| | | <view class="code">{{info.contractNumber}}</view>
|
| | | <view class="status">{{info.orderStatusDesc}}</view>
|
| | |
| | | </view>
|
| | | <view class="line">
|
| | | <view class="la">车辆位置</view>
|
| | | <view class="val">{{'-'}}</view>
|
| | | <view class="val">{{ info.address || '-'}}</view>
|
| | | </view>
|
| | | <view class="line">
|
| | | <view class="la">预计到达</view>
|
| | | <view class="val primaryColor" v-if="info.plannedArrivedDate">{{info.plannedArrivedDate.slice(0,11)}}</view>
|
| | | </view>
|
| | | </view> |
| | | <view v-if="showRecord" class="table"> |
| | | <view class="ite header"> |
| | | <view class="name">品规名称</view> |
| | | <view class="num">数量<text>(万支)</text></view> |
| | | </view> |
| | | <view class="ite" v-for="ite in info.orderDetailVOList"> |
| | | <view class="name">{{ite.productName}}</view> |
| | | <view class="num">{{ite.pnumber}}</view> |
| | | </view> |
| | | </view> |
| | | <view class="line switch" @click="showRecord = !showRecord"> |
| | | <view class="">{{ showRecord ? '收起品规明细' : '查看品规明细'}}</view> |
| | | <u-icon v-if="!showRecord" name="arrow-down" size="12" class="ml6" color='#666666'></u-icon> |
| | | <u-icon v-if="showRecord" name="arrow-up" size="12" class="ml6" color='#666666'></u-icon> |
| | | </view> |
| | | |
| | | </view>
|
| | | </view>
|
| | | <view class="drive_info">
|
| | | <view class="title">物流信息</view>
|
| | | <view class="drive_list" v-for="dri,k in info.cicleStatusList">
|
| | | <view class="separate"></view>
|
| | | <view class="separate" v-if="k < info.cicleStatusList.length - 1"></view>
|
| | | <view class="item_title">
|
| | | <view class="icon_wrap">
|
| | | <image v-if="dri.key == 0 && k != 0" src="@/static/waybill/ic_dingdan@2x.png" class="icon"></image>
|
| | |
| | | <image v-if="dri.key == 2 && k == 0" src="@/static/waybill/ic_cangku_sel@2x.png" class="icon"></image>
|
| | | <image v-if="dri.key == 3 && k != 0" src="@/static/waybill/ic_yunshu@2x.png" class="icon"></image>
|
| | | <image v-if="dri.key == 3 && k == 0" src="@/static/waybill/ic_yunshu_sel@2x.png" class="icon"></image>
|
| | | <image v-if="dri.key == 4" src="@/static/waybill/ic_daohuo_sel@2x.png" class="icon"></image>
|
| | | <image v-if="dri.key == 4 && k != 0" src="@/static/waybill/ic_dingdan@2x.png" class="icon"></image> |
| | | <image v-if="dri.key == 4 && k == 0" src="@/static/waybill/ic_daohuo_sel@2x.png" class="icon"></image>
|
| | | <image v-if="dri.key == 5" src="@/static/waybill/ic_ruku.png" class="icon"></image>
|
| | | </view>
|
| | | <view class="" :class="{primaryColor: k == 0}">{{dri.name}}</view>
|
| | |
| | | <view v-else class="icon_wrap"></view>
|
| | | <view class="text" :class="{placeholder3: k==0 && i== 0}">
|
| | | {{item.orderStatusDes}}
|
| | | <text v-if="item.tel">,发货仓库电话:</text>
|
| | | <text v-if="item.tel" @click="callPhone(item.tel)" class="primaryColor">{{item.tel}}</text>
|
| | | <text v-if="item.tel">,发货仓库电话:</text> |
| | | <template v-if="item.tel"> |
| | | <text v-for="phone,p in item.tel.split(',')" @click="callPhone(phone)" class="primaryColor">{{phone}}<text v-if="p < item.tel.split(',').length - 1">,</text></text> |
| | | </template>
|
| | | |
| | | </view>
|
| | | </view>
|
| | | <view class="time">{{item.recordDate}}</view>
|
| | |
| | | // color: '#FF0000',
|
| | | // width: 3
|
| | | // },
|
| | | ]
|
| | | ], |
| | | showRecord: false
|
| | | };
|
| | | },
|
| | | onLoad(options) {
|
| | |
| | | }
|
| | | if (res.data && res.data.gisList && res.data.gisList.length > 0) {
|
| | | this.gisInfo = res.data.gisList[0]
|
| | | if (this.gisInfo && this.gisInfo.gisList && this.gisInfo.gisList.length > 0) {
|
| | | if (this.gisInfo && this.gisInfo.gisList && this.gisInfo.gisList.length > 0) { |
| | | const apiKey = 'd9a554b1808ce10a12a932ed9b0db1d0'; |
| | | let adsInfo = this.gisInfo.gisList[this.gisInfo.gisList.length - 1] |
| | | const location = adsInfo.lon1 + ',' + adsInfo.lat1; |
| | | uni.request({ |
| | | url: `https://restapi.amap.com/v3/geocode/regeo?key=${apiKey}&location=${location}`, |
| | | method: 'GET', |
| | | success: (res) => { |
| | | this.$set(this.info, 'address', res.data.regeocode.formatted_address) |
| | | }, |
| | | })
|
| | | this.polyline = []
|
| | | let temp = {
|
| | | color: '#ff0000',
|
| | |
| | | }
|
| | | this.polyline.push(temp)
|
| | | }
|
| | | }
|
| | | } |
| | | |
| | | })
|
| | | },
|
| | | distance() {
|
| | |
| | | background: #fff;
|
| | | border-radius: 16rpx;
|
| | | padding: 30rpx;
|
| | | margin-bottom: 20rpx;
|
| | | position: relative;
|
| | | margin-bottom: 20rpx; |
| | | position: relative; |
| | | z-index: 999;
|
| | |
|
| | | .separate {
|
| | | height: calc(100% - 250rpx);
|
| | | width: 1rpx;
|
| | | border: 1rpx dashed #CCCCCC;
|
| | | position: absolute;
|
| | | left: 53rpx;
|
| | | top: 102rpx;
|
| | | z-index: -1;
|
| | | .drive_list{ |
| | | position: relative; |
| | | z-index: 999; |
| | | .separate { |
| | | height: calc(100% - 48rpx); |
| | | width: 1rpx; |
| | | border: 1rpx dashed #CCCCCC; |
| | | position: absolute; |
| | | left: 24rpx; |
| | | top: 48rpx; |
| | | z-index: -1; |
| | | } |
| | | }
|
| | | |
| | |
|
| | | .title {
|
| | | font-weight: 500;
|
| | |
| | | }
|
| | |
|
| | | .icon_wrap {
|
| | | width: 48rpx;
|
| | | width: 50rpx;
|
| | | margin-right: 30rpx;
|
| | | display: flex;
|
| | | align-items: center;
|
| | | // align-items: center;
|
| | | justify-content: center;
|
| | |
|
| | | flex-shrink: 0;
|
| | | .icon {
|
| | | width: 48rpx;
|
| | | height: 48rpx;
|
| | | width: 50rpx;
|
| | | height: 50rpx;
|
| | | position: relative;
|
| | | z-index: 2;
|
| | | }
|
| | |
| | | position: relative;
|
| | | color: #999999;
|
| | | margin-bottom: 30rpx;
|
| | |
|
| | | &:nth-last-child(1){ |
| | | margin-bottom: 0; |
| | | padding-bottom: 30rpx; |
| | | }
|
| | | .text {
|
| | | color: #666666;
|
| | | color: #666666; |
| | | flex: 1;
|
| | | }
|
| | |
|
| | | .icon {
|
| | | width: 20rpx;
|
| | | height: 20rpx;
|
| | | position: relative;
|
| | | z-index: 2;
|
| | | z-index: 2; |
| | | margin-top: 12rpx;
|
| | | }
|
| | |
|
| | | .h2 {
|
| | | display: flex;
|
| | | align-items: center;
|
| | | height: 48rpx;
|
| | | // align-items: center;
|
| | | // height: 48rpx;
|
| | | }
|
| | |
|
| | | .h1 {}
|
| | |
| | | }
|
| | | }
|
| | | }
|
| | |
|
| | | .info {
|
| | | border-radius: 12rpx;
|
| | | margin-bottom: 20rpx;
|
| | |
| | | background-color: #fff;
|
| | | overflow: hidden;
|
| | | position: relative;
|
| | | z-index: 1;
|
| | |
|
| | | z-index: 1; |
| | | .stock_status{ |
| | | background: #FFEEEE; |
| | | font-size: 26rpx; |
| | | color: #ED4545; |
| | | display: flex; |
| | | align-items: center; |
| | | border-radius: 8rpx 8rpx 0rpx 0rpx; |
| | | height: 80rpx; |
| | | margin: 0rpx -30rpx 0; |
| | | position: relative; |
| | | z-index: 1; |
| | | padding: 0 30rpx; |
| | | image{ |
| | | width: 28rpx; |
| | | height: 28rpx; |
| | | margin-right: 10rpx; |
| | | } |
| | | }
|
| | | .head {
|
| | | display: flex;
|
| | | justify-content: space-between;
|
| | | align-items: center;
|
| | | padding: 0 30rpx;
|
| | | width: 690rpx;
|
| | | width: 690rpx; |
| | | border-radius: 8rpx 8rpx 0rpx 0rpx;
|
| | | height: 84rpx;
|
| | | margin: 0 -30rpx;
|
| | | background: linear-gradient(270deg, #FEFEFF 0%, #E1F7FE 100%);
|
| | |
|
| | | position: relative; |
| | | z-index: 11;
|
| | | .code {
|
| | | font-weight: 500;
|
| | | font-size: 32rpx;
|
| | |
| | | width: 140rpx;
|
| | | }
|
| | |
|
| | | .val {}
|
| | | .val { |
| | | flex: 1; |
| | | }
|
| | |
|
| | | &:nth-last-child(1) {
|
| | | margin-bottom: 0;
|
| | | }
|
| | | }
|
| | | .table{ |
| | | margin: 0 auto 20rpx; |
| | | .ite{ |
| | | width: 100%; |
| | | height: 68rpx; |
| | | background: #FFFFFF; |
| | | border-bottom: 1rpx solid #E5E5E5; |
| | | display: flex; |
| | | align-items: center; |
| | | font-size: 28rpx; |
| | | padding-left: 30rpx; |
| | | .name{ |
| | | flex: 8; |
| | | // padding-left: 20rpx; |
| | | } |
| | | .num{ |
| | | flex: 3; |
| | | } |
| | | } |
| | | .header{ |
| | | background: #F4F7FC; |
| | | font-weight: 500; |
| | | text{ |
| | | font-size: 22rpx; |
| | | } |
| | | } |
| | | } |
| | | .switch{ |
| | | display: flex; |
| | | align-items: center; |
| | | justify-content: center; |
| | | color: #666666; |
| | | } |
| | | }
|
| | |
|
| | | }
|