overseas-jsm-mall-front/src/pages/home/components/CartModal.vue

<template>
  <a-drawer
    :open="open"
    title="购物车列表"
    width="620px"
    placement="right"
    @close="emits('close')"
  >
    <div class="drawer-box" style="height: 100%;">
      <CartList
        v-if="mainData.stepNum == 1"
        key="1"
        :user-id="userId"
        :storage-id="storageId"
        @next-step="handleNext"
      />
      <SubmitCart
        v-if="mainData.stepNum == 2"
        key="2"
        :user-id="userId"
        :storage-id="storageId"
        :buy-goods="mainData.buyGoods"
        @prev-step="handlePrev"
        @finish="emits('close')"
        
      />
    </div>
  </a-drawer>
</template>

<script setup lang="js">
import CartList from './CartList.vue';
import SubmitCart from './SubmitCart.vue';
import { reactive, nextTick, watch } from 'vue'

const props = defineProps({
  open: {
    type: Boolean,
    default: false
  },
  userId: {
    type: String,
    default: ''
  },
  storageId: {
    type: String,
    default: ''
  }
})

const emits = defineEmits(['close']);

const mainData = reactive({
  stepNum: 1,
  buyGoods: []
})

const handleNext = (selectedList = []) => {
  mainData.stepNum += 1;
  mainData.buyGoods = selectedList;
}

const handlePrev = () => {
  mainData.buyGoods = [];
  mainData.stepNum -= 1;
}

watch(() => props.open, newVal => {
  if (newVal) {
    mainData.buyGoods = [];
    mainData.stepNum = -1;
    nextTick(() => {
      mainData.stepNum = 1;
    })
  }
})

</script>