caimei-applets-caimei/pages/h5/activity/quick-operation.vue

<template>
	<view class="container floor clearfix">
		<!-- 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()
			})
		},
		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.skeletonShow = false
					// 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/quick-operation?type=share&linkId=${this.pageId}`
			}
		},
		
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #FFFFFF;
	}
	.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>