muck_truck_app/pages/transportInfo/index.vue

<template>
	<view class="container">
		<uni-navbar title="运输申请"></uni-navbar>
		<view class="box commonMt" style="overflow: hidden;">
			<view class="topMap">
				<mapPreview :startPoint='form.startPoint' :endPoint='form.endPoint' v-show="isMap"
					:mtRoutePointList='form.mtRoutePointList'></mapPreview>
			</view>
			<view class="box3">
				<view class="addLineSuccess-big-box commonBj commonMt">
					<view class="addLineSuccess-big-box-top">
						<image style="width: 45rpx;height: 45rpx; margin-left: 30rpx;"
							src="../../static/images/transport/dingwei.png" mode="widthFix">
						</image>
						<text class="listTitle">路线信息</text>
					</view>
					<view class="addLineSuccess-big-box-bottom" style="padding-bottom: 40rpx;">
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">运输名称:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.transportName}}</text>
							</view>
						</view>
						<!-- <view class="map">
							<mapImg :startPoint='form.startPoint' :endPoint='form.endPoint'
								:mtRoutePointList='form.mtRoutePointList'></mapImg>
						</view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">开始地址:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.startName}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">结束地址:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.endName}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">运输期限:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.startDate}} 至 {{form.endDate}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">开始时间:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{ changeTime(form.startTime) }}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">结束时间:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{ changeTime(form.endTime) }}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">计划车辆:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.expectCar}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">上报企业:</text>
							</view>
							<view class="flexAlignCenter">
								<text class="infoText">{{form.companyName}}</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
					</view>
				</view>
				<!-- 审批状态 -->
				<view class="addLineSuccess-big-box mt31 mb43 commonGreenBj">
					<view class="addLineSuccess-big-box-top bg-color-green">
						<image style="width: 45rpx; height: 45rpx;margin-left: 30rpx;"
							src="../../static/images/car/yunshu.png" mode="widthFix">
						</image>
						<text class="listTitle">审批状态</text>
					</view>
					<view class="addLineSuccess-big-box-bottom">
						<view class="addLineSuccess-big-box-bottom-item">
							<view class="flexAlignCenter">
								<view class="greenCircle">
								</view>
								<text class="itemText">审批状态:</text>
							</view>
							<view class="flexAlignCenter ">
								<u-icon color="#017D3E" name="checkmark-circle-fill" style="margin-right: 12rpx;">
								</u-icon>
								<text class="greenText">通过</text>
							</view>
						</view>
						<!-- <view class="border-style"></view> -->
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		transportDetail
	} from "../../api/company/transport.js"
	export default {
		data() {
			return {
				form: {
					startTime: "00:00:00",
					endTime: "00:00:00",
					// 结束坐标和开始坐标
					endPoint: '',
					startPoint: '',
					mtRoutePointList: [],
				},
				pathData: '',
				isMap: true,
			}
		},
		methods: {
			// 获取运输申请详情
			async getDetail(id) {
				this.isMap = false;
				const res = await transportDetail(id)
				console.log('运输详情', res);
				this.form = res.data
				this.form.transportName = this.form.transportName.replace(/-/g, '')
				this.pathData = res.data.id
				this.isMap = true;

			},
			changeTime(time) {
				return time.slice(0, 5)
			},

		},
		onLoad(option) {
			if (option.id) {
				this.getDetail(option.id)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.addLineSuccess-big-box {

		.addLineSuccess-big-box-top {
			height: 69rpx;
			background: #7FB5FF;
			border-radius: 26rpx 26rpx 0rpx 0rpx;
			display: flex;
			align-items: center;
		}

		.addLineSuccess-big-box-bottom {
			padding: 0rpx 39rpx;
			border-radius: 0 0 28rpx 28rpx;

			.addLineSuccess-big-box-bottom-item {
				display: flex;
				margin: 36rpx auto;
			}

			.map {
				// width: 599rpx;
				height: 339rpx;
				background: #FFFFFF;
				border: 2rpx solid #495B93;
				border-radius: 15rpx;
				margin: 25rpx auto 40rpx;
			}

			// .border-style {
			// 	border-top: 1rpx dashed #F98803;
			// 	margin: 0 auto;
			// }
		}
	}

	.custom-style {
		box-shadow: 0px 2rpx 13rpx 0rpx rgba(27, 43, 95, 0.25);
		border-radius: 28rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #FFFFFF;
		margin: 27rpx 0 36rpx;
		height: 85rpx;
	}


	.bg-color-green {
		background: #36C372 !important;
	}


	.mb {
		margin-bottom: 11rpx !important;
	}

	.mt31 {
		margin-top: 31rpx;
	}

	.mb43 {
		margin-bottom: 43rpx;
	}
</style>