19 changed files with 657 additions and 304 deletions
@ -1 +1,26 @@ |
|||
{"code":200,"msg":"操作成功","data":[{"id":264,"title":"主KV","content":{"activityAddress":"","activityAddressEn":"","activityContent":"SKP是全球最具标志性的高端时尚百货之一，首家SKP于2007年在北京诞生。目前，成都SKP是继北京、西安之后的全国第三家SKP旗舰项目，设计融合了成都本土文化和城市特色，将公园城市理念、TOD站城一体化开发理念、以及时尚高端零售理念综合进行统一规划设计。成都SKP是亚洲最大的下沉式建筑，作为成都交子公园商圈引入的首个高端百货业态，成都SKP项目总建筑面积约32.4万平米，品牌共约1300余个，涵盖多个首店品牌。同时，通过SKP最前卫的专业买手团队从世界各地甄选最新、最好、最尖端的品牌和单品，将SKP SELECT作为SKP旗下的多品牌概念店，建立成为一站式的购物体验目的地。","activityContentEn":"","activityName":"主KV","activityNameEn":"","startDate":"2023-07-21","endDate":"2023-08-22","point":"","fileUrl":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png"],"limitStartDate":"2023-07-21 14:43:31","limitEndDate":"2023-08-22 00:00:00"}}]} |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"id": 264, |
|||
"title": "主KV", |
|||
"content": { |
|||
"activityAddress": "", |
|||
"activityAddressEn": "", |
|||
"activityContent": "SKP是全球最具标志性的高端时尚百货之一，首家SKP于2007年在北京诞生。目前，成都SKP是继北京、西安之后的全国第三家SKP旗舰项目，设计融合了成都本土文化和城市特色，将公园城市理念、TOD站城一体化开发理念、以及时尚高端零售理念综合进行统一规划设计。成都SKP是亚洲最大的下沉式建筑，作为成都交子公园商圈引入的首个高端百货业态，成都SKP项目总建筑面积约32.4万平米，品牌共约1300余个，涵盖多个首店品牌。同时，通过SKP最前卫的专业买手团队从世界各地甄选最新、最好、最尖端的品牌和单品，将SKP SELECT作为SKP旗下的多品牌概念店，建立成为一站式的购物体验目的地。", |
|||
"activityContentEn": "", |
|||
"activityName": "主KV", |
|||
"activityNameEn": "", |
|||
"startDate": "2023-07-21", |
|||
"endDate": "2023-08-22", |
|||
"point": "", |
|||
"fileUrl": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png" |
|||
], |
|||
"limitStartDate": "2023-07-21 14:43:31", |
|||
"limitEndDate": "2023-08-22 00:00:00" |
|||
} |
|||
} |
|||
] |
|||
} |
|||
|
|||
@ -0,0 +1,56 @@ |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"id": 617, |
|||
"entryCode": "UIBbbmSxX1bvI_icEzNNu", |
|||
"title": "欢度中秋国庆", |
|||
"content": { |
|||
"activityName": "欢度中秋国庆", |
|||
"activityNameEn": "happy", |
|||
"type": "档期活动", |
|||
"coverUrl": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png" |
|||
], |
|||
"fileUrl_h": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png", |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png" |
|||
], |
|||
"fileUrl_v": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 618, |
|||
"entryCode": "liuUoTMkKVyk_ON7TV3jw", |
|||
"title": "品牌活动", |
|||
"content": { |
|||
"activityName": "品牌活动", |
|||
"activityNameEn": "brand988", |
|||
"type": "品牌活动", |
|||
"coverUrl": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png" |
|||
], |
|||
"fileUrl_h": [], |
|||
"fileUrl_v": [] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 618, |
|||
"entryCode": "liuUoTMkKVyk_ON7TV3jw", |
|||
"title": "品牌活动", |
|||
"content": { |
|||
"activityName": "品牌活动", |
|||
"activityNameEn": "brand988", |
|||
"type": "品牌活动", |
|||
"coverUrl": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230721/VxD2notoXjw8qTxQMerDh.png" |
|||
], |
|||
"fileUrl_h": [], |
|||
"fileUrl_v": [] |
|||
} |
|||
} |
|||
] |
|||
} |
|||
@ -1 +1,19 @@ |
|||
{"code":200,"msg":"操作成功","data":[{"id":196,"title":"成都SKP会员权益","content":{"name":"成都SKP会员权益","nameEn":"","content":"（一）参加会员促销活动，享受会员积分【每消费1元人民币 (仅限现金、支票及银行卡刷卡消费，不含电子礼金等消费) 获得1个积分】，换礼等权益；\n（二）SKP普通会籍在一个定级期内达到定级积分标准后，可获得相应的尊贵会籍资格。尊贵会籍除享有普通会籍权益外，还可享有特殊权益如下：\n金卡定级积分标准：100000 ，享特殊权益(奖励积分0.2倍)\n黑卡定级积分标准：500000， 享特殊权益(奖励积分1倍)\n尊贵会籍自生效日起至下一个定级期的8月31日止。\n（三）SKP在法律法规允许的范围内，对本细则拥有最终解释权；详情可咨询SKP店内服务台或会员服务中心。咨询电话：028-68385888。","contentEn":"","file_code":["/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png"]}}]} |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"id": 196, |
|||
"title": "成都SKP会员权益", |
|||
"content": { |
|||
"name": "成都SKP会员权益", |
|||
"nameEn": "", |
|||
"content": "（一）参加会员促销活动，享受会员积分【每消费1元人民币 (仅限现金、支票及银行卡刷卡消费，不含电子礼金等消费) 获得1个积分】，换礼等权益；\n（二）SKP普通会籍在一个定级期内达到定级积分标准后，可获得相应的尊贵会籍资格。尊贵会籍除享有普通会籍权益外，还可享有特殊权益如下：\n金卡定级积分标准：100000 ，享特殊权益(奖励积分0.2倍)\n黑卡定级积分标准：500000， 享特殊权益(奖励积分1倍)\n尊贵会籍自生效日起至下一个定级期的8月31日止。\n（三）SKP在法律法规允许的范围内，对本细则拥有最终解释权；详情可咨询SKP店内服务台或会员服务中心。咨询电话：028-68385888。", |
|||
"contentEn": "", |
|||
"file_code": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png" |
|||
] |
|||
} |
|||
} |
|||
] |
|||
} |
|||
|
|||
@ -0,0 +1,60 @@ |
|||
{ |
|||
"code": 200, |
|||
"msg": "操作成功", |
|||
"data": [ |
|||
{ |
|||
"id": 620, |
|||
"entryCode": "7PtFGpCK-XIyq_qKRJPR5", |
|||
"title": "品牌活动", |
|||
"content": { |
|||
"fileUrl": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png" |
|||
], |
|||
"title": "COLOMBO V-SPACE限时店 ", |
|||
"titleEn": "COLOMBO V-SPACE", |
|||
"time": "即日起-国庆节", |
|||
"place": "成都SKP 1F", |
|||
"placeEn": "成都SKP 1F", |
|||
"typeId": [ |
|||
"liuUoTMkKVyk_ON7TV3jw" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 620, |
|||
"entryCode": "7PtFGpCK-XIyq_qKRJPR51", |
|||
"title": "品牌活动", |
|||
"content": { |
|||
"fileUrl": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png" |
|||
], |
|||
"title": "COLOMBO V-SPACE限时店 ", |
|||
"titleEn": "COLOMBO V-SPACE", |
|||
"time": "即日起-国庆节", |
|||
"place": "成都SKP 1F", |
|||
"placeEn": "成都SKP 1F", |
|||
"typeId": [ |
|||
"liuUoTMkKVyk_ON7TV3jw" |
|||
] |
|||
} |
|||
}, |
|||
{ |
|||
"id": 620, |
|||
"entryCode": "7PtFGpCK-XIyq_qKRJPR518", |
|||
"title": "品牌活动", |
|||
"content": { |
|||
"fileUrl": [ |
|||
"/iotFile/project-ey_fpaur6s6fkgvszywana/20230719/JUhRWWwrWE_WkoZgp_TOm.png" |
|||
], |
|||
"title": "COLOMBO V-SPACE限时店 ", |
|||
"titleEn": "COLOMBO V-SPACE", |
|||
"time": "即日起-国庆节", |
|||
"place": "成都SKP 1F", |
|||
"placeEn": "成都SKP 1F", |
|||
"typeId": [ |
|||
"liuUoTMkKVyk_ON7TV3jw" |
|||
] |
|||
} |
|||
} |
|||
] |
|||
} |
|||
|
After Width: | Height: | Size: 531 B |
|
After Width: | Height: | Size: 567 B |
|
After Width: | Height: | Size: 2.5 KiB |
|
After Width: | Height: | Size: 520 B |
|
After Width: | Height: | Size: 577 B |
|
After Width: | Height: | Size: 2.5 KiB |
@ -0,0 +1,275 @@ |
|||
<template> |
|||
<transition appear enter-active-class="animate__animated animate__fadeIn" leave-active-class="animate__animated animate__fadeOut"> |
|||
<masker @click="close"> |
|||
<div v-show="actInfo.type === '档期活动'"> |
|||
<swiper |
|||
:ref="mySwiper1" |
|||
class="carousel" |
|||
:autoplay="true" |
|||
:observer="true" |
|||
:modules="modules" |
|||
:loop="actInfo.fileUrl_h.length > 1" |
|||
:effect="'fade'" |
|||
:pagination="true" |
|||
@swiper="setControlledSwiper" |
|||
> |
|||
<swiper-slide v-for="item of actInfo.fileUrl_h" :key="item"> |
|||
<img :src="item" class="banner" /> |
|||
</swiper-slide> |
|||
<div v-if="actInfo.fileUrl_h.length > 1" class="swiper-prev" @click="pre"> |
|||
<img src="@/assets/images/activity/prev-w.png" alt="" /> |
|||
</div> |
|||
<div v-if="actInfo.fileUrl_h.length > 1" class="swiper-next" @click="next"> |
|||
<img src="@/assets/images/activity/next-w.png" alt="" /> |
|||
</div> |
|||
</swiper> |
|||
<img v-if="!actInfo.fileUrl_h.length" src="../../assets/images/empty_big.svg" class="banner" alt="" /> |
|||
</div> |
|||
<div v-show="actInfo.type !== '档期活动'" class="shop-container"> |
|||
<swiper |
|||
:ref="mySwiper2" |
|||
class="carousel1" |
|||
:slides-per-view="2" |
|||
:autoplay="{ autoplay: actInfo.list.length > 1, disableOnInteraction: false }" |
|||
:observer="true" |
|||
:space-between="40" |
|||
:pagination="true" |
|||
:modules="modules1" |
|||
@swiper="setControlledSwiper2" |
|||
> |
|||
<swiper-slide v-for="item of actInfo.list" :key="item.entryCode" class="slide"> |
|||
<img :src="item.content.fileUrl[0]" class="banner" /> |
|||
<div class="title"> |
|||
<Marquees class="name" :speed="40" :delay="0.8" :content="switchLanguage(item, 'title')">{{ |
|||
switchLanguage(item.content, 'title') |
|||
}}</Marquees> |
|||
</div> |
|||
<div class="label">{{ $t('activity.time') + item.content.time }}</div> |
|||
<div class="label">{{ $t('activity.address') + switchLanguage(item.content, 'place') }}</div> |
|||
</swiper-slide> |
|||
<div v-if="actInfo.list.length > 1" class="swiper-prev-w" @click="pre2"> |
|||
<img src="@/assets/images/activity/prev-b.png" alt="" /> |
|||
</div> |
|||
<div v-if="actInfo.list.length > 1" class="swiper-next-w" @click="next2"> |
|||
<img src="@/assets/images/activity/next-b.png" alt="" /> |
|||
</div> |
|||
</swiper> |
|||
</div> |
|||
<!-- 关闭 --> |
|||
<div class="exit" :class="actInfo.type !== '档期活动' && 'w'" @click="close"> |
|||
<img src="@/assets/images/shopDetail/close.svg" alt="" /> |
|||
</div> |
|||
</masker> |
|||
</transition> |
|||
</template> |
|||
|
|||
<script setup lang="ts"> |
|||
import { shallowRef } from 'vue' |
|||
import { Autoplay, Pagination, EffectFade } from 'swiper' |
|||
import 'swiper/css' |
|||
import 'swiper/css/pagination' |
|||
import 'swiper/css/effect-fade' |
|||
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
|||
import { Swiper, SwiperSlide } from 'swiper/vue' |
|||
import masker from '@/base/Masker/Masker.vue' |
|||
import Marquees from '@/base/Marquees/Marquees.vue' |
|||
|
|||
const modules1 = [Autoplay, Pagination] |
|||
const modules = [Autoplay, Pagination, EffectFade] |
|||
interface AItem { |
|||
actInfo: any |
|||
} |
|||
|
|||
defineProps<AItem>() |
|||
const emit = defineEmits(['close']) |
|||
function close() { |
|||
emit('close') |
|||
} |
|||
const { switchLanguage } = useSwitchLanguage() |
|||
// 获取轮播实例 |
|||
const mySwiper1 = shallowRef() |
|||
const mySwiper2 = shallowRef() |
|||
|
|||
// 获取swiper实例 |
|||
function setControlledSwiper(swiper: any) { |
|||
mySwiper1.value = swiper |
|||
} |
|||
|
|||
// 获取swiper实例 |
|||
function setControlledSwiper2(swiper: any) { |
|||
mySwiper2.value = swiper |
|||
} |
|||
|
|||
// 前一个 |
|||
function pre() { |
|||
mySwiper1.value.slidePrev() |
|||
} |
|||
|
|||
// 后一个 |
|||
function next() { |
|||
mySwiper1.value.slideNext() |
|||
} |
|||
|
|||
// 前一个 |
|||
function pre2() { |
|||
mySwiper2.value.slidePrev() |
|||
} |
|||
|
|||
// 后一个 |
|||
function next2() { |
|||
mySwiper2.value.slideNext() |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.carousel { |
|||
height: 940px; |
|||
margin-top: 90px; |
|||
text-align: center; |
|||
.banner { |
|||
width: 1600px; |
|||
height: 900px; |
|||
border-radius: 16px; |
|||
} |
|||
:deep(.swiper-pagination-bullet) { |
|||
width: 4px; |
|||
height: 4px; |
|||
margin-right: 6px; |
|||
background: #e2dcd5; |
|||
border-radius: 2px; |
|||
} |
|||
:deep(.swiper-pagination-bullet-active) { |
|||
width: 40px; |
|||
background: #e00068; |
|||
} |
|||
.swiper-prev { |
|||
position: absolute; |
|||
top: 430px; |
|||
left: 60px; |
|||
z-index: 1; |
|||
img { |
|||
width: 20px; |
|||
height: 40px; |
|||
} |
|||
} |
|||
.swiper-next { |
|||
position: absolute; |
|||
top: 430px; |
|||
right: 60px; |
|||
z-index: 1; |
|||
img { |
|||
width: 20px; |
|||
height: 40px; |
|||
} |
|||
} |
|||
} |
|||
.shop-container { |
|||
position: relative; |
|||
z-index: 1; |
|||
width: 1760px; |
|||
height: 772px; |
|||
padding-top: 52px; |
|||
padding-left: 48px; |
|||
margin-top: 154px; |
|||
margin-left: 80px; |
|||
background: #f5f5f5; |
|||
border-radius: 16px; |
|||
:deep(.swiper-pagination-bullet) { |
|||
width: 4px; |
|||
height: 4px; |
|||
margin-right: 6px; |
|||
background: rgb(0 0 0 / 20%); |
|||
border-radius: 2px; |
|||
} |
|||
:deep(.swiper-pagination-horizontal) { |
|||
bottom: 17px; |
|||
} |
|||
:deep(.swiper-pagination-bullet-active) { |
|||
width: 40px; |
|||
background: #e00068; |
|||
} |
|||
.carousel1 { |
|||
height: 700px; |
|||
.slide { |
|||
width: 800px !important; |
|||
height: 640px; |
|||
background: #fff; |
|||
border-radius: 24px; |
|||
.banner { |
|||
width: 800px; |
|||
height: 450px; |
|||
border-radius: 16px; |
|||
} |
|||
.title { |
|||
height: 32px; |
|||
margin: 32px 0 40px 40px; |
|||
font-size: 24px; |
|||
font-family: 'font_bold'; |
|||
color: rgb(0 0 0 / 70%); |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 32px; |
|||
} |
|||
.label { |
|||
@include no-wrap; |
|||
|
|||
width: 730px; |
|||
margin-bottom: 8px; |
|||
margin-left: 40px; |
|||
font-size: 14px; |
|||
font-family: 'font_bold'; |
|||
color: #8e9090; |
|||
font-style: normal; |
|||
font-weight: 700; |
|||
line-height: 22px; |
|||
} |
|||
} |
|||
.swiper-prev-w { |
|||
position: absolute; |
|||
top: 670px; |
|||
left: 0; |
|||
z-index: 11; |
|||
img { |
|||
width: 10px; |
|||
height: 18px; |
|||
} |
|||
} |
|||
.swiper-next-w { |
|||
position: absolute; |
|||
top: 670px; |
|||
right: 48px; |
|||
z-index: 11; |
|||
img { |
|||
width: 10px; |
|||
height: 18px; |
|||
} |
|||
} |
|||
} |
|||
} |
|||
.exit { |
|||
position: absolute; |
|||
top: 50px; |
|||
right: 128px; |
|||
z-index: 1; |
|||
width: 100px; |
|||
height: 100px; |
|||
padding: 26px; |
|||
font-size: 20px; |
|||
font-family: 'font_bold'; |
|||
text-align: center; |
|||
color: rgb(0 0 0 / 80%); |
|||
background: rgb(255 255 255 / 60%); |
|||
border: 2px solid #fff; |
|||
border-radius: 50px; |
|||
backdrop-filter: blur(20px); |
|||
box-shadow: 0 20px 30px 0 rgb(0 0 0 / 10%); |
|||
line-height: 72px; |
|||
img { |
|||
width: 48px; |
|||
} |
|||
} |
|||
.w { |
|||
top: 114px; |
|||
right: 48px; |
|||
} |
|||
</style> |
|||
@ -0,0 +1,77 @@ |
|||
<template> |
|||
<div :key="actInfo.id" class="act-item" @click="clickActItem"> |
|||
<!-- 图片 --> |
|||
<div class="img-container"> |
|||
<img :src="actInfo.content.coverUrl[0] ? actInfo.content.coverUrl[0] : '@/assets/images/empty_big.svg'" alt="" /> |
|||
</div> |
|||
<!-- 标题 --> |
|||
<div class="marquee-wrapper"> |
|||
<Marquees class="name" :speed="40" :delay="0.8" :content="switchLanguage(actInfo.content, 'activityName')">{{ |
|||
switchLanguage(actInfo.content, 'activityName') |
|||
}}</Marquees> |
|||
</div> |
|||
</div> |
|||
</template> |
|||
<script setup lang="ts"> |
|||
import { useStatisticsModel } from '@/composables/useStatistics' |
|||
import Marquees from '@/base/Marquees/Marquees.vue' |
|||
|
|||
import { useSwitchLanguage } from '@/composables/useSwitchLanguage' |
|||
|
|||
interface AItem { |
|||
actInfo: any |
|||
} |
|||
|
|||
const props = defineProps<AItem>() |
|||
const emits = defineEmits(['handle']) |
|||
const { switchLanguage } = useSwitchLanguage() |
|||
function clickActItem() { |
|||
useStatisticsModel({ recordType: 2, moduleName: props.actInfo.content.activityName, activityCode: props.actInfo.entryCode }) |
|||
emits('handle', props.actInfo.content, props.actInfo.entryCode) |
|||
} |
|||
</script> |
|||
<style lang="scss" scoped> |
|||
.act-item { |
|||
position: relative; |
|||
display: inline-flex; |
|||
overflow: hidden; |
|||
width: 880px; |
|||
height: 575px; |
|||
padding-bottom: 0; |
|||
margin-right: 32px; |
|||
background-color: #fff; |
|||
border-radius: 16px; |
|||
flex-direction: column; |
|||
|
|||
--animate-duration: 0.5s; |
|||
.img-container { |
|||
position: relative; |
|||
width: inherit; |
|||
height: 495px; |
|||
background: #ebebeb00; |
|||
|
|||
img { |
|||
width: 880px; |
|||
height: 495px; |
|||
border-radius: 16px; |
|||
} |
|||
} |
|||
.marquee-wrapper { |
|||
flex-shrink: 0; |
|||
overflow: hidden; |
|||
width: 800px; |
|||
height: 32px; |
|||
margin-top: 24px; |
|||
margin-left: 40px; |
|||
white-space: nowrap; |
|||
.name { |
|||
display: inline-block; |
|||
font-weight: 700; |
|||
font-size: 24px; |
|||
line-height: inherit; |
|||
font-family: 'font_bold'; |
|||
color: rgb(0 0 0 / 70%); |
|||
} |
|||
} |
|||
} |
|||
</style> |
|||
Loading…
Reference in new issue