zhywpt-sp/subpackage/orders/order-details-new.vue

<!-- 新办订单-订单详情 -->
<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.审核不通过 || 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">{{getOrderTypeName(state.orderInfo.orderType)}}</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>
							<!-- PERSONAL USER：个人  UNIT_USER：单位 -->
							<text class="d-value">{{state.orderInfo.userType === 'UNIT_USER' ? '单位' : '个人'}}</text>
						</view>
						<view class="d-row">
							<text class="d-label">车辆类型：</text>
							<text class="d-value">{{getCarTypeName(state.orderInfo.type)}}</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 text-green">{{state.orderInfo.orderStatus == OrderStatus.已取消 ? '已取消' : $util.getOrderStatusName(state.orderInfo.orderStep)}}</text>
						</view>
						<view class="d-row">
							<text class="d-label">创建时间：</text>
							<text class="d-value">{{getOrderTime(state.orderInfo.insertTime)}}</text>
						</view>
					</view>

					<!-- 已取消订单信息 -->
					<view v-if="state.orderInfo.orderStatus == OrderStatus.已取消">
						<view class="d-row" v-if="state.orderInfo.orderStep > OrderStatus.已支付">
							<text class="d-label">付款时间：</text>
							<text class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt.payTime)}}</text>
						</view>
						<view class="d-row">
							<text class="d-label">取消时间：</text>
							<text class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt.cancelTime)}}</text>
						</view>
						<view class="d-row" v-if="state.orderInfo.staffName">
							<text class="d-label">业 务 员：</text>
							<text class="d-value">{{state.orderInfo.staffName}}</text>
						</view>
						<view class="d-row">
							<text class="d-label">取消原因：</text>
							<text class="d-value">{{state.orderInfo.orderInfoExt.cancelReason ?? ''}}</text>
						</view>
					</view>

					<view 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">{{getOrderTime(state.orderInfo.orderInfoExt.payTime)}}</text>
							</view>
							<view class="d-row" v-if="state.orderInfo.orderStep == OrderStatus.审核不通过">
								<text class="d-label">不通过原因：</text>
								<text class="d-value">{{state.orderInfo.XXX ?? ''}}</text>
							</view>
						</view>

						<!-- 待发货 -->
						<view v-if="state.orderInfo.orderStep == OrderStatus.待发货">
							<view class="d-row">
								<text class="d-label">付款时间：</text>
								<text class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt.payTime)}}</text>
							</view>
							<view class="d-row" v-if="state.orderInfo.staffName">
								<text class="d-label">业 务 员：</text>
								<text class="d-value">{{state.orderInfo.staffName}}</text>
							</view>
						</view>

						<!-- 待收货/待激活/已结束/换货/退货-->
						<view
							v-if="state.orderInfo.orderStep == OrderStatus.待收货 || state.orderInfo.orderStep == OrderStatus.待激活 
							   || state.orderInfo.orderStep == OrderStatus.已结束 
							   || state.orderInfo.orderStep == OrderStatus['已申请-换货'] 
							   || state.orderInfo.orderStep == OrderStatus['已申请-退货']">
							<view class="d-row">
								<text class="d-label">付款时间：</text>
								<text class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt.payTime)}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">发货时间：</text>
								<text class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt.deliveryTime)}}</text>
							</view>
							<view class="d-row" v-if="state.orderInfo.orderStep != OrderStatus.待收货">
								<text class="d-label">收货时间：</text>
								<text class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt.receivingTime)}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">卡 号：</text>
								<text class="d-value">{{state.orderInfo.cardId ?? ''}}</text>
							</view>
													
							<view class="d-row">
								<text class="d-label">卡 状 态：</text>
								<text class="d-value">{{getETCStatusName(state.orderInfo.cardStatus)}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">OBU 号：</text>
								<text class="d-value">{{state.orderInfo.obuId ?? ''}}</text>
							</view>
							
							<view class="d-row">
								<text class="d-label">OBU状态：</text>
								<text class="d-value">{{getOBUStatusName(state.orderInfo.obuStatus)}}</text>
							</view>
							
							<view class="d-row" v-if="state.orderInfo.staffName">
								<text class="d-label">业 务 员：</text>
								<text class="d-value">{{state.orderInfo.staffName}}</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">{{getOrderTime(state.orderInfo.orderInfoExt.payTime)}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">发货时间：</text>
								<text class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt.deliveryTime)}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">收货时间：</text>
								<text class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt.receivingTime)}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">激活时间：</text>
								<text class="d-value">{{getOrderTime(state.orderInfo.cardEnableTime)}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">卡 号：</text>
								<text class="d-value">{{state.orderInfo.cardId ?? ''}}</text>
							</view>
						
							<view class="d-row">
								<text class="d-label">卡 状 态：</text>
								<text class="d-value">{{getETCStatusName(state.orderInfo.cardStatus)}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">OBU 号：</text>
								<text class="d-value">{{state.orderInfo.obuId ?? ''}}</text>
							</view>
							
							<view class="d-row">
								<text class="d-label">OBU状态：</text>
								<text class="d-value">{{getOBUStatusName(state.orderInfo.obuStatus)}}</text>
							</view>
							<view class="d-row" v-if="state.orderInfo.staffName">
								<text class="d-label">业 务 员：</text>
								<text class="d-value">{{state.orderInfo.staffName}}</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>

					<!-- 售后 -->
					<view class="post-sale" v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货'] 
						|| state.orderInfo.orderStep == OrderStatus['已申请-退货'] || isHaveAfterSaleInfo()" >
						
						<!-- 售后退货-->
						<view v-if="state.orderInfo.orderStep == OrderStatus['已申请-退货'] || !isBlank(state.orderInfo.orderInfoExt.returnMode)">
							<view class="d-row" v-if="state.orderInfo.XXX">
								<text class="d-label">售后单号：</text>
								<text class="d-value">{{state.orderInfo.XXX ?? ''}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">业务类型：</text>
								<text class="d-value">退货</text>
							</view>
							<view class="d-row">
								<text class="d-label">创建时间：</text>
								<text class="d-value">{{getOrderTime(state.orderInfo.XXXX)}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">退货方式：</text>
								<text class="d-value">{{state.orderInfo.orderInfoExt.returnMode === 'ON_LINE' ? '线上' : '线下'}}</text>
							</view>
							<template v-if="state.orderInfo.orderInfoExt.returnMode === 'ON_LINE'">
								<view class="d-row">
									<text class="d-label">物流公司：</text>
									<text class="d-value">{{state.orderInfo.orderInfoExt.returnLogisticsCompany ?? ''}}</text>
								</view>
								<view class="d-row">
									<text class="d-label">快递单号：</text>
									<text class="d-value">{{state.orderInfo.orderInfoExt.returnLogisticsNumber ?? ''}}</text>
								</view>
							</template>
							<template v-if="state.orderInfo.orderInfoExt.returnMode === 'OFFLINE'">
								<view class="d-row">
									<text class="d-label">退货网点：</text>
									<text class="d-value">{{state.orderInfo.orderInfoExt.returnNetworkName ?? ''}}</text>
								</view>
							</template>
							
							<view class="d-row">
								<text class="d-label">退货原因：</text>
								<text class="d-value">{{state.orderInfo.orderInfoExt.returnReason ?? ''}}</text>
							</view>
							<view class="d-row" v-if="state.orderInfo.staffName">
								<text class="d-label">业 务 员：</text>
								<text class="d-value">{{state.orderInfo.staffName}}</text>
							</view>
						</view>
						
						<!-- 售后换货 -->
						<view v-if="state.orderInfo.orderStep == OrderStatus['已申请-换货'] || !isBlank(state.orderInfo.orderInfoExt.exchangeMode)">
							<view class="d-row" v-if="state.orderInfo.XXX">
								<text class="d-label">售后单号：</text>
								<text class="d-value">{{state.orderInfo.XXX ?? ''}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">业务类型：</text>
								<text class="d-value">换货</text>
							</view>
							<view class="d-row">
								<text class="d-label">创建时间：</text>
								<text class="d-value">{{getOrderTime(state.orderInfo.XXXX)}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">退货方式：</text>
								<text class="d-value">{{state.orderInfo.orderInfoExt.exchangeMode === 'ON_LINE' ? '线上' : '线下'}}</text>
							</view>
							
							<!-- 线上 -->
							<template v-if="state.orderInfo.orderInfoExt.exchangeMode === 'ON_LINE'">
								<view class="d-row">
									<text class="d-label">物流公司：</text>
									<text class="d-value">{{state.orderInfo.orderInfoExt.exchangeLogisticsCompany ?? ''}}</text>
								</view>
								<view class="d-row">
									<text class="d-label">快递单号：</text>
									<text class="d-value">{{state.orderInfo.orderInfoExt.exchangeLogisticsNumber ?? ''}}</text>
								</view>
								<view class="d-row">
									<text class="d-label">收货方式：</text>
									<text class="d-value">{{state.orderInfo.orderInfoExt.exchangeRgMode === 'SELF' ? '营业点自提' : '邮寄'}}</text>
								</view>
								<template v-if="state.orderInfo.orderInfoExt.exchangeRgMode === 'SELF'">
									<view class="d-row">
										<text class="d-label">自提网点：</text>
										<text class="d-value">{{state.orderInfo.orderInfoExt.exchangeRgNetworkName ?? ''}}</text>
									</view>
								</template>
								<template v-if="state.orderInfo.orderInfoExt.exchangeRgMode === 'MAIL'">
									<view class="d-row">
										<text class="d-label">收件人姓名：</text>
										<text class="d-value">{{state.orderInfo.orderInfoExt.consignee ?? ''}}</text>
									</view>
									<view class="d-row">
										<text class="d-label">收件人电话：</text>
										<text class="d-value">{{state.orderInfo.orderInfoExt.consigneeTel ?? ''}}</text>
									</view>
									<view class="d-row">
										<text class="d-label">收件人地址：</text>
										<text class="d-value">{{state.orderInfo.orderInfoExt.region + " " + state.orderInfo.orderInfoExt.address}}</text>
									</view>
									<view class="d-row">
										<text class="d-label">邮政编码：</text>
										<text class="d-value">{{state.orderInfo.orderInfoExt.postalCode ?? ''}}</text>
									</view>
								</template>
							</template>
							
							<!-- 线下 -->
							<template v-if="state.orderInfo.orderInfoExt.exchangeMode === 'OFFLINE'">
								<view class="d-row">
									<text class="d-label">退货网点：</text>
									<text class="d-value">{{state.orderInfo.orderInfoExt.exchangeNetworkName ?? ''}}</text>
								</view>
							</template>
							<view class="d-row">
								<text class="d-label">换货原因：</text>
								<text class="d-value">{{state.orderInfo.orderInfoExt.exchangeReason}}</text>
							</view>
							<view class="d-row" v-if="state.orderInfo.staffName">
								<text class="d-label">业 务 员：</text>
								<text class="d-value">{{state.orderInfo.staffName}}</text>
							</view>
						</view>

						<!-- 已完成订单的售后??怎么判断 -->
						<!-- TODO 已完成订单存在售后信息的要显示售后信息，但是不知道用什么字段来来判断已完成订单有没有售后信息及哪一种售后信息，需走完订单所有流程在进行测试修改 -->
					</view>
				</view>

				<!-- 按钮区 -->
				<view class="btn-view" v-if="state.orderInfo.orderStatus != OrderStatus.已取消">
					<!-- 信息填写未完成 -->
					<view class="btn-status" v-if="state.orderInfo.orderStep == OrderStatus['完成个人/单位信息上传'] || state.orderInfo.orderStep == OrderStatus.完成填写基本信息 || state.orderInfo.orderStep == OrderStatus.完成车辆信息上传">
						<view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
						<view class="btn-green" @click="gotoEditUserOrUnitInfo(state.orderInfo)">继续申请</view>
					</view>
					
					<!-- 审核中/审核不通过 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.审核不通过 || state.orderInfo.orderStep == OrderStatus.待审核" class="btn-status">
						<view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
						<view class="btn space" v-if="state.orderInfo.orderStep == OrderStatus.审核不通过" @click="gotoEditUserOrUnitInfo(state.orderInfo)">修改资料</view>
						<view class="btn-green" @click="gotoEditAddress(state.orderInfo)">修改地址</view>
					</view>
					<!-- 待支付 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.待支付1 || state.orderInfo.orderStep == OrderStatus.待支付2 || state.orderInfo.orderStep == OrderStatus.待支付3" 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="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 space" @click="gotoReturnOrder(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 space" @click="gotoReturnOrder(state.orderInfo)">申请退货</view>
						<view class="btn space" @click="gotoExchangeOrder(state.orderInfo)">申请换货</view>
						<view class="btn-green" @click="gotoActiveOrder(state.orderInfo)">去激活</view>
					</view>
					<!-- 订单已结束 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.已结束" class="btn-status">
						<view class="btn-green width-num-3" @click="state.showActiveOrder = true">重新激活订单</view>
					</view>
					<!-- 订单完成 -->
					<view v-if="state.orderInfo.orderStep == OrderStatus.已完成" class="btn-status">
						<view class="btn space" @click="gotoEvaluateOrder(state.orderInfo)" v-if="!state.orderInfo.appraise">去评价</view>
						<view class="btn space" v-else>已评价</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>
			</view>
		</view>
	</view>
	
	<!-- 弹窗 -->	
	<u-popup v-model="state.showActiveOrder" mode="center" >
		<popup-active-order content="确认是否重新激活订单" @cancel="state.showActiveOrder = false" @confirm="toActiveOrder"></popup-active-order> 
	</u-popup>
</template>

<script setup lang="ts">
	import popupActiveOrder from "@/pages/order/components/popup-active-order.vue";
	import {reactive} from "vue";
	import {onLoad,onUnload} from "@dcloudio/uni-app";
	import {request} from "@/utils/network/request";
	import {editOrderAddr, orderDetail} from "@/utils/network/api";
	import {stringToJson} from "@/utils/network/encryption";
	import useOrderSkip from "@/composables/order/useOrderSkip";
	import { getETCStatusName,getOBUStatusName,msg,getOrderTypeName,getCarTypeName,getOrderTime,isBlank } from "@/utils/utils";
	import {OrderStatus} from "@/datas/enum";

	const state = reactive({
		orderInfo: {} as any, //订单信息
		showActiveOrder: false, //激活弹窗
	});
	
	//按钮跳转业务逻辑
	const {gotoEditAddress,gotoCancelOrder,gotoEditUserOrUnitInfo,
		gotoConfirmReceipt,gotoCheckLogistics,gotoEvaluateOrder,
		gotoActiveOrder,gotoReturnOrder,gotoExchangeOrder,gotoPay} = useOrderSkip();


	//获取订单详情
	const getOrderDetails = (id,appraise) => {
		const options = {
			type: 2,
			data: {"id": id},
			method: 'POST',
			showLoading: true,
		}
		request(orderDetail, options).then((res) => {
			state.orderInfo = stringToJson(res.bizContent);
			state.orderInfo.appraise = appraise; 
			
			//测试 
			// state.orderInfo.orderStep = OrderStatus.待激活;
		})
	}
	
	//修改订单收货地址
	const requestEditOrderAddr = (addr) =>{
		const options = {
			type: 2,data: {
				"id": state.orderInfo.id,
				'consignee': addr.consignee,
				'consigneeTel': addr.consigneeTel,
				'region' : addr.region,
				'address': addr.address,
				'postalCode': addr.postalCode},
			method: 'POST',
			showLoading: true,
		}
		
		request(editOrderAddr,options).then((res)=>{
			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;
			msg('收货地址修改成功');
		})
	}
	
	//激活订单
	const toActiveOrder = () => {
		gotoActiveOrder(state.orderInfo);
		state.showActiveOrder = false;
	}
	
	//是否有售后信息
	const isHaveAfterSaleInfo = () =>{
		if(isBlank(state.orderInfo.orderInfoExt.returnMode ?? null) && isBlank(state.orderInfo.orderInfoExt.exchangeMode ?? null)){
			return false;
		}
		return true;
	}

	onLoad((options) => {
		//刷新订单信息
		uni.$on('refreshOrder', (data) => {
			getOrderDetails(options.id,state.orderInfo.appraise);
		});
		
		//修改收货地址 
		uni.$on('selectAddressSuccess',(addr) => {
			requestEditOrderAddr(addr);
		});
		
		getOrderDetails(options.id,options.appraise);
	})
	
	onUnload(()=>{
		uni.$off('refreshOrder');
		uni.$off('selectAddressSuccess');
	})
</script>
<style>
	page {
		background: #EEF7F7;
		padding-bottom: 30rpx;
	}
	:deep(.u-mode-center-box){
		border-radius: 20rpx;
	}
</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>