<template>
	<view class="content">
		<view class="content-border">
			<view class="user">
				<view class="userTop">
					<view class="userTop-name" v-if="isUser">
						<block v-if="userData.info"><text>用户</text>{{userData.info.username}}</block>
					</view>
					<navigator hover-class="none" url="/pages/giftPack/signin" class="userTop-name" v-else>请先登录</navigator>
					<!-- <view class="userTop-text">感谢您参加本事礼包活动</view> -->
				</view>
				<view class="userItem">
					<!-- <view class="userItem-label">
						<view class="userItem-label-number">
							<image class="userItem-label-img" src="@/static/img/giftPack-img02.png" mode="widthFix"></image><text>23</text>
						</view>
						<view class="userItem-label-text">总余额</view>
					</view> -->
					<view class="userItem-label">
						<view class="userItem-label-number">
							<block v-if="isUser">
								<image class="userItem-label-img" src="@/static/img/giftPack-img03.png" mode="widthFix"></image>
								<block v-if="userData.gold"><text>{{userData.gold.balance ? userData.gold.balance : '0'}}</text></block>
							</block>
							<block v-else>
								<image class="userItem-label-img" src="@/static/img/giftPack-img03.png" mode="widthFix"></image>
								<text>0</text>
							</block>
						</view>
						<view class="userItem-label-text">可用余额</view>
					</view>
					<view class="userItem-label">
						<view class="userItem-label-number">
							<block v-if="isUser">
								<image class="userItem-label-img" src="@/static/img/giftPack-img04.png" mode="widthFix"></image>
								<block v-if="userData.gold"><text>{{blockeds ? blockeds : '0'}}</text></block>
							</block>
							<block v-else>
								<image class="userItem-label-img" src="@/static/img/giftPack-img03.png" mode="widthFix"></image>
								<text>0</text>
							</block>
						</view>
						<view class="userItem-label-text">待发放 <navigator :url="'/pages/giftPack/logsFrozen?type=gold' + '&blockeds=' + blockeds">查看明细></navigator></view>
					</view>
				</view>
				<view class="userList" @click="userNav('/pages/giftPack/logs')">
					<image class="userList-img" src="@/static/img/giftPack-img05.png" mode="widthFix"></image>
					<view class="userList-text">查看余额详细记录</view>
				</view>
				<view class="userTips">
					<view class="userTips-left">
						余额账户
					</view>
					<!-- <view class="userTips-right">
						本时生活<text>·</text>礼包活动
					</view> -->
				</view>
				<image class="userBack" src="@/static/img/giftPack-img01.png" mode="widthFix"></image>
			</view>
			
			<view class="userCoupon" @click="userNav('/pages/giftPack/myCoupon')">
				<image class="userCoupon-img" src="@/static/img/giftPack-img06.png" mode="widthFix"></image>
				<view class="userCoupon-cont">
					<view class="userCoupon-name">我的优惠券</view>
					<image class="userCoupon-arrow" src="@/static/icon/rightsArrow.png" mode="widthFix"></image>
				</view>
			</view>
			<!-- <view class="userCoupon" @click="userNav('/pages/giftPack/superRed')">
				<image class="userCoupon-img" src="@/static/img/giftPack-img10.png" mode="widthFix"></image>
				<view class="userCoupon-cont">
					<view class="userCoupon-name">领取消费金</view>
					<image class="userCoupon-arrow" src="@/static/icon/rightsArrow.png" mode="widthFix"></image>
				</view>
			</view> -->
			
			<view class="userTool">
				<view class="userTool-title">
					其他功能
				</view>
				<view class="userTool-item" @click="userNav('/pages/giftPack/setPassword')">
					<image class="userTool-img" src="@/static/img/giftPack-img08.png" mode="widthFix"></image>
					<view class="userTool-cont">
						<view class="userTool-name">修改密码</view>
						<image class="userTool-arrow" src="@/static/icon/rightsArrow.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="userTool-item" @click="delStorage">
					<image class="userTool-img" src="@/static/img/giftPack-img07.png" mode="widthFix"></image>
					<view class="userTool-cont">
						<view class="userTool-name">退出登录</view>
						<image class="userTool-arrow" src="@/static/icon/rightsArrow.png" mode="widthFix"></image>
					</view>
				</view>
			</view>
		</view>
		
		<!-- 按钮 -->
		<view class="campusBtn">
			<navigator url="/pages/giftPack/index" hover-class="none" class="campusBtn-go">
				<image class="campusBtn-iocn" src="/static/img/giftPack-user00.png" mode="widthFix"></image>
				<view class="campusBtn-name">
					活动首页
				</view>
			</navigator>
			<navigator url="/pages/giftPack/user" hover-class="none" class="campusBtn-go active">
				<image class="campusBtn-iocn" src="/static/img/giftPack-user01_active.png" mode="widthFix"></image>
				<view class="campusBtn-name">
					个人中心
				</view>
			</navigator>
		</view>
	</view>
</template>

<script>
	import { index } from '@/apis/interfaces/user'
	import { logs } from '@/apis/interfaces/giftPack'
	export default {
	    data() {
	        return {
				isUser  : false,  // 用户是否登录
				userData: '', //用户
				screenChannel: '',  //账变记录筛选数组标识
				blockeds : ''
	        }
	    },
	    
	    // 生命周期函数--监听页面加载
	    onLoad(options) {},
	
	    // 生命周期函数--监听页面显示
	    onShow() {
	        // 存储环境-月兑活动
	        getApp().globalData.envType = 'giftPEnv'
			
			if(uni.getStorageSync("token")) {
				this.isUser = true
				// 获取用户接口
			    this.userInfo();
				
				// 获取首页数据
				this.accountInfo();
			}
	    },
	    methods: {
			// 用户接口
			userInfo() {
				// 获取用户信息
				index().then(res => {
				    this.userData = res
				}).catch(err => {
				    if (!err.login) {
				        uni.showModal({
				            title: '用户登录已过期',
				            content: '请重新登录',
				            showCancel: false,
				            success: res => {
				                if (res.confirm) {
				                    uni.redirectTo({
				                        url: '/pages/giftPack/signin'
				                    });
				                }
				            }
				        });
				    }
				});
			},
			
			
			// 账变记录
			accountInfo(page) {
			    logs({
					type    : 'gold',
			        page    : page || '',
					channel : this.screenChannel
			    }).then(res=>{
					this.blockeds = res.blockeds
			    })
			},
			
			
	        // 处理未登录时的转跳
	        userNav(url){
	            let pageUrl = url
	            if(uni.getStorageSync("token")) {
	                uni.navigateTo({
	                    url: pageUrl
	                })
	                return
	            }
	            // 去登录
	            uni.navigateTo({
	                url: '/pages/giftPack/signin'
	            })
	        },
			
			// 退出登录
			delStorage() {
			    uni.clearStorage()
			    uni.navigateTo({
			        url:'/pages/giftPack/signin'
			    })
			}
	    }
	}
</script>

<style lang="scss" scoped>
	.content {
		padding: 80rpx 30rpx 30rpx;
		box-sizing: border-box;
	}
	.content-border {
		border-bottom: 130rpx transparent solid;
	}
	
	.user {
		background-image: linear-gradient(to right, #f25448, #fe786d);
		border-radius: 10rpx;
		padding: 30rpx;
		box-sizing: border-box;
		position: relative;
		.userBack {
			position: absolute;
			right: 20rpx;
			top: -60rpx;
			width: 190rpx;
		}
		.userTop {
			color: #ffffff;
			.userTop-name {
				display: flex;
				font-size: 46rpx;
				line-height: 54rpx;
				font-weight: 600;
				text {
					font-size: 28rpx;
					padding-right: 20rpx;
					padding-top: 6rpx;
				}
			}
			.userTop-text {
				font-size: 26rpx;
				color: #bc903d;
			}
		}
		.userItem {
			margin: 30rpx 0;
			background-image: linear-gradient(to right, #fce1d6, #fce1d6);
			border-radius: 10rpx;
			display: flex;
			padding: 30rpx 0;
			.userItem-label {
				flex: 2;
				text-align: center;
				.userItem-label-number {
					.userItem-label-img {
						width: 40rpx;
						margin-right: 15rpx;
						display: inline-block;
						vertical-align: -4rpx;
					}
					text {
						font-weight: 600;
						font-size: 40rpx;
					}
				}
				.userItem-label-text {
					color: #ea7e4d;
					font-size: 26rpx;
					padding-top: 10rpx;
				}
			}
		}
		.userList {
			background: linear-gradient(to right, #fce1d6, #fce1d6);
			border-radius: 10rpx;
			display: flex;
			padding: 30rpx 20rpx;
			line-height: 60rpx;
			box-sizing: border-box;
			font-size: 32rpx;
			color: #ea7e4d;
			.userList-img {
				width: 60rpx;
				margin-right: 20rpx;
				color: #000000;
			}
		}
		.userTips {
			width: 100%;
			color: #ffffff;
			display: flex;
			font-size: 28rpx;
			margin-top: 30rpx;
			line-height: 30rpx;
			.userTips-left {
				flex: 1;
			}
			.userTips-right {
				text {
					font-size: 32rpx;
					font-weight: 600;
					padding: 0 8rpx;
				}
			}
		}
	}
	
	.userCoupon {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx 15rpx 30rpx 30rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		display: flex;
		.userCoupon-img {
			width: 60rpx;
			margin-right: 20rpx;
		}
		.userCoupon-cont {
			width: calc(100% - 80rpx);
			line-height: 58rpx;
			display: flex;
			.userCoupon-name {
				flex: 1;
				font-size: 32rpx;
				font-weight: 600;
			}
			.userCoupon-arrow {
				width: 44rpx;
				margin-top: 8rpx;
			}
		}
	}
	
	.userTool {
		background-color: #fff;
		border-radius: 10rpx;
		padding: 30rpx 15rpx 30rpx 30rpx;
		margin: 30rpx 0;
		box-sizing: border-box;
		.userTool-title {
			font-size: 32rpx;
			font-weight: 600;
			margin-bottom: 40rpx;
		}
		.userTool-item {
			display: flex;
			border-bottom: 2rpx solid #f8f8f8;
			padding-bottom: 40rpx;
			margin-bottom: 40rpx;
			&:last-child {
				padding-bottom: 10rpx;
				margin-bottom: 0;
				border: none;
			}
			.userTool-img {
				width: 40rpx;
				margin-right: 20rpx;
				margin-top: 6rpx;
			}
			.userTool-cont {
				width: calc(100% - 60rpx);
				line-height: 50rpx;
				display: flex;
				.userTool-name {
					flex: 1;
					font-size: 32rpx;
				}
				.userTool-arrow {
					width: 44rpx;
					margin-top: 8rpx;
				}
			}
		}
	}
	
	// 按钮
	.campusBtn {
	    text-align: center;
	    color: #FFFFFF;
		background-color: #fff;
		display: flex;
		position: fixed;
		width: 100%;
		height: 130rpx;
		z-index: 999;
		left: 0;
		bottom: 0;
		font-size: 28rpx;
		.campusBtn-go {
			flex: 2;
			padding-top: 20rpx;
			.campusBtn-iocn {
				width: 44rpx;
			}
			.campusBtn-name {
				color: #abaeb2;
			}
			&.active .campusBtn-name {
				color: #f55249;
			}
		}
	}
</style>