BD-LDBD-UNI/pages/preCarWash/washOrder/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="serveBody">
				<image :src="require('../../../../static/icon-fuwu.png')" alt="">
					<view class="serveTitle">
						{{orderData.status==1?'待支付':orderData.status==2?'待服务':orderData.status==3?'已完成':orderData.status==4?'已取消':'进行中'}}
					</view>
			</view>
		</view>
		<view class="orderBody">
			<view class="orderDetail">
				<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 class="border"></view>
									<span>{{orderData.upsName}}</span>
							</view>
							<view class="content">
								{{orderData.carTypeName}}
							</view>
						</view>
				</view>
				<view class="shop">
					<image :src="require('../../../../static/shop.png')" alt="">
						<view style="padding-left: 16rpx;">
							门店：{{orderData.shopName}}
						</view>

				</view>
				<view class="times">
					<image :src="require('../../../../static/time.png')" alt="">
						<view style="padding-left: 16rpx;">
							时间：{{orderData.time}}
						</view>
				</view>
				<view>
					<view class="buttomBtn">
						<view v-if="orderData.status==1" class="orderBtn" @click="plOrder">
							立即支付
						</view>
						<view style="white-space: nowrap;">
							实付：<span style="font-size: 26rpx;font-weight: bold;">￥ </span><span
							style="font-size: 40rpx;font-weight: bold;white-space: nowrap;">{{orderData.payMoney}}</span>
						</view>
						
					</view>
				</view>
			</view>
			<view class="explain">
				<view class="orders" v-if="orderData.orderNumber">
					订单编号：{{orderData.orderNumber}}
					<view class="span" @click="copy(orderData.orderNumber)">复制</view>
				</view>
				<view class="orders" v-if="orderData.createTimeStr">
					下单时间：{{orderData.createTimeStr}}
				</view>
				<view class="orders" v-if="orderData.payTimeStr">
					支付时间：{{orderData.payTimeStr}}
				</view>
				<view class="orders" v-if="orderData.startTimeStr">
					服务时间：{{orderData.startTimeStr}}
				</view>
				<view class="orders" v-if="orderData.accomplishTimeStr">
					完成时间：{{orderData.accomplishTimeStr}}
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		getUserCar
	} from "@/api/shop.js"
	import {
		carwashOrderDetail,
		carwashOrder
	} from "@/api/carWash.js"
	export default {
		components: {},
		data: function() {
			return {
				baseImagePath: this.baseImagePath,
				orderData: {},
				usercar:{},
				statusBarHeight: "",
				navigationBarHeight: "",
				navHeight: ""
			}
		},
		onLoad(options) {
			this.orderData = JSON.parse(decodeURIComponent(options.data));

			carwashOrderDetail({
				id: this.orderData.id
			}).then((res) => {
				console.log(res);
				this.orderData = res.data;
			})
			// 状态栏高度
			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
			
		},
		onShow(){
			getUserCar().then(res => {
				console.log(res.data);
				this.usercar = res.data
				console.log(this.usercar);
				console.log(this.usercar.id);
			})
		},
		methods: {
			plOrder() {
				let data = {}
				data.userCarId = this.usercar.id
				data.shopId = this.orderData.shopId
				data.shopServiceId = this.orderData.shopServiceId
				data.payType = this.orderData.payType
				data.reserveTime = this.orderData.reserveTime
				data.payMoney = this.orderData.payMoney
				data.serviceType = this.orderData.serviceType
				console.log(data);
				console.log(this.orderData);
				console.log(this.orderData.payMoney);
				carwashOrder(data).then(() => {
					uni.showToast({
						icon: 'none',
						title: '正在跳转收银台'
					})
					uni.navigateTo({
						url: '/pages/shop/cashierDesk/cashierDesk?page=carwash&params=' + JSON.stringify(data)
					})
				})
			},
			goBack() {
				uni.navigateBack({
					delta: 1
				})
			},
			copy(val) {
				uni.setClipboardData({
					data: val, // 要复制的文字
					success: function(res) {
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: '复制成功'
								});
							}
						});
					}
				});
			},
		},
	}
</script>

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

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

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

			.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%;

				.orderBtn {
					width: 156rpx;
					height: 56rpx;
					text-align: center;
					background: linear-gradient(0deg, #008EFF 0%, #0036FF 100%);
					border-radius: 28rpx;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 56rpx;
				}
			}
		}

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

			.orders {
				display: flex;
				align-items: center;
				font-size: 26rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #666666;
				line-height: 34rpx;
				padding: 33rpx 0 0 29rpx;

				.span {
					text-align: center;
					margin-left: 16rpx;
					width: 70rpx;
					height: 28rpx;
					border: 1px solid #999999;
					border-radius: 14rpx;
					font-size: 18rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #666666;
					line-height: 28rpx;
				}
			}
		}
	}

	.orderHeader {
		width: 100%;
		height: 454rpx;
		background-image: url(../../../../static/cardbg.png);
		// background-image: url(../../../../static/bgcard.png);
		background-size: 100% 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;
			margin-top: 73rpx;
			margin-left: 38rpx;

			image {
				width: 37rpx;
				height: 39rpx;
			}

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