sport_pc/.svn/pristine/3d/3d3420c3d54bda040ae721b79d7370fc259cea9f.svn-base

<template>
	<div style="height:100vh">
		<div class="header row allAlignment" style="padding:.3rem .32rem;">
			<p class="logo">
				<span style="color:#f76649;font-size:.43rem">HX</span>
				<i style="color:#f4f4f2;font-size:.43rem;font-weight: bolder;">699</i>
			</p>
			<p class="switch">
				<img src="@/assets/st-imges/close.png" @click="personalShow()">
				<img style="margin-right:.1rem" src="@/assets/st-imges/kefu.png">
			</p>
		</div>
		<div class="Personal row center">
			<div class="Personal-index">
				<div class="Personal-top boxshow">
					<div class="PictureFrame row vertical-center">
						<!-- 头像 -->
						<div class="row vertical-center">
							<div class="HeadPortrait row center">
								<!-- 头像图片 -->
								<img src="@/assets/st-imges/touxiang.jpg">
							</div>
						</div>
						<!-- 用户名 -->
						<div class="row vertical-center">
							<span style="margin-top:2px;font-size:.26rem">{{name}}</span>
						</div>
					</div>

					<div class="AmountAccount row item-center">
						<div>
							<div class="mtb">
								<span style="color: #666666;font-size: .22rem;">账户余额(元)</span>
								<br>
								<!-- 账户余额 -->
								<span
										style="color:#666666;display: inline-block;font-size: .3rem;font-weight: normal;margin-top:.15rem;"
								>{{data.allMoney}}</span>
							</div>
						</div>
						<i></i>
						<div>
							<div class="mtb">
								<span style="color: #666666;font-size: .22rem;">盈利(元)</span>
								<br>
								<!-- 盈利 -->
								<span
										style="color:#1bd479;display: inline-block;font-size: .3rem;font-weight: normal;margin-top:.15rem;"
								>{{data.winMoney}}</span>
							</div>
						</div>
						<i></i>
						<div>
							<div class="mtb">
								<span style="color: #666666;font-size: .22rem;">亏损(元)</span>
								<br>
								<!-- 亏损 -->
								<span
										style="color:#f76649;display: inline-block;font-size: .3rem;font-weight: normal;margin-top:.15rem;"
								>{{data.loseMoney}}</span>
							</div>
						</div>
					</div>
				</div>
				<div class="Personal-main row average mt03 boxshow">
					<div @click="toRouter('/ProfitAndLossRecord')">
						<img src="@/assets/st-imges/Personalstatements.png">
						<p>盈亏记录</p>
					</div>
					<div @click="toRouter('/BettingRecord')">
						<img src="@/assets/st-imges/Thedetail.png">
						<p>投注记录</p>
					</div>
					<div @click="toRouter('/AccessRecords')">
						<img src="@/assets/st-imges/Thereport.png">
						<p>转账记录</p>
					</div>
				</div>
				<div class="Personal-bottom mt03 row allAlignment">
					<div @click="toRouter('/PersonInfo')">
						<div class="Personal-bottom-img">
							<img src="@/assets/st-imges/Thepersonaldata.png">
						</div>
						<div class="Personal-bottom-text">
							<p>个人资料</p>
							<span>个人信息绑定与查询</span>
						</div>
					</div>

<!--					<div>-->
<!--						<div class="Personal-bottom-img">-->
<!--							<img src="@/assets/st-imges/Securitycenter.png">-->
<!--						</div>-->
<!--						<div class="Personal-bottom-text">-->
<!--							<p>安全中心</p>-->
<!--							<span>保护你的账户安全</span>-->
<!--						</div>-->
<!--					</div>-->
					<div @click="toRouter('/MessageCenter')">
						<div class="Personal-bottom-img">
							<img src="@/assets/st-imges/Themessage.png">
						</div>
						<div class="Personal-bottom-text">
							<p>我的消息</p>
							<span>查看历史消息内容</span>
						</div>
					</div>
<!--					<div>-->
<!--						<div class="Personal-bottom-img">-->
<!--							<img src="@/assets/st-imges/Moreandmore.png">-->
<!--						</div>-->
<!--						<div class="Personal-bottom-text">-->
<!--							<p>更多</p>-->
<!--							<span>使用管理更多功能</span>-->
<!--						</div>-->
<!--					</div>-->
				</div>
				<yd-button size="large" type="danger" @click.native="logout()">退出登录</yd-button>
			</div>
		</div>
	</div>
</template>

<script>
	import "@/css/index.css";
	export default {
		name: "PersonalCenter",
		data() {
			return {
				// 用户名
				name: "",
				userCodeShow: false, //头像侧边菜单显示开关
				data: "",
				timers:true,
			};
		},
		computed: {},
		watch: {},
		methods: {
			//判断登录是否过期
			getuserData() {
				if (localStorage.getItem("token")) {
					this.$http
						.post(this.$ports.login.getAgent, {
							token: localStorage.getItem("token")
						})
						.then(res => {
							if (res.data.status == -4001) {
								this.$store.dispatch("SET_TOKEN", "");
								this.$store.dispatch("GET_ISSHOW", false);
								this.$dialog.toast({
									mes: "对不起您的登录已过期，请您重新登录",
									timeout: 3000
								});
								this.$router.push('/')
							}
						});
				}
			},
			// 获取个人中心统计数据
			statistical() {
				this.$http
					.post(this.$ports.login.dataStatistics, {
						token: localStorage.getItem("token")
					})
					.then(res => {
						this.data = res.data.data;
						// console.log(res, "wwww");
					});
			},
			// 退出登录
			logout() {
				this.$dialog.confirm({
					title: "退出登录",
					mes: "您确定要退出登录吗？",
					opts: () => {
						this.$http
							.get(this.$ports.login.loginOut, {
								token: localStorage.getItem("token")
							})
							.then(res => {
								if (res) {
									this.$dialog.toast({
										mes: "退出登录成功,请前往登录",
										timeout: 1500
									});
									this.$public.setItem("token", "");
									this.$store.dispatch("SET_TOKEN", "");
									localStorage.setItem("name", "");
									this.$router.go(-1);
								}
							});
					}
				});
			},
			// 个人中心显示隐藏
			personalShow() {
				this.$router.go(-1);
			},
			// 路由
			toRouter(url) {
				this.$router.push({ path: url });
			},
			userCode() {
				this.userCodeShow = !this.userCodeShow;
			},
			userEsc() {
				this.userCodeShow = false;
			}
		},
		mounted() {
			if (localStorage.getItem("name")) {
				this.name = localStorage.getItem("name");
			}
			this.statistical();
			let _this = this;
			this.$public.ajaxTimerFun(function(timing) {
				if (_this.timers) {
					_this.getuserData();
				} else {
					clearInterval(timing);
				}
			}, 1000 * 60);
		},
		beforeDestroy() {
			this.timers = false;
		},
	};
</script>

<style scoped>
	.yd-btn-block {
		margin-top: 0.6rem;
	}
	.header {
		height: 1.8rem;
		background-image: linear-gradient(0deg, #565656 0%, #999999 100%);
	}
	.logo {
		font-weight: bolder;
	}
	.switch img {
		width: 0.3rem;
		height: 0.3rem;
		margin-left: 0.4rem;
		margin-top: 0.1rem;
	}
	.Personal {
		width: 100%;
		margin-top: -0.65rem;
	}
	.Personal-index {
		width: 7rem;
		height: 10rem;
	}
	.Personal-top {
		height: 2rem;
		background: #efefef;
		border-radius: 0.1rem;
	}
	.mt03 {
		margin-top: 0.5rem;
	}
	.Personal-main {
		height: 2.2rem;
		background: #efefef;
		border-radius: 0.1rem;
	}
	.Personal-main img {
		width: 1.1rem;
		height: 1.1rem;
		border-radius: 50%;
	}
	.Personal-main p {
		font-size: 0.26rem;
		color: #555555;
		margin-top: -0.1rem;
	}
	.Personal-main div {
		text-align: center;
		padding: 0.4rem 0;
	}
	.Personal-bottom {
		height: 4rem;
		flex-wrap: wrap;
	}
	.boxshow {
		box-shadow: -2px 0px 5px 1px rgba(0, 0, 0, 0.05),
		0px -2px 5px 1px rgba(0, 0, 0, 0.05), 2px 0px 5px 1px rgba(0, 0, 0, 0.05),
		0px 2px 5px 1px rgba(0, 0, 0, 0.05);
	}
	.Personal-bottom > div {
		width: 100%;
		height: 1.6rem;
		border-radius: 0.1rem;
		background: #efefef;
		box-shadow: -2px 0px 5px 1px rgba(0, 0, 0, 0.05),
		0px -2px 5px 1px rgba(0, 0, 0, 0.05), 2px 0px 5px 1px rgba(0, 0, 0, 0.05),
		0px 2px 5px 1px rgba(0, 0, 0, 0.05);
	}
	.AmountAccount {
		height: 1.2rem;
	}
	.AmountAccount > i {
		display: inline-block;
		width: 1px;
		height: 0.5rem;
		background: #cccccc;
	}
	.AmountAccount > div {
		width: 2.38rem;
	}
	.PictureFrame {
		height: 0.8rem;
		flex-wrap: wrap;
	}
	.PictureFrame > div {
		width: 100%;
	}
	.HeadPortrait {
		width: 1rem;
		height: 0.99rem;
		background: #efefef;
		border-radius: 50%;
		margin-top: -0.5rem;
		box-shadow: 0px 0rem 10px 2px rgba(0, 0, 0, 0.3);
	}
	.HeadPortrait > img {
		width: 0.94rem;
		height: 0.94rem;
		border-radius: 50%;
	}
	.mtb {
		text-align: center;
		line-height: 0.2rem;
	}
	.Personal-bottom-img {
		width: 0.94rem;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.Personal-bottom-img > img {
		width: 0.56rem;
		height: 0.56rem;
	}
	.Personal-bottom > div {
		display: flex;
	}
	.Personal-bottom-text {
		height: 100%;
		padding: 0.35rem 0;
	}
	.Personal-bottom-text > p {
		margin-bottom: 0.1rem;
		color: #555555;
		font-size: 0.26rem;
	}
	.Personal-bottom-text > span {
		color: #999999;
		font-size: 0.22rem;
	}
</style>