caimei-applets-caimei/pages/h5/activity/activity-topic.vue

<template>
    <view class="container floor clearfix" :style="{backgroundColor:(pageInfo.backgroundColour && pageInfo.backgroundType == 1) ? pageInfo.backgroundColour : '#f7f7f7',backgroundImage:'url('+pageInfo.backgroundImage+')'}">
        <!-- top -->
        <view
            class="container-top"
            @click="BannerNavigateTo(pageInfo.linkType, pageInfo.linkParam.id, pageInfo.headLink, pageInfo.keyword)"
            v-if="isRequest && headImage !== ''"
        >
            <image :src="headImage"></image>
        </view>
        <tui-skeleton
            v-if="skeletonShow"
            backgroundColor="#fafafa"
            borderRadius="10rpx"
            :isLoading="true"
            :loadingType="5"
        ></tui-skeleton>
        <!-- 楼层 -->
        <view class="container-section tui-skeleton">
            <page-floor :list="pageList" :userIdentity="userIdentity" :pageType="2" v-if="isRequest"></page-floor>
        </view>
        <!-- 侧边 -->
        <scroll-top :isScrollTop="isScrollTop" :bottom="50"></scroll-top>
        <!-- 右侧联系 活动入口 -->
        <activity-contact :pageInfo="pageInfo" v-if="isRequest"></activity-contact>
    </view>
</template>

<script>
import { mapState, mapMutations } from 'vuex'
import customFloor from '@/components/cm-custom/custom-floor' //自定义导航
import templateNav from '@/components/cm-module/pageTemplate/templateNav.vue'
import pageFloor from './components/active-floor.vue'
import ActivityContact from './components/activity-contact.vue'
import authorize from '@/common/config/authorize.js'
import wxLogin from '@/common/config/wxLogin.js'

export default {
    components: {
        customFloor,
        templateNav,
        pageFloor,
        ActivityContact
    },
    data() {
        return {
            userId: 0,
            shopId: 0,
            userIdentity: 0,
            skeletonShow: true,
            headerBtnPosi: this.setHeaderBtnPosi(), //获取设备顶部胶囊高度
            systeminfo: this.setSysteminfo(), //获取设备信息
            CustomBar: this.CustomBar, // 顶部导航栏高度
            navBarsList: [],
            pageList: [], //楼层
            isRequest: false,
            isScrollTop: false,
            pageId: '',
            typeSort: '',
            headImage: '',
            pageInfo: {},
            activityEntryVisiable: false
        }
    },
    onLoad(option) {
        if (option.type == 'share') {
            authorize
                .checkLogin()
                .then(res => {
                    wxLogin.wxLoginAuthorize()
                })
                .catch(err => {
                    console.log(new Date() + '用户未授权微信信息')
                })
        }
        this.pageId = option.linkId
        this.$api
            .getComStorage('userInfo')
            .then(resolve => {
                this.userId = resolve.userId ? resolve.userId : 0
                this.shopId = resolve.shopId ? resolve.shopId : 0
                this.userIdentity = resolve.userIdentity
                this.GetActivityFloorData()
            })
            .catch(error => {
                this.GetActivityFloorData()
            })
        setTimeout(() => {
            this.skeletonShow = false
        }, 2000)
    },
    computed: {
        ...mapState(['hasLogin', 'userInfo', 'identity'])
    },
    methods: {
        GetActivityFloorData() {
            //获取楼层数据
            this.CommonService.GetActivityFloorData({ pageId: this.pageId, userId: this.userId, source: 2 })
                .then(response => {
                    let data = response.data
                    this.typeSort = data.page.typeSort
                    this.pageList = data.floorList
                    this.headImage = data.page.crmHeadImage
                    this.pageInfo = data.page
                    this.isRequest = true
                    uni.setStorageSync('pageLabel', `${data.page.contentLabel}`)
                    uni.setNavigationBarTitle({ title: data.page.title })
                    // this.GetHomeInit()
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        GetHomeInit() {
            //金刚区分类
            this.CommonService.GetFirstClassly({ typeSort: this.typeSort, source: 'crm' })
                .then(response => {
                    this.navBarsList = response.data
                    this.isRequest = true
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        setHeaderBtnPosi() {
            // 获得胶囊按钮位置信息
            let headerBtnPosi = uni.getMenuButtonBoundingClientRect()
            return headerBtnPosi
        },
        setSysteminfo() {
            let systeminfo
            uni.getSystemInfo({
                // 获取设备信息
                success: res => {
                    systeminfo = res
                }
            })
            return systeminfo
        },
        BannerNavigateTo(linkType, linkId, linkHref, keyword) {
            //跳转商品详情页
            console.log(linkType, linkId, linkHref, keyword)
            this.$api.BannerNavigateTo(linkType, linkId, linkHref, keyword)
        }
    },
    onPageScroll(e) {
        //实时获取到滚动的值
        if (e.scrollTop > 400) {
            this.isScrollTop = true
        } else {
            this.isScrollTop = false
        }
    },
    onPullDownRefresh() {
        setTimeout(() => {
            uni.stopPullDownRefresh()
        }, 200)
    },
    onShareAppMessage(res) {
        //分享转发
        if (res.from === 'button') {
            // 来自页面内转发按钮
        }
        return {
            title: '采美-一站式生/医美采购服务平台',
            path: `pages/h5/activity/activity-topic?type=share&linkId=${this.pageId}`
        }
    }
}
</script>

<style lang="scss" scoped>
page {
    background-color: #ffffff;
}
.container {
    min-height: auto !important;
}
.container-home {
    width: 100%;
    height: auto;
}
.container-section {
    width: 100%;
    height: auto;
    background-color: #f7f7f7;
}
.container-top {
    width: 100%;
    height: 340rpx;
    float: left;
    image {
        width: 100%;
        height: 100%;
        display: block;
    }
}
.container-activ {
    width: 100%;
    height: 240rpx;
    box-sizing: border-box;
    padding: 0 24rpx;
    margin: 24rpx 0;
    float: left;
    image {
        width: 100%;
        height: 240rpx;
        display: block;
    }
}
</style>