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">
            <!-- test按钮 -->
             <button @click="test1">通知所有人取餐</button>
             <button @click="test1">通知所有人完成订单</button>
            <!-- 成员列表 -->
            <view class="member-list">
                <!-- 使用封装的成员项组件 -->
                <member-food-item 
                    v-for="(member, index) in members" 
                    :key="index"
                    :member="member"
                    :status="status"
                    :default-expanded="index === defaultExpandedIndex"
                    @toggle="handleMemberToggle"
                    @sendNotice="handleSend(member)"
                    @completeOrder="handleComplete(member)"
                />
            </view>

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

<script>
import navbar from '@/components/base/navbar.vue'
import MemberFoodItem from '../components/order/MemberFoodItem.vue'
// 创造了一个新的status 用来代表当前列表应该的状态
//  0 待出餐 1 送餐中 2 待取餐 3 已完成
export default {
    components: {
        navbar,
        MemberFoodItem
    },
    data() {
        return {
            mealId: null,
            mealInfo: null,
            defaultExpandedIndex: -1, // 默认不展开任何成员
            members: [],
            status: ''
        }
    },
    onLoad(options) {
        if (options.id) {
            this.mealId = options.id
            this.status = options.status
            // 得到当前订单的成员与其餐点信息
            // this.getMealInfo(options.status)
            this.$api('queryLeaderOrderListById', {
                teambuyOrderLeaderId: this.mealId
            }, res => {
                if (res.code === 200 ){
                    this.members = res.result.orderMemberList
                }
            })

        }
        // console.log(options.status);
        
        // this.members = mockFoodMember
    },
    methods: {
        // 通知所有人取餐
        test1 () {
            this.$api('informOrderAll', { leaderOrderId: this.mealId }, res => {
                if (res.code === 200) {
                    this.$utils.showToast('通知成功')
                }
            })
        },
        // 通知所有人完成订单
        test2 () {
            this.$api('finishOrderAll', { leaderOrderId: this.mealId }, res => {
                if (res.code === 200) {
                    this.$utils.showToast('通知成功')
                }
            })
        },
        
        // 处理成员项展开/收起事件
        handleMemberToggle(data) {
            console.log(`成员 ${data.member.name} ${data.expanded ? '展开' : '收起'} 了餐点列表`);
            // 可以在这里添加其他逻辑，如记录统计数据等
        },

        // 通知取餐
        handleSend(member) {
            this.$api('informOrderOne', { memberOrderId: member.id }, res => {
                if (res.code === 200) {
                    // this.$utils.showToast('通知成功')
                }
            })
        },
        // 完成取餐
        handleComplete(member) {
            this.$api('finishOrderOne', { memberOrderId: member.id }, res => {
                if (res.code === 200) {
                    // this.$utils.showToast('完成取餐')
                }
            })
        }
    }
}
</script>

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

.container {
    padding: 20rpx;
}

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