|
@@ -1,33 +1,28 @@
|
|
|
<template>
|
|
|
- <view class="floor-template">
|
|
|
- <cm-floor-title title="楼层名称"></cm-floor-title>
|
|
|
+ <view class="floor-template" v-if="floorData">
|
|
|
+ <cm-floor-title :title="floorData.title" @click="$emit('more', floorData)"></cm-floor-title>
|
|
|
<!-- banner区域 -->
|
|
|
- <view class="floor-banner-area" :class="'template-' + 7">
|
|
|
+ <view class="floor-banner-area" :class="'template-' + templateType" v-if="templateType !== '8'">
|
|
|
<view
|
|
|
class="banner-item"
|
|
|
:class="'banner-item-' + (index + 1)"
|
|
|
v-for="(item, index) in bannerList"
|
|
|
:key="index"
|
|
|
>
|
|
|
- <image :src="item.image" class="banner"></image>
|
|
|
+ <image :src="item.image" class="banner" @click="$emit('onBannerClick', item)"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
<!-- 商品区域 -->
|
|
|
<view class="floor-product-area">
|
|
|
- <!-- <view class="product-list default-list">
|
|
|
- <view class="product-item" v-for="(item, index) in productList" :key="index">
|
|
|
- <cm-product :data="item"></cm-product>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- <view class="simple-swiper">
|
|
|
+ <view class="simple-swiper" v-if="withSwiperLayout">
|
|
|
<cm-simple-swiper
|
|
|
@change="onChange"
|
|
|
:current="current"
|
|
|
:circular="true"
|
|
|
- :swiperHeight="940"
|
|
|
+ :swiperHeight="swiperHeight"
|
|
|
:data="productList"
|
|
|
:columns="3"
|
|
|
- :rows="2"
|
|
|
+ :rows="swiperRows"
|
|
|
:gapX="16"
|
|
|
:gapY="16"
|
|
|
padding="0 8rpx"
|
|
@@ -35,11 +30,29 @@
|
|
|
>
|
|
|
<template v-slot:slide="{ row }">
|
|
|
<div class="product-list">
|
|
|
- <view class="product-item"><cm-product :data="row"></cm-product></view>
|
|
|
+ <view class="product-item" @click="$emit('onProductClick', row.heheProduct)">
|
|
|
+ <cm-product :data="row.heheProduct"></cm-product>
|
|
|
+ </view>
|
|
|
</div>
|
|
|
</template>
|
|
|
</cm-simple-swiper>
|
|
|
</view>
|
|
|
+ <view class="product-list default-list" v-else>
|
|
|
+ <view
|
|
|
+ class="product-item"
|
|
|
+ v-for="(item, index) in productList"
|
|
|
+ :key="index"
|
|
|
+ @click="$emit('onProductClick', item.heheProduct)"
|
|
|
+ >
|
|
|
+ <cm-product :data="item.heheProduct"></cm-product>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- banner区域 -->
|
|
|
+ <view class="floor-banner-area template-8" v-if="templateType === '8'">
|
|
|
+ <view class="banner-item banner-item-1">
|
|
|
+ <image :src="item.image" class="banner" @click="$emit('onBannerClick', item)"></image>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
@@ -49,62 +62,66 @@ export default {
|
|
|
props: {
|
|
|
floorData: {
|
|
|
type: Object,
|
|
|
- default: () => {}
|
|
|
+ default: () => null
|
|
|
}
|
|
|
},
|
|
|
data() {
|
|
|
return {
|
|
|
- // banner区域
|
|
|
- templateType: 1,
|
|
|
- bannerList: [
|
|
|
- {
|
|
|
- image: ''
|
|
|
- },
|
|
|
- {
|
|
|
- image: ''
|
|
|
- },
|
|
|
- {
|
|
|
- image: ''
|
|
|
- },
|
|
|
- {
|
|
|
- image: ''
|
|
|
- },
|
|
|
- {
|
|
|
- image: ''
|
|
|
- }
|
|
|
- ],
|
|
|
// 商品区域
|
|
|
- current: 0,
|
|
|
- product: {
|
|
|
- activeStatus: 0,
|
|
|
- clubTaxPoint: 10,
|
|
|
- collageProduct: null,
|
|
|
- collageStatus: 0,
|
|
|
- couponsLogo: true,
|
|
|
- includedTax: '1',
|
|
|
- invoiceType: '2',
|
|
|
- mainImage: 'https://img-b.caimei365.com/group1/M00/03/20/Cmgy62BHH8aAFiGIAAGHr5DovGA124.jpg',
|
|
|
- name: '【测试用】Dermaheal HSR 德玛莉肌活丝蕴凝颜精华液',
|
|
|
- normalPrice: null,
|
|
|
- price: 2,
|
|
|
- productId: 6419,
|
|
|
- recommend: '0',
|
|
|
- unit: '片'
|
|
|
- }
|
|
|
+ current: 0
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
+ // 楼层id
|
|
|
+ templateType() {
|
|
|
+ return this.floorData?.floorContent.templateType
|
|
|
+ },
|
|
|
+ // banner图列表
|
|
|
+ bannerList() {
|
|
|
+ return this.splitBannersMap()
|
|
|
+ },
|
|
|
+ // 商品列表
|
|
|
productList() {
|
|
|
- let list = []
|
|
|
- for (let i = 0; i < 10; i++) {
|
|
|
- list.push(this.product)
|
|
|
- }
|
|
|
- return list
|
|
|
+ return this.floorData?.floorImageList
|
|
|
+ },
|
|
|
+ // 使用轮播图布局
|
|
|
+ withSwiperLayout() {
|
|
|
+ return [5, 9].indexOf(parseInt(this.templateType)) > -1
|
|
|
+ },
|
|
|
+ // 轮播图行数
|
|
|
+ swiperRows() {
|
|
|
+ if (this.templateType === '5') return 2
|
|
|
+ if (this.templateType === '9') return 1
|
|
|
+ return 2
|
|
|
+ },
|
|
|
+ // 轮播图高度
|
|
|
+ swiperHeight() {
|
|
|
+ return 480 * this.swiperRows
|
|
|
}
|
|
|
},
|
|
|
methods: {
|
|
|
+ // 从楼层数据中拆分出banner与link的关系
|
|
|
+ splitBannersMap() {
|
|
|
+ const bannerList = []
|
|
|
+ if (this.floorData) {
|
|
|
+ const floorContent = this.floorData?.floorContent
|
|
|
+ for (let key in floorContent) {
|
|
|
+ const linkValue = floorContent[key]
|
|
|
+ if (key.indexOf('appletsAdsImage') > -1 && linkValue) {
|
|
|
+ const obj = Object.create(null)
|
|
|
+ obj.id = parseInt(key[key.length - 1])
|
|
|
+ const subKey = 'adsLink' + obj.id
|
|
|
+ obj.image = linkValue
|
|
|
+ obj.link = floorContent[subKey]
|
|
|
+ bannerList.push(obj)
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ return bannerList.sort((a, b) => a.id - b.id)
|
|
|
+ },
|
|
|
+
|
|
|
+ // 轮播图切换事件
|
|
|
onChange(e) {
|
|
|
- console.log(e)
|
|
|
this.current = e.current
|
|
|
}
|
|
|
}
|
|
@@ -135,6 +152,7 @@ export default {
|
|
|
// banner 区域
|
|
|
.floor-banner-area {
|
|
|
padding: 0 16rpx;
|
|
|
+ padding-bottom: 8rpx;
|
|
|
&::after {
|
|
|
display: block;
|
|
|
content: '';
|
|
@@ -209,6 +227,7 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
&.template-8 {
|
|
|
+ padding-top: 8rpx;
|
|
|
.banner-item-1 {
|
|
|
@extend .size-type-1;
|
|
|
}
|
|
@@ -221,11 +240,15 @@ export default {
|
|
|
.floor-product-area {
|
|
|
padding: 0 16rpx;
|
|
|
.product-list {
|
|
|
- @extend .cm-flex-between;
|
|
|
- flex-wrap: wrap;
|
|
|
- padding: 0 8rpx;
|
|
|
+ // @extend .cm-flex-between;
|
|
|
+ // flex-wrap: wrap;
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(3, 1fr);
|
|
|
+ grid-template-rows: repeat(2, 1fr);
|
|
|
+ grid-row-gap: 16rpx;
|
|
|
+
|
|
|
.product-item {
|
|
|
- padding: 8rpx 0;
|
|
|
+ @extend .cm-flex-center;
|
|
|
}
|
|
|
}
|
|
|
.simple-swiper {
|