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

<template>
	<view class="container floor clearfix">
		<!-- top -->
		<view class="container-top"><image src="http://static.caimei365.com/app/meibohui/banner.jpg" mode=""></image></view>
		<view class="container-activ" @click="LookMyCouponDetils"><image src="http://static.caimei365.com/app/meibohui/meibo_coupon_02.png" mode=""></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>
	</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/cm-module/homeIndex/pageFloor.vue'
	import authorize from '@/common/config/authorize.js'
	import wxLogin from "@/common/config/wxLogin.js"
	
	export default{
		components:{
			customFloor,
			templateNav,
			pageFloor
		},
		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:'',
			}
		},
		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.GetInstrumentPageData();
			}).catch(error =>{
				this.GetInstrumentPageData();
			})
			setTimeout(()=>{
				this.skeletonShow = false
			},2000)
		},
		computed: {
			...mapState(['hasLogin','userInfo','identity'])
		},
		methods:{
			GetInstrumentPageData(){//获取楼层数据
				this.CommonService.GetInstrumentPageData({pageId:this.pageId,userId:this.userID,source:2}).then(response =>{
					let data = response.data
					this.typeSort = data.page.typeSort
					this.pageList = data.floorList
					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
			},
		},
		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/goods/good-floor?type=share&linkId=${this.pageId}`
			}
		},
		onShow() {
			
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.container-home{
		width: 100%;
		height: auto;
	}
	.container-section{
		width: 100%;
		height: auto;
		background-color: #F7F7F7;
	}
	.container-top{
		width: 100%;
		height: 500rpx;
		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>