You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
88 lines
2.5 KiB
88 lines
2.5 KiB
<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>
|