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