caimei-applets-hehe/pages/tabBar/index/index.vue

<template>
    <view class="home">
        <tui-skeleton v-if="isRequest" loadingType="2"></tui-skeleton>
        <template v-else>
            <!-- 首页自定义导航栏 -->
            <view class="search-input" :class="{ fixed: isSticky }">
                <view class="search-content" @click="this.$api.navigateTo(clickPath)">
                    <text class="iconfont icon-sousuo"></text> <view class="search-text">搜索商品</view>
                </view>
            </view>
            <!-- 主页内容 -->
            <view class="swiper-content" :class="{ top: isSticky }">
                <!-- 轮播 -->
                <banner :list="bannerImageList"></banner>
            </view>
            <!-- 商品列表 -->
            <view class="container-section">
                <view v-for="(floor, i) in productFloor" :key="i">
                    <!-- 楼层标题区域 -->
                    <view class="floor-title">
                        <view class="title">
                            <view class="name">{{ floor.title }}</view>
                            <view class="desc">{{ floor.description }}</view>
                        </view>
                        <view class="more" @click="navToDetailPage(floor)">
                            <template v-if="floor.productList.length >= 6">
                                <text>更多</text> <text class="iconfont tui-icon-arrowright"></text>
                            </template>
                        </view>
                    </view>
                    <!-- 商品列表区域 -->
                    <view class="product-list">
                        <template v-for="(product, index) in floor.productList">
                            <cm-product class="product" :key="index" :data="product"></cm-product>
                        </template>
                    </view>
                </view>
            </view>
            <!-- 侧边 -->
            <scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
            <!-- 活动弹窗 -->
            <cm-active-popup
                :visible="activePopupVisible"
                :image="couponActivityIcon"
                @click="activeClick"
                @closed="activeClosed"
            ></cm-active-popup>
            <!-- 领取优惠券提醒 -->
            <cm-selector-coupons
                :visible="tipVisible"
                title="呵呵商城"
                subTitle="您已获得优惠券奖励，赶紧去领取吧！"
                :image="StaticUrl + 'logo.png'"
                @click="handleSelectorClick"
            ></cm-selector-coupons>
        </template>
    </view>
</template>

<script>
import banner from '@/components/cm-module/homeIndex/banner.vue'
import CmProduct from '@/components/cm-module/cm-product/cm-product.vue'
import CmActivePopup from '@/components/cm-module/cm-active-popup/cm-active-popup.vue'
import CmSelectorCoupons from '@/components/cm-module/cm-selector-coupons/cm-selector-coupons.vue'
import { mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    components: {
        banner,
        CmActivePopup,
        CmSelectorCoupons,
        CmProduct
    },
    data() {
        return {
            StaticUrl: this.$Static,
            isSticky: false,
            clickPath: '/pages/goods/search',
            productFloor: [], //商品列表
            bannerImageList: [], //轮播
            pageNum: 1,
            pageSize: 20,
            hasNextPage: false,
            isScrollTop: false,
            isRequest: true,
            activePopupVisible: false, // 活动弹窗
            tipVisible: true //优惠券领取提示
        }
    },
    onLoad(option) {
        // 收集分享信息
        if (option.type && option.type === 'share') this.setInviteUserId(option.inviteUserId)
        this.init()
    },
    computed: {
        ...mapGetters(['hasLogin', 'activePopupType', 'userId', 'otherCouponFlag', 'showCouponPopup']),
        couponActivityIcon() {
            let icon = 'news'
            switch (this.activePopupType) {
                case 1:
                    icon = 'get'
                    break
                case 2:
                    icon = 'news'
                    break
            }
            return `${this.StaticUrl}icon-coupons-${icon}.png`
        }
    },
    watch: {
        activePopupType(val) {
            if (val === 0 || !this.showCouponPopup) return
            // 定时开启弹窗
            setTimeout(() => {
                this.activePopupVisible = true
            }, 1000)
        }
    },
    methods: {
        ...mapMutations('coupon', ['updatePopupType']),
        ...mapMutations('user', ['setInviteUserId']),
        ...mapActions('user', ['wechatlogin']),
        ...mapActions('cart', ['getCartNumber']),
        // 首页初始化
        async init() {
            this.wechatlogin()
            try {
                await this.GetHomeBanner() // 轮播图
                await this.GetHomeProductList() // 楼层
                this.isRequest = false
                this.tipVisible = this.otherCouponFlag
            } catch (e) {
                this.$util.msg(e.msg, 2000)
            }
            if (this.tipVisible) {
                setTimeout(() => {
                    this.tipVisible = false
                }, 5000)
            }
        },
        //初始化首页数据
        GetHomeBanner() {
            return this.CommonService.GetProductCarousel().then(response => {
                let data = response.data
                this.bannerImageList = data
            })
        },
        //初始化首页商品数据
        GetHomeProductList() {
            return this.ProductService.QueryProductFloor().then(response => {
                this.productFloor = response.data
            })
        },
        handleSelectorClick() {
            this.$api.navigateTo('/pages/user/activity/coupon-find-list')
        },
        //跳转楼层
        navToDetailPage(floor) {
            this.$api.navigateTo(`/pages/goods/good-floorMore?floorId=${floor.floorId}&title=${floor.title}`)
        },
        // 点击了活动弹窗
        activeClick() {
            this.activePopupVisible = false
            this.updatePopupType(0)
            uni.setStorageSync('couponPopupType', new Date().getDay())
            this.$api.navigateTo('/pages/user/activity/coupon-find-list')
        },
        // 活动弹窗关闭
        activeClosed() {
            this.activePopupVisible = false
            console.log(this.activePopupType)
            this.updatePopupType(this.activePopupType - 1)
            uni.setStorageSync('couponPopupType', new Date().getDay())
        }
    },
    onPageScroll(e) {
        this.isSticky = e.scrollTop > 0
        this.isScrollTop = e.scrollTop > 400
    },
    //下拉刷新
    onPullDownRefresh() {
        this.GetHomeBanner()
        this.GetHomeProductList()
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 2000)
    },
    onShareAppMessage(res) {
        //分享转发
        if (res.from === 'button') {
            // 来自页面内转发按钮
        }
        return {
            title: '国内外知名美容院线护肤品线上商城~',
            path: `pages/tabBar/index/index?type=share&inviteUserId=${this.userId}`,
            imageUrl: 'https://static.caimei365.com/app/mini-hehe/icon/icon-index-share.jpg'
        }
    },
    onShow() {
        if (this.hasLogin) {
            this.getCartNumber()
        }
    }
}
</script>

<style lang="scss" scoped>
.home {
    background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-index-bg.png) no-repeat top center;
    background-size: 750rpx auto;
    background-position-y: -50rpx;
}
.swiper-content {
    &.top {
        padding-top: 120rpx;
    }
}
.container-section {
    width: 100%;
    padding: 12rpx 24rpx;
    background-color: #f7f7f7;
    box-sizing: border-box;
    .product-list {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        .product {
            margin: 12rpx 0;
        }
    }
    .floor-title {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 12rpx 0;
        .title {
            .name {
                font-size: 34rpx;
                font-weight: bold;
                text-align: left;
                line-height: 49rpx;
                color: #333;
            }
            .desc {
                color: #999999;
                font-size: $font-size-26;
            }
        }
        .more {
            text {
                font-size: $font-size-26;
                text-align: right;
                line-height: 49rpx;
                color: #999999;
            }
            .iconfont {
                font-size: $font-size-30;
                color: #999999;
            }
        }
    }
}
.search-input {
    width: 100%;
    padding: 24rpx;
    box-sizing: border-box;
    background: linear-gradient(180deg, #fa55bf 0%, #f8458b 100%);
    &.fixed {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 99;
    }
    .search-content {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        width: 702rpx;
        height: 66rpx;
        border-radius: 33rpx;
        color: #8a8a8a;
        background: #fff;
        box-sizing: border-box;
        padding: 0 24rpx;
        .iconfont {
            font-size: $font-size-34;
            margin-right: 12rpx;
        }
        .search-text {
            font-size: $font-size-24;
        }
    }
}
</style>