fix(发票列表): 修复发票备注无法输入与订单信息不展示

- 发票备注输入框残留 Vue2 时代的 value="备注" 静态属性,Vue 每次
  patch 会把该属性值回写到原生 textarea,键入内容被覆盖(实测输入
  被改写为"备注");移除该属性
- 订单信息弹窗沿用旧版订单详情组件 orderDetall,其模板依赖旧订单
  结构(orderInfo._status/cartInfo 等),而接口已改返回订单中台
  getDetail 结构,字段缺失导致渲染报错、弹窗空白;改用订单中台
  统一详情组件 OrderCenterDetail(720px 抽屉,与订单中台一致),
  并删除废弃的 orderDetall.vue
This commit is contained in:
From-wh 2026-10-26 15:47:43 +08:00 committed by 吴昊天
parent f8b18c0577
commit fb70fa2d41
2 changed files with 7 additions and 188 deletions

View File

@ -252,7 +252,6 @@
<el-form-item label="发票备注:" v-if="formInline.is_invoice === 1">
<el-input
v-model="formInline.remark"
value="备注"
type="textarea"
:autosize="{ minRows: 2, maxRows: 5 }"
placeholder="请输入发票备注"
@ -263,9 +262,9 @@
</div>
</el-form>
</el-dialog>
<el-dialog v-model="orderShow" title="订单详情" class="order_box" width="720px">
<orderDetall :orderId="orderId" @detall="detall" v-if="orderShow"></orderDetall>
</el-dialog>
<el-drawer v-model="orderShow" title="订单详情" size="720px" class="order-detail-drawer">
<OrderCenterDetail v-if="orderShow" :id="orderId" />
</el-drawer>
<el-dialog
v-model="invoiceModalShow"
title="发票信息"
@ -283,7 +282,7 @@ import { computed, ref } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus';
import { storeToRefs } from 'pinia';
import { useMediaStore } from '@/store/module/media';
import orderDetall from './orderDetall';
import OrderCenterDetail from '@/pages/order/orderCenter/detail.vue';
import {
orderInvoiceChart,
orderInvoiceList,
@ -388,10 +387,6 @@ function handleMessage(event) {
}
}
function detall(e) {
orderShow.value = e;
}
function orderInfo(id) {
orderId.value = id;
orderShow.value = true;
@ -543,4 +538,7 @@ function onClickTab() {
color: var(--prev-color-primary);
cursor: pointer;
}
:deep(.order-detail-drawer .el-drawer__body) {
padding: 20px 0 !important;
}
</style>

View File

@ -1,179 +0,0 @@
<template>
<div class="order_detail" v-loading="spinShow" v-if="orderDetail.userInfo">
<div class="msg-box">
<div class="box-title">收货信息</div>
<div class="msg-wrapper">
<div class="msg-item">
<div class="item"><span>用户昵称:</span>{{ orderDetail.userInfo.nickname }}</div>
<div class="item"><span>收货人:</span>{{ orderDetail.orderInfo.real_name }}</div>
</div>
<div class="msg-item">
<div class="item"><span>联系电话:</span>{{ orderDetail.orderInfo.user_phone }}</div>
<div class="item"><span>收货地址:</span>{{ orderDetail.orderInfo.user_address }}</div>
</div>
</div>
</div>
<div class="msg-box" style="border: none">
<div class="box-title">订单信息</div>
<div class="msg-wrapper">
<div class="msg-item">
<div class="item"><span>订单ID:</span>{{ orderDetail.orderInfo.order_id }}</div>
<div class="item" style="color: red">
<span style="color: red">订单状态:</span>{{ orderDetail.orderInfo._status._title }}
</div>
</div>
<div class="msg-item">
<div class="item"><span>商品总数:</span>{{ orderDetail.orderInfo.total_num }}</div>
<div class="item">
<span>商品总价:</span
>{{ parseFloat(orderDetail.orderInfo.total_price) + parseFloat(orderDetail.orderInfo.vip_true_price || 0) }}
</div>
</div>
<div class="msg-item">
<div class="item"><span>交付邮费:</span>{{ orderDetail.orderInfo.pay_postage }}</div>
<div class="item"><span>优惠券金额:</span>{{ orderDetail.orderInfo.coupon_price }}</div>
</div>
<div class="msg-item">
<div class="item"><span>会员商品优惠:</span>{{ orderDetail.orderInfo.vip_true_price || 0.0 }}</div>
<div class="item"><span>积分抵扣:</span>{{ orderDetail.orderInfo.deduction_price || 0.0 }}</div>
</div>
<div class="msg-item">
<div class="item"><span>实际支付:</span>{{ orderDetail.orderInfo.pay_price }}</div>
<div class="item"><span>创建时间:</span>{{ orderDetail.orderInfo.add_time }}</div>
</div>
<div class="msg-item">
<div class="item"><span>支付方式:</span>{{ orderDetail.orderInfo._status._payType }}</div>
<div class="item"><span>推广人:</span>{{ orderDetail.userInfo.spread_name }}</div>
</div>
<div class="msg-item">
<div class="item"><span>商家备注:</span>{{ orderDetail.orderInfo.mark }}</div>
</div>
</div>
</div>
<div class="goods-box">
<el-table :data="orderList">
<el-table-column label="商品ID" width="80">
<template #default="scope">
<span>{{ scope.row.productInfo.id }}</span>
</template>
</el-table-column>
<el-table-column label="商品名称" min-width="160">
<template #default="scope">
<div class="product_info">
<img :src="scope.row.productInfo.image" alt="" />
<p>{{ scope.row.productInfo.store_name }}</p>
</div>
</template>
</el-table-column>
<el-table-column label="商品分类" min-width="160">
<template #default="scope">
<div>{{ scope.row.class_name }}</div>
</template>
</el-table-column>
<el-table-column label="商品售价" min-width="160">
<template #default="scope">
<div>{{ scope.row.productInfo.price }}</div>
</template>
</el-table-column>
<el-table-column label="商品数量" min-width="160">
<template #default="scope">
<div>{{ scope.row.cart_num }}</div>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script setup>
import { onMounted, ref } from 'vue';
import { ElMessage } from 'element-plus';
import { orderInvoiceInfo } from '@/api/order';
defineOptions({ name: 'order_detail' });
const props = defineProps({
orderId: {
type: [String, Number],
default: '',
},
});
const emit = defineEmits(['detall']);
const orderDetail = ref({});
const orderList = ref([]);
const spinShow = ref(false);
function getOrderInfo() {
spinShow.value = true;
orderInvoiceInfo(props.orderId)
.then((res) => {
spinShow.value = false;
orderDetail.value = res.data;
orderList.value = res.data.orderInfo.cartInfo;
})
.catch((err) => {
spinShow.value = false;
ElMessage.error(err.msg);
emit('detall', false);
});
}
onMounted(() => {
getOrderInfo();
});
</script>
<style lang="scss" scoped>
.order_detail {
.msg-box {
border-bottom: 1px solid #e8eaed;
.box-title {
padding-top: 20px;
font-size: 15px;
font-weight: 500;
color: var(--prev-color-text-regular);
line-height: 15px;
}
.msg-wrapper {
margin-top: 15px;
padding-bottom: 10px;
.msg-item {
display: flex;
.item {
flex: 1;
margin-bottom: 15px;
color: var(--prev-color-text-primary);
font-size: 13px;
span {
font-size: 13px;
font-weight: 400;
color: var(--prev-color-text-secondary);
}
}
}
}
&:first-child .box-title {
padding-top: 0;
}
}
.product_info {
display: flex;
align-items: center;
img {
width: 36px;
height: 36px;
border-radius: 4px;
margin-right: 10px;
}
}
}
</style>