zhywpt-sp/orders/order-details-obu.vue

<!-- 增补OBU-订单详情 -->
<template>
	<view class="wrapper">
		<!-- 只有审核中、待发货订单有地址信息显示 -->
		<template v-if="state.orderInfo.orderStatus != OrderStatus.已取消">
			<view class="address-box as-gravity-center-start as-layout-horizontal" v-if="
          state.orderInfo.orderStep == OrderStatus.待审核 ||
          state.orderInfo.orderStep == OrderStatus.待发货
        ">
				<view class="avatar as-gravity-center">
					{{
            state.orderInfo.orderInfoExt.consignee != null
              ? state.orderInfo.orderInfoExt.consignee.charAt(0)
              : ""
          }}
				</view>
				<view class="center" style="flex: 1">
					<view class="as-layout-horizontal">
						<view class="name">{{
              state.orderInfo.orderInfoExt.consignee ?? ""
            }}</view>
						<view class="phone">{{
              state.orderInfo.orderInfoExt.consigneeTel ?? ""
            }}</view>
					</view>
					<view class="addr">{{ state.orderInfo.orderInfoExt.region ?? "" }}
						{{ state.orderInfo.orderInfoExt.address ?? "" }}
					</view>
				</view>
				<image :src="`${$imgUrl}applyCard/edit.png`" mode="" class="edit"
					@click="gotoEditAddress(state.orderInfo)"></image>
			</view>
		</template>

		<view class="detail-box">
			<view class="detail-header">
				<image class="d-img" :src="`${$imgUrl}order/icon-star-green.png`"></image>
				<text class="detail-name">{{ state.orderInfo.productName ?? "" }}</text>
			</view>
			<view class="detail-content">
				<view class="base-info-box">
					<!-- 卡签信息 -->
					<view class="base-info">
						<view class="d-row">
							<text class="d-label">订单编号：</text>
							<text class="d-value">{{ state.orderInfo.orderId }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">用户名称：</text>
							<text class="d-value">{{ state.orderInfo.vehiclePlate }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">用户证件类型：</text>
							<text class="d-value">{{
                state.orderInfo.userType === "UNIT_USER" ? "单位" : "个人"
              }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">用户证件号：</text>
							<text class="d-value">{{ state.orderInfo.vehicleType }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">订单车牌号：</text>
							<text class="d-value text-orange">{{
                state.orderInfo.vehiclePlate
              }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">收费车型：</text>
							<text class="d-value text-green">{{
                state.orderInfo.vehicleType
              }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">卡号：</text>
							<text class="d-value">{{
                state.orderInfo.insertTime ?? ""
              }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">卡状态：</text>
							<text class="d-value">{{
                state.orderInfo.insertTime ?? ""
              }}</text>
						</view>
					</view>

					<!-- 售后信息 -->
					<view class="post-sale">
						<!-- 通用信息 -->
						<view class="d-row">
							<text class="d-label">售后单号：</text>
							<text class="d-value">{{
                state.orderInfo.XX ?? "没有这个字段"
              }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">业务类型：</text>
							<text class="d-value">{{ state.orderInfo.orderType ?? "" }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">订单状态：</text>
							<text class="d-value text-green">{{
                getOrderStatusName(state.orderInfo.orderStep)
              }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">订单金额：</text>
							<text class="d-value text-orange">{{
                state.orderInfo.amount / 100 ?? "0.00"
              }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">创建时间：</text>
							<text class="d-value">{{
                state.orderInfo.insertTime ?? ""
              }}</text>
						</view>

						<!-- 根据状态显示不同信息 -->
						<template>
							<!-- 已取消 -->
							<view v-if="state.orderInfo.orderStatus == OrderStatus.已取消">
								<view class="d-row">
									<text class="d-label">发货时间：</text>
									<text class="d-value">{{
                    state.orderInfo.orderInfoExt.deliveryTime ?? ""
                  }}</text>
								</view>
								<view class="d-row">
									<text class="d-label">取消时间：</text>
									<text class="d-value">{{
                    state.orderInfo.orderInfoExt.cancelTime ?? ""
                  }}</text>
								</view>
								<view class="d-row">
									<text class="d-label">取消原因：</text>
									<text class="d-value">{{
                    state.orderInfo.orderInfoExt.cancelReason ?? ""
                  }}</text>
								</view>
							</view>

							<template v-else>
								<!-- 审核中、待发货 -->
								<view v-if="
                    state.orderInfo.orderStep == OrderStatus.待审核 ||
                    state.orderInfo.orderStep == OrderStatus.待发货
                  ">
									<view class="d-row">
										<text class="d-label">付款时间：</text>
										<text class="d-value">{{
                      state.orderInfo.orderInfoExt.payTime ?? ""
                    }}</text>
									</view>
								</view>

								<!-- 待收货 -->
								<view v-if="state.orderInfo.orderStep == OrderStatus.待收货">
									<view class="d-row">
										<text class="d-label">付款时间：</text>
										<text class="d-value">{{
                      state.orderInfo.orderInfoExt.payTime ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">发货时间：</text>
										<text class="d-value">{{
                      state.orderInfo.orderInfoExt.deliveryTime ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">快递单号：</text>
										<text class="d-value">{{
                      state.orderInfo.trackingNumber ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">物流公司：</text>
										<text class="d-value">{{
                      state.orderInfo.courierCompany ?? ""
                    }}</text>
									</view>
								</view>

								<!-- 待激活 -->
								<view v-if="state.orderInfo.orderStep == OrderStatus.待激活">
									<view class="d-row">
										<text class="d-label">付款时间：</text>
										<text class="d-value">{{
                      state.orderInfo.orderInfoExt.payTime ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">发货时间：</text>
										<text class="d-value">{{
                      state.orderInfo.orderInfoExt.deliveryTime ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">收货时间：</text>
										<text class="d-value">{{
                      state.orderInfo.orderInfoExt.receivingTime ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">快递单号：</text>
										<text class="d-value">{{
                      state.orderInfo.trackingNumber ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">物流公司：</text>
										<text class="d-value">{{
                      state.orderInfo.courierCompany ?? ""
                    }}</text>
									</view>
								</view>
								<!-- 已完成 -->
								<view v-if="state.orderInfo.orderStep == OrderStatus.已完成">
									<view class="d-row">
										<text class="d-label">付款时间：</text>
										<text class="d-value">{{
                      state.orderInfo.orderInfoExt.payTime ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">发货时间：</text>
										<text class="d-value">{{
                      state.orderInfo.orderInfoExt.deliveryTime ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">收货时间：</text>
										<text class="d-value">{{
                      state.orderInfo.orderInfoExt.receivingTime ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">激活时间：</text>
										<text class="d-value">{{
                      state.orderInfo.cardEnableTime ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">快递单号：</text>
										<text class="d-value">{{
                      state.orderInfo.trackingNumber ?? ""
                    }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">物流公司：</text>
										<text class="d-value">{{
                      state.orderInfo.courierCompany ?? ""
                    }}</text>
									</view>
								</view>
							</template>
						</template>

						<!-- 增补OBU时展示字段 -->
						<view class="d-row">
							<text class="d-label">收货方式：</text>
							<text class="d-value">{{ state.orderInfo.XXX ?? "" }}</text>
						</view>
						<!-- 如果是自提收的时候显示 -->
						<view class="d-row" v-if="true">
							<text class="d-label">自提网点：</text>
							<text class="d-value">{{ state.orderInfo.XXX ?? "" }}</text>
						</view>
					</view>
				</view>

				<!-- 按钮区 -->
				<view class="btn-view" v-if="state.orderInfo.orderStatus != OrderStatus.已取消">
					<!-- 审核中 、待发货-->
					<view v-if="
              state.orderInfo.orderStep == OrderStatus.待审核 ||
              state.orderInfo.orderStep == OrderStatus.待发货
            " class="btn-status">
						<view class="btn space" @click="gotoEditAddress(state.orderInfo)">修改地址</view>
						<view class="btn-green" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
					</view>
					<!-- 待支付 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.待支付" class="btn-status">
						<view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
						<view class="btn-green width-num-1" @click="gotoPay(state.orderInfo)">支付</view>
					</view>
					<!-- 待收货 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.待收货" class="btn-status">
						<view class="btn space" @click="gotoCheckLogistics(state.orderInfo)">查看物流</view>
						<view class="btn-green" @click="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
					</view>
					<!-- 待激活 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.待激活" class="btn-status">
						<view class="btn-green" @click="gotoActiveOrder(state.orderInfo)">去激活</view>
					</view>
					<!-- 订单完成 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.已完成" class="btn-status">
						<view class="btn space" @click="gotoEvaluateOrder(state.orderInfo)">去评价</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import {
		reactive
	} from "vue";
	import {
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {
		request
	} from "@/utils/network/request";
	import {
		orderDetail
	} from "@/utils/network/api";
	import {
		stringToJson
	} from "@/utils/network/encryption";
	import useOrderSkip from "@/composables/order/useOrderSkip";
	import {
		getETCStatusName,
		getOBUStatusName,
		getOrderStatusName,
	} from "@/utils/utils";
	import {
		OrderStatus
	} from "@/datas/enum";

	const state = reactive({
		orderInfo: {} as any, //订单信息
	});

	//按钮跳转业务逻辑
	const {
		gotoEditAddress,
		gotoCancelOrder,
		gotoEditUserOrUnitInfo,
		gotoConfirmReceipt,
		gotoCheckLogistics,
		gotoEvaluateOrder,
		gotoActiveOrder,
		gotoReturnOrder,
		gotoExchangeOrder,
		gotoPay,
	} = useOrderSkip();

	//获取订单详情
	const getOrderDetails = (id) => {
		const options = {
			type: 2,
			data: {
				id: id
			},
			method: "POST",
			showLoading: true,
		};
		request(orderDetail, options).then((res) => {
			state.orderInfo = stringToJson(res.bizContent);
			//测试
			// state.orderInfo.orderStep = OrderStatus.完成填写基本信息;
		});
	};

	onLoad((options) => {
		getOrderDetails(options.id);

		//刷新订单信息
		uni.$on("refreshOrder", (data) => {
			getOrderDetails(options.id);
		});

		//回显修改的地址 TODO 缺少修改订单详情地址接口
		uni.$on("selectAddressSuccess", (addr) => {
			(state.orderInfo.orderInfoExt.id = addr.id),
			(state.orderInfo.orderInfoExt.consignee = addr.consignee);
			state.orderInfo.orderInfoExt.consigneeTel = addr.consigneeTel;
			state.orderInfo.orderInfoExt.region = addr.region;
			state.orderInfo.orderInfoExt.address = addr.address;
			state.orderInfo.orderInfoExt.postalCode = addr.postalCode;
		});

	});

	onUnload(() => {
		uni.$off("refreshOrder");
		uni.$off("selectAddressSuccess");
	});
</script>
<style>
	page {
		background: #eef7f7;
		padding-bottom: 30rpx;
	}
</style>
<style lang="scss" scoped>
	.address-box {
		background: #ffffff;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		margin: 30rpx 30rpx 0rpx;
		padding: 30rpx;

		.avatar {
			background: rgba(0, 179, 139, 0.2);
			border-radius: 50%;
			color: #00b38b;
			font-size: 26rpx;
			width: 80rpx;
			height: 80rpx;
		}

		.center {
			margin-left: 20rpx;
			margin-right: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.name {
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
			}

			.phone {
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				margin-left: 20rpx;
			}

			.addr {
				margin-top: 18rpx;
				font-size: 26rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #333333;
				line-height: 36rpx;
			}
		}

		.edit {
			width: 60rpx;
			height: 55rpx;
		}
	}

	.detail-box {
		background: #ffffff;
		box-shadow: 0rpx 2rpx 6rpx 0rpx rgba(223, 223, 223, 0.8);
		border-radius: 20rpx;
		margin: 30rpx;

		.detail-header {
			display: flex;
			border-bottom: 1rpx solid #dcdcdc;
			padding: 30rpx;
			align-items: center;

			.d-img {
				width: 48rpx;
				height: 48rpx;
			}

			.detail-name {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				margin-left: 12rpx;
			}
		}

		.detail-content {
			padding: 28rpx 29rpx 10rpx 29rpx;

			.post-sale {
				border-top: 1rpx solid #dcdcdc;
				padding-top: 38rpx;
			}

			.d-row {
				display: flex;
				margin-bottom: 32rpx;

				.d-label {
					font-size: 26rpx;
					//width: 135rpx;
					color: #999999;
					text-align: right;
				}

				.d-value {
					font-size: 26rpx;
					color: #333333;
					flex: 1;
					overflow: hidden;
				}
			}

			.btn-view {
				.btn-status {
					display: flex;
					justify-content: flex-end;
					padding: 20rpx 0;
					border-top: 1rpx solid #dcdcdc;
				}

				.space {
					margin-right: 19rpx;
				}

				.btn {
					border: 1px solid #dcdcdc;
					border-radius: 30rpx;
					color: #333333;
					font-size: 26rpx;
					height: 61rpx;
					width: 141rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
				}

				.btn-green {
					border: 1px solid #00b38b;
					border-radius: 30rpx;
					color: #00b38b;
					height: 61rpx;
					width: 141rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 26rpx;
				}

				.width-num-1 {
					width: 115rpx;
				}

				.width-num-2 {
					width: 221rpx;
				}

				.width-num-3 {
					width: 201rpx;
				}
			}
		}
	}

	.text-orange {
		color: #ff8000 !important;
	}

	.text-green {
		color: #00b38b !important;
	}
</style>