teambuy-front/pages_order/order/groupMealDetail.vue

<template>
    <view class="page">
        <!-- 导航栏 -->
        <navbar :title="'团餐' + (mealInfo ? mealInfo.id : '')" leftClick @leftClick="$utils.navigateBack"
            bgColor="#019245" color="#fff" />

        <view class="container">
            <!-- 成员列表 -->
            <view class="member-list">
                <!-- 使用封装的成员项组件 -->
                <member-food-item 
                    v-for="(member, index) in members" 
                    :key="index"
                    :member="member"
                    :default-expanded="index === defaultExpandedIndex"
                    @toggle="handleMemberToggle"
                />
            </view>

            <!-- 空数据提示 -->
            <uv-empty v-if="members.length === 0" text="暂无成员" mode="list"></uv-empty>
        </view>
    </view>
</template>

<script>
import navbar from '@/components/base/navbar.vue'
import MemberFoodItem from '../components/order/MemberFoodItem.vue'

export default {
    components: {
        navbar,
        MemberFoodItem
    },
    data() {
        return {
            mealId: null,
            mealInfo: null,
            defaultExpandedIndex: -1, // 默认不展开任何成员
            members: [
                {
                    id: '1',
                    name: '张三',
                    avatar: '/static/image/中森明菜.webp',
                    food: [
                        { 
                            name: '茄子肉沫', 
                            price: 9.9, 
                            quantity: 1, 
                            image: '/static/image/古茗店面.webp',
                            sold: 235
                        },
                        { 
                            name: '豆角炒鸡蛋', 
                            price: 9.9, 
                            quantity: 1, 
                            image: '/static/image/古茗店面.webp',
                            sold: 235
                        },
                        { 
                            name: '酸辣土豆丝', 
                            price: 9.9, 
                            quantity: 1, 
                            image: '/static/image/古茗店面.webp',
                            sold: 235
                        }
                    ]
                },
                {
                    id: '2',
                    name: '张三',
                    avatar: '/static/image/中森明菜.webp',
                    food: [
                        { 
                            name: '茄子肉沫', 
                            price: 9.9, 
                            quantity: 1, 
                            image: '/static/image/古茗店面.webp',
                            sold: 235
                        },
                        { 
                            name: '豆角炒鸡蛋', 
                            price: 9.9, 
                            quantity: 1, 
                            image: '/static/image/古茗店面.webp',
                            sold: 235
                        },
                        { 
                            name: '酸辣土豆丝', 
                            price: 9.9, 
                            quantity: 1, 
                            image: '/static/image/古茗店面.webp',
                            sold: 235
                        }
                    ]
                }
            ]
        }
    },
    onLoad(options) {
        if (options.id) {
            this.mealId = options.id
            this.getMealInfo()
        }
    },
    methods: {
        // 获取团餐信息
        getMealInfo() {
            // 模拟获取团餐数据
            this.mealInfo = {
                id: this.mealId,
                name: '团餐' + this.mealId,
                price: 18.00,
                status: '待出餐'
            }
        },
        // 处理成员项展开/收起事件
        handleMemberToggle(data) {
            console.log(`成员 ${data.member.name} ${data.expanded ? '展开' : '收起'} 了餐点列表`);
            // 可以在这里添加其他逻辑，如记录统计数据等
        }
    }
}
</script>

<style lang="scss" scoped>
.page {
    background-color: #f5f5f5;
    min-height: 100vh;
}

.container {
    padding: 20rpx;
}

.member-list {
    // 成员列表样式被移到组件中
}
</style>