|
|
@@ -1,96 +1,37 @@
|
|
|
<template>
|
|
|
<view class="section_page_main clearfix">
|
|
|
- <view class="recommend-list" :style="hasLessProduct ? 'height:269px' : ''">
|
|
|
- <swiper
|
|
|
- class="tui-banner-swiper"
|
|
|
- :autoplay="true"
|
|
|
- :interval="6000"
|
|
|
- :duration="200"
|
|
|
+ <view class="recommend-list">
|
|
|
+ <cm-simple-swiper
|
|
|
+ @change="onChange"
|
|
|
+ :current="current"
|
|
|
:circular="true"
|
|
|
- @change="swiperChange"
|
|
|
- :style="hasLessProduct ? 'height:269px' : ''"
|
|
|
+ :swiperHeight="1100"
|
|
|
+ :data="productList"
|
|
|
+ :columns="2"
|
|
|
+ :rows="swiperRows"
|
|
|
+ :gapY="12"
|
|
|
+ :gapX="12"
|
|
|
+ :autoFill="true"
|
|
|
+ :autoplay="true"
|
|
|
+ padding="0 10rpx"
|
|
|
>
|
|
|
- <swiper-item v-for="(product, index) in productList" :key="index">
|
|
|
- <view
|
|
|
- class="floor-item ad_04 clearfix"
|
|
|
- v-for="(item, idx) in product"
|
|
|
- :key="idx"
|
|
|
- @click.stop="navToDetailPage(item.product)"
|
|
|
- >
|
|
|
- <image class="item-img tui-skeleton-fillet" :src="item.product.image" mode="aspectFill"></image>
|
|
|
- <template-Type :product="item.product"></template-Type>
|
|
|
- <view class="floor-item-content">
|
|
|
- <view class="title tui-skeleton-rect">
|
|
|
- <text class="mclap-tag" v-if="item.product.beautyActFlag == '1'">美博会</text>
|
|
|
- <text class="mclap" :class="item.product.beautyActFlag == '1' ? 'indent' : ''"
|
|
|
- >{{ item.product.name }}
|
|
|
- </text>
|
|
|
- </view>
|
|
|
- <view class="floor-item-price">
|
|
|
- <template>
|
|
|
- <template-Tags :product="item.product"></template-Tags>
|
|
|
- </template>
|
|
|
- <view v-if="hasLogin">
|
|
|
- <template v-if="item.product.productCategory == 1">
|
|
|
- <template-Price :product="item.product"></template-Price>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="price tui-skeleton-rect" v-if="item.product.detailTalkFlag == '2'">
|
|
|
- <text class="p sm">￥</text> <text class="p big">价格详聊</text>
|
|
|
- </view>
|
|
|
- <view class="price tui-skeleton-rect" v-else>
|
|
|
- <text class="p sm">￥</text>
|
|
|
- <text class="p big">{{ item.product.price | NumFormat }}</text>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- <view v-else class="no-price">
|
|
|
- <template v-if="item.product.productCategory == 1">
|
|
|
- <view class="p-stars">
|
|
|
- <text class="p-no">￥</text>
|
|
|
- <uni-grader
|
|
|
- :grade="Number(item.product.priceGrade)"
|
|
|
- :margin="14"
|
|
|
- ></uni-grader>
|
|
|
- </view>
|
|
|
- </template>
|
|
|
- <template v-else>
|
|
|
- <view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
|
|
|
- </template>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- <view class="swiper__recommenddots-box" v-if="productList.length > 1">
|
|
|
- <view
|
|
|
- v-for="(item, idx) in productList"
|
|
|
- :key="idx"
|
|
|
- :class="[idx === swiperCurrent ? 'swiper__dots-long' : 'none']"
|
|
|
- :data-index="swiperCurrent"
|
|
|
- class="swiper__dots-item"
|
|
|
- >
|
|
|
- </view>
|
|
|
- </view>
|
|
|
+ <template v-slot:slide="{ row }">
|
|
|
+ <template-product :data="row.product"></template-product>
|
|
|
+ </template>
|
|
|
+ </cm-simple-swiper>
|
|
|
</view>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
import { mapState, mapMutations } from 'vuex'
|
|
|
-import uniGrader from '@/components/uni-grade/uni-grade.vue'
|
|
|
-import templateTags from '@/components/cm-module/pageTemplate/templateTags.vue'
|
|
|
-import templatePrice from '@/components/cm-module/pageTemplate/templatePrice.vue'
|
|
|
-import templateType from '@/components/cm-module/pageTemplate/templateType.vue'
|
|
|
-
|
|
|
+import CmSimpleSwiper from '@/components/cm-simple-swiper/cm-simple-swiper.vue'
|
|
|
+import TemplateProduct from '@/components/cm-module/pageTemplate/template-product.vue'
|
|
|
export default {
|
|
|
name: 'templateH',
|
|
|
components: {
|
|
|
- uniGrader,
|
|
|
- templateTags,
|
|
|
- templatePrice,
|
|
|
- templateType
|
|
|
+ CmSimpleSwiper,
|
|
|
+ TemplateProduct
|
|
|
},
|
|
|
props: {
|
|
|
pageData: {
|
|
|
@@ -110,19 +51,15 @@ export default {
|
|
|
productCount: 0
|
|
|
}
|
|
|
},
|
|
|
- filters: {
|
|
|
- NumFormat: function(text) {
|
|
|
- //处理金额
|
|
|
- return Number(text).toFixed(2)
|
|
|
- }
|
|
|
- },
|
|
|
created() {
|
|
|
this.initData(this.pageData)
|
|
|
},
|
|
|
computed: {
|
|
|
- ...mapState(['hasLogin', 'userInfo', 'isActivity']),
|
|
|
- hasLessProduct() {
|
|
|
- return this.productCount <= 2
|
|
|
+ swiperRows() {
|
|
|
+ return this.productList.length === 1 ? 1 : 2
|
|
|
+ },
|
|
|
+ swiperHeight() {
|
|
|
+ return 516 * this.swiperRows
|
|
|
}
|
|
|
},
|
|
|
watch: {
|
|
|
@@ -139,38 +76,18 @@ export default {
|
|
|
async initData(data) {
|
|
|
const userInfo = await this.$api.getStorage()
|
|
|
this.shopId = userInfo.shopId ? userInfo.shopId : 0
|
|
|
- this.productCount = data.floorImageList4.length
|
|
|
- if (this.productCount > 0) {
|
|
|
- this.productList.splice(0, this.productList.length)
|
|
|
- for (var i = 0, j = data.floorImageList4.length; i < j; i += this.pageSize) {
|
|
|
- this.productList.push(data.floorImageList4.slice(i, i + this.pageSize))
|
|
|
- }
|
|
|
- }
|
|
|
- },
|
|
|
- PromotionsFormat(promo) {
|
|
|
- //促销活动类型数据处理
|
|
|
- if (promo != null) {
|
|
|
- if (promo.type == 1 && promo.mode == 1) {
|
|
|
- return true
|
|
|
- } else {
|
|
|
- return false
|
|
|
- }
|
|
|
- }
|
|
|
- return false
|
|
|
- },
|
|
|
- tabClick(index) {
|
|
|
- //轮播图切换
|
|
|
- this.current = index
|
|
|
+ this.productList = data.floorImageList4
|
|
|
+ // if (this.productCount > 0) {
|
|
|
+ // this.productList.splice(0, this.productList.length)
|
|
|
+ // for (var i = 0, j = data.floorImageList4.length; i < j; i += this.pageSize) {
|
|
|
+ // this.productList.push(data.floorImageList4.slice(i, i + this.pageSize))
|
|
|
+ // }
|
|
|
+ // }
|
|
|
},
|
|
|
- swiperChange(e) {
|
|
|
- //轮播切换
|
|
|
- const index = e.detail.current
|
|
|
- this.swiperCurrent = index
|
|
|
+ onChange(e) {
|
|
|
+ this.current = e.current
|
|
|
},
|
|
|
- navToDetailPage(pros) {
|
|
|
- //跳转商品详情页
|
|
|
- this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -236,134 +153,7 @@ export default {
|
|
|
height: 1100rpx;
|
|
|
overflow: hidden;
|
|
|
transform: translateY(0);
|
|
|
- .floor-item {
|
|
|
- width: 339rpx;
|
|
|
- height: 516rpx;
|
|
|
- margin-right: 20rpx;
|
|
|
- font-size: $font-size-24;
|
|
|
- color: $text-color;
|
|
|
- background: #ffffff;
|
|
|
- line-height: 36rpx;
|
|
|
- border-radius: 16rpx;
|
|
|
- margin-bottom: 20rpx;
|
|
|
- float: left;
|
|
|
- box-sizing: border-box;
|
|
|
- position: relative;
|
|
|
- &:nth-child(2n) {
|
|
|
- margin-right: 0;
|
|
|
- }
|
|
|
- .item-img {
|
|
|
- width: 339rpx;
|
|
|
- height: 339rpx;
|
|
|
- border-radius: 16rpx 16rpx 0 0;
|
|
|
- display: block;
|
|
|
- margin-bottom: 8rpx;
|
|
|
- }
|
|
|
- .floor-item_tag {
|
|
|
- width: 100%;
|
|
|
- height: 32rpx;
|
|
|
- float: left;
|
|
|
- margin: 20rpx 0;
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- text {
|
|
|
- display: inline-block;
|
|
|
- padding: 0 8rpx;
|
|
|
- border: 1px solid #e3ebf7;
|
|
|
- border-radius: 8rpx;
|
|
|
- color: #9aa5b5;
|
|
|
- font-size: $font-size-22;
|
|
|
- line-height: 32rpx;
|
|
|
- text-align: center;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .floor-item-content {
|
|
|
- width: 100%;
|
|
|
- padding: 0 20rpx;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .floor-item-act {
|
|
|
- display: block;
|
|
|
- width: 100%;
|
|
|
- height: 32rpx;
|
|
|
- text-align: center;
|
|
|
- box-sizing: border-box;
|
|
|
- }
|
|
|
- .title-none {
|
|
|
- font-size: $font-size-26;
|
|
|
- color: #ff2a2a;
|
|
|
- line-height: 54rpx;
|
|
|
- }
|
|
|
- .title {
|
|
|
- width: 100%;
|
|
|
- height: 70rpx;
|
|
|
- display: flex;
|
|
|
- line-height: 35rpx;
|
|
|
- flex-direction: column;
|
|
|
- margin: 8rpx 0;
|
|
|
- padding: 0;
|
|
|
- position: relative;
|
|
|
- .mclap {
|
|
|
- width: 100%;
|
|
|
- line-height: 35rpx;
|
|
|
- text-overflow: ellipsis;
|
|
|
- display: -webkit-box;
|
|
|
- word-break: break-all;
|
|
|
- -webkit-box-orient: vertical;
|
|
|
- -webkit-line-clamp: 2;
|
|
|
- overflow: hidden;
|
|
|
- font-size: 26rpx;
|
|
|
- &.indent {
|
|
|
- text-indent: 95rpx;
|
|
|
- }
|
|
|
- }
|
|
|
- .mclap-tag {
|
|
|
- display: block;
|
|
|
- width: 84rpx;
|
|
|
- height: 32rpx;
|
|
|
- background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);
|
|
|
- border-radius: 4rpx 48rpx 4px 4px;
|
|
|
- line-height: 32rpx;
|
|
|
- font-size: $font-size-22;
|
|
|
- color: #ffffff;
|
|
|
- text-align: center;
|
|
|
- position: absolute;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- }
|
|
|
- }
|
|
|
- .no-price {
|
|
|
- height: 54rpx;
|
|
|
- line-height: 54rpx;
|
|
|
- display: flex;
|
|
|
- box-sizing: border-box;
|
|
|
- .p-no {
|
|
|
- line-height: 54rpx;
|
|
|
- font-size: $font-size-28;
|
|
|
- color: $text-color;
|
|
|
- display: inline-block;
|
|
|
- float: left;
|
|
|
- }
|
|
|
- .p-stars {
|
|
|
- float: left;
|
|
|
- }
|
|
|
- }
|
|
|
- .price {
|
|
|
- color: #ff2a2a;
|
|
|
- line-height: 54rpx;
|
|
|
- &.none {
|
|
|
- text-decoration: line-through;
|
|
|
- color: #999999;
|
|
|
- }
|
|
|
- .sm {
|
|
|
- font-size: $font-size-24;
|
|
|
- }
|
|
|
- .big {
|
|
|
- font-size: $font-size-28;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
.swiper__recommenddots-box {
|
|
|
@@ -384,13 +174,13 @@ export default {
|
|
|
height: 8rpx;
|
|
|
border-radius: 100%;
|
|
|
margin-left: 6px;
|
|
|
- background-color: #FFFFFF;
|
|
|
+ background-color: #ffffff;
|
|
|
}
|
|
|
.swiper__dots-long {
|
|
|
width: 32rpx;
|
|
|
height: 8rpx;
|
|
|
border-radius: 4rpx;
|
|
|
- background-color: #FFFFFF;
|
|
|
+ background-color: #ffffff;
|
|
|
transition: all 0.4s;
|
|
|
}
|
|
|
}
|
