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 { userMemberInfo } = storeToRefs(useUserStore())
const { cartList, isCartAllChecked, totalProduct } = storeToRefs(useSmqjhCartStore())
const cartStore = useSmqjhCartStore()
const priceDetailPopup = ref(false)

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">
        <view v-if="cartList.length" class="mb20rpx flex items-center justify-end">
          <view class="text-24rpx text-[#fff]" @click="cartStore.cartDeleteGoods">
            <wd-icon name="delete" size="24rpx" color="#fff" /> 清空购物车
          </view>
        </view>
        <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 }} <text class="text-24rpx text-#AAAAAA">
                  已选 {{ shop.allGoods.length }} 件<text v-if="shop.allGoods.length">
                    ，总重量约为 {{ totalProduct?.totalWeight || 0 }} kg
                  </text>
                </text>
              </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 v-if="userMemberInfo.active" class="flex items-center gap-20rpx">
                        <view class="text-36rpx text-[#FF4A39] font-semibold">
                          ￥{{ item.memberPrice }}
                        </view>
                        <view class="text-26rpx text-#AAAAAA line-through">
                          ￥{{ item.price }}
                        </view>
                      </view>
                      <view v-else 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">
              <i class="iconfont text-110rpx text-[var(--them-color)]">&#xe64d;</i>
              <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">
          <view class="flex items-center">
            <!-- <wd-badge :model-value="getTotalNum" :top="20"> -->
            <image :src="`${StaticUrl}/cart-lanzi.png`" class="h100rpx w100rpx" />
            <!-- </wd-badge> -->
          </view>
          <view class="ml40rpx">
            <view class="flex items-center">
              <view class="font-semibold">
                ￥ {{ totalProduct?.amount || 0 }}
              </view>
              <view v-if="totalProduct?.coupon" class="ml10rpx text-24rpx text-#FF4A39">
                共减￥{{ totalProduct?.coupon + (totalProduct?.memberDiscountAmount || 0) }}
              </view>
              <view v-if="totalProduct?.amount" class="ml10rpx flex items-center text-24rpx text-gray" @click="priceDetailPopup = !priceDetailPopup">
                明细 <view class="flex items-center" :class="[priceDetailPopup ? 'rotate-180' : '']">
                  <wd-icon name="arrow-up" size="24rpx" color="#aaa" />
                </view>
              </view>
            </view>
            <view class="mt10rpx text-24rpx text-gray">
              配送费：￥{{ totalProduct?.transfee || 0 }}
            </view>
          </view>
        </view>
        <view class="flex items-center">
          <view class="ml20rpx w160rpx">
            <wd-button block size="large" @click="cartStore.cartOrderConfirm">
              结算
            </wd-button>
          </view>
        </view>
      </view>
    </view>
    <!-- 价格明细弹窗 -->
    <Zpopup v-model="priceDetailPopup" :zindex="10" bg="#fff">
      <view class="ios box-border w-full px-40rpx pb-60rpx pt-36rpx">
        <view class="mb-40rpx text-center text-32rpx font-semibold">
          价格明细
        </view>
        <view class="flex items-center justify-between py-20rpx">
          <view class="text-30rpx font-semibold">
            商品合计
          </view>
          <view class="text-30rpx font-semibold">
            ￥{{ totalProduct?.amount }}
          </view>
        </view>
        <view class="flex items-center justify-between py-20rpx">
          <view class="text-28rpx text-#333">
            商品总价
          </view>
          <view class="text-28rpx text-#333">
            ￥{{ totalProduct?.price }}
          </view>
        </view>
        <template v-if="totalProduct?.coupon">
          <view class="flex items-center justify-between py-20rpx">
            <view class="text-28rpx text-#333">
              下单用券共减
            </view>
            <view class="text-28rpx text-#FF4A39 font-semibold">
              -￥{{ totalProduct?.coupon }}
            </view>
          </view>
          <view v-if="totalProduct?.activityName || totalProduct?.couponName" class="flex items-center justify-between pb-20rpx">
            <view class="text-24rpx text-#AAAAAA">
              {{ totalProduct?.activityName || totalProduct?.couponName }}
            </view>
            <view class="text-24rpx text-#AAAAAA">
              -￥{{ totalProduct?.coupon }}
            </view>
          </view>
        </template>
        <view v-if="totalProduct?.memberDiscountAmount" class="flex items-center justify-between py-20rpx">
          <view class="text-28rpx text-#333">
            {{ totalProduct?.memberBenefitDesc }}
          </view>
          <view class="text-28rpx text-#FF4A39 font-semibold">
            -￥{{ totalProduct?.memberDiscountAmount }}
          </view>
        </view>
        <view class="flex items-center justify-between py-20rpx">
          <view class="text-28rpx text-#333">
            配送费
          </view>
          <view class="text-28rpx text-#333">
            ￥{{ totalProduct?.transfee }}
          </view>
        </view>
      </view>
      <view class="h200rpx" />
    </Zpopup>
  </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>