老师 帮忙看下实付金额的问题 谢谢

Order.vue页面：

<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 { ref } from 'vue'

import { useRouter, useRoute } from 'vue-router'

import { useStore } from 'vuex'

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

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

// 下单相关逻辑

const useMakeOrderEffect = (shopId, shopName, productList) => {

  const router = useRouter()

  const store = useStore()

  const handleConfirmOrder = async (isCanceled) => {

    const products = []

    for (const i in productList.value) {

      const product = productList.value[i]

      products.push({ id: parseInt(product.id, 10), num: product.count })

    }

    try {

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

        addressId: 1,

        shopId,

        shopName: shopName.value,

        isCanceled,

        products

      })

      if (result?.errno === 0) {

        store.commit('clearCartData', 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: 'Order',

  setup () {

    const route = useRoute()

    const shopId = parseInt(route.params.id, 10)

    const { calculations, shopName, productList } = useCommonCartEffect(shopId)

    const { handleConfirmOrder } = useMakeOrderEffect(shopId, shopName, productList)

    const { showConfirm, handleShowConfirmChange } = useShowMaskEffect()

    return { showConfirm, handleShowConfirmChange, calculations, handleConfirmOrder }

  }

}

</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>

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

cartEffects.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

        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 }

}