<template>
	<view class="myPage">
		<image class="myBG" src="/static/myBG.png" mode="widthFix"></image>
		<view class="body" :style="{ 'padding-top': (indexStore.screen.total + 30)+'px' }">
			<view class="userBox">
				<image class="avatar" src="/static/my/avatar.png" mode="aspectFill"></image>
				<view class="userRight">
					<view class="nameBox">
						<view class="">
							<text>未登录</text>
							<image class="editIcon" src="/static/edit-w.png" mode="aspectFill"></image>
						</view>
						<text class="subTitle">点击登录  查看您的会员等级</text>
					</view>
					<button class="signBtn">签到</button>
				</view>
			</view>
		
			
			<view class="card">
				<view class="cardBody">
					<view class="menu">
						<view class="menuItem">
							<image class="icon" src="/static/my/daizhifu.png" mode="aspectFill"></image>
							<text>待支付</text>
						</view>
						<view class="menuItem">
							<image class="icon" src="/static/my/daifahuo.png" mode="aspectFill"></image>
							<text>待发货</text>
						</view>
						<view class="menuItem">
							<image class="icon" src="/static/my/daifahuo.png" mode="aspectFill"></image>
							<text>待发货</text>
						</view>
						<view class="menuItem">
							<image class="icon" src="/static/my/yiwancheng.png" mode="aspectFill"></image>
							<text>已完成</text>
						</view>
						<view class="menuItem">
							<image class="icon" src="/static/my/tuikuan.png" mode="aspectFill"></image>
							<text>退款/售后</text>
						</view>
					</view>	
				</view>
			</view>
			
			<view class="card">
				<view class="cardHead">
					<text>会员服务</text>
				</view>
				<view class="cardBody">
					<view class="menu">
						<view class="menuItem1">
							<image class="icon1" src="/static/my/fake.png" mode="aspectFill"></image>
							<text>防伪溯源</text>
						</view>
						<view class="menuItem1">
							<image class="icon1" src="/static/my/writecheck.png" mode="aspectFill"></image>
							<text>核销查询</text>
						</view>
						<view class="menuItem1">
							<image class="icon1" src="/static/my/writerecord.png" mode="aspectFill"></image>
							<text>兑换记录</text>
						</view>
						<view class="menuItem1">
							<image class="icon1" src="/static/my/rewardrecord.png" mode="aspectFill"></image>
							<text>中奖记录</text>
						</view>
						<view class="menuItem1">
							<image class="icon1" src="/static/my/help.png" mode="aspectFill"></image>
							<text>帮助中心</text>
						</view>
						<view class="menuItem1">
							<image class="icon1" src="/static/my/aboutus.png" mode="aspectFill"></image>
							<text>关于我们</text>
						</view>
						<view class="menuItem1">
							<image class="icon1" src="/static/my/protocol.png" mode="aspectFill"></image>
							<text>会员协议</text>
						</view>
						<view class="menuItem1">
							<image class="icon1" src="/static/my/address.png" mode="aspectFill"></image>
							<text>收货地址</text>
						</view>
					</view>
				</view>
			</view>
			
			<view class="btnGroup">
				<view class="btnItem">
					<view class="">
						<image class="btnIcon" src="/static/agent.png" mode="aspectFill"></image>
						<text>经销商登录</text>
					</view>
					<image class="circleR" src="/static/circleR.png" mode="aspectFill"></image>
				</view>
				<view class="btnItem">
					<view class="">
						<image class="btnIcon" src="/static/shop.png" mode="aspectFill"></image>
						<text>门店登录</text>
					</view>
					<image class="circleR" src="/static/circleR.png" mode="aspectFill"></image>
				</view>
			</view>
			
			<view class="card">
				<view class="cardHead">
					<text>签到日历</text>
					<view class="seeMore">
						<text>查看更多</text>
						<image class="circleR" src="/static/circleR.png" mode="aspectFill"></image>
					</view>
				</view>
				<view class="cardBody">
					<uni-calendar 
						:insert="true"
						:lunar="false"
						:showMonth="false"
						:start-date="'2025-3-2'"
						:end-date="'2025-10-20'"
						:selected="selectedList"
						@change="change"
						 />
				</view>
			</view>
		
		
		</view>
		
		<tabbar :tabIndex="3"></tabbar>
	</view>
</template>

<script setup>
import { ref } from 'vue'
import { useIndexStore } from '../../store';

const indexStore = useIndexStore()
const selectedList = ref([{date: '2025-08-07', info: '+10', data: { custom: '自定义信息', name: '自定义消息头' }}])
</script>

<style lang="scss" scoped>
.myPage{
	width: 100%;
	min-height: 100vh;
	background: #EFF6FF;
	box-sizing: border-box;
	position: relative;
	.body{
		position: relative;
		z-index: 2;
	}
}
.myBG{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
} 
.userBox{
	margin: 0 26rpx 26rpx;
	@include flexBox(start,start);
	.avatar{
		width: 108rpx;
		height: 108rpx;
		border-radius: 24rpx;
		margin-right: 16rpx;
	}
	.userRight{
		flex: 1;
		@include flexBox(between,center);
		.nameBox{
			flex: 1;
			@include fontStyle(34rpx,#FFFFFF,left,500,44rpx);
			.editIcon{
				width: 32rpx;
				height: 32rpx;
				margin-left: 26rpx;
			}
			.subTitle{
				@include fontStyle(24rpx,#FFFFFF,left,400,44rpx);
			}
		}
		.signBtn{
			width: 110rpx;
			height: 50rpx;
			border-radius: 36rpx 36rpx 36rpx 36rpx;
			border: 2rpx solid #FFFFFF;
			background: transparent;
			font-weight: 500;
			font-size: 28rpx;
			color: #FFFFFF;
			@include flexBox();
			margin: 0;
		}
	}
	
}  

.card{
	margin: 26rpx;
	background: #FFFFFF;
	box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.08);
	border-radius: 18rpx 18rpx 18rpx 18rpx;
	.cardHead{
		box-sizing: border-box;
		padding: 26rpx;
		@include fontStyle(28rpx,#333333,left,bold,38rpx);
		@include flexBox(between,center);
		.seeMore{
			@include fontStyle(24rpx,#666666,left,400,38rpx);
			@include flexBox(start,center);
			.circleR{
				width: 36rpx;
				height: 36rpx;
				margin-left: 16rpx;
			}
		}
	}
	.cardBody{
		box-sizing: border-box;
		.menu{
			width: 100%;
			@include flexBox(around,center);
			flex-wrap: wrap;
			.menuItem{
				@include fontStyle(24rpx,#333333,left,400,38rpx);
				@include flexBox(start,center,column);
				margin: 26rpx 0;
				.icon{
					width: 72rpx;
					height: 72rpx;
					margin-bottom: 10rpx;
				}
			}
			.menuItem1{
				width: 25%;
				@include fontStyle(24rpx,#333333,left,400,38rpx);
				@include flexBox(start,center,column);
				margin-bottom: 26rpx ;
				.icon1{
					width: 52rpx;
					height: 52rpx;
					margin-bottom: 10rpx;
				}
				&:last-child{
					margin-right: auto;
				}
			}
		}
		
	}
}
.btnGroup{
	margin: 26rpx;
	@include flexBox(between,center);
	.btnItem{
		width: 336rpx;
		height: 92rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 4rpx 7rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 18rpx 18rpx 18rpx 18rpx;
		box-sizing: border-box;
		padding: 26rpx;
		@include flexBox(between,center);
		@include fontStyle(28rpx,#333333,left,bold,38rpx);
		&>view{
			@include flexBox(start,center);
		}
		.btnIcon{
			width: 46rpx;
			height: 46rpx;
			margin-right: 16rpx;
		}
		.circleR{
			width: 36rpx;
			height: 36rpx;
		}
	}
}

</style>
