zhongshen_project/addon/pc/source/os/assets/js/auth/login.js

import {
  mobileCode,
  registerConfig,
  wechatMobileCode
} from "@/api/auth/login"
import {
  adList,
  captcha
} from "@/api/website"

export default {
  data: () => {
    var isMobile = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"))
      } else {

        if (/^\d{11}$/.test(value)) {
          callback()
        } else {
          callback(new Error("请输入正确的手机号"))
        }
      }
    }

    return {
      qrcodeData: {
        time: 0,
        timer: 0,
      },
      wx_key: '',
      expire_time: '',
      ischecked: false,
      ischecked1: false,
      activeName: "first", // tab切换
      formData: {
        account: "",
        password: "",
        vercode: "",
        mobile: "",
        dynacode: "",
        key: "",
        checked: false,
        autoLoginRange: 7
      }, // 表单数据
      captcha: {
        id: "",
        img: ""
      }, // 验证码
      dynacodeData: {
        seconds: 120,
        timer: null,
        codeText: "获取动态码",
        isSend: false
      }, // 动态码
      isSub: false, // 提交防重复
      registerConfig: {
        is_enable: 1,
        register: '',
        login: ''
      },
      accountRules: {
        account: [{
          required: true,
          message: "请输入登录账号",
          trigger: "blur"
        }],
        password: [{
          required: true,
          message: "请输入登录密码",
          trigger: "blur"
        }],
        vercode: [{
          required: true,
          message: "请输入验证码",
          trigger: "blur"
        }]
      },
      mobileRules: {
        mobile: [{
          required: true,
          validator: isMobile,
          trigger: "blur"
        }],
        vercode: [{
          required: true,
          message: "请输入验证码",
          trigger: "blur"
        }],
        dynacode: [{
          required: true,
          message: "请输入短信动态码",
          trigger: "blur"
        }]
      },
      wechatRules: {
        mobile: [{
          required: true,
          validator: isMobile,
          trigger: "blur"
        }],
        vercode: [{
          required: true,
          message: "请输入验证码",
          trigger: "blur"
        }],
        dynacode: [{
          required: true,
          message: "请输入短信动态码",
          trigger: "blur"
        }]
      },
      codeRules: {
        mobile: [{
          required: true,
          validator: isMobile,
          trigger: "blur"
        }],
        vercode: [{
          required: true,
          message: "请输入验证码",
          trigger: "blur"
        }]
      },
      loadingAd: true,
      adList: [],
      backgroundColor: '',
      img: '',
      third_party: 0
    }
  },
  created() {
    this.ischecked = this.$route.params.third_party;
    if (this.ischecked) {
      this.weixinLogin()
    }
    this.getAdList()
    this.getCaptcha()
    this.getRegisterConfig()
  },
  head() {
    return {
      title: '登录-' + this.$store.state.site.siteInfo.site_name
    }
  },
  watch: {
    "dynacodeData.seconds": {
      handler(newValue, oldValue) {
        if (newValue == 0) {
          clearInterval(this.dynacodeData.timer)
          this.dynacodeData = {
            seconds: 120,
            timer: null,
            codeText: "获取动态码",
            isSend: false
          }
        }
      },
      immediate: true,
      deep: true
    }
  },
  methods: {
    getAdList() {
      adList({
          keyword: "NS_PC_LOGIN"
        })
        .then(res => {
          if (res.code == 0 && res.data.adv_list) {
            this.adList = res.data.adv_list
            for (let i = 0; i < this.adList.length; i++) {
              if (this.adList[i].adv_url) this.adList[i].adv_url = JSON.parse(this.adList[i].adv_url)
            }
            this.backgroundColor = this.adList[0].background
          }

          this.loadingAd = false
        })
        .catch(err => {
          this.loadingAd = false
        })
    },
    handleClick(tab, event) {},
    handleChange(curr, pre) {
      this.backgroundColor = this.adList[curr].background
    },
    /**
     * 账号登录
     */
    accountLogin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var data = {
            username: this.formData.account,
            password: this.formData.password
          }

          if (this.captcha.id != "") {
            data.captcha_id = this.captcha.id
            data.captcha_code = this.formData.vercode
          }

          if (this.formData.checked) {
            data.autoLoginRange = this.formData.autoLoginRange
          }

          if (this.isSub) return
          this.isSub = true

          this.$store
            .dispatch("member/login", data)
            .then(res => {
              if (res.code >= 0) {
                this.$message({
                  message: "登录成功！",
                  type: "success"
                })
                if (this.$route.query.redirect) {
                  const a = this.$route.query.redirect
                  const b = this.$route.query
                  this.$router.push(this.$route.query.redirect)

                } else {
                  this.$router.push({
                    name: "member"
                  })
                }
              } else {
                this.isSub = false
                this.getCaptcha()
                this.$message({
                  message: res.message,
                  type: "warning"
                })
              }
            })
            .catch(err => {
              this.isSub = false
              this.$message.error(err.message)
              this.getCaptcha()
            })
        } else {
          return false
        }
      })
    },

    /**
     * 手机号登录
     */
    mobileLogin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var data = {
            mobile: this.formData.mobile,
            key: this.formData.key,
            code: this.formData.dynacode
          }

          if (this.captcha.id != "") {
            data.captcha_id = this.captcha.id
            data.captcha_code = this.formData.vercode
          }

          if (this.isSub) return
          this.isSub = true

          this.$store
            .dispatch("member/mobile_login", data)
            .then(res => {
              if (res.code >= 0) {
                this.$message({
                  message: "登录成功！",
                  type: "success"
                })
                if (this.$route.query.redirect) {
                  this.$router.push(this.$route.query.redirect)
                } else {
                  this.$router.push({
                    name: "member"
                  })
                }
              } else {
                this.isSub = false
                this.getCaptcha()
                this.$message({
                  message: res.message,
                  type: "warning"
                })
              }
            })
            .catch(err => {
              this.isSub = false
              this.$message.error(err.message)
              this.getCaptcha()
            })
        } else {
          return false
        }
      })
    },

    /**
     * 微信登录
     */
    wechatLogin(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          var data = {
            mobile: this.formData.mobile,
            key: this.formData.key,
            code: this.formData.dynacode
          }

          if (this.captcha.id != "") {
            data.captcha_id = this.captcha.id
            data.captcha_code = this.formData.vercode
          }

          if (this.isSub) return
          this.isSub = true


          this.$store
            .dispatch("wechat/wechatLogin", data)
            .then(res => {

              if (res.code >= 0) {
                this.$message({
                  message: "登录成功！",
                  type: "success"
                })
                if (this.$route.query.redirect) {
                  this.$router.push(this.$route.query.redirect)
                } else {
                  this.$router.push({
                    name: "member"
                  })
                }
              } else {
                this.isSub = false
                this.getCaptcha()
                this.$message({
                  message: res.message,
                  type: "warning"
                })
              }
            })
            .catch(err => {
              this.isSub = false
              this.$message.error(err.message)
              this.getCaptcha()
            })
        } else {
          return false
        }
      })
    },
    weixinLogin() {
      this.ischecked = true;
      this.$store
        .dispatch("wechat/logincode")
        .then(res => {
          if (res.code >= 0) {
            this.img = res.data.qrcode;
            this.wx_key = res.data.key;
            this.expire_time = res.data.expire_time;
            this.qrcodeData.timer = setInterval(() => {
              this.checkLogin()
            }, 2000);
          }
        })
    },

    // 检测是否扫码
    checkLogin() {
      this.qrcodeData.time += 2;
      if (this.qrcodeData.time > this.expire_time) {
        clearInterval(this.qrcodeData.timer);
        return;
      };
      var data = {
        key: this.wx_key
      };
      this.$store
        .dispatch("wechat/checklogin", data)
        .then(res => {
          if (res.code >= 0) {
            if (res.data.token != undefined) {
              this.$message({
                message: "登录成功！",
                type: "success"
              })
              if (this.$route.query.redirect) {
                this.$router.push(this.$route.query.redirect)
              } else {
                this.$router.push({
                  name: "member"
                })
              }
            } else {
              this.ischecked1 = true;
            }

            clearInterval(this.qrcodeData.timer);
          }
        })
        .catch(err => {
          console.log(err.message)
        })
    },

    closeWx() {
      this.ischecked = false;
    },
    closeWx1() {
      this.ischecked = false;
      this.ischecked1 = false;
    },

    /**
     * 获取注册配置
     */
    getRegisterConfig() {
      registerConfig()
        .then(res => {
          if (res.code >= 0) {
            this.registerConfig = res.data.value
            if (this.registerConfig.login.indexOf('username') != -1) {
              this.activeName = 'first';
            } else {
              this.activeName = 'second';
            }

          }
        })
        .catch(err => {
          console.log(err.message)
        })
    },
    /**
     * 获取验证码
     */
    getCaptcha() {
      captcha({
          captcha_id: this.captcha.id
        })
        .then(res => {
          if (res.code >= 0) {
            this.captcha.id = res.data.id
            this.captcha.img = res.data.img
            this.captcha.img = this.captcha.img.replace(/\r\n/g, "")
          }
        })
        .catch(err => {
          this.$message.error(err.message)
        })
    },
    /**
     * 发送手机动态码
     */
    sendMobileCode(formName) {
      if (this.dynacodeData.seconds != 120) return
      this.$refs[formName].clearValidate("dynacode")

      this.$refs[formName].validateField("mobile", valid => {
        if (valid) {
          return false
        }
      })
      this.$refs[formName].validateField("vercode", valid => {
        if (!valid) {
          mobileCode({
              mobile: this.formData.mobile,
              captcha_id: this.captcha.id,
              captcha_code: this.formData.vercode
            })
            .then(res => {
              if (res.code >= 0) {
                this.formData.key = res.data.key
                if (this.dynacodeData.seconds == 120 && this.dynacodeData.timer ==
                  null) {
                  this.dynacodeData.timer = setInterval(() => {
                    this.dynacodeData.seconds--
                    this.dynacodeData.codeText = this.dynacodeData.seconds +
                      "s后可重新获取"
                  }, 1000)
                }
              }
            })
            .catch(err => {
              this.$message.error(err.message)
            })
        } else {
          return false
        }
      })
    },
    /**
     * 发送微信绑定手机动态码
     */
    sendWechatMobileCode(formName) {
      if (this.dynacodeData.seconds != 120) return
      this.$refs[formName].clearValidate("dynacode")

      this.$refs[formName].validateField("mobile", valid => {
        if (valid) {
          return false
        }
      })
      this.$refs[formName].validateField("vercode", valid => {
        if (!valid) {
          wechatMobileCode({
              mobile: this.formData.mobile,
              captcha_id: this.captcha.id,
              captcha_code: this.formData.vercode
            })
            .then(res => {
              if (res.code >= 0) {
                this.formData.key = res.data.key
                if (this.dynacodeData.seconds == 120 && this.dynacodeData.timer ==
                  null) {
                  this.dynacodeData.timer = setInterval(() => {
                    this.dynacodeData.seconds--
                    this.dynacodeData.codeText = this.dynacodeData.seconds +
                      "s后可重新获取"
                  }, 1000)
                }
              }
            })
            .catch(err => {
              this.$message.error(err.message)
            })
        } else {
          return false
        }
      })
    },
    keypress(e) {
      let that = this;
      var keycode = e.all ? e.keyCode : e.which;
      if (keycode == 13) {
        if (that.activeName == "first") {
          that.accountLogin('ruleForm'); // 登录方法名
        } else {
          that.mobileLogin('mobileRuleForm'); // 登录方法名
        }
        return false;
      }
    }
  }
}