sport_mobile/.svn/pristine/b0/b037d91145b14a55d79167735b77fd677922da90.svn-base

<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>
          </ul>
        </div>
        <div class="headerB-login">
          <div class="row item-center loginTo" style="height:100%">
            <div class="row item-center headerB-userCode">
              <p>你好，{{user.userName}}</p>
              <span
                style="color:#3DB8FF;margin-left:.1rem;cursor: pointer;"
                @click="escLogin"
              >[退出]</span>
              <div style="width:1px;background:#ccc;height:.3rem;margin:0 .23rem;"></div>
              <p>
                余额:
                <span style="color:#F76649;">{{user.balance}}</span>
              </p>
            </div>
            <div class="row item-center headerB-img">
              <div class="row item-center">
                <img
                  @mouseover="imgMT(1)"
                  @mouseout="imgOUT()"
                  :src="imgNum==1?img.walletHover:img.wallet"
                  alt
                >
                <div class="userIcon row">
                  <div class="row item-center" style="flex-wrap: wrap;">
                    <p style="font-sizeP:.14rem;">盈利：</p>
                    <p style="font-sizeP:.14rem;">亏损：</p>
                  </div>
                  <div class="row item-center" style="flex-wrap: wrap;">
                    <span class="ellipsis" style="color:#02D36A">{{userData.allWin}}</span>

                    <span class="ellipsis" style="color:#F76649">-{{userData.allLose}}</span>
                  </div>
                </div>
              </div>
              <div class="row item-center" @click="PersonalCenterTo()">
                <img
                  @mouseover="imgMT(2)"
                  @mouseout="imgOUT()"
                  :src="imgNum==2?img.userHover:img.user"
                  alt
                >
                <div class="userIcon">点击前往投注页。</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="main" style="height:9rem">
      <div class="middle row">
        <div class="main-left">
          <div
            class="row item-center"
            style="color:#EEE;height:.4rem;padding:0 .2rem;font-size:.16rem;background:linear-gradient(180deg,rgba(153,153,153,1) 0%,rgba(86,86,86,1) 100%);"
          >我的账户</div>
          <div v-for="(item,index) in leftData" :key="index">
            <p v-if="item.title != ''">{{item.title}}</p>
            <ul v-for="(items,i) in item.list" :key="i">
              <li
                :class="items.isTrue?'active':''"
                @click="titleClick(index,i,items.code)"
              >{{items.title}}</li>
            </ul>
          </div>
        </div>
        <div class="main-right">
          <!--全部投注-->
          <div v-if="switcChcomponents === 'allBetting'">
              <all-betting></all-betting>
          </div>
          <!-- 单式投注 -->
          <div v-if="switcChcomponents=='unitary'">
            <unitary/>
          </div>
          <!-- 串式投注 -->
          <div v-if="switcChcomponents=='tandem'">
            <tandem/>
          </div>
          <!-- 已结算注单 -->
          <div v-if="switcChcomponents=='settlementBetting'">
            <settlementBetting/>
          </div>
          <!-- 未结算注单 -->
          <div v-if="switcChcomponents=='noSettlementBetting'">
            <noSettlementBetting/>
          </div>
          <!-- 存款 -->
          <div v-if="switcChcomponents=='deposit'">
            <deposit/>
          </div>
          <!-- 取款 -->
          <div v-if="switcChcomponents=='withdrawals'">
            <withdrawals/>
          </div>
          <!-- 盈利 -->
          <div v-if="switcChcomponents=='profit'">
            <profit/>
          </div>
          <!-- 亏损 -->
          <div v-if="switcChcomponents=='loss'">
            <loss/>
          </div>
        </div>
      </div>
    </div>
    <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 AllBetting from "@/bucket/allBetting"
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";
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: "无效注单",
            //   isTrue: false,
            //   code: 'allBetting'
            // }
          ]
        },
        {
          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("/");
    },
    // 左侧导航开关激活样式
    titleClick(index, i, code) {
      this.leftData.forEach(e => {
        e.list.forEach(a => {
          a.isTrue = false;
        });
      });
      this.$set(this.leftData[index].list[i], "isTrue", true);
      this.switcChcomponents = code;
    },
    // 获取个人中心用户信息
    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.switcChcomponnets;
    }
    // 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: {
    // abstract,
    unitary,
    settlementBetting,
    noSettlementBetting,
    deposit,
    withdrawals,
    profit,
    loss,
    tandem,
    AllBetting
  },

  mounted() {
    // 轮询获取用户信息 三分钟一次 用作判断登录失效与用户个人信息展示
    this.getUserData();
    let _this = this;
    this.$public.ajaxTimerFun(timing => {
      if (_this.timers) {
        _this.getUserData();
      } else {
        clearInterval(timing);
      }
    }, 1000 * 180);
  },
  beforeDestroy() {
    this.timers = false;
  }
};
</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>