productDev/dmvisit.git

			@@ -6,6 +6,10 @@
			</map>
			<view class="main_content">
			<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>
			@@ -30,18 +34,34 @@
			</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 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>
			@@ -52,7 +72,8 @@
			<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>
			@@ -64,9 +85,12 @@
			</view>
			<view v-else class="icon_wrap"></view>
			<view class="text" :class="{placeholder3: k==0 && i== 0}">
			{{item.orderStatusDes}}
			<text :style="{ color: item.orderStatus === 9 ? 'red' : '#666666'}">{{item.orderStatusDes}}</text>
			<text v-if="item.tel">，发货仓库电话：</text>
			<text v-if="item.tel" @click="callPhone(item.tel)" class="primaryColor">{{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>
			@@ -89,7 +113,7 @@
			param: {},

			latitude: 31.783205,
			longitude: 117.262635,
			longitude: 117.262635,
			scale: 5,
			markers: [],
			includePoints: [
			@@ -108,7 +132,8 @@
			// color: '#FF0000',
			// width: 3
			// },
			]
			],
			showRecord: false
			};
			},
			onLoad(options) {
			@@ -156,20 +181,31 @@
			}
			})
			this.latitude = (Number(this.markers[0].latitude) + Number(this.markers[1].latitude)) / 2 - 4
			this.longitude = (Number(this.markers[0].longitude) + Number(this.markers[1].longitude)) / 2
			const distance = this.distance()
			console.log('distance', distance);
			if(distance > 1500000){
			this.scale = 4
			}else if(distance < 600000){
			this.scale = 6
			}else{
			this.scale = 5
			this.longitude = (Number(this.markers[0].longitude) + Number(this.markers[1].longitude)) / 2
			const distance = this.distance()
			console.log('distance', distance);
			if(distance > 1500000){
			this.scale = 4
			}else if(distance < 600000){
			this.scale = 6
			}else{
			this.scale = 5
			}
			}
			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) {
			// const apiKey = 'd9a554b1808ce10a12a932ed9b0db1d0';
			const apiKey = '3916a7b434e7f13ae1a0af64e88ec0a3';
			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',
			@@ -184,6 +220,7 @@
			this.polyline.push(temp)
			}
			}

			})
			},
			distance() {
			@@ -254,16 +291,20 @@
			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;
			@@ -292,15 +333,15 @@
			}

			.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;
			}
			@@ -310,9 +351,13 @@
			position: relative;
			color: #999999;
			margin-bottom: 30rpx;

			&:nth-last-child(1){
			margin-bottom: 0;
			padding-bottom: 30rpx;
			}
			.text {
			color: #666666;
			flex: 1;
			}

			.icon {
			@@ -320,12 +365,13 @@
			height: 20rpx;
			position: relative;
			z-index: 2;
			margin-top: 12rpx;
			}

			.h2 {
			display: flex;
			align-items: center;
			height: 48rpx;
			// align-items: center;
			// height: 48rpx;
			}

			.h1 {}
			@@ -337,7 +383,6 @@
			}
			}
			}

			.info {
			border-radius: 12rpx;
			margin-bottom: 20rpx;
			@@ -346,17 +391,36 @@
			overflow: hidden;
			position: relative;
			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;
			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;
			@@ -382,12 +446,47 @@
			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;
			}
			}

			}