BD-LDBD-UNI/pages/maintenance/maintainOrder/orderDetail/index.vue

<template>
	<view class="orderDetail">
		<view class="orderHeader">
			<!-- 手机状态栏占位 -->
			<view class="statusBar" :style="{height:statusBarHeight+'rpx'}"></view>
			<!-- 导航栏 -->
			<view class="navigationBar" :style="{height:navigationBarHeight,paddingTop:statusBarHeight+'rpx'}">
				<view @tap="goBack">
					<image :src="require('../../../../static/backw.png')" alt="">
				</view>

				<view class="navigationTitle">
					订单详情
				</view>
			</view>
			<view class="headerBody" @click="toPath">
				<view>
					<view class="serveBody">
						<image :src="require('../../../../static/che.png')" alt="">
						<view class="serveTitle">
							{{orderData.status==1?'待服务':orderData.status==2?'提车中':orderData.status==3?'作业中':orderData.status==4?'作业完成待支付':orderData.status==5?'作业完成已支付':orderData.status==6?'已完成':'已取消'}}
						</view>
					</view>
					<view class="reserve">
						预约时间：{{orderData.time}}
					</view>
				</view>
				<image class="more" :src="require('../../../../static/more-w.png')" alt="">
			</view>

		</view>
		<view class="orderBody">
			<view class="orderDetail">
				<view class="carHeader">
					预约信息
				</view>
				<view class="carView">
					<image :src="baseImagePath+orderData.carLogo" alt="">
					<view class="carBody">
						<view class="carTitle">
							<image :src="require('../../../../static/car.png')" alt="">
							<span>{{orderData.carNumber}}</span>
							<view class="border"></view>
							<span>{{orderData.carMadelLevel}}</span>
						</view>
						<view class="content">
							{{orderData.carTypeName}}
						</view>
					</view>
				</view>
				<view class="shop">
					<view>
						服务门店：{{orderData.shopName}}
					</view>

				</view>
				<view class="times">
					<view>
						服务方式：{{orderData.serviceType==1?'在店下单':'上门提车'}}
					</view>
				</view>
				<view class="times" v-if="orderData.remarks">
					<view>
						预约备注：{{orderData.remarks}}
					</view>
				</view>
			</view>
			<view class="explain">
				<view class="serveHeader">
					服务项目
				</view>
				<view class="serveBodys" v-for="(item, index) in orderData.repairOrderServicesVO" :key="index">
					<view class="leftView">
						<view class="dian"></view>
						<view class="title">
							{{item.goodsName}}
						</view>
					</view>
					<view class="rightView" v-if="item.oneName !== null">
						{{item.oneName}}
					</view>
				</view>
			</view>
			<view style="height: 240rpx;"></view>
		</view>

		<view class="buttomBtn" v-if="orderData.status==4 || orderData.status==5 || orderData.status==6">
			<view class="inventory" @click="toRouter(orderData.id)">
				费用清单
			</view>
		</view>
	</view>
</template>

<script>
	import {
			orderDetail
		} from "@/api/maintain.js"
	export default {
		components: {},
		data: function() {
			return {
				baseImagePath:this.baseImagePath,
				serveList: [{
						name: "常规检查",
						subTitle: "全车48项检测",
					},
					{
						name: "机械维修",
						subTitle: "机械维修",
					},
					{
						name: "常规检查",
						subTitle: "全车48项检测",
					},
					{
						name: "常规检查",
						subTitle: "机械维修",
					},
				],
				orderData: {},
				statusBarHeight: "",
				navigationBarHeight: "",
				navHeight: ""
			}
		},
		onLoad(options) {
			console.log(options);
			this.orderData = JSON.parse(decodeURIComponent(options.data));
			orderDetail({id:this.orderData.id}).then((res)=>{
				this.orderData= res.data;
				console.log(this.orderData);
			})
			// 状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync().statusBarHeight

			// #ifdef MP-WEIXIN
			// 获取微信胶囊的位置信息 width,height,top,right,left,bottom
			const custom = wx.getMenuButtonBoundingClientRect()
			// console.log(custom)
			// 导航栏高度(标题栏高度) = 胶囊高度 + (顶部距离 - 状态栏高度) * 2
			this.navigationBarHeight = custom.height + (custom.top - this.statusBarHeight) * 2

			// console.log("导航栏高度："+this.globalData.navigationBarHeight)

			// 总体高度 = 状态栏高度 + 导航栏高度
			this.navHeight = (this.navigationBarHeight + this.statusBarHeight)
			this.navigationBarHeight = this.navigationBarHeight + 'px'
			this.statusBarHeight = this.statusBarHeight + 'px'
			this.navHeight = this.navHeight + 'px'

			// #endif
		},
		methods: {
			
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			toPath() {
					this.$yrouter.push({
						path: "/pages/maintenance/maintainOrder/flow/index?data=" + encodeURIComponent(JSON.stringify(this.orderData))
					});
			},
			toRouter(id){
				console.log(id);
				this.$yrouter.push({
					path:"/pages/maintenance/expensesList/expensesList?id="+id
				})
			}
		},
	}
</script>

<style lang="less">
	page {
		background: #F5F5F5;
	}

	.buttomBtn {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 144rpx;
		background: #FFFFFF;
		display: flex;
		align-items: center;
		justify-content: flex-end;

		.deliveryOfVehicle {
			width: 200rpx;
			height: 70rpx;
			background: #FFFFFF;
			border: 1px solid #005EFF;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #005EFF;
			line-height: 70rpx;
			text-align: center;
			margin-right: 20rpx;
		}

		.liveStreaming {
			width: 200rpx;
			height: 70rpx;
			background: #FFFFFF;
			border: 1px solid #005EFF;
			border-radius: 35rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #005EFF;
			line-height: 70rpx;
			text-align: center;
			margin-right: 20rpx;
		}

		.inventory {
			width: 200rpx;
			height: 70rpx;
			background: linear-gradient(0deg, #008EFF 0%, #0036FF 100%);
			border-radius: 35rpx;
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 70rpx;
			text-align: center;
			margin-right: 20rpx;
		}
	}

	.more {
		width: 14rpx;
		height: 23rpx;
	}

	.serveBodys {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 34rpx 30rpx 0 36rpx;

		.leftView {
			display: flex;
			align-items: center;

			.dian {
				width: 6rpx;
				height: 6rpx;
				background: #005EFF;
				border-radius: 50%;
			}

			.title {
				padding-left: 10rpx;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 36rpx;
			}
		}

		.rightView {
			text-align: center;
			min-width: 94rpx;
			height: 32rpx;
			background: #FFFFFF;
			border: 1px solid #DBDBDB;
			border-radius: 3rpx;
			font-size: 18rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #999999;
			line-height: 32rpx;
		}
	}

	.headerBody {
		display: flex;
		align-items: center;
		margin-top: 73rpx;
		margin-left: 44rpx;
		justify-content: space-between;
		margin-right: 41rpx;
	}

	.orderBody {
		position: absolute;
		top: 358rpx;

		// 
		.orderDetail {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 20rpx;

			.carHeader {
				padding: 38rpx 0 13rpx 31rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 36rpx;
			}

			.carView {
				display: flex;
				padding: 26rpx;

				image {
					width: 120rpx;
					height: 120rpx;
					background: #FFFFFF;
					border: 2rpx solid #F4F4F4;
					border-radius: 8rpx;
					padding-top: 14rpx;
				}

				.carBody {
					padding: 14rpx 29rpx 14rpx 29rpx;

					.carTitle {
						display: flex;

						image {
							width: 33rpx;
							height: 27rpx;
							padding-top: 0rpx;
						}

						.border {
							width: 1px;
							height: 20rpx;
							background: #DBDBDB;
						}

						span {
							font-size: 30rpx;
							font-family: PingFang SC;
							font-weight: bold;
							color: #333333;
							line-height: 31rpx;
							padding: 0 15rpx 0 15rpx;
						}
					}

					.content {
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: 500;
						color: #666666;
						line-height: 34rpx;
						padding: 20rpx 60rpx 20rpx 0;
					}
				}
			}

			.shop {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 34rpx;
				padding: 15rpx 30rpx 15rpx 30rpx;

				image {
					width: 30rpx;
					height: 26rpx;
				}
			}

			.times {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 34rpx;
				margin-top: 16rpx;
				padding-bottom: 30rpx;
				padding: 0rpx 30rpx 15rpx 30rpx;

				image {
					width: 30rpx;
					height: 26rpx;
				}
			}

			.buttomBtn {
				height: 33rpx;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #333333;
				line-height: 34rpx;
				text-align: center;
				margin: 26rpx 31rpx 0 74%;
			}
		}

		.explain {
			width: 710rpx;
			background: #FFFFFF;
			border-radius: 10rpx;
			margin: 20rpx;
			padding-top: 11rpx;
			padding-bottom: 40rpx;

			.serveHeader {
				padding: 38rpx 0 13rpx 31rpx;
				font-size: 32rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #333333;
				line-height: 36rpx;
			}
		}
	}

	.orderHeader {
		width: 100%;
		height: 454rpx;
		background: linear-gradient(90deg, #005AFF 0%, #0078FF 100%);

		.navigationBar {
			display: flex;
			align-items: center;
			text-align: center;

			image {
				padding-left: 17rpx;
				width: 44rpx;
				height: 44rpx;
			}

			.navigationTitle {
				padding-left: 242rpx;
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 75rpx;
			}
		}

		.serveBody {
			display: flex;
			align-items: center;

			image {
				width: 77rpx;
				height: 38rpx;
			}

			.serveTitle {
				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #FFFFFF;
				line-height: 75rpx;
				padding-left: 20rpx;
			}
		}

		.reserve {
			margin-top: 27rpx;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 31rpx;
		}
	}
</style>