teambuy-front/pages_order/components/order/MemberFoodItem.vue

<template>
    <view class="member-wrapper">
        <!-- 成员基本信息 -->
        <view class="member-item">
            <view class="member-avatar">
                <image :src="member.avatar" mode="aspectFill" />
            </view>
            <view class="member-info">
                <text class="member-name">{{ member.name }}</text>
            </view>
            <view class="check-food-btn" @click="toggleExpand">
                <text>{{ isExpanded ? '收起餐点' : '查看餐点' }}</text>
                <uv-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" color="#019245" size="30rpx"></uv-icon>
            </view>
        </view>

        <!-- 餐点列表展开区域 - 使用v-if替代uv-transition -->
        <view class="food-detail" v-if="isExpanded">
            <view class="fold-handle" @click="toggleExpand">
                <uv-icon name="arrow-up" color="#999" size="24rpx"></uv-icon>
                <text class="fold-text">点击收起</text>
            </view>
            <view class="food-list">
                <view class="food-item" v-for="(food, index) in member.food" :key="index">
                    <view class="food-left">
                        <image class="food-image" :src="food.image" mode="aspectFill"></image>
                        <view class="food-info">
                            <text class="food-name">{{ food.name }}</text>
                            <view class="food-sold">
                                <uv-icon name="checkmark-circle" color="#ccc" size="24rpx"></uv-icon>
                                <text>已售出 {{ food.sold }}单</text>
                            </view>
                        </view>
                    </view>
                    <view class="food-right">
                        <text class="food-price">¥{{ food.price.toFixed(2) }}</text>
                        <text class="food-quantity">×{{ food.quantity }}</text>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script>
export default {
    name: 'MemberFoodItem',
    props: {
        // 成员信息，包含头像、姓名和餐点列表
        member: {
            type: Object,
            required: true
        },
        // 是否默认展开
        defaultExpanded: {
            type: Boolean,
            default: false
        }
    },
    data() {
        return {
            isExpanded: false
        }
    },
    created() {
        // 初始化展开状态
        this.isExpanded = this.defaultExpanded;
    },
    methods: {
        // 切换展开/收起状态
        toggleExpand() {
            this.isExpanded = !this.isExpanded;
            // 触发事件，通知父组件状态变化
            this.$emit('toggle', {
                member: this.member,
                expanded: this.isExpanded
            });
        }
    }
}
</script>

<style lang="scss" scoped>
.member-wrapper {
    margin-bottom: 20rpx;
    border-radius: 10rpx;
    overflow: hidden;

    .member-item {
        display: flex;
        align-items: center;
        background-color: #fff;
        padding: 30rpx 20rpx;

        .member-avatar {
            width: 70rpx;
            height: 70rpx;
            margin-right: 20rpx;

            image {
                width: 100%;
                height: 100%;
                border-radius: 10rpx;
            }
        }

        .member-info {
            flex: 1;

            .member-name {
                font-size: 30rpx;
                font-weight: 500;
            }
        }

        .check-food-btn {
            border: 2rpx solid $uni-color;
            border-radius: 30rpx;
            display: flex;
            align-items: center;
            color: $uni-color;
            font-size: 28rpx;
            padding: 10rpx 20rpx;
            gap: 10rpx;
            transition: all 0.3s;

            &:active {
                opacity: 0.8;
                transform: scale(0.98);
            }
        }
    }

    .food-detail {
        background-color: #fff;
        padding: 20rpx;
        box-shadow: inset 0 4rpx 8rpx rgba(0, 0, 0, 0.05);

        .fold-handle {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10rpx 0;
            margin-bottom: 10rpx;
            border-bottom: 1px dashed #eeeeee;

            .fold-text {
                font-size: 24rpx;
                color: #999;
                margin-left: 10rpx;
            }

            &:active {
                opacity: 0.8;
            }
        }

        .food-list {
            .food-item {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 15rpx 0;
                border-bottom: 1px solid #f5f5f5;

                &:last-child {
                    border-bottom: none;
                }

                .food-left {
                    display: flex;
                    align-items: center;

                    .food-image {
                        width: 100rpx;
                        height: 100rpx;
                        border-radius: 8rpx;
                        margin-right: 15rpx;
                    }

                    .food-info {
                        .food-name {
                            font-size: 28rpx;
                            color: #333;
                            margin-bottom: 10rpx;
                            display: block;
                        }

                        .food-sold {
                            display: flex;
                            align-items: center;
                            font-size: 24rpx;
                            color: #999;

                            text {
                                margin-left: 4rpx;
                            }
                        }
                    }
                }

                .food-right {
                    text-align: right;

                    .food-price {
                        font-size: 28rpx;
                        color: #f00;
                        display: block;
                        margin-bottom: 10rpx;
                    }

                    .food-quantity {
                        font-size: 24rpx;
                        color: #333;
                        display: block;
                    }
                }
            }
        }
    }
}
</style>