Laravel+Vue实现点击订单弹窗展示对应订单商品

看起来你已经搭好了订单弹窗的基础框架，现在就差把对应订单的商品数据正确关联并渲染这一步了，咱们一步步来修复：

1. 先修复Laravel后端的商品查询逻辑 #

你当前的getOrdersProducts方法返回的是所有订单的商品，而不是传入的指定订单的商品。我们需要利用Eloquent关联来获取对应订单的商品：

第一步：给Order模型添加关联关系 #

在app/Models/Order.php里定义和OrderProduct的关联：

public function orderProducts()
{
    // 假设OrderProduct表的外键是order_id，对应Order表的id
    return $this->hasMany(OrderProduct::class, 'order_id', 'id');
}

第二步：修正控制器方法 #

修改控制器里的getOrdersProducts，让它返回当前订单的商品：

public function getOrdersProducts(Order $order) { 
    // 只返回当前订单的商品，并按创建时间倒序
    return $order->orderProducts()->orderBy('created_at', 'DESC')->get(); 
}

第三步：添加API路由 #

在routes/api.php里添加获取订单商品的路由：

use App\Http\Controllers\OrderController;

Route::get('/orders/{order}/products', [OrderController::class, 'getOrdersProducts']);

2. 修改Vue前端的方法，获取对应订单的商品 #

现在需要在点击订单时，调用后端接口获取该订单的商品，并把数据存入Vuex（你当前用了$store.state.orp）：

完善moreInfoOrder方法 #

methods: {
    async moreInfoOrder(orderId, orderName) {
        // 先清空之前的商品数据，避免弹窗显示旧数据
        this.$store.commit('setOrderProducts', []);
        
        this.infoBox = true;
        this.OrderIdToView = orderId;
        this.OrderNameToView = orderName;

        try {
            // 调用后端API获取指定订单的商品
            const response = await axios.get(`/api/orders/${orderId}/products`);
            // 将数据存入Vuex state
            this.$store.commit('setOrderProducts', response.data);
        } catch (error) {
            console.error('获取订单商品失败:', error);
            // 这里可以加个错误提示，比如this.$toast.error('加载商品失败')
        }
    }
}

补充Vuex的状态定义 #

如果你的Vuex store还没定义orp的mutation，在store/index.js里补充：

export default new Vuex.Store({
    state: {
        orp: [] // 存储当前订单的商品列表
    },
    mutations: {
        setOrderProducts(state, products) {
            state.orp = products;
        }
    }
});

3. 修复弹窗里的商品渲染细节 #

现在弹窗里的内容有硬编码（比如固定的2 x 4 €、23€），需要替换成动态数据：

替换商品数量和单价 #

把硬编码的芯片内容改成动态读取商品数据：

<v-chip class="ma-2" color="success" label text-color="white" >
    {{ orproduct.quantity }} x <b>{{ orproduct.price }} €</b>
</v-chip>

（这里假设你的OrderProduct表有quantity（数量）和price（单价）字段，根据实际字段名调整）

动态计算订单总价 #

添加一个计算属性来计算订单的总金额，替换硬编码的23€：

computed: {
    orderTotal() {
        return this.$store.state.orp.reduce((total, item) => {
            return total + (item.quantity * item.price);
        }, 0).toFixed(2) + ' €';
    }
}

然后修改弹窗里的总价芯片：

<v-chip class="ma-2" color="error" >
    Total: {{ orderTotal }}
    <v-icon right> monetization_on </v-icon>
</v-chip>

优化商品标题 #

把商品标题从{{ orproduct.id }}改成实际的商品名称（比如{{ orproduct.product_name }}，如果你的表有这个字段，或者关联Product模型后用{{ orproduct.product.name }}）：

<v-list-item-title class="ml-2"><strong>{{ orproduct.product_name }}</strong></v-list-item-title>

4. 额外优化：处理弹窗关闭后的状态 #

如果需要，在弹窗关闭时清空商品数据，避免下次打开弹窗时显示旧数据：

// 在组件里添加watch监听infoBox的变化
watch: {
    infoBox(newVal) {
        if (!newVal) {
            this.$store.commit('setOrderProducts', []);
        }
    }
}

这样修改后，点击订单列表里的任意订单，弹窗就会加载并展示该订单对应的所有商品了~

内容的提问来源于stack exchange，提问作者Alex Bene