fontend-web/src/pages/entry.vue

<template>
  <div class="entry-wrapper">
    <div class="entry-content">
      <div class="enrty-content__header">
        <p class="entry-title">区块链金融交易所实训系统</p>
        <div class="centerNav">
          <el-button type="success" @click="submitExam">提交</el-button>
          <el-button type="danger" @click="reStartTest">重新开始</el-button>
        </div>
      </div>
      <div class="usdList paylist">
        <div class="usdItem wechat">
          <!-- 跳转到交易中心,携带交易对 -->
          <a href="javascript:;">
            <p>初始资金：{{ userTimeMoneyDto.wxPayInit }} CNY</p>
            <p>可用资金：{{ userTimeMoneyDto.wxPay }} CNY</p>
            <!--<p>全部资金：{{ tatolPrice }} CNY</p>-->
          </a>
        </div>
        <div class="usdItem alipay">
          <!-- 跳转到交易中心,携带交易对 -->
          <a href="javascript:;">
            <p>初始资金：{{ userTimeMoneyDto.aliPayInit }} CNY</p>
            <p>可用资金：{{ userTimeMoneyDto.aliPay }} CNY</p>
            <!--  <p>全部资金：{{ tatolPrice }} CNY</p>-->
          </a>
        </div>
        <div class="usdItem bank">
          <!-- 跳转到交易中心,携带交易对 -->
          <a href="javascript:;">
            <p>初始资金：{{ userTimeMoneyDto.bankCardInit }}CNY</p>
            <p>可用资金：{{ userTimeMoneyDto.bankCard }} CNY</p>
            <!--<p>全部资金：{{ tatolPrice }} CNY</p>-->
          </a>
        </div>
      </div>
      <div class="usdList tabs">
        <el-tabs v-model="activeName">
          <el-tab-pane label="BTC" name="BTC">
            <div class="tabs-flex">
              <div class="flex-1">
                <p>总资产: {{ userTimeMoneyDto.btc }}</p>
                <p>≈{{ btcRMBCount }} CNY</p>
                <p>提币地址：{{ userTimeMoneyDto.assessUserId }}</p>
              </div>
              <!--  <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>
              <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>
              <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>-->
            </div>
          </el-tab-pane>
          <el-tab-pane label="USDT" name="USDT">
            <div class="tabs-flex">
              <div class="flex-1">
                <p>总资产: {{ userTimeMoneyDto.usdt }}</p>
                <p>≈{{ usdtRMBCount }} CNY</p>
                <p>提币地址：{{ userTimeMoneyDto.assessUserId }}</p>
              </div>
              <!--   <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>
              <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>
              <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>-->
            </div>
          </el-tab-pane>
          <el-tab-pane label="EOS" name="EOS">
            <div class="tabs-flex">
              <div class="flex-1">
                <p>总资产: {{ userTimeMoneyDto.eos }}</p>
                <p>≈{{ eosRMBCount }} CNY</p>
                <p>提币地址：{{ userTimeMoneyDto.assessUserId }}</p>
              </div>
              <!--  <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>
              <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>
              <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>-->
            </div>
          </el-tab-pane>
          <el-tab-pane label="ETH" name="ETH">
            <div class="tabs-flex">
              <div class="flex-1">
                <p>总资产: {{ userTimeMoneyDto.eth }}</p>
                <p>≈{{ ethRMBCount }} CNY</p>
                <p>提币地址：{{ userTimeMoneyDto.assessUserId }}</p>
              </div>
              <!-- <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>
              <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>
              <div class="flex-1">
                <p>总资产: 0</p>
                <p>≈0 CNY</p>
              </div>-->
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
      <a href="javascript:;" class="entry-btn" @click="goIndex">
        <img src="../images/entry/btn.png" />
      </a>
      <!--   <div class="usdList">
      <div class="usdItem" element-loading-background="rgba(0, 0, 0, 0.2)">
        &lt;!&ndash; 跳转到交易中心,携带交易对 &#45;&#45;/>
        <a href="javascript:;">
          <p>微信 <i class="el-icon-star-off"></i></p>
          <p>初始资金：{{ userTimeMoneyDto.wxPayInit}} CNY</p>
          <p>可用资金：{{ userTimeMoneyDto.wxPay }} CNY</p>
        </a>
      </div>
      <div class="usdItem" element-loading-background="rgba(0, 0, 0, 0.2)">
        &lt;!&ndash; 跳转到交易中心,携带交易对 &#45;&#45;/>
        <a href="javascript:;">
          <p>支付宝 <i class="el-icon-star-off"></i></p>
          <p>初始资金：{{ userTimeMoneyDto.aliPayInit}} CNY</p>
          <p>可用资金：{{ userTimeMoneyDto.aliPay }} CNY</p>
        </a>
      </div>
      <div class="usdItem" element-loading-background="rgba(0, 0, 0, 0.2)">
        &lt;!&ndash; 跳转到交易中心,携带交易对 &#45;&#45;/>
        <a href="javascript:;">
          <p>银行卡 <i class="el-icon-star-off"></i></p>
          <p>初始资金：{{ userTimeMoneyDto.bankCardInit}} CNY</p>
          <p>可用资金：{{ userTimeMoneyDto.bankCard }} CNY</p>
        </a>
      </div>
    </div>

    <div class="usdList tabs">
      <el-tabs v-model="activeName">
        <el-tab-pane label="BTC" name="BTC"
          >可用资金：{{ userTimeMoneyDto.btc }} <br/><br/> 总额≈：{{tatolPrice}} CNY <br/><br/> 地址：{{userTimeMoneyDto.assessUserId}}</el-tab-pane
        >
        <el-tab-pane label="USDT" name="USDT"
          >可用资金：{{ userTimeMoneyDto.usdt }} <br/><br/> 总额≈：{{tatolPrice}} CNY <br/><br/> 地址：{{userTimeMoneyDto.assessUserId}}</el-tab-pane
        >
        <el-tab-pane label="EOS" name="EOS"
          >可用资金：{{ userTimeMoneyDto.eos }} <br/><br/> 总额≈：{{tatolPrice}} CNY <br/><br/> 地址：{{userTimeMoneyDto.assessUserId}}</el-tab-pane
        >
        <el-tab-pane label="ETH" name="ETH"
          >可用资金：{{ userTimeMoneyDto.eth }} <br/><br/> 总额≈：{{tatolPrice}} CNY <br/><br/> 地址：{{userTimeMoneyDto.assessUserId}}</el-tab-pane
        >
      </el-tabs>
      </div>-->
    </div>
  </div>
</template>

<script>
import NavHeader from '@/components/common/header';
import Footer from '@/components/common/footer';
import {getUserTimeMoneyDto} from '@/api/yyyf';
import {getLeftPrice} from '@/api/currency.js';
import {submit, reStart} from '@/api/yyyf';
import {logOut} from '@/api/user';
import {signUp, signIn} from '@/api/user';
import {yyyfUrl} from '@/api/app.js';

export default {
  name: 'entry',
  data() {
    return {
      activeName: 'BTC',
      userTimeMoneyDto: {},
      tatolPrice: 0,
      //0 考试 1 练习 2 不计分
      reqType: 2,
      //剩余时间
      remainingTime: 0,
      //防止重复提交
      isSubmit: false,
      newwin: undefined,
      btcRMBCount: 0,
      usdtRMBCount: 0,
      eosRMBCount: 0,
      ethRMBCount: 0,
    };
  },
  components: {
    NavHeader,
    Footer,
  },
  methods: {
    getUserTimeMoneyDtoMethod() {
      let ths = this;
      getUserTimeMoneyDto().then(res => {
        if (res.data.code === 200) {
          ths.userTimeMoneyDto = res.data.data;
          this.getUSDTPrie();
        } else {
          ths.$message.warning({
            message: res.data.msg,
            onClose: function() {
              ths.closeWindow();
            },
          });
        }
      });
    },
    login(params) {
      signIn(params).then(res => {
        // console.log(res);
        if (res.data.code === 200) {
          //判断是否保存自动登录
          // if( this.checked === true ){
          //   Cookie.set('phoneNum',num)
          //   Cookie.set('password',pass)
          // }
          //保存登录的token到cookie
          // Cookie.set('token', res.data.data.token);
          localStorage.setItem('token', res.data.data.token);
          //重复提交标识
          localStorage.setItem('isSubmit', JSON.stringify(false));
          //保存登录的用户信息到cookie
          // Cookie.set('userData', res.data.data);
          localStorage.setItem('userData', JSON.stringify(res.data.data));
          // console.log(JSON.parse(localStorage.getItem('userData')));

          // 保存userID的信息到cookie
          // Cookie.set('userID', res.data.data.id);
          localStorage.setItem('userID', res.data.data.id);

          // 保存邀请码信息
          localStorage.setItem('invitationCode', res.data.data.invitationCode);
          this.isSubmit = false;
          location.href = '/entry';
        } else {
          this.$message.warning(res.data.msg);
          this.isSubmit = false;
        }
      });
    },
    winOpen: function() {
      if (this.newwin != undefined) {
        if (
          navigator.userAgent.indexOf('Firefox') != -1 ||
          navigator.userAgent.indexOf('Chrome') != -1
        ) {
          this.newwin.location.href = 'about:blank';
          this.newwin.close();
        } else {
          this.newwin.opener = null;
          this.newwin.open('', '_self');
          this.newwin.close();
        }
      }
      this.newwin = window.open(
        '/',
        'onlywin',
        'toolbar=no, location=no, directories=no, status=no, menubar=no, scrollbars=yes, resizable=yes, copyhistory=yes, height=600,width=1100,left=180,top=100'
      );
    },
    closeWindow: function() {
      if (
        navigator.userAgent.indexOf('Firefox') != -1 ||
        navigator.userAgent.indexOf('Chrome') != -1
      ) {
        window.location.href = 'about:blank';
        window.close();
      } else {
        window.opener = null;
        window.open('', '_self');
        window.close();
      }
    },
    sign(params) {
      signUp(params).then(res => {
        if (res.data.code === 200) {
          this.login({
            tel: params.tel,
            password: params.password,
          });
        } else {
          this.$message.warning(res.data.msg);
          this.isSubmit = false;
        }
      });
    },
    exit(params) {
      logOut().then(res => {
        if (res.data.code === 200 || res.data.code === 202) {
          // Cookie.set('userData', '');
          localStorage.setItem('userData', '');
          localStorage.removeItem('userpass');
          localStorage.removeItem('userdate');
          localStorage.removeItem('nowPassNOValue');
          if (params == undefined) {
            //window.location.href = '/';
            this.closeWindow();
          }

          // let pathName = window.location.pathname.split('/')[1];
          // console.log(pathName);
          //判断是否从个人中心页面退出登录
          // if (pathName === 'personal') {
          //   window.location.href = '/login';
          // } else {
          //   window.location.href = this.perUrl;
          // }
        } else {
          this.$message.warning(res.data.msg);
        }
      });
    },
    goIndex() {
      this.winOpen();
    },
    submitExam: function() {
      let self = this;
      //防止重复提交
      if (!self.isSubmit) {
        self.isSubmit = true;
      } else {
        return false;
      }

      submit().then(res => {
        if (res.data.code === 200) {
          this.$message.success({
            message: '提交成功',
            onClose: function() {
              if (self.reqType == 0) {
                self.closeWindow();
              } else {
                localStorage.setItem('isSubmit', JSON.stringify(true));
                self.isSubmit = false;
              }
              self.getUserTimeMoneyDtoMethod();
            },
          });
        } else {
          this.$message.warning({
            message: res.data.msg,
            onClose: function() {
              self.closeWindow();
            },
          });
        }
      });
    },
    reStartTest: function() {
      let self = this;
      //防止重复提交
      if (!self.isSubmit) {
        this.isSubmit = true;
      } else {
        return false;
      }
      //退出当前用户
      this.exit(1);
      reStart().then(res => {
        if (res.data.code === 200) {
          this.$message.success({
            message: '重新开始成功',
            onClose: function() {
              let signParams = {
                tel: res.data.data.tel,
                nickName: res.data.data.nickName,
                code: res.data.data.code,
                password: res.data.data.password,
                internationalCode: null,
                invitationCode: '',
              };
              self.sign(signParams);
            },
          });
        } else {
          this.$message.warning({
            message: res.data.msg,
            onClose: function() {
              self.closeWindow();
            },
          });
        }
      });
    },
    getUSDTPrie() {
      let ths = this;
      getLeftPrice().then(res => {
        ths.USDTPrie = res.data.data;
        // console.log(this.USDTPrie);

        // 获取币种汇率
        let cnyAmount = this.USDTPrie[0].cnyAmount;
        let btcCount = 0;
        let usdtCount = this.userTimeMoneyDto.usdt;
        let eosCount = 0;
        let ethCount = 0;

        for (let i = 0; i < this.USDTPrie.length; i++) {
          // 获取btc转usdt资产
          if (ths.USDTPrie[i].currencyPair == 'BTC-USDT') {
            // console.log(this.USDTPrie[i].amount);
            //
            btcCount = ths.userTimeMoneyDto.btc * ths.USDTPrie[i].amount;
            // console.log('btc'+this.btcPrice);
          }
          // return this.btcPrice;
        }
        for (let i = 0; i < this.USDTPrie.length; i++) {
          // 获取btc转usdt资产
          if (ths.USDTPrie[i].currencyPair == 'EOS-USDT') {
            // console.log(this.USDTPrie[i].amount);
            //
            eosCount = ths.userTimeMoneyDto.eos * ths.USDTPrie[i].amount;
            // console.log('btc'+this.btcPrice);
          }
          // return this.btcPrice;
        }

        for (let i = 0; i < this.USDTPrie.length; i++) {
          // 获取btc转usdt资产
          if (ths.USDTPrie[i].currencyPair == 'ETH-USDT') {
            // console.log(this.USDTPrie[i].amount);
            //
            ethCount = ths.userTimeMoneyDto.eth * ths.USDTPrie[i].amount;
            // console.log('btc'+this.btcPrice);
          }
          // return this.btcPrice;
        }

        ths.btcRMBCount = btcCount * cnyAmount;
        ths.usdtRMBCount = usdtCount * cnyAmount;
        ths.eosRMBCount = eosCount * cnyAmount;
        ths.ethRMBCount = ethCount * cnyAmount;

        let digitWallet =
          ths.btcRMBCount +
          ths.usdtRMBCount +
          ths.eosRMBCount +
          ths.ethRMBCount;

        let total =
          digitWallet +
          ths.userTimeMoneyDto.aliPay +
          ths.userTimeMoneyDto.wxPay +
          ths.userTimeMoneyDto.bankCard;
        // 获取总资产
        ths.tatolPrice = Math.floor(total * 10) / 10;

        // console.log(this.tatolPrice);
      });
    },
  },
  created() {
    let ths = this;
    ths.getUserTimeMoneyDtoMethod();
    let yyyfToken = localStorage.getItem('yyyfToken');
    this.isSubmit = localStorage.getItem('isSubmit') == 'true' ? true : false;
    if (yyyfToken == '' || yyyfToken == undefined) {
      this.$alert('未从以渔有方登录，点击确定返回登录', '提示', {
        type: 'error',
        showClose: false,
        confirmButtonText: '确定',
        confirmButtonClass: 'btn-self-style',
        callback: () => {
          window.location.href = yyyfUrl;
        },
      });
    } else {
      ths.reqType = localStorage.getItem('reqType');
    }
  },
};
</script>

<style scoped lang="scss">
.entry-wrapper {
  .entry-content {
    background: url(../images/entry/bg.jpg);
    background-size: cover;

    .enrty-content__header {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .centerNav {
        margin-right: 24px;
      }
    }

    .entry-btn {
      width: 265px;
      height: 30px;
      display: block;
      padding-bottom: 32px;
      margin: 0 auto 0 auto;
      cursor: pointer;

      img {
        width: 100%;
        height: 100%;
        display: block;
        cursor: pointer;
      }
    }
  }

  .entry-title {
    font-family: NotoSansHans-Regular;
    font-size: 20px;
    font-weight: normal;
    font-stretch: normal;
    line-height: 21px;
    letter-spacing: 0px;
    color: #00f5ff;
    padding: 24px;
    margin: 0;
  }
}

.paylist {
  position: relative;

  &::before {
    content: '';
    display: block;
    background-image: url(../images/entry/line1.png);
    width: 730px;
    position: absolute;
    height: 105px;
    top: -118px;
    left: 40px;
    background-size: cover;
  }
}

.usdList {
  margin: 0 auto;
  width: 815px;
  margin-top: 110px;
  display: flex;
  justify-content: space-between;

  .usdItem {
    width: 166px;
    height: 158px;
    position: relative;
    background-size: cover;

    &.wechat {
      background-image: url(../images/entry/wechat.png);
    }

    &.bank {
      background-image: url(../images/entry/bank.png);
    }

    &.alipay {
      background-image: url(../images/entry/alipay.png);
    }

    a {
      display: block;
      margin-top: 85px;
    }

    p {
      font-family: NotoSansHans-DemiLight;
      font-size: 10px;
      font-weight: normal;
      font-stretch: normal;
      letter-spacing: 0px;
      color: #08c7cf;
      margin: 6px 8px;

      &:first-child {
        margin-top: 88px;
      }
    }
  }

  &.tabs {
    color: #fff;
    background: url(../images/entry/wallet1.png);
    background-size: cover;
    margin-top: -85px;
    height: 315px;
    width: 965px;
    padding-top: 145px;

    .el-tabs {
      width: 755px;
      margin: 60px auto 14px auto;

      /deep/ .el-tabs__header {
        margin-bottom: 8px;
      }
    }

    /DEEP/ .el-tabs__nav {
      /DEEP/ .el-tabs__item {
        font-family: NotoSansHans-Regular;
        font-size: 15px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 40px;
        letter-spacing: 0px;
        color: #00f5ff;

        &.is-active {
          color: #00f5ff;
          font-size: 20px;
          font-weight: bold;
        }
      }

      /DEEP/ .el-tabs__active-bar {
        width: 0 !important;
        height: 0 !important;
        border-left: 8px solid transparent;
        border-right: 8px solid transparent;
        border-bottom: 6px solid #00f5ff;
        background: none;
        margin-left: 5%;
      }
    }

    /DEEP/ .el-tabs__nav-wrap::after {
      background-color: #00f5ff;
    }

    .el-tab-pane {
      width: 100%;
    }
  }

  .tabs-flex {
    display: flex;
    justify-content: space-between;

    .flex-1 {
      flex: 1;

      p {
        font-family: NotoSansHans-DemiLight;
        font-size: 10px;
        font-weight: normal;
        font-stretch: normal;
        line-height: 6px;
        letter-spacing: 0px;
        color: #08c7cf;
      }
    }
  }
}
</style>