designer-hub/packages/app/src/pages/home/mall/index.vue

<route lang="json5">
{
  style: {
    navigationBarTitleText: '品质商城',
    navigationBarBackgroundColor: '#fff',
  },
}
</route>

<script setup lang="ts">
import TiltedButton from '@/components/tilted-button.vue'
import Product from './components/product.vue'
import { shoppingBag } from '@designer-hub/assets/src/assets/svgs/index'
import { useRouter } from '../../../core/utils/router'
import {
  getBanners,
  getProductCategories,
  getProductItemBuy,
  getProducts,
} from '../../../core/libs/requests'
import PageHelper from '@/components/page-helper.vue'
import { BannerMode } from '../../../core/libs/models'
import Banner from '../components/banner.vue'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'

const router = useRouter()
const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const { data: productCategories, run: setProductCategories } = useRequest(
  () => getProductCategories(),
  { initialData: [] },
)
const { data: banners, run: setBanners } = useRequest(() => getBanners({ mode: BannerMode.Mall }), {
  initialData: [],
})
const { data: carts, run: setCarts } = useRequest(
  () => getProductItemBuy({ userId: userInfo.value.userId }),
  { initialData: { list: [], total: 0 } },
)
const current = ref<number>(0)
const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
const categories = computed(() => productCategories.value.find(({ id }) => id === 1)?.children)
const category = ref()
const query = computed(() => ({
  oneCategory: category.value?.parentId,
  secondCategory: category.value?.id,
}))
const handleChange = async () => {
  setCarts()
}
onMounted(async () => {
  await setProductCategories()
  await setBanners()
  await setCarts()
  category.value = categories.value[0]
})
</script>

<template>
  <view class="bg-white flex-grow flex flex-col px-3.5 py-5.5 gap-5.5">
    <Banner :mode="BannerMode.Mall"></Banner>
    <div class="w-full inline-flex gap-2">
      <!-- <div><wd-button type="primary" size="small">GELATO专区</wd-button></div> -->
      <template v-for="(it, i) in categories" :key="i">
        <div>
          <wd-button
            :type="it.id === category?.id ? 'primary' : 'default'"
            :plain="it.id !== category?.id"
            size="small"
            @click="category = it"
          >
            {{ it.name }}
          </wd-button>
        </div>
      </template>
    </div>
    <PageHelper
      v-if="category"
      v-slot="{ data }"
      class="flex-grow flex flex-col"
      :request="getProducts"
      :query="query"
    >
      <!-- <wd-skeleton
        :row-col="[[{ width: 100, height: 100 }, , { width: 100, height: 100 }]]"
        :loading="true"
      > -->
      <div class="grid grid-cols-2 gap-2.5">
        <template v-for="(it, i) of data" :key="i">
          <Product :options="it" @change="handleChange"></Product>
        </template>
      </div>
      <!-- </wd-skeleton> -->
    </PageHelper>
    <BottomAppBar fixed>
      <div class="h-16 bg-white flex items-center justify-between px-3.5">
        <!-- <div> -->
        <!-- <wd-button type="text" size="small"> -->
        <wd-img :round="false" width="32" height="32" :src="shoppingBag"></wd-img>
        <!-- </wd-button> -->
        <!-- </div> -->
        <div @click="router.push('/pages/home/mall/shopping-cart/index')">
          <TiltedButton custom-class="text-center! items-center" size="large">
            <span
              class="h-[22px] text-white text-base font-normal font-['PingFang_SC'] leading-tight"
            >
              购物车
            </span>
            <span class="h-[22px] text-white text-sm font-normal font-['PingFang_SC']">
              <template v-if="carts.total">（已选{{ carts.total }}件）</template>
            </span>
          </TiltedButton>
        </div>
      </div>
    </BottomAppBar>
  </view>
</template>

<style scoped lang="scss"></style>