【vue3.0】20.0 某東到家（二十）——訂單商品列表佈局

繼續完善src\views\orderConfirmation\OrderConfirmation.vue
此時需要從src\views\shop\Content.vue抄一段代碼，抄過來後效果如下：
src\views\cartList\CartList.vue

<template>
  <div class="wrapper">
    <div class="top">
......
    </div>
    <div class="products">
      <div class="products__title"></div>
      <div class="products__list">
        <div class="product__item" v-for="item in list" :key="item._id">
          <img class="product__item__img" :src="item.imgUrl" />
          <div class="product__item__detail">
            <h4 class="product__item__title">{{ item.name }}</h4>
            <p class="product__item__sales">月售{{ item.sales }}件</p>
            <p class="product__item__price">
              <span class="product__item__yen"> &yen;{{ item.price }} </span>
              <span class="product__item__yen"> &yen;{{ item.price }} </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

進一步完善.
首先將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修改如下：

<template>
  <div class="wrapper">
    <div class="top">
      <div class="top__bgcolor" />
      <div class="top__header">
        <div class="top__header__back">
          <i class="custom-icon custom-icon-back"></i>
        </div>
        <span>確認訂單</span>
      </div>
      <div class="top__receiver">
        <div class="top__receiver__title">收貨地址</div>
        <div class="top__receiver__address">
          西安一二三大學四五六科技園2號樓
        </div>
        <div class="top__receiver__info">
          <span class="top__receiver__info__name">張三（先生）</span>
          <span class="top__receiver__info__phone">18012341234</span>
        </div>
        <div class="top__receiver__icon">
          <i class="custom-icon custom-icon-back"></i>
        </div>
      </div>
    </div>
    <div class="products">
      <div class="products__title"></div>
      <div class="products__list">
        <div class="product__item" v-for="item in productList" :key="item._id">
          <img class="product__item__img" :src="item.imgUrl" />
          <div class="product__item__detail">
            <h4 class="product__item__title">{{ item.name }}</h4>
            <p class="product__item__sales">月售{{ item.sales }}件</p>
            <p class="product__item__price">
              <span class="product__item__yen"> &yen;{{ item.price }} </span>
              <span class="product__item__yen"> &yen;{{ item.price }} </span>
            </p>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// import { ref } from 'vue'
import { useCommonCartEffect } from '@/effects/cartEffects'
import { useRoute } from 'vue-router' // 路由跳轉方法
export default {
  name: 'OrderConfirmation',
  setup() {
    const route = useRoute()
    const shopId = route.params.shopId // 店鋪id
    const { cartList, productList } = useCommonCartEffect(shopId)
    return {
      cartList,
      productList
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.wrapper {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: #eee;
}
.top {
  position: relative;
  height: 1.96rem;
  background-size: 100% 1.59rem;
  /* 漸變軸爲0度,相當於從下到上，
   高度4%位置從rgba(0, 145, 255, 0) 開始漸變
   到高度50%位置的藍色（#0091ff）結束 */
  background-image: linear-gradient(0deg, rgba(0, 145, 255, 0) 4%, #0091ff 50%);
  background-repeat: no-repeat;

  &__header {
    position: relative;
    padding-top: 0.26rem;
    line-height: 0.24rem;
    color: #fff;
    text-align: center;
    font-size: 0.16rem;
    &__back {
      position: absolute;
      font-size: 0.22rem;
      left: 0.18rem;
    }
  }
  &__receiver {
    position: absolute;
    left: 0.18rem;
    right: 0.18rem;
    bottom: 0rem;
    height: 1.11rem;
    background: #fff;
    border-radius: 0.04rem;
    &__title {
      line-height: 0.22rem;
      padding: 0.16rem 0 0.14rem 0.16rem;
      font-size: 0.16rem;
      color: #333;
    }
    &__address {
      line-height: 0.2rem;
      padding: 0 0.4rem 0 0.16rem;
      font-size: 0.16rem;
      color: #333;
    }
    &__info {
      padding: 0.06rem 0 0 0.16rem;
      &__name &__phone {
        margin-right: 0.1rem;
        line-height: 0.18rem;
        font-size: 0.12rem;
        color: #666;
      }
    }
    &__icon {
      //旋轉180度
      transform: rotate(180deg);
      position: absolute;
      right: 0.16rem;
      top: 0.53rem;
      font-size: 0.16rem;
      color: #666;
    }
  }
}
.products {
  margin: 0.16rem 0.18rem 0.55rem 0.18rem;
  background: #fff;
  // &__title {
  // }
  // &__list {
  // }
}
.product {
  overflow-y: scroll;
  flex: 1;
  &__item {
    position: relative;
    display: flex;
    padding: 0.12rem 0.16rem;
    margin: 0 0.16rem;
    border-bottom: 0.01rem solid $content-bg-color;
    // 配合解決超出長度以省略號顯示而不會出現換行
    &__detail {
      overflow: hidden;
    }
    &__img {
      width: 0.68rem;
      height: 0.68rem;
      margin-right: 0.16rem;
    }
    &__title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $content-font-color;
      // 超出長度以省略號顯示而不會出現換行
      @include ellipsis;
    }
    &__price {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $height-light-font-color;
    }
    &__yen {
      font-size: 0.12rem;
    }
  }
}
</style>

最終代碼：
src\views\shop\Cart.vue

<template>
  <!-- 蒙層 -->
  <div
    class="mask"
    v-if="showCart && calculations.total > 0"
    @click="handleCartShowChange"
  ></div>
  <div class="cart">
    <div class="product" v-show="showCart && calculations.total > 0">
      <div class="product__header">
        <div class="product__header__all" @click="setCartItemsChecked(shopId)">
          <i
            :class="[
              'product__header__all__icon',
              'custom-icon',
              calculations.isAllChecked
                ? 'custom-icon-radio-checked'
                : 'custom-icon-radio-unchecked'
            ]"
          ></i>
          <span class="product__header__all__text">全選</span>
        </div>
        <div class="product__header__clear">
          <span
            class="product__header__clear__btn"
            @click="cleanCartProducts(shopId)"
            >清空購物車</span
          >
        </div>
      </div>
      <template v-for="item in productList" :key="item._id">
        <div class="product__item" v-if="item.count > 0">
          <div
            class="product__item__checked"
            @click="changeCartItemChecked(shopId, item._id)"
          >
            <i
              :class="[
                'custom-icon',
                item.checked == true
                  ? 'custom-icon-radio-checked'
                  : 'custom-icon-radio-unchecked'
              ]"
            ></i>
          </div>
          <img class="product__item__img" :src="item.imgUrl" />
          <div class="product__item__detail">
            <h4 class="product__item__title">{{ item.name }}</h4>
            <p class="product__item__price">
              <span class="product__item__yen"> &yen;{{ item.price }} </span>
              <span class="product__item__origin">
                &yen;{{ item.oldPrice }}
              </span>
            </p>
          </div>
          <div class="product__number">
            <span
              class="product__number__minus"
              @click="
                () => {
                  0
                  changeCartItemInfo(shopId, item._id, item, -1)
                }
              "
              >-</span
            >
            {{ getProductCartCount(shopId, item._id) }}
            <span
              class="product__number__plus"
              @click="
                () => {
                  changeCartItemInfo(shopId, item._id, item, 1)
                }
              "
              >+</span
            >
          </div>
        </div>
      </template>
    </div>
    <div class="check">
      <div class="check__icon" @click="handleCartShowChange">
        <img src="/i18n/9_16/img/basket.png" alt="" class="check__icon__img" />
        <div class="check__icon__tag">
          {{ calculations.total }}
        </div>
      </div>
      <div class="check__info">
        總計：<span class="check__info__price"
          >&yen; {{ calculations.totalPrice }}</span
        >
      </div>
      <div class="check__btn">
        <router-link :to="{ path: `/orderConfirmation/${shopId}` }">
          去結算
        </router-link>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, computed } from 'vue'
import { useRoute } from 'vue-router' // 路由跳轉方法
import { useStore } from 'vuex' // 路由跳轉方法
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
  }
  // 單個勾選或者不勾選
  const changeCartItemChecked = (shopId, productId) => {
    store.commit('changeItemChecked', { shopId, productId })
  }
  // 清除購物車按鈕
  const cleanCartProducts = shopId => {
    store.commit('changeCleanCartProducts', { shopId })
  }
  // 購物車全選或者取消全選
  const setCartItemsChecked = shopId => {
    store.commit('setCartItemsChecked', { shopId })
  }

  // 計算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,
    calculations,
    productList,
    changeCartItemChecked,
    changeCartItemInfo,
    cleanCartProducts,
    getProductCartCount,
    setCartItemsChecked
  }
}

// 展示隱藏購物車
const toggleCartEffect = () => {
  const showCart = ref(false)
  // 顯示隱藏購物車具體內容
  const handleCartShowChange = () => {
    showCart.value = !showCart.value
  }
  return { showCart, handleCartShowChange }
}
export default {
  name: 'Cart',
  setup() {
    const route = useRoute()
    const shopId = route.params.id // 店鋪id
    // 展示隱藏購物車
    const { showCart, handleCartShowChange } = toggleCartEffect()
    // 計算總價和加入購物車的總數量
    const {
      cartList,
      calculations,
      productList,
      changeCartItemChecked,
      changeCartItemInfo,
      cleanCartProducts,
      getProductCartCount,
      setCartItemsChecked
    } = useCartEffect(shopId)
    return {
      cartList,
      calculations,
      productList,
      shopId,
      showCart,
      handleCartShowChange,
      changeCartItemChecked,
      changeCartItemInfo,
      cleanCartProducts,
      getProductCartCount,
      setCartItemsChecked
    }
  }
}
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.mask {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.cart {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: $bg-color;
}
.product {
  overflow-y: scroll;
  flex: 1;
  background: $bg-color;
  &__header {
    display: flex;
    line-height: 0.52rem;
    border-bottom: 0.01rem solid $content-bg-color;
    font-size: 0.14rem;
    color: $content-font-color;
    &__all {
      width: 0.64rem;
      margin-left: 0.18rem;
      &__icon {
        display: inline-block;
        vertical-align: top;
        font-size: 0.2rem;
        margin-right: 0.05rem;
        color: $btn-bg-color;
      }
      &__text {
        display: inline-block;
        margin-left: 0.04rem;
        line-height: 0.52rem;
      }
    }
    &__clear {
      flex: 1;
      text-align: right;
      margin-right: 0.16rem;
      &__btn {
        display: inline-block;
      }
    }
  }
  &__item {
    position: relative;
    display: flex;
    padding: 0.12rem 0.16rem;
    margin: 0 0.16rem;
    border-bottom: 0.01rem solid $content-bg-color;
    &__checked {
      line-height: 0.5rem;
      margin-right: 0.2rem;
      color: $btn-bg-color;
      i {
        font-size: 0.25rem;
      }
    }
    // 配合解決超出長度以省略號顯示而不會出現換行
    &__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-font-color;
      // 超出長度以省略號顯示而不會出現換行
      @include ellipsis;
    }
    &__price {
      margin: 0.06rem 0 0 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $height-light-font-color;
    }
    &__yen {
      font-size: 0.12rem;
    }
    &__origin {
      margin-left: 0.06rem;
      line-height: 0.2rem;
      font-size: 0.12rem;
      color: $light-font-color;
      text-decoration: line-through; //中劃線
    }
    // 購物車選購數量和加減號
    .product__number {
      position: absolute;
      right: 0rem;
      bottom: 0.26rem;
      &__minus,
      &__plus {
        display: inline-block;
        width: 0.2rem;
        height: 0.2rem;
        line-height: 0.16rem;
        border-radius: 50%;
        font-size: 0.2rem;
        text-align: center;
      }
      // 邊框白色
      &__minus {
        border: 0.01rem solid $medium-font-color;
        color: $medium-font-color;
        margin-right: 0.05rem;
      }
      //無邊框，背景藍色
      &__plus {
        color: $bg-color;
        background: $btn-bg-color;
        margin-left: 0.05rem;
      }
    }
  }
}
.check {
  display: flex;
  box-sizing: border-box; //往內塞入border
  line-height: 0.49rem;
  height: 0.49rem;
  border-top: 0.01rem solid $content-bg-color;
  &__icon {
    width: 0.84rem;
    position: relative;
    &__img {
      margin: 0.12rem auto;
      display: block;
      width: 0.28rem;
      height: 0.28rem;
    }
    &__tag {
      // 乘以2然後等比例縮小
      position: absolute;
      left: 0.46rem;
      top: 0.04rem;
      padding: 0 0.04rem;
      min-width: 0.2rem;
      height: 0.2rem;
      line-height: 0.2rem;
      text-align: center;
      background-color: $height-light-font-color;
      border-radius: 0.1rem;
      font-size: 0.12rem;
      color: $bg-color;
      transform: scale(0.5);
      transform-origin: left center;
    }
  }
  &__info {
    flex: 1;
    color: $content-font-color;
    font-size: 0.12rem;
    &__price {
      line-height: 0.49rem;
      color: $height-light-font-color;
      font-size: 0.18rem;
    }
  }
  &__btn {
    width: 0.98rem;
    background-color: #4fb0f9;
    text-align: center;
    color: $bg-color;
    font-size: 0.14rem;
    // 去掉a標籤的下劃線
    a {
      color: $bg-color;
      text-decoration: none; //去掉文本修飾
    }
  }
}
</style>

src\views\shop\Content.vue

<template>
  <div class="content">
    <div class="category">
      <div
        :class="{
          category__item: true,
          'category__item--active': currentTab === item.tab
        }"
        v-for="item in categories"
        :key="item.tab"
        @click="handleTabClick(item.tab)"
      >
        {{ item.name }}
      </div>
    </div>
    <div class="product">
      <div class="product__item" v-for="item in list" :key="item._id">
        <img class="product__item__img" :src="item.imgUrl" />
        <div class="product__item__detail">
          <h4 class="product__item__title">{{ item.name }}</h4>
          <p class="product__item__sales">月售{{ item.sales }}件</p>
          <p class="product__item__price">
            <span class="product__item__yen"> &yen;{{ item.price }} </span>
            <span class="product__item__origin">
              &yen;{{ item.oldPrice }}
            </span>
          </p>
        </div>
        <div class="product__number">
          <span
            class="product__number__minus"
            @click="
              () => {
                changeCartItem(shopId, item._id, item, -1, shopName)
              }
            "
            >-</span
          >
          {{ getProductCartCount(shopId, item._id) }}
          <span
            class="product__number__plus"
            @click="
              () => {
                changeCartItem(shopId, item._id, item, 1, shopName)
              }
            "
            >+</span
          >
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, ref, toRefs, watchEffect } from 'vue'
import { useRoute } from 'vue-router' // 路由跳轉方法
import { useStore } from 'vuex'
import { get } from '@/utils/request.js'
import { useCommonCartEffect } from '@/effects/cartEffects'

const categories = [
  {
    name: '全部商品',
    tab: 'all'
  },
  {
    name: '秒殺',
    tab: 'seckill'
  },
  {
    name: '新鮮水果',
    tab: 'fruit'
  },
  {
    name: '休閒食品',
    tab: 'snack'
  }
]

// 和tab切換相關的邏輯
const useTabEffect = () => {
  const currentTab = ref(categories[0].tab)
  const handleTabClick = tab => {
    console.log('click:' + tab)
    currentTab.value = tab
  }
  return { currentTab, handleTabClick }
}
// 當前列表內容相關的函數
const useContentListEffect = (currentTab, shopId) => {
  const content = reactive({ list: [] })
  const getContentData = async () => {
    const result = await get(`/api/shop/${shopId}/products`, {
      tab: currentTab.value
    })
    console.log('result:' + result)
    if (result?.code === 200 && result?.data?.length) {
      content.list = result.data
    }
  }
  // watchEffect：當首次頁面加載時，或當其中監聽的數據發生變化時執行
  watchEffect(() => {
    getContentData()
  })
  const { list } = toRefs(content)
  return { list }
}

const useCartEffect = (shopId) => {
  const store = useStore()
  const { cartList, changeCartItemInfo } = useCommonCartEffect(shopId)

  const changeShopName = (shopId, shopName) => {
    store.commit('changeShopName', { shopId, shopName })
  }
  const changeCartItem = (shopId, productId, item, num, shopName) => {
    changeCartItemInfo(shopId, productId, item, num)
    changeShopName(shopId, shopName)
  }

  const getProductCartCount = (shopId, productId) => {
    return cartList?.[shopId]?.productList?.[productId]?.count || 0
  }
  return {
    cartList,
    changeCartItem,
    getProductCartCount
  }
}
export default {
  name: 'Content',
  props: {
    id: String,
    shopName: String
  },
  setup() {
    const route = useRoute() // 獲取路由

    const shopId = route.params.id
    const { currentTab, handleTabClick } = useTabEffect()
    const { list } = useContentListEffect(currentTab, shopId)
    const { cartList, changeCartItem, getProductCartCount } = useCartEffect(
      shopId
    )
    return {
      cartList,
      list,
      categories,
      handleTabClick,
      currentTab,
      shopId,
      getProductCartCount,
      changeCartItem
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
.content {
  display: flex;
  position: absolute;
  left: 0;
  right: 0;
  top: 1.6rem;
  bottom: 0.5rem;
}
.category {
  overflow-y: scroll;
  width: 0.76rem;
  background: $search-bg-color;
  height: 100%;
  &__item {
    line-height: 0.4rem;
    text-align: center;
    font-size: 14px;
    color: $content-font-color;
    &--active {
      background: $bg-color;
    }
  }
}
.product {
  overflow-y: scroll;
  flex: 1;
  &__item {
    position: relative;
    display: flex;
    padding: 0.12rem 0.16rem;
    margin: 0 0.16rem;
    border-bottom: 0.01rem solid $content-bg-color;
    // 配合解決超出長度以省略號顯示而不會出現換行
    &__detail {
      overflow: hidden;
    }
    &__img {
      width: 0.68rem;
      height: 0.68rem;
      margin-right: 0.16rem;
    }
    &__title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $content-font-color;
      // 超出長度以省略號顯示而不會出現換行
      @include ellipsis;
    }
    &__sales {
      margin: 0.06rem 0;
      line-height: 0.16rem;
      font-size: 0.12rem;
      color: $content-font-color;
    }
    &__price {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $height-light-font-color;
    }
    &__yen {
      font-size: 0.12rem;
    }
    &__origin {
      margin-left: 0.06rem;
      line-height: 0.2rem;
      font-size: 0.12rem;
      color: $light-font-color;
      text-decoration: line-through; //中劃線
    }
    // 購物車選購數量和加減號
    .product__number {
      position: absolute;
      right: 0rem;
      bottom: 0.12rem;
      &__minus,
      &__plus {
        display: inline-block;
        width: 0.2rem;
        height: 0.2rem;
        line-height: 0.16rem;
        border-radius: 50%;
        font-size: 0.2rem;
        text-align: center;
      }
      // 邊框白色
      &__minus {
        border: 0.01rem solid $medium-font-color;
        color: $medium-font-color;
        margin-right: 0.05rem;
      }
      //無邊框，背景藍色
      &__plus {
        color: $bg-color;
        background: $btn-bg-color;
        margin-left: 0.05rem;
      }
    }
  }
}
</style>

優化商品展示的信息：
新增獲得商品名稱的方法：
src\effects\cartEffects.js

.....
  // 獲得商鋪名稱
  const shopName = computed(() => {
    const shopName = cartList[shopId]?.shopName || '' // 不存在默認空數組
    return shopName
  })

  return { cartList, shopName, productList, changeCartItemInfo }

src\views\orderConfirmation\OrderConfirmation.vue

......
<div class="products">
      <div class="products__title">{{shopName}}</div>
      <div>
        <div class="products__item" v-for="item in productList" :key="item._id">
          <img class="products__item__img" :src="item.imgUrl" />
          <div class="products__item__detail">
            <h4 class="products__item__title">{{ item.name }}</h4>
            <p class="products__item__price">
              <span>
                <span class="products__item__yen"> &yen; </span>
                {{ item.price }}×{{item.count}}
              </span>
              <span class="products__item__total">
                <span class="products__item__yen"> &yen; </span>
                {{( item.price*item.count ).toFixed(2)}}
              </span>
            </p>
          </div>
        </div>
      </div>
    </div>
......
<script>
......
  setup() {
......
 const { cartList, shopName, productList } = useCommonCartEffect(shopId)
    return {
      cartList,
      shopName,
      productList
    }
  }
......
</script>
<style lang="scss" scoped>
@import '@/style/viriables.scss';
@import '@/style/mixins.scss';
......
.products {
  margin: 0.16rem 0.18rem 0.55rem 0.18rem;
  background: #fff;
  &__title {
    padding: 0.16rem 0.16rem 0 0.16rem;
    font-size: 0.16rem;
    color: #333;
  }
  &__item {
    position: relative;
    display: flex;
    padding: 0.16rem;
    &__img {
      width: 0.46rem;
      height: 0.46rem;
      margin-right: 0.16rem;
    }
    // 配合解決超出長度以省略號顯示而不會出現換行
    &__detail {
      overflow: hidden;
      flex: 1;
    }

    &__title {
      margin: 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $content-font-color;
      // 超出長度以省略號顯示而不會出現換行
      @include ellipsis;
    }
    &__price {
      display: flex;
      margin: 0.06rem 0 0 0;
      line-height: 0.2rem;
      font-size: 0.14rem;
      color: $height-light-font-color;
    }
    &__total {
      text-align: right;
      color: #000;
      flex: 1;
    }
    &__yen {
      font-size: 0.12rem;
    }
  }
}
</style>