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.
278 lines
8.3 KiB
278 lines
8.3 KiB
<template>
|
|
<view class="member-wrapper">
|
|
<!-- 成员基本信息 -->
|
|
<view class="member-item">
|
|
<view class="member-avatar">
|
|
<image :src="member.hanHaiMember.headImage" mode="aspectFill" />
|
|
</view>
|
|
<view class="member-info">
|
|
<text class="member-name">{{ member.hanHaiMember.nickName }}</text>
|
|
</view>
|
|
<view class="check-food-btn check-btn" @click="toggleExpand">
|
|
<text>{{ isExpanded ? '收起餐点' : '查看餐点' }}</text>
|
|
<uv-icon :name="isExpanded ? 'arrow-up' : 'arrow-down'" color="#019245" size="30rpx"></uv-icon>
|
|
</view>
|
|
<view v-if="status === '1'" class="check-notice-btn check-btn" @click="sendNotice">
|
|
<text>通知取餐</text>
|
|
</view>
|
|
<view v-if="status === '2'" class="check-notice-btn check-btn" @click="completeOrder">
|
|
<text>完成取餐</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 餐点列表展开区域 - 使用v-if替代uv-transition -->
|
|
<view class="food-detail" v-if="isExpanded">
|
|
<view class="food-list">
|
|
<view class="food-item" v-for="(food, index) in member.goodsList" :key="index">
|
|
<view class="food-left">
|
|
<image class="food-image" :src="food.goods.image" mode="aspectFill" />
|
|
<view class="food-info">
|
|
<text class="food-name">{{ food.goods.title }}</text>
|
|
<view class="food-sold">
|
|
<uv-icon name="checkmark-circle" color="#ccc" size="24rpx"></uv-icon>
|
|
<text>已售出 {{ food.goods.sales }}单</text>
|
|
</view>
|
|
<text class="food-price"> <text style="font-size: 20rpx; margin-right: 5rpx;">¥</text> {{ food.goods.price.toFixed(2) }}</text>
|
|
</view>
|
|
</view>
|
|
<view class="food-right">
|
|
<text class="food-quantity">×{{ food.num }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'MemberFoodItem',
|
|
props: {
|
|
// 成员信息，包含头像、姓名和餐点列表
|
|
member: {
|
|
type: Object,
|
|
required: true
|
|
},
|
|
// 是否默认展开
|
|
defaultExpanded: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 从父页面获取的订单状态
|
|
status: {
|
|
type: String,
|
|
default: '0'
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isExpanded: false
|
|
}
|
|
},
|
|
created() {
|
|
// 初始化展开状态
|
|
this.isExpanded = this.defaultExpanded;
|
|
},
|
|
methods: {
|
|
// 切换展开/收起状态
|
|
toggleExpand() {
|
|
this.isExpanded = !this.isExpanded;
|
|
// 触发事件，通知父组件状态变化
|
|
this.$emit('toggle', {
|
|
member: this.member,
|
|
expanded: this.isExpanded
|
|
});
|
|
},
|
|
sendNotice() {
|
|
this.$emit('sendNotice')
|
|
// 模拟通知体验
|
|
// setTimeout(() => {
|
|
// uni.showLoading({
|
|
// title: '通知中...',
|
|
// icon: 'loading',
|
|
// duration: 2000
|
|
// })
|
|
// setTimeout(() => {
|
|
// uni.hideLoading()
|
|
// uni.showToast({
|
|
// title: '通知成功',
|
|
// icon: 'success',
|
|
// duration: 2000
|
|
// })
|
|
// }, 1200)
|
|
// }, 200)
|
|
// 这里存放通知函数的逻辑....
|
|
},
|
|
completeOrder() {
|
|
this.$emit('completeOrder')
|
|
// 模拟体验
|
|
// setTimeout(() => {
|
|
// uni.showLoading({
|
|
// title: '请稍等...',
|
|
// icon: 'loading',
|
|
// duration: 2000
|
|
// })
|
|
// setTimeout(() => {
|
|
// uni.hideLoading()
|
|
// uni.showToast({
|
|
// title: '已完成',
|
|
// icon: 'success',
|
|
// duration: 2000
|
|
// })
|
|
// }, 1200)
|
|
// }, 200)
|
|
// 这里执行函数逻辑
|
|
}
|
|
}
|
|
}
|
|
</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-btn{
|
|
border-radius: 30rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
font-size: 26rpx;
|
|
gap: 10rpx;
|
|
transition: all 0.3s;
|
|
|
|
&:active {
|
|
opacity: 0.8;
|
|
transform: scale(0.98);
|
|
}
|
|
}
|
|
.check-food-btn {
|
|
border: 2rpx solid $uni-color;
|
|
color: $uni-color;
|
|
padding: 10rpx 20rpx;
|
|
}
|
|
.check-notice-btn{
|
|
padding: 10rpx 40rpx;
|
|
background-color: $uni-color;
|
|
color: #fff;
|
|
margin-left: 20rpx;
|
|
}
|
|
|
|
}
|
|
|
|
.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: $uni-color-third;
|
|
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: 120rpx;
|
|
height: 120rpx;
|
|
// 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: $uni-color-third;
|
|
|
|
text {
|
|
margin-left: 4rpx;
|
|
}
|
|
}
|
|
.food-price {
|
|
font-size: 28rpx;
|
|
color: $uni-color-second;
|
|
display: block;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
.food-right {
|
|
text-align: right;
|
|
|
|
|
|
.food-quantity {
|
|
font-size: 24rpx;
|
|
color: #333;
|
|
display: block;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|