refactor(healthily|life-enrichment):优化 chooseList 组件的列表显示逻辑-

This commit is contained in:
陈昱达
2025-08-26 18:09:09 +08:00
parent 5d26d7da3a
commit eef74a0df7
2 changed files with 16 additions and 7 deletions

View File

@@ -1,13 +1,18 @@
<template>
<div class="choose-list mt50">
<section v-if="list && list.length > 0">
<button v-for="(item, index) in list" :class="{ active: index === chooseIndex }" @click="changeIndex(index)" v-if="list[chooseIndex].data.length > 0">
<button v-for="(item, index) in list" :class="{ active: index === chooseIndex }" @click="changeIndex(index)" v-show="list[chooseIndex].data.length > 0">
{{ item.name }}
</button>
<!-- 选中的列表-->
<div class="selection-list flex mt30" :class="{ showOpacity: chooseIndex > -1 }" v-if="list[chooseIndex].data.length > 0">
<div
class="selection-list flex mt30"
:class="{ showOpacity: chooseIndex > -1 }"
v-show="list[chooseIndex].data.length > 0 && index === chooseIndex"
v-for="(item, index) in list"
>
<template v-if="chooseIndex > -1">
<div class="selection-item " v-for="(li, i) in list[chooseIndex].data" :key="i" style="height: auto">
<div class="selection-item " v-for="(li, i) in item.data" :key="i" style="height: auto">
<img :src="li.img" alt="" />
<!-- &lt;!&ndash; 用于展位&ndash;&gt;-->
@@ -32,6 +37,8 @@
</div>
</template>
</div>
<!-- 选中的列表-->
</section>
</div>
</template>

View File

@@ -5,14 +5,16 @@
{{ item.name }}
</button>
<!-- 选中的列表-->
<div
v-for="(item, index) in list"
class="selection-list flex mt30"
v-if="list[chooseIndex].data.length > 0"
v-show="item.data.length > 0 && index === chooseIndex"
:class="{ showOpacity: chooseIndex > -1 }"
:style="{ display: chooseIndex === 0 ? 'flex' : 'grid' }"
>
<template v-if="chooseIndex > -1">
<div class="selection-item" v-for="(li, i) in list[chooseIndex].data" :key="i">
<template v-if="chooseIndex > -1 && index === chooseIndex">
<div class="selection-item" v-for="(li, i) in item.data" :key="i" v-show="chooseIndex === index">
<img :src="li.image" alt="" />
<div class="pv20" v-if="!li.showType">
<div class="title-body flex align-items-c ">