<view class="container">
	<view  bindtap="bindViewTap" class="userinfo">
		<image class="userinfo-avatar" src="{{ userInfo.avatarUrl }}" background-size="cover"></image>
		<text class="userinfo-nickname">{{ userInfo.nickName }}</text>
	</view>
	<view class="info_list">
		<view class="weui-cells">
			<navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" wx:for="{{ items }}" wx:key="" data-path="{{ item.path }}" data-index="{{ index }}" bindtap="navigateTo">
                <view class="weui-cell__hd">
                    <image src="{{ item.icon }}" style="margin-bottom: 2px;margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                </view>
                <view class="weui-cell__bd">{{ item.text }}</view>
                <view class="weui-cell__ft weui-cell__ft_in-access">
                	<text wx:if="{{ index === 2 }}">{{ item.path }}</text>
                </view>
            </navigator>
        </view>
        <view class="weui-cells">
            <navigator class="weui-cell weui-cell_access" hover-class="weui-cell_active" wx:for="{{ settings }}" wx:key="" data-path="{{ item.path }}" data-index="{{ index }}" bindtap="bindtap">
                <view class="weui-cell__hd">
                    <image src="{{ item.icon }}" style="margin-bottom: 2px;margin-right: 5px;vertical-align: middle;width:20px; height: 20px;"></image>
                </view>
                <view class="weui-cell__bd">{{ item.text }}</view>
                <view class="weui-cell__ft weui-cell__ft_in-access">
                    <text wx:if="{{ index === 0 }}">{{ item.path }}</text>
                </view>
            </navigator>
        </view>
    </view>
    <view class="logout" bindtap="logout">登出账号</view>
</view>

.container{
	font-family: "微软雅黑";
	background: #f2f2f2;
}
.userinfo {
	display: flex;
	flex-direction: column;
	padding: 50rpx 0;
	align-items: center;
	background: #479de6;
}

.userinfo-avatar {
	width: 128rpx;
	height: 128rpx;
	margin: 20rpx;
	border-radius: 50%;
}

.userinfo-nickname {
	color: #fff;
}

.weui-cells {
  position: relative;
  margin-top: 1.17647059em;
  background-color: #FFFFFF;
  line-height: 1.41176471;
  font-size: 17px;
}
.weui-cells:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #D9D9D9;
  color: #D9D9D9;
}
.weui-cells:after {
  content: " ";
  position: absolute;
  left: 0;
  bottom: 0;
  right: 0;
  height: 1px;
  border-bottom: 1rpx solid #D9D9D9;
  color: #D9D9D9;
}

.weui-cell {
  padding: 10px 15px;
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
          align-items: center;
}
.weui-cell:before {
  content: " ";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  height: 1px;
  border-top: 1rpx solid #D9D9D9;
  color: #D9D9D9;
  left: 15px;
}
.weui-cell:first-child:before {
  display: none;
}
.weui-cell_active {
  background-color: #ECECEC;
}
.weui-cell__bd {
  -webkit-box-flex: 1;
  -webkit-flex: 1;
          flex: 1;
   font-size: 15px;
}
.weui-cell__ft {
  text-align: right;
  color: #999999;
  font-size:15px;
}

.logout {
	position: relative;
	margin-top: 1.17647059em;
	line-height: 1.41176471;
	font-size: 17px;
	padding: 10px 15px;
	background: #fff;
	text-align: center;
}

.logout:before {
	content: " ";
	position: absolute;
	left: 0;
	top: 0;
	right: 0;
	height: 1px;
	border-top: 1rpx solid #D9D9D9;
	color: #D9D9D9;
}

.logout:after {
	content: " ";
	position: absolute;
	left: 0;
	bottom: 0;
	right: 0;
	height: 1px;
	border-bottom: 1rpx solid #D9D9D9;
	color: #D9D9D9;
}

const App = getApp()

Page({
	data: {
		userInfo: {},
		items: [
			{
				icon: '../../images/iconfont-order.png',
				text: '我的福利',
				path: '/pages/order/list/index'
			}, 
			{
				icon: '../../images/iconfont-addr.png',
				text: '每日签到',
				path: '/pages/address/list/index'
			}, 
			{
				icon: '../../images/iconfont-kefu.png',
				text: '我的折扣',
				path: '18521708248',
			}, 
			{
				icon: '../../images/iconfont-help.png',
				text: '我的代金券',
				path: '/pages/help/list/index',
			},
		],
		settings: [
			{
				icon: '../../images/iconfont-about.png',
				text: '关于我们',
				path: '/pages/about/index'
			}, 
		]
	},
	onLoad() {
		this.getUserInfo()
	},
	navigateTo(e) {
		const index = e.currentTarget.dataset.index
		const path = e.currentTarget.dataset.path
		App.WxService.navigateTo(path)
    },
    getUserInfo() {
    	const userInfo = App.globalData.userInfo

		if (userInfo) {
			this.setData({
				userInfo: userInfo
			})
			return
		}

		App.getUserInfo(data => {
			console.log(data)
			this.setData({
				userInfo: data
			})
		})
    },
    logout() {
    	App.WxService.showModal({
            title: '友情提示', 
            content: '确定要登出吗？', 
        })
        .then(data => data.confirm == 1 && this.signOut())
    },
    signOut() {
    	App.HttpService.signOut()
    	.then(data => {
    		console.log(data)
    		if (data.meta.code == 0) {
    			App.WxService.removeStorageSync('token')
    			App.WxService.redirectTo('/pages/login/index')
    		}
    	})
    },
})