sport_mobile/.svn/pristine/fa/fac7e64528e6dc7cf3adde31b4fe3e5bc4769ea8.svn-base

<!--
 * @Description: In User Settings Edit
 * @Author: your name
 * @Date: 2019-09-29 17:50:59
 * @LastEditTime: 2019-09-29 18:32:16
 * @LastEditors: Please set LastEditors
 -->
<template>
  <div>
    <div class="headerB-top">
      <div class="middle row">
        <div class="row item-center headerB-top-left">
          <h1 class="row headerB-title">
            <p style="color:#F76649;">HX</p>
            <span style="color:#FFFFFF">669</span>
          </h1>
          <ul class="row headerB-nav">
            <!-- <li
              v-for="(item,index) in List"
              :key="index"
              style="margin-left:.3rem"
              class="row item-center"
              :class="num==index?'active':''"
              @click="listActive(index)"
            >{{item.title}}</li> -->
            <li style="margin-left:.3rem"
              class="row item-center"
              :class="num==index?'active':''"
              @click="listActive(index)">
              体育赛事
              </li>
          </ul>
        </div>
      </div>
    </div>

    <game-result></game-result>
  
    <div style="background:linear-gradient(180deg,rgba(153,153,153,1) 0%,rgba(86,86,86,1) 100%);">
      <div class="middle bottomB row center">HX669属于HX669有限公司注册 版权所有©2019</div>
    </div>
  </div>
</template>

<script>
// import abstract from "@/components/abstract";
import unitary from "@/components/unitary";
import tandem from "@/components/tandem";
import settlementBetting from "@/components/settlementBetting";
import noSettlementBetting from "@/components/noSettlementBetting";
import deposit from "@/components/deposit";
import withdrawals from "@/components/withdrawals";
import profit from "@/components/profit";
import loss from "@/components/loss";
import "@/css/index.css";
import GameResult from '@/pages/home/GameResult'
export default {
  name: "PersonalCenter",
  data() {
    return {
      user: {
        // 用户信息
        userName: "",
        balance: 0
      },
      userData: "", //用户信息 （轮询）
      img: {
        user: require("@/assets/st-imges/user.png"),
        userHover: require("@/assets/st-imges/user-hover.png"),
        wallet: require("@/assets/st-imges/wallet.png"),
        walletHover: require("@/assets/st-imges/wallet-hover.png"),
        eaml: require("@/assets/st-imges/emal.png"),
        eamlHover: require("@/assets/st-imges/emal-hover.png")
      },
      timers: true,
      List: [
        // 头部导航列表
        {
          title: "体育赛事",
          num: 0
        },
        {
          title: "优惠",
          num: 1
        },
        {
          title: "手机版",
          num: 2
        }
      ],
      imgNum: 0,
      num: 0, //头部导航激活样式
      switcChcomponents: "unitary", //组件开关
      leftData: [
        //左侧数据 写死
        {
          title: "投注记录",
          list: [
            // {
            //   title: "全部注单",
            //   isTrue: false,
            //   code: "allBetting"
            // },
            {
              title: "单式注单",
              isTrue: true,
              code: "unitary"
            },
            {
              title: "串式注单",
              isTrue: false,
              code: "tandem"
            },
            {
              title: "已结算注单",
              isTrue: false,
              code: "settlementBetting"
            },
            {
              title: "未结算注单",
              isTrue: false,
              code: "noSettlementBetting"
            }
          ]
        },
        {
          title: "交易记录",
          list: [
            {
              title: "存款",
              isTrue: false,
              code: "deposit"
            },
            {
              title: "取款",
              isTrue: false,
              code: "withdrawals"
            }
          ]
        },
        {
          title: "盈亏记录",
          list: [
            {
              title: "盈利",
              isTrue: false,
              code: "profit"
            },
            {
              title: "亏损",
              isTrue: false,
              code: "loss"
            }
          ]
        }
      ]
    };
  },
  methods: {
    //退出登录
    escLogin() {
      this.$http
        .get(this.$ports.login.loginOut, {
          token: localStorage.getItem("token")
        })
        .then(res => {
          if (res.data.msg == "成功") {
            this.$dialog.toast({ mes: "退出登录成功", timeout: 2000 });
            localStorage.setItem("token", "");
            localStorage.setItem("name", "");
            localStorage.setItem("balance", "");
            this.$router.push("/");
          } else {
            this.$dialog.toast({ mes: "退出登录失败", timeout: 2000 });
          }
        });
    },
    // 导航
    PersonalCenterTo() {
      this.$router.push("/");
    },
    
    // 获取个人中心用户信息
    getUserData() {
      this.$http
        .post(this.$ports.login.getAgent, {
          token: localStorage.getItem("token")
        })
        .then(res => {
          if (res.data.data) {
            this.userData = res.data.data;
            this.userIsLogin = true;
            this.user.userName = res.data.data.name;
            this.user.balance = res.data.data.cash;
          } else {
            this.timers = false;
            this.userIsLogin = false;
            this.user.userName = "";
            this.user.balance = "";
            localStorage.setItem("token", "");
            this.$router.push('/')
          }
        });
    },
    listActive(index) {
      this.num = index;
    },
    imgMT(index) {
      this.imgNum = index;
    },
    imgOUT() {
      this.imgNum = 0;
    },
  },
  computed: {
    Switch() {
      return this.switcChcomponents;
    }
    // getUserIsLogin() {
    //   if (localStorage.getItem("token")) {
    //     let userInfo = JSON.parse(localStorage.getItem("user"));
    //   //   this.userIsLogin = true;
    //   //   this.user.userName = userInfo[0].name;
    //   //   this.user.balance = userInfo[0].cash;
    //   }
    // }
  },
  watch: {
    Switch() {}
    // getUserIsLogin() {}
  },
  components: {
      GameResult
  }
};
</script>

<style scoped>
.headerB-top {
  height: 1rem;
  background: linear-gradient(
    180deg,
    rgba(153, 153, 153, 1) 0%,
    rgba(86, 86, 86, 1) 100%
  );
}

.headerB-title {
  font-size: 0.42rem;
  margin-left: 0.3rem;
}
.headerB-nav {
  font-size: 0.24rem;
  height: 100%;
  color: #fff;
}
.headerB-nav li {
  height: 100%;
}
.headerB-nav li.active {
  font-weight: bold;
  position: relative;
}

.headerB-login {
  height: 100%;
}
.headerB-login div {
  height: 0.4rem;
}
.headerB-login div input {
  width: 2rem;
  height: 100%;
  border: none;
  background: #eeeeee;
  color: #999;
  font-size: 0.16rem;
  padding-left: 0.2rem;
}
.headerB-login-pwd {
  width: 3rem;
  margin-left: 0.1rem;
  position: relative;
}
.headerB-login-pwd span {
  font-size: 0.16rem;
  color: #999;
  position: absolute;
  left: 1.2rem;
  top: 0.1rem;
}
.headerB-login-txt {
  width: 1rem;
  background: #f76649;
  color: #ffffff;
  font-size: 0.18rem;
}
.headerB-top-left {
  width: 55%;
}

.loginTo div {
  height: 100%;
  /* font-size: 0.18rem; */
  color: #fff;
}
.headerB-userCode {
  margin-left: 1.25rem;
}
.headerB-img img {
  width: 0.3rem;
  height: 0.3rem;
  margin-left: 0.2rem;
}
.headerB-img {
  margin-left: 0.5rem;
}

.bottomB {
  color: #ccc;
  height: 1.5rem;
  font-size: 0.14rem;
}
.userIcon {
  display: none;
}
.userIcon > div {
  width: 50%;
}
.headerB-img > div:hover .userIcon {
  display: flex;
  padding: 0.1rem;
  width: 1.3rem;
  /* padding: 0.1rem 0.2rem; */
  height: 1rem;
  line-height: 0.4rem;
  font-size: 0.14rem;
  position: absolute;
  left: -0.3rem;
  border-radius: 0.05rem;
  z-index: 999;
  bottom: -0.8rem;
  background: rgba(85, 85, 85, 0.9);
  box-shadow: -2px 0px 5px 1px rgba(0, 0, 0, 0.1),
    0px -2px 5px 1px rgba(0, 0, 0, 0.1), 2px 0px 5px 1px rgba(0, 0, 0, 0.1),
    0px 2px 5px 1px rgba(0, 0, 0, 0.1);
}
.headerB-img > div {
  position: relative;
}
.main-left {
  width: 2.8rem;
  background: #ccc;
}
.main-left p,
.main-left li {
  line-height: 0.4rem;
  font-size: 0.14rem;
  color: #555;
}
.main-left p {
  background: #fff;
  padding: 0 0.2rem;
  border-bottom: 0.01rem solid #ccc;
}
.main-left li {
  background: #ddd;
  border-bottom: 0.01rem solid #ccc;
  padding: 0 0.3rem;
}
.main-left li:hover {
  background: #bbb;
  color: #f76649;
}
.main-left li.active {
  color: #fff;
  background: #aaa;
  border-left: 0.05rem solid #f76649;
}
.main-right {
  width: 76%;
  margin: 0.2rem 0 0 0.2rem;
}
</style>