| 
					
				 | 
			
			
				@@ -16,7 +16,7 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 		</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 		<div class="bottom"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-				<OrderBaseInfo ref="baseInfoRef" :is-detail="false" :id="orderId" v-if="activeName == 'info'" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				<OrderBaseInfo ref="baseInfoRef" :is-detail="false" :id="orderId" v-show="activeName == 'info'" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 				<OrderProduct ref="infoRef"  :id="orderId" v-if="activeName == 'product'"/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 				<OrderComment ref="infoRef"  :id="orderId" v-if="activeName == 'comment'"/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 				<OrderService ref="infoRef"  :id="orderId" v-if="activeName == 'service'" /> 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -24,6 +24,11 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 				<OrderLogistics ref="infoRef"  :id="orderId" v-if="activeName == 'logistics'"/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 				<OrderPay ref="infoRef"  :id="orderId" v-if="activeName == 'pay'"/> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 				<OrderLogs ref="infoRef"  :id="orderId" v-if="activeName == 'logs'" /> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		<div  class="bottom-button"> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				<el-button @click="goback">返 回</el-button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+				<el-button :disabled="formLoading" type="primary" @click="remark">备 注</el-button> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 		</div> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 	</ContentWrap> 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -31,7 +36,7 @@ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 </template> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 <script lang="ts" setup> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import * as TradeOrderApi from '@/api/mall/trade/order' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import OrderBaseInfo from './OrderBaseInfo.vue' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import OrderProduct from './OrderProduct.vue' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import OrderComment from './OrderComment.vue' 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -40,21 +45,57 @@ import AfterSale from '@/components/ZxTemplate/AfterSale/AfterSale.vue' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import OrderLogistics from './OrderLogistics.vue' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import OrderPay from './OrderPay.vue' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import OrderLogs from './OrderLogs.vue' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				- 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+import { useRoute } from 'vue-router' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 import { propTypes } from '@/utils/propTypes' 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const route = useRoute(); 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const { push } = useRouter() // 路由跳转 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const { t } = useI18n() // 国际化 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const message = useMessage() // 消息弹窗 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 defineOptions({ name: 'ProductSpuForm' }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const activeName = ref('info') // Tag 激活的窗口 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				 const orderId = ref(0) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-const props = defineProps({ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-	id: propTypes.number.def(undefined), // 订单ID 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-}) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+orderId.value = route.params.id as unknown as number 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const baseInfoRef = ref(null) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const defaultRemark = ref('') 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+// 获得备注 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const getRemark = async (id) => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	if (id) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		const res = (await TradeOrderApi.getOrder(id)) as TradeOrderApi.OrderVO 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		// 没有表单信息则关闭页面返回 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		if (!res) { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			message.error('交易订单不存在') 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+			close() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		defaultRemark.value = res.remark 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+// 备注 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const remark = async () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  const { value } = await ElMessageBox.prompt('请输入备注', '备注', { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		inputValue:defaultRemark, 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    confirmButtonText: t('common.ok'), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    cancelButtonText: t('common.cancel'), 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  try { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		await TradeOrderApi.updateOrderRemark({ id: orderId.value, remark: value }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    message.success(t('common.updateSuccess')) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		baseInfoRef.value.getDetail() 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    // 发送操作成功的事件 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    emit('success', true) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	} finally { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+    formLoading.value = false 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+  } 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-orderId.value = props.id 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-onMounted(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+const goback = () => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	push({ name: 'Order' }) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+onMounted(async() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	await getRemark(orderId.value) 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   // 当子组件挂载时,改变父组件的样式 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   document.getElementsByTagName('section')[1].style.padding = '0px'; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				   document.getElementsByTagName('section')[1].style.width = '100%'; 
			 | 
		
	
	
		
			
				| 
					
				 | 
			
			
				@@ -71,4 +112,18 @@ onUnmounted(() => { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				  
			 | 
		
	
		
			
				 | 
				 | 
			
			
				-<style src="@/styles/MobileTab.css"  lang="scss" scoped> </style> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<style src="@/styles/MobileTab.css"  lang="scss" scoped> </style> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+<style lang="scss" scoped> 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+.bottom-button { 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	position: fixed; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	bottom: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	left: 0; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	width: 100%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	background: white; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	padding:1rem; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	box-sizing: border-box; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	.el-button{ 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+		width:48%; 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+	} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+} 
			 | 
		
	
		
			
				 | 
				 | 
			
			
				+</style> 
			 |