71 lines
2.6 KiB
Vue
71 lines
2.6 KiB
Vue
<template>
|
|
<view class="card bg-white p-24rpx" :aria-busy="props.loading" @tap="emit('open')">
|
|
<template v-if="props.loading">
|
|
<view class="flex items-center justify-between gap-20rpx" aria-label="用餐人加载中">
|
|
<view class="min-w-0 flex-1">
|
|
<base-skeleton width="112" height="30" round="6" color="#e8edf3" dark-color="#323232" />
|
|
<base-skeleton class="mt-10rpx" width="72%" height="22" round="6" color="#e8edf3"
|
|
dark-color="#323232" />
|
|
</view>
|
|
<base-skeleton class="shrink-0" width="128" height="26" round="6" color="#dcecff"
|
|
dark-color="#323232" />
|
|
</view>
|
|
<base-skeleton class="mt-18rpx" width="126" height="44" round="22" color="#dcecff" dark-color="#323232" />
|
|
</template>
|
|
<template v-else>
|
|
<view class="flex items-center justify-between">
|
|
<view>
|
|
<view class="sub-text-30">用餐人</view>
|
|
<view class="second-text-22 mt-6rpx color-#999">
|
|
{{ props.guardianWardEnabled ? "每位用餐人将生成一笔独立订单" : "当前商户仅支持为本人订餐" }}
|
|
</view>
|
|
</view>
|
|
<view v-if="props.guardianWardEnabled" class="flex items-center color-#0094ff text-24rpx font-700">
|
|
<text>已选 {{ props.selectedOptions.length }} 人</text>
|
|
<tm-icon name="arrow-right-s-line" :size="26" color="#0094ff" />
|
|
</view>
|
|
<view v-else class="second-text-24 color-#999">仅本人</view>
|
|
</view>
|
|
<view class="mt-18rpx flex flex-wrap gap-12rpx">
|
|
<view v-for="item in props.selectedOptions" :key="item.userId"
|
|
class="flex items-center rounded-full bg-#eef8ff px-14rpx py-8rpx color-#0094ff text-22rpx">
|
|
<text class="max-w-180rpx show-line">{{ item.name }}</text>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
/** 用餐人触发卡片展示的最小人员信息。 */
|
|
type SelectedDinerOption = {
|
|
/** 用户 ID，仅用于列表稳定渲染。 */
|
|
userId: string
|
|
/** 用户展示名称。 */
|
|
name: string
|
|
}
|
|
|
|
/** 触发卡片展示参数，由用餐人选择组件的查询与选择状态提供。 */
|
|
const props = withDefaults(
|
|
defineProps<{
|
|
/** 是否正在加载用餐人列表，加载期间显示骨架并保留点击区域尺寸。 */
|
|
loading?: boolean
|
|
/** 当前商户是否允许选择被监护人代订。 */
|
|
guardianWardEnabled?: boolean
|
|
/** 已选用餐人，用于展示人数和姓名标签。 */
|
|
selectedOptions?: SelectedDinerOption[]
|
|
}>(),
|
|
{
|
|
loading: false,
|
|
guardianWardEnabled: false,
|
|
selectedOptions: () => [],
|
|
},
|
|
)
|
|
|
|
/** 触发卡片点击事件，由持有完整选择状态的父组件决定是否打开抽屉。 */
|
|
const emit = defineEmits<{
|
|
/** 请求打开用餐人选择抽屉。 */
|
|
open: []
|
|
}>()
|
|
</script>
|