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.
222 lines
6.3 KiB
222 lines
6.3 KiB
<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>
|