sport_mobile/.svn/pristine/66/6632c1682b14c57dd17bcf8916b3996b4bb1d68d.svn-base

<template>
  <div>
    <div class="header-top">
      <!-- 头部块 -->
      <div class="headerA-top row vertical-center">
        <div class="middle row allAlignment">
          <div class="row item-center headerA-top-left">
            <h1 class="row headerA-title">
              <p style="color:#F76649;">HX</p>
              <span style="color:#FFFFFF">669</span>
            </h1>
            <!-- 头部优惠导航 -->
            <ul class="row headerA-nav">
              <li
                v-for="(item,index) in List"
                :key="index"
                style="margin-left:.3rem"
                class="row item-center pointer"
                :class="num==index?'active triangle':''"
                @click="listActive(index)"
              >{{item.title}}</li>
            </ul>
          </div>
          <!-- 登录块 -->
          <div class="headerA-login">
            <!-- 用户是否登录判断 -->
            <div v-show="userIsLogin==false" class="row item-center login" style="height:100%">
              <!-- 用户名密码 -->
              <div class="row center" style="width:2rem;position: relative;">
                <input
                  v-model="account"
                  onkeyup="this.value=this.value.replace(/\s+/g,'')"
                  class="fz14"
                  style="border-radius:.05rem 0 0 .05rem;"
                  placeholder="用户名"
                  type="text"
                >
                <span
                  style="font-size:.14rem;color:red;position: absolute;left:1rem;bottom:-.25rem;display: inline-block;width:2rem;"
                >{{info}}</span>
              </div>
              <div class="headerA-login-pwd row center">
                <input
                  class="fz14"
                  type="password"
                  v-model="password"
                  onkeyup="this.value=this.value.replace(/\s+/g,'')"
                  placeholder="用户密码"
                  style
                >
                <button
                  @click="login()"
                  class="row center headerA-login-txt pointer"
                  style="border-radius:0 .05rem .05rem 0;"
                >登录</button>
                <span class="fz16">忘记密码？</span>
              </div>
              <div
                @click="regShowClick()"
                class="row center pointer"
                style="width:1rem;margin-left:.2rem;background:#888;border-radius:.05rem;"
              >
                <p style="font-size:.18rem;color:#DDD;">注册</p>
              </div>
            </div>
            <!-- 用户已登录用户信息块 -->
            <div
              v-show="userIsLogin==true"
              class="row item-center loginTo"
              style="height:100%;padding-right:.5rem;"
            >
              <div class="row item-center">
                <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>
              <!-- 钱包 消息 用户信息 按钮 及hover激活样式 -->
              <div class="row item-center headerA-img pointer">
                <div class="row item-center">
                  <img
                    @mouseover="imgMT(1)"
                    @mouseout="imgOUT()"
                    :src="imgNum==1?img.walletHover:img.wallet"
                    alt
                  >
                  <div class="userIcon">
                    <p>
                      盈利：
                      <span style="color:#02D36A">50.00</span>
                    </p>
                    <p>
                      亏损：
                      <span style="color:#F76649">-20.00</span>
                    </p>
                  </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="headerA-bottom row vertical-center">
        <div class="middle">
          <!-- 激活 -->
          <ul class="row headerA-list item-center">
            <li class="pointer row center" v-for="(item,index) in navList" @click="navActive(index,item.type_code)"
              :key="index"
              :class="{active:nav_code == item.type_code }"
            >{{item.name}}</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="row vertical-center" style="padding-top:.08rem; margin-top:1.5rem">
      <!-- 左侧赛事数据展示 及 激活样式    /* height: 8.52rem; */ -->
      <div class="middle row">
        <div class="mainLeft scroll">
          <div class="mainLeft-scroll">
            <div v-for="(item,index) in leftData" :key="index">
              <div>
                <div class="mainLeft-title fz16 row item-center allAlignment">
                  <div class="row item-center">
                    <img v-if="item.code=='zq'" src="@/assets/st-imges/footballimg.png">
                    <img v-if="item.code=='lq'" src="@/assets/st-imges/basketballimg.png">
                    <img v-if="item.code=='bq'" src="@/assets/st-imges/baseballimg.png">
                    <img v-if="item.code=='wq'" src="@/assets/st-imges/tennisimg.png">
                    {{item.code=='zq'?'足球':''}}
                    {{item.code=='lq'?'篮球':''}}
                    {{item.code=='bq'?'棒球':''}}
                    {{item.code=='wq'?'网球':''}}
                  </div>
                  <span class="mainLeft-title-num">{{item.num}}</span>
                </div>
                <ul class="mainLeft-list pointer" v-for="(items,i) in item.list" :key="i">
                  <li
                    class="row allAlignment hover fz14"
                    :class="items.active==true?'active':''"
                    @click="mainLeftClick(item.code,items.odds_code,item.code,i)"
                  >
                    <p>{{items.title}}</p>
                    <p>{{items.num}}</p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>

        <!-- 中间数据展示区 -->
        <div :class="zoom==false?'mainactive':'main'">
          <!-- 此处为后加入组件所在位置 -->
          <div class="scroll main-center">
            <!-- 挡板组件 -->
            <div class="load" v-if="lodShow">
              <loading/>
            </div>
            <div v-show="!lodShow">
              <!-- 让球大小 -->
              <div v-if="play_code == 'CO'">
                <div v-if="ballType=='zq'">
                  <theBallSize/>
                </div>
                <div v-else-if="ballType=='lq'">
                  <basketballTheBallSize/>
                </div>
                <div v-else-if="ballType=='bq'">
                  <baseballTheBallSize/>
                </div>
                <div v-else-if="ballType=='wq'">
                  <tennisThePlateTheBureau/>
                </div>
              </div>
              <!-- 独赢 -->
              <div v-if="play_code == 'C'">
                <OnlyWin/>
              </div>
              <!-- 总进球数 -->
              <div v-if="play_code == 'TG'">
                <totalGoal/>
              </div>
              <!-- 半场/全场 -->
              <div v-if="play_code == 'HF'">
                <Fullhalf/>
              </div>
              <!-- 波胆 -->
              <div v-if="play_code == 'B'">
                <WaveBravery/>
              </div>
              <!-- 冠军 -->
              <div v-if="play_code == 'kemp'">
                <champion/>
              </div>
              <!-- 进球单双 -->
              <div v-if="play_code == 'TS'">
                <singleAndDouble/>
              </div>
              <!-- 球队最先/最后进球 -->
              <div v-if="play_code == 'FLB'">
                <startAndEnd/>
              </div> 
              <!-- 滚球足球 -->
              <div v-if="play_code == 'StRollBall'">
                <footballRollBall/>
              </div>
              <!-- 滚球篮球 -->
              <div v-if="play_code == 10001">
                <BasketballRollBall/>
              </div>
              <!-- 滚球棒球 -->
              <div v-if="play_code == 10002">
                <baseballRollBall/>
              </div>
              <!-- 滚球网球 -->
              <div v-if="play_code == 10003">
                <tennisRollBall/>
              </div>
              <!-- 普通赛事赔率玩法 -->
              <div v-if="play_code == 10010">
                <playBetting/>
              </div>

              <!-- 足球滚球赛事赔率玩法 -->
              <div v-if="play_code == 10011">
                <zqRollBall/>
              </div>

              <!-- 篮球滚球赛事赔率玩法 -->
              <div v-if="play_code == 10012">
                <lqRollBall/>
              </div>

              <!-- 棒球滚球赛事赔率玩法 -->
              <div v-if="play_code == 10013">
                <bqRollBall/>
              </div>

              <!-- 网球滚球赛事赔率玩法 -->
              <div v-if="play_code == 10014">
                <wqRollBall/>
              </div>
              <!-- <WaveBravery /> -->
              <!-- 联赛选择表 -->
              <div v-if="play_code == 10015">
                <elasticFrame/>
              </div>
            </div>
            </div>
        </div>
        <!-- 右侧功能部分 -->
        <div class="scroll" :class="zoom?'mainright':'mainrightactive'">
          <!-- 直播区块 -->
          <div class="mainright-liveSystem">
            <div
              class="row center allAlignment"
              style="padding:0 .2rem;height:.5rem;color:#EEE;background:linear-gradient(180deg,rgba(153,153,153,1) 0%,rgba(86,86,86,1) 100%);font-size:.18rem;"
            >
              直播中心
              <p
                class="mainright-liveSystem-btn pointer row center hover br05"
                @click="zoomClick()"
              >
                <img src="@/assets/st-imges/suoxiao.png" alt>
              </p>
            </div>
            <liveTable />
            
          </div>
          <!-- 投注单区块 -->
          <div class="mainright-betting">
            <div
              class="bettinbox row item-center"
              :class="bettingList?'bettinboxactive':'bettinboxinactive'"
              style
            >投注单</div>
            <div v-show="Limit == 0">
              <div
                class="row center"
                style="height:1.2rem;background:#666;color:#999;font-size:.16rem"
              >暂无相关数据</div>
            </div>
            <!-- 单注投注表 -->
            <div v-show="isBetting == 1">
              <oddBettingTable/>
            </div>
            <!-- 串式投注表 -->
            <div v-show="isBetting == 2">
              <eventBettingTable/>
            </div>
          </div>
          <!-- 联系我们 -->
          <div class="mainright-contactUs">
            <div class="mainright-contactUs-title row item-center">联系我们</div>
            <div class="mainright-contactUs-box">
              <div class="contactUs row center">
                <div class="contactUs-txt triangle fz14">
                  <div class="row item-center">
                    <div>
                      <img src="@/assets/st-imges/dianhua.png" alt>
                    </div>
                    <div class="fz14" style="margin-left:.15rem; line-height: .25rem;">
                      <p>客服热线:</p>
                      <p>0063-9958276789</p>
                    </div>
                  </div>
                  <div class="row item-center" style="margin-top:.16rem;">
                    <div>
                      <img src="@/assets/st-imges/xinfeng.png" alt>
                    </div>
                    <div class="fz14" style="margin-left:.15rem;line-height: .25rem;">
                      <p>电邮地址:</p>
                      <p>HX669.com@gmail.com</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </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 bottomA-top row fz14" style="margin:0 auto">
        <div class="bottomA-top-left">
          <h3>其他相关链接</h3>
          <ul>
            <li>关于我们</li>
            <li>网站导览</li>
            <li>博彩责任</li>
            <li>规则与条款</li>
            <li>隐私权政策</li>
            <li>代理加盟</li>
          </ul>
        </div>
        <div class="bottomA-top-center">
          <h3>是否需要帮助？</h3>
          <ul>
            <li>存款帮助</li>
            <li>取款帮助</li>
            <li>常见问题</li>
            <li>在线客服</li>
            <li>联系我们</li>
          </ul>
        </div>
        <div class="bottomA-top-right">
          <h3>支付方式</h3>
          <p>享受畅通无阻的存提款体验，我们的支付方式快速又安全。</p>
          <p>HX669支持全球主要支付方式！</p>
          <ul class="row item-center allAlignment" style="width:4.8rem;height:1.5rem;">
            <li>
              <img style="width:.8rem;height:.4rem" src="@/assets/st-imges/icon_quick_pay.png" alt>
            </li>
            <li>
              <img style="width:1.2rem;height:.5rem" src="@/assets/st-imges/icon_alipay.png" alt>
            </li>
            <li>
              <img style="width:1rem;height:.4rem" src="@/assets/st-imges/icon_qqpay.png" alt>
            </li>
            <li>
              <img style="width:1rem;height:.4rem" src="@/assets/st-imges/icon_wxpay.png" alt>
            </li>
          </ul>
        </div>
      </div> -->
      <div
        class="middle bottomA-bottom fz14 row center"
        style="margin:0 auto"
      >HX669属于HX669有限公司注册 版权所有©2019</div>
    </div>
    <div class="bigLoading" v-if="bigLoad">
      <bigLoading/>
    </div>
    <registered class="reg" v-if="regShow"/>
  </div>
</template>

<script>
import "@/css/index.css";
import liveTable from "@/components/liveTable";
import navLIstData from "@/assets/navLIstData";
import oddBettingTable from "@/components/oddBettingTable";
import eventBettingTable from "@/components/eventBettingTable";
import champion from "@/components/champion";
import startAndEnd from "@/components/startAndEnd";
import theBallSize from "@/components/theBallSize";
import singleAndDouble from "@/components/singleAndDouble";
import playBetting from "@/components/playBetting";
import tennisRollBall from "@/components/tennisRollBall";
import footballRollBall from "@/components/footballRollBall";
import OnlyWin from "@/components/OnlyWin";
import totalGoal from "@/components/totalGoal";
import Fullhalf from "@/components/Fullhalf";
import WaveBravery from "@/components/WaveBravery";
import zqRollBall from "@/components/zqRollBall";
import lqRollBall from "@/components/lqRollBall";
import bqRollBall from "@/components/bqRollBall";
import wqRollBall from "@/components/wqRollBall";
import BasketballRollBall from "@/components/BasketballRollBall";
import baseballRollBall from "@/components/baseballRollBall";
import basketballTheBallSize from "@/components/basketballTheBallSize";
import baseballTheBallSize from "@/components/baseballTheBallSize";
import tennisThePlateTheBureau from "@/components/tennisThePlateTheBureau";
import elasticFrame from "@/components/elasticFrame";
import loading from "@/components/loading";
import bigLoading from "@/components/bigLoading";
import registered from "@/components/registered";
export default {
  data() {
    return {
      info: "", //登录时错误提示
      account: "", //用户名
      password: "", //密码
      zoom: true, //缩放
      bettingList: true, //投注数据
      userIsLogin: false, //  用户是否登录
      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")
      }, //头部图片
      List: [
        { title: "体育赛事", num: 0 },
        // { title: "优惠", num: 1 },
        // { title: "手机版", num: 2 }
      ], // 头部导航列表
      imgNum: 0, //头部图片hover效果
      num: 0, //头部导航激活样式
      navList: [
        { name: "滚球", type_code: "StRollBall", id: 0 },
        { name: "即将", type_code: "StSoon", id: 1 },
        { name: "今日", type_code: "StToday", id: 2 },
        { name: "早盘", type_code: "StMorningPlate", id: 3 },
        { name: "串场", type_code: "StStringScene", id: 4 }
        // { name: "冠军",type_code:'StChampion', id: 5 }
      ],
      leftData: "", //左侧导航数据
      dataIndex: "StMorningPlatezq0", //左侧导航数据下标
      ball_code: "", //球类代码
      nav_code: "StMorningPlate", //活动代码默认早盘
      play_code: "CO", //滚球玩法代码默认'StRollBall'
      ballType: "zq", //球类型
      timers: true, //
      isBetting: 0, //显示投注窗默契不显示1=单式、2串式
      lodShow: false, // 小挡板显示，
      bigLoad: false, //大挡板显示
      regShow: false, //注册显示
      Limit:'',//
      
    };
  },
  /***
   * 方法
   */
  methods: {
    // 登录
    login() {
      // appip_source = '来源';
      // appuip_user = '1008'
      if (this.account.length > 0 && this.password.length > 0) {
        this.$http
          .post(this.$ports.login.login, {
            account: this.account,
            password: this.password
          })
          .then(res => {
            if (res.data.status == 1) {
              this.info = "";
              this.$public.setItem("user",res.data.data[0]);
              //投注限制
              this.$public.setItem("limit",JSON.stringify(res.data.data[0].bet_money_limit));
              localStorage.setItem("token", res.data.data[0].token);
              this.$store.dispatch("SET_TOKEN", res.data.data[0].token);
              this.$dialog.toast({ mes: "登录成功！", timeout: 2000 });
              this.userIsLogin = true;
              this.user.userName = res.data.data[0].name;
              this.user.balance = res.data.data[0].cash;
              this.timers = true;
             
            } else {
              this.userIsLogin = false;
              this.info = res.data.msg;
            }
          });
      } else {
        this.userIsLogin = false;
        this.info = "账号或密码有误";
      }
    },
    // 退出登录
    // escLogin() {
    //   localStorage.setItem("token", "");
    //   localStorage.setItem("user", "");
    //   this.$dialog.toast({ mes: "退出登录", timeout: 1000 });
    //   this.userIsLogin = false;
    //   this.timers = false;
    // },
    escLogin() {
      this.$http
        .post(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.userIsLogin = false;
            this.$router.push("/");
          } else {
            this.$dialog.toast({ mes: "退出登录失败", timeout: 2000 });
          }
        });
    },
    // 跳转到个人中心必须要在登录成功状态
    PersonalCenterTo() {
      if (this.userIsLogin == true) {
        this.$router.push("/PersonalCenter");
      } else {
        this.$dialog.toast({ mes: "未登录，请登录。", timeout: 1500 });
      }
    },
    //左侧激活
    /*---------------------------------------*/
    mainLeftClick(code, odds_code, type, index) {
      console.log('状态',code,odds_code,type,index);
      let activity = this.$store.getters.getActivity
      if (type) {
        this.ballType = type;
      } else {
        this.ballType = "zq";
      }
      if (this.dataIndex == activity+type + index) return false;
      this.$store.dispatch("SET_LEAGUEDATA",[]);
      //console.log(type);
      this.$store.dispatch("SET_BALL_CODE", type);
      this.dataIndex = activity+type + index;
      if (odds_code) {
        this.$store.dispatch("SET_PALY_CODE", odds_code);
        this.$store.dispatch("SET_CONTROLROUTING", odds_code);
      } else {
        let activity_code = "StRollBall"; //默认足球StRollBall
        if (type == "lq") {
          activity_code = 10001;
        } else if (type == "bq") {
          activity_code = 10002;
        } else if (type == "wq") {
          activity_code = 10003;
        }
        this.$store.dispatch("SET_CONTROLROUTING", activity_code);
      }
      this.leftData.forEach(e => {
        //if(e.code == code ){
        e.list.forEach(res => {
          if (res.odds_code == odds_code && e.code == code) {
            this.$set(res, "active", true);
          } else {
            this.$set(res, "active", false);
          }
        });
      });
    },

    // 头部激活
    /*--------------------------------------*/
    listActive(index) {
      this.num = index;
    },

    //活动
    /*--------------------------------------*/
    navActive(index, type_code) {
      // console.log(index, type_code);
      if (this.nav_code == type_code) return false;
      this.nav_code = type_code;
      this.$store.dispatch("SETACTIVITY", type_code);
      if (this.nav_code != "StRollBall") {
        this.$store.dispatch("SET_BALL_CODE", 'zq');
        this.ballType = "zq";
        this.$store.dispatch("SET_PALY_CODE",'CO');
        this.$store.dispatch("SET_CONTROLROUTING",'CO');
        let isBreak = false;
        for(let i = 0; i < navLIstData.Other.length;i++ ){
          for(let j = 0 ; j<navLIstData.Other[i].list.length; j++){
            if(navLIstData.Other[i].list[j].active){
              this.$set(navLIstData.Other[i].list[j], "active", false);
              isBreak = true;
              break;
            }
          }
          if(isBreak)break;         
        }
        this.$set(navLIstData.Other[0].list[0], "active", true);

      } else if (this.nav_code == "StRollBall") {
        this.$store.dispatch("SET_BALL_CODE", 'zq');
        this.ballType = "zq";
        this.$store.dispatch("SET_CONTROLROUTING", "StRollBall");
          navLIstData.RollBall.forEach((res,index)=>{
            this.$set(res.list[0],"active", false);
          })
          this.$set(navLIstData.RollBall[0].list[0],"active", true);
      }
      if (type_code == "StStringScene") {
        this.$store.dispatch("SET_BETTINGTYPE", 2);
      } else {
        this.$store.dispatch("SET_BETTINGTYPE", 1);
      }
      this.getAjax(this.nav_code);
    },

    //主页右侧缩放
    /*-----------------------------------*/
    zoomClick() {
      this.zoom = !this.zoom;
    },

    //后面要放弃此方法
    imgMT(index) {
      this.imgNum = index;
    },
    //后面要放弃此方法
    imgOUT() {
      this.imgNum = 0;
    },

    /*----------------------------------- */
    //普通活动数据组合
    dataCombination(data) {
      this.pointsBallFinishing(0, data.zq);
      this.pointsBallFinishing(1, data.lq);
      this.pointsBallFinishing(2, data.bq);
      this.pointsBallFinishing(3, data.wq);
    },

    /*------------------------------------*/
    //分球处理
    pointsBallFinishing(num, data) {
      let obj = navLIstData.Other;
      if (data.length > 0) {
        obj[num].num = data[0].game_num;
        data.forEach(res => {
          obj[num].list.forEach(e => {
            if (e.odds_code == res.p_code) {
              e.num = res.code_num;
            }
          });
        });
      } else {
        obj[num].num = 0;
        obj[num].list.forEach(e => {
          e.num = 0;
        });
      }
    },

    /*-------------------------------------*/
    //滚球数据组合
    rollBallData(e) {
      let obj = navLIstData.RollBall;
      let zq = e.zq,lq = e.lq, wq = e.wq,bq = e.bq;
      obj[0].num = zq.length > 0 ? zq[0].game_num : 0;
      obj[0].list[0].num = zq.length > 0 ? zq[0].game_num : 0;
      obj[1].num = lq.length > 0 ? lq[0].game_num : 0;
      obj[1].list[0].num = lq.length > 0 ? lq[0].game_num : 0;
      obj[2].num = bq.length > 0 ? bq[0].game_num : 0;
      obj[2].list[0].num = bq.length > 0 ? bq[0].game_num : 0;
      obj[3].num = wq.length > 0 ? wq[0].game_num : 0;
      obj[3].list[0].num = wq.length > 0 ? wq[0].game_num : 0;
      this.leftData = obj;
      //console.log(this.leftData);
    },

    /*--------------------------------------- */
    //获取导航球类和玩法数量
    getAjax(type) {
      //console.log(type);
      this.leftData = [];
      this.$http.get(this.$ports.home.gameList, { type }).then(res => {
        let zq = [],lq = [],bq = [],wq = [];
        //console.log(res);
        if (res.data.status == 1) {
          if (res.data.data.length > 0) {
            res.data.data.forEach(e => {
              if (e.game_code == "zq") {
                zq.push(e);
              } else if (e.game_code == "lq") {
                lq.push(e);
              } else if (e.game_code == "bq") {
                bq.push(e);
              } else if (e.game_code == "wq") {
                wq.push(e);
              }
            });
            let obj = { zq, lq, bq, wq };
            if (type == "StRollBall") {
              
              this.rollBallData(obj);
            } else {
              this.dataCombination(obj);
              this.leftData = navLIstData.Other;
            }
          } else {
            if (type == "StRollBall") {
              this.leftData = navLIstData.RollBall;
            } else {
              this.leftData = navLIstData.initOther;
            }
          }
        }
        if (this.leftData.length > 0) {
          this.bigLoad = false;
        }
      });
    },

    /*------------------------------------------- */
    //获取玩法别名
    getAjaxanme: function() {
      this.$http
        .get(this.$ports.gambling.getOddsCode, {
          type: "p_code"
        })
        .then(res => {
          this.$store.dispatch("SET_PLAYALIAS", res.data.data);
          // console.log(res.data.data);
        });
    },
    // 获取个人中心用户信息
    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.$dialog.alert({
              mes: "您好，您的登录已过期，请您前往登录",
              timeout: 1500
            });
            localStorage.setItem("token", "");
            this.userIsLogin = false;
            this.timers = false;
          }
        });
    },
    //每隔2分钟获取用户信息，用于判断用户是否登录过期
    getUserDataTime() {
      let _this = this;
      this.$public.ajaxTimerFun(timing => {
        if (_this.timers) {
          _this.getUserData();
        } else {
          clearInterval(timing);
        }
      }, 1000 * 10);
    },
    //注册框的展示
    regShowClick() {
      this.$store.dispatch("GETRGSHOW", true);
    },
   
  },
  /**
   * 计算属性
   */
  computed: {
    //获取获取路由码数据
    getControlRouting() {
      return this.$store.getters.getControlRouting;
    },
    //获取投注数量
    getLimit() {
      return this.$store.getters.getLimit;
    },
    getPassLimit(){
      return this.$store.getters.getPassLimit;
    },
    getLodShow() {
      return this.$store.getters.getLoading;
    },
    getActy() {
      return this.$store.getters.getActivity;
    },
    // 获取注册框状态
    getRgShow() {
      return this.$store.getters.getRgShow;
    },

  },
  /**
   * 监听器
   */
  watch: {
    //监听页面路由
    getControlRouting(val) {
      // console.log(val);
      this.play_code = val;
    },
    //是否显示投注窗口
    getLimit(val) { // val的值为选中数
      this.Limit = val;
      if (val > 0) {
        this.isBetting = 1;
      }
    },
    getPassLimit(val){
      this.Limit = val;
      if(val > 0){
        this.isBetting =2;
      }
    },
    getLodShow(val) {
      //console.log("val", val);
      this.lodShow = val;
    },
    getActy(val) {
      this.bigLoad = true;
      this.lodShow = false;
      this.isBetting = this.$store.getters.getBettingType;
    },
    getRgShow(val) {
      this.regShow = val;
    },
    // getToken(val) {
    //   if (val) {
    //     let userInfo = JSON.parse(this.$public.getItem("user"));
    //     this.userIsLogin = true;
    //     this.user.userName = userInfo[0].name;
    //     this.user.balance = userInfo[0].cash;
    //   }
    // }
  },
  /**
   * 页面初始化完成挂载
   */
  mounted() {
    // //活动代码activity SETACTIVITY
    // this.nav_code = this.$store.getters.getActivity;
    // //玩法代码
    // this.play_code = this.$store.getters.getPaly_code;
    // //球类代码
    // this.ball_code = this.$store.getters.getBallCode;
    //左侧默认数据
    this.getAjax(this.nav_code);
    //获取玩法代码
    this.getAjaxanme();
    // if (localStorage.getItem("token")) {
    //   let userInfo = localStorage.getItem("user") != null ? JSON.parse(localStorage.getItem("user")) :'' ;
    //   this.userIsLogin = true;
    //   this.user.userName = userInfo[0].name;
    //   this.user.balance = userInfo[0].cash;
    // }

   

    //登录后获取用户信息
    if (localStorage.getItem("token")) {
      this.getUserDataTime();
      this.getUserData();
    }
  },
  beforeDestroy() {
    this.timers = false;
  },
  components: {
    oddBettingTable,
    eventBettingTable,
    champion,
    startAndEnd,
    theBallSize,
    singleAndDouble,
    playBetting,
    tennisRollBall,
    footballRollBall,
    OnlyWin,
    totalGoal,
    Fullhalf,
    WaveBravery,
    zqRollBall,
    lqRollBall,
    bqRollBall,
    wqRollBall,
    WaveBravery,
    BasketballRollBall,
    baseballRollBall,
    baseballTheBallSize,
    basketballTheBallSize,
    tennisThePlateTheBureau,
    elasticFrame,
    loading,
    bigLoading,
    registered,
    liveTable,
  }
};
</script>

<style scoped>
.header-top {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 9;
  width: 100%;
}

.fz16 {
  font-size: 0.16rem;
}
.fz14 {
  font-size: 0.14rem;
}
.br05 {
  border-radius: 0.05rem;
}
.hover:hover {
  background: #bbb;
  color: #f76649;
}
.pointer {
  cursor: pointer;
}
.headerA-top {
  height: 1rem;
  background: linear-gradient(
    180deg,
    rgba(153, 153, 153, 1) 0%,
    rgba(86, 86, 86, 1) 100%
  );
}
.headerA-bottom {
  height: 0.5rem;
  background: #444444;
}
.headerA-title {
  font-size: 0.42rem;
  margin-left: 0.3rem;
}
.headerA-nav {
  font-size: 0.24rem;
  height: 100%;
  color: #fff;
}
.headerA-nav li {
  height: 100%;
}
.headerA-nav li.active {
  font-weight: bold;
}
.triangle.active::after {
  border-width: 0.1rem;
  border-left-color: #444;
  border-top-color: #444;
  left: 37%;
  bottom: -0.12rem;
  transform: rotate(45deg);
}
.headerA-login {
  height: 100%;
}
.headerA-login > div {
  height: 0.4rem;
}
.headerA-login div input {
  width: 2rem;
  height: 100%;
  border: none;
  background: #eeeeee;
  color: #999;
  padding-left: 0.2rem;
}
.headerA-login-pwd {
  width: 3rem;
  margin-left: 0.1rem;
  position: relative;
}
.headerA-login-pwd span {
  color: #f76649;
  position: absolute;
  left: 1rem;
  bottom: -0.25rem;
  cursor: pointer;
}
.headerA-login-txt {
  width: 1rem;
  height: 0.4rem;
  background: #f76649;
  border: none;
  color: #ffffff;
  font-size: 0.18rem;
}

.headerA-login-txt:active {
  background: #a83131;
}
.headerA-top-left {
  width: 55%;
}
.headerA-list {
  padding-left: 1.88rem;
  height: 100%;
  color: #ccc;
  font-size: 0.18rem;
}
.headerA-list li {
  width: 0.8rem;
  height: 100%;
}
.headerA-list li:hover {
  color: #fff;
  font-weight: bold;
}
.headerA-list li.active {
  color: #fff;
  font-weight: bold;
  position: relative;
}
.headerA-list li.active::after {
  content: "";
  display: inline-block;
  width: 0.3rem;
  height: 0.04rem;
  background: #f76649;
  position: absolute;
  left: 32%;
  bottom: 0;
}
.loginTo > div {
  height: 100%;
  font-size: 0.18rem;
  color: #fff;
}

.headerA-img img {
  width: 0.3rem;
  height: 0.3rem;
  margin-left: 0.2rem;
}
.headerA-img {
  margin-left: 0.5rem;
}
.headerA-img > div {
  position: relative;
}

.mainLeft {
  width: 2.8rem;
  height: 8.2rem;
  overflow-y: auto;
  overflow-x: hidden;
}
.mainLeft-scroll {
  height: 100%;
  width: 2.7rem;
  background: #ccc;
}
.mainLeft-title {
  height: 0.6rem;
  color: #eee;
  background: linear-gradient(
    180deg,
    rgba(153, 153, 153, 1) 0%,
    rgba(86, 86, 86, 1) 100%
  );
  padding: 0 0.1rem 0 0.2rem;
}
.mainLeft-title img {
  width: 0.22rem;
  height: 0.22rem;
  margin-right: 0.16rem;
}
.mainLeft-title-num {
  width: 0.4rem;
  height: 0.4rem;
  background: #f76649;
  border-radius: 50%;
  font-size: 0.1rem;
  text-align: center;
  line-height: 0.4rem;
}
.mainLeft-list li {
  height: 0.4rem;
  border-bottom: 0.01rem solid #ccc;
  line-height: 0.4rem;
  padding: 0 0.25rem 0 .2rem;
  color: #666666;
  background: #ddd;
}
.mainLeft-list li.active {
  background: #fff;
  border-left: 0.04rem solid #f76649;
}
.main {
  width: 9rem;
  /* margin: 0 .1rem; */
}
.mainactive {
  width: 10rem;
  /* margin: 0 0.1rem; */
  /* margin-left: 0.1rem; */
}
input {
  border: none;
  background: #efefef;
  padding-left: 0.2rem;
  width: 4.6rem;
  height: 0.3rem;
  /* border-radius: 0.05rem 0 0 0.05rem; */
}
img {
  width: 0.2rem;
  height: 0.2rem;
  filter: brightness(1.2)
}

.mainright {
  width: 4rem;
  height: 8.2rem;
  overflow-x: hidden;
  overflow-y: auto;
  margin-left: 0.1rem;
}
.mainrightactive {
  width: 3rem;
  height: 7.8rem;
  overflow-x: hidden;
  overflow-y: auto;
  /* margin-left: 0.2rem; */
}

.mainright-liveSystem {
  position: relative;
}
.mainright-liveSystem-btn {
  width: 0.28rem;
  height: 0.28rem;
  background: #555;
}



.bettinbox {
  background: linear-gradient(
    180deg,
    rgba(153, 153, 153, 1) 0%,
    rgba(86, 86, 86, 1) 100%
  );
  height: 0.5rem;
  font-size: 0.18rem;
  color: #eee;
  padding-left: 0.2rem;
}
.bettinbox::after {
  border-width: 0.08rem;
  left: 0.36rem;
  bottom: -0.087rem;
  transform: rotate(45deg);
}
.bettinboxactive::after {
  border-left-color: #e5e5e5;
  border-top-color: #e5e5e5;
}
.bettinboxinactive::after {
  border-left-color: #777;
  border-top-color: #777;
}
.mainright-betting {
  margin-top: 0.2rem;
}

.mainright-contactUs {
  margin-top: 0.2rem;
}
.mainright-contactUs-title {
  padding-left: 0.2rem;
  height: 0.5rem;
  background: linear-gradient(
    180deg,
    rgba(153, 153, 153, 1) 0%,
    rgba(86, 86, 86, 1) 100%
  );
  font-size: 0.18rem;
  color: #eee;
}
.mainright-contactUs-box {
  height: 2.36rem;
  background: url("../../assets/st-imges/contactUs.png") no-repeat;
  background-size: 100% 100%;
}
.bottomA-top {
  padding-top: 0.4rem;
  height: 3.3rem;
  color: #fff;
}
.title {
  font-size: 0.18rem;
}
h3 {
  font-size: 0.18rem;
  margin-bottom: 0.2rem;
}
.bottomA-top div {
  margin-right: 2.2rem;
  flex-wrap: nowrap;
}
.bottomA-top-left li {
  line-height: 0.36rem;
}
.bottomA-top-center li {
  line-height: 0.36rem;
}
.bottomA-top-right p {
  line-height: 0.36rem;
}
.bottomA-bottom {
  color: #ccc;
  height: 0.68rem;
}
.contactUs {
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
}
.contactUs-txt {
  color: #fff;
  width: 80%;
  height: 1.6rem;
  background: rgba(247, 102, 73, 0.5);
  padding: 0.16rem 0.3rem;
}
.contactUs-txt div {
  flex-wrap: wrap;
}
.contactUs-txt::after {
  border-width: 0.15rem;
  border-left-color: rgba(247, 102, 73, 0.5);
  border-top-color: rgba(247, 102, 73, 0.5);
  left: 45%;
  bottom: -0.14rem;
  transform: rotate(-135deg);
}

.betting-input {
  width: 1.6rem;
  height: 0.34rem;
  background: #fff;
}
.betting-earn {
  background: #e7ffda;
  border: 1px solid #bfe2b3;
  width: 1.6rem;
  height: 0.34rem;
  margin-left: 0.2rem;
  color: #999;
  padding-left: 0.1rem;
}
.eorr {
  width: 3.5rem;
  height: 0.5rem;
  background: #a83131;
  color: #fff;
}
.main-center {
  height: 8rem;
  overflow-x: hidden;
  overflow-y: auto;
}

.elvesfigureBox li {
  width: 0.3rem;
  height: 0.3rem;
  cursor: pointer;
}

.userIcon {
  display: none;
}
.headerA-img > div:hover .userIcon {
  display: block;
  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: -1.1rem;
  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);
}
.login div {
  height: 0.4rem;
}
.bigLoading {
  position: fixed;
  z-index: 999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
}
</style>