<template>

	<view class="my">
		<view class="topCard">
			<view class="user">
				<image src="/static/icon/avatar.png" style="height: 176rpx;width: 176rpx;"></image>
				<view class="userinfo">
					<text class="unlogin" v-if="!islogin">请点击登录</text>
					<text class="username" v-if="islogin" @click="goPersonData">用户oo1</text>
					<text class="userId" v-if="islogin" @click="goPersonData">ID23923</text>
				</view>
				<image src="/static/icon/setting.png"	@click="goSetting"
					style="width: 41rpx;height: 44rpx; position: absolute;top:0rpx;right: 24rpx;"></image>
			</view>

			<view class="membership">
				<view class="flex">
					<view style="display: flex;align-items: center;">
						<image style="width: 52rpx ;height: 46rpx;" src="../../static/icon/vip.png"></image>
						<text class="join">加入会员</text>
					</view>

					<view style="display: flex;align-items: center;">
						<text class="gojoin">去加入</text>
						<image style="width: 12rpx ;height: 20rpx;" src="../../static/icon/right.png"></image>
					</view>
				</view>
			</view>
			
			<view class="orders">
				<view class="nav">
					<view class="myorder">我的订单</view>
					<view class="more">
						<text style="margin-right: 8rpx;" @click="goMyorders(0)">查看更多</text>
						<image style="width: 12rpx ;height: 20rpx;" src="../../static/icon/right.png"></image>
					</view>
				</view>
				
				<view class="content">
					<view class="flexbox" @click="goMyorders(1)">
						<image style="width: 56rpx ;height: 52rpx;" src="../../static/icon/exchange.png"></image>
						<text>待兑换</text>
					</view>
					<view class="flexbox" @click="goMyorders(2)">
						<image style="width: 54rpx ;height: 52rpx;" src="../../static/icon/shipments.png"></image>
						<text>待发货</text>
					</view>
					<view class="flexbox" @click="goMyorders(3)">
						<image style="width: 56rpx ;height: 52rpx;" src="../../static/icon/Receipt.png"></image>
						<text>待收货</text>
					</view>
					<view class="flexbox" @click="goMyorders(4)">
						<image style="width: 54rpx ;height: 52rpx;" src="../../static/icon/finish.png"></image>
						<text>已完成</text>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 列表 -->
		<view style="padding: 0 30rpx;">
			<view class="list" v-for="(item,index) in list" @click="goDetail(index)">
				<view class="title">{{item.title}}</view>
				<view class="container">{{item.content}}</view>
				<image  src="../../static/icon/right.png"></image>
			</view>
			
		</view>
		
		<!-- 底部导航栏 -->
		<view style="height: 140rpx; width: 100%;"></view>
		<tab-bar checked="my"></tab-bar>

	</view>
</template>

<script>
	import TabBar from '../../components/TabBar/tabbar.vue'
	export default {
		components: {
			TabBar
		},
		data() {
			return {
				islogin: true,
				list:[{
					title:'积分',
					content:'积分兑换奖品'
				},{
					title:'奖品',
					content:'查看所有奖品'
				},{
					title:'点赞',
					content:'查看所有点赞'
				}]
			};
		},
		methods:{
			// 跳转个人信息
			goPersonData(){
				uni.navigateTo({
					url:'/pages/my/PersonalData/personalData'
				})
			},
			// 跳转设置页面
			goSetting(){
				uni.navigateTo({
					url:'/pages/my/setting/setting'
				})
			},
			// 跳转积分页
			goDetail(index){
				if(index==0){
					uni.navigateTo({
						url:'/pages/my/integral/integral'
					})
				}else if(index==1){
					uni.navigateTo({
						url:'/pages/my/prize/prize'
					})
				}else{
					uni.navigateTo({
						url:'/pages/my/Kudos/Kudos'
					})
				}
			},
			// 跳转订单页
			goMyorders(index){
				switch(index){
					case 0:
						uni.navigateTo({
							url:'/pages/my/myorders/orders'
						})
						break;
					case 1:
						uni.navigateTo({
							url:'/pages/my/myorders/orders?current='+1
						})
					break;
					case 2:
						uni.navigateTo({
							url:'/pages/my/myorders/orders?current='+2
						})
					break;
					case 3:
						uni.navigateTo({
							url:'/pages/my/myorders/orders?current='+3
						})
					break;
					case 4:
						uni.navigateTo({
							url:'/pages/my/myorders/orders?current='+4
						})
					break;
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	.my {
		height: 100%;
		background-color: $pageColor;
	}

	.topCard {
		width: 750rpx;
		height: 740rpx;
		background: #627885;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		padding: 46rpx 30rpx 40rpx 30rpx;
		box-sizing: border-box;

		.user {
			width: 690rpx;
			height: 176rpx;
			position: relative;
			margin-bottom: 40rpx;

			.userinfo {
				position: absolute;
				top: 38rpx;
				left: 200rpx;

				.unlogin {
					width: 220rpx;
					font-size: 44rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					color: #FFFFFF;
					display: block;
					margin-top: 20rpx;
				}

				.username {
					width: 184rpx;
					height: 44rpx;
					font-size: 44rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					color: #FFFFFF;
					line-height: 44rpx;
					display: block;
					margin-bottom: 24rpx;
				}

				.userId {
					font-size: 32rpx;
					font-family: PingFang-SC-Medium, PingFang-SC;
					font-weight: 500;
					color: #FFFFFF;
					line-height: 32rpx;
				}
			}
		}

		.membership {
			width: 690rpx;
			height: 116rpx;
			background: $bgColor;
			border-radius: 8rpx;
			display: flex;
			align-items: center;
			padding-left: 28rpx;
			padding-right: 24rpx;
			box-sizing: border-box;
			margin-bottom: 24rpx;
			.flex {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 68rpx;
				width: 650rpx;

				.join {
					
					font-size: 36rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #627885;
					margin-left: 8rpx;
				}

				.gojoin {
					
					font-size: 30rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #627885;
					margin-right: 8rpx;
				}
			}


		}
		.orders{
			width: 690rpx;
			height: 298rpx;
			background: $bgColor;
			border-radius: 8rpx;
			padding: 40rpx 30rpx 48rpx 36rpx;
			box-sizing: border-box;
			.nav{
				height: 50rpx;
				width: 633rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				.myorder{
					font-size: 28rpx;
					font-family: PingFang-SC-Heavy, PingFang-SC;
					font-weight: 800;
					color: #333333;
				}
				.more{
					font-size: 28rpx;
					font-family: PingFang-SC-Bold, PingFang-SC;
					font-weight: bold;
					color: #627885;
					
				}
			}
			.content{
				display: flex;
				align-items: center;
				justify-content: space-around;
				margin-top: 50rpx;
				.flexbox{
					display: flex;
					flex-direction: column;
					align-items: center;
					text{
						margin-top:24rpx;
						font-size: 28rpx;
						font-family: PingFang-SC-Medium, PingFang-SC;
						font-weight: 500;
						color: #627885;
					}
				}
			}
		}


	}
	.list{
		width: 690rpx;
		height: 160rpx;
		border-bottom: 2rpx solid  #F0F0F0;
		display: flex;
		flex-direction: column;
		justify-content: center;
		position: relative;
		.title{
			font-size: 36rpx;
			font-family: PingFang-SC-Bold, PingFang-SC;
			font-weight: bold;
			color: #333333;
			margin-bottom: 16rpx;
		}
		.container{
			font-size: 28rpx;
			font-family: PingFang-SC-Medium, PingFang-SC;
			font-weight: 500;
			color: #333333;
		}
		image{
			width: 12rpx ;
			height: 20rpx;
			position: absolute;
			top:70rpx;
			right: 0rpx;
		}
	}
</style>
