Augcl
/
teambuy-front
generated from hly/uniapp-shop-templates
1
0
Fork 0
Code Issues 0 Pull Requests 0 Projects 0 Releases 0 Wiki Activity
Browse Source

1.3.1 做了团长订单的一点页面

hfll
hflllll 6 months ago
parent
bac14dc75f
commit
3a982526b2
4 changed files with 465 additions and 2 deletions
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. +7
    -0
      pages.json
  2. +97
    -2
      pages/index/order.vue
  3. +222
    -0
      pages_order/components/order/MemberFoodItem.vue
  4. +139
    -0
      pages_order/order/groupMealDetail.vue

+ 7
- 0
pages.json View File

@ -147,6 +147,13 @@
"style": {
"navigationBarTitleText": "取餐点选择"
}
},
{
"path": "order/groupMealDetail",
"style": {
"navigationBarTitleText": "团餐详情",
"navigationStyle": "custom"
}
}
]
}],


+ 97
- 2
pages/index/order.vue View File

@ -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);


+ 222
- 0
pages_order/components/order/MemberFoodItem.vue View File

@ -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>

+ 139
- 0
pages_order/order/groupMealDetail.vue View File

@ -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>

Write Preview
Loading…
Cancel
Save