captain-ui/lib/mobile-supply/src/main.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/button/style");

var _button = _interopRequireDefault(require("vant/es/button"));

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

var _popup = _interopRequireDefault(require("vant/es/popup"));

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

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

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('van-popup', {
      staticClass: "cap-mobile-supply-container",
      attrs: {
        "value": _vm.value
      }
    }, [_c('span', {
      staticClass: "cap-mobile-supply-container__close",
      on: {
        "click": _vm.onCloseClicked
      }
    }, [_vm._v("\n    ×\n  ")]), _c('h3', {
      staticClass: "cap-mobile-supply-container__h3"
    }, [_vm._v("手机号验证")]), _c('h5', {
      staticClass: "cap-mobile-supply-container__h5"
    }, [_vm._v("为了你的帐号安全，需补全手机号才能使用"), _c('span', [_vm._v(_vm._s(_vm.phone.slice(0, 3) + '****' + _vm.phone.slice(7, _vm.phone.length)))]), _vm._v("下的资产")]), _c('div', {
      staticClass: "cap-mobile-supply-container__phone-input"
    }, [_c('div', {
      staticClass: "cap-mobile-supply-container__input"
    }, [_vm._l(_vm.phone.slice(0, 3), function (item, index) {
      return _c('span', {
        key: index,
        staticClass: "show-phone"
      }, [_vm._v("\n        " + _vm._s(item) + "\n      ")]);
    }), _vm._l(4, function (item, index) {
      return _c('span', {
        key: index + 3,
        staticClass: "cap-mobile-supply-container__input__unshow-phone",
        class: {
          cursorTwinkle: _vm.isCursor[index]
        },
        domProps: {
          "textContent": _vm._s(_vm.innerInput.split('')[index])
        },
        on: {
          "click": _vm.addPhoneNum
        }
      });
    }), _vm._l(_vm.phone.slice(7, _vm.phone.length), function (item, index) {
      return _c('span', {
        key: index + 7,
        staticClass: "show-phone"
      }, [_vm._v("\n        " + _vm._s(item) + "\n      ")]);
    })], 2), _c('input', {
      directives: [{
        name: "model",
        rawName: "v-model",
        value: _vm.innerInput,
        expression: "innerInput"
      }],
      ref: "myInput",
      attrs: {
        "type": "tel"
      },
      domProps: {
        "value": _vm.innerInput
      },
      on: {
        "blur": _vm.myInputBlur,
        "input": function input($event) {
          if ($event.target.composing) {
            return;
          }

          _vm.innerInput = $event.target.value;
        }
      }
    })]), _c('van-button', {
      staticClass: "cap-mobile-supply-container__button",
      attrs: {
        "size": "large",
        "type": "primary"
      },
      on: {
        "click": _vm.next
      }
    }, [_vm._v("\n    确认\n  ")]), _c('p', {
      staticClass: "cap-mobile-supply-container__extra"
    }, [_vm._v("授权即代表同意"), _c('a', {
      attrs: {
        "href": "https://bbs.youzan.com/forum.php?mod=viewthread&tid=672890&page=1&extra=#pid3837866"
      }
    }, [_vm._v("《有赞用户使用协议》")])])], 1);
  },
  name: 'cap-mobile-supply',
  components: {
    'van-icon': _icon.default,
    'van-popup': _popup.default,
    'van-button': _button.default
  },
  props: {
    value: {
      type: Boolean,
      default: false
    },
    phone: {
      type: String,
      default: ''
    },
    kdtId: {
      type: Number,
      defalut: 0
    },
    onSuccess: {
      type: Function,
      default: null
    }
  },
  data: function data() {
    return {
      name: 'World',
      innerInput: '',
      isCursor: [false, false, false, false]
    };
  },
  watch: {
    innerInput: function innerInput(newNum, oldNum) {
      if (newNum.length > 4) {
        this.innerInput = oldNum;
      }

      if (this.value) {
        this.isCursor = [false, false, false, false];
        this.isCursor[this.innerInput.length] = true;
      }
    }
  },
  mounted: function mounted() {
    var oMeta = document.createElement('meta');
    oMeta.content = 'telephone=no';
    oMeta.name = 'format-detection';
    document.getElementsByTagName('head')[0].appendChild(oMeta);
  },
  methods: {
    next: function next() {
      var _this = this;

      if (this.innerInput.length === 4) {
        var requestData = {
          mobile: "" + this.phone.slice(0, 3) + this.innerInput + this.phone.slice(7, this.phone.length),
          kdtId: this.kdtId
        };
        (0, _ajax.default)({
          method: 'POST',
          data: requestData,
          url: 'https://passport.youzan.com/mobile-authentication/mobile-auth.json',
          rawResponse: true,
          withCredentials: true
        }).then(function (res) {
          if (res.code === 0) {
            if (_this.onSuccess) {
              _this.onSuccess();
            }

            _this.onCloseClicked();
          } else {
            (0, _toast.default)(res.msg);
          }
        }).catch(function (err) {
          console.log(err);
        });
      } else {
        (0, _toast.default)('手机号格式错误');
      }
    },
    myInputBlur: function myInputBlur() {
      this.isCursor = [false, false, false, false];
    },
    onCloseClicked: function onCloseClicked() {
      this.$emit('input', false);
      this.innerInput = '';
      this.isCursor = [false, false, false, false];
    },
    addPhoneNum: function addPhoneNum(e) {
      if (this.innerInput.length) {
        this.isCursor = [false, false, false, false];
        this.isCursor[this.innerInput.length] = true;
      } else {
        this.isCursor = [true, false, false, false];
      }

      this.$refs.myInput.focus();
    }
  }
};
exports.default = _default;