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="top-btn-group" v-if="status == '2'">
                <button class="top-action-btn" @click="test1">通知所有人取餐</button>
                <button class="top-action-btn" @click="test2">通知所有人完成订单</button>
            </view>
            <!-- 成员列表 -->
            <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
            uni.showLoading({
                title: '加载中'
            })  
            // 得到当前订单的成员与其餐点信息
            // this.getMealInfo(options.status)
            this.$api('queryLeaderOrderListById', {
                teambuyOrderLeaderId: this.mealId
            }, res => {
                uni.hideLoading()
                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) {
                    uni.showToast({
                        title: '通知成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        this.$utils.navigateBack()
                    }, 500)
                }
            })
        },
        // 通知所有人完成订单
        test2 () {
            this.$api('finishOrderAll', { leaderOrderId: this.mealId }, res => {
                if (res.code === 200) {
                    uni.showToast({
                        title: '通知成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        this.$utils.navigateBack()
                    }, 500)
                }
            })
        },
        
        // 处理成员项展开/收起事件
        handleMemberToggle(data) {
            console.log(`成员 ${data.member.name} ${data.expanded ? '展开' : '收起'} 了餐点列表`);
            // 可以在这里添加其他逻辑，如记录统计数据等
        },

        // 通知取餐
        handleSend(member) {
            uni.showLoading({
                title: '通知中'
            })
            this.$api('informOrderOne', { memberOrderId: member.id }, res => {
                uni.hideLoading()
                if (res.code === 200) {
                    // this.$utils.showToast('通知成功')
                    uni.showToast({
                        title: '通知成功',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 500)
                }
            })
        },
        // 完成取餐
        handleComplete(member) {
            uni.showLoading({
                title: '完成取餐中'
            })
            this.$api('finishOrderOne', { memberOrderId: member.id }, res => {
                uni.hideLoading()
                if (res.code === 200) {
                    // this.$utils.showToast('完成取餐')
                    uni.showToast({
                        title: '完成取餐',
                        icon: 'success'
                    })
                    setTimeout(() => {
                        uni.navigateBack()
                    }, 500)
                }
            })
        }
    }
}
</script>

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

.container {
    padding: 20rpx;
}

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

.top-btn-group {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    gap: 24rpx;
    margin-bottom: 32rpx;
    margin-top: 16rpx;
    padding: 0 20rpx;
}

.top-action-btn {
    flex: 1;
    background: linear-gradient(90deg, #01c97b 0%, #019245 100%);
    color: #fff;
    font-size: 32rpx;
    font-weight: bold;
    border: none;
    border-radius: 16rpx;
    box-shadow: 0 4rpx 12rpx rgba(1, 146, 69, 0.08);
    padding: 24rpx 0;
    margin: 0;
    transition: background 0.2s;
    letter-spacing: 2rpx;
    outline: none;
}

.top-action-btn:active {
    background: linear-gradient(90deg, #019245 0%, #01c97b 100%);
    opacity: 0.85;
}
</style>