warewms-PDA/components/watch-login/watch-input.vue

<template>
  <view class="main-list oBorder">
    <!-- 文本框  @focus="$emit('focus', $event)"-->
    <input
      class="main-input"
      :value="value"
      :type="_type"
      :focus="_focus"
      :maxlength="maxlength"
      :placeholder="placeholder"
      :password="type === 'password' && !showPassword"
      @focus="inputBindFocus"
      @input="$emit('input', $event.detail.value)"
      @blur="$emit('blur', $event)"
     
      @longpress="$emit('longpress', $event)"
      @confirm="$emit('confirm', $event)"
      @click="$emit('click', $event)"
      @longtap="$emit('longtap', $event)"
      @touchcancel="$emit('touchcancel', $event)"
      @touchend="$emit('touchend', $event)"
      @touchmove="$emit('touchmove', $event)"
      @touchstart="$emit('touchstart', $event)" />
    <!-- 是否可见密码 -->
    <image
      v-if="_isShowPass && type === 'password' && !_isShowCode"
      class="img cuIcon"
      :class="showPassword ? 'cuIcon-attention' : 'cuIcon-attentionforbid'"
      @tap="showPass"></image>
    <!-- 倒计时 -->
    <view
      v-if="_isShowCode && !_isShowPass"
      :class="['vercode', { 'vercode-run': second > 0 }]"
      @click="setCode">
      {{ getVerCodeSecond }}
    </view>
  </view>
</template>

<script>
let _this, countDown;
export default {
  data() {
    return {
      showPassword: false, //是否显示明文
      second: 0, //倒计时
      isRunCode: false, //是否开始倒计时
    };
  },
  props: {
    type: String, //类型
    value: String, //值
    placeholder: String, //框内提示
    maxlength: {
      //最大长度
      type: [Number, String],
      default: 20,
    },
    isShowPass: {
      //是否显示密码图标（二选一）
      type: [Boolean, String],
      default: false,
    },
    isShowCode: {
      //是否显示获取验证码（二选一）
      type: [Boolean, String],
      default: false,
    },
    codeText: {
      type: String,
      default: "获取验证码",
    },
    setTime: {
      //倒计时时间设置
      type: [Number, String],
      default: 60,
    },
    focus: {
      //是否聚焦
      type: [Boolean, String],
      default: false,
    },
  },
  model: {
    prop: "value",
    event: "input",
  },
  mounted() {
    _this = this;
    //准备触发
    this.$on("runCode", (val) => {
      this.runCode(val);
    });
    clearInterval(countDown); //先清理一次循环，避免缓存
  },
  methods: {
    showPass() {
      //是否显示密码
      this.showPassword = !this.showPassword;
    },
    inputBindFocus(e) {
      if (e.detail.height) {
        // obj.newProperty["12312"] = value;

        this.inputHeight = e.detail.height; //这个高度就是软键盘的高度
      }
    },
    setCode() {
      //设置获取验证码的事件
      if (this.isRunCode) {
        //判断是否开始倒计时，避免重复点击
        return false;
      }
      this.$emit("setCode");
    },
    runCode(val) {
      //开始倒计时
      if (String(val) == "0") {
        //判断是否需要终止循环
        this.second = 0; //初始倒计时
        clearInterval(countDown); //清理循环
        this.isRunCode = false; //关闭循环状态
        return false;
      }
      if (this.isRunCode) {
        //判断是否开始倒计时，避免重复点击
        return false;
      }
      this.isRunCode = true;
      this.second = this._setTime; //倒数秒数

      let _this = this;
      countDown = setInterval(function () {
        _this.second--;
        if (_this.second == 0) {
          _this.isRunCode = false;
          clearInterval(countDown);
        }
      }, 1000);
    },
  },
  computed: {
    _type() {
      //处理值
      const type = this.type;
      return type == "password" ? "text" : type;
    },
    _isShowPass() {
      //处理值
      return String(this.isShowPass) !== "false";
    },
    _isShowCode() {
      //处理值
      return String(this.isShowCode) !== "false";
    },
    _setTime() {
      //处理值
      const setTime = Number(this.setTime);
      return setTime > 0 ? setTime : 60;
    },
    _focus() {
      //处理值
      return String(this.focus) !== "false";
    },
    getVerCodeSecond() {
      //验证码倒计时计算
      if (this.second <= 0) {
        return this.codeText;
      } else {
        if (this.second < 10) {
          return "0" + this.second;
        } else {
          return this.second;
        }
      }
    },
  },
};
</script>

<style>
@import url("./css/icon.css");

.main-list {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  /* height: 36rpx; */ /* Input 高度 */
  color: #333333;
  padding: 40rpx 32rpx;
  margin: 32rpx 0;
}
.img {
  width: 32rpx;
  height: 32rpx;
  font-size: 32rpx;
}
.main-input {
  flex: 1;
  text-align: left;
  font-size: 28rpx;
  /* line-height: 100rpx; */
  padding-right: 10rpx;
  margin-left: 20rpx;
}
.vercode {
  color: rgba(0, 0, 0, 0.7);
  font-size: 24rpx;
  /* line-height: 100rpx; */
}
.vercode-run {
  color: rgba(0, 0, 0, 0.4) !important;
}
.oBorder {
  border: none;
  border-radius: 2.5rem;
  -webkit-box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, 0.1);
  box-shadow: 0 0 60rpx 0 rgba(43, 86, 112, 0.1);
}
</style>