deepblues
3 years ago
33 changed files with 741 additions and 71 deletions
|
After Width: | Height: | Size: 448 B |
|
After Width: | Height: | Size: 47 KiB |
|
After Width: | Height: | Size: 322 B |
|
After Width: | Height: | Size: 3.4 MiB |
|
After Width: | Height: | Size: 8.0 KiB |
|
After Width: | Height: | Size: 280 B |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 25 KiB |
|
After Width: | Height: | Size: 32 KiB |
|
After Width: | Height: | Size: 42 KiB |
|
After Width: | Height: | Size: 380 B |
|
After Width: | Height: | Size: 1.7 KiB |
|
After Width: | Height: | Size: 1.4 KiB |
|
After Width: | Height: | Size: 809 B |
|
After Width: | Height: | Size: 715 B |
|
After Width: | Height: | Size: 500 B |
@ -0,0 +1,60 @@ |
|||||
|
<template> |
||||
|
<transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut"> |
||||
|
<div class="global-masker" @click.self="handleClick"> |
||||
|
<div class="bg-img" @click.self="handleClick" /> |
||||
|
<slot class="mask-content"></slot> |
||||
|
</div> |
||||
|
</transition> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { ref } from 'vue' |
||||
|
defineProps({ |
||||
|
type: { |
||||
|
type: Number, |
||||
|
default: 0 |
||||
|
} |
||||
|
}) |
||||
|
const emit = defineEmits(['click']) |
||||
|
const flag = ref(true) |
||||
|
function handleClick() { |
||||
|
flag.value = false |
||||
|
const timerId = setTimeout(() => { |
||||
|
clearTimeout(timerId) |
||||
|
emit('click') |
||||
|
}, 20) |
||||
|
} |
||||
|
</script> |
||||
|
<style lang="scss" scoped> |
||||
|
.global-masker { |
||||
|
position: fixed; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
z-index: 9900; |
||||
|
background: rgb(0 0 0 / 40%); |
||||
|
animation-duration: 0.3s; |
||||
|
backdrop-filter: blur(10px); |
||||
|
.bg-img { |
||||
|
position: absolute; |
||||
|
z-index: 0; |
||||
|
// background: rgba(0, 0, 0, 0.3) url('@/assets/images/home/inner_bgNormal.jpg'); |
||||
|
width: 100vw; |
||||
|
height: 100vh; |
||||
|
// backdrop-filter: blur(30px); |
||||
|
filter: blur(0); |
||||
|
} |
||||
|
.blur-wrapper { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
right: 0; |
||||
|
bottom: 0; |
||||
|
left: 0; |
||||
|
z-index: 9901; |
||||
|
} |
||||
|
.mask-content { |
||||
|
z-index: 9902; |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -0,0 +1,332 @@ |
|||||
|
<template> |
||||
|
<transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut"> |
||||
|
<masker @click="close"> |
||||
|
<transition appear enter-active-class="animate__animated animate__fadeInUp" leave-active-class="animate__animated animate__zoomOut"> |
||||
|
<div class="shop-detail-wrapper"> |
||||
|
<!-- 图片 --> |
||||
|
<div class="carousel"> |
||||
|
<swiper |
||||
|
:autoplay="{ |
||||
|
delay: 5000 |
||||
|
}" |
||||
|
:observer="true" |
||||
|
:observe-parents="true" |
||||
|
:modules="modules" |
||||
|
:effect="'fade'" |
||||
|
:pagination="{ el: '.detail' }" |
||||
|
> |
||||
|
<swiper-slide v-for="(item, index) in shop.doorMaterialList" :key="index" class="slide"> |
||||
|
<img :src="item.search(config.sourceUrl) >= 0 ? item : config.sourceUrl + item" class="banner" /> |
||||
|
</swiper-slide> |
||||
|
</swiper> |
||||
|
<img v-if="!shop.doorMaterialList?.length" src="../../assets/images/nodata.svg" class="banner no-data" alt="" /> |
||||
|
<div class="swiper-pagination detail"></div> |
||||
|
</div> |
||||
|
<!-- logo --> |
||||
|
<div class="logo-wrapper"> |
||||
|
<img |
||||
|
v-if="shop.logoUrl" |
||||
|
class="shop-logo" |
||||
|
:src="shop.logoUrl.search(config.sourceUrl) >= 0 ? shop.logoUrl : config.sourceUrl + shop.logoUrl" |
||||
|
alt="" |
||||
|
/> |
||||
|
<img v-else class="shop-logo" src="@/assets/images/header/logo.svg" alt="" /> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 名称和属性 --> |
||||
|
<div class="name-wrapper"> |
||||
|
<div class="marquee-wrapper"> |
||||
|
<marquees :speed="40" :delay="0.8" class="name" :content="switchLanguage(shop, 'shopName')" |
||||
|
>{{ switchLanguage(shop, 'shopName') }} |
||||
|
</marquees> |
||||
|
</div> |
||||
|
<!-- 点赞 --> |
||||
|
<div class="like-container" :class="{ 'no-click': isLiked }" @click="clickLike"> |
||||
|
<img |
||||
|
:src="isLiked ? require('@/assets/images/shopDetail/like_sel.svg') : require('@/assets/images/shopDetail/like_normal.svg')" |
||||
|
alt="" |
||||
|
/> |
||||
|
<span>{{ $t('shop.like') }}</span> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 属性 --> |
||||
|
<div class="shop-attr-group"> |
||||
|
<div class="ul"> |
||||
|
<div v-if="shop.contact" class="working-item"> |
||||
|
<img src="../../assets/images/shopDetail/icon_tel.svg" alt="" /> |
||||
|
<span class="title">{{ shop.contact }}</span> |
||||
|
</div> |
||||
|
<div v-if="shop.houseNumber" class="working-item"> |
||||
|
<img src="../../assets/images/shopDetail/icon_address.svg" alt="" /> |
||||
|
<span class="title">{{ shop.floor + '-' + shop.houseNumber }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div v-if="shop.businessHours" class="working-item"> |
||||
|
<img src="../../assets/images/shopDetail/icon_time.svg" alt="" /> |
||||
|
<span class="title">{{ shop.businessHours }}</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<!-- 详情 --> |
||||
|
<scroll-view :list="[switchLanguage(shop, 'intro')]" class="intro-scroll" :scrollbar="true" :pull-up="false" :refresh-delay="500"> |
||||
|
<p class="intro" v-text="switchLanguage(shop, 'intro')"></p> |
||||
|
</scroll-view> |
||||
|
<!-- 导航按钮 --> |
||||
|
<div v-if="shop.yaxis" class="go" @click="handleGo"> |
||||
|
<img src="@/assets/images/shopDetail/bg_go.png" alt="" /> |
||||
|
<h5>{{ $t('shop.goBtn') }}</h5> |
||||
|
</div> |
||||
|
<!-- 关闭按钮 --> |
||||
|
<div class="exit" @click="close"> |
||||
|
<img src="@/assets/images/shopDetail/close.svg" class="go_bg" alt="" /> |
||||
|
</div> |
||||
|
</div> |
||||
|
</transition> |
||||
|
</masker> |
||||
|
</transition> |
||||
|
</template> |
||||
|
|
||||
|
<script setup lang="ts"> |
||||
|
import { Autoplay, Pagination, EffectFade } from 'swiper' |
||||
|
import { Swiper, SwiperSlide } from 'swiper/vue' |
||||
|
import 'swiper/css' |
||||
|
import 'swiper/css/pagination' |
||||
|
import 'swiper/css/effect-fade' |
||||
|
|
||||
|
import scrollView from '@/base/ScrollView/ScrollView.vue' |
||||
|
import masker from '@/base/Masker/Masker.vue' |
||||
|
import marquees from '@/base/Marquees/Marquees.vue' |
||||
|
|
||||
|
import { ref } from 'vue' |
||||
|
import { useRouter } from 'vue-router' |
||||
|
import { useStatistics } from '@/composables/useStatistics' |
||||
|
import { getBrandStar, setBrandStar } from '@/http/api/brand/index' |
||||
|
|
||||
|
import { storeToRefs } from 'pinia' |
||||
|
import { useRootStore } from '@/store/root' |
||||
|
const store = useRootStore() |
||||
|
const { shop, config, device } = storeToRefs(store) |
||||
|
const router = useRouter() |
||||
|
|
||||
|
const modules = [Autoplay, Pagination, EffectFade] |
||||
|
const isLiked = ref(false) //是否点击like |
||||
|
//关闭窗口 |
||||
|
function close() { |
||||
|
store.SET_SHOW_DETAIL(false) |
||||
|
} |
||||
|
//导航 |
||||
|
function handleGo() { |
||||
|
store.SET_SHOW_DETAIL(false) |
||||
|
store.SET_SHOW_SEARCH(false) |
||||
|
router.push('/nav') |
||||
|
} |
||||
|
/** |
||||
|
* 点击like |
||||
|
*/ |
||||
|
function clickLike() { |
||||
|
try { |
||||
|
setBrandStar({ projectCode: device.value.projectCode, shopCode: shop.value.shopCode as string }).then(res => { |
||||
|
if (res.code === 200) { |
||||
|
isLiked.value = true |
||||
|
} |
||||
|
}) |
||||
|
} catch (error) { |
||||
|
console.log('error :>> ', error) |
||||
|
} |
||||
|
} |
||||
|
useStatistics({ tag: 'shop', shopCode: shop.value.shopCode }) |
||||
|
</script> |
||||
|
|
||||
|
<style scoped lang="scss"> |
||||
|
:deep(.bscroll-vertical-scrollbar) { |
||||
|
background: rgb(0 0 0 / 1%); |
||||
|
border-radius: 4px; |
||||
|
opacity: 1 !important; |
||||
|
.bscroll-indicator { |
||||
|
background: #b7a475 !important; |
||||
|
border: none !important; |
||||
|
border-radius: 4px !important; |
||||
|
box-shadow: 0 8px 20px rgb(0 0 0 / 10%); |
||||
|
} |
||||
|
} |
||||
|
.shop-detail-wrapper { |
||||
|
--swiper-pagination-bullet-horizontal-gap: 8px; |
||||
|
--swiper-pagination-bullet-width: 24px; |
||||
|
--swiper-pagination-bullet-height: 4px; |
||||
|
--swiper-pagination-bullet-inactive-color: rgb(255 255 255 / 60%) !important; |
||||
|
--swiper-theme-color: #5a6670; |
||||
|
--animate-duration: 0.3s; |
||||
|
|
||||
|
position: relative; |
||||
|
z-index: 9003; |
||||
|
display: inline-block; |
||||
|
width: 1586px; |
||||
|
height: 492px; |
||||
|
margin-top: 325px; |
||||
|
margin-left: 175px; |
||||
|
background: linear-gradient(to bottom, #d9d3c4 0%, #d9d3c4 52%, #e6e3db 52%, #e6e3db 100%); |
||||
|
|
||||
|
.carousel { |
||||
|
position: relative; |
||||
|
z-index: 0; |
||||
|
overflow: hidden; |
||||
|
width: 852px; |
||||
|
height: 480px; |
||||
|
margin-top: -32px; |
||||
|
margin-left: -50px; |
||||
|
background: rgb(255 255 255 / 71.9%); |
||||
|
border-radius: 0; |
||||
|
.banner { |
||||
|
width: 100%; |
||||
|
height: 480px; |
||||
|
border-radius: 0; |
||||
|
object-fit: cover; |
||||
|
} |
||||
|
.no-data { |
||||
|
padding: 30px 192px; |
||||
|
background: #fff; |
||||
|
} |
||||
|
.detail { |
||||
|
bottom: 70px; |
||||
|
left: 78%; |
||||
|
width: 120px; |
||||
|
} |
||||
|
} |
||||
|
.logo-wrapper { |
||||
|
position: absolute; |
||||
|
top: -32px; |
||||
|
left: 300px; |
||||
|
z-index: 1; |
||||
|
width: 152px; |
||||
|
height: 152px; |
||||
|
padding: 12px; |
||||
|
background: #fff; |
||||
|
border-radius: 0; |
||||
|
img { |
||||
|
width: 128px; |
||||
|
height: 128px; |
||||
|
object-fit: scale-down; |
||||
|
} |
||||
|
} |
||||
|
.name-wrapper { |
||||
|
position: absolute; |
||||
|
top: 40px; |
||||
|
left: 852px; |
||||
|
z-index: 1; |
||||
|
.marquee-wrapper { |
||||
|
overflow: hidden; |
||||
|
width: 700px; |
||||
|
margin-bottom: 12px; |
||||
|
white-space: nowrap; |
||||
|
|
||||
|
.name { |
||||
|
display: inline-block; |
||||
|
height: 36px; |
||||
|
font-size: 28px; |
||||
|
font-family: 'font_bold'; |
||||
|
color: #595447; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
} |
||||
|
.like-container { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
margin-bottom: 46px; |
||||
|
img { |
||||
|
width: 24px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
span { |
||||
|
font-size: 16px; |
||||
|
font-family: 'font_regular'; |
||||
|
color: #84754e; |
||||
|
font-style: normal; |
||||
|
font-weight: 400; |
||||
|
line-height: 24px; |
||||
|
} |
||||
|
|
||||
|
&.isLiked { |
||||
|
pointer-events: none; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.shop-attr-group { |
||||
|
width: 500px; |
||||
|
.ul { |
||||
|
display: flex; |
||||
|
margin-bottom: 17px; |
||||
|
} |
||||
|
.working-item { |
||||
|
display: flex; |
||||
|
align-items: center; |
||||
|
img { |
||||
|
width: 20px; |
||||
|
height: 20px; |
||||
|
margin-right: 8px; |
||||
|
} |
||||
|
span { |
||||
|
margin-right: 24px; |
||||
|
font-size: 14px; |
||||
|
font-family: 'font_bold'; |
||||
|
color: #84754e; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.intro-scroll { |
||||
|
position: absolute; |
||||
|
top: 298px; |
||||
|
left: 852px; |
||||
|
z-index: 1; |
||||
|
overflow: hidden; |
||||
|
width: 722px; |
||||
|
height: 165px; |
||||
|
padding-right: 14px; |
||||
|
.intro { |
||||
|
font-size: 14px; |
||||
|
font-family: 'font_regular'; |
||||
|
text-align: justify; |
||||
|
white-space: pre-wrap; |
||||
|
color: #736661; |
||||
|
line-height: 200%; |
||||
|
:deep(img) { |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
.go { |
||||
|
position: absolute; |
||||
|
top: 38px; |
||||
|
right: -75px; |
||||
|
z-index: 1; |
||||
|
width: 150px; |
||||
|
img { |
||||
|
position: absolute; |
||||
|
width: 150px; |
||||
|
} |
||||
|
h5 { |
||||
|
position: absolute; |
||||
|
right: 0; |
||||
|
left: 0; |
||||
|
display: block; |
||||
|
margin: 85px auto 0; |
||||
|
font-size: 22px; |
||||
|
font-family: 'font_bold'; |
||||
|
text-align: center; |
||||
|
color: #faeba9; |
||||
|
font-style: normal; |
||||
|
font-weight: 700; |
||||
|
} |
||||
|
} |
||||
|
.exit { |
||||
|
position: absolute; |
||||
|
top: -60px; |
||||
|
right: 0; |
||||
|
img { |
||||
|
width: 60px; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
</style> |
||||
@ -1,8 +1,13 @@ |
|||||
import { request } from '@/http/http' |
import { request } from '@/http/http' |
||||
import type { GroupList, BrandRes } from './types' |
|
||||
|
import type { GroupList, BrandRes, starPara } from './types' |
||||
|
|
||||
export const getBrandInfo = () => request<BrandRes>({ url: `/JSON/getBrandShopList.json` }) |
export const getBrandInfo = () => request<BrandRes>({ url: `/JSON/getBrandShopList.json` }) |
||||
|
|
||||
export const getShopListByFloor = () => request<{ list: GroupList }>({ url: `/JSON/getBrandShopListByFloor.json` }) |
export const getShopListByFloor = () => request<{ list: GroupList }>({ url: `/JSON/getBrandShopListByFloor.json` }) |
||||
|
|
||||
export const getShopListByIndustry = () => request<{ list: GroupList }>({ url: `/JSON/getBrandShopListByIndustryId.json` }) |
export const getShopListByIndustry = () => request<{ list: GroupList }>({ url: `/JSON/getBrandShopListByIndustryId.json` }) |
||||
|
|
||||
|
//点击喜欢按钮
|
||||
|
export const setBrandStar = (data: starPara) => request<{ code: number }>({ url: `/api/guide/v1/web/setBrandStar`, data, method: 'get' }) |
||||
|
//获取喜欢按钮
|
||||
|
export const getBrandStar = (data: starPara) => request({ url: `/api/guide/v1/web/getBrandStar`, data, method: 'get' }) |
||||
|
|||||
Loading…
Reference in new issue