<template>
	<view class="wrap-box">
		<view class="user-box">
			<block v-if="template.length" v-for="(item, index) in template" :key="index">
				<!-- 搜索 -->
				<sh-search v-if="item.type === 'search'" :detail="item" :bgcolor="bgcolor"></sh-search>
				<!-- 轮播 -->
				<sh-banner v-if="item.type === 'banner'" :detail="item.content" @getbgcolor="getbgcolor"></sh-banner>
				<!-- 菜单 -->
				<sh-menu v-if="item.type === 'menu'" :detail="item.content" :menu="item.content.style" :imgW="94"></sh-menu>
				<!-- 推荐商品 -->
				<sh-hot-goods v-if="item.type === 'goods-list' || item.type === 'goods-group'" :detail="item.content"></sh-hot-goods>
				<!-- 广告魔方 -->
				<sh-adv v-if="item.type === 'adv'" :detail="item.content"></sh-adv>
				<!-- 优惠券 -->
				<sh-coupon v-if="item.type === 'coupons'" :detail="item.content"></sh-coupon>
				<!-- 秒杀 -->
				<sh-seckill v-if="item.type === 'seckill'" :detail="item.content"></sh-seckill>
				<!-- 拼团 -->
				<sh-groupon v-if="item.type === 'groupon'" :detail="item.content"></sh-groupon>
				
				
				<!-- DIY -->
				<!-- 发现bug则归位 -->
				<!-- item.type === 'user' || item.type === 'order-card' || -->
				<view v-if=" item.type === 'nav-list'"  class="back-wrapper">
				<!-- 个人信息 -->
				<!-- -->
				 <!-- v-if="item.type === 'user'" -->
				<sh-userinfo  :detail="item.content"></sh-userinfo>
				<!-- 订单卡片 -->
				<!--  -->
				<!-- v-if="item.type === 'order-card'" -->
				<sh-order  :detail="item.content"></sh-order>	
				<!-- 功能列表 -->
				 <!-- -->
				 <!-- v-if="item.type === 'nav-list'" -->
				<sh-nav   :detail="item.content"></sh-nav>
				</view>
				
				<!-- 钱包 -->
				<!-- 溯泉不需要 <sh-wallet v-if="item.type === 'wallet-card'" :detail="item.content"></sh-wallet> -->
				<!-- 九宫格列表 -->
				<!-- <sh-grid v-if="item.type === 'grid-list'" :detail="item.content"></sh-grid> -->
				<!-- 富文本 -->
				<sh-richtext v-if="item.type === 'rich-text'" :detail="item.content"></sh-richtext>
				<!-- 功能标题 -->
				<sh-title-card v-if="item.type === 'title-block'" :detail="item.content"></sh-title-card>
				<!-- 直播 -->
				<!-- #ifdef MP-WEIXIN -->
				<sh-live v-if="item.type === 'live' && HAS_LIVE" :detail="item.content"></sh-live>
				<!-- #endif -->
			</block>
			<!-- 版本号 -->
			<view class="foot_box">
				<view class="copyright y-f" v-if="info">
					<view class="code2">联系电话: {{ info.phone}}</view>
				</view>
			</view>

			<!-- 关注弹窗 -->
			<!-- <shopro-float-btn></shopro-float-btn> -->
			<!-- 连续弹窗提醒 -->
			<shopro-notice-modal></shopro-notice-modal>
			<!-- 登录提示 -->
			<shopro-login-modal></shopro-login-modal>
		</view>
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
	</view>
</template>

<script>
import Wechat from '@/common/wechat/wechat';
import shSearch from './components/sh-search.vue';
import shBanner from './components/sh-banner.vue';
import shHotGoods from './components/sh-hot-goods.vue';
import shMenu from './components/sh-menu.vue';
import shAdv from './components/sh-adv.vue';
import shCoupon from './components/sh-coupon.vue';
import shSeckill from './components/sh-seckill.vue';
import shGroupon from './components/sh-groupon.vue';
import shRichtext from './components/sh-richtext.vue';
import shNav from './components/sh-nav.vue';
import shUserinfo from './components/sh-userinfo.vue';
import shOrder from './components/sh-order.vue';
import shWallet from './components/sh-wallet.vue';
import shGrid from './components/sh-grid.vue';
import shTitleCard from './components/sh-title-card.vue';

import shoproNoticeModal from '@/components/shopro-notice-modal/shopro-notice-modal.vue';
import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {
		shSearch,
		shBanner,
		shHotGoods,
		shMenu,
		shAdv,
		shCoupon,
		shSeckill,
		shGroupon,
		shRichtext,
		shNav,
		shUserinfo,
		shOrder,
		shWallet,
		shGrid,
		shTitleCard,
		shoproNoticeModal
	},
	data() {
		return {
			platform: uni.getStorageSync('platform'), //当前平台。
			isRefresh: false, //更新
			scrollTop: 0, //页面滚动距离
			bgcolor: ''
		};
	},
	computed: {
		...mapState({
			initData: state => state.init.initData, //初始化数据
			template: state => state.init.templateData.user, //模板数据
			userInfo: state => state.user.userInfo,
			orderNum: state => state.user.orderNum,
			cartNum: state => state.cart.cartNum,
			forceOauth: state => state.user.forceOauth
		}),
		info() {
			if (this.initData) {
				return this.initData.info;
			}
		},
		popupUser() {
			if (this.initData.popup) {
				return this.initData.popup.content.user;
			}
		}
	},
	onPullDownRefresh() {
		this.init();
	},
	onLoad() {},
	onShow() {
		this.$store.commit('CART_NUM');
		this.init();
	},
	methods: {
		...mapActions(['getUserInfo', 'getOrderNum']),
		// 初始化
		init() {
			return Promise.all([this.getUserInfo(), this.getOrderNum()])
				.then(() => {
					uni.stopPullDownRefresh();
				})
				.catch(() => {
					uni.stopPullDownRefresh();
				});
		},

		jump(path, query) {
			this.$Router.push({
				path: path,
				query: query
			});
		},
		getbgcolor(e) {
			this.bgcolor = e;
		}
	}
};
</script>

<style lang="scss">

.back-wrapper{
	    background-size: cover;
	    background-image:url('../../static/background.png');
	    background-repeat: no-repeat;
}
.user-box {
	overflow-x: hidden;
	position: relative;
	overflow-y: auto;
	// height: 100%;
}

// 微信登录蒙层
.login-box {
	position: fixed;
	z-index: 9999;
	width: 100%;
	height: 100%;
	background: none;
}

// 顶部
.transtion-head {
	height: 120rpx;
	background: #fff;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 99;
	transition: all 0.2s linear;
	transform: translateY(-120rpx);
	border-bottom: 1rpx solid #f2f2f2;
}

.transtion-head--active {
	height: 120rpx;
	background: #fff;
	width: 100%;
	position: fixed;
	top: 0;
	z-index: 99;
	transition: all 0.2s linear;
	transform: translateY(0rpx);
	border-bottom: 1rpx solid #f2f2f2;
}

.foot_box {
	padding-top: 24rpx;
	padding-bottom: calc(var(--window-bottom) + 30px);
	margin-bottom: 50rpx;
}

.copyright {
	color: #999;

	.code1 {
		font-size: 24rpx;
	}

	.code2 {
		font-size: 20rpx;
		margin-top: 10rpx;
	}
}
</style>