FE_occupationlab_client/src/pages/account/login/index.vue

<template>
  <div class="wrap">
    <div class="login">
      <div class="form">
        <h6 class="title">欢迎使用请登录</h6>
        <ul class="tab">
          <li v-for="(item,index) in tabList"
              :key="index"
              :class="{active: form.distinguish == item.id}"
              @click="typeClick(item)">{{item.label}}</li>
        </ul>
        <el-form :model="form"
                 :rules="rules"
                 ref="form"
                 style="margin-top: 20px">
          <!-- 学号工号 -->
          <div v-show="!form.distinguish">
            <el-form-item class="school-select"
                          prop="schoolId">
              <label class="label school"></label>
              <el-select v-model="form.schoolId"
                         clearable
                         filterable
                         placeholder="请选择学校">
                <el-option v-for="(item, i) in schoolList"
                           :key="i"
                           :label="item.schoolName"
                           :value="item.schoolId"></el-option>
              </el-select>
            </el-form-item>
            <div class="items">
              <el-form-item prop="type"
                            style="width: 35%;margin-right: 15px">
                <label class="label workNumber"></label>
                <el-select v-model="form.type"
                           placeholder="请选择类型"
                           @change="typeChange">
                  <el-option label="学生学号"
                             :value="1"></el-option>
                  <el-option label="老师工号"
                             :value="0"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item class="flex-1"
                            prop="workNumber">
                <label class="label account"></label>
                <el-input v-model.trim="form.workNumber"
                          :placeholder="'请输入' + (form.type ? '学生学号' : '老师工号')"
                          @keyup.enter.native="submit"></el-input>
              </el-form-item>
            </div>
          </div>
          <!-- 手机号登录 -->
          <el-form-item v-show="form.distinguish === 1"
                        prop="account">
            <label class="label account"></label>
            <el-input v-model.trim="form.account"
                      placeholder="请输入账号"
                      @keyup.enter.native="submit"></el-input>
          </el-form-item>
          <template v-if="form.distinguish === 2">
            <el-form-item prop="account">
              <label class="label account"></label>
              <el-input v-model.trim="form.account"
                        placeholder="请输入手机号/邮箱"
                        @keyup.enter.native="submit"></el-input>
            </el-form-item>
            <el-form-item prop="code">
              <label class="label code"></label>
              <div class="ver-code">
                <el-input v-model="form.code"
                          placeholder="请输入验证码"
                          maxlength="6"
                          @keyup.enter.native="submit"></el-input>
                <el-button type="text"
                           @click="sendPhoneCodeLogin"
                           :disabled="phoneDisabledLogin">{{ phoneBtnTextLogin }}
                </el-button>
              </div>
            </el-form-item>
          </template>
          <template v-if="form.distinguish !== 2">
            <el-form-item prop="password">
              <label class="password label"></label>
              <el-input type="password"
                        placeholder="请输入密码"
                        v-model.trim="form.password"
                        @keyup.enter.native="submit">
              </el-input>
            </el-form-item>
            <el-form-item prop="code">
              <label class="label code"></label>
              <el-input placeholder="请输入验证码"
                        v-model.trim="form.code"
                        @keyup.enter.native="submit">
              </el-input>
              <img @click="getVerImg"
                   :src="verificationIMG"
                   class="ver-img"
                   alt="">
            </el-form-item>
          </template>
          <div class="bottom">
            <el-link v-if="toMatch"
                     :underline="false"
                     type="primary"
                     @click="toAccount">暂无账号？点击申请</el-link>
            <el-checkbox v-show="!form.distinguish"
                         v-model="setDefault">设置为默认学校</el-checkbox>
          </div>
          <el-button class="submit"
                     type="primary"
                     @click="submit">登录</el-button>
        </el-form>
      </div>
    </div>
    <el-dialog title="绑定手机号"
               :visible.sync="phoneVisible"
               :close-on-click-modal="false"
               width="30%">
      <div style='padding: 0 13px 20px 13px;'>
        依据国家政策法规，需绑定手机号进行网络实名才可登录使用本平台
      </div>
      <el-form label-width="60px">
        <el-form-item label="手机号">
          <el-input style="width: 100%;"
                    placeholder="请输入手机号"
                    v-model="phone"
                    maxlength="11"
                    @change="phoneChange"></el-input>
        </el-form-item>
        <el-form-item label="验证码">
          <div class="ver-code">
            <el-input v-model="phoneCode"
                      placeholder="请输入验证码"
                      maxlength="6"></el-input>
            <el-button style="top: 1px"
                       type="text"
                       @click="sendPhoneCode(1)"
                       :disabled="binding === '' || phoneDisabled">{{ phoneBtnText }}
            </el-button>
          </div>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button size="small"
                   @click="phoneVisible = false">取 消</el-button>
        <el-button size="small"
                   type="primary"
                   @click="phoneSubmit">确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog title="请选择"
               :visible.sync="selectVisible"
               :close-on-click-modal="false"
               custom-class="select-dia"
               width="643px">
      <ul class="port">
        <li :class="{active: selectedRole === 1}"
            @click="selectRole(1)">
          <img src="@/assets/img/login/male.png"
               alt="">
          <p>学生端</p>
        </li>
        <li :class="{active: selectedRole === 2}"
            @click="selectRole(2)">
          <img src="@/assets/img/login/female.png"
               alt="">
          <p>教师管理端</p>
        </li>
      </ul>
    </el-dialog>
    <el-dialog title="请选择您要登录的用户"
               :visible.sync="userVisible"
               :close-on-click-modal="false"
               custom-class="user-dia"
               width="500px">
      <p class="tips">该手机号已绑定以下用户信息</p>
      <ul class="users">
        <li :class="{isEnable: !user.isEnable}"
            v-for="(user, i) in users"
            :key="i"
            @click="chooseUser(user)">
          <span>{{ user.schoolName }}，{{ user.userName }}，{{ user.workNumber }}{{ user.isEnable ? '' : '（已禁用）'}}</span>
          <i class="el-icon-right"></i>
        </li>
      </ul>
    </el-dialog>
    <el-dialog :visible.sync="infoVisible"
               :close-on-click-modal="false"
               custom-class="info-dia"
               :show-close="false"
               width="400px">
      <div class="info-header">
        <i class="el-icon-warning"></i>
        提示
      </div>
      <div class="info-wrap">
        <p class="tips">该手机号已与以下用户绑定</p>
        <ul class="users">
          <li v-for="(user, i) in infos"
              :key="i">
            <span>{{ user.userName }}（{{ user.schoolName }}）</span>
          </li>
        </ul>
        <div class="info-footer">
          <el-button size="small"
                     type="primary"
                     @click="bindPhone">是本人，继续绑定</el-button>
          <el-button class="unbind"
                     size="small"
                     @click="unbindPhone">不是本人，解绑以上用户并绑定新用户</el-button>
        </div>
      </div>
    </el-dialog>
    <!-- 购买弹框 -->
    <el-dialog title="温馨提示"
               :visible.sync="buyVisible"
               width="400px"
               center
               :close-on-click-modal="false">
      <div class="buy">
        <p class="tips">您所选择的院校暂未在本平台开通组织账号，请通知院校老师联系下方二维码客服咨询。</p>
        <img src="@/assets/img/wechat-code.jpeg"
             alt="">
      </div>
    </el-dialog>

    <el-dialog title="账号申请"
               :visible.sync="accountVisible"
               :close-on-click-modal="false"
               width="500px"
               @close="accountClose">
      <el-form class="dia-form"
               ref="accountForm"
               label-width="110px"
               :model="accountForm"
               :rules="accountRules">
        <el-form-item prop="schoolId"
                      label="所属院校">
          <el-select class="w-100"
                     v-model="accountForm.schoolId"
                     filterable
                     placeholder="请选择院校"
                     @change="schoolChange">
            <el-option v-for="(item, i) in schoolList"
                       :key="i"
                       :label="item.schoolName"
                       :value="item.schoolId"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="workNumber"
                      label="学号">
          <el-input placeholder="申请后无法修改，请确认填写正确"
                    v-model="accountForm.workNumber"
                    @change="workNumberChange"></el-input>
        </el-form-item>
        <el-form-item prop="userName"
                      label="姓名">
          <el-input placeholder="请输入姓名"
                    v-model="accountForm.userName"
                    :disabled="formEnable"></el-input>
        </el-form-item>
        <el-form-item prop="phone"
                      label="手机号">
          <el-input placeholder="请输入手机号"
                    maxlength="11"
                    v-model.trim="accountForm.phone"
                    :disabled="formEnable"></el-input>
        </el-form-item>
        <el-form-item prop="code"
                      label="验证码">
          <div class="ver-code">
            <el-input v-model="accountForm.code"
                      placeholder="请输入验证码"
                      maxlength="6"
                      :disabled="formEnable"></el-input>
            <el-button style="top: 1px"
                       type="text"
                       @click="sendCode"
                       :disabled="phoneDisabled && formEnable">{{ phoneBtnText }}
            </el-button>
          </div>
        </el-form-item>
        <el-form-item prop="password"
                      label="登录密码">
          <el-input placeholder="请输入登录密码"
                    type="password"
                    maxlength="6"
                    v-model="accountForm.password"
                    :disabled="formEnable"></el-input>
        </el-form-item>
        <el-form-item prop="rePassword"
                      label="确认登录密码">
          <el-input placeholder="请再次输入登录密码"
                    type="password"
                    maxlength="6"
                    v-model="accountForm.rePassword"
                    :disabled="formEnable"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer"
            class="dialog-footer">
        <el-button v-if="!formEnable"
                   size="small"
                   type="primary"
                   @click="accountSubmit">申请</el-button>
        <el-button size="small"
                   @click="accountVisible = false">取消</el-button>
      </span>
    </el-dialog>
    <v-footer ref="footer"></v-footer>
  </div>
</template>

<script>
import vFooter from "@/layouts/footer";
import { mapState, mapMutations, mapActions } from "vuex";
import util from "@/libs/util";
import Setting from "@/setting";
import axios from "axios"
import { Loading } from 'element-ui'
export default {
  data: function () {
    const workNumberPass = (rule, value, callback) => {
      const val = this.accountForm.workNumber
      if (val === '') {
        callback(new Error('请输入学号'))
      } else {
        const pattern = /^[A-Za-z0-9]*$/
        if (pattern.test(val)) {
          callback()
        } else {
          callback(new Error('请输入正确学号格式'))
        }
      }
    }
    const phonePass = (rule, value, callback) => {
      const val = this.accountForm.phone
      if (val === '') {
        callback(new Error('请输入手机号'))
      } else {
        const pattern = /^1[3456789]\d{9}$/
        if (pattern.test(val)) {
          callback()
        } else {
          callback(new Error('请输入正确手机号格式'))
        }
      }
    }
    return {
      tabList: [
        {
          id: 0,
          label: '学号/工号登录'
        }, {
          id: 1,
          label: '学校管理员登录'
        }, {
          id: 2,
          label: '手机号/邮箱'
        }
      ],
      setDefault: !!util.local.get('schoolId'), // 本地缓存里有学校id，则默认勾选
      verificationIMG: '',
      schoolList: [],
      form: {
        schoolId: '',
        workNumber: '',
        account: '',
        password: '',
        code: '', // 验证码
        random: '', // 随机数
        distinguish: 0, // 区分手机号账号登录,1为账号登录,2为手机号或邮箱登录
        type: 1, // 平台端区分：0->教师端 1->学生端 2->无端
        platform: Setting.platformId
      },
      rules: {
        schoolId: [{ required: true, message: "请选择学校", trigger: "change" }],
        workNumber: [{ required: true, message: "请输入学生学号", trigger: "blur" }],
        account: [{ required: false, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      phoneDisabledLogin: false,
      phoneTimerLogin: null,
      phoneBtnTextLogin: '发送验证码',

      phoneVisible: false,
      phone: '',
      phoneCode: '',
      phoneDisabled: false,
      phoneTimer: null,
      phoneOpener: '',
      phoneBtnText: '发送验证码',
      selectVisible: false,
      selectedRole: '',
      token: '',
      userVisible: false,
      users: [],
      accountIds: [],
      binding: '',
      infoVisible: false,
      infos: [],

      accountVisible: false,
      formEnable: true,
      accountForm: {
        schoolId: '',
        account: '',
        code: '',
        password: '',
        rePassword: '',
        phone: '',
        userName: '',
        workNumber: '',
        uniqueIdentification: Date.now()
      },
      accountRules: {
        schoolId: [{ required: true, message: "请选择所属院校", trigger: "change" }],
        userName: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        workNumber: [{ required: true, validator: workNumberPass, trigger: "blur" }],
        phone: [{ required: true, validator: phonePass, trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        rePassword: [{ required: true, message: "请再次输入密码", trigger: "blur" }],
        code: [{ required: true, message: "请输入验证码", trigger: "blur" }]
      },
      buyVisible: false
    };
  },
  computed: {
    ...mapState('match', [
      'toMatch'
    ]),
    ...mapState('project', [
      'courseId'
    ])
  },
  components: {
    vFooter
  },
  mounted () {
    this.getVerImg()
    this.getSchool()
    // 页面离开的时候销毁手机和邮箱验证码定时器
    this.$once("hook:beforeDestroy", function () {
      clearInterval(this.phoneTimer)
      clearInterval(this.phoneTimerLogin)
      this.phoneTimer = null
      this.phoneTimerLogin = null
    })
  },
  methods: {
    ...mapMutations("user", [
      'SET_CUSTOMERNAME'
    ]),
    ...mapActions("user", [
      "setInfo"
    ]),
    ...mapMutations('match', [
      'SET_SOURCE'
    ]),
    // 赋值学校列表及id
    setSchool (list) {
      this.schoolList = list
      // 取本地缓存里的学校id
      const schoolId = util.local.get('schoolId')
      if (schoolId) this.form.schoolId = schoolId
    },
    // 获取学校列表
    getSchool () {
      this.$get(this.api.querySchool, {
        provinceId: '',
        cityId: ''
      }).then(({ list }) => {
        this.setSchool(list)
      }).catch(res => { })
    },
    getVerImg () { // 获取验证码图片
      this.form.random = Math.floor(Math.random() * 999999999);
      this.verificationIMG = this.api.verification + "?random=" + `${this.form.random}`;
    },
    // 切换标签
    typeClick (tab) {
      const { id } = tab
      const form = this.form
      // 切换了后，全部字段重置
      this.form = {
        schoolId: form.schoolId,
        workNumber: '',
        account: '',
        password: '',
        code: '',
        random: form.random,
        distinguish: id,
        type: 1,
        platform: form.platform
      }
      this.$refs.form.clearValidate()
      // 切换了登录方式后，校验规则要变化
      const rules = this.rules
      rules.schoolId[0].required = id === 0
      rules.workNumber[0].required = id === 0
      rules.account[0].required = !!id
      this.rules.account[0].message = id === 1 ?
        '请输入账号' :
        '请输入手机号/邮箱'
    },
    // 学号工号切换
    typeChange (id) {
      this.rules.workNumber[0].message = id === 1 ?
        '请输入学生学号' :
        '请输入老师工号'
    },
    // 刷新官网
    reloadIndex () {
      try {
        window.opener && window.opener.location.reload()
      } catch (e) { }
    },
    // 选择用户回调
    chooseUser (user) {
      user.isEnable && this.$post(`${this.api.getToken}?id=${user.id}`).then(({ data }) => {
        this.queryClient(data.token)
      }).catch(res => { })
    },
    // 查询是否是客户，如果是客户，则弹出选择端的页面去选择跳转到哪个端
    queryClient (token) {
      this.token = token
      axios.get(this.api.isClient, {
        headers: {
          token
        }
      }).then(({ data }) => {
        // 如果是客户
        if (data.customer) {
          this.SET_CUSTOMERNAME(data.customerName)
          this.selectVisible = true
        } else {
          this.form.type ? this.setLogin() : this.toMang()
        }
      }).catch(res => { })
    },
    // 处理登录成功
    setLogin () {
      util.local.set(Setting.tokenKey, this.token, Setting.tokenExpires)
      util.cookies.remove('serverLogin')
      this.reloadIndex()
      util.successMsg('登录成功')
      const { toMatch } = this
      this.SET_SOURCE('')
      this.$router.replace(this.courseId ?
        `/preCourse/details?id=${this.courseId}` :
        toMatch ?
          `/touristMatch/details?id=` + toMatch :
          '/station')
    },
    // 提交登录
    submit () {
      this.$refs.form.validate(valid => {
        if (valid) {
          const form = JSON.parse(JSON.stringify(this.form))
          const { distinguish } = form
          if (!form.distinguish && this.setDefault) util.local.set('schoolId', form.schoolId) // 选的是学号工号登录，并且勾选了默认，则存入缓存
          if (util.local.get('schoolId') && !this.setDefault) util.local.remove('schoolId') // 本地缓存了学校id，并且没有勾选默认，则删除缓存
          if (distinguish) form.schoolId = ''
          if (!distinguish) form.distinguish = 1
          this.$post(this.api.logins, form).then(({ status, data, message }) => {
            // 未绑定手机号，则弹框去绑定
            if (status == 30001) {
              this.phoneVisible = true
              this.getVerImg()
              form.code = ''
            } else if (status == 200) {
              const accounts = data.userAccounts
              // 如果返回的是数组，则弹框给用户选择登录哪个用户，否则，直接登录
              if (accounts instanceof Array) {
                // 如果只查询到一个用户，则直接登录，否则，弹框让用户选择
                if (accounts.length === 1) {
                  this.chooseUser(accounts[0])
                } else {
                  this.users = accounts
                  this.userVisible = true
                }
              } else {
                this.queryClient(data.token)
              }
            } else {
              util.errorMsg(message)
            }
          }).catch(res => {
            this.getVerImg()
            form.code = ''
          })
        }
      });
    },
    // 跳转到教师端
    toMang () {
      const { token } = this
      util.local.set('oc_server_token', token, Setting.tokenExpires)
      // 从学生端登录到教师端的标识，教师端需要使用
      util.cookies.set('serverLogin', true, {
        expires: new Date(Date.now() + 15 * 60 * 1000) // 15分钟后过期
      })
      axios.get(this.api.isClient, {
        headers: {
          token
        }
      }).then(({ data }) => {
        // 如果是客户
        if (data.customerName) {
          util.cookies.set('customerName', data.customerName)
        } else {
          // 查询姓名
          axios.get(Setting.apiBaseURL + this.api.queryUserInfoDetails, {
            headers: {
              token: this.token
            }
          }).then(({ data }) => {
            this.SET_CUSTOMERNAME(data.result.hrUserInfo.userName)
            util.cookies.set('customerName', data.result.hrUserInfo.userName)
          }).catch(err => { })
        }

        this.reloadIndex()
        // if (this.courseId) {
        //   this.$router.replace(`/preCourse/details?id=${this.courseId}`)
        // } else if (this.toMatch) {
        //   this.$router.replace(`/touristMatch`)
        // } else {
        // 跳转到教师端的重定向页面
        location.href = Setting.isDev ?
          `http://${location.hostname}:8081/#/redirect?auth=${btoa(this.token)}` :
          `${location.origin}/admin/#/redirect?auth=${window.btoa(this.token)}`
        // }
      }).catch(res => { })
    },
    // 选择端
    selectRole (val) {
      this.selectedRole = val
      if (val === 1) {
        this.setLogin()
      } else {
        this.toMang()
      }
    },
    // 验证手机号
    verifyPhone (phone) {
      if (!phone) {
        this.$message.error("请输入手机号")
        return false
      }
      if (!/^1[3456789]\d{9}$/.test(phone) && !/^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/.test(phone)) {
        this.$message.error("请输入正确的手机号/邮箱")
        return false
      }
      return true
    },

    // 账号申请
    toAccount () {
      this.accountVisible = true
    },
    // 学号输入完回调。学校和学号都输入完后，调这个接口查询是否有存在的学生，如果没有，才能继续输入，如果有，不让添加
    workNumberChange () {
      const form = this.accountForm
      form.schoolId && form.workNumber && this.$get(`${this.api.enquireAboutSchoolStudents}?schoolId=${form.schoolId}&workNumber=${form.workNumber}&applyFor=1`).then(({ account }) => {
        if (account) this.form = account
        this.formEnable = !!account
      }).catch(res => {
        this.formEnable = true
      })
    },
    // 学校选择回调
    schoolChange (schoolId) {
      this.$get(this.api.getCustomerBySchoolId, {
        schoolId
      }).then(res => {
        if (!res) {
          this.accountVisible = false
          this.buyVisible = true
        }
      }).catch(res => { })
    },
    // 发送验证码
    sendCode () {
      const { phone } = this.accountForm
      // 校验用户手机号是否存在
      phone && this.$get(`${this.api.checkPhoneOrEmailExist}?phone=${phone}&type=1&email=`).then(res => {
        if (res) return util.errorMsg('手机号已存在，请更换手机号！')
        if (!this.verifyPhone(phone)) return false
        this.$post(`${this.api.sendPhoneVerificationCode}?phoneOrEmail=${phone}&loginOrBind=1&platform=${Setting.platformId}`).then(({ message }) => {
          util.successMsg(message)
          this.phoneCountdown()
        }).catch(res => { })
      }).catch(res => { })
    },
    // 账号申请提交
    accountSubmit () {
      this.$refs.accountForm.validate(valid => {
        if (valid) {
          const form = this.accountForm
          if (form.password !== form.rePassword) return util.errorMsg('两次输入的密码不一致，请重新输入！')
          // 平台id-端id-schoolId-workNumber组成账号
          form.account = `${Setting.platformId}-1-${form.schoolId}-${form.workNumber}`
          this.$post(this.api.studentAccountApplication, form).then(res => {
            this.accountVisible = false
            util.successMsg('账号申请已提交，需管理员审核，请10分钟后再登录')
          }).catch(res => { })
        }
      })
    },
    // 账号申请关闭
    accountClose () {
      this.accountForm = {
        schoolId: '',
        account: '',
        code: '',
        password: '',
        rePassword: '',
        phone: '',
        userName: '',
        workNumber: '',
        uniqueIdentification: Date.now()
      }
    },

    // 验证码倒计时
    phoneCountdownLogin () {
      let count = 60
      if (!this.phoneTimerLogin) {
        this.phoneDisabledLogin = true
        this.phoneTimerLogin = setInterval(() => {
          if (count > 0) {
            count--
            this.phoneBtnTextLogin = `${count}秒后重试`
          } else {
            this.phoneDisabledLogin = false
            clearInterval(this.phoneTimerLogin)
            this.phoneTimerLogin = null
            this.phoneBtnTextLogin = `发送验证码`
          }
        }, 1000)
      }
    },
    // 发送验证码
    sendPhoneCodeLogin () {
      const phone = this.form.account
      if (!this.verifyPhone(phone)) return false
      this.$post(`${this.api.sendPhoneVerificationCode}?phoneOrEmail=${phone}&loginOrBind=0&platform=${Setting.platformId}`).then(({ message }) => {
        util.successMsg(message)
        this.phoneCountdownLogin()
      }).catch(res => { })
    },
    // 继续绑定
    bindPhone () {
      this.infoVisible = false
      this.binding = true
      this.sendPhoneCode(1)
    },
    // 解除绑定
    unbindPhone () {
      this.infoVisible = false
      this.binding = false
      this.sendPhoneCode(0)
    },
    // 手机号失去焦点回调
    phoneChange () {
      this.$post(`${this.api.getOtherAccountByPhone}?phone=${this.phone}&platform=${Setting.platformId}`).then(({ userAccounts }) => {
        const list = userAccounts
        if (list) {
          list.map(e => {
            const { userName } = e
            if (userName.length > 1) e.userName = userName[0] + '*' + userName.substring(2)
          })
          this.infos = list
          this.accountIds = list.map(e => e.id)
          this.infoVisible = true
        } else {
          this.binding = true
        }
      }).catch(res => { })
    },
    // 验证码倒计时
    phoneCountdown () {
      let count = 60
      if (!this.phoneTimer) {
        this.phoneDisabled = true
        this.phoneTimer = setInterval(() => {
          if (count > 0) {
            count--
            this.phoneBtnText = `${count}秒后重试`
          } else {
            this.phoneDisabled = false
            clearInterval(this.phoneTimer)
            this.phoneTimer = null
            this.phoneBtnText = `发送验证码`
          }
        }, 1000)
      }
    },
    // 发送验证码
    sendPhoneCode (bind) {
      const { phone } = this
      if (!this.verifyPhone(phone)) return false
      // 不解绑发送验证码
      if (bind) {
        this.$post(this.api.sendPhoneOrEmailCode, {
          platform: Setting.platformId,
          phone,
          types: 2
        }).then(({ message }) => {
          if (message.opener) {
            this.phoneCountdown()
            this.phoneOpener = message.opener
          } else {
            util.errorMsg(message)
          }
        }).catch(res => { })
      } else {
        this.$post(`${this.api.sendPhoneVerificationCode}?phoneOrEmail=${phone}&loginOrBind=1&platform=${Setting.platformId}`).then(({ message }) => {
          util.successMsg(message)
          this.phoneCountdown()
        }).catch(res => { })
      }
    },
    // 解绑
    unbind () {
      const { password, platform, schoolId, type, workNumber } = this.form
      this.$post(this.api.unbindAccounts, {
        accountIds: this.accountIds,
        code: this.phoneCode,
        password,
        phone: this.phone,
        platform,
        schoolId,
        type,
        workNumber,
      }).then(({ data }) => {
        this.token = data.token
        this.setLogin()
      }).catch(res => { })
    },
    // 绑定手机号
    phoneSubmit () {
      const { phone, phoneCode } = this
      if (!this.verifyPhone(phone)) return false
      if (!phoneCode) return util.warningMsg('请输入验证码')
      const { workNumber, schoolId } = this.form
      if (this.binding) {
        this.$post(this.api.bindPhoneOrEmail, {
          mark: this.form.type,
          phone,
          types: 2,
          code: phoneCode,
          opener: this.phoneOpener,
          platform: Setting.platformId,
          account: workNumber,
          schoolId
        }).then(({ token }) => {
          this.token = token
          this.setLogin()
        }).catch(res => { })
      } else {
        this.unbind()
      }
    }
  }
};
</script>

<style scoped lang="scss">
.wrap {
    min-height: 100%;
    background-color: #f3f6fa;
}
.ver-code {
    position: relative;
    .el-button {
        position: absolute;
        top: 10px;
        right: 10px;
    }
}
.login {
    min-height: calc(100vh - 43px);
    padding-top: calc((100vh - 584px) / 2);
    background: url(../../../assets/img/shapes/shape1.png) (0 123px) / auto no-repeat,
        url(../../../assets/img/shapes/shape2.png) (35px 238px) / auto no-repeat,
        url(../../../assets/img/shapes/shape3.png) (0 485px) / auto no-repeat,
        url(../../../assets/img/shapes/shape4.png) (right 50%) / auto no-repeat,
        url(../../../assets/img/shapes/shape5.png) (right 80%) / auto no-repeat,
        url(../../../assets/img/shapes/shape6.png) (right bottom) / auto no-repeat;
    .tab {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 24px;
        border-bottom: 2px solid #e1e6f2;
        li {
            padding: 18px 0;
            margin-bottom: -1px;
            font-size: 16px;
            color: #555;
            cursor: pointer;
            border-bottom: 4px solid transparent;
            &:last-child {
                margin-right: 0;
            }
            &.active {
                color: $main-color;
                border-bottom-color: $main-color;
            }
        }
    }
    .items {
        display: flex;
        align-items: center;
    }
    .form {
        width: 436px;
        padding: 38px 38px 60px;
        margin: 0 auto 0;
        border-radius: 6px;
        background-color: #fff;
        .title {
            margin-bottom: 25px;
            font-size: 26px;
            color: #0b1d30;
            letter-spacing: 4px;
        }
    }
    /deep/.el-form-item {
        margin-bottom: 20px;
    }
    /deep/.el-input__inner {
        position: relative;
        height: 52px;
        padding: 0 20px 0 34px;
        line-height: 50px;
        background-color: #fbfbfb;
        border: 1px solid #e1e6f2;
        border-radius: 4px !important;
    }
    .bottom {
        display: flex;
        justify-content: space-between;
    }
    .el-select {
        width: 100%;
    }
    .label {
        z-index: 1;
        position: absolute;
        top: 17px;
        left: 11px;
        width: 18px;
        height: 18px;
        background: url(../../../assets/img/login/account.png) 0 0/100% 100% no-repeat;
    }
    .school {
        background-image: url(../../../assets/img/login/school.png);
    }
    .workNumber {
        width: 17px;
        background-image: url(../../../assets/img/login/workNumber.png);
    }
    .password {
        top: 18px;
        background-image: url(../../../assets/img/login/password.png);
    }
    .code {
        top: 18px;
        background-image: url(../../../assets/img/login/code.png);
    }
    .ver-img {
        position: absolute;
        top: 1px;
        right: 1px;
    }
    /deep/.el-form-item__error {
        top: 105%;
        left: auto;
        right: 0;
        color: #ffa94e;
    }
    .submit {
        width: 100%;
        height: 48px;
        margin-top: 30px;
        line-height: 48px;
        padding: 0;
        font-size: 20px;
        background-color: $main-color;
        border-radius: 4px;
        border: 0;
    }
}
.copyright {
    padding: 18px 0;
    font-size: 12px;
    text-align: center;
    background-color: #f3f6fa;
    a {
        color: #b1b4b8;
        font-size: 12px;
        &:hover {
            opacity: 0.8;
        }
    }
}
.port {
    display: flex;
    justify-content: center;
    padding: 60px 0;
    li {
        text-align: center;
        cursor: pointer;
        &:first-child {
            margin-right: 86px;
        }
        &:hover img {
            opacity: 0.9;
        }
        &.active p,
        &:hover p {
            background-color: #9278ff;
        }
    }
    img {
        width: 122px;
        margin-bottom: 20px;
    }
    p {
        width: 88px;
        margin: 0 auto;
        line-height: 21px;
        color: #fff;
        background-color: #e8e3ff;
        border-radius: 4px;
    }
}
/deep/.select-dia {
    margin-top: calc((100vh - 383px) / 2) !important;
}
/deep/.user-dia {
    .tips {
        margin-bottom: 20px;
        text-align: center;
        color: #666;
    }
    .users {
        li {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0 15px;
            margin-bottom: 10px;
            line-height: 40px;
            font-size: 14px;
            background-color: #ebeef5;
            cursor: pointer;
            &.isEnable {
                color: #c0c4cc;
                background-color: #f5f7fa;
                cursor: not-allowed;
            }
            &:last-child {
                margin-bottom: 0;
            }
            &:hover {
                background-color: #d3e0ff;
            }
            i {
                font-size: 16px;
            }
        }
    }
}
/deep/.info-dia {
    .el-dialog__header {
        border-bottom: 0;
    }
    .info-header {
        position: absolute;
        top: 20px;
        display: flex;
        align-items: center;
        font-size: 16px;
        color: #333;
    }
    .el-icon-warning {
        margin-right: 10px;
        color: #e6a23c;
        font-size: 24px;
    }
    .info-wrap {
        padding: 10px 33px;
    }
    .users {
        max-height: 125px;
        margin-top: 20px;
        overflow: auto;
        li {
            margin: 5px;
            font-size: 14px;
            color: #333;
        }
    }
    .info-footer {
        display: flex;
        justify-content: space-between;
        margin-top: 20px;
    }
    .el-button {
        width: 142px;
    }
    .unbind {
        white-space: normal;
        line-height: 1.6;
    }
}
/deep/.dia-form {
    .w-100 {
        width: 100%;
    }
    .tips {
        display: flex;
        justify-content: center;
        align-items: center;
    }
}
.buy {
    text-align: center;
    .tips {
        margin-bottom: 10px;
        font-size: 14px;
    }
    img {
        width: 85%;
    }
}
@media (max-height: 680px) {
    .wrap .login {
        padding: 40px 0;
    }
}
</style>