老师 麻烦看下我的全部购物车去结算的店铺名展示的问题

店铺中没有选中的商品，但是店铺名会显示

store->index.js页面

import Vuex from 'vuex'

// import { post } from '../utils/request'

// 给cartList数据做持久存储

const setLocalCartList = (state) => {

  const { cartList } = state

  const cartListString = JSON.stringify(cartList)

  localStorage.cartList = cartListString

}

const getLocalCartList = () => {

  // { shopId: {shopName:'', productList:{ productId: {} }}}

  try {

    return JSON.parse(localStorage.cartList)

  } catch (e) {

    return {}

  }

}

export default Vuex.createStore({

  state: {

    cartList: getLocalCartList(),

    userId: '',

    cartValue: {}

  },

  mutations: {

    saveUserId (state, payload) {

      state.userId = payload.userId

    },

    changeCartItemInfo (state, payload) {

      const { shopId, productId, productInfo } = payload

      const shopInfo = state.cartList[shopId] || {

        shopName: '', productList: {}

      }

      let product = shopInfo.productList[productId]

      if (!product) {

        productInfo.count = 0

        product = productInfo

      }

      product.count = product.count + payload.num

      if (payload.num > 0) { product.check = true }

      if (product.count < 0) { product.count = 0 }

      shopInfo.productList[productId] = product

      state.cartList[shopId] = shopInfo

      console.log('cart state:', state)

      console.log('userId:', state.userId, 'shopId:', shopId, 'goodsId:', product.id, 'goodsNum:', product.count, 'goodsName:', product.goodsName, 'img:', product.imgUrl)

      // 加入购物车

      // const addCart = async () => {

      //   try {

      //     const result = await post('/cart/create', {

      //       shopId: shopId,

      //       goodsId: product.id,

      //       goodsNum: product.count,

      //       goodsName: product.goodsName,

      //       img: product.imgUrl

      //     })

      //     if (result?.code === 1) {

      //       console.log('添加购物车成功')

      //     } else {

      //       console.log('添加购物车失败')

      //     }

      //   } catch (e) {

      //     console.log('请求失败')

      //   }

      // }

      // addCart()

      // 购物车店铺名显示、隐藏

      for (const key in state.cartList) {

        const product = state.cartList[key]

        const productList = product.productList

        let count1 = 0

        if (productList) {

          for (const k in productList) {

            count1 += productList[k].count

          }

        }

        if (count1 === 0) {

          product.show = false

        } else {

          product.show = true

        }

      }

      // 订单店铺名显示、隐藏

      // for (const key in state.cartList) {

      //   const product = state.cartList[key]

      //   const productList = product.productList

      //   let count2 = 0

      //   if (productList) {

      //     for (const k in productList) {

      //       if (productList[k].check) {

      //         count2 += 1

      //         console.log('????', productList[k], count2)

      //       }

      //     }

      //   }

      //   if (count2 === 0) {

      //     product.show1 = false

      //   } else {

      //     product.show1 = true

      //   }

      // }

      setLocalCartList(state)

    },

    changeShopName (state, payload) {

      const { shopId, shopName } = payload

      const shopInfo = state.cartList[shopId] || {

        shopName: '', productList: {}

      }

      shopInfo.shopName = shopName

      state.cartList[shopId] = shopInfo

      setLocalCartList(state)

    },

    changeCartItemChecked (state, payload) {

      const { shopId, productId } = payload

      const product = state.cartList[shopId].productList[productId]

      product.check = !product.check

      setLocalCartList(state)

    },

    cleanCartProducts (state, payload) {

      const { shopId } = payload

      state.cartList[shopId].productList = {}

      state.cartList[shopId].show = false

      setLocalCartList(state)

    },

    setCartItemsChecked (state, payload) {

      // 接收allChecked

      const { shopId, allChecked } = payload

      const products = state.cartList[shopId].productList

      if (products) {

        for (const key in products) {

          const product = products[key]

          // 如果allChecked值为true，将每个商品的check值设为true

          if (allChecked) {

            product.check = true

          } else {

            // 如果allChecked值为false，将每个商品的check值设为false

            product.check = false

          }

        }

      }

      setLocalCartList(state)

    },

    cartListCheckAll (state, payload) {

      // 接收allChecked

      const { allChecked } = payload

      // 修改所有数据的check属性

      const cartList = state.cartList

      if (cartList) {

        for (const key in cartList) {

          const product = cartList[key]

          const productList = product.productList

          if (productList) {

            for (const i in productList) {

              if (allChecked) {

                productList[i].check = true

              } else {

                // 如果allChecked值为false，将每个商品的check值设为false

                productList[i].check = false

              }

            }

          }

        }

      }

      setLocalCartList(state)

    },

    clearCartData (state, shopId) {

      state.cartList[shopId].productList = {}

    }

  }

})

ProductListAll页面

<template>

  <div class="products">

    <!-- 遍历全部购物车数据，并渲染；shopId就是商店id -->

    <div v-for="(shopItem, shopId) in cartList"

         :key="shopId">

      <div class="products__title"

           v-if="shopItem.show">

        {{shopItem.shopName}}

      </div>

      <div class="products__wrapper">

        <div class="products__list">

          <!-- 遍历数据，只显示选中的 -->

          <div v-for="item in shopItem.productList"

               :key="item.id"

               class="products__item">

            <template v-if="item.check && item.count > 0">

              <img class="products__item__img"

                   :src="item.imgUrl" />

              <div class="products__item__detail">

                <h4 class="products__item__title">{{item.goodsName}}</h4>

                <p class="products__item__price">

                  <span>

                    <span class="products__item__yen">&yen; </span>

                    {{item.price}} x {{item.count}}

                  </span>

                  <span class="products__item__total">

                    <span class="products__item__yen">&yen; </span>

                    {{(item.price * item.count).toFixed(2)}}

                  </span>

                </p>

              </div>

            </template>

          </div>

        </div>

      </div>

    </div>

  </div>

</template>

<script>

import { useStore } from 'vuex'

export default {

  name: 'ProductList',

  setup () {

    // 获取全部购物车数据

    const store = useStore()

    const cartList = store.state.cartList

    return {

      cartList

    }

  }

}

</script>

<style lang="scss" scoped>

@import "../../style/viriables.scss";

@import "../../style/mixins.scss";

.products {

  margin: 0.16rem 0.18rem 0.1rem 0.18rem;

  background: $bgColor;

  &__title {

    padding: 0.16rem;

    font-size: 0.16rem;

    color: $content-fontcolor;

  }

  &__wrapper {

    overflow-y: scroll;

  }

  &__list {

    background: $bgColor;

  }

  &__item {

    position: relative;

    display: flex;

    padding: 0 0.16rem 0.16rem 0.16rem;

    &__img {

      width: 0.46rem;

      height: 0.46rem;

      margin-right: 0.16rem;

    }

    &__detail {

      flex: 1;

    }

    &__title {

      margin: 0;

      line-height: 0.2rem;

      font-size: 0.14rem;

      color: $content-fontcolor;

      @include ellipsis;

    }

    &__price {

      display: flex;

      margin: 0.06rem 0 0 0;

      line-height: 0.2rem;

      font-size: 0.14rem;

      color: $hightlight-fontColor;

    }

    &__total {

      flex: 1;

      text-align: right;

      color: $dark-fontColor;

    }

    &__yen {

      font-size: 0.12rem;

    }

  }

}

</style>