【vue3.0】21.0 某东到家（ 廿一）——订单商品列表布局

继续完善订单页面。
这里需要将一些方法进行抽离。
src\effects\cartEffects.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
  })

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

  // 计算shopId下所有cartList的商品数量total、价钱之和totalPrice
  const calculations = computed(() => {
    const productList = cartList[shopId]?.productList
    const resultData = {
      // 总商品数量
      total: 0,
      // 总金额
      totalPrice: 0,
      // 全选
      isAllChecked: true
    }
    if (productList) {
      for (const i in productList) {
        const product = productList[i]
        // 总商品数量
        resultData.total += product.count
        // 总金额
        if (product.checked === true) {
          resultData.totalPrice += product.count * product.price
        }
        // 全选
        if (product.count > 0 && !product.checked) {
          resultData.isAllChecked = false
        }
      }
      resultData.totalPrice = resultData.totalPrice.toFixed(2) // 保留2位小数
    }

    return resultData
  })
  // const total = computed(() => {
  //   const productList = cartList[shopId]?.productList
  //   let count = 0
  //   if (productList) {
  //     for (const i in productList) {
  //       const product = productList[i]
  //       count += product.count
  //     }
  //   }
  //   return count
  // })
  // const totalPrice = computed(() => {
  //   const productList = cartList[shopId]?.productList
  //   let count = 0
  //   if (productList) {
  //     for (const i in productList) {
  //       const product = productList[i]
  //       if (product.checked === true) {
  //         count += product.count * product.price
  //       }
  //     }
  //   }
  //   return count.toFixed(2) // 保留2位小数
  // })

  // 全选的计算属性
  // const allChecked = computed(() => {
  //   const productList = cartList[shopId]?.productList
  //   let result = true
  //   if (productList) {
  //     for (const i in productList) {
  //       const product = productList[i]
  //       if (product.count > 0 && !product.checked) {
  //         result = false
  //         break
  //       }
  //     }
  //   }
  //   return result
  // })

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

这样，src\views\shop\Cart.vue做了减法：

......

......

进一步完善src\views\orderConfirmation\OrderConfirmation.vue

效果如下：

image.png

此时在浏览器进行如下的操作：

image.png

发现当商品很多时，还是会被撑开。
进一步完善：

......
    

      
{{shopName}}
      

......
      
    
......

image.png

继续完善css

  &__list {
    overflow-y: scroll;
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    top: 2.05rem;
  }

image.png

发现滚动效果出来了。继续尝试调试：

 &__list {
   overflow-y: scroll;
   position: absolute;
   padding: 0 0.16rem;
   left: 0;
   right: 0;
   bottom: 0.6rem;
   top: 2.46rem;
   background: #fff;
 }

image.png

效果很接近。继续调试：

  &__list {
    overflow-y: scroll;
    position: absolute;
    margin: 0 0.18rem;
    left: 0;
    right: 0;
    bottom: 0.6rem;
    top: 2.46rem;
    background: #fff;
  }

image.png

到这里我们想要的效果基本都出来了。
继续微调优化:

.products {
......
  &__title {
 ......
  }
  &__list {
 ......
  }
  &__item {
    position: relative;
    display: flex;
    padding: 0.16rem 0.16rem 0 0.16rem;
......
  }
}

image.png

当元素很多的时候，这样效果已经很好了，但当元素较少时，就会如下样式：

image.png

解决办法:创建一个wrapper容器包裹list，然后通过list的背景色自动撑开容器。

......
    

      
{{shopName}}
      

        

......
        
     
    
......

image.png

这样效果就出来了。
完善逻辑：

    

      
{{shopName}}
      

        

          
        
      
    

顺便修复一下之前的一个bug：
src\store\index.js

   /**
     * 加入或减少购物车数量
     * @param {*} state
     * @param {String} shopId 店铺id
     * @param {String} productId 商品id
     * @param {Object} productInfo 商品信息集
     * @param {Number} num 加入购物车的数量
     * @param {*} payload
     */
    changeItemToCart(state, payload) {
......
      product.count <= 0 && (shopInfo.productList[productId].count = 0)
......
    },