|
@@ -1,182 +0,0 @@
|
|
|
-<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, treaty } from '@/core/libs/pngs'
|
|
|
-import { getMaterialDealers } from '@/core/libs/requests'
|
|
|
-import { materialDealers, close, phone } from '@/core/libs/svgs'
|
|
|
-
|
|
|
-const { data, run } = useRequest(getMaterialDealers)
|
|
|
-const dealerPanelState = ref(false)
|
|
|
-const pieces = ref([
|
|
|
- {
|
|
|
- title: '材料小课堂',
|
|
|
- desc: '全方位了解',
|
|
|
- icon: abc,
|
|
|
- class: 'col-start-1 row-start-1',
|
|
|
- // iconSize: 102,
|
|
|
- },
|
|
|
- {
|
|
|
- title: '积分计算机',
|
|
|
- desc: '积分小帮手',
|
|
|
- icon: calculator,
|
|
|
- class: 'col-start-2 row-start-1',
|
|
|
- path: '/pages/material/calculator/index',
|
|
|
- // iconSize: 68,
|
|
|
- },
|
|
|
- {
|
|
|
- title: '推荐材料商',
|
|
|
- desc: '我们将优先洽谈大家推荐的材料商',
|
|
|
- icon: materialDealers,
|
|
|
- class: 'col-start-1 row-start-2 col-end-3',
|
|
|
- // iconSize: 44,
|
|
|
- isMore: true,
|
|
|
- path: '/pages/material/recommend/index',
|
|
|
- },
|
|
|
-])
|
|
|
-const handleMenuItemClick = ({ path }: any) => {
|
|
|
- uni.navigateTo({ url: path })
|
|
|
-}
|
|
|
-const toDetail = () => {
|
|
|
- uni.navigateTo({
|
|
|
- url: '/pages/material/detail/index',
|
|
|
- })
|
|
|
-}
|
|
|
-onMounted(() => {
|
|
|
- run()
|
|
|
-})
|
|
|
-</script>
|
|
|
-<template>
|
|
|
- <view class="">
|
|
|
- <view class="bg-black w-full pos-relative aspect-[1.26/1]">
|
|
|
- <wd-img custom-class="w-[375px] h-[297px]" src="https://via.placeholder.com/375x297" />
|
|
|
- <!-- <div
|
|
|
- class="w-[375px] h-[90px] bg-gradient-to-t from-black to-black/0 absolute left-0 bottom-0 w-full flex items-center"
|
|
|
- >
|
|
|
- <view class="mx-7">
|
|
|
- <wd-button plain custom-class="bg-transparent! border-white! text-white!">
|
|
|
- 02:30
|
|
|
- </wd-button>
|
|
|
- </view>
|
|
|
- </div> -->
|
|
|
- </view>
|
|
|
-
|
|
|
- <view class="bg-[#f6f6f6] relative bottom-4 rounded-t-2xl py-1">
|
|
|
- <div class="my-6 grid grid-gap-2.5 mx-3.5">
|
|
|
- <template v-for="it of pieces" :key="it.title">
|
|
|
- <card
|
|
|
- :custom-class="[it.class, 'flex justify-between items-center'].join(' ')"
|
|
|
- @click="handleMenuItemClick(it)"
|
|
|
- >
|
|
|
- <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>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- <SectionHeading title="自营品牌" custom-class="mx-3.5"></SectionHeading>
|
|
|
- <div class="my-6 flex px-1.75">
|
|
|
- <template v-for="(it, i) in data" :key="i">
|
|
|
- <Card custom-class="mx-1.75" :style="{ width: 'calc(50vw - 96rpx)' }" @click="toDetail">
|
|
|
- <div class="flex flex-col items-center">
|
|
|
- <wd-img
|
|
|
- width="78"
|
|
|
- height="78"
|
|
|
- custom-class="border border-[#f2f2f2] rounded-full overflow-hidden"
|
|
|
- :src="it.icon"
|
|
|
- ></wd-img>
|
|
|
- <div
|
|
|
- class="my-4 text-black/90 text-base font-normal font-['PingFang SC'] leading-[10.18px]"
|
|
|
- >
|
|
|
- IMOLA瓷砖
|
|
|
- </div>
|
|
|
- <div
|
|
|
- class="mb-4 text-black/60 text-sm font-normal font-['PingFang SC'] leading-[10.18px]"
|
|
|
- >
|
|
|
- 进口品牌 | 瓷砖
|
|
|
- </div>
|
|
|
- <wd-button size="small" custom-class="my-4" @click="dealerPanelState = true">
|
|
|
- 联系商家
|
|
|
- </wd-button>
|
|
|
- <div class="text-black/30 text-xs font-normal font-['PingFang SC'] leading-[10.18px]">
|
|
|
- {{ it.views }}次到店打卡
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </Card>
|
|
|
- </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 bg-amber/50 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="(it, i) in [{}]" :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"
|
|
|
- >
|
|
|
- 曲江新区店
|
|
|
- </div>
|
|
|
- <div>
|
|
|
- <wd-icon name="location" size="15"></wd-icon>
|
|
|
- <span
|
|
|
- class="text-black/40 text-xs font-normal font-['PingFang SC'] leading-normal"
|
|
|
- >
|
|
|
- 西安市曲江路精彩世家 387 号
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <wd-button type="text" size="small" custom-class=" bg-[#f2f2f2]! p-0! ml-4">
|
|
|
- <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">
|
|
|
- <wd-img width="28" height="28"></wd-img>
|
|
|
- </wd-button>
|
|
|
- </div>
|
|
|
- </template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </view>
|
|
|
- </wd-overlay>
|
|
|
- </view>
|
|
|
-</template>
|
|
|
-
|
|
|
-<style scoped lang="scss"></style>
|