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

<script setup lang="ts">
import { StaticUrl } from '@/config'
import router from '@/router'
import { useSmqjhCartStore } from '@/store/cart'

const emit = defineEmits(['changeTab'])

const { cartList, isCartAllChecked, totalProduct } = storeToRefs(useSmqjhCartStore())
const cartStore = useSmqjhCartStore()

watch(() => cartList.value, async () => {
  cartStore.getCartTotalPrice()
}, {
  deep: true,
})
onMounted(async () => {
  if (isCartAllChecked.value) {
    const ids = cartList.value.filter(it => it.allGoods.length)
    if (ids.length) {
      const id = ids[0].allGoods.join(',')
      const res = await useSmqjhCartStore().getCartAddGoodsPrice(id)
      totalProduct.value = res
    }
  }
})
</script>

<template>
  <view class="page-xsb">
    <wd-navbar
      title="购物车" custom-style="background-color:transparent !important" :bordered="false" :z-index="99"
      safe-area-inset-top fixed
    />
    <view class="xsb-linear h406rpx" />
    <view class="-mt220rpx">
      <view class="content px24rpx">
        <scroll-view scroll-y class="content">
          <view v-for="shop in cartList" :key="shop.shopId" class="mb24rpx rounded-16rpx bg-white px24rpx pb18rpx pt28rpx">
            <wd-checkbox v-model="shop.AllShopGoods" size="large" @change="cartStore.cartStoreAllChecked($event, shop)">
              <view class="text-28rpx font-semibold">
                {{ shop.shopName }}
              </view>
            </wd-checkbox>
            <view class="mt20rpx h2rpx w-full bg-#F0F0F0" />
            <wd-checkbox-group v-model="shop.allGoods" size="large" @change="cartStore.cartGoodsChecked($event, shop)">
              <view
                v-for="item in shop.skuList" :key="item.id" class="relative mt20rpx flex items-center"
              >
                <view class="mr20rpx h32rpx w32rpx">
                  <wd-checkbox :model-value="item.id" />
                </view>
                <view class="flex flex-1">
                  <view class="relative">
                    <image
                      :src="item.pic"
                      class="h206rpx w200rpx flex-shrink-0"
                      @click.stop="router.push({ name: 'xsb-goods', params: { id: String(item.prodId) } })"
                    />
                    <image
                      :src="`${StaticUrl}/xbs-shui-cart.png`"
                      class="absolute left-0 top-0 h206rpx w200rpx flex-shrink-0"
                    />
                  </view>
                  <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 class="flex items-center">
                        <image
                          :src="` ${StaticUrl}/sub-cart.png`"
                          class="h44rpx w44rpx"
                          @click.stop="cartStore.cartSubGoods(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="cartStore.cartAddGoods(item)"
                        />
                      </view>
                    </view>
                  </view>
                </view>
                <view v-if="item.shopSkuStocks == '0'" class="absolute left-0 top-0 z-1 h-full w-full flex items-center justify-center bg-[rgba(255,255,255,.6)]">
                  <view class="rounded-16rpx bg-[rgba(0,0,0,.5)] p20rpx text-white">
                    商品已售罄
                  </view>
                </view>
                <view v-if="item.isDelete == '1'" class="absolute left-0 top-0 z-1 h-full w-full flex items-center justify-center bg-[rgba(255,255,255,.6)]">
                  <view class="rounded-16rpx bg-[rgba(0,0,0,.5)] p20rpx text-white">
                    商品已删除
                  </view>
                </view>
              </view>
            </wd-checkbox-group>
          </view>

          <view v-if="!cartList.length" class="box-border w-full flex items-center justify-center">
            <view class="mt220rpx flex flex-col items-center">
              <image :src="`${StaticUrl}/cart.png`" class="h110rpx w110rpx" />
              <view class="mb20rpx mt20rpx text-24rpx">
                你还没有添加商品哦~
              </view>
              <wd-button plain @click="emit('changeTab')">
                去逛逛
              </wd-button>
            </view>
          </view>
          <view class="h100rpx" />
        </scroll-view>
      </view>
    </view>
    <view v-if="cartList.length" class="fixedShadow fixed bottom-60rpx left-0 z-99 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">
          <image
            :src="`${StaticUrl}/cart-lanzi.png`"
            class="h100rpx w100rpx"
          />
          <view class="ml16rpx flex items-center">
            <wd-checkbox v-model="isCartAllChecked" size="large" @change="cartStore.cartAllChecked">
              全选
            </wd-checkbox>
            <view class="ml10rpx text-24rpx text-#FF4A39" @click="cartStore.cartDeleteGoods">
              删除
            </view>
          </view>
        </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="cartStore.cartOrderConfirm">
              结算
            </wd-button>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped lang="scss">
.content {
  height: calc(100vh - var(--window-top) - 400rpx);
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom) - 400rpx);
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom) - 400rpx);
}
.fixedShadow{
    box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0,0,0,0.05);
}
</style>