<template>
<div class="wrapper">
<div class="title">我的全部购物车({{ total }})</div>
<div class="products" v-for="(item, index) in cart" :key="index">
<template v-if="item.count > 0">
<div class="products_title">{{ item.shopName }}</div>
<div class="products_wrapper">
<div class="products_list" v-for="item in item.info" :key="item.id">
<div class="products_item">
<img class="products_item_img" :src="item.img_url">
<div class="products_item_detail">
<h4 class="products_item_title">{{ item.name }}</h4>
<p class="products_item_price">
<span>
<span class="products_item_yen">¥</span>
{{ item.price }}x{{ item.count }}
</span>
<span class="products_item_total">
<span class="products_item_yen">¥</span>{{ item.itemPrice }}
</span>
</p>
</div>
</div>
</div>
<div class="product_more">
<p class="product_more_total">共计{{ item.count }}件/{{ item.amount }}元</p>
<p class="product_more_check">
<router-link :to="{ path: /orderConfirm/${item.shopId}/${item.products} }">去结算</router-link>
</p>
</div>
</div>
</template>
</div>
</div>
<Docker :currentIndex="2" />
</template>

<script>
import { useStore } from 'vuex';
import Docker from '../Docker.vue';

const useCartEffect = () => {
const store = useStore();
const cartList = store.state.cartList;
const result = { total: 0, cart: [] };
for (const i in cartList) {
let temp = { shopId: 0, shopName: "", info: [], count: 0, amount: 0 };
let amount = 0;

    // 商店遍历
    for (const j in cartList[i]) {
        // 单个商品总价
        let itemPrice = 0;
        if (cartList[i][j] instanceof Object) {
            itemPrice = cartList[i][j].price * cartList[i][j].count;
            cartList[i][j].itemPrice = itemPrice.toFixed(2);
            if (cartList[i][j].count > 0 && cartList[i][j].check) {
                // 商品推入数组 
                temp.info.push(cartList[i][j]);
                temp.count += cartList[i][j].count;
                amount += cartList[i][j].price * cartList[i][j].count;
                temp.amount = amount.toFixed(2);
            }
        } else {
            temp.shopName = cartList[i][j]
        }
        temp.shopId = i;
    }
    result.cart.push(temp)
    var cartl = result.cart.filter(item => item.amount > 0)
    // 购物车总数
    result.total = cartl.length;
}
console.log(result)
return result

}
export default {
name: "ShoppingCart",
components: { Docker },
props: ["currentIndex"],
setup() {
const { total, cart,result } = useCartEffect();
return { total, cart,result };
},
};
</script>

<style lang="scss" scoped>
@import "@/style/mixins.scss";

.wrapper {
overflow-y: auto;
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0.5rem;
background: rgb(248, 248, 248);
}

.title {
line-height: .44rem;
background: #fff;
font-size: .16rem;
color: #333;
text-align: center;
}

.products {
margin: .16rem .18rem .1rem .18rem;
background: #fff;

.product_more {
    display: flex;
    margin-bottom: 0.15rem;
    height: 0.28rem;
    color: #7543e0;
    line-height: 0.28rem;
    font-size: .14rem;
    justify-content: space-between;
    align-items: center;

    &_check {
        background-color: #7543e0;
        height: .3rem;
        width: 1rem;
        text-align: center;

        a {
            color: #fff;
            text-decoration: none;
        }
    }

    &_total {
        text-align: center;
        border: 1px solid #7543e0;
        flex: 1;
    }
}

&_title {
    padding: 0.16rem;
    font-size: .16rem;
    color: #333;
    font-weight: bold;
}

&_wrapper {
    overflow-y: scroll;
    margin: 0 .18rem;
}

&_list {
    background: #fff;
    padding-bottom: .15rem;
}

&_item {
    position: relative;
    display: flex;
    justify-content: space-between;

    &_detail {
        flex: 1;
    }

    &_img {
        width: 0.46rem;
        height: 0.46rem;
        margin-right: 0.16rem;
    }

    &_title {
        font-size: 0.14rem;
        margin: 0;
        line-height: 0.2rem;
        color: #333;
        @include ellipsis;
    }

    &_price {
        display: flex;
        margin: .06rem 0 0 0;
        font-size: 0.14rem;
        line-height: 0.2rem;
        color: #f00;
    }

    &_yen {
        font-size: 0.12rem;
    }

    &_total {
        flex: 1;
        text-align: right;
        color: #000;
    }
}

}
</style>为什么products为undefined