mianxueyoupin/pages/page/index.vue

<template>
	<view class="wanl-page" :style="{
			backgroundColor : pageData.style.pageBackgroundColor,
			backgroundSize : '100% auto',
			backgroundImage : 'url(' + $wanlshop.oss(pageData.style.pageBackgroundImage, 0, 50, 1, 'transparent', 'png') + ')'
		}">
		<!-- 导航条 -->
		<view class="cu-custom" :style="{height: $wanlshop.wanlsys().height + 'px' }">
			<view class="cu-bar fixed" :style="{
				height: $wanlshop.wanlsys().height + 'px', 
				paddingTop: $wanlshop.wanlsys().top + 'px',
				color: pageData.style.navigationBarTextStyle == '#ffffff'?'#ffffff':'#333333',
				backgroundColor: pageData.style.navigationBarBackgroundColor,
				backgroundImage : 'url(' + $wanlshop.oss(pageData.style.navigationBackgroundImage, 414, 0, 1, 'transparent', 'png') + ')'
			}">
				<!-- 1.1.9 升级 其他页面进入 -->
				<view v-if="pagesNum > 1" class="action" @tap="$wanlshop.back(1)"><text class="wlIcon-fanhui1"></text></view>
				<!-- 直接进入 -->
				<view v-else class="action" @tap="$wanlshop.on('/pages/index')"><text class="wlIcon-zhuye"></text></view>
				
				<view class="content" :style="{top: $wanlshop.wanlsys().top + 'px'}">
					{{pageData.params.navigationBarTitleText}}
				</view>
				<view class="action" @tap="showModal('share')">
					<text class="wlIcon wlIcon-fenxiang"></text>
				</view>
			</view>
		</view>
		<!-- 页面组件 -->
		<view v-for="(item, index) in itemData" :key="item.type">
			<view v-if="item.type == 'banner'"><wanl-page-banner :pageData="item" /></view>
			<view v-if="item.type == 'image'"><wanl-page-image :pageData="item" /></view>
			<view v-if="item.type == 'video'"><wanl-page-video :pageData="item" /></view>
			<view v-if="item.type == 'menu'"><wanl-page-menu :pageData="item" /></view>
			<view v-if="item.type == 'notice'"><wanl-page-notice :pageData="item" /></view>
			<view v-if="item.type == 'article'"><wanl-page-article :pageData="item" /></view>
			<view v-if="item.type == 'headlines'"><wanl-page-headlines :pageData="item" /></view>
			<view v-if="item.type == 'search'"><wanl-page-search :pageData="item" /></view>
			<view v-if="item.type == 'activity'"><wanl-page-activity :pageData="item" /></view>
			<view v-if="item.type == 'categoryTitle'"><wanl-page-category-title :pageData="item" /></view>
			<view v-if="item.type == 'classify'"><wanl-page-classify :pageData="item" /></view>
			<view v-if="item.type == 'likes'"><wanl-page-likes :pageData="item" /></view>
			<view v-if="item.type == 'goods'"><wanl-page-goods :pageData="item" /></view>
			<view v-if="item.type == 'bargain'"><wanl-page-bargain :pageData="item" /></view>
			<view v-if="item.type == 'seckill'"><wanl-page-seckill :pageData="item" /></view>
			<view v-if="item.type == 'empty'"><wanl-page-empty :pageData="item" /></view>
			<view v-if="item.type == 'division'"><wanl-page-division :pageData="item" /></view>
		</view>
		<view class="edgeInsetBottom"></view>
		<!-- 模态框 -->
		<view class="WANL-MODAL">
			<!-- 分享 -->
			<view class="cu-modal wanl-share bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share
						ref="wanlShare"
						page="pages/page/index"
						:scene="{id: page_id, qr:'p'}"
						:scrollAnimation="scrollAnimation" 
						:shareTitle="pageData.params.share_title"
						:shareText="pageData.params.navigationBarTitleText" 
						@change="hideModal"
					/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			page_id: null,
			// 页面组件
			itemData: [] ,
			// 页面参数
			pageData: {
				params: {
					navigationBarTitleText: '加载中..',
					share_title: '分享'
				},
				style:{}
			},
			modalName: '',
			scrollAnimation: 300,
			pagesNum: 0
		};
	},
	computed: {
		...mapState(['common'])
	},
	onLoad(query) {
		this.pagesNum = getCurrentPages().length; // 1.1.9 升级
		// 判断是否小程序来源 1.1.9升级
		if(query.hasOwnProperty('scene')){
			let scene = decodeURIComponent(query.scene);
				scene = this.$wanlshop.getParam(scene);
			this.page_id = scene.id;
		}else{
			this.page_id = query.id;
		}
		this.loadData();
	},
	onShow() {
		// #ifdef MP-WEIXIN
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline']
		});
		// #endif
		setTimeout(()=> {
			uni.setNavigationBarColor({  
				frontColor: this.pageData.style.navigationBarTextStyle,  
				backgroundColor: this.pageData.style.navigationBarBackgroundColor
		    })  
		}, 200);
	},
	methods: {
		// 异步加载
		async loadData() {
			await uni.request({
				url: '/wanlshop/page/index',
				data: {
					id: this.page_id
				},
				success: res => {
					this.itemData = res.data.item;
					this.pageData = res.data.page;
					//修改页面标题、导航条前景色frontColor和背景backgroundColor
					this.$wanlshop.title(res.data.page.params.navigationBarTitleText,{
						frontColor: res.data.page.style.navigationBarTextStyle,
						backgroundColor: res.data.page.style.navigationBarBackgroundColor
					});
				}
			});
		},
		// 弹出层
		showModal(name) {
			// 滚动下分享
			setTimeout(() => {
				this.scrollAnimation= 0;
			}, 300);
			this.modalName = name;
		},
		hideModal() {
			// 强制关闭海报
			if(this.modalName == 'share'){
				this.$refs.wanlShare.closePoster();
			}
			this.modalName = null;
		}
	}
};
</script>

<style>
</style>