From 3a982526b2c6decc00cab598277662a4a2f960bd Mon Sep 17 00:00:00 2001
From: hflllll <violeteverdack@gmail.com>
Date: Tue, 22 Apr 2025 23:31:23 +0800
Subject: [PATCH] =?UTF-8?q?1.3.1=20=E5=81=9A=E4=BA=86=E5=9B=A2=E9=95=BF?=
 =?UTF-8?q?=E8=AE=A2=E5=8D=95=E7=9A=84=E4=B8=80=E7=82=B9=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 pages.json                                      |   7 +
 pages/index/order.vue                           |  99 ++++++++++-
 pages_order/components/order/MemberFoodItem.vue | 222 ++++++++++++++++++++++++
 pages_order/order/groupMealDetail.vue           | 139 +++++++++++++++
 4 files changed, 465 insertions(+), 2 deletions(-)
 create mode 100644 pages_order/components/order/MemberFoodItem.vue
 create mode 100644 pages_order/order/groupMealDetail.vue

diff --git a/pages.json b/pages.json
index 6027566..db5c8ae 100644
--- a/pages.json
+++ b/pages.json
@@ -147,6 +147,13 @@
 				"style": {
 					"navigationBarTitleText": "取餐点选择"
 				}
+			},
+			{
+				"path": "order/groupMealDetail",
+				"style": {
+					"navigationBarTitleText": "团餐详情",
+					"navigationStyle": "custom"
+				}
 			}
 		]
 	}],
diff --git a/pages/index/order.vue b/pages/index/order.vue
index 221931a..786f735 100644
--- a/pages/index/order.vue
+++ b/pages/index/order.vue
@@ -17,8 +17,21 @@
 				@click="clickTabs"></uv-tabs>
 		</view>
 
+		<!-- 团餐列表 -->
+		<view class="group-meal-list">
+			<view class="meal-item" v-for="(meal, index) in groupMeals" :key="index">
+				<!-- <view class="meal-info"> -->
+					<view class="meal-name">团餐{{index+1}}</view>
+					<view class="meal-price">本单佣金合计: <text class="price-value">¥{{meal.price}}</text></view>
+				<!-- </view> -->
+				<view class="meal-action">
+					<button class="order-btn" @click="viewOrder(meal)">查看订单</button>
+				</view>
+			</view>
+		</view>
+
 		<!-- 订单列表 -->
-		<view class="order-list">
+		<view class="order-list" v-if="false">
 			<OrderItem v-for="(order, index) in orderList" :key="order.id" :order="order" @cancel="handleCancelOrder"
 				@pay="handlePayOrder" @click="goToOrderDetail(order)" />
 			<view style="
@@ -160,6 +173,26 @@
 				current: 0,
 				mixinsListApi: 'getOrderPageList',
 				orderList: [],
+				groupMeals: [
+					{
+						id: '1',
+						name: '团餐1',
+						price: '18.00',
+						status: 'pending'
+					},
+					{
+						id: '2',
+						name: '团餐2',
+						price: '18.00',
+						status: 'pending'
+					},
+					{
+						id: '3',
+						name: '团餐3',
+						price: '18.00',
+						status: 'pending'
+					}
+				]
 			}
 		},
 		onLoad(args) {
@@ -191,7 +224,7 @@
 			// 跳转到新订单详情页
 			goToOrderDetail(order) {
 				if (order.status === 'completed') {
-					tthis.$utils.navigateTo({
+					this.$utils.navigateTo({
 						url: '/pages_order/order/newOrderDetail?id=' + order.id + '&status=' + order.status
 					})
 				} else {
@@ -200,6 +233,16 @@
 					})
 				}
 			},
+			// 查看团餐订单
+			viewOrder(meal) {
+				this.$utils.navigateTo({
+					url: '/pages_order/order/groupMealDetail?id=' + meal.id
+				})
+				// uni.showToast({
+				// 	title: '查看团餐' + meal.id,
+				// 	icon: 'none'
+				// })
+			},
 			// 加载模拟订单数据
 			loadMockOrders() {
 				this.orderList = mockOrders
@@ -295,6 +338,58 @@
 		// position: relative;
 	}
 
+	/* 团餐列表样式 */
+	.group-meal-list {
+		padding: 20rpx;
+	}
+	
+	.meal-item {
+		display: flex;
+		justify-content: space-between;
+		align-items: center;
+		padding: 30rpx 20rpx;
+		background-color: #fff;
+		margin-bottom: 20rpx;
+		border-radius: 10rpx;
+	}
+	
+	.meal-info {
+		flex: 1;
+	}
+	
+	.meal-name {
+		font-size: 32rpx;
+		font-weight: 500;
+		margin-bottom: 10rpx;
+	}
+	
+	.meal-price {
+		font-size: 28rpx;
+		color: $uni-color;
+		background-color: #ECFEF4;
+		padding: 10rpx 20rpx;
+		border-radius: 10rpx;
+	}
+	
+	.price-value {
+		margin-left: 10rpx;
+		font-weight: 500;	
+	}
+	
+	.meal-action {
+		margin-left: 20rpx;
+	}
+	
+	.order-btn {
+		background-color: $uni-color;
+		color: #fff;
+		font-size: 28rpx;
+		padding: 10rpx 30rpx;
+		border-radius: 30rpx;
+		line-height: 1.5;
+		min-width: 160rpx;
+	}
+
 	.list {
 		.item {
 			width: calc(100% - 40rpx);
diff --git a/pages_order/components/order/MemberFoodItem.vue b/pages_order/components/order/MemberFoodItem.vue
new file mode 100644
index 0000000..468841a
--- /dev/null
+++ b/pages_order/components/order/MemberFoodItem.vue
@@ -0,0 +1,222 @@
+<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>
\ No newline at end of file
diff --git a/pages_order/order/groupMealDetail.vue b/pages_order/order/groupMealDetail.vue
new file mode 100644
index 0000000..ccda972
--- /dev/null
+++ b/pages_order/order/groupMealDetail.vue
@@ -0,0 +1,139 @@
+<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> 
\ No newline at end of file