city-gather/src/pages/cart/index.vue

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

import selectAddressTemplate from '@/subPack-smqjh/components/selectAddress/index.vue?async'

definePage({
  name: 'smqjh-cart',
  layout: 'tabbar',
  islogin: false,
  style: {
    navigationBarTitleText: '购物车',
    navigationStyle: 'custom',
    disableScroll: true,
  },
})
const { cartList, totalProduct } = storeToRefs(useSmqjhCartStore())
const { smqjhSelectedAddress } = storeToRefs(useUserStore())
const cartStore = useSmqjhCartStore()
const priceDetailPopup = ref(false)
const tab = ref(0)
const selectAddress = ref(false)
const navList = ref([
  { title: '全部', id: 1 },
  { title: '星闪豹', id: 2 },
  { title: '电影演出', id: 3 },
  // { title: '视频权益', id: 4 },
  // { title: '大牌点餐', id: 5 },
  { title: '加油', id: 6 },
  // { title: '酒店民宿', id: 7 },
  // { title: '代驾', id: 8 },
])

watch(() => cartList.value, async () => {
  cartStore.getCartTotalPrice()
}, {
  deep: true,
})

async function handleSelectAddress() {
  await useUserStore().checkLogin()
  selectAddress.value = true
}
</script>

<template>
  <view class="pages">
    <wd-navbar
      title="" custom-style="background-color:transparent !important" :bordered="false" :z-index="99"
      safe-area-inset-top fixed
    >
      <template #left>
        <view class="ml-10rpx flex items-center" @click.stop="handleSelectAddress">
          <view class="mr-20rpx text-36rpx font-semibold">
            购物车
          </view>
          <image :src="`${StaticUrl}/location-green.png`" class="h-33.8rpx w-29rpx" />
          <view class="ml-10rpx max-w-280rpx truncate text-32rpx text-[#222] font-semibold">
            {{ smqjhSelectedAddress?.city || '请选择地址' }}
          </view>
        </view>
      </template>
    </wd-navbar>
    <view class="xsb-linear h-406rpx" />
    <view class="-mt220rpx">
      <view class="flex items-center justify-between pb-16rpx">
        <view class="w-[85%]">
          <wd-tabs v-model="tab">
            <block v-for="tabs in navList" :key="tabs.id">
              <wd-tab :title="tabs.title" />
            </block>
          </wd-tabs>
        </view>
        <view class="guanli h-80rpx w-104rpx flex flex-shrink-0 items-center justify-center text-28rpx font-semibold">
          管理
        </view>
      </view>
      <scroll-view scroll-y class="content box-border px-24rpx">
        <view v-for="shop in cartList" :key="shop.shopId" class="mb-24rpx rounded-16rpx bg-white px-24rpx pb-18rpx pt-28rpx">
          <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="mt-20rpx h-2rpx 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 mt-20rpx flex items-center"
            >
              <view class="mr-20rpx h-32rpx w-32rpx">
                <wd-checkbox :model-value="item.id" />
              </view>
              <view class="flex flex-1">
                <image
                  :src="item.pic"
                  class="h-206rpx w-200rpx flex-shrink-0"
                  @click.stop="router.push({ name: 'xsb-goods', params: { id: String(item.prodId) } })"
                />
                <view class="ml-20rpx 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="mt-14rpx text-24rpx text-[#AAAAAA]">
                    规格：{{ item.spec }}
                  </view>
                  <view class="mt-14rpx 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="h-44rpx w-44rpx"
                        @click.stop="cartStore.cartSubGoods(item)"
                      />
                      <view class="box-border h-44rpx w-84rpx flex items-center justify-center border border-[#F0F0F0] border-solid text-24rpx text-[#AAAAAA]">
                        {{ item.num }}
                      </view>
                      <image
                        :src="` ${StaticUrl}/add-cart.png`"
                        class="h-44rpx w-44rpx"
                        @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)] p-20rpx 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)] p-20rpx 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="mt-220rpx flex flex-col items-center">
            <image :src="`${StaticUrl}/cart.png`" class="h-110rpx w-110rpx" />
            <view class="mb-20rpx mt-20rpx text-24rpx">
              你还没有添加商品哦~
            </view>
            <wd-button plain @click=" useTabbar().setTabbarItemActive('smqjh-home'), router.pushTab({ name: 'smqjh-home' })">
              去逛逛
            </wd-button>
          </view>
        </view>
        <view class="h-140rpx" />
      </scroll-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 px-24rpx pb-60rpx pt-10rpx">
      <view class="ios w-full flex items-center justify-between">
        <view class="flex items-center">
          <view class="flex items-center">
            <image :src="`${StaticUrl}/cart-lanzi.png`" class="h-100rpx w-100rpx" />
          </view>
          <view class="ml-40rpx">
            <view class="flex items-center">
              <view class="font-semibold">
                ￥ {{ totalProduct?.amount || 0 }}
              </view>
              <view v-if="totalProduct?.coupon" class="ml-10rpx text-24rpx text-[#FF4A39]">
                共减￥{{ totalProduct?.coupon }}
              </view>
              <view v-if="totalProduct?.amount" class="ml-10rpx text-24rpx text-gray" @click="priceDetailPopup = true">
                明细 <wd-icon name="arrow-up" size="24rpx" color="#aaa" />
              </view>
            </view>
            <view class="mt-10rpx text-24rpx text-gray">
              配送费：￥{{ totalProduct?.transfee || 0 }}
            </view>
          </view>
        </view>
        <view class="flex items-center">
          <view class="ml-20rpx w-160rpx">
            <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?.couponName" class="flex items-center justify-between pb-20rpx">
            <view class="text-24rpx text-[#AAAAAA]">
              {{ totalProduct?.couponName }}
            </view>
            <view class="text-24rpx text-[#AAAAAA]">
              -￥{{ totalProduct?.coupon }}
            </view>
          </view>
        </template>
        <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="h-200rpx" />
    </Zpopup>
    <selectAddressTemplate v-model="selectAddress" />
  </view>
</template>

<style scoped lang="scss">
.content {
  height: calc(100vh - var(--window-top) - 380rpx);
  height: calc(100vh - var(--window-top) - constant(safe-area-inset-bottom) - 380rpx);
  height: calc(100vh - var(--window-top) - env(safe-area-inset-bottom) - 380rpx);
}

.fixedShadow {
  box-shadow: 0rpx -6rpx 12rpx 2rpx rgba(0, 0, 0, 0.05);
}

.pages {
  :deep() {
    .wd-tabs {
      background: none !important;
    }

    .wd-tabs__nav {
      background: none !important;
    }
    .wd-tabs__nav-item-text{
      font-size: 28rpx  !important;
    }
  }
  .guanli{
    box-shadow: -10rpx 0rpx 12rpx 2rpx rgba(0,0,0,0.07);
  }
}
</style>