首页逻辑

src/components/Header.vue

@@ -111,7 +111,7 @@ export default {
         },
         {
           name: "商城",
-          url: "/bookCity",
+          url: "/bookStore",
         },
         // {
         //   name: "测评",
@@ -139,7 +139,7 @@ export default {
     // 切换项目
     handleCommand(command) {
       this.toUrl = "";
-      if (this.projectList[command].url === "/bookCity") {
+      if (this.projectList[command].url === "/bookStore") {
         this.$router.push({
           path: this.projectList[command].url,
         });

src/router/index.js

@@ -1,8 +1,12 @@
 import Vue from 'vue'
 import Router from 'vue-router'
+import { getToken } from "@/utils/auth";
 
 Vue.use(Router)
 
+let userMessage = getToken() ? JSON.parse(getToken()) : null
+let url = userMessage ? import('@/views/bookShelf/index.vue') : import('@/views/bookStore/index.vue')
+
 /**
  * Note: sub-menu only appear when route children.length >= 1
  * Detail see: https://panjiachen.github.io/vue-element-admin-site/guide/essentials/router-and-nav.html
@@ -47,7 +51,7 @@ export const constantRoutes = [{
     {
         path: '/EnterSys',
         component: () =>
-            import ('@/views/bookStore/index.vue')
+            url
     },
     {
         path: '/bookStore',

src/views/bookShelf/index.vue

@@ -22,111 +22,135 @@
       </li>
     </ul>
     <div class="main">
-      <div class="searchChangebox">
-        <div class="searchChange-box">
-          <div
-            class="searchChange"
-            :class="[item.sortName == sortField ? 'active' : '']"
-            v-for="(item, indexC) in changeList"
-            :key="indexC"
-          >
-            <span>
-              {{ item.name }}
-            </span>
-            <div :class="['sort']">
-              <div>
-                <svg-icon
-                  icon-class="up"
-                  className="icon-up"
-                  :class="[item.sort == 'up' ? 'active' : '']"
-                  @click="SortEvent('up', item.name, item.sortName)"
-                ></svg-icon>
-              </div>
-              <div>
-                <svg-icon
-                  icon-class="down"
-                  className="icon-down"
-                  :class="[item.sort == 'down' ? 'active' : '']"
-                  @click="SortEvent('down', item.name, item.sortName)"
-                ></svg-icon>
+      <template v-if="userMessage">
+        <div class="searchChangebox">
+          <div class="searchChange-box">
+            <div
+              class="searchChange"
+              :class="[item.sortName == sortField ? 'active' : '']"
+              v-for="(item, indexC) in changeList"
+              :key="indexC"
+            >
+              <span>
+                {{ item.name }}
+              </span>
+              <div :class="['sort']">
+                <div>
+                  <svg-icon
+                    icon-class="up"
+                    className="icon-up"
+                    :class="[item.sort == 'up' ? 'active' : '']"
+                    @click="SortEvent('up', item.name, item.sortName)"
+                  ></svg-icon>
+                </div>
+                <div>
+                  <svg-icon
+                    icon-class="down"
+                    className="icon-down"
+                    :class="[item.sort == 'down' ? 'active' : '']"
+                    @click="SortEvent('down', item.name, item.sortName)"
+                  ></svg-icon>
+                </div>
               </div>
             </div>
           </div>
-        </div>
 
-        <el-input
-          placeholder="输入名称"
-          v-model="searchNameValue"
-          class="input-search"
-          maxlength="20"
-        >
-          <el-button
-            slot="append"
-            icon="el-icon-search"
-            @click="getSearch"
-          ></el-button>
-        </el-input>
-      </div>
-      <h5 class="show-title" v-if="typeIndex !== 0">
-        {{ optionList[typeIndex].label
-        }}<b>{{
-          optionList[typeIndex].value === 3
-            ? optionList[typeIndex].number + orderPeruseNumber
-            : optionList[typeIndex].number
-        }}</b>
-      </h5>
-      <div class="list" v-if="BookList.length > 0">
-        <!-- v-infinite-scroll="load" -->
-        <div
-          v-for="(item, index) in BookList"
-          :key="index + 'todayNew'"
-          v-infinite-scroll="load"
-          infinite-scroll-disabled="disabled"
-          :class="[item.type === 3 ? 'book-item-peruse' : '']"
-        >
-          <template v-if="item.type === 3">
-            <BookPeruseCard
-              :item="item"
-              type="bookShelf"
-              :headerBg="'#00ADEF'"
-              :headerBorder="'#5C5C5C'"
-              :userBg="'rgba(0, 0, 0, 0.24)'"
-              :LoginNavIndex="0"
-              :previousPage="'书架'"
-            />
-          </template>
-          <template v-if="item.type === 30">
-            <BookPeruseListCard
-              :item="item"
-              type="bookShelf"
-              :headerBg="'#00ADEF'"
-              :headerBorder="'#5C5C5C'"
-              :userBg="'rgba(0, 0, 0, 0.24)'"
-              :LoginNavIndex="0"
-              :previousPage="'书架'"
-            />
-          </template>
-          <template v-else>
-            <BookCard
-              :item="item"
-              type="bookShelf"
-              :headerBg="'#00ADEF'"
-              :headerBorder="'#5C5C5C'"
-              :userBg="'rgba(0, 0, 0, 0.24)'"
-              :LoginNavIndex="0"
-              :previousPage="'书架'"
-              :cardType="item.course_type"
-            />
-          </template>
+          <el-input
+            placeholder="输入名称"
+            v-model="searchNameValue"
+            class="input-search"
+            maxlength="20"
+          >
+            <el-button
+              slot="append"
+              icon="el-icon-search"
+              @click="getSearch"
+            ></el-button>
+          </el-input>
         </div>
-        <p v-if="loading" class="tips">加载中...</p>
-        <p v-if="noMore" class="tips">没有更多了</p>
-      </div>
-      <div class="nodata" v-else>
-        <img src="../../assets/nodata.png" />
-        <p>找不到文件</p>
-      </div>
+        <h5 class="show-title" v-if="typeIndex !== 0">
+          {{ optionList[typeIndex].label
+          }}<b>{{
+            optionList[typeIndex].value === 3
+              ? optionList[typeIndex].number + orderPeruseNumber
+              : optionList[typeIndex].number
+          }}</b>
+        </h5>
+        <div class="list" v-if="BookList.length > 0">
+          <!-- v-infinite-scroll="load" -->
+          <div
+            v-for="(item, index) in BookList"
+            :key="index + 'todayNew'"
+            v-infinite-scroll="load"
+            infinite-scroll-disabled="disabled"
+            :class="[item.type === 3 ? 'book-item-peruse' : '']"
+          >
+            <template v-if="item.type === 3">
+              <BookPeruseCard
+                :item="item"
+                type="bookShelf"
+                :headerBg="'#00ADEF'"
+                :headerBorder="'#5C5C5C'"
+                :userBg="'rgba(0, 0, 0, 0.24)'"
+                :LoginNavIndex="0"
+                :previousPage="'书架'"
+              />
+            </template>
+            <template v-if="item.type === 30">
+              <BookPeruseListCard
+                :item="item"
+                type="bookShelf"
+                :headerBg="'#00ADEF'"
+                :headerBorder="'#5C5C5C'"
+                :userBg="'rgba(0, 0, 0, 0.24)'"
+                :LoginNavIndex="0"
+                :previousPage="'书架'"
+              />
+            </template>
+            <template v-else>
+              <BookCard
+                :item="item"
+                type="bookShelf"
+                :headerBg="'#00ADEF'"
+                :headerBorder="'#5C5C5C'"
+                :userBg="'rgba(0, 0, 0, 0.24)'"
+                :LoginNavIndex="0"
+                :previousPage="'书架'"
+                :cardType="item.course_type"
+              />
+            </template>
+          </div>
+          <p v-if="loading" class="tips">加载中...</p>
+          <p v-if="noMore" class="tips">没有更多了</p>
+        </div>
+        <div class="nodata" v-else>
+          <img src="../../assets/nodata.png" />
+          <p>找不到文件</p>
+        </div>
+      </template>
+      <template v-else>
+        <p class="login-no">
+          您还未登录，请先<a
+            @click="
+              loginFlag = true;
+              toUrl = '/bookShelf';
+            "
+            >登录</a
+          >
+        </p>
+      </template>
     </div>
+    <el-dialog
+      :visible.sync="loginFlag"
+      :show-close="false"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      width="504px"
+      class="login-dialog"
+      v-if="loginFlag"
+    >
+      <login @cancelLogin="cancelLogin" :toUrl="toUrl" linkType="url"></login>
+    </el-dialog>
   </div>
 </template>
 
@@ -138,10 +162,12 @@ import BookCard from "@/components/common/BookCard.vue";
 import BookPeruseCard from "@/components/common/BookPeruseCard.vue";
 import BookPeruseListCard from "@/components/common/BookPeruseListCard.vue";
 import { getLogin } from "@/api/ajax";
+import { getToken } from "@/utils/auth";
+import Login from "@/views/login.vue";
 
 export default {
   //import引入的组件需要注入到对象中才能使用
-  components: { Header, BookCard, BookPeruseCard, BookPeruseListCard },
+  components: { Header, BookCard, BookPeruseCard, BookPeruseListCard, Login },
   props: {},
   data() {
     //这里存放数据
@@ -238,6 +264,9 @@ export default {
       pageSize: 30,
       typeIndex: 0,
       orderPeruseNumber: 0, // 精读订阅个数
+      userMessage: getToken() ? JSON.parse(getToken()) : null,
+      loginFlag: false,
+      toUrl: "",
     };
   },
   //计算属性 类似于data概念
@@ -407,8 +436,10 @@ export default {
         });
     },
     load() {
-      this.pageNumber++;
-      this.getList();
+      if (this.userMessage) {
+        this.pageNumber++;
+        this.getList();
+      }
     },
     // 获取商品个数
     getNumber() {
@@ -471,23 +502,31 @@ export default {
           this.loading = false;
         });
     },
+    // 关闭登录弹窗
+    cancelLogin() {
+      this.loginFlag = false;
+    },
   },
   //生命周期 - 创建完成（可以访问当前this实例）
   created() {
-    this.getNumber();
-    this.getList();
+    if (this.userMessage) {
+      this.getNumber();
+      this.getList();
+    }
   },
   //生命周期 - 挂载完成（可以访问DOM元素）
   mounted() {
-    let _this = this;
-    let input = document.querySelector("input");
-    input.addEventListener("keyup", function (event) {
-      // 判断是否按下回车键
-      if (event.keyCode === 13) {
-        // 回车键被按下，执行你想要的操作
-        _this.getList(1);
-      }
-    });
+    if (this.userMessage) {
+      let _this = this;
+      let input = document.querySelector("input");
+      input.addEventListener("keyup", function (event) {
+        // 判断是否按下回车键
+        if (event.keyCode === 13) {
+          // 回车键被按下，执行你想要的操作
+          _this.getList(1);
+        }
+      });
+    }
   },
   //生命周期-创建之前
   beforeCreated() {},
@@ -695,4 +734,11 @@ export default {
     }
   }
 }
+.login-no {
+  text-align: center;
+  line-height: 500px;
+  a {
+    color: #00adef;
+  }
+}
 </style>

src/views/login.vue

@@ -1,433 +1,530 @@
 <template>
   <div>
-  <div class="login-container"  v-if="!forgotPwdFlag">
-    <h2 class="title-big">登录</h2>
-    <p class="title-name">欢迎来到二十一世纪英语智慧阅读平台</p>
-    <div class="tabs-box">
-        <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">账号密码登录</a>
-        <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">验证码登录</a>
+    <div class="login-container" v-if="!forgotPwdFlag">
+      <h2 class="title-big">登录</h2>
+      <p class="title-name">欢迎来到二十一世纪英语智慧阅读平台</p>
+      <div class="tabs-box">
+        <a
+          :class="[tabsIndex === 0 ? 'active' : '']"
+          @click="handleChangeTabs(0)"
+          >账号密码登录</a
+        >
+        <a
+          :class="[tabsIndex === 1 ? 'active' : '']"
+          @click="handleChangeTabs(1)"
+          >验证码登录</a
+        >
+      </div>
+      <!-- <template v-if="tabsIndex===0"> -->
+      <el-form
+        label-position="top"
+        label-width="80px"
+        ref="loginPwdForm"
+        :model="loginPwdForm"
+        class="form"
+        :hide-required-asterisk="true"
+        :rules="rulesPassword"
+        v-show="tabsIndex === 0"
+      >
+        <el-form-item label="账号" prop="userName">
+          <el-input
+            v-model="loginPwdForm.userName"
+            autocomplete="off"
+            placeholder="用户名/邮箱/手机号"
+            @blur="handleTrim('loginPwdForm', 'userName')"
+            maxlength="100"
+          >
+          </el-input>
+        </el-form-item>
+        <el-form-item label="密码" prop="password">
+          <el-input
+            v-model="loginPwdForm.password"
+            :type="passwordFlag ? 'text' : 'password'"
+            autocomplete="off"
+            placeholder="请输入密码"
+            @blur="handleTrim('loginPwdForm', 'password')"
+            maxlength="20"
+          >
+            <i
+              slot="suffix"
+              class="el-icon-view show-icon"
+              @click="changeIcon('passwordFlag')"
+              v-if="passwordFlag"
+            ></i>
+            <i
+              slot="suffix"
+              class="show-icon"
+              @click="changeIcon('passwordFlag')"
+              v-else
+            >
+              <svg-icon icon-class="eye-invisible"></svg-icon>
+            </i>
+          </el-input>
+        </el-form-item>
+        <el-form-item prop="userAgreeCheck" class="userAgree-box">
+          <el-checkbox-group v-model="loginPwdForm.userAgreeCheck">
+            <el-checkbox label="1" name="userAgreeCheck"
+              ><a @click.prevent="lookUserAgreement"
+                >阅读并同意《用户协议》</a
+              ></el-checkbox
+            >
+          </el-checkbox-group>
+          <a class="forgotPwd" @click="forgotPwd">忘记密码？</a>
+        </el-form-item>
+        <el-form-item class="btn-box">
+          <el-button
+            type="primary"
+            @click="onSubmitPassword('loginPwdForm')"
+            size="small"
+            :loading="loading"
+            >登录</el-button
+          >
+          <el-button @click="onCancel('loginPwdForm')" size="small"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
+      <!-- </template> -->
+      <!-- <template v-if="tabsIndex===1"> -->
+      <el-form
+        label-position="top"
+        label-width="80px"
+        ref="loginCodeForm"
+        :model="loginCodeForm"
+        class="form"
+        :hide-required-asterisk="true"
+        :rules="rulesCode"
+        v-show="tabsIndex === 1"
+      >
+        <el-form-item label="手机号" prop="phone">
+          <el-input
+            v-model="loginCodeForm.phone"
+            autocomplete="off"
+            placeholder="请输入完整手机号"
+            @blur="handleTrim('loginCodeForm', 'phone')"
+            maxlength="20"
+          >
+            <template slot="prepend">+86</template>
+          </el-input>
+        </el-form-item>
+        <el-form-item label="验证码" prop="code" class="code-box">
+          <el-input
+            v-model="loginCodeForm.code"
+            autocomplete="off"
+            placeholder="请输入验证码"
+            class="code-input"
+            @blur="handleTrim('loginCodeForm', 'code')"
+            maxlength="20"
+          >
+          </el-input>
+          <el-button
+            type="primary"
+            @click="sendCode('time', 'phone', 'verificationCodeShow')"
+            size="small"
+            class="sendCode"
+          >
+            {{ verificationCodeShow ? time + "s" : "发送验证码" }}
+          </el-button>
+        </el-form-item>
+        <el-form-item prop="userAgreeCheck" class="userAgree-box">
+          <el-checkbox-group v-model="loginCodeForm.userAgreeCheck">
+            <el-checkbox label="1" name="userAgreeCheck"
+              ><a @click.prevent="lookUserAgreement"
+                >阅读并同意《用户协议》</a
+              ></el-checkbox
+            >
+          </el-checkbox-group>
+          <a class="forgotPwd" @click="forgotPwd">忘记密码？</a>
+        </el-form-item>
+        <el-form-item class="btn-box">
+          <el-button
+            type="primary"
+            @click="onSubmitPassword('loginCodeForm')"
+            size="small"
+            :loading="loading"
+            >登录</el-button
+          >
+          <el-button @click="onCancel('loginCodeForm')" size="small"
+            >取消</el-button
+          >
+        </el-form-item>
+      </el-form>
+      <!-- </template> -->
     </div>
-    <!-- <template v-if="tabsIndex===0"> -->
-        <el-form label-position="top" label-width="80px" ref="loginPwdForm" :model="loginPwdForm" class="form" :hide-required-asterisk="true" :rules="rulesPassword" v-show="tabsIndex===0">
-            <el-form-item label="账号" prop="userName">
-                <el-input v-model="loginPwdForm.userName" autocomplete="off" placeholder="用户名/邮箱/手机号" @blur="handleTrim('loginPwdForm','userName')" maxlength="100">
-                </el-input>
-            </el-form-item>
-            <el-form-item label="密码" prop="password">
-                <el-input v-model="loginPwdForm.password" :type="passwordFlag?'text':'password'" autocomplete="off" placeholder="请输入密码" @blur="handleTrim('loginPwdForm','password')" maxlength="20">
-                    <i slot="suffix" class="el-icon-view show-icon" @click="changeIcon('passwordFlag')" v-if="passwordFlag"></i>
-                    <i slot="suffix" class="show-icon" @click="changeIcon('passwordFlag')" v-else>
-                        <svg-icon icon-class="eye-invisible"></svg-icon>
-                    </i>
-                </el-input>
-            </el-form-item>
-            <el-form-item prop="userAgreeCheck" class="userAgree-box">
-                <el-checkbox-group v-model="loginPwdForm.userAgreeCheck">
-                    <el-checkbox label="1" name="userAgreeCheck"><a @click.prevent="lookUserAgreement">阅读并同意《用户协议》</a></el-checkbox>
-                </el-checkbox-group>
-                <a class="forgotPwd" @click="forgotPwd">忘记密码？</a>
-            </el-form-item>
-            <el-form-item class="btn-box">
-                <el-button type="primary" @click="onSubmitPassword('loginPwdForm')" size="small" :loading="loading">登录</el-button>
-                <el-button @click="onCancel('loginPwdForm')" size="small">取消</el-button>
-            </el-form-item>
-        </el-form>
-    <!-- </template> -->
-    <!-- <template v-if="tabsIndex===1"> -->
-        <el-form label-position="top" label-width="80px" ref="loginCodeForm" :model="loginCodeForm" class="form" :hide-required-asterisk="true" :rules="rulesCode" v-show="tabsIndex===1">
-            <el-form-item label="手机号" prop="phone">
-                <el-input v-model="loginCodeForm.phone" autocomplete="off" placeholder="请输入完整手机号" @blur="handleTrim('loginCodeForm','phone')" maxlength="20">
-                    <template slot="prepend">+86</template>
-                </el-input>
-            </el-form-item>
-            <el-form-item label="验证码" prop="code" class="code-box">
-                <el-input v-model="loginCodeForm.code" autocomplete="off" placeholder="请输入验证码" class="code-input" @blur="handleTrim('loginCodeForm','code')" maxlength="20">
-                </el-input>
-                <el-button type="primary" @click="sendCode('time','phone','verificationCodeShow')" size="small" class="sendCode">
-                    {{ verificationCodeShow ? time+'s' : '发送验证码' }}
-                </el-button>
-            </el-form-item>
-            <el-form-item prop="userAgreeCheck" class="userAgree-box">
-                <el-checkbox-group v-model="loginCodeForm.userAgreeCheck">
-                    <el-checkbox label="1" name="userAgreeCheck"><a @click.prevent="lookUserAgreement">阅读并同意《用户协议》</a></el-checkbox>
-                </el-checkbox-group>
-                <a class="forgotPwd" @click="forgotPwd">忘记密码？</a>
-            </el-form-item>
-            <el-form-item class="btn-box">
-                <el-button type="primary" @click="onSubmitPassword('loginCodeForm')" size="small" :loading="loading">登录</el-button>
-                <el-button @click="onCancel('loginCodeForm')" size="small">取消</el-button>
-            </el-form-item>
-        </el-form>
-    <!-- </template> -->
-  </div>
-  <forgot-pwd @cancelFot="cancelFot" v-if="forgotPwdFlag"></forgot-pwd>
+    <forgot-pwd @cancelFot="cancelFot" v-if="forgotPwdFlag"></forgot-pwd>
   </div>
 </template>
 
 <script>
 import { getLogin } from "@/api/ajax";
 import { setToken } from "@/utils/auth";
-import ForgotPwd from "./forgotPwd.vue"
+import ForgotPwd from "./forgotPwd.vue";
 export default {
   name: "login",
-  props: ["toUrl","linkType"],
+  props: ["toUrl", "linkType"],
   components: { ForgotPwd },
   data() {
     const validatePhone = (rule, value, callback) => {
-        if(this.tabsIndex===1){
-            if (value === '') {
-                callback(new Error('请输入手机号'));
-            } else {
-                let reg = /^1[3-9]\d{9}$/;
-                let result = reg.test(value);
-                if (result) {
-                    callback();
-                } else {
-                    callback(new Error('请输入正确的手机号'));
-                }
-            }
+      if (this.tabsIndex === 1) {
+        if (value === "") {
+          callback(new Error("请输入手机号"));
+        } else {
+          let reg = /^1[3-9]\d{9}$/;
+          let result = reg.test(value);
+          if (result) {
+            callback();
+          } else {
+            callback(new Error("请输入正确的手机号"));
+          }
         }
+      }
     };
     return {
-      tabsIndex:0,
-      loginPwdForm:{
-        userName:'',
-        password:'',
+      tabsIndex: 0,
+      loginPwdForm: {
+        userName: "",
+        password: "",
+        userAgreeCheck: [],
+        type: "USER",
+      },
+      passwordFlag: false,
+      rulesPassword: {
+        userName: [{ required: true, message: "请输入账号", trigger: "blur" }],
+        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
+        userAgreeCheck: [
+          {
+            type: "array",
+            required: true,
+            message: "请阅读并同意《用户协议》",
+            trigger: "change",
+          },
+        ],
+      },
+      loginCodeForm: {
+        phone: "",
+        code: "",
         userAgreeCheck: [],
-        type: 'USER'
+        type: "USER",
       },
-      passwordFlag:false,
-      rulesPassword:{
-            userName:[
-                { required: true, message: '请输入账号', trigger: 'blur' }
-            ],
-            password:[
-                { required: true, message: '请输入密码', trigger: 'blur' }
-            ],
-            userAgreeCheck:[
-                { type: 'array', required: true, message: '请阅读并同意《用户协议》', trigger: 'change' }
-            ]
-        },
-        loginCodeForm:{
-            phone:'',
-            code:'',
-            userAgreeCheck: [],
-            type: 'USER'
-        },
-        rulesCode:{
-            phone:[
-                { required: true, validator: validatePhone, trigger: 'blur' }
-            ],
-            code:[
-                { required: true, message: '请输入验证码', trigger: 'blur' }
-            ],
-            userAgreeCheck:[
-                { type: 'array', required: true, message: '请阅读并同意《用户协议》', trigger: 'change' }
-            ]
-        },
-        time: 60, //获取验证码的时间
-        verificationCodeShow: false, //是否已经获取了验证码
-        loading: false,
-        timer: null,
-        forgotPwdFlag: false
+      rulesCode: {
+        phone: [{ required: true, validator: validatePhone, trigger: "blur" }],
+        code: [{ required: true, message: "请输入验证码", trigger: "blur" }],
+        userAgreeCheck: [
+          {
+            type: "array",
+            required: true,
+            message: "请阅读并同意《用户协议》",
+            trigger: "change",
+          },
+        ],
+      },
+      time: 60, //获取验证码的时间
+      verificationCodeShow: false, //是否已经获取了验证码
+      loading: false,
+      timer: null,
+      forgotPwdFlag: false,
     };
   },
-  watch: {
-    
-  },
+  watch: {},
   methods: {
     // 切换tabs
-    handleChangeTabs(value){
-        this.tabsIndex = value
+    handleChangeTabs(value) {
+      this.tabsIndex = value;
     },
-    changeIcon(flag){
-        this[flag] = !this[flag]
+    changeIcon(flag) {
+      this[flag] = !this[flag];
     },
     // 查看用户协议
-    lookUserAgreement(){
-        
-    },
+    lookUserAgreement() {},
     // 密码登录提交表单
-    onSubmitPassword(formName){
-        this.$refs[formName].validate((valid) => {
-          if (valid) {
-            this.loading = true
-            let MethodName = "/OrgServer/LoginControl/Login";
-            let data = null
-            if(this.tabsIndex===0){
-                data = {
-                    user_type:this.loginPwdForm.type,
-                    user_name:this.loginPwdForm.userName,
-                    password:this.loginPwdForm.password
-                }
-            }else{
-                data = {
-                    user_type:this.loginCodeForm.type,
-                    user_name:this.loginCodeForm.phone,
-                    password:this.loginCodeForm.code,
-                    is_dynamic_verification_code_login:"true",
-                    dynamic_verification_code_send_type:"SMS"
-                }
-            }
-            getLogin(MethodName, data)
+    onSubmitPassword(formName) {
+      this.$refs[formName].validate((valid) => {
+        if (valid) {
+          this.loading = true;
+          let MethodName = "/OrgServer/LoginControl/Login";
+          let data = null;
+          if (this.tabsIndex === 0) {
+            data = {
+              user_type: this.loginPwdForm.type,
+              user_name: this.loginPwdForm.userName,
+              password: this.loginPwdForm.password,
+            };
+          } else {
+            data = {
+              user_type: this.loginCodeForm.type,
+              user_name: this.loginCodeForm.phone,
+              password: this.loginCodeForm.code,
+              is_dynamic_verification_code_login: "true",
+              dynamic_verification_code_send_type: "SMS",
+            };
+          }
+          getLogin(MethodName, data)
             .then((res) => {
-                this.loading = false
-                setToken(res);
-                if(this.toUrl){
-                    if(this.linkType==='url'){
-                       window.location.href = window.location.href.substring(0,window.location.href.indexOf('/#/'))+"/#" + this.toUrl
-                       window.location.reload()
-                    }else{
-                        this.$router.push({
-                            path: this.toUrl,
-                        });
-                    }
-                }else{
-                    if(this.$route.path!=='/register'){
-                        window.location.reload()
-                    }else{
-                        this.$router.push({
-                            path: '/',
-                        });
-                    }
+              this.loading = false;
+              setToken(res);
+              if (this.toUrl) {
+                if (this.linkType === "url") {
+                  window.location.href =
+                    window.location.href.substring(
+                      0,
+                      window.location.href.indexOf("/#/")
+                    ) +
+                    "/#" +
+                    this.toUrl;
+                  window.location.reload();
+                } else {
+                  this.$router.push({
+                    path: this.toUrl,
+                  });
+                }
+              } else {
+                if (this.$route.path !== "/register") {
+                  window.location.reload();
+                } else {
+                  this.$router.push({
+                    path: "/",
+                  });
                 }
+              }
             })
             .catch(() => {
-                this.loading = false
-                this.verificationCodeShow = false;
-                clearInterval(this.timer);
-                this.time = 60;
+              this.loading = false;
+              this.verificationCodeShow = false;
+              clearInterval(this.timer);
+              this.time = 60;
             });
-          } else {
-            return false;
-          }
-        });
+        } else {
+          return false;
+        }
+      });
     },
     // 取消 恢复到修改前状态
-    onCancel(formName){
-        this.$refs[formName].resetFields();
-        this.$emit('cancelLogin')
+    onCancel(formName) {
+      this.$refs[formName].resetFields();
+      this.$emit("cancelLogin");
     },
     // 发送验证码
-    sendCode(time,phone,flag,obj){
-        let this_ = this;
-        if(this_[time] != 60){
-            return
-        }
-        this_.timer = null;
-        if (this_.loginCodeForm[phone]) {
-            let reg = /^1[3-9]\d{9}$/;
-            let result = reg.test(this_.loginCodeForm[phone]);
-            if (!result) {
-                this_.$message.warning('请输入正确的手机号');
-                return
-            }
-            this_[flag] = true;
-            this_.timer = setInterval(() => {
-                this_[time]--;
-                if (this_[time] == 0) {
-                    this_[flag] = false;
-                    clearInterval(this_.timer);
-                    this_.timer = null;
-                    this_[time] = 60;
-                }
-            }, 1000);
-            let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
-            let data = {
-                send_type: 'SMS',
-                phone_or_email: this_.loginCodeForm.phone,
-            };
-            getLogin(MethodName, data).then((res) => {
-            }).catch(()=>{
-                this_[flag] = false;
-                clearInterval(this_.timer);
-                this_.timer = null;
-                this_[time] = 60;
-            });
-        } else {
-            this_.$message.warning('请先输入手机号');
+    sendCode(time, phone, flag, obj) {
+      let this_ = this;
+      if (this_[time] != 60) {
+        return;
+      }
+      this_.timer = null;
+      if (this_.loginCodeForm[phone]) {
+        let reg = /^1[3-9]\d{9}$/;
+        let result = reg.test(this_.loginCodeForm[phone]);
+        if (!result) {
+          this_.$message.warning("请输入正确的手机号");
+          return;
         }
+        this_[flag] = true;
+        this_.timer = setInterval(() => {
+          this_[time]--;
+          if (this_[time] == 0) {
+            this_[flag] = false;
+            clearInterval(this_.timer);
+            this_.timer = null;
+            this_[time] = 60;
+          }
+        }, 1000);
+        let MethodName = "/OrgServer/LoginControl/SendVerificationCode";
+        let data = {
+          send_type: "SMS",
+          phone_or_email: this_.loginCodeForm.phone,
+        };
+        getLogin(MethodName, data)
+          .then((res) => {})
+          .catch(() => {
+            this_[flag] = false;
+            clearInterval(this_.timer);
+            this_.timer = null;
+            this_[time] = 60;
+          });
+      } else {
+        this_.$message.warning("请先输入手机号");
+      }
     },
     // 去掉前后空格
-    handleTrim(form,fild){
-        this[form][fild] = this[form][fild].trim()
+    handleTrim(form, fild) {
+      this[form][fild] = this[form][fild].trim();
     },
     // 忘记密码
-    forgotPwd(){
-        this.forgotPwdFlag = true
+    forgotPwd() {
+      this.forgotPwdFlag = true;
+    },
+    cancelFot() {
+      this.forgotPwdFlag = false;
     },
-    cancelFot(){
-        this.forgotPwdFlag = false
-    }
-  },
-  mounted() {
-    
   },
+  mounted() {},
 };
 </script>
 
 <style lang="scss" scoped>
-.login-container{
-    background: #FFFFFF;
-    padding: 64px 72px;
-    .title-big{
-        font-weight: 400;
-        font-size: 32px;
-        line-height: 40px;
-        margin: 0;
-        color: #1D2129;
-    }
-    .title-name{
-        font-size: 14px;
-        line-height: 22px;
-        color: #86909C;
-        margin: 0 0 40px 0;
+.login-container {
+  background: #ffffff;
+  padding: 64px 72px;
+  .title-big {
+    font-weight: 400;
+    font-size: 32px;
+    line-height: 40px;
+    margin: 0;
+    color: #1d2129;
+  }
+  .title-name {
+    font-size: 14px;
+    line-height: 22px;
+    color: #86909c;
+    margin: 0 0 40px 0;
+  }
+  .tabs-box {
+    display: flex;
+    a {
+      font-size: 14px;
+      line-height: 22px;
+      color: #4e5969;
+      border-radius: 100px;
+      padding: 5px 16px;
+      margin-right: 16px;
+      &:hover {
+        background: #f2f3f5;
+      }
+      &.active {
+        background: #f2f3f5;
+        font-weight: 500;
+        color: #165dff;
+      }
     }
-    .tabs-box{
-        display: flex;
-        a{
-            font-size: 14px;
-            line-height: 22px;
-            color: #4E5969;
-            border-radius: 100px;
-            padding: 5px 16px;
-            margin-right: 16px;
-            &:hover{
-                background: #F2F3F5;
-            }
-            &.active{
-                background: #F2F3F5;
-                font-weight: 500;
-                color: #165DFF;
-            }
-        }
+  }
+  .form {
+    margin-top: 40px;
+    .show-icon {
+      cursor: pointer;
+      color: #4e5969;
     }
-    .form{
-        margin-top: 40px;
-        .show-icon{
-            cursor: pointer;
-            color: #4E5969;
-        }
-        .forgotPwd{
-            font-size: 14px;
-            line-height: 22px;
-            color: #165DFF;
-        }
+    .forgotPwd {
+      font-size: 14px;
+      line-height: 22px;
+      color: #165dff;
     }
+  }
 }
 </style>
 <style lang="scss">
-.login-container{
-    .form{
-        .el-form-item__label{
-            font-weight: 400;
-            font-size: 14px;
-            line-height: 22px;
-            color: #4E5969;
-            padding-bottom: 8px;
-        }
-        .userAgree-box{
-            .el-form-item__content{
-                display: flex;
-                justify-content: space-between;
-                line-height: 22px;
-            }
-            .el-checkbox-group{
-                flex: 1;
-                .el-checkbox{
-                    color: rgba(0, 0, 0, 0.88);
-                    font-weight: 400;
-                }
-            }
-        }
-        .btn-box{
-            .el-button{
-                width: 100%;
-            }
-            .el-button+.el-button{
-                margin-left: 0;
-                margin-top: 8px;
-            }
-        }
-        .el-button--primary{
-            background: #165DFF;
-            border-color: #165DFF;
-            border-radius: 2px;
-            &:hover{
-                background: #4080FF;
-                border-color: #4080FF;
-            }
-            &:focus{
-                background: #0E42D2;
-                border-color: #0E42D2;
-            }
-        }
-        .el-button--default{
-            background: #F2F3F5;
-            border-radius: 2px;
-            border: none;
-            color: #4E5969;
-            &:hover{
-                background: #E5E6EB;
-            }
-            &:focus{
-                background: #C9CDD4;
-            }
-        }
-        .code-box{
-            .el-form-item__content{
-                display: flex;
-            }
-        }
-        .code-input{
-            height: 32px;
-            .el-input__inner{
-                border-radius: 4px 0 0 4px;
-            }
-        }
-        .sendCode{
-            border-radius: 0 4px 4px 0;
-            margin-top: 1px;
-            width: 92px;
-            flex-shrink: 0;
-        }
-        .el-form-item__content,.el-input__icon{
-            line-height: 32px;
-            color: #4E5969 !important;
-        }
-        .el-input__inner{
-            height: 32px;
-            color: #1D2129;
-            background: #F2F3F5;
-            border: none;
-        }
-        .el-textarea__inner,.el-input-group__prepend{
-            color: #1D2129;
-        }
-        .el-checkbox__input.is-checked+.el-checkbox__label{
-            color: #165DFF;
-        }
-        .el-checkbox__input.is-checked .el-checkbox__inner, .el-checkbox__input.is-indeterminate .el-checkbox__inner{
-            background: #165DFF;
-            border-color: #165DFF;
-        }
-        .el-input-group__prepend{
-            width: 54px;
-            height: 32px;
-            border: none;
-            background: #F2F3F5;
-            border-radius: 2px 0px 0px 2px;
-            line-height: 32px;
-            text-align: center;
-            padding: 0;
-        }
-        .el-input-group--prepend{
-            display: flex;
-            .el-input__inner{
-                margin-left: 8px;
-                flex: 1;
-            }
+.login-container {
+  .form {
+    .el-form-item__label {
+      font-weight: 400;
+      font-size: 14px;
+      line-height: 22px;
+      color: #4e5969;
+      padding-bottom: 8px;
+    }
+    .userAgree-box {
+      .el-form-item__content {
+        display: flex;
+        justify-content: space-between;
+        line-height: 22px;
+      }
+      .el-checkbox-group {
+        flex: 1;
+        .el-checkbox {
+          color: rgba(0, 0, 0, 0.88);
+          font-weight: 400;
         }
+      }
+    }
+    .btn-box {
+      .el-button {
+        width: 100%;
+      }
+      .el-button + .el-button {
+        margin-left: 0;
+        margin-top: 8px;
+      }
+    }
+    .el-button--primary {
+      background: #165dff;
+      border-color: #165dff;
+      border-radius: 2px;
+      &:hover {
+        background: #4080ff;
+        border-color: #4080ff;
+      }
+      &:focus {
+        background: #0e42d2;
+        border-color: #0e42d2;
+      }
+    }
+    .el-button--default {
+      background: #f2f3f5;
+      border-radius: 2px;
+      border: none;
+      color: #4e5969;
+      &:hover {
+        background: #e5e6eb;
+      }
+      &:focus {
+        background: #c9cdd4;
+      }
+    }
+    .code-box {
+      .el-form-item__content {
+        display: flex;
+      }
+    }
+    .code-input {
+      height: 32px;
+      .el-input__inner {
+        border-radius: 4px 0 0 4px;
+      }
+    }
+    .sendCode {
+      border-radius: 0 4px 4px 0;
+      margin-top: 1px;
+      width: 92px;
+      flex-shrink: 0;
+    }
+    .el-form-item__content,
+    .el-input__icon {
+      line-height: 32px;
+      color: #4e5969 !important;
+    }
+    .el-input__inner {
+      height: 32px;
+      color: #1d2129;
+      background: #f2f3f5;
+      border: none;
+    }
+    .el-textarea__inner,
+    .el-input-group__prepend {
+      color: #1d2129;
+    }
+    .el-checkbox__input.is-checked + .el-checkbox__label {
+      color: #165dff;
+    }
+    .el-checkbox__input.is-checked .el-checkbox__inner,
+    .el-checkbox__input.is-indeterminate .el-checkbox__inner {
+      background: #165dff;
+      border-color: #165dff;
+    }
+    .el-input-group__prepend {
+      width: 54px;
+      height: 32px;
+      border: none;
+      background: #f2f3f5;
+      border-radius: 2px 0px 0px 2px;
+      line-height: 32px;
+      text-align: center;
+      padding: 0;
+    }
+    .el-input-group--prepend {
+      display: flex;
+      .el-input__inner {
+        margin-left: 8px;
+        flex: 1;
+      }
     }
+  }
 }
 </style>