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"
                    :status="mealInfo.status"
                    :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'
import  { mockFoodMember }  from '@/static/js/mockOrders'
// 创造了一个新的status 用来代表当前列表应该的状态
export default {
    components: {
        navbar,
        MemberFoodItem
    },
    data() {
        return {
            mealId: null,
            mealInfo: null,
            defaultExpandedIndex: -1, // 默认不展开任何成员
            members: []
        }
    },
    onLoad(options) {
        if (options.id) {
            this.mealId = options.id
            // 得到当前订单的成员与其餐点信息
            this.getMealInfo(options.status)
        }
        console.log(options.status);
        
        this.members = mockFoodMember
    },
    methods: {
        // 获取团餐信息
        getMealInfo(status) {
            // 模拟获取团餐数据
            this.mealInfo = {
                id: this.mealId,
                name: '团餐' + this.mealId,
                price: 18.00,
                status: 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>