|
|
@@ -4,18 +4,33 @@
|
|
|
|
|
|
<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 {
|
|
|
+ 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 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'
|
|
|
+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(),
|
|
|
@@ -29,10 +44,22 @@ 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([
|
|
|
@@ -70,6 +97,13 @@ const pieces = ref([
|
|
|
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)
|
|
|
}
|
|
|
@@ -78,45 +112,36 @@ const toDetail = (id: number) => {
|
|
|
url: `/pages/material/detail/index?id=${id}`,
|
|
|
})
|
|
|
}
|
|
|
-function handleClick(e) {
|
|
|
- console.log(e)
|
|
|
+const resetSearch = () => {
|
|
|
+ searchParams.value = {
|
|
|
+ manageBrandSet: [],
|
|
|
+ manageTypeSet: [],
|
|
|
+ }
|
|
|
+ translateType.value = ''
|
|
|
+ setMaterials()
|
|
|
}
|
|
|
-function onChange(e) {
|
|
|
- console.log(e)
|
|
|
+const submitSearch = () => {
|
|
|
+ setMaterials()
|
|
|
}
|
|
|
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)
|
|
|
+ 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]">
|
|
|
- <!-- <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"
|
|
|
@@ -159,68 +184,183 @@ onMounted(async () => {
|
|
|
<!-- <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.filter(({ value }) => it.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 = 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 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>
|
|
|
- </template>
|
|
|
+ <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>
|
|
|
- </PageHelperEvo>
|
|
|
+ <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-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">
|
|
|
@@ -290,4 +430,10 @@ onMounted(async () => {
|
|
|
: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>
|
