<template>
	<view class="view-box">
		<!-- :isBack="true" -->
		<cu-custom  :bgColor="bgColor" :bgImage="bgImage">
			<block slot="content">{{ customData.name }}</block>
		</cu-custom>
		
		<!-- 自定义售后页面  -->
		<view class="after-wrp">
		<view>请选择服务类型</view>
		<!-- 安装 维修 维护 -->
		<image @click="toinsl" src="../../static/insall.png" mode="widthFix"></image>
		<image @click="toserve" src="../../static/service.png" mode="widthFix"></image>
		<image @click="tomaintain" src="../../static/maintenance.png" mode="widthFix"></image>
			
		</view>
		
		
		<!--  -->
		<!-- 自定义底部导航 -->
		<shopro-tabbar></shopro-tabbar>
		<!-- 登录提示 -->
		<shopro-login-modal></shopro-login-modal>
		
	</view>
</template>  

<script>
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 shGrid from './components/sh-grid.vue';
import shTitleCard from './components/sh-title-card.vue';
import shOrder from './components/sh-order.vue';
import shWallet from './components/sh-wallet.vue';
// #ifdef MP-WEIXIN
import { HAS_LIVE } from '@/env';
import shLive from './components/sh-live.vue';
// #endif

import { mapMutations, mapActions, mapState } from 'vuex';
export default {
	components: {
		shSearch,
		shBanner,
		shUserinfo,
		shHotGoods,
		shTitleCard,
		shOrder,
		shWallet,
		shMenu,
		shAdv,
		shGrid,
		shCoupon,
		shSeckill,
		shGroupon,
		shRichtext,
		shNav,
		// #ifdef MP-WEIXIN
		shLive
		// #endif
	},
	data() {
		return {
			viewData: {},
			// #ifdef MP-WEIXIN
			HAS_LIVE: HAS_LIVE,
			// #endif
			viewId: 0,
			bgColor: '',
			bgImage: '',
			customData: {}
		};
	},
	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;
			}
		}
	},
	onLoad(option) {
		uni.getStorage({
			key:'token',
			fail() {
				uni.showToast({
					title:'请先登录',
					icon:'none'
				})
				uni.reLaunch({
					url:'/pages/index/user'
				})
			}
		})
		this.viewId = this.$Route.query.id;
	},
	onShow() {
		// #ifndef MP-WEIXIN
		if (this.info && this.info.name) {
			uni.setNavigationBarTitle({
				title: this.info.name
			});
		}
		// #endif
		this.getViewData();
	},
	methods: {
		...mapActions(['getUserInfo', 'getOrderNum']),
		// 路由跳转
		jump(path, parmas) {
			this.$Router.push({
				path: path,
				query: parmas
			});
		},
		toinsl(){
			uni.navigateTo({
				url:'/pages/after/install/install'
			})
		},
		toserve(){
			uni.navigateTo({
				url:'/pages/after/service/service'
			})
		},
		tomaintain(){
			uni.navigateTo({
				url:'/pages/after/maintain/maintain'
			})
		},
		getViewData() {
			let that = this;
			that.$api('custom', {
				id: that.viewId
			}).then(res => {
				if (res.code == 1) {
					that.viewData = res.data.template;
					that.customData = res.data;
					uni.setNavigationBarTitle({
						title: res.data.name
					});
				}
			});
		}
	}
};
</script>

<style lang="scss" scoped>
	.after-wrp{
		width: 622rpx;
		margin: 0 auto;
		padding-top: 25rpx;
		>view{
			color: #323233;
			font-size: 40rpx;
			font-weight: 600;
		}
		>image:nth-child(2){
			margin-top: 64rpx;
		}
		>image{
			width: 622rpx;
			margin-bottom: 32rpx;
		}

	}
	
</style>