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 ?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>
		</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 ?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" v-if="getCarTypeName(state.orderInfo.type)=='货车'">
							<text class="d-label">牵引车：</text>
							<text class="d-value">{{state.orderInfo.tractorSign=='1'?'是':'否'}}</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 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?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 ?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" v-if="state.orderInfo.orderInfoExt.payTime">
								<text class="d-label">付款时间：</text>
								<text
									class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?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.orderInfoExt.auditReason ?state.orderInfo.orderInfoExt.auditReason: ''}}</text>
							</view>
						</view>

						<!-- 待发货 -->
						<view v-if="state.orderInfo.orderStep == OrderStatus.待发货">
							<view class="d-row" v-if="state.orderInfo.orderInfoExt.payTime">
								<text class="d-label">付款时间：</text>
								<text
									class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?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" v-if="state.orderInfo.orderInfoExt.payTime">
								<text class="d-label">付款时间：</text>
								<text
									class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:'')}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">发货时间：</text>
								<text
									class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?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?state.orderInfo.orderInfoExt.receivingTime:"")}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">卡 号：</text>
								<text class="d-value">{{state.orderInfo.cardId ?state.orderInfo.cardId: ''}}</text>
							</view>

							<view class="d-row" v-if="state.orderInfo.cardStatus">
								<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 ?state.orderInfo.obuId: ''}}</text>
							</view>

							<view class="d-row" v-if="state.orderInfo.obuStatus">
								<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 ?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 v-if="state.orderInfo.orderStep == OrderStatus.已完成">
							<view class="d-row" v-if="state.orderInfo.orderInfoExt.payTime">
								<text class="d-label">付款时间：</text>
								<text
									class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.payTime:"")}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">发货时间：</text>
								<text
									class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?state.orderInfo.orderInfoExt.deliveryTime:"")}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">收货时间：</text>
								<text
									class="d-value">{{getOrderTime(state.orderInfo.orderInfoExt?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 ?state.orderInfo.cardId: ''}}</text>
							</view>

							<view class="d-row" v-if="state.orderInfo.cardStatus">
								<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 ?state.orderInfo.obuId: ''}}</text>
							</view>

							<view class="d-row" v-if="state.orderInfo.obuStatus">
								<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 ?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 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 && 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 ?state.orderInfo.XXX: ''}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">业务类型：</text>
								<text class="d-value">退货</text>
							</view>
							<view class="d-row" v-if="state.orderInfo.cancelTime">
								<text class="d-label">创建时间：</text>
								<text class="d-value">{{getOrderTime(state.orderInfo.cancelTime)}}</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 ?state.orderInfo.orderInfoExt.returnLogisticsCompany: ''}}</text>
								</view>
								<view class="d-row">
									<text class="d-label">快递单号：</text>
									<text
										class="d-value">{{state.orderInfo.orderInfoExt.returnLogisticsNumber ?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 ?state.orderInfo.orderInfoExt.returnNetworkName: ''}}</text>
								</view>
							</template>

							<view class="d-row">
								<text class="d-label">退货原因：</text>
								<text
									class="d-value">{{state.orderInfo.orderInfoExt.returnReason ?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 ?state.orderInfo.XXX: ''}}</text>
							</view>
							<view class="d-row">
								<text class="d-label">业务类型：</text>
								<text class="d-value">换货</text>
							</view>
							<view class="d-row" v-if="state.orderInfo.XXX">
								<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 ?state.orderInfo.orderInfoExt.exchangeLogisticsCompany: ''}}</text>
								</view>
								<view class="d-row">
									<text class="d-label">快递单号：</text>
									<text
										class="d-value">{{state.orderInfo.orderInfoExt.exchangeLogisticsNumber ?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 ?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 ?state.orderInfo.orderInfoExt.consignee: ''}}</text>
									</view>
									<view class="d-row">
										<text class="d-label">收件人电话：</text>
										<text
											class="d-value">{{state.orderInfo.orderInfoExt.consigneeTel ?state.orderInfo.orderInfoExt.consigneeTel: ''}}</text>
									</view>
									<view class="d-row">
										<text class="d-label">收件人地址：</text>
										<text class="d-value">{{state.orderInfo.orderInfoExt.address}}</text>
									</view>
									<view class="d-row" v-if="state.orderInfo.orderInfoExt.postalCode">
										<text class="d-label">邮政编码：</text>
										<text
											class="d-value">{{state.orderInfo.orderInfoExt.postalCode ?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 ?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>
				<!-- orderSource类型  SERVICE_HALL app只展示待激活按钮-->
				<!-- 	WECHAT("WECHAT", "九州ETC小程序"),
	                    SERVICE_HALL("SERVICE_HALL", "线上营业厅"),
	                    WEB("WEB", "后台PC端",),
	                    H5("H5", "H5页面", ),
	                    ALI("ALI", "支付宝小程序", ) -->
				<!-- 按钮区 -->
				<view>
					<view class="btn-view"
						v-if="state.orderInfo.orderStatus != OrderStatus.已取消 && state.orderInfo['orderSource'] !='SERVICE_HALL'">
						<!-- 信息填写未完成 -->
						<view class="btn-status"
							v-if="state.orderInfo.orderStep == OrderStatus['完成个人/单位信息上传'] || state.orderInfo.orderStep == OrderStatus.完成填写基本信息 || state.orderInfo.orderStep == OrderStatus.待支付3">
							<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['完成车辆信息上传/待支付'] || state.orderInfo.orderStep == OrderStatus.待支付2 "
							class="btn-status">
							<view class="btn space" @click="gotoCancelOrder(state.orderInfo)">取消订单</view>
							<view class="btn-green width-num-1" @click="gotoOrderDetailsPay(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="gotoOrderSign(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 space" @click="gotoConfirmReceipt(state.orderInfo)">确认收货</view>
							<view class="btn-green" @click.stop="closeOrder(state.orderInfo)"
								v-if="state.orderInfo.finishOrder">结束订单</view>
						</view>
						<!-- 待激活 -->
						<view v-if="state.orderInfo.orderStep == OrderStatus.待激活" class="btn-status">
							<view class="btn space" @click="gotoReturnOrder(state.orderInfo)"
								v-if="state.orderInfo.applyReturn">申请退货</view>
							<view class="btn space" @click="gotoExchangeOrder(state.orderInfo)">申请换货</view>
							<view class="btn-green space" @click="gotoActiveOrder(state.orderInfo)">去激活</view>
							<view class="btn-green" @click.stop="closeOrder(state.orderInfo)"
								v-if="state.orderInfo.finishOrder">结束订单</view>
						</view>
						<!-- 订单已结束 -->
						<view v-if="state.orderInfo.orderStep == OrderStatus.已结束 && state.orderInfo.isUseAgain"
							class="btn-status">
							<view class="btn-green" @click.stop="gotoAgainUseOrder(state.orderInfo)">再次使用订单</view>
						</view>
						<!-- 订单完成 -->
						<view v-if="state.isWeiXin==1">
							<view
								v-if="state.orderInfo.orderStep == OrderStatus.已完成 && (state.orderInfo.orderType =='ISSUE' || state.orderInfo.orderType =='VALUE_TO_ACCOUNT')"
								class="btn-status">
								<view class="btn space"
									v-if="( state.orderInfo.isProduct==1 && state.orderInfo.isService==1) ">
									已评价</view>
								<view class="btn-green" v-else @click.stop="gotoEvaluateProduct(state.orderInfo)">去评价产品
								</view>
							</view>
						</view>
						<view v-if="state.isWeiXin==2">
							<view class="btn-status" v-if="state.orderInfo.orderStep == OrderStatus.已完成">

								<view class="btn space"
									v-if="state.orderInfo.isStaff==1 && state.orderInfo.isProduct==1">
									已评价
								</view>
								<view class='evaluation' v-else>
									<view class="btn-green" @click.stop="gotoEvaluateSalesman(state.orderInfo)">去评价
									</view>
								</view>
							</view>
						</view>
					</view>
					<view v-else>
						<!-- 待激活 -->
						<view class="btn-status" style="display: flex;justify-content: flex-end;"
							v-if="state.orderInfo.orderStep == OrderStatus.待激活 && state.orderInfo.cardId && state.orderInfo.obuId">
							<view class="btn btn-green" @click.stop="gotoActiveOrder(state.orderInfo)"
								style="border: 1px solid #00B38B;">去激活</view>
						</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, onShow } 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, timesDiff } from "@/utils/utils";
	import { OrderStatus } from "@/datas/enum";
	import { source } from "@/utils/network/difference";
	const state = reactive({
		orderInfo: {
			orderInfoExt: {}
		} as any, //订单信息
		showActiveOrder: false, //激活弹窗
		isWeiXin: 1,  //1  微信   2 app
		appraise: "",
		id: ""
	});

	//按钮跳转业务逻辑
	const { gotoEditAddress, gotoCancelOrder, gotoEditUserOrUnitInfo,
		gotoConfirmReceipt, gotoCheckLogistics, gotoEvaluateProduct,
		gotoActiveOrder, gotoReturnOrder, gotoExchangeOrder, gotoPay, gotoOrderSign, gotoOrderDetailsPay, gotoEvaluateSalesman, closeOrder, gotoAgainUseOrder } = 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);
			// 订单发货后未激活  30天 以后 结束订单功能  insertTime   >30  算出来距离今天是负数  updateTime<30(结束订单)
			for (var i in state.orderInfo) {
				if (state.orderInfo['insertTime']) {
					if (timesDiff(state.orderInfo['insertTime'].replace("T", " ")).days > 30) {
						state.orderInfo['finishOrder'] = true  //可以结束
					} else {
						state.orderInfo['finishOrder'] = false  //不可以结束
					}
				}
				if (state.orderInfo['updateTime']) {
					if (timesDiff(state.orderInfo['updateTime'].replace("T", " ")).days <= 30) {
						state.orderInfo['isUseAgain'] = true  //可以结束
					} else {
						state.orderInfo['isUseAgain'] = false  //不可以结束
					}
				}
				// 收货日期超过7个自然日不允许申请退货
				if (state.orderInfo.orderInfoExt['receivingTime']) {
					if (timesDiff(state.orderInfo.orderInfoExt['receivingTime'].replace("T", " ")).days > 7) {
						state.orderInfo['applyReturn'] = false  //不展示申请退货
					} else {
						state.orderInfo['applyReturn'] = true  //展示申请退货
					}
				}
			}
			console.log("获取订单详情", state.orderInfo, state.orderInfo['applyReturn'])
		})
	}

	//修改订单收货地址
	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;
			setTimeout(() => {
				msg('收货地址修改成功');
			}, 1000)
		})
	}

	//激活订单
	const toActiveOrder = () => {
		gotoActiveOrder(state.orderInfo);
		state.showActiveOrder = false;
	}

	//是否有售后信息
	const isHaveAfterSaleInfo = () => {
		if (isBlank(state.orderInfo.orderInfoExt ? state.orderInfo.orderInfoExt.returnMode : null) && isBlank(state.orderInfo.orderInfoExt ? state.orderInfo.orderInfoExt.exchangeMode : null)) {
			return false;
		}
		return true;
	}

	onLoad((options) => {
		state.isWeiXin = options.isWeiXin
		//刷新订单信息
		uni.$on('refreshOrder', (data) => {
			getOrderDetails(options.id, state.orderInfo.appraise);
		});

		//修改收货地址 
		uni.$on('selectAddressSuccess', (addr) => {
			requestEditOrderAddr(addr);
		});
		console.log("optionssdsfd", options)
		state.id = options.id
		state.appraise = options.appraise
	})
	onShow(() => {
		getOrderDetails(state.id, state.appraise);
	})
	onUnload(() => {
		uni.$off('refreshOrder');
		uni.$off('selectAddressSuccess');
		console.log("已评价")
	})
</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: 24rpx;
					height: 52rpx;
					width: 130rpx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.btn-green {
					border: 1px solid #00B38B;
					border-radius: 30rpx;
					color: #00B38B;
					height: 52rpx;
					padding: 0 10rpx;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 24rpx;
				}

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

	.btn-primary {
		border: 1px solid #00b38b;
		color: #00b38b;
	}

	.btn {
		border: 1px solid #DCDCDC;
		border-radius: 30rpx;
		color: #333333;
		font-size: 24rpx;
		height: 52rpx;
		width: 130rpx;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>