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.
191 lines
5.8 KiB
191 lines
5.8 KiB
<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>
|