【vue3.0】20.0 某东到家（二十）——订单商品列表布局

继续完善src\views\orderConfirmation\OrderConfirmation.vue
此时需要从src\views\shop\Content.vue抄一段代码，抄过来后效果如下：
src\views\cartList\CartList.vue

进一步完善.
首先将src/views/shop/commonCartEffect.js移动到src\effects\cartEffects.js中，删除commonCartEffect.js

import { computed } from 'vue'
import { useStore } from 'vuex'
// 添加、减少到购物车功能
export const useCommonCartEffect = shopId => {
  const store = useStore()
  const cartList = store.state.cartList // 加入购物车的商品
  /**
   * 加入或减少购物车数量
   * @param {String} shopId 店铺id
   * @param {String} productId 商品id
   * @param {Object} productInfo 商品信息集
   * @param {Number} num 加入购物车的数量
   */
  const changeCartItemInfo = (shopId, productId, productInfo, num) => {
    console.log(
      'changeCartItemInfo:',
      'shopId:' + shopId,
      'productId:' + productId,
      'productInfo:' + JSON.stringify(productInfo),
      'num:' + num
    )
    // 更新vuex中的值
    store.commit('changeItemToCart', { shopId, productId, productInfo, num })
  }
  // 获得加入购物车商品的信息集
  const productList = computed(() => {
    const productInfoList = cartList[shopId]?.productList || [] // 不存在默认空数组
    return productInfoList
  })
  return { cartList, productList, changeCartItemInfo }
}

这里主要是新增集成productList 方法：

  // 获得加入购物车商品的信息集
  const productList = computed(() => {
    const productInfoList = cartList[shopId]?.productList || [] // 不存在默认空数组
    return productInfoList
  })

src\views\shop\Content.vue修改部分如下：

......
import { useCommonCartEffect } from '@/effects/cartEffects'
......
const useCartEffect = (shopId) => {
  const store = useStore()
  const { cartList, changeCartItemInfo } = useCommonCartEffect(shopId)
......

src\views\shop\Cart.vue修改部分如下：

 {{ cartList?.[shopId]?.productList.[item._id]?.count || 0 }}

改为

     {{ getProductCartCount(shopId, item._id) }}

其他修改

......
跳转方法
import { useCommonCartEffect } from '@/effects/cartEffects'

const useCartEffect = shopId => {
  const store = useStore()
  const { cartList, productList, changeCartItemInfo } = useCommonCartEffect(
    shopId
  )
  const getProductCartCount = (shopId, productId) => {
    return cartList?.[shopId]?.productList?.[productId]?.count || 0
  }
......
  return {
......
    getProductCartCount,
......
  }
......
export default {
  name: 'Cart',
  setup() {
    // 展示隐藏购物车
    const { showCart, handleCartShowChange } = toggleCartEffect()
    // 计算总价和加入购物车的总数量
    const {
......
      getProductCartCount,
......
    } = useCartEffect(shopId)
    return {
 ......
      getProductCartCount,
......
    }
  }
}
......

删掉如下代码：

  const productList = computed(() => {
    const productInfoList = cartList[shopId]?.productList || [] // 不存在默认空数组
    return productInfoList
  })

src\views\orderConfirmation\OrderConfirmation.vue修改如下：

最终代码：
src\views\shop\Cart.vue

src\views\shop\Content.vue

image.png

优化商品展示的信息：
新增获得商品名称的方法：
src\effects\cartEffects.js

.....
  // 获得商铺名称
  const shopName = computed(() => {
    const shopName = cartList[shopId]?.shopName || '' // 不存在默认空数组
    return shopName
  })

  return { cartList, shopName, productList, changeCartItemInfo }

src\views\orderConfirmation\OrderConfirmation.vue

......

      
{{shopName}}
      

        

          
          

            
{{ item.name }}
            

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

image.png