captain-ui/lib/login-dialog/src/components/reset-account.js

有赞vue wap业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

require("vant/es/toast/style");

var _toast = _interopRequireDefault(require("vant/es/toast"));

require("vant/es/cell-group/style");

var _cellGroup = _interopRequireDefault(require("vant/es/cell-group"));

require("vant/es/field/style");

var _field = _interopRequireDefault(require("vant/es/field"));

require("vant/es/icon/style");

var _icon = _interopRequireDefault(require("vant/es/icon"));

var _yzAes = _interopRequireDefault(require("@youzan/yz-aes"));

var _ajax = _interopRequireDefault(require("../../../common/ajax.js"));

var _default = {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "cap-login-dialog"
    }, [_c('div', {
      staticClass: "cap-login-dialog__title"
    }, [_c('span', [_vm._v("重置密码")]), _c('span', {
      on: {
        "click": _vm.closeReset
      }
    }, [_vm._v("×")])]), _c('div', {
      staticClass: "cap-login-dialog__phone"
    }, [_c('span', [_vm._v("中国 +86")]), _c('span', [_c('input', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.phone,
        expression: "phone"
      }],
      attrs: {
        "type": "tel",
        "placeholder": "请输入手机号"
      },
      domProps: {
        "value": _vm.phone
      },
      on: {
        "input": function input($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.phone = $event.target.value;
        }
      }
    }), _c('van-icon', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.phone,
        expression: "phone"
      }],
      attrs: {
        "name": "clear"
      },
      on: {
        "click": _vm.clearPhone
      }
    })], 1)]), _vm.showImgCaptcha ? _c('div', {
      staticClass: "cap-login-dialog__img-captcha"
    }, [_c('span', [_c('input', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.imgCaptcha,
        expression: "imgCaptcha"
      }],
      attrs: {
        "type": "text",
        "placeholder": "请输入图形验证码"
      },
      domProps: {
        "value": _vm.imgCaptcha
      },
      on: {
        "input": function input($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.imgCaptcha = $event.target.value;
        }
      }
    })]), _c('img', {
      attrs: {
        "src": _vm.imgCaptchaSrc,
        "alt": ""
      },
      on: {
        "click": _vm.changeImgCaptcha
      }
    })]) : _vm._e(), _c('div', {
      staticClass: "cap-login-dialog__get-captcha"
    }, [_c('span', [_c('input', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.phoneCaptcha,
        expression: "phoneCaptcha"
      }],
      attrs: {
        "type": "tel",
        "placeholder": _vm.captcha
      },
      domProps: {
        "value": _vm.phoneCaptcha
      },
      on: {
        "input": function input($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.phoneCaptcha = $event.target.value;
        }
      }
    })]), _c('span', [_vm.captcha === '请输入验证码' ? _c('span', {
      on: {
        "click": _vm.changeCaptcha
      }
    }, [_vm._v("\n        获取验证码\n      ")]) : _c('span', {
      staticClass: "cap-login-dialog__get-captcha__clock-captcha"
    }, [_vm._v("\n        已发送(" + _vm._s(_vm.captchaTimer) + "s)\n      ")])])]), _c('div', {
      staticClass: "cap-login-dialog__reset-password"
    }, [_c('span', [_vm.showPassword ? _c('input', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.newPassword,
        expression: "newPassword"
      }],
      attrs: {
        "type": "password",
        "placeholder": "请设置8-20位(数字+字符)新密码"
      },
      domProps: {
        "value": _vm.newPassword
      },
      on: {
        "input": function input($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.newPassword = $event.target.value;
        }
      }
    }) : _c('input', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.newPassword,
        expression: "newPassword"
      }],
      attrs: {
        "type": "text",
        "placeholder": "请设置8-20位(数字+字符)新密码"
      },
      domProps: {
        "value": _vm.newPassword
      },
      on: {
        "input": function input($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.newPassword = $event.target.value;
        }
      }
    })]), _c('span', [_vm.showPassword ? _c('van-icon', {
      attrs: {
        "name": "password-not-view"
      },
      on: {
        "click": function click() {
          return _vm.showPassword = !_vm.showPassword;
        }
      }
    }) : _c('van-icon', {
      attrs: {
        "name": "password-view"
      },
      on: {
        "click": function click() {
          return _vm.showPassword = !_vm.showPassword;
        }
      }
    })], 1)]), _c('div', {
      staticClass: "cap-login-dialog__button"
    }, [_c('button', {
      on: {
        "click": _vm.pushReset
      }
    }, [_vm._v("确定")])]), _c('div', {
      staticClass: "cap-login-dialog__footer"
    }, [_c('span', {
      on: {
        "click": _vm.changeHash
      }
    }, [_vm._v("返回密码登录")])])]);
  },
  components: {
    'van-icon': _icon.default,
    'van-field': _field.default,
    'van-cell-group': _cellGroup.default
  },
  props: {
    interfaceServerLocation: String
  },
  data: function data() {
    return {
      captcha: '请输入验证码',
      timer: null,
      captchaTimer: 60,
      showImgCaptcha: true,
      showPassword: true,
      newPassword: '',
      phone: '',
      imgCaptcha: '',
      phoneCaptcha: '',
      imgCaptchaSrc: this.interfaceServerLocation + "/api/captcha/image.png?" + new Date().getTime()
    };
  },
  watch: {
    newPassword: function newPassword(val, oldval) {
      if (val.length > 20) {
        return this.newPassword = oldval;
      }
    }
  },
  methods: {
    closeReset: function closeReset() {
      this.phone = '';
      this.newPassword = '';
      this.imgCaptcha = '';
      this.phoneCaptcha = '';
      this.$emit('showLoginToC');
    },
    clearPhone: function clearPhone() {
      this.phone = '';
    },
    changeImgCaptcha: function changeImgCaptcha() {
      this.imgCaptchaSrc = this.interfaceServerLocation + "/api/captcha/image.png?" + new Date().getTime();
    },
    changeCaptcha: function changeCaptcha() {
      var _this = this;

      if (this.captcha === '请输入验证码') {
        var phoneReg = /^\d{1,20}$/;

        if (!this.phone) {
          (0, _toast.default)('请输入手机号');
          return;
        }

        if (!phoneReg.test(this.phone)) {
          (0, _toast.default)('手机号格式错误');
          return;
        }

        if (this.showImgCaptcha) {
          if (!this.imgCaptcha) {
            (0, _toast.default)('请输入图片验证码');
            return;
          }
        }

        var requestData = {
          countryCode: '+86',
          mobile: this.phone,
          captchaCode: this.imgCaptcha
        };
        (0, _ajax.default)({
          method: 'POST',
          data: requestData,
          url: this.interfaceServerLocation + "/api/to-c-retrieve-pass/sms.json",
          rawResponse: true,
          withCredentials: true
        }).then(function (res) {
          if (res.code === 0) {
            _this.captcha = '请输入6位验证码';
            _this.timer = setInterval(function () {
              _this.captchaTimer -= 1;

              if (_this.captchaTimer === 0) {
                clearInterval(_this.timer);
                _this.captchaTimer = 60;
                _this.captcha = '请输入验证码';
              }
            }, 1000);
          } else {
            _this.changeImgCaptcha();

            (0, _toast.default)(res.msg);
          }
        }).catch(function (err) {
          console.log(err);
        });
      }
    },
    changeHash: function changeHash() {
      this.$emit('changeLoginType', 'password-login');
    },
    pushReset: function pushReset() {
      var _this2 = this;

      var phoneReg = /^\d{1,20}$/;

      if (!this.phone) {
        (0, _toast.default)('请输入手机号');
        return;
      }

      if (!phoneReg.test(this.phone)) {
        (0, _toast.default)('手机号格式错误');
        return;
      }

      if (this.showImgCaptcha) {
        if (!this.imgCaptcha) {
          (0, _toast.default)('请输入图片验证码');
          return;
        }
      }

      if (!this.phoneCaptcha) {
        (0, _toast.default)('请输入短信验证码');
        return;
      }

      if (!this.newPassword) {
        (0, _toast.default)('请设置新密码');
        return;
      }

      if (this.newPassword.length < 8 || this.newPassword.length > 20) {
        (0, _toast.default)('请输入 8~20位字符，包含字母、数字和字符');
        return;
      }

      var requestData = {
        countryCode: '+86',
        mobile: this.phone,
        captchaCode: this.imgCaptcha,
        password: _yzAes.default.encrypt(this.newPassword),
        smsCaptcha: this.phoneCaptcha
      };
      (0, _ajax.default)({
        method: 'POST',
        data: requestData,
        url: this.interfaceServerLocation + "/api/to-c-retrieve-pass.json",
        rawResponse: true,
        withCredentials: true
      }).then(function (res) {
        _this2.changeImgCaptcha();

        if (res.code === 0) {
          _toast.default.success('密码重置成功');

          _this2.phone = '';
          _this2.newPassword = '';
          _this2.imgCaptcha = '';
          _this2.phoneCaptcha = '';

          _this2.$emit('changeLoginType', 'password-login');
        } else {
          (0, _toast.default)(res.msg);
        }
      }).catch(function (err) {
        console.log(err);
      });
    }
  }
};
exports.default = _default;