<template>
	<view class="header" :style="[{height:CustomBar + 'px'}]" :class="AppStyle">
		<view class="cu-bar bg-white" :style="{'height': CustomBar + 'px','padding-top':StatusBar + 'px'}">
			<view class="action" @tap="back">
				<text class="cuIcon-back"></text>
			</view>
			<view class="content text-bold" :style="[{top:StatusBar + 'px'}]">
				勋章中心
			</view>
		</view>
		
  <view class="head">
  
  	<view class="backgr">
  		<image src="https://fanst-1309537472.cos.ap-chongqing.myqcloud.com/headBg.png">
  		<view class="img">
  			<view class="headImg">
  				<image style="border-radius: 50%;" :src="userinfo.avatar">
  				<view></view>
  			</view>
  			<text></text>
  		</view>
  	</view>
  	<view class="title">
  		<view class="text">
  			<text>已拥有</text>
  			<view></view>
  		</view>
  	</view>
  	<view class="grade" v-if="list.length>0">
  		<view class="item" v-for="(item,index) in list" :key="index">
  			<view class="top">
  				<image :src="item.pic">
  				<!-- <image class="lock" src="../../../static/image/travel/ranking/lock.png"></image> -->
  			</view>
  			<view class="name">
  				<text>{{item.name}}</text>
  				<text>￥{{item.price}}</text>
  			</view>
  		</view>
		
  	</view>
	<view class="gradeo" v-else style="height: 155px;line-height: 155px;text-align: center;color: #777;">
		你还暂无勋章哦
	</view>
  	<view class="title">
  		<view class="text">
  			<text>全部</text>
  			<view></view>
  		</view>
  	</view>
  	<view class="grade">
  		<view class="item" v-for="(item,index) in allMedalList" :key="index">
  			<view class="top">
  				<image :src="item.pic">
  				<image v-if="item.state == 0" class="lock" src="/image/travel/ranking/lock.png"></image>
  			</view>
  			<view class="name">
  				<text>{{item.name}}</text>
				<text>￥{{item.price}}</text>
  			</view>
  		</view>
  	</view>
  </view>
	</view>
</template>

<script>
	import { localStorage } from '../../../js_sdk/mp-storage/mp-storage/index.js'
	export default {
		data() {
			return {
				StatusBar: this.StatusBar,
				CustomBar: this.CustomBar,
				NavBar:this.StatusBar +  this.CustomBar,
				AppStyle:this.$store.state.AppStyle,
				
				uid:0,
				name:'',
				screenName:'',
				password:'',
				repassword:'',
				mail:'',
				userinfo:null,
				url:'',
				buttonShow:true,
				appname:"",
				email:"",
				title:["头像框","动态贴纸","评论贴纸"],
				num:0,
				allMedalList:[],
				list:[],
				token:''
				
			}
		},
		onPullDownRefresh(){
			var that = this;
			
		},
		onShow(){
			var that = this;
			// #ifdef APP-PLUS
			
			//plus.navigator.setStatusBarStyle("dark")
			// #endif
			that.appname = that.$API.GetAppName();
			that.email = that.$API.GetAppEmail();
		},
		mounted() {
			const that= this;
			that.getMedals();
			that.getMedalsByid();
		},
		onLoad(res) {
			var that = this;
			if (localStorage.getItem('userinfo')) {
				that.userinfo = JSON.parse(localStorage.getItem('userinfo'));
				
				
			} else {
				that.userinfo = null;
			}
			// #ifdef APP-PLUS || MP
			that.NavBar = this.CustomBar;
			// #endif
			if(res.button=="none"){
				that.buttonShow = false
			}
		},
		methods: {
			getMedals(){
					var that = this;
				
					
					that.$Net.request({
					url:that.$API.PluginLoad('Fanstey_medal'),//括号中填插件名
						data: {
							"action":"getMedal",
						
							// "webkey":"16623494619",
							// "api_key":"16623494619"
						},
						method: "get",
						dataType: 'json',
						success: function(res) {
						console.log(res);
						that.allMedalList = res.data.data;
						console.log(that.allMedalList);
						},
						fail: function(res) {
				   
						
						
						}
					})
			},
			getMedalsByid(){
					var that = this;
				
					
					that.$Net.request({
					url:that.$API.PluginLoad('Fanstey_medal'),//括号中填插件名
						data: {
							"action":"getMedalByid",
						
							"fa_uid":that.userinfo.uid
						},
						method: "get",
						dataType: 'json',
						success: function(res) {
						console.log(res);
						that.list = res.data.data;
						// console.log(that.allMedalList);
						},
						fail: function(res) {
				   
						
						
						}
					})
			},
			agree(){
				var that = this;
				localStorage.setItem('isAgree', 'true');
				that.back()
			},
			disagree(){
				var that = this;
				localStorage.setItem('isAgree', 'false');
				that.back()
				uni.showToast({
					title: "同意后再来注册吧",
					icon: 'none',
					duration: 3000,
					position: 'center',
				});
			},
			back(){
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.head{
		height: 1624rpx;
		background: #F9F9F9;
		& text{
			font-family: PingFangSC-Semibold, PingFang SC;
		}
		.bar{
			.left{
				>image{
					width: 48rpx;
					height: 48rpx;
				}
			}
			.center{
				width: 50%;
				display: flex;
				justify-content: space-between;
				>text{
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					color: #FFFFFF;
					line-height: 44rpx;
				}
				.actTitle{
					font-size: 32rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FFFFFF;
				}
			}
		}
		.backgr{
			display: flex;
			align-items: flex-end;
			justify-content: center;
			margin-bottom: 28rpx;
			>image{
				width: 100%;
				height: 440rpx;
			}
			.img{
				position: absolute;
				.headImg{
					display: flex;
					align-items: center;
					justify-content: center;
					>image{
						width: 130rpx;
						height: 130rpx;
						
					}
					>view{
						width: 142rpx;
						height: 142rpx;
						border-radius: 50%;
						border: 4rpx solid #FFFFFF;
						filter: blur(2rpx);
						position: absolute;
					}
				}
				>text{
					display: block;
					width: 130rpx;
					height: 46rpx;
					background: rgba(0, 0, 0, 0.49);
					border-radius: 27rpx;
					font-size: 24rpx;
					color: #FFFFFF;
					line-height: 46rpx;
					text-align: center;
					margin-left: 480rpx;
					margin-bottom: 14rpx;
				}
			}
		}
		.title{
			display: flex;
			flex-direction: column;
			align-items: center;
			.text{
				margin-bottom: 32rpx;
				>text{
					font-size: 28rpx;
					font-weight: 600;
					color: #333333;
					line-height: 40rpx;
					padding: 0 20rpx;
				}
				>view{
					height: 10rpx;
					background: #E4E3FF;
					border-radius: 5rpx;
					margin-top: -14rpx;
				}
			}
		}
		.grade{
			padding: 0 40rpx;
			margin-top: 38rpx;
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 212rpx;
				height: 256rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 42rpx;
				margin-right: 16rpx;
				&:nth-child(3n){
					margin-right: 0;
				}
				.top{
					width: 212rpx;
					height: 212rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					>image{
						width: 70rpx;
						height: 120rpx;
						// border-radius: 50%;
					}
					.lock{
						width: 26rpx;
						height: 28rpx;
						margin-left: 130rpx;
						border-radius: 0;
					}
				}
				.name{
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					>text:first-child{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						color: #333333;
						line-height: 34rpx;
						margin-right: 6rpx;
					}
					>text:last-child{
						height: 24rpx;
						background: #BFB4FF;
						border-radius: 14rpx;
						font-size: 18rpx;
						font-family: PingFangSC-Medium, PingFang SC;
						font-weight: 600;
						color: #FFFFFF;
						line-height: 26rpx;
						padding: 0 10rpx;
					}
				}
			}
		}
		.other{
			padding: 0 40rpx;
			margin-top: 38rpx;
			display: flex;
			flex-wrap: wrap;
			.item{
				width: 212rpx;
				height: 256rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				margin-bottom: 42rpx;
				margin-right: 16rpx;
				&:nth-child(3n){
					margin-right: 0;
				}
				.top{
					width: 212rpx;
					height: 212rpx;
					background: #FFFFFF;
					border-radius: 20rpx;
					display: flex;
					flex-direction: column;
					align-items: center;
					justify-content: center;
					>image{
						width: 130rpx;
						height: 130rpx;
						border-radius: 50%;
					}
					.lock{
						width: 26rpx;
						height: 28rpx;
						margin-left: 130rpx;
						border-radius: 0;
					}
				}
				.name{
					display: flex;
					align-items: center;
					margin-top: 10rpx;
					>text:first-child{
						font-size: 24rpx;
						font-family: PingFangSC-Regular, PingFang SC;
						color: #333333;
						line-height: 34rpx;
						margin-right: 6rpx;
					}
				}
			}
		}
	}
</style>
