<template>
<div>
<h3>订单总金额：{{ totalAmount }}</h3>
<B :detail="orderDetail" @invoice-loaded="handleInvoiceLoaded"/>
</div>
</template>
<script>
import B from './B.vue'
export default {
components: { B },
data() {
return {
orderDetail: {
id: 123, // 示例订单ID
// 其他订单详情字段...
},
invoices: []
}
},
computed: {
totalAmount() {
return this.invoices.reduce((sum, invoice) => sum + invoice.amount, 0)
}
},
methods: {
handleInvoiceLoaded(invoiceList) {
this.invoices = invoiceList
}
}
}
</script>
<template>
<div>
<h4>发票列表</h4>
<ul>
<li v-for="invoice in invoices" :key="invoice.id">
发票号：{{ invoice.number }} - 金额：{{ invoice.amount }}
</li>
</ul>
</div>
</template>
<script>
export default {
props: {
detail: {
type: Object,
required: true
}
},
data() {
return {
invoices: []
}
},
watch: {
'detail.id': {
immediate: true,
handler(newId) {
if (newId) {
this.fetchInvoices(newId)
}
}
}
},
methods: {
fetchInvoices(orderId) {
// 模拟API请求
setTimeout(() => {
const mockData = [
{ id: 1, orderId: 123, number: 'INV-2023-001', amount: 500 },
{ id: 2, orderId: 123, number: 'INV-2023-002', amount: 300 }
]
this.invoices = mockData
this.$emit('invoice-loaded', mockData) // 将数据传回父组件
}, 500)
}
}
}
</script>
