实现重新练习、倒计时、提交等 页面操作

src/api/yyyf.js

@@ -31,3 +31,24 @@ export function getExamDetails(data) {
     params: data,
   });
 }
+
+export function getUserTimeMoneyDto() {
+  return request({
+    method: 'get',
+    url: Host + 'exam/getUserTimeMoneyDto',
+  });
+}
+
+export function submit() {
+  return request({
+    method: 'get',
+    url: Host + 'exam/submit',
+  });
+}
+
+export function reStart() {
+  return request({
+    method: 'get',
+    url: Host + 'exam/reStart',
+  });
+}

src/components/common/header.vue

@@ -21,8 +21,15 @@
         </ul>
       </div>
       <div class="centerNav">
-        <el-button type="success">提交</el-button>
+        <el-button
-        <el-button type="danger">重新开始</el-button>
+          type="success"
+          v-if="reqType != 2 && !isSubmit"
+          @click="submitExam"
+          >提交</el-button
+        >
+        <el-button type="danger" v-if="reqType == 1" @click="reStartTest"
+          >重新开始</el-button
+        >
       </div>
       <!-- 右侧 nav -->
       <div class="rightNav" :style="{width: rightNavWidth}">
@@ -195,6 +202,7 @@
       class="counting"
       @click="showCounting = !showCounting"
       :style="{width: showCounting ? '150px' : '30px'}"
+      v-if="reqType == 0"
     >
       <p>
         考试进行中
@@ -202,7 +210,11 @@
         <i class="el-icon-d-arrow-left" v-else></i>
       </p>
       <br />
-      <p v-if="showCounting">00:12:25</p>
+      <p v-if="showCounting">
+        <span>{{ hour }}</span
+        >&nbsp;:&nbsp;<span>{{ mins }}</span
+        >&nbsp;:&nbsp;<span>{{ sec }}</span>
+      </p>
     </div>
   </div>
 </template>
@@ -213,6 +225,8 @@ import {getExchangeRateCookie, setExchangeRateCookie} from '@/utils/auth';
 import {logOut} from '@/api/user';
 import Cookie from '@/common/cookie';
 import {FILE_URL} from '@/api/app';
+import {submit, reStart} from '@/api/yyyf';
+import {signUp, signIn} from '@/api/user';
 
 const Menu = {
   icon: [{t: 'nav.menu_name', link: '/'}],
@@ -282,6 +296,16 @@ export default {
       perUrl: 'personal',
       file: '',
       showCounting: true,
+      //0 考试 1 练习 2 不计分
+      reqType: 2,
+      //剩余时间
+      remainingTime: 0,
+      //防止重复提交
+      isSubmit: false,
+      hour: 0,
+      mins: 0,
+      sec: 0,
+      setIntervalInt: 0,
     };
   },
 
@@ -297,6 +321,7 @@ export default {
 
   created() {
     let yyyfToken = localStorage.getItem('yyyfToken');
+    this.isSubmit = localStorage.getItem('isSubmit') == 'true' ? true : false;
     if (yyyfToken == '' || yyyfToken == undefined) {
       this.$alert('未从以渔有方登录，点击确定关闭浏览器', '提示', {
         type: 'error',
@@ -307,6 +332,15 @@ export default {
           this.closeWindow();
         },
       });
+    } else {
+      //请求类型
+      this.reqType = localStorage.getItem('reqType');
+      //如果考试
+      if (this.reqType == 0) {
+        //获取考试剩余时间
+        this.remainingTime = localStorage.getItem('remainingTime');
+        //启动倒计时
+        this.setIntervalInt = setInterval(this.showTime, 1000);
       }
       this.file = FILE_URL;
       this.perUrl = window.location.pathname.split('/')[1];
@@ -341,9 +375,153 @@ export default {
           break;
         }
       }
+    }
   },
 
   methods: {
+    showTime: function() {
+      let remainingTime = this.remainingTime;
+      remainingTime -= 1;
+      localStorage.setItem('remainingTime', remainingTime);
+      this.remainingTime = remainingTime;
+      let h = 0;
+      let m = 0;
+      let s = 0;
+      if (remainingTime > 0) {
+        h = Math.floor(remainingTime / 60 / 60);
+        m = Math.floor((remainingTime / 60) % 60);
+        s = Math.floor(remainingTime % 60);
+      }
+      if (h < 10) {
+        this.hour = this.format(h, 2);
+      } else {
+        this.hour = h;
+      }
+      this.mins = this.format(m, 2);
+      this.sec = this.format(s, 2);
+      if (h <= 0 && m <= 0 && s <= 0) {
+        if (!this.isSubmit)
+          this.$message.warning('考试时间到,系统将自动提交试卷');
+        this.submitExam();
+      }
+    },
+    format: function(num, n) {
+      return (Array(n).join(0) + num).slice(-n);
+    },
+    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;
+              }
+            },
+          });
+        } 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();
+            },
+          });
+        }
+      });
+    },
+    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;
+        }
+      });
+    },
+    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;
+        }
+      });
+    },
     closeWindow: function() {
       if (
         navigator.userAgent.indexOf('Firefox') != -1 ||
@@ -392,7 +570,7 @@ export default {
         location.href = '/personal?perUrl=' + this.perUrl + '#/' + command;
       }
     },
-    exit() {
+    exit(params) {
       logOut().then(res => {
         if (res.data.code === 200 || res.data.code === 202) {
           // Cookie.set('userData', '');
@@ -400,7 +578,10 @@ export default {
           localStorage.removeItem('userpass');
           localStorage.removeItem('userdate');
           localStorage.removeItem('nowPassNOValue');
-          window.location.href = '/';
+          if (params == undefined) {
+            //window.location.href = '/';
+            this.closeWindow();
+          }
 
           // let pathName = window.location.pathname.split('/')[1];
           // console.log(pathName);
@@ -442,6 +623,7 @@ export default {
     align-items: center;
     // margin-left: 12.6%;
     margin-right: 7.9%;
+
     img {
       width: 45px;
       height: 45px;
@@ -465,15 +647,20 @@ export default {
     flex: 1;
     display: flex;
     margin-left: 2%;
+
     .nav-menu {
       width: 60%;
     }
+
     .menu-item {
       margin-right: 3%;
     }
   }
+
   .centerNav {
-    flex: 1;
+    //flex: 1;
+    width: 230px;
+
     .el-button {
       color: #ffffff;
     }
@@ -512,10 +699,12 @@ export default {
       > a {
         // color: $local-menu-text-color;
         color: #545663;
+
         &.is-active {
           color: white;
         }
       }
+
       span {
         color: #545663;
       }
@@ -531,6 +720,7 @@ export default {
       // padding: 0 10px;
     }
   }
+
   .nav-menuRight {
     display: flex;
     flex-wrap: wrap;
@@ -541,6 +731,7 @@ export default {
       align-items: center;
       font-size: 14px;
       color: $local-menu-text-color;
+
       &.no-padding {
         padding: 0;
       }
@@ -548,10 +739,12 @@ export default {
       > a {
         // color: $local-menu-text-color;
         color: #545663;
+
         &.is-active {
           color: white;
         }
       }
+
       span {
         color: #545663;
       }
@@ -571,6 +764,7 @@ export default {
   .navColor {
     color: #e8494a !important;
     position: relative;
+
     &::after {
       content: '';
       width: 100%;
@@ -586,6 +780,7 @@ export default {
     /* logo area */
     .nav-logo-area {
       padding: 0;
+
       .logo_text {
         font-size: 26px;
         color: #ffffff;
@@ -625,10 +820,12 @@ export default {
         &:not(.is-disabled):hover {
           background-color: #d3dae2;
         }
+
         .is-active {
           color: #666 !important;
         }
       }
+
       .dropdown-menu-item-inner {
         color: #666;
       }
@@ -641,12 +838,15 @@ export default {
     .langDropdown {
       left: -50% !important;
     }
+
     .userDropdown {
       left: -5% !important;
       width: 110px;
+
       .el-dropdown-menu__item {
         padding: 0;
       }
+
       .dropdown-menu-item-inner {
         text-align: center;
       }
@@ -697,16 +897,20 @@ export default {
     display: flex;
     justify-content: center;
     align-items: center;
+
     span {
       color: #fff !important;
     }
+
     &:hover {
       background-color: #fff;
+
       span {
         color: #e8494a !important;
       }
     }
   }
+
   // .userAvatar {
   //   width: 40px;
   //   height: 40px;
@@ -721,10 +925,7 @@ export default {
   //   }
   // }
 }
-.btn-self-style {
+
-  background: #f56c6c !important;
-  color: #fff !important;
-}
 .main-nav {
   .counting {
     position: fixed;
@@ -742,10 +943,16 @@ export default {
     height: 200px;
     z-index: 999;
     cursor: pointer;
+
     p {
       width: 100%;
       text-align: center;
     }
   }
 }
+
+.btn-self-style {
+  background: #f56c6c !important;
+  color: #fff !important;
+}
 </style>

src/pages/entry.vue

@@ -2,27 +2,46 @@
   <div>
     <nav-header border-style="full"></nav-header>
     <div class="usdList">
-      <div
+      <div class="usdItem" element-loading-background="rgba(0, 0, 0, 0.2)">
-        class="usdItem"
-        v-for="(item, index) in [1, 2, 3]"
-        :key="index"
-        v-loading="loading"
-        element-loading-background="rgba(0, 0, 0, 0.2)"
-      >
         <!-- 跳转到交易中心,携带交易对 -->
         <a href="javascript:;">
           <p>微信 <i class="el-icon-star-off"></i></p>
-          <p>初始资金：100000000CNY</p>
+          <p>初始资金：{{ userTimeMoneyDto.wxPayInit }}</p>
-          <p>余额：100000000CNY</p>
+          <p>余额：{{ userTimeMoneyDto.wxPay }}CNY</p>
+        </a>
+      </div>
+      <div class="usdItem" element-loading-background="rgba(0, 0, 0, 0.2)">
+        <!-- 跳转到交易中心,携带交易对 -->
+        <a href="javascript:;">
+          <p>支付宝 <i class="el-icon-star-off"></i></p>
+          <p>初始资金：{{ userTimeMoneyDto.aliPayInit }}</p>
+          <p>余额：{{ userTimeMoneyDto.aliPay }}CNY</p>
+        </a>
+      </div>
+      <div class="usdItem" element-loading-background="rgba(0, 0, 0, 0.2)">
+        <!-- 跳转到交易中心,携带交易对 -->
+        <a href="javascript:;">
+          <p>银行卡 <i class="el-icon-star-off"></i></p>
+          <p>初始资金：{{ userTimeMoneyDto.bankCardInit }}</p>
+          <p>余额：{{ userTimeMoneyDto.bankCard }}CNY</p>
         </a>
       </div>
     </div>
+
     <div class="usdList tabs">
-      <el-tabs v-model="activeName" @tab-click="handleClick">
+      <el-tabs v-model="activeName">
-        <el-tab-pane label="BTC" name="BTC">余额：1</el-tab-pane>
+        <el-tab-pane label="BTC" name="BTC"
-        <el-tab-pane label="USDT" name="USDT">余额：20</el-tab-pane>
+          >余额：{{ userTimeMoneyDto.btc }}</el-tab-pane
-        <el-tab-pane label="EOS" name="EOS">余额：30</el-tab-pane>
+        >
-        <el-tab-pane label="ETH" name="ETH">余额：40</el-tab-pane>
+        <el-tab-pane label="USDT" name="USDT"
+          >余额：{{ userTimeMoneyDto.usdt }}</el-tab-pane
+        >
+        <el-tab-pane label="EOS" name="EOS"
+          >余额：{{ userTimeMoneyDto.eos }}</el-tab-pane
+        >
+        <el-tab-pane label="ETH" name="ETH"
+          >余额：{{ userTimeMoneyDto.eth }}</el-tab-pane
+        >
       </el-tabs>
     </div>
     <Footer />
@@ -32,18 +51,33 @@
 <script>
 import NavHeader from '@/components/common/header';
 import Footer from '@/components/common/footer';
-
+import {getUserTimeMoneyDto} from '@/api/yyyf';
 export default {
   name: 'entry',
   data() {
     return {
       activeName: 'BTC',
+      userTimeMoneyDto: {},
     };
   },
   components: {
     NavHeader,
     Footer,
   },
+  created() {
+    getUserTimeMoneyDto().then(res => {
+      if (res.data.code === 200) {
+        this.userTimeMoneyDto = res.data.data;
+      } else {
+        this.$message.warning({
+          message: res.data.msg,
+          onClose: function() {
+            this.closeWindow();
+          },
+        });
+      }
+    });
+  },
 };
 </script>
 

src/pages/yyyflogin.vue

@@ -19,6 +19,8 @@ export default {
       loading: null,
       tel: null,
       pass: null,
+      //0 考试 1 练习 2 不计分
+      reqType: null,
     };
   },
 
@@ -26,6 +28,7 @@ export default {
   created() {
     this.startLoading();
     let params = this.parseUrl();
+    this.reqType = params.reqType;
     //判断是否来自以渔有方
     if (
       !$.isEmptyObject(params) &&
@@ -112,7 +115,8 @@ export default {
           //保存登录的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));
@@ -125,21 +129,54 @@ export default {
           // 保存邀请码信息
           localStorage.setItem('invitationCode', res.data.data.invitationCode);
           this.endLoading();
-          location.href = '/';
+          location.href = '/entry';
         } else {
           this.$message.warning(res.data.msg);
         }
       });
     },
     loginFromYyyf: function(params) {
+      let self = this;
       signInYyyf(params).then(res => {
         if (res.data.code === 200) {
           let status = res.data.data.status;
+          localStorage.setItem('yyyfToken', res.data.data.yyyfUserToken);
+
+          //0 考试 1 练习 2 不计分
+          localStorage.setItem('reqType', self.reqType);
+          if (self.reqType == 0) {
+            //考试 保留考试剩余
+            localStorage.setItem('remainingTime', res.data.data.remainingTime);
+          }
+
           if (status == 1) {
             //保存登录的token到cookie
             // Cookie.set('token', res.data.data.token);
-            localStorage.setItem('yyyfToken', res.data.data.yyyfUserToken);
 
+            self.dealLogin(res);
+          } else {
+            this.$message.warning({
+              message: res.data.data.msg,
+              onClose: function() {
+                if (status == 3) {
+                  self.dealLogin(res);
+                } else {
+                  self.closeWindow();
+                }
+              },
+            });
+          }
+        } else {
+          this.$message.warning({
+            message: res.data.msg,
+            onClose: function() {
+              self.closeWindow();
+            },
+          });
+        }
+      });
+    },
+    dealLogin: function(res) {
       let code = res.data.data.code;
       this.tel = res.data.data.tel;
       this.pass = res.data.data.password;
@@ -157,23 +194,6 @@ export default {
       } else {
         this.login();
       }
-          } else {
-            this.$message.warning({
-              message: res.data.data.msg,
-              onClose: function() {
-                this.closeWindow();
-              },
-            });
-          }
-        } else {
-          this.$message.warning({
-            message: res.data.msg,
-            onClose: function() {
-              this.closeWindow();
-            },
-          });
-        }
-      });
     },
     closeWindow: function() {
       if (