<template>
	<view>
		<view class="status_bar"></view>
		
		<view class="account_info">
			<image src="../../static/img/logo.png" mode="" class="header_img" v-show="!user_info.isLogin"></image>
			<image :src="user_info.user_head?user_info.user_head:user_info.headicons[5]" mode="" class="header_img" v-if="user_info.isLogin"></image>
			<view class="info_name" v-if="!user_info.isLogin">
				<navigator url="/pages/login/index" >
					LOGIN / SIGUP>
				</navigator>
			</view>
			<view class="info_name" v-else>
				<navigator url="/pages/account/myProfile" >
					hi,{{user_info.nickname!=''?user_info.nickname:user_info.email}}>
				</navigator>
			</view>
			
			<view class="info_like">
				<navigator url="/pages/account/myCoupons" class="info_like_item">
					<text class="info_like_item_img">6</text>
					<text class="info_like_item_span">Coupons</text>
				</navigator>
				<navigator url="/pages/account/pointsDetails" class="info_like_item">
					<text class="info_like_item_img">25</text>
					<text class="info_like_item_span">Points</text>
				</navigator>
				<navigator url="/pages/account/wishlist" class="info_like_item">
					<image src="../../static/img/like.png" mode="" class="info_like_item_img"></image>
					<text class="info_like_item_span">Wishlist</text>
				</navigator>
				<navigator url="/pages/account/favorites" class="info_like_item">
					<image src="../../static/img/favorites.png" mode="" class="info_like_item_img"></image>
					<text class="info_like_item_span">Favorites</text>
				</navigator>
			</view>
		</view>
		
		<view class="order">
			<view class="order_title">My Orders</view>
			<view class="order_info">
				<navigator url="/pages/account/myOrders" class="order_info_item">
					<image src="../../static/img/unpaid.png" mode="" class="info_img"></image>
					<text>Unpaid</text>
				</navigator>
				<view class="order_info_item">
					<image src="../../static/img/Processing.png" mode="" class="info_img"></image>
					<text>Processing</text>
				</view>
				<view class="order_info_item">
					<image src="../../static/img/Shipped.png" class="info_img" mode=""></image>
					<text>Shipped</text>
				</view>
				<view class="order_info_item">
					<image src="../../static/img/Returns.png" class="info_img" mode=""></image>
					<text>Returns</text>
				</view>
			</view>
		</view>
		
		<view class="order">
			<view class="order_title">My Service</view>
			<view class="order_info">
				<navigator url="/pages/account/message" class="order_info_item">
					<image src="../../static/img/msg.png" class="info_img" mode=""></image>
					<text>Message</text>
				</navigator>
				<navigator url="/pages/account/myReview" class="order_info_item">
					<image src="../../static/img/My Review.png" class="info_img" mode=""></image>
					<text>My Review</text>
				</navigator>
				<navigator url="/pages/account/address" class="order_info_item">
					<image src="../../static/img/My Address.png" class="info_img" mode=""></image>
					<text>My Address</text>
				</navigator>
				<view class="order_info_item">
					<image src="../../static/img/Return Policy.png" class="info_img" mode=""></image>
					<text>Return Policy</text>
				</view>
				<view class="order_info_item">
					<image src="../../static/img/Help Center.png" class="info_img" mode=""></image>
					<text>Help Center</text>
				</view>
				<view class="order_info_item">
					<image src="../../static/img/Attention CHIC.png" class="info_img" mode=""></image>
					<text>Attention CHIC</text>
				</view>
				<view class="order_info_item">
					<image src="../../static/img/About CHIC.png" class="info_img" mode=""></image>
					<text>About CHIC</text>
				</view>
				
				<navigator url="/pages/account/settings" class="order_info_item">
					<!-- <view class="order_info_item"> -->
						<image src="../../static/img/Setting.png" class="info_img" mode=""></image>
						<text>Setting</text>
					<!-- </view> -->
				</navigator>
			</view>
			
			<image src="../../static/img/mine_banner.png" class="mine_banner" mode=""></image>
			<view class="order_title">Recommend</view>
			
			<scroll-view class="spike1" scroll-x="true" :show-scrollbar="false">
				<view class="spike1_item" v-for="(item,index) in 8"  :key="index">
					<view class="spike1_item_img"></view>
					<view class="spike1_item_bottom1">
						<view class="spike1_item_text">Adidas Yeezy Boost 350  DazzlingBlue Black</view>
						<text class="spike1_item_text1">US$314.00</text>
					</view>
					
				</view>
			</scroll-view>
			
		</view>
	</view>
</template>

<script>
	import {defaultRequest2} from '../../api/index.js'
	export default {
		data() {
			return {
				user_info:{
					isLogin:false,
				}
			}
		},
		methods:{
			getUserInfo(){
				let data={_action:'getinfo'}
				defaultRequest2(data).then(res=>{
					console.info(res)
					if(res.error==0){
						res.data.isLogin=true
						this.user_info=res.data
						uni.setStorageSync('user_info',this.user_info)
					}else{
						this.user_info=uni.getStorageSync('user_info')
					}
				})
			}
		},
		onShow() {
			this.user_info=uni.getStorageSync('user_info')
			this.getUserInfo()
		}
	}
</script>

<style lang="scss" scoped>
	.account_info{
		padding: 0 58rpx;
		padding-top: 50rpx;
		padding-bottom: 30rpx;
		border-bottom: 13.33rpx #F7F7F7 solid;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		
		.header_img{
			width: 144rpx;
			height: 144rpx;
			border-radius: 50%;
			margin-bottom: 36.67rpx;
			background-color: #F7F7F7;
		}
		.info_name{
			font-size: 36rpx;
			font-weight: bold;
			margin-bottom: 74.67rpx;
		}
		.info_like{
			display: flex;
			justify-content: space-between;
			align-items: center;
			width: 100%;
			.info_like_item{
				font-size: 40rpx;
				font-weight: 400;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				
				.info_like_item_img{
					width: 40rpx;
					height: 40rpx;
					margin-bottom: 14.67rpx;
					display: block;
				}
				.info_like_item_span{
					font-size: 21.33rpx;
					
				}
			}
		}
	}
	.order{
		padding: 0 23.33rpx;
		padding-top: 37.33rpx;
		padding-bottom: 43.33rpx;
		border-bottom: 13.33rpx #F7F7F7 solid;
		
		.order_title{
			font-size: 26.67rpx;
			font-weight: bold;
		}
		.order_info{
			width: 100%;
			// padding: 0 35.33rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			box-sizing: border-box;
			flex-wrap: wrap;
			
			.order_info_item{
				width: 25%;
				font-size: 21.33rpx;
				font-weight: 400;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-top: 38.67rpx;
				
			}
			.info_img{
				width: 40rpx;
				height: 40rpx;
				margin-bottom: 20rpx;
			}
		}
		.mine_banner{
			width: 100%;
			height: 226.67rpx;
			margin: 56rpx 0;
		}
		.spike1{
			white-space: nowrap;
			width: 100%;
			margin-top: 46.67rpx;
			::-webkit-scrollbar {
				width: 0;
				height: 0;
				background-color: transparent;
			} 
			
			.spike1_item{
				color: #191919;
				font-size: 24.67rpx;
				margin-right: 16.67rpx;
				width: 286.67rpx;
				display: inline-block;
				font-weight: 400;
				
				.spike1_item_img{
					width: 286.67rpx;
					height: 286.67rpx;
					
					background-color: #999999;
				}
				.spike1_item_bottom{
					padding-left: 9.33rpx;
					margin-top: 22.67rpx;
					
					.spike1_item_text{
						color: #9D9D9D;
						font-size: 21.33rpx;
						text-decoration: line-through;
					}
					.spike1_item_text1{
						// color: #9D9D9D;
						font-size: 27.33rpx !important;
						font-weight: bold !important;
					}
				}
				.spike1_item_bottom1{
					padding-left: 9.33rpx;
					margin-top: 19.33rpx;
					font-weight: bold;
					
					.spike1_item_text{
						color: #000000;
						font-size: 16rpx;
						font-weight: 400;
						margin-bottom: 20.67rpx;
						white-space: break-spaces;
						
					}
				}
				
			}
			.spike1_item:last-child{
				margin-right: 0;
			}
		}
	}
</style>