city-gather/src/subPack-xsb/cart/index.vue

<script setup lang="ts">
import { StaticUrl } from '@/config'
import xsbTabbar from '@/subPack-xsb/components/xsbTabbar/index.vue'

definePage({
  name: 'xsb-cart',
  islogin: false,
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '星闪豹购物车',
    disableScroll: true,
  },
})
const isAll = ref(false)
const selectCatrt = ref()
</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 class="rounded-16rpx bg-white px24rpx pb18rpx pt28rpx">
            <wd-checkbox v-model="isAll" size="large">
              <view class="text-28rpx font-semibold">
                市民请集合官方旗舰店
              </view>
            </wd-checkbox>
            <view class="mt20rpx h2rpx w-full bg-#F0F0F0" />
            <wd-checkbox-group v-model="selectCatrt" size="large">
              <view
                v-for="item in 10" :key="item" class="mt20rpx flex items-center"
              >
                <view class="mr20rpx h32rpx w32rpx">
                  <wd-checkbox model-value="jingmai" />
                </view>
                <view class="flex flex-1">
                  <image
                    :src="`${StaticUrl}/shu.png`"
                    class="h206rpx w200rpx flex-shrink-0"
                  />
                  <view class="ml20rpx">
                    <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>
                      秋季应季水果纯甜
                      柿子
                    </view>
                    <view class="mt14tpx text-24rpx text-#AAAAAA">
                      规格：5kg，盒
                    </view>
                    <view class="mt14rpx flex items-center justify-between">
                      <view class="text-36rpx text-#FF4A39 font-semibold">
                        ￥13.95
                      </view>
                      <wd-input-number />
                    </view>
                  </view>
                </view>
              </view>
            </wd-checkbox-group>
          </view>

          <view v-if="false" 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>
                去逛逛
              </wd-button>
            </view>
          </view>
          <view class="h100rpx" />
        </scroll-view>
      </view>
    </view>
    <view 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="isAll" size="large">
              全选
            </wd-checkbox>
            <view class="ml10rpx text-24rpx text-#FF4A39">
              删除
            </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">
                8.9
              </text>
            </view>
          </view>
          <view class="ml20rpx w160rpx">
            <wd-button block size="large">
              结算
            </wd-button>
          </view>
        </view>
      </view>
    </view>
    <xsbTabbar />
  </view>
</template>

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