购物车页面

老师，购物车页面的js逻辑怎么写？我写的有问题

<template>
  <div class="wrapper">
    <div class="title">我的全部购物车（2）</div>
    <div class="title__content">
      <template v-for="(productItem, index) in newCartList" :key="index">
        <div class="product" v-if="productItem.productList">
          <div class="product__title">{{ productItem.shopName }}</div>
          <div class="product__list">
            <div
              v-for="item in productItem.productList"
              :key="item._id"
              class="content__product__item"
            >
              <img :src="item.imgUrl" alt="" />
              <div class="content__product__con">
                <p>{{ item.name }}</p>
                <p>
                  <span class="content__product__con__price"
                    >&yen;{{ item.price }}X{{ item.count }}</span
                  >
                  <span>&yen;{{ (item.price * item.count).toFixed(2) }}</span>
                </p>
              </div>
            </div>
          </div>
        </div>
      </template>
    </div>
  </div>
  <Docker :currentIndex="1" />
</template>
<script>
import Docker from "../../components/Docker.vue";
import { useStore } from "vuex";
import { reactive } from 'vue';
export default {
  name: "CartList",
  components: {
    Docker,
  },
  setup() {
    const store = useStore();
    const cartList = store.state.cartList;
    const newCartList = reactive({});
    for (const shopId in cartList) {
      const shopInfo = cartList[shopId];
      for (const item in shopInfo.productList) {
        const product = shopInfo.productList[item];
        if (product.count > 0) {
          newCartList[shopId] = shopInfo;
          shopInfo.productList[item] = product;
        }
      }
    }
    console.log(newCartList);
    return { newCartList };
  },
};
</script>
<style lang="scss" scoped>
@import "../../style/variables.scss";
.wrapper {
  overflow-y: auto;
  position: absolute;
  right: 0;
  top: 0;
  left: 0;
  bottom: 0.5rem;
  background: #f8f8f8;
}
.title {
  height: 0.44rem;
  background: #fff;
  line-height: 0.44rem;
  text-align: center;
  font-size: 16px;
  color: #333333;
}
.product {
  overflow-y: auto;
  margin: 0.16rem 0.18rem 0;
  box-sizing: border-box;
  border-radius: 4px;
  background: $color-white;
  height: 2.22rem;
  &__title {
    padding: 0.16rem 0.16rem 0;
    background: $color-white;
    font-size: 16px;
    color: #140f0f;
    font-weight: bold;
  }
  &__list {
    background: $color-white;
    padding-bottom: 0.16rem;
    .content__product__item {
      padding: 0.16rem 0.16rem 0;
      position: relative;
      display: flex;
      img {
        width: 0.46rem;
        height: 0.46rem;
        margin-right: 0.16rem;
      }
    }
    .content__product__con {
      flex: 1;
      p {
        margin: 0;
      }
      p:first-of-type {
        font-size: 14px;
        color: $content-fontcolor;
      }
      p:last-of-type {
        margin-top: 0.06rem;
        span:last-of-type {
          float: right;
        }
      }
      &__price {
        color: $color-red;
      }
    }
  }
}
</style>