designer-hub/packages/app/src/pages/material/index.vue

<route lang="json5">
{ layout: 'tabbar', style: { navigationBarTitleText: '材料', navigationStyle: 'custom' } }
</route>

<script setup lang="ts">
import Card from '@/components/card.vue'
import SectionHeading from '@/components/section-heading.vue'
import { abc } from '../../core/libs/pngs'
import { getAppMaterials, getBanners, getByDictType, getMaterials } from '../../core/libs/requests'
import { close, phone } from '../../core/libs/svgs'
import { BannerMode, DictType, MaterialDealer, MaterialsList } from '../../core/libs/models'
import routerIcon from '@designer-hub/assets/src/assets/svgs/router'
import Banner from '@/pages/home/components/banner.vue'
// import materialDealers from '@designer-hub/assets/src/libs/assets/materialDealers'
import { useRouter } from '../../core/utils/router'
import PageHelperEvo from '@/components/page-helper-evo.vue'
import { handleCall, openLocation } from '../../core/utils/common'

const router = useRouter()
const { data: materialDealerData, run: setMaterialDealerData } = useRequest(
  () => getAppMaterials(),
  { initialData: [] },
)
const { data: materialOperationTypes, run: setMaterialOperationTypes } = useRequest(
  () => getByDictType(DictType.memberMaterialsOperationType),
  { initialData: [] },
)
const { data: materialBrandTypes, run: setMaterialBrandTypes } = useRequest(
  () => getByDictType(DictType.memberMaterialsBrandType),
  { initialData: [] },
)
const { data: banners, run: setBanners } = useRequest(
  () => getBanners({ mode: BannerMode.Material }),
  { initialData: [] },
)
const dealerPanelState = ref(false)
const currentDeraler = ref<MaterialDealer>()
const pieces = ref([
  {
    title: '材料小课堂',
    desc: '全方位了解',
    icon: abc,
    gridItemClass: 'col-start-1 row-start-1',
    path: '/pages/material/mini-class/index',
  },
  {
    title: '推荐材料商',
    desc: '优选推荐商',
    icon: 'https://image.zhuchaohui.com/zhucaohui/86236d61c75904763cd1247db239b25fa2d8cb8222e4575d29581f58e5d69036.png',
    gridItemClass: 'col-start-2 row-start-1',
    path: '/pages/material/recommend/index',
    isMore: false,
  },
  // {
  //   title: '积分计算机',
  //   desc: '积分小帮手',
  //   icon: calculator,
  //   gridItemClass: 'col-start-2 row-start-1',
  //   path: '/pages/material/calculator/index',
  // },
  // {
  //   title: '推荐材料商',
  //   desc: '我们将优先洽谈大家推荐的材料商',
  //   icon: materialDealers,
  //   gridItemClass: 'col-start-1 col-end-3 row-start-2',
  //   isMore: true,
  //   path: '/pages/material/recommend/index',
  // },
])
const current = ref<number>(0)
const swiperList = computed(() => banners.value.map((it) => it.bannerImgUrl))
const materialsByBrandLevel = ref<{ list: MaterialDealer[] }[]>([])
const handleMenuItemClick = ({ path }: any) => {
  router.push(path)
}
const toDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/material/detail/index?id=${id}`,
  })
}
function handleClick(e) {
  console.log(e)
}
function onChange(e) {
  console.log(e)
}
onMounted(async () => {
  await setMaterialDealerData()
  console.log(materialDealerData.value)

  await Promise.all([setMaterialBrandTypes(), setMaterialOperationTypes(), setBanners()])
  // const reqs = data.value.map((it) =>
  //   getMaterials({ brandLevel: it.value }).then(({ data }) => data),
  // )
  // materialsByBrandLevel.value = await Promise.all(reqs)
  // console.log(materialsByBrandLevel.value)
  // const res = await getAppMaterials()
  // console.log(res)
})
</script>
<template>
  <view class="">
    <view class="bg-black w-full pos-relative aspect-[1.26/1]">
      <!-- <wd-img
        width="100%"
        height="100%"
        src="https://image.zhuchaohui.com/zhucaohui/f866f4f72392e8f4627d8f5d6628739ad7f0907d3703139e7cdbcb999b803dfe.jpg"
      /> -->
      <!-- <wd-swiper
        custom-class="rounded-2xl overflow-hidden aspect-[1.26/1]"
        width="100%"
        height="100%"
        :list="swiperList"
        autoplay
        v-model:current="current"
        :indicator="{ type: 'dots-bar' } as any"
        @click="handleClick"
        @change="onChange"
      ></wd-swiper> -->
      <Banner
        :mode="BannerMode.Material"
        aspect="1.26/1"
        customIndicatorClass="customIndicatorClass"
      ></Banner>
    </view>
    <view class="bg-[#f5f5f5] relative bottom-4 rounded-t-2xl py-1">
      <div class="my-6 grid grid-cols-2 grid-gap-3.5 mx-3.5">
        <template v-for="it of pieces" :key="it.title">
          <div :class="it.gridItemClass" @click="handleMenuItemClick(it)">
            <card custom-class="flex justify-between items-center gap-2">
              <view class="flex items-end justify-end">
                <wd-img :src="it.icon" :width="42" :height="42"></wd-img>
              </view>
              <div class="flex-1 flex flex-col justify-around h-full">
                <div
                  class="text-black/80 text-base font-normal font-['PingFang_SC'] leading-[10.18px]"
                >
                  {{ it.title }}
                </div>
                <div
                  class="mt-1 text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
                >
                  {{ it.desc }}
                </div>
              </div>
              <div v-if="it.isMore" class="mr--4">
                <wd-button
                  custom-class="text-black/40!"
                  type="icon"
                  icon="arrow-right"
                  icon-color=""
                ></wd-button>
              </div>
            </card>
          </div>
        </template>
      </div>

      <!-- <template v-for="({ brandLevelName, materialsList }, i) in materialDealerData" :key="i">
        <SectionHeading :title="brandLevelName" custom-class="mx-3.5"></SectionHeading>
      </template> -->
      <SectionHeading :title="'积分商家'" custom-class="mx-3.5"></SectionHeading>
      <PageHelperEvo :request="getMaterials" :query="{}">
        <template #default="{ source }">
          <div class="my-6 px-3.5 grid grid-cols-2 gap-x-2.5 gap-y-4">
            <template v-for="(it, i) in source.list" :key="i">
              <div class="" @click="toDetail(it.id)">
                <Card class="h-full">
                  <div class="flex flex-col items-center">
                    <wd-img
                      width="78"
                      height="78"
                      custom-class="border border-[#f2f2f2] border-solid rounded-full overflow-hidden"
                      :src="it.logoUrl"
                    ></wd-img>
                    <div
                      class="my-4 text-black/90 text-base font-normal font-['PingFang_SC'] leading-[10.18px]"
                    >
                      {{ it.materialsName }}
                    </div>
                    <div
                      class="mb-4 text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]"
                    >
                      <!-- 进口品牌 -->
                      {{
                        (it.brandType,
                        materialBrandTypes.find(({ value }) => value === String(it.brandType))
                          ?.label)
                      }}
                      |
                      {{
                        materialOperationTypes.find(({ value }) => value === String(it.manageType))
                          ?.label
                      }}
                    </div>
                    <div @click.stop>
                      <wd-button
                        size="small"
                        custom-class="my-4"
                        @click.stop="() => ((dealerPanelState = true), (currentDeraler = it))"
                      >
                        联系商家
                      </wd-button>
                    </div>
                    <div
                      class="text-black/30 text-xs font-normal font-['PingFang_SC'] leading-[10.18px]"
                    >
                      {{ it.virtualArrival || it.cumulativeStoreNum || 0 }}次到店打卡
                    </div>
                  </div>
                </Card>
              </div>
            </template>
          </div>
        </template>
      </PageHelperEvo>
    </view>

    <!-- <wd-action-sheet v-model="dealerPanelState">
      <div class="relative absolute">
        <div class="absolute top--4">x</div>
      </div>
      <view style="padding: 15px 15px 150px 15px">内容</view>
    </wd-action-sheet> -->
    <wd-overlay :show="dealerPanelState" @click="dealerPanelState = false">
      <view class="wrapper flex flex-col justify-end h-full">
        <div class="w-full flex justify-end mb-4">
          <div class="mr-3.5">
            <wd-button type="text" custom-class="w-8! h-8! p-0!" size="small">
              <wd-img :src="close" width="28" height="28" custom-class="vertical-bottom"></wd-img>
            </wd-button>
          </div>
        </div>
        <div class="bg-neutral-100 rounded-tl-2xl rounded-tr-2xl p-3.5" @click.stop="">
          <div class="flex flex-col">
            <template
              v-for="(
                { shopAddr, shopName, shopContactPhone, ...shop }, i
              ) in currentDeraler?.shopList"
              :key="i"
            >
              <div class="bg-white rounded-2.5 p-3.5 flex items-center">
                <div class="text-black/40 flex-1 border-r-2 border-r-[#f6f6f6] border-r-solid pr-4">
                  <div
                    class="text-black/90 text-lg font-normal font-['PingFang_SC'] leading-normal"
                  >
                    {{ shopName }}
                  </div>
                  <div>
                    <wd-icon name="location" size="15"></wd-icon>
                    <span
                      class="text-black/40 text-xs font-normal font-['PingFang_SC'] leading-normal"
                    >
                      {{ shopAddr }}
                    </span>
                  </div>
                </div>
                <wd-button
                  type="text"
                  size="small"
                  custom-class=" bg-[#f2f2f2]! p-0! ml-4"
                  @click="handleCall(shopContactPhone)"
                >
                  <wd-img width="28" height="28" :src="phone"></wd-img>
                </wd-button>
                <wd-button
                  type="text"
                  size="small"
                  custom-class=" bg-[#f2f2f2]! p-0! ml-4"
                  @click="
                    openLocation({
                      latitude: shop.longitude,
                      longitude: shop.latitude,
                      name: shopName,
                      address: shopAddr,
                    })
                  "
                >
                  <wd-img width="28" height="28" :src="routerIcon"></wd-img>
                </wd-button>
              </div>
            </template>
          </div>
        </div>
      </view>
    </wd-overlay>
  </view>
</template>

<style lang="scss">
:deep(.customIndicatorClass) {
  bottom: 80rpx !important;
}
</style>