caimei-applets-caimei/pages/seller/components/homeIndex/template-page/templateZ.vue

<template>
    <view class="section_page_main clearfix">
        <view class="tui-floor-item" v-if="floorData.imageList.length>0">
            <swiper class="tui-floor-swiper" circular @change="swiperChange" :indicator-dots="false" :autoplay="true"
                :interval="5000" :duration="500">
                <swiper-item v-for="(item, index) in floorData.imageList" :key="item">
                    <view class="tui-floor-swiper" @click="BannerNavigateTo(
                            item.linkType,
                            item.linkParam.id ? item.linkParam.id : '',
                            item.linkParam.crmLink,
                            item.linkParam.keyword ? item.linkParam.keyword : '')">
                        <image class="floor-image" :src="item.crmImage" mode=""></image>
                    </view>
                </swiper-item>
            </swiper>
            <view class="swiper__dots-box">
                <view v-for="(item, idx) in floorData.imageList" :key="idx"
                    :class="[idx === current ? 'swiper__dots-long' : 'none']" :data-index="current"
                    class="swiper__dots-item"></view>
            </view>
        </view>
        <view class="floor-item-main">
            <view class="floor-item clearfix" v-for="(pros, idx) in floorData.products" :key="idx"
                @click.stop="navToDetailPage(pros)">
                <image class="item-img tui-skeleton-fillet" :src="pros.mainImage" mode="aspectFill"></image>
                <template-Type :product="pros"></template-Type>
                <view class="floor-item-content">
                    <view class="title tui-skeleton-rect">
                        <text class="mclap" :class="pros.beautyActFlag == '1' ? 'indent' : ''">{{ pros.name }}
                        </text>
                    </view>
                    <view class="floor-item-price">
                        <template>
                            <template-Tags :product="pros"></template-Tags>
                        </template>
                        <view v-if="hasLogin">
                            <template v-if="pros.productCategory == 1">
                                <template-Price :product="pros"></template-Price>
                            </template>
                            <template v-else>
                                <view class="price tui-skeleton-rect" v-if="pros.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">{{ pros.price | NumFormat }}</text>
                                </view>
                            </template>
                        </view>
                        <view v-else class="no-price">
                            <template v-if="pros.productCategory == 1">
                                <view class="p-stars">
                                    <text class="p-no">￥</text>
                                    <uni-grader :grade="Number(pros.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>
        </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'
    export default {
        name: 'templateZ',
        components: {
            uniGrader,
            templateTags,
            templatePrice,
            templateType
        },
        props: {
            pageData: {
                type: Object
            },
            userIdentity: {
                type: Number
            }
        },
        data() {
            return {
                current:0,
                floorData: {}
            }
        },
        filters: {
            NumFormat: function(text) {
                //处理金额
                return Number(text).toFixed(2)
            }
        },
        computed: {
            ...mapState(['hasLogin', 'userInfo', 'isActivity'])
        },
        created() {
            this.initData(this.pageData)
        },
        watch: {
            pageData: {
                handler: function(el) {
                    //监听对象的变换使用 function，箭头函数容易出现this指向不正确
                    this.pageData = el
                    this.initData(this.pageData)
                },
                deep: true
            }
        },
        methods: {
            initData(data) {
                this.floorData = data
            },
            navToDetailPage(pros) {
                //跳转商品详情
                this.$api.navigateTo(`/pages/goods/product?id=${pros.productId}`)
            },
            BannerNavigateTo(linkType, linkId, linkHref, keyword) {
                //跳转
                this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
            },
            swiperChange(e) {//轮播图切换
            	this.current = e.detail.current
            }
        }
    }
</script>

<style lang="scss">
    .section_page_main {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        .tui-floor-item{
            width: 100%;
            height: 240rpx;
            border-radius: 16rpx;
            box-sizing: border-box;
            padding: 0;
            position: relative;
            margin-bottom: 24rpx;
            .swiper__dots-box{
            	position: absolute;
            	bottom: 30rpx;
            	left: 0;
            	right: 0;
            	/* #ifndef APP-NVUE */
            	display: flex;
            	/* #endif */
            	flex: 1;
            	flex-direction: row;
            	justify-content: center;
            	align-items: center;
            	.swiper__dots-item{
            		width: 8rpx;
            		height: 8rpx;
            		border-radius: 100%;
            		margin-left: 6px;
            		background-color:rgba(255,255,255,.7);
            	}
            	.swiper__dots-long{
            		width: 35rpx;
            		height: 8rpx;
            		border-radius: 4rpx;
            		background-color: #ffff;
            		transition: all 0.4s;
            	}
            }
            .tui-floor-swiper{
                width: 100%;
                height: 240rpx;
                text-align: center;
                line-height: 240rpx;
                float: left;
                border-radius: 16rpx;
                overflow: hidden;
                .floor-image{
                    width: 100%;
                    height: 100%;
                    display: block;
                }
            }
        }
        .floor-item-main{
            width: 100%;
            height: auto;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            align-items: center;
            .floor-item {
                width: 339rpx;
                height: 524rpx;
                font-size: $font-size-24;
                color: $text-color;
                background: #ffffff;
                line-height: 36rpx;
                border-radius: 16rpx;
                box-sizing: border-box;
                position: relative;
                margin-right: 20rpx;
                margin-bottom: 20rpx;
                &: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 {
                        font-size: $font-size-28;
                        color: $text-color;
                        display: 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;
                    }
                }
            }
        }
    }
</style>