huajucanyin/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') + ')'
			}">
				<view class="action" @tap="$wanlshop.back(1)">
					<text class="wlIcon-fanhui1"></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 bottom-modal" :class="modalName == 'share' ? 'show' : ''" @tap="hideModal">
				<view class="cu-dialog" @tap.stop="">
					<wanl-share 
						:scrollAnimation="scrollAnimation" 
						:shareTitle="pageData.params.share_title" 
						:shareText="pageData.params.navigationBarTitleText" 
						:image="$wanlshop.appstc('/common/logo.png')" 
						:href="common.appConfig.domain+'/pages/page/index?id='+pageId+'&QRtype=page'"
					@change="hideModal"/>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { mapState } from 'vuex';
export default {
	data() {
		return {
			pageId: null,
			// 页面组件
			itemData: [] ,
			// 页面参数
			pageData: {
				params: {
					navigationBarTitleText: '加载中..',
					share_title: '分享'
				},
				style:{}
			},
			modalName: '',
			scrollAnimation: 300
		};
	},
	computed: {
		...mapState(['common'])
	},
	onLoad(option) {
		this.pageId = option.id;
		this.loadData(option);
	},
	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(option) {
			this.$api.get({
				url: '/wanlshop/page/index',
				data: option,
				success: res => {
					this.itemData = res.item;
					this.pageData = res.page;
					//修改页面标题、导航条前景色frontColor和背景backgroundColor
					this.$wanlshop.title(res.page.params.navigationBarTitleText,{
						frontColor: res.page.style.navigationBarTextStyle,
						backgroundColor: res.page.style.navigationBarBackgroundColor
					});
				}
			});
		},
		// 弹出层
		showModal(name) {
			// 滚动下分享
			setTimeout(() => {
				this.scrollAnimation= 0;
			}, 300);
			this.modalName = name;
		},
		hideModal() {
			this.modalName = null;
		}
	}
};
</script>

<style>
</style>