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