city-gather/src/subPack-xsb/commonTab/components/classfiy.vue

<script setup lang="ts">
import type { LoadMoreState } from 'wot-design-uni/components/wd-loadmore/types'
import selectSku from '../../components/select-sku/index.vue'
import { StaticUrl } from '@/config'
import router from '@/router'

const props = defineProps<{ categoryList: Api.xsbCategories[], hotText: Api.xsbSearchTerm[] }>()
const { statusBarHeight, MenuButtonHeight } = storeToRefs(useSysStore())
const { topNavActive, leftActive, SelectShopInfo } = storeToRefs(useSysXsbStore())
const { userInfo, token } = storeToRefs(useUserStore())
const classfiylist = computed(() => props.categoryList)
const sortClassBtn = ref(1)
const show = ref(false)
const cartList = ref<Api.xsbCategoriesCartList[]>([])
const cartIds = computed(() => cartList.value.filter(it => it.isDelete !== '1' && it.shopSkuStocks !== '0').map(it => it.id))
const showball = ref(false)
const _this = getCurrentInstance()
const selectGoods = ref(false)
// 多规格商品skuid
const selectSkuId = ref(0)
const SelectGoodsNum = ref(1)
const goodsInTo = ref()
const goodsInfo = ref<Api.xsbCategoryProductList | Api.xsbProductDetail | undefined>()
definePage({
  name: 'xsb-classfiy',
  islogin: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '星闪豹分类',
    disableScroll: true,
  },
})
const isTopLoading = ref(false)
const cartPopup = ref(false)
const basllObj = ref({
  left: 0,
  top: 0,
  x: -402,
  y: 773,
})
const x = computed(() => `${basllObj.value.x}px`)
const y = computed(() => `${basllObj.value.y}px`)
const left = computed(() => `${basllObj.value.left}px`)
const top = computed(() => `${basllObj.value.top}px`)

const productList = ref<Api.xsbCategoryProductList[]>([])
const topScrollView = ref()
const scrollTop = ref<number | undefined>(0)
const goodsLoading = ref<LoadMoreState>()
const navHeight = computed(() => {
  return (`${Number(MenuButtonHeight.value) + Number(statusBarHeight.value)}px`)
})
const totalProduct = ref<Api.shoppingCartOrderConfirm>()
function handleTopNavChange(item: Api.xsbCategoriesChildren) {
  topNavActive.value = item.code
  leftActive.value = item.children[0].code
  show.value = false
  topScrollView.value = null
  nextTick(() => {
    topScrollView.value = item.code
  })
  getProductList()
}

const categories = computed(() => {
  return classfiylist.value.find(it => it.code === topNavActive.value)?.children || []
})
const categoriesId = computed(() => {
  return categories.value.find(it => it.code === leftActive.value)?.id
})
async function getCartCategorList() {
  return new Promise((resolve, reject) => {
    Apis.xsb.myShoppingCartCategory({
      data: {
        businessType: 'XSB',
        channelId: unref(userInfo).channelId,
        shopId: unref(SelectShopInfo).shopId,
      },
    }).then((res) => {
      cartList.value = res.data
      if (cartList.value.length) {
        getGoodsPrice()
      }
      resolve(res)
    }).catch((err) => {
      reject(err)
    })
  })
}
function handleChange({ value }: { value: string }) {
  leftActive.value = value
  getProductList()
}
async function getProductList() {
  const res = await Apis.xsb.getCategoryProductList({
    data: {
      categoryId: Number(categoriesId.value),
      shopId: Number(SelectShopInfo.value?.shopId) || 1,
      channelId: unref(userInfo).channelId || 1,
    },
  })
  productList.value = res.data
  console.log(isTopLoading.value, '=====================')
  if (!res.data.length) {
    scrollTop.value = undefined
    nextTick(() => {
      scrollTop.value = 0
    })
  }
  if (!isTopLoading.value) {
    goodsInTo.value = null
    nextTick(() => {
      goodsInTo.value = res.data.length ? res.data[0].prodId : null
    })
  }
  else {
    goodsInTo.value = null
    nextTick(() => {
      goodsInTo.value = res.data.length ? res.data[res.data.length - 4].prodId : null
    })
  }
  goodsLoading.value = 'finished'
  isTopLoading.value = false
  setProductNum()
}

function handlScrollBottom() {
  goodsLoading.value = 'loading'

  const index = categories?.value.findIndex(it => it.code === leftActive.value)
  console.log(index, '-================')
  if (index + 1 === categories.value.length) {
    goodsLoading.value = 'finished'
    return
  }
  if (index !== -1) {
    handleChange({ value: categories.value[index + 1].code })
  }
}
function handleSrollTop() {
  isTopLoading.value = true
  const index = categories?.value.findIndex(it => it.code === leftActive.value)
  if (index !== -1) {
    if (index === 0) {
      nextTick(() => isTopLoading.value = false)
    }
    else {
      handleChange({ value: categories.value[index - 1].code })
    }
  }
}
async function handleAddCart(event: WechatMiniprogram.TouchEvent, item: Api.xsbCategoryProductList) {
  if (!token.value) {
    useGlobalToast().show('请先登录!')
    return
  }
  if (item.skuList.length > 1) {
    goodsInfo.value = item
    selectGoods.value = true
    return
  }
  if (showball.value)
    return
  basllObj.value.left = event.detail.x
  basllObj.value.top = event.detail.y
  showball.value = true
  setTimeout(() => {
    showball.value = false
  }, 500)
  await useSmqjhCartStore().addCart(item.skuList[0].skuId, 1, Number(item.shopId), 'XSB')
  await getCartCategorList()
  setProductNum()
}
async function handleSubCart(event: WechatMiniprogram.TouchEvent, item: Api.xsbCategoryProductList) {
  if (item.num === 1) {
    useGlobalMessage().confirm({
      msg: '是否删除该商品？',
      success: async () => {
        await useSmqjhCartStore().addCart(item.skuList[0].skuId, -1, Number(item.shopId), 'XSB')
        await getCartCategorList()
        setProductNum()
      },
    })
  }
  else {
    if (showball.value)
      return
    basllObj.value.left = event.detail.x
    basllObj.value.top = event.detail.y
    showball.value = true
    setTimeout(() => {
      showball.value = false
    }, 500)
    await useSmqjhCartStore().addCart(item.skuList[0].skuId, -1, Number(item.shopId), 'XSB')
    await getCartCategorList()
    setProductNum()
  }
}

onMounted(async () => {
  if (!topNavActive.value || !leftActive.value) {
    topNavActive.value = props.categoryList[0].code || ''
    leftActive.value = props.categoryList[0].children[0].code || ''
  }

  if (leftActive.value) {
    handleChange({ value: leftActive.value })
  }
  if (topNavActive.value) {
    topScrollView.value = null
    nextTick(() => {
      topScrollView.value = topNavActive.value
    })
  }
  if (token.value) {
    goodsLoading.value = 'loading'
    await getCartCategorList()
    if (cartList.value.length) {
      getCartBox()
    }
  }
})

function getCartBox() {
  const query = uni.createSelectorQuery().in(_this)
  query.select('.cart-box').boundingClientRect()
  query.exec((res) => {
    basllObj.value.y = res[0].top
    uni.getSystemInfo().then((info) => {
      basllObj.value.x = -(info.screenWidth - res[0].left - 15)
      console.log(basllObj.value.x, basllObj.value.y)
    })
  })
}
function handleGo(item: Api.xsbCategoryProductList) {
  if (!item.prodId) {
    useGlobalToast().show('后端数据异常!')
    return
  }
  router.push({ name: 'xsb-goods', params: { id: String(item.prodId) } })
}

async function getGoodsPrice() {
  if (cartIds.value.length) {
    const res = await useSmqjhCartStore().getCartAddGoodsPrice(cartIds.value.join(','))
    totalProduct.value = res
  }
}
async function handleSub(item: Api.xsbCategoriesCartList) {
  if (item.num === 1) {
    useGlobalMessage().confirm({
      msg: '是否删除该商品？',
      success: async () => {
        cartPopup.value = false
        await useSmqjhCartStore().addCart(item.skuId, -1, item.shopId, 'XSB')
        await getCartCategorList()
        setProductNum()
        totalProduct.value = undefined
      },
    })
  }
  else {
    await useSmqjhCartStore().addCart(item.skuId, -1, item.shopId, 'XSB')
    getGoodsPrice()
    await getCartCategorList()
    setProductNum()
  }
}
async function handleAdd(item: Api.xsbCategoriesCartList) {
  await useSmqjhCartStore().addCart(item.skuId, 1, item.shopId, 'XSB')
  getGoodsPrice()
  await getCartCategorList()
  setProductNum()
}
onUnmounted(() => {
  console.log('组件卸载')
  topNavActive.value = ''
  leftActive.value = ''
})
async function handleDelCartGoods(item: Api.xsbCategoriesCartList) {
  const msg = item.isDelete ? '商品已被商家删除，是否确认删除该门店下的商品？' : '门店商品库存不足，是否删除该门店下的商品？'
  useGlobalMessage().confirm({
    title: '提示',
    msg,
    success: async () => {
      uni.showLoading({ mask: true })
      try {
        await Apis.common.deleteShoppingCart({
          pathParams: {
            ids: String(item.id),
          },
        })
        await getCartCategorList()
        uni.hideLoading()
      }
      catch {
        uni.hideLoading()
      }
    },
  })
}
function setProductNum() {
  if (!cartList.value.length) {
    productList.value = productList.value.map((goods) => {
      goods.num = undefined
      return goods
    })
    return
  }
  cartList.value.forEach((it) => {
    productList.value = productList.value.map((goods) => {
      if (goods.skuList.length && goods.skuList[0].skuId === it.skuId) {
        goods.num = it.num
      }
      return goods
    })
  })
}
async function handleSkuAddCart() {
  await useSmqjhCartStore().addCart(unref(selectSkuId), unref(SelectGoodsNum), Number(goodsInfo.value?.shopId), 'XSB')
  getGoodsPrice()
  await getCartCategorList()
}
function handlePay() {
  if (!totalProduct.value) {
    useGlobalToast().show('请选择商品')
    return
  }
  const shopSkuStock = totalProduct.value.skuList.filter(it => it.num > Number(it.shopSkuStocks))
  if (shopSkuStock.length) {
    useGlobalToast().show({ msg: `${shopSkuStock[0].skuName}库存不足` })
    return
  }
  router.push({ name: 'xsb-confirmOrder', params: { data: JSON.stringify(totalProduct.value) } })
}
</script>

<template>
  <view class="page-xsb">
    <wd-navbar
      title="" custom-style="background-color:#F4FFD1" :bordered="false" :z-index="99" safe-area-inset-top
      fixed
    >
      <template #left>
        <view class="flex items-center" @click="router.push({ name: 'xsb-search' })">
          <view
            class="h60rpx w-474rpx flex items-center justify-between border-2rpx border-[var(--them-color)] rounded-40rpx border-solid bg-white pr6rpx"
          >
            <view class="flex items-center pb14rpx pl24rpx pt16rpx">
              <wd-icon name="search" size="14" color="#ccc" />
              <view class="search ml12rpx h-full w-full overflow-hidden">
                <wd-notice-bar
                  :text="hotText.map((it) => it.searchName)" custom-class="notice-bar" color="#ccc"
                  background-color="#fff" direction="vertical"
                />
              </view>
            </view>
            <view class="flex items-center pr28rpx">
              <wd-divider vertical />
              <view class="ml6rpx text-28rpx text-[var(--them-color)] font-semibold">
                搜索
              </view>
            </view>
          </view>
        </view>
      </template>
    </wd-navbar>
    <view
      class="h162rpx flex items-center justify-between bg-#F4FFD1 pl24rpx"
      :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
    >
      <scroll-view
        :scroll-into-view-offset="-150" scroll-x enable-passive scroll-with-animation
        class="scrollx w-90% flex-shrink-0 whitespace-nowrap" :scroll-into-view="`id${topScrollView}`"
      >
        <view class="flex items-end pb10rpx">
          <view
            v-for="item in classfiylist" :id="`id${item.code}`" :key="item.code"
            class="mr24rpx flex flex-col items-center justify-center" @click="handleTopNavChange(item)"
          >
            <image
              :src="item.icon"
              :class="[topNavActive == item.code ? 'overflow-hidden border-solid border-[var(--them-color)] border-2rpx rounded-26rpx h84rpx w-84rpx' : 'h72rpx w-72rpx']"
            />
            <view
              class="mt16rpx text-22rpx"
              :class="[topNavActive == item.code ? 'bg-[var(--them-color)] rounded-18rpx px-8rpx py2rpx text-white text-24rpx' : '']"
            >
              {{ item.name }}
            </view>
          </view>
        </view>
      </scroll-view>
      <view
        class="right-nav box-border h144rpx w64rpx flex flex-shrink-0 flex-col items-center justify-center px20rpx text-24rpx font-semibold"
        @click="show = true"
      >
        展开
        <image :src="`${StaticUrl}/xia.png`" class="mt20rpx h20rpx w20rpx" />
      </view>
      <wd-popup v-model="show" position="top" custom-style="border-radius:32rpx;">
        <view
          class="box-border bg-#F4FFD1 p24rpx"
          :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }"
        >
          <view class="mb24rpx mt24rpx text-28rpx font-semibold">
            全部一级分类
          </view>
          <view class="h400rpx overflow-y-scroll">
            <view class="grid grid-cols-5 box-border gap-x-24rpx gap-y-24rpx">
              <view
                v-for="item in classfiylist" :key="item.code"
                class="box-border h150rpx w114rpx flex flex-col items-center justify-center"
                @click="handleTopNavChange(item)"
              >
                <image
                  :src="item.icon"
                  :class="[topNavActive == item.code ? 'overflow-hidden border-solid border-[var(--them-color)] border-2rpx rounded-26rpx h88rpx w-88rpx' : 'h76rpx w-76rpx']"
                />
                <view
                  class="mt16rpx whitespace-nowrap text-nowrap text-22rpx"
                  :class="[topNavActive == item.code ? 'bg-[var(--them-color)] rounded-18rpx px-8rpx py2rpx text-white text-24rpx' : '']"
                >
                  {{ item.name }}
                </view>
              </view>
            </view>
          </view>
          <view class="mt24rpx w-full flex items-center justify-center" @click="show = false">
            <view class="mr8rpx text-24rpx">
              点击收起
            </view>
            <wd-icon name="arrow-down" size="18px" />
          </view>
        </view>
      </wd-popup>
    </view>
    <view class="wraper">
      <scroll-view class="w200rpx" :scroll-into-view-offset="-150" enable-passive scroll-with-animation scroll-y :scroll-into-view="`id${leftActive}`">
        <view v-for="item in categories" :id="`id${item.code}`" :key="item.code" :class="[item.code == leftActive ? 'bg-white' : '']" class="relative h100rpx flex items-center justify-center whitespace-nowrap text-28rpx" @click="handleChange({ value: item.code })">
          {{ item.name }}
          <view v-if="item.code == leftActive" class="absolute left-0 top-20rpx h60rpx w8rpx rounded-4rpx bg-[var(--them-color)]" />
        </view>
      </scroll-view>
      <view class="content relative">
        <view class="p20rpx">
          <image :src="`${StaticUrl}/class.png`" class="h144rpx w-full" @click="useGlobalToast().show('敬请期待 ！')" />
          <view class="my20rpx flex items-center justify-end rounded-16rpx bg-#F6F6F6 px20rpx py8rpx">
            <view class="mr40rpx text-24rpx">
              销量
            </view>
            <wd-sort-button v-model="sortClassBtn" :line="false" title="价格" />
          </view>
        </view>
        <scroll-view
          :lower-threshold="10"
          :refresher-triggered="isTopLoading" :scroll-top="scrollTop"
          :style="{ height: `calc(100vh - ${navHeight} - 700rpx)` }" enable-passive scroll-y scroll-anchoring refresher-enabled :throttle="false"
          :scroll-into-view="`class${goodsInTo}`"
          @refresherrefresh="handleSrollTop"
          @scrolltolower="handlScrollBottom"
        >
          <view v-if="productList.length" class="p20rpx">
            <view v-for="item in productList" :id="`class${item.prodId}`" :key="item.id" class="relative">
              <view class="flex" @click="handleGo(item)">
                <view class="mr20rpx h172rpx w172rpx flex-shrink-0 overflow-hidden rounded-16rpx bg-#F6F6F6">
                  <image :src="item.pic" lazy-load class="h-full w-full" />
                </view>
                <view class="flex-1">
                  <view class="text-left text-28rpx font-semibold">
                    <!-- <view v-for="i in 2" :key="i" class="mr5px inline-block">
                      <wd-tag type="primary">
                        新品{{ i }}
                      </wd-tag>
                    </view> -->
                    {{ item.prodName }}
                  </view>
                  <view class="text-22rpx text-#AAAAAA">
                    <view class="mt10rpx flex items-center">
                      <view>{{ item.spec }}</view>
                    </view>
                    <view class="mt6rpx">
                      已售 {{ item.soldNum }}+
                    </view>
                  </view>
                  <view class="flex items-center justify-between">
                    <view class="text-#FF4D3A font-semibold">
                      <text class="text-24rpx">
                        ￥
                      </text> <text class="text-36rpx">
                        {{ item.channelProdPrice }}
                      </text>
                    </view>
                    <view v-if="!item.num">
                      <view v-if="item.spuStock" @click.stop="handleAddCart($event, item)">
                        <image :src="`${StaticUrl}/cart-yes.png`" class="h52rpx w52rpx" />
                      </view>
                      <view v-else>
                        <image :src="`${StaticUrl}/cart-no.png`" class="h52rpx w52rpx" />
                      </view>
                    </view>
                    <view v-else>
                      <view class="flex items-center">
                        <image
                          :src="` ${StaticUrl}/sub-cart.png`"
                          class="h44rpx w44rpx"
                          @click.stop="handleSubCart($event, item)"
                        />
                        <view class="box-border h44rpx w84rpx flex items-center justify-center border border-#F0F0F0 border-solid text-24rpx text-#AAAAAA">
                          {{ item.num }}
                        </view>
                        <image
                          :src="` ${StaticUrl}/add-cart.png`"
                          class="h44rpx w44rpx"
                          @click.stop="handleAddCart($event, item)"
                        />
                      </view>
                    </view>
                  </view>
                </view>
              </view>
              <view class="line">
                <wd-divider color="#F0F0F0" />
              </view>
              <view v-if="!item.spuStock" class="absolute left-0 top-0 z-1 h-full w-full flex items-center bg-[rgba(255,255,255,.6)]">
                <view class="h172rpx w172rpx flex items-center justify-center">
                  <view class="h36rpx w112rpx flex items-center justify-center rounded-16rpx bg-[rgba(0,0,0,.6)] text-28rpx text-white">
                    已售罄
                  </view>
                </view>
              </view>
            </view>
            <!-- <wd-loadmore :state="goodsLoading" :loading-props="{ color: '#9ED605', size: 20 }" /> -->
          </view>

          <wd-status-tip v-else image="content" tip="暂无内容" />
          <view v-if="!productList.length" class="h-50vh" />
        </scroll-view>
        <view v-if="goodsLoading == 'loading' || isTopLoading" class="absolute left-0 top-0 z-10 h-full w-full flex items-center justify-center bg-[rgba(255,255,255,.6)]">
          <wd-loading color="#9ED605" :size="20" />
        </view>
      </view>
    </view>
    <view
      class="fixedShadow fixed bottom-60rpx left-0 z-100 box-border w-full flex items-center justify-between rounded-t-16rpx bg-white px24rpx pb60rpx pt10rpx"
    >
      <view class="ios w-full flex items-center justify-between">
        <view class="flex items-center" @click="cartPopup = true">
          <image :src="`${StaticUrl}/cart-lanzi.png`" class="cart-box h100rpx w100rpx" />
        </view>
        <view class="flex items-center">
          <view class="flex items-center font-semibold">
            <view class="text-22rpx text-#222">
              总计：
            </view>
            <view class="flex items-baseline text-24rpx text-#FF4A39">
              ￥
              <text class="text-36rpx">
                {{ totalProduct?.price || '0.00' }}
              </text>
            </view>
          </view>
          <view class="ml20rpx w160rpx">
            <wd-button block size="large" @click="handlePay">
              结算
            </wd-button>
          </view>
        </view>
      </view>
    </view>
    <Zpopup v-model="cartPopup" :zindex="99">
      <view class="ios h800rpx overflow-y-scroll">
        <view class="p24rpx">
          <view
            v-for="item in cartList" :key="item.id" class="relative mt20rpx box-border flex items-center overflow-hidden rounded-16rpx bg-white p24rpx"
          >
            <view class="flex flex-1">
              <image
                :src="item.pic"
                class="h206rpx w200rpx flex-shrink-0"
                @click.stop="router.push({ name: 'xsb-goods', params: { id: String(item.prodId) } })"
              />
              <view class="ml20rpx flex-1">
                <view class="text-left text-28rpx font-semibold">
                  <!-- <view v-for="i in 2" :key="i" class="mr5px inline-block">
                        <wd-tag type="danger">
                          惊喜回馈
                        </wd-tag>
                      </view> -->
                  {{ item.skuName }}
                </view>
                <view class="mt14rpx text-24rpx text-#AAAAAA">
                  规格：{{ item.spec }}
                </view>
                <view class="mt14rpx flex items-center justify-between">
                  <view class="text-36rpx text-#FF4A39 font-semibold">
                    ￥{{ item.price }}
                  </view>
                  <!-- <wd-input-number v-model="item.num" disable-input @change="handleChangeNum($event, item)" /> -->
                  <view v-if="item.shopSkuStocks !== '0' && item.isDelete !== '1'" class="flex items-center">
                    <image
                      :src="` ${StaticUrl}/sub-cart.png`"
                      class="h44rpx w44rpx"
                      @click.stop="handleSub(item)"
                    />
                    <view class="box-border h44rpx w84rpx flex items-center justify-center border border-#F0F0F0 border-solid text-24rpx text-#AAAAAA">
                      {{ item.num }}
                    </view>
                    <image
                      :src="` ${StaticUrl}/add-cart.png`"
                      class="h44rpx w44rpx"
                      @click.stop="handleAdd(item)"
                    />
                  </view>
                </view>
              </view>
            </view>
            <view v-if="item.shopSkuStocks == '0' || item.isDelete == '1'" class="absolute left-0 top-0 z-1 h-full w-full bg-[rgba(255,255,255,.6)]">
              <view class="relative w-full flex items-center justify-center">
                <view class="rounded-16rpx bg-[rgba(0,0,0,.5)] p20rpx text-white">
                  {{ item.shopSkuStocks == '0' ? '商品已售罄' : '商品已删除' }}
                </view>
                <view class="absolute bottom-20rpx right-20rpx">
                  <wd-button @click="handleDelCartGoods(item)">
                    删除商品
                  </wd-button>
                </view>
              </view>
            </view>
          </view>
        </view>
        <wd-status-tip v-if="!cartList.length" image="content" tip="暂无内容" />

        <view class="h320rpx" />
      </view>
    </Zpopup>
    <selectSku v-model:show="selectGoods" v-model:sku-id="selectSkuId" v-model:select-goods-num="SelectGoodsNum" :goods-info="goodsInfo!">
      <template #footer>
        <view class="box-border w-full flex items-center justify-between py20rpx">
          <view class="w-48%">
            <wd-button hairline plain block @click="selectGoods = false">
              取消
            </wd-button>
          </view>
          <view class="w-48%">
            <wd-button block @click="handleSkuAddCart">
              加入购物车
            </wd-button>
          </view>
        </view>
      </template>
    </selectSku>
    <view v-if="showball" class="ball">
      <image :src="`${StaticUrl}/cart-yes.png`" class="cart-img h52rpx w52rpx" />
    </view>
  </view>
</template>

<style scoped lang="scss">
.right-nav {
  background: linear-gradient(180deg, #FAFFEC 0%, #F6FFDE 11%, #E7FFA5 100%);
  box-shadow: -10rpx 0rpx 12rpx 2rpx rgba(0, 0, 0, 0.07);
}
.fixedShadow{
    box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.05);
}

.wraper {
  display: flex;
  height: calc(100vh - var(--window-top) - v-bind(navHeight) - 390rpx - var(--window-bottom));
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom) - v-bind(navHeight) - 390rpx - var(--window-bottom));
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom) - v-bind(navHeight) - 390rpx - var(--window-bottom));
}

.content {
  flex: 1;
  background: #fff;

}

@keyframes moveX {
  to {
    transform: translateX(v-bind(x));
  }
}

@keyframes moveY {
  to {
    transform: translateY(v-bind(y));
  }
}

.ball {
  position: fixed;
  z-index: 80;
  left: v-bind(left);
  top: v-bind(top);
  animation: moveX .5s linear forwards;
}

.cart-img {
  animation: moveY .5s cubic-bezier(1,-1.26,1,1) forwards;
}
</style>