老师 帮忙看下多个店铺结算的订单逻辑的问题 谢谢

OrderAll页面：

<template>

  <div class="order">

    <div class="order__price">实付金额 <b>¥{{calculations.price}}</b></div>

    <div class="order__btn"

         @click="() => handleShowConfirmChange(true)">提交订单</div>

  </div>

  <div class="mask"

       v-show="showConfirm"

       @click="() => handleShowConfirmChange(false)">

    <div class="mask__content"

         @click.stop>

      <h3 class="mask__content__title">确认要离开收银台？</h3>

      <p class="mask__content__desc">请尽快完成支付，否则将被取消</p>

      <div class="mask__content__btns">

        <div class="mask__content__btn mask__content__btn--first"

             @click="() => handleConfirmOrder(true)">取消订单</div>

        <div class="mask__content__btn mask__content__btn--last"

             @click="() => handleConfirmOrder(false)">确认支付</div>

      </div>

    </div>

  </div>

</template>

<script>

import { reactive, ref, toRefs, watchEffect } from 'vue'

import { useStore } from 'vuex'

import { useRouter } from 'vue-router'

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

// 处理总价逻辑

const totalPriceEffect = () => {

  const store = useStore()

  const cartList = store.state.cartList

  const calculations = reactive({

    price: 0,

    total: 0

  })

  // 解构获取到price和total

  const { price, total } = toRefs(calculations)

  price.value = 0

  total.value = 0

  // 处理价格

  for (const key in cartList) {

    const product = cartList[key]

    const productList = product.productList

    if (productList) {

      // 遍历

      for (const k in productList) {

        // 只针对选中的商品进行价格、数量累加

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

          price.value += (productList[k].price * productList[k].count)

          // 累加每个商品的数量

          total.value += productList[k].count

        }

      }

    }

  }

  return { calculations }

}

// 获取下订单的所有店铺及商品信息

const getProductListAll = () => {

  const store = useStore()

  const cartList = store.state.cartList

  // 获取下订单的所有店铺及商品信息

  const productListAll = []

  for (const key in cartList) {

    const product = cartList[key]

    const productList = product.productList

    productListAll.push({ shopName: product.shopName, productList: [] })

    if (productList) {

      // 遍历

      for (const k in productList) {

        // 只针对选中的商品

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

          for (let i = 0; i < productListAll.length; i++) {

            // 根据店铺名将选中的商品添加到对应的店铺的cartList中

            if (productListAll[i].shopName === product.shopName) {

              productListAll[i].productList.push(productList[k])

            }

          }

        }

      }

    }

  }

  for (let i = 0; i < productListAll.length; i++) {

    if (productListAll[i].productList.length === 0) {

      productListAll.splice(i, 1)

    }

  }

  return { productListAll }

}

// 下单相关逻辑

const useMakeOrderEffect = (productListAll) => {

  const router = useRouter()

  // const store = useStore()

  // 下单地址

  const userAddress = reactive({

    info: []

  })

  const getAddress2 = async (id) => {

    const result = await post(`/address/getById?id=${id}`)

    if (result?.code === 1 && result?.data) {

      userAddress.info = result.data

    }

  }

  const getAddress1 = async () => {

    const result = await post('/address/getDefault')

    if (result?.code === 1 && result?.data) {

      userAddress.info = result.data

    }

  }

  watchEffect(() => {

    const id = localStorage.address

    if (id === undefined) {

      getAddress1()

    } else {

      getAddress2(id)

    }

  })

  const { info } = toRefs(userAddress)

  const handleConfirmOrder = async (isCanceled) => {

    const { city, detailAddress, name, phone } = toRefs(info.value)

    for (const key in productListAll) {

      const orderGoods = productListAll[key]

      console.log('---orderGoods---', orderGoods)

      const result = { price: 0 }

      const products = []

      for (const i in orderGoods) {

        const product = orderGoods[i]

        console.log('product', product, product.length)

        if (product.length === 1) {

          result.price += (product[0].count * product[0].price)

          console.log('=======', product[0].count, product[0].price)

          products.push({ id: product[0].id, goodsName: product[0].goodsName, num: product[0].count, img: product[0].imgUrl })

        } else {

          for (let j = 0; j < product.length; j++) {

            result.price += (product[j].count * product[j].price)

            console.log('>>>>>', product[j].count, product[j].price)

            products.push({ id: product[j].id, goodsName: product[j].goodsName, num: product[j].count, img: product[j].imgUrl })

          }

        }

      }

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

      // console.log(result)

      console.log('-----products-----', products)

      // 把每个店铺的商品名称、数量、商品图片单独获取出来，并通过逗号拼接起来

      const orderGoodsName = products.map((product) => {

        return product.goodsName

      }).join(',')

      const orderNum = products.map((product) => {

        return product.num

      }).join(',')

      const orderImg = products.map((product) => {

        return product.img

      }).join(',')

      console.log(orderGoodsName, orderNum, orderImg)

      try {

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

          address: city.value + detailAddress.value,

          consignee: name.value,

          phone: phone.value,

          // shopId: products[0].shopId,

          // goodsName: orderGoodsName,

          // num: orderNum,

          // totalPrice: calculations.value.price,

          shopName: orderGoods.shopName,

          // img: orderImg,

          orderState: isCanceled ? '已取消' : '进行中'

        })

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

          // store.commit('clearCartData', products[0].shopId)

          router.push({ name: 'OrderList' })

        }

      } catch (e) {

        // 提示下单失败

      }

    }

  }

  return { handleConfirmOrder }

}

// 蒙层展示相关的逻辑

const useShowMaskEffect = () => {

  const showConfirm = ref(false)

  const handleShowConfirmChange = (status) => {

    showConfirm.value = status

  }

  return { showConfirm, handleShowConfirmChange }

}

export default {

  name: 'OrderAll',

  setup () {

    const { calculations } = totalPriceEffect()

    const { productListAll } = getProductListAll()

    const { handleConfirmOrder } = useMakeOrderEffect(productListAll)

    const { showConfirm, handleShowConfirmChange } = useShowMaskEffect()

    return { calculations, handleConfirmOrder, showConfirm, handleShowConfirmChange }

  }

}

</script>

<style lang="scss" scoped>

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

.order {

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  display: flex;

  height: 0.49rem;

  line-height: 0.49rem;

  background: $bgColor;

  &__price {

    flex: 1;

    text-indent: 0.24rem;

    font-size: 0.14rem;

    color: $content-fontcolor;

  }

  &__btn {

    width: 0.98rem;

    background: #4fb0f9;

    color: $bgColor;

    text-align: center;

    font-size: 0.14rem;

  }

}

.mask {

  z-index: 1;

  position: absolute;

  left: 0;

  right: 0;

  bottom: 0;

  top: 0;

  background: rgba(0, 0, 0, 0.5);

  &__content {

    position: absolute;

    top: 50%;

    left: 50%;

    transform: translate(-50%, -50%);

    width: 3rem;

    height: 1.56rem;

    background: $bgColor;

    text-align: center;

    border-radius: 0.04rem;

    &__title {

      margin: 0.24rem 0 0 0;

      line-height: 0.26rem;

      font-size: 0.18rem;

      color: $content-fontcolor;

    }

    &__desc {

      margin: 0.08rem 0 0 0;

      font-size: 0.14rem;

      color: $medium-fontColor;

    }

    &__btns {

      display: flex;

      margin: 0.24rem 0.58rem;

    }

    &__btn {

      flex: 1;

      width: 0.8rem;

      line-height: 0.32rem;

      border-radius: 0.16rem;

      font-size: 0.14rem;

      &--first {

        margin-right: 0.12rem;

        border: 0.01rem solid #4fb0f9;

        color: #4fb0f9;

      }

      &--last {

        margin-left: 0.12rem;

        background: #4fb0f9;

        color: $bgColor;

      }

    }

  }

}

</style>