1回答

好帮手慕慕子

2021-07-27

已采纳

同学你好，可以结合注释测试理解下面的代码

<template>
    <div class="wrapper">
        <div class="title">我的全部购物车({{cartListWithProducts.length}})</div>
        <div class="shop_wrapper">
            <div class="shops">
                <div class="empty" v-if="cartListWithProducts.length === 0">购物车当前为空</div>
                <div class="shop"  v-for="(item, index) in cartListWithProducts"  :key="index" >
                    <div class="shop_title"> {{item.shopName}} </div>
                    <div class="products">
                        <div class="products_list">
                            <!-- 遍历新添加的属性newCartList -->
                            <!-- <template v-for="(product,index) in item.productList" :key="product._id" > -->
                            <template v-for="(product,index) in item.newCartList" :key="product._id" >
                                <!-- 通过索引与showProductCount比较，控制需要被隐藏的商品 -->
                                <!-- <div  class="products_item"  v-if='showAll ? index>=0 : index<2'> -->
                                <div  class="products_item"  v-show="index < item.showProductCount">
                                    <img class="products_item_img" :src="product.imgUrl" />
                                    <div class="products_item_detail">
                                        <h4 class="products_item_title">{{product.name}}</h4>
                                        <p class="products_item_price">
                                        <span>
                                            <span class="products_item_yen">&yen; </span>
                                            {{product.price}} x {{product.count}}
                                        </span>
                                        <span class="products_item_total">
                                            <span class="products_item_yen">&yen; </span>
                                            {{(product.price * product.count).toFixed(2)}}
                                        </span>
                                        </p>
                                    </div>
                                </div>
                            </template>
                            <!-- 点击事件传入item，方便控制当前被点击的商品信息，调整为商品数大于等于3时显示该按钮 -->
                            <!-- <div class="products_list_btn" v-if='item.productList.length >0' @click='showAllProduct'> -->
                            <div class="products_list_btn" v-if='item.newCartList.length >= 3' @click='showAllProduct(item)'>

                                <!-- 共计：{{item.productList.length}}件/1.4kg -->
                                共计：{{item.newCartList.length}}件/1.4kg

                                <span class="product_list_btn_icon iconfont">&#xe60b;</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <Docker :currentIndex="1"/>
</template>

<script>
import { useStore } from 'vuex';
import { computed, ref } from 'vue';
import Docker from '../home/Docker';

const useCart = () => {
    const store = useStore();
    // 从store中获取cartList数据
    const {cartList} = store.state
    // const cartList = JSON.parse(JSON.stringify(store.state.cartList));

    const cartListWithProducts = computed(() => {
        // const newCartList = [];
        for (const shopId in cartList) {
            const shopInfo = cartList[shopId];
            // 添加一个新属性，以数组的形式存储商品信息
            shopInfo.newCartList = []
            // 添加一个新属性，用来表示最多只能显示多少条商品，默认只显示两条
            shopInfo.showProductCount = 2
            // const productListArr = [];
            // let total = 0;
            const products = cartList[shopId]?.productList;
            for (const productId in products) {
                // 将数据添加到数组中
                shopInfo.newCartList.push(products[productId])
                // const product = products[productId];
                // if (product.count > 0) {
                //     productListArr.push(products[productId]);
                // }
                // total += product.count || 0;
            }
            // if (total > 0) {
            //     // 出错点！！！
            //     shopInfo.productList = productListArr;
            //     newCartList.push(shopInfo);
            // }
        }
        // return newCartList;
        // 直接返回调整后cartList即可
        return cartList
    });
    const showAll = ref(false);
    // const showAllProduct = () => {
    //     showAll.value = !showAll.value;
    // };
    // 调整点击事件函数逻辑
     const showAllProduct = (item) => {
        item.showProductCount === item.newCartList.length ?  item.showProductCount = 2 : item.showProductCount = item.newCartList.length
    };
    return { cartListWithProducts, showAllProduct, showAll };
};
export default {
    name: 'CartList',
    components: { Docker },
    setup() {
        const { cartListWithProducts, showAllProduct, showAll } = useCart();
        return { cartListWithProducts, showAllProduct, showAll };
    },
};
</script>

​另外，这是一个项目作业，如果还有问题，建议同学可以暂时先完成其他功能，然后提交作业，批作业的老师会针对你的完整的项目进行测试与调整，并将修改建议整理成文档发送给同学，便于同学查看与修改。

祝学习愉快~

1