zhywpt-sp/subpackage/orders/order-details-card-sign.vue

<!-- 换卡、换签、卡签同时更换-订单详情 -->
<template>
	<view class="wrapper">
		<!-- 只有审核中、待发货订单有地址信息显示 -->
		<view 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 ?state.orderInfo.orderInfoExt.consignee: ""}}
						</view>
						<view class="phone">
							{{ state.orderInfo.orderInfoExt.consigneeTel ?state.orderInfo.orderInfoExt.consigneeTel: "" }}
						</view>
					</view>
					<view class="addr">
						{{ state.orderInfo.orderInfoExt.region ?state.orderInfo.orderInfoExt.region : "" }}
						{{ state.orderInfo.orderInfoExt.address ?state.orderInfo.orderInfoExt.address: "" }}
					</view>
				</view>
				<image :src="`${$imgUrl}applyCard/edit.png`" mode="" class="edit"
					@click="gotoEditAddress(state.orderInfo)"></image>
			</view>
		</view>

		<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 ?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 v-if="state.orType !== 3">
							<view class="d-row">
								<text class="d-label">原卡号：</text>
								<text
									class="d-value">{{state.orderInfo.insertTime ?state.orderInfo.insertTime: "" }}</text>
							</view>
							<view class="d-row">
								<text class="d-label">原卡状态：</text>
								<text
									class="d-value">{{ state.orderInfo.insertTime ?state.orderInfo.insertTime: ""}}</text>
							</view>
						</view>

						<!-- 只换卡不显示 -->
						<view v-if="state.orType !== 2">
							<view class="d-row">
								<text class="d-label">原OBU号：</text>
								<text
									class="d-value">{{ state.orderInfo.insertTime ?state.orderInfo.insertTime:"" }}</text>
							</view>
							<view class="d-row">
								<text class="d-label">原OBU状态：</text>
								<text
									class="d-value">{{state.orderInfo.insertTime ?state.orderInfo.insertTime: ""}}</text>
							</view>
						</view>
					</view>

					<!-- 售后信息 -->
					<view class="post-sale">
						<!-- 通用信息 -->
						<view class="d-row">
							<text class="d-label">售后单号：</text>
							<text class="d-value">{{ state.orderInfo.XX ?state.orderInfo.XX: "没有这个字段"}}</text>
						</view>
						<view class="d-row">
							<text class="d-label">业务类型：</text>
							<text class="d-value">{{ state.orderInfo.orderType ?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 ?state.orderInfo.amount / 100: "0.00" }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">创建时间：</text>
							<text class="d-value">{{ state.orderInfo.insertTime ?state.orderInfo.insertTime: ""}}</text>
						</view>

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

							<view v-else>
								<!-- 待发货 -->
								<view v-if="state.orderInfo.orderStep == OrderStatus.待发货">
									<view class="d-row">
										<text class="d-label">付款时间：</text>
										<text
											class="d-value">{{state.orderInfo.orderInfoExt.payTime ?state.orderInfo.orderInfoExt.payTime: "" }}</text>
										<!-- 换签 显示 -->
										<view v-if="state.orType === 3">
											<view class="d-row">
												<text class="d-label">快递单号：</text>
												<text
													class="d-value">{{ state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: ""}}</text>
											</view>
											<view class="d-row">
												<text class="d-label">物流公司：</text>
												<text
													class="d-value">{{state.orderInfo.courierCompany ?state.orderInfo.courierCompany: "" }}</text>
											</view>
										</view>
									</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 ?state.orderInfo.orderInfoExt.payTime: ""}}</text>
									</view>
									<view class="d-row">
										<text class="d-label">发货时间：</text>
										<text
											class="d-value">{{state.orderInfo.orderInfoExt.deliveryTime ?state.orderInfo.orderInfoExt.deliveryTime: "" }}</text>
									</view>
									<!-- 换签、换卡 显示 -->
									<view v-if="state.orType === 3 || state.orType === 2">
										<view class="d-row">
											<text class="d-label">快递单号：</text>
											<text
												class="d-value">{{ state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: "" }}</text>
										</view>
										<view class="d-row">
											<text class="d-label">物流公司：</text>
											<text
												class="d-value">{{ state.orderInfo.courierCompany ?state.orderInfo.courierCompany: "" }}</text>
										</view>
									</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 ?state.orderInfo.orderInfoExt.payTime:""}}</text>
									</view>
									<view class="d-row">
										<text class="d-label">发货时间：</text>
										<text
											class="d-value">{{ state.orderInfo.orderInfoExt.deliveryTime ?state.orderInfo.orderInfoExt.deliveryTime :"" }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">收货时间：</text>
										<text
											class="d-value">{{ state.orderInfo.orderInfoExt.receivingTime ?state.orderInfo.orderInfoExt.receivingTime: ""}}</text>
									</view>
									<!-- 换签、换卡 显示 -->
									<view v-if="state.orType === 3 || state.orType === 2">
										<view class="d-row">
											<text class="d-label">快递单号：</text>
											<text
												class="d-value">{{ state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: ""  }}</text>
										</view>
										<view class="d-row">
											<text class="d-label">物流公司：</text>
											<text
												class="d-value">{{ state.orderInfo.courierCompany ?state.orderInfo.courierCompany: "" }}</text>
										</view>
									</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 ?state.orderInfo.orderInfoExt.payTime: ""}}</text>
									</view>
									<view class="d-row">
										<text class="d-label">发货时间：</text>
										<text
											class="d-value">{{state.orderInfo.orderInfoExt.deliveryTime ?state.orderInfo.orderInfoExt.deliveryTime: ""}}</text>
									</view>
									<view class="d-row">
										<text class="d-label">收货时间：</text>
										<text
											class="d-value">{{state.orderInfo.orderInfoExt.receivingTime ?state.orderInfo.orderInfoExt.receivingTime: "" }}</text>
									</view>
									<view class="d-row">
										<text class="d-label">激活时间：</text>
										<text
											class="d-value">{{ state.orderInfo.cardEnableTime ?state.orderInfo.cardEnableTime: "" }}</text>
									</view>
									<!-- 换签、换卡 显示 -->
									<view v-if="state.orType === 3 || state.orType === 2">
										<view class="d-row">
											<text class="d-label">快递单号：</text>
											<text
												class="d-value">{{ state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: ""}}</text>
										</view>
										<view class="d-row">
											<text class="d-label">物流公司：</text>
											<text
												class="d-value">{{ state.orderInfo.courierCompany ?state.orderInfo.courierCompany: ""}}</text>
										</view>
									</view>
								</view>
							</view>
						</view>

						<!-- TODO 更换卡签时收费展示的字段 邮寄收 -->
						<view class="d-row" v-if="false">
							<text class="d-label">更换原因：</text>
							<text class="d-value">{{ state.orderInfo.reason ?state.orderInfo.reason: "" }}</text>
						</view>

						<!-- TODO 更换卡签时不收费展示的字段 线上换-邮寄收-->
						<view class="d-row">
							<text class="d-label">退货物流公司：</text>
							<text
								class="d-value">{{ state.orderInfo.courierCompany ?state.orderInfo.courierCompany: "" }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">退货快递单号：</text>
							<text
								class="d-value">{{state.orderInfo.trackingNumber ?state.orderInfo.trackingNumber: "" }}</text>
						</view>
						<view class="d-row">
							<text class="d-label">更换原因：</text>
							<text class="d-value">{{ state.orderInfo.reason ?state.orderInfo.reason: "" }}</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="gotoCardSignPay(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" @click="gotoEditAddress(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, //订单信息
		orType: 1, //1-卡签同时更换  2-换卡  3-换签
	});

	//按钮跳转业务逻辑
	const {
		gotoEditAddress,
		gotoCancelOrder,
		gotoConfirmReceipt,
		gotoCheckLogistics,
		gotoEvaluateOrder,
		gotoActiveOrder,
		gotoCardSignPay,
	} = 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) => {
		state.orType = options.orType;

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