老师 麻烦帮忙看下我的全部购物车的问题 谢谢

问题1：

问题2：

CartList.vue页面：

<template>

  <div class="wrapper">

    <div class="title">我的全部购物车</div>

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

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

         :key="shopId">

      <div class="cart">

        <div class="cart__title"

             v-if="shopItem.show">

          {{shopItem.shopName}}

        </div>

        <div class="cart__wrapper">

          <div class="product__list">

            <!-- 遍历数据，只显示count>0的 -->

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

                      :key="item.id">

              <div v-if="item.count > 0"

                   class="product__item">

                <div class="product__item__checked iconfont"

                     v-html="item.check ? '&#xe652;': '&#xe603;'"

                     @click="() => changeCartItemChecked(shopId, item.id)" />

                <img class="product__item__img"

                     :src="item.imgUrl" />

                <div class="product__item__detail">

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

                  <p class="product__item__price">

                    <span class="product__item__yen">&yen;</span>{{item.price}}

                    <!-- <span class="product__item__origin">&yen;{{item.oldPrice}}</span> -->

                  </p>

                </div>

                <div class="product__number">

                  <span class="product__number__minus iconfont"

                        @click="() => { changeCartItemInfo(shopId, item.id, item, -1) }">&#xe677;</span>

                  <span class="product__number__value">{{item.count || 0}}</span>

                  <span class="product__number__plus iconfont"

                        @click="() => { changeCartItemInfo(shopId, item.id, item, 1) }">&#xe845;</span>

                </div>

              </div>

            </template>

          </div>

        </div>

      </div>

      <div class="check">

        <div class="check__all"

             @click="() => setCartItemsChecked(shopId)">

          <span class="check__all__icon iconfont"

                v-html="allChecked ? '&#xe652;': '&#xe603;'">

          </span>

          全选

        </div>

        <div class="check__info">

          总计：<span class="check__info__price">&yen; {{calculations.price}}</span>

        </div>

        <div class="check__btn"

             v-show="calculations.total > 0">

          <!-- 跳转到提交订单页面 -->

          <router-link :to="{path: `/orderConfirmation/${shopId}`}">

            去结算

          </router-link>

        </div>

      </div>

    </div>

  </div>

  <Docker :currentIndex="1" />

</template>

<script>

import Docker from '../../components/Docker'

import { useStore } from 'vuex'

import { useRoute } from 'vue-router'

import { useCommonCartEffect } from '../../effects/cartEffects'

import { ref } from 'vue'

// 获取购物车信息逻辑

const useCartEffect = (shopId) => {

  // 获取购物车全部数据

  const store = useStore()

  const cartList = store.state.cartList

  const { calculations } = useCommonCartEffect(shopId)

  // 获取初始时，全选框的状态

  const allChecked = ref(false)

  for (const key in cartList) {

    const product = cartList[key]

    const productList = product.productList

    if (productList) {

      for (const k in productList) {

        if (productList[k].check === false) {

          allChecked.value = false

        } else {

          allChecked.value = true

        }

      }

    }

  }

  // 操作购物车功能

  const changeCartItemInfo = (shopId, productId, productInfo, num) => {

    store.commit('changeCartItemInfo', {

      shopId, productId, productInfo, num

    })

  }

  const changeCartItemChecked = (shopId, productId) => {

    store.commit('changeCartItemChecked', { shopId, productId })

  }

  const setCartItemsChecked = (shopId) => {

    // 如果全选状态，点击按钮后取消全选，如果非全选状态，点击按钮后全部选中

    const check = !allChecked.value

    allChecked.value = check

    // store.commit('setCartItemsChecked', { shopId, allChecked })

    store.commit('cartListCheckAll', { allChecked: check })

  }

  return {

    cartList, calculations, changeCartItemInfo, changeCartItemChecked, setCartItemsChecked, allChecked

  }

}

export default {

  name: 'CartList',

  components: { Docker },

  setup () {

    const route = useRoute()

    const shopId = route.params.id

    const {

      cartList, calculations, changeCartItemInfo, changeCartItemChecked, setCartItemsChecked, allChecked

    } = useCartEffect(shopId)

    console.log('calculations!!!', calculations)

    return {

      cartList, calculations, changeCartItemInfo, changeCartItemChecked, setCartItemsChecked, allChecked

    }

  }

}

</script>

<style lang="scss" scoped>

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

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

.wrapper {

  overflow-y: auto;

  position: absolute;

  left: 0;

  top: 0;

  bottom: 0.5rem;

  right: 0;

  background: #f8f8f8;

}

.title {

  line-height: 0.44rem;

  background: $bgColor;

  font-size: 0.16rem;

  color: $content-fontcolor;

  text-align: center;

}

.cart {

  margin: 0.16rem 0.18rem 0.1rem 0.18rem;

  background: $bgColor;

  border-radius: 0.04rem 0.04rem 0 0;

  &__title {

    padding: 0.16rem;

    font-size: 0.16rem;

    color: $content-fontcolor;

  }

  &__wrapper {

    overflow-y: scroll;

  }

}

.product {

  &__list {

    background: $bgColor;

    border-radius: 0 0 0.04rem 0.04rem;

  }

  &__item {

    position: relative;

    display: flex;

    padding: 0.12rem 0;

    margin: 0 0.18rem;

    border-bottom: 0.01rem solid $content-bgColor;

    &__checked {

      line-height: 0.5rem;

      margin-right: 0.1rem;

      color: $btn-bgColor;

      font-size: 0.2rem;

    }

    &__detail {

      overflow: hidden;

    }

    &__img {

      width: 0.46rem;

      height: 0.46rem;

      margin-right: 0.16rem;

    }

    &__title {

      margin: 0;

      line-height: 0.2rem;

      font-size: 0.14rem;

      color: $content-fontcolor;

      @include ellipsis;

    }

    &__price {

      margin: 0.06rem 0 0 0;

      line-height: 0.2rem;

      font-size: 0.14rem;

      color: $hightlight-fontColor;

    }

    &__yen {

      font-size: 0.12rem;

    }

    &__origin {

      margin-left: 0.06rem;

      line-height: 0.2rem;

      font-size: 0.12rem;

      color: $light-fontColor;

      text-decoration: line-through;

    }

    .product__number {

      position: absolute;

      right: 0;

      bottom: 0.12rem;

      &__minus {

        position: relative;

        top: 0.02rem;

        color: $medium-fontColor;

        margin-right: 0.05rem;

        font-size: 0.2rem;

      }

      &__plus {

        position: relative;

        top: 0.02rem;

        color: $btn-bgColor;

        margin-left: 0.05rem;

        font-size: 0.2rem;

      }

      &__value {

        font-size: 0.13rem;

      }

    }

  }

}

.check {

  width: 100%;

  position: absolute;

  bottom: 0;

  display: flex;

  height: 0.49rem;

  background-color: $bgColor;

  border-top: 0.01rem solid $content-bgColor;

  line-height: 0.49rem;

  &__all {

    width: 0.64rem;

    margin-left: 0.18rem;

    font-size: 0.12rem;

    &__icon {

      display: inline-block;

      margin-right: 0.05rem;

      vertical-align: top;

      color: $btn-bgColor;

      font-size: 0.2rem;

    }

  }

  &__info {

    flex: 1;

    color: $content-fontcolor;

    font-size: 0.12rem;

    text-align: right;

    line-height: 0.49rem;

    margin-right: 0.18rem;

    &__price {

      line-height: 0.49rem;

      color: $hightlight-fontColor;

      font-size: 0.18rem;

    }

  }

  &__btn {

    width: 0.98rem;

    background-color: #4fb0f9;

    text-align: center;

    font-size: 0.14rem;

    margin-left: 0.2rem;

    a {

      color: $bgColor;

      text-decoration: none;

    }

  }

}

</style>

==================================

cartEffect.js页面

import { computed } from 'vue'

import { useStore } from 'vuex'

// 购物车相关逻辑

export const useCommonCartEffect = (shopId) => {

  const store = useStore()

  const cartList = store.state.cartList

  const changeCartItemInfo = (shopId, productId, productInfo, num) => {

    store.commit('changeCartItemInfo', {

      shopId, productId, productInfo, num

    })

  }

  const productList = computed(() => {

    const productList = cartList[shopId]?.productList || {}

    const notEmptyProductList = {}

    for (const i in productList) {

      const product = productList[i]

      if (product.count > 0) {

        notEmptyProductList[i] = product

      }

    }

    return notEmptyProductList

  })

  const shopName = computed(() => {

    const shopName = cartList[shopId]?.shopName || ''

    return shopName

  })

  const calculations = computed(() => {

    const productList = cartList[shopId]?.productList

    const result = { total: 0, price: 0, allChecked: true }

    if (productList) {

      for (const i in productList) {

        const product = productList[i]

        result.total += product.count

        console.log('cartEffect calculations', result)

        if (product.check) {

          result.price += (product.count * product.price)

        }

        if (product.count > 0 && !product.check) {

          result.allChecked = false

        }

      }

    }

    result.price = result.price.toFixed(2)

    return result

  })

  return { cartList, shopName, productList, calculations, changeCartItemInfo }

}

=========================

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

        }

      }

      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 = {}

      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 = {}

    }

  }

})