caimei-applets-caimei/pages/goods/good-floor-zone.vue

<template>
	<view class="container floor clearfix">
        <tui-skeleton v-if="skeletonShow" backgroundColor="#fafafa" borderRadius="10rpx" :isLoading="true" :loadingType="5" />
		<template v-else>
            <view class="container-home">
                <view class="tui-floor-item" v-if="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 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 imageList" :key="idx"
                            :class="[idx === current ? 'swiper__dots-long' : 'none']" :data-index="current"
                            class="swiper__dots-item"></view>
                    </view>
                </view>
                <view class="tui-floor-tabs">
                    <view class="top-tabs-item" :class="tabsIndex === 0 ? 'active': '' " @click="handleClickTabS(0)">全部</view>
                    <view class="top-tabs-item" :class="tabsIndex === 1 ? 'active': '' " @click="handleClickTabS(1)">产品</view>
                    <view class="top-tabs-item" :class="tabsIndex === 2 ? 'active': '' " @click="handleClickTabS(2)">仪器</view>
                    <view class="top-tabs-item" :class="tabsIndex === 3 ? 'active': '' " @click="handleClickTabS(3)">耗材配件</view>
                </view>
                <view class="floor-item-main" >
                    <template v-if="productList.length > 0">
                        <view class="floor-item clearfix"  v-for="(pros, idx) in productList" :key="idx"
                            @click.stop="navToDetailPage(pros)">
                            <image class="item-img tui-skeleton-fillet" :src="pros.mainImage" mode="aspectFill"></image>
                            <template-Type :product="pros" />
                            <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>
                                    <view v-if="hasLogin">
                                        <template v-if="pros.productCategory == 1">
                                            <template-Price :product="pros" />
                                        </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" />
                                            </view>
                                        </template>
                                        <template v-else>
                                            <view class="p-stars"> <text class="p-no">￥登录可见</text> </view>
                                        </template>
                                    </view>
                                </view>
                            </view>
                        </view>
                    </template>
                    <template v-else>
                        <view class="floor-main-none">
                            <image
                                class="none-image"
                                src="https://static.caimei365.com/app/img/bg/icon_echart_none@2x.png"
                                mode=""
                            ></image>
                            <view class="none-text">暂无数据~</view>
                        </view>
                    </template>
                </view>
            </view>
		</template>
	</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 wxLogin from '@/common/config/wxLogin.js'

export default {
    name:'GoodFloorZone',
    components: {
        uniGrader,
        templateTags,
        templatePrice,
        templateType
    },
	data() {
		return {
			userId: 0,
			userIdentity: 0,
			skeletonShow: true,
			isScrollTop: false,
            current:0,
            listQuery: {
                userId:0, //  用户Id
                zoneId:'', // 专区Id
                typeSort:'', // 分类类型 1产品，2仪器，3耗材配件
                pageNum:1,
                pageSize:12,
                source:1
            },
            imageList: [], //专区轮播
            productList:[],//专区商品
            nomoreText: '上拉显示更多',
            hasNextPage: false,
            loadding: false,
            pullUpOn: true,
            pullFlag: true,
            tabsIndex: 0
		}
	},
    filters: {
        NumFormat(value) {
            //处理金额
            return Number(value).toFixed(2)
        }
    },
	computed: {
		...mapState(['hasLogin', 'userInfo','isWxAuthorize'])
	},
	onLoad(option) {
		if (option.type == 'share') {
			wxLogin.wxLoginAuthorize()
		}
		this.initGetUser(option)
	},
	methods: {
        async initGetUser(option){
            const user = await this.$api.getStorage()
            this.listQuery.zoneId = option.zoneId
            this.listQuery.typeSort = option.typeSort
            this.tabsIndex = option.typeSort*1
            this.listQuery.userId = user.userId ? user.userId : 0
            this.userIdentity = user.userIdentity
            this.getZoneSecond(this.listQuery)
        },
        // 切换分类查询
        handleClickTabS(index){
            this.tabsIndex = index
            this.listQuery.typeSort = index
            this.listQuery.pageNum = 1
            this.getZoneSecond()
        },
        async getZoneSecond() {
            //专区详情
            try {
                const res = await this.CommonService.getZoneSecond(this.listQuery)
                const data = res.data
                this.imageList = data.imageList
                uni.setNavigationBarTitle({ title: `${data.zone.floorTitle}` })
                this.productList = data.products.results
                this.hasNextPage = data.products.hasNextPage
                this.skeletonShow = false
                if (this.hasNextPage) {
                    this.pullUpOn = false
                    this.nomoreText = '上拉显示更多'
                } else {
                    if (this.productList.length < 6) {
                        this.pullUpOn = true
                    } else {
                        this.pullUpOn = false
                        this.loadding = false
                        this.nomoreText = '已至底部'
                    }
                }
            } catch (error) {
                console.log('error', error.msg)
            }
        },
        async OnReachBottomData() {
            // 上滑加载
            try {
                this.listQuery.pageNum += 1
                const res = await this.CommonService.GetHomeNewFloorList(this.listQuery)
                const data = res.data
                this.productList = this.productList.concat(data.products.results)
                this.hasNextPage = data.products.hasNextPage
                if (this.hasNextPage) {
                    this.pullUpOn = false
                    this.nomoreText = '上拉显示更多'
                } else {
                    this.pullUpOn = false
                    this.loadding = false
                    this.nomoreText = '已至底部'
                }
            } catch (error) {
                console.log('error', error.msg)
            }
        },
        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
        }
	},
	onPageScroll(e) {
		//实时获取到滚动的值
		if (e.scrollTop > 400) {
			this.isScrollTop = true
		} else {
			this.isScrollTop = false
		}
	},
	onPullDownRefresh() {
        setTimeout(() => {
            this.listQuery.pageNum = 1
            this.getZoneSecond()
            uni.stopPullDownRefresh()
        }, 200)
	},
    onReachBottom() {
        if (this.hasNextPage) {
            this.loadding = true
            this.pullUpOn = true
            this.OnReachBottomData()
        }
    },
	onShareAppMessage(res) {
		//分享转发
		if (res.from === 'button') {
			// 来自页面内转发按钮
		}
		return {
			title: '采美-一站式生/医美采购服务平台',
			path: `pages/goods/good-floor-zone?type=share&linkId=${this.pageId}`
		}
	},
	onShow() {}
}
</script>

<style lang="scss">
page {
	background-color: #f7f7f7;
}
.container-home {
	width: 100%;
	height: auto;
    box-sizing: border-box;
    padding: 24rpx 24rpx 0 24rpx;
}
.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;
        }
    }
}
.tui-floor-tabs{
    width: 100%;
    height: 88rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    display: flex;
    justify-content: flex-start;
    margin-bottom: 24rpx;
    .top-tabs-item{
        padding: 0 24rpx;
        line-height: 88rpx;
        text-align: center;
        font-size: 30rpx;
        color: #333333;
        cursor: pointer;
        &.active{
            color: #FF5B00;
            font-weight: bold;
            text-decoration: underline;
        }
    }
}
.floor-item-main{
    width: 100%;
    min-height: 600rpx;
    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;
            }
        }
    }
    .floor-main-none{
        width: 100%;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        .none-image {
            width: 220rpx;
            height: 220rpx;
        }
        .none-text {
            font-size: $font-size-28;
            color: #999999;
            line-height: 44rpx;
        }
    }
}
</style>