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 { abc } from '../../core/libs/pngs'
import {
  getAppMaterials,
  getBanners,
  getByDictType,
  getMaterials,
  getBannerLogo,
} 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 { useRouter } from '../../core/utils/router'
import { handleCall, openLocation } from '../../core/utils/common'
import { NetImages } from '@/core/libs/net-images'

const searchParams = ref({
  manageBrandSet: [],
  manageTypeSet: [],
})
const query = computed(() => {
  return {
    manageBrandSet: searchParams.value.manageBrandSet.join(','),
    manageTypeSet: searchParams.value.manageTypeSet.join(','),
  }
})
const translateType = ref<string>('')
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: [] },
)
// 经营品牌 materialsManageBrand
const { data: materialsManageBrand, run: setMaterialsManageBrand } = useRequest(
  () => getByDictType(DictType.materialsManageBrand),
  { initialData: [] },
)
const { data: materials, run: setMaterials } = useRequest(() => getMaterials(query.value), {
  initialData: {},
})
const { data: banners, run: setBanners } = useRequest(
  () => getBanners({ mode: BannerMode.Material }),
  { initialData: [] },
)
const { data: bannersLogo, run: setBannersLogo } = useRequest(
  () => getBannerLogo({ modeType: BannerMode.Cooperation }),
  { 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 handleTranslateType = (value: string) => {
  if (translateType.value === value) {
    translateType.value = ''
  } else {
    translateType.value = value
  }
}
const handleMenuItemClick = ({ path }: any) => {
  router.push(path)
}
const toDetail = (id: number) => {
  uni.navigateTo({
    url: `/pages/material/detail/index?id=${id}`,
  })
}
const resetSearch = () => {
  searchParams.value = {
    manageBrandSet: [],
    manageTypeSet: [],
  }
  translateType.value = ''
  setMaterials()
}
const submitSearch = () => {
  setMaterials()
}
onMounted(async () => {
  await setMaterialDealerData()
  console.log(materialDealerData.value)

  await Promise.all([
    setMaterialBrandTypes(),
    setMaterialsManageBrand(),
    setMaterialOperationTypes(),
    setBanners(),
    setBannersLogo(),
    setMaterials(),
  ])

  console.log('setBannersLogo', bannersLogo.value)
})
</script>
<template>
  <view class="">
    <view class="bg-black w-full pos-relative aspect-[1.26/1]">
      <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> -->
      <div class="mx-14px py-3.5 bg-[#fff] rounded-2xl">
        <div class="text-center text-sm font-bold text-black/85 mb-3.5">合作商家</div>
        <div class="px-3.5 grid grid-cols-2 gap-x-2.5 gap-y-4">
          <wd-img
            width="100%"
            height="30"
            src="https://image.zhuchaohui.com/zhucaohui/e9352960e272c774da6aa8618691b3bbdbaa5b906c9c4ef2513db2695435a713.jpg"
          ></wd-img>
          <wd-img
            width="100%"
            height="30"
            src="https://image.zhuchaohui.com/zhucaohui/e9352960e272c774da6aa8618691b3bbdbaa5b906c9c4ef2513db2695435a713.jpg"
          ></wd-img>
        </div>
      </div>
      <div class="text-black/85 mx-14px">
        <div class="flex items-center justify-between py-3.5">
          <div class="text-xl">积分商家</div>
          <div class="text-sm text-black/65 flex items-center px-2.5">
            <div
              class="w-100px text-right flex items-center justify-end"
              @click="handleTranslateType('brandType')"
            >
              <div
                :class="[
                  translateType === 'brandType' || searchParams.manageBrandSet.length > 0
                    ? 'color-[#0CBE7D]'
                    : '',
                ]"
              >
                品牌
              </div>
              <wd-icon
                :color="
                  translateType === 'brandType' || searchParams.manageBrandSet.length > 0
                    ? '#0CBE7D'
                    : ''
                "
                :name="
                  translateType === 'brandType' || searchParams.manageBrandSet.length > 0
                    ? 'caret-down-small'
                    : 'caret-up-small'
                "
                size="14px"
              ></wd-icon>
            </div>
            <div
              class="w-100px text-right flex items-center justify-end"
              @click="handleTranslateType('manageType')"
            >
              <div
                :class="[
                  translateType === 'manageType' || searchParams.manageTypeSet.length > 0
                    ? 'color-[#0CBE7D]'
                    : '',
                ]"
              >
                类型
              </div>
              <wd-icon
                :color="
                  translateType === 'manageType' || searchParams.manageTypeSet.length > 0
                    ? '#0CBE7D'
                    : ''
                "
                :name="
                  translateType === 'manageType' || searchParams.manageTypeSet.length > 0
                    ? 'caret-down-small'
                    : 'caret-up-small'
                "
                size="14px"
              ></wd-icon>
            </div>
          </div>
        </div>
        <!-- 查询条件 -->
        <div
          class="rounded-xl bg-[#fff] overflow-hidden ease-in-out transition-property-[height] duration-300"
          :class="translateType ? 'h-auto' : 'h-0'"
          v-if="translateType"
        >
          <template v-if="translateType === 'brandType'">
            <wd-checkbox-group v-model="searchParams.manageBrandSet" cell shape="button">
              <wd-checkbox
                v-for="it in materialsManageBrand"
                checked-color="#0CBE7D"
                :key="it.value"
                :modelValue="it.value"
              >
                {{ it.label }}
              </wd-checkbox>
            </wd-checkbox-group>
          </template>
          <template v-else>
            <wd-checkbox-group v-model="searchParams.manageTypeSet" cell shape="button">
              <wd-checkbox
                v-for="it in materialOperationTypes"
                checked-color="#0CBE7D"
                :key="it.value"
                :modelValue="it.value"
              >
                {{ it.label }}
              </wd-checkbox>
            </wd-checkbox-group>
          </template>

          <!-- 确定按钮 -->
          <div class="flex items-center justify-between pb-20px pt-10px">
            <wd-button plain type="success" custom-class="h-38px! w-154px!" @click="resetSearch">
              重置
            </wd-button>
            <wd-button type="success" custom-class="h-38px! w-154px!" @click="submitSearch">
              确认
            </wd-button>
          </div>
        </div>
      </div>
      <div class="px-3.5 pb-3.5">
        <template v-for="([key, it], i) in Object.entries(materials)" :key="i">
          <div class="flex items-center gap-2 py-4">
            {{ key.toString() }}
          </div>
          <div class="grid grid-cols-2 gap-x-2.5 gap-y-4">
            <Card class="h-full" v-for="item in it" :key="item.id">
              <div class="flex flex-col items-center" @click="toDetail(item.id)">
                <wd-img
                  width="78"
                  height="78"
                  custom-class="border border-[#f2f2f2] border-solid rounded-full overflow-hidden"
                  :src="item.logoUrl"
                ></wd-img>
                <div
                  class="my-4 text-black/90 text-base font-normal font-['PingFang_SC'] leading-[10.18px]"
                >
                  {{ item.materialsName }}
                </div>
                <div
                  class="mb-4 text-black/60 text-sm font-normal font-['PingFang_SC'] leading-[10.18px]"
                >
                  <!-- 进口品牌 -->
                  {{
                    (item.brandType,
                    materialBrandTypes.find(({ value }) => value === String(item.brandType))?.label)
                  }}
                  |
                  {{
                    materialOperationTypes
                      .filter(({ value }) => item.manageType.includes(Number.parseInt(value)))
                      .map((i) => i.label)?.[0]
                  }}
                </div>
                <div @click.stop>
                  <wd-button
                    size="small"
                    custom-class="my-4"
                    @click.stop="() => ((dealerPanelState = true), (currentDeraler = item))"
                  >
                    联系商家
                  </wd-button>
                </div>
                <div
                  class="text-black/30 text-xs font-normal font-['PingFang_SC'] leading-[10.18px]"
                >
                  {{ item.virtualArrival || item.cumulativeStoreNum || 0 }}次到店打卡
                </div>
              </div>
            </Card>
          </div>
        </template>
        <template v-if="Object.keys(materials).length === 0">
          <div class="flex-grow flex flex-col justify-center">
            <wd-status-tip :image="NetImages.NotContent" tip="暂无内容"></wd-status-tip>
          </div>
        </template>
      </div>
    </view>

    <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;
}
:deep(.wd-checkbox__btn-check) {
  display: none !important;
}
:deep(.wd-checkbox.is-button.is-checked .wd-checkbox__label) {
  background-color: rgba($color: #0cbe7d, $alpha: 0.06);
}
</style>