<template>
	<view class="pages">
		<view class="top-img usercenter">
			<image :src="$getimg + 'usercenter-bg.png'" class="img" mode="widthFix"></image>
			<view class="usercenter-baseinfo">
				<image :src="userInfo.headImage|| ''" class="photo" mode="scaleToFill"></image>
				<view class="text">
					<view class="name">{{userInfo.customerName|| '游客'}}</view>
					<view class="tyep" v-if="userInfo.isCompany">
						<text class="iconfont icon-qiyeyonghu"></text>
						企业用户
					</view>
				</view>
			</view>
			<view class="tool-bar">
				<view class="tool-bar-item">
					<view class="tool-bar-til">我的碳汇量(kg)</view>
					<view class="tool-bar-num">
						<text class="num">4090</text>
						<text class="iconfont icon-jiantou"></text>
					</view>
				</view>
				<view class="tool-bar-item" @click="this.$api.msg('暂未开放')">
					<view class="tool-bar-til">任务中心</view>
					<view class="tool-bar-num">
						<text class="iconfont icon-jiantou"></text>
					</view>
				</view>
			</view>
		</view>
		<!-- top end -->
		<view class="usernav-list icon-form-item-wrap">
			<view class="icon-form-item" @click="$api.href('./certificateList/certificateList')">
				<view class="icon-form-item-imgwrap">
					<image :src="$getimg + 'icon-certificate.png'" class="icon-form-item-img" mode="aspectFit"></image>
				</view>				
				<view class="icon-form-item-text">我的证书</view>
				<view class="icon-form-item-icon"><text class="iconfont icon-jiantou"></text></view>
			</view>
			<view class="icon-form-item" @click="$api.href('./orderList/orderList')">
				<view class="icon-form-item-imgwrap">
					<image :src="$getimg + 'icon-certificate.png'" class="icon-form-item-img" mode="aspectFit"></image>
				</view>				
				<view class="icon-form-item-text">我的订单</view>
				<view class="icon-form-item-icon"><text class="iconfont icon-jiantou"></text></view>
			</view>
			<view class="icon-form-item full-border" @click="$api.href('./subscribe/subscribe')">
				<view class="icon-form-item-imgwrap">
					<image :src="$getimg + 'icon-yonghuzhinan.png'" class="icon-form-item-img" mode="aspectFit"></image>
				</view>				
				<view class="icon-form-item-text">我的认购</view>
				<view class="icon-form-item-icon"><text class="iconfont icon-jiantou"></text></view>
			</view>
			<view class="icon-form-item" @click="$api.href('/pages/use/use')">
				<view class="icon-form-item-imgwrap">
					<image :src="$getimg + 'icon-about.png'" class="icon-form-item-img" mode="aspectFit"></image>
				</view>				
				<view class="icon-form-item-text">关于我们</view>
				<view class="icon-form-item-icon"><text class="iconfont icon-jiantou"></text></view>
			</view>
		</view>
		<!-- usernav-list end -->
		<view class="wrap40 question-nav">
			<view class="question-item" @click="goGuide">
				<view class="question-item-text">
					<view class="question-item-til">新手指南</view>
					<view class="question-item-subtil">一看就懂</view>
				</view>
				<image :src="$getimg + 'icon-guide-nav.png'" class="question-item-img" mode="aspectFit"></image>
			</view>
			<view class="question-item" @click="$api.href('/pages/usercenter/question/question')">
				<view class="question-item-text">
					<view class="question-item-til">常见问题</view>
					<view class="question-item-subtil">解答疑惑</view>
				</view>
				<image :src="$getimg + 'icon-question-nav.png'" class="question-item-img" mode="aspectFit"></image>
			</view>
		</view>
		<!-- question-nav end -->
		<view class="logout" v-if="hasLogin" @click="logout()">退出登录</view>
		<view class="logout" v-if="!hasLogin" @click="$api.href('/pages/login/loginType')">去登录</view>
	</view>
</template>

<script>
	import { mapState, mapMutations } from 'vuex';
	export default {
		data() {
			return {
				$getimg:this.$getimg,
				
			}
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		onShow() {
			console.log('hasLogin',this.hasLogin);
			console.log('userInfo',this.userInfo);
			if (this.hasLogin) {
				this.upInfo();
			}		
		},
		onLoad() {
			
		},
		methods: {
			...mapMutations(['login', 'logout', 'upInfo']),
			goGuide(){
				let that = this;
				uni.removeStorage({
				    key: 'launchFlag',
				    success: function (res) {
				        that.$api.href('/pages/index/guide')
				    }
				});
				
			}

		}
	}
</script>

<style>
	@import url("./usercenter.css");
</style>
