<template>
	<view class="my_pages">
		<view class="header_box">
			<view v-if="token === ''" class="userInfo">
				<u-avatar :src="src" size="108rpx"></u-avatar>
				<view class="right" @click="goRouter('/pages/login/login')">
					<view class="username">登录/注册</view>
				</view>
			</view>
			<view v-else class="userInfo">
				<u-avatar :src="src" size="108rpx"></u-avatar>
				<view class="right">
					<view class="username">CLOOL</view>
					<view class="intro">
						<text>一枚爱运动的少年吖~</text>
						<u-icon name="edit-pen" color="#fff" @click="goRouter('/pages/editInfo/editInfo')"></u-icon>
					</view>
				</view>
			</view>
		</view>
		<!-- 用户金额 -->
		<view class="user_money">
			<view class="left">
				<view class="money">
					<text>余额</text>
					<u-icon name="eye"></u-icon>
				</view>
				<text>2000.00</text>
			</view>
			<view class="btn" @click="goRouter('/pages/myWallet/myWallet')">我的钱包</view>
		</view>
		
		<!-- 列表 -->
		<view class="list">
			<FunctionList title="我的订单" :functionData="orderList" />
			<FunctionList title="我的服务" :functionData="serviceList" />
		</view>
		
		<CommonTabbar tabbarValue="my" />
	</view>
</template>

<script>
	import All from '@/static/myImage/all.png'
	import BookingOrder from '@/static/myImage/booking_order.png'
	import CustomerService from '@/static/myImage/customer_service.png'
	import EmptyWalletTime from '@/static/myImage/empty-wallet-time.png'
	import EmptyWallet from '@/static/myImage/empty-wallet.png'
	import Recharge from '@/static/myImage/recharge.png'
	import SingUp from '@/static/myImage/sing_up.png'
	import Vip from '@/static/myImage/vip.png'
	import ToBeUsed from '@/static/myImage/to_be_used.png'
	import FunctionList from './components/functionList.vue'
	import { mapGetters } from 'vuex'
	export default {
		components: { FunctionList },
		data() {
			return {
				src: 'https://cdn.uviewui.com/uview/album/1.jpg',
				orderList: [
					{ text: '全部', icon: All, pathUrl: '/pages/myOrder/myOrder?id=0' },
					{ text: '待付款', icon: EmptyWalletTime, pathUrl: '/pages/myOrder/myOrder?id=1' },
					{ text: '待使用', icon: ToBeUsed, pathUrl: '/pages/myOrder/myOrder?id=4' },
					{ text: '退款售后', icon: CustomerService, pathUrl: '/pages/myOrder/myOrder?id=6' },
				],
				serviceList: [
					{ text: '钱包', icon: EmptyWallet },
					{ text: '充值', icon: Recharge },
					{ text: '约球订单', icon: BookingOrder },
					{ text: '我的报名', icon: SingUp },
					{ text: '我的会员', icon: Vip },
				]
			};
		},
		computed: {
			...mapGetters(['token'])
		},
		methods: {
			goRouter(path){
				uni.navigateTo({
					url: path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.my_pages{
	background-color: #f6f6f6;
	height: 100vh;
}
.header_box{
	position: relative;
	height: 330rpx;
	padding: 0 30rpx;
	box-sizing: border-box;
	background: linear-gradient( 270deg, #FCD723 0%, $uni-color-primary 100%);
	&::after{
		content: '';
		position: absolute;
		bottom: -40rpx;
		left: 0;
		width: 100%;
		height: 100rpx;
		background: linear-gradient( 270deg, #FCD723 0%, $uni-color-primary 100%);
		border-radius: 50%;
	}
	.userInfo{
		position: absolute;
		top: 160rpx;
		display: flex;
		align-items: center;
		z-index: 10;
		.right{
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			margin-left: 20rpx;
			height: 100%;
			font-size: 24rpx;
			color: #fff;
			.username{
				font-size: 32rpx;
				line-height: 48rpx;
				font-weight: 500;
			}
			.intro{
				display: flex;
				align-items: center;
				gap: 20rpx;
			}
		}
	}
}

.user_money{
	display: flex;
	align-items: center;
	justify-content: space-between;
	position: relative;
	padding: 30rpx 32rpx;
	background: #FFFFFF;
	border-radius: 12rpx;
	margin: 0 30rpx;
	margin-top: -44rpx;
	z-index: 20;
	.left{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		gap: 16rpx;
		font-size: 36rpx;
		color: #333;
		.money{
			display: flex;
			align-items: center;
			color: #666;
			font-size: 28rpx;
			gap: 14rpx;
		}
	}
	.btn{
		width: 176rpx;
		height: 60rpx;
		background: linear-gradient( 270deg, $uni-color-primary 0%, #FCD723 100%);
		border-radius: 90rpx;
		line-height: 60rpx;
		font-size: 28rpx;
		text-align: center;
		color: #fff;
	}
}

.list{
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	margin: 20rpx 30rpx 0;
}
</style>