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, calculator } from '../../core/libs/pngs'
import { getAppMaterials, getBanners, getByDictType } from '../../core/libs/requests'
import { close, phone } from '../../core/libs/svgs'
import { BannerMode, DictType, MaterialDealer, MaterialsList } from '../../core/models/moment'
import router from '@designer-hub/assets/src/assets/svgs/router'
import Banner from '../home/components/banner.vue'
import materialDealers from '@designer-hub/assets/src/libs/assets/materialDealers'

const { data: materialDealerData, run: setMaterialDealerData } = useRequest(
  () => getAppMaterials(),
  { initialData: [] },
)
const { data, run } = useRequest(() => getByDictType(DictType.memberMaterialsBrandLevel))
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<MaterialsList>()
const pieces = ref([
  {
    title: '材料小课堂',
    desc: '全方位了解',
    icon: abc,
    gridItemClass: 'col-start-1 row-start-1',
    path: '/pages/material/mini-class/index',
  },
  {
    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) => {
  uni.navigateTo({ url: path })
}
const toDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/material/detail/index?id=${id}`,
  })
}
const handleCall = (phone: string) => {
  uni.makePhoneCall({ phoneNumber: phone })
}
function handleClick(e) {
  console.log(e)
}
function onChange(e) {
  console.log(e)
}
const handleGo = ({ name, address }) => {
  uni.openLocation({
    latitude: 34.2593042818515,
    longitude: 109.01031190070307,
    address,
    name,
    success: function () {
      console.log('success')
    },
    fail: (fail) => {
      console.log(fail)
    },
  })
}
onMounted(async () => {
  await run()
  await setMaterialDealerData()
  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"></Banner>
    </view>
    <view class="bg-[#f6f6f6] 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, pointsRate, materialsList }, i) in materialDealerData"
        :key="i"
      >
        <SectionHeading
          :title="brandLevelName"
          :subtitle="`积分兑换比例 ${pointsRate}%`"
          custom-class="mx-3.5"
        ></SectionHeading>
        <div class="my-6 px-3.5 overflow-x-auto whitespace-nowrap space-x-3.5">
          <template v-for="(it, index) in materialsList" :key="index">
            <div
              class="inline-block"
              :style="{ width: 'calc(50% - 14rpx)' }"
              @click="toDetail(it.id)"
            >
              <Card>
                <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 || 0 }}次到店打卡
                  </div>
                </div>
              </Card>
            </div>
          </template>
        </div>
      </template>
    </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 }, 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">
                  <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="handleGo({ name: shopName, address: shopAddr })"
                >
                  <wd-img width="28" height="28" :src="router"></wd-img>
                </wd-button>
              </div>
            </template>
          </div>
        </div>
      </view>
    </wd-overlay>
  </view>
</template>

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