laboratory_maintenance_app/common/betone_components/betone-new-input.vue

<template>
  <view
    @click="type == 'select' && $emit('arrow', true)"
    class="sp-new-input-wrap"
  >
    <view class="label">
      <text v-if="isRequire" class="is-require">*</text>
      {{ label }}
    </view>
    <view class="sp-new-input" v-if="type == 'textarea'" style="padding:16rpx">
      <u-input
        v-model="v"
        @input="ch"
        :placeholder="placeholder"
        :type="type"
        :class="{ 'sp-new-input-diabled': disabled }"
        :height="height"
        :disabled="disabled"
      ></u-input>
    </view>

    <view class="sp-new-input" v-else>
      <u-icon
        class="sp-new-input-icon"
        v-if="icon"
        :name="icon ? icon : ''"
        color="rgba(190,190,190,1)"
        size="38"
      ></u-icon>

      <u-input
        v-model="v"
        @input="ch"
        :placeholder="placeholder"
        :type="type !== 'password' ? 'text' : type"
        :clearable="false"
        :class="{ 'sp-new-input-diabled': disabled }"
        :maxlength="maxlength"
        :disabled="disabled"
      ></u-input>
      <view class="wrap sms" v-if="isSms">
        <u-toast ref="uToast"></u-toast>
        <u-verification-code
          :seconds="seconds"
          @end="end"
          @start="start"
          ref="uCode"
          @change="codeChange"
        ></u-verification-code>
        <span class="btn-txt" @click="getCode">{{ tips }}</span>
      </view>
    </view>

    <view
      v-if="type == 'select'"
      class="arrow"
      @click="$emit('arrow', true)"
    ></view>
    <view class="sub">
      <slot name="sub"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: "spInput",
  props: {
    label: {
      type: String,
      default: "",
    },
    value: {
      type: String,
      default: "",
    },
    placeholder: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: "text",
    },
    // 是否开启短信验证
    isSms: {
      type: Boolean,
      default: false,
    },

    isRequire: {
      type: Boolean,
      default: false,
    },
    maxlength: {
      type: Number,
      default: -1,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    icon: {
      type: String,
      default: "",
    },
    height: {
      type: Number,
      default: 100,
    },
  },
  data() {
    return {
      v: this.value,
      ele: false,
      getSmsFlg: 0,
      smsTimer: null,
      smsTxt: "获取验证码",
      smsTxtr: "重新发送",
      isCountdown: true,
      tips: "",
      seconds: 10,
    };
  },
  watch: {
    value(v) {
      this.v = v;
    },
  },
  computed: {},
  mounted() {},
  methods: {
    // 发送验证码逻辑
    codeChange(text) {
      this.tips = text;
    },
    getCode() {
      if (this.$refs.uCode.canGetCode) {
        // 模拟向后端请求验证码
        uni.showLoading({
          title: "正在获取验证码",
        });
        setTimeout(() => {
          uni.hideLoading();
          // 这里此提示会被this.start()方法中的提示覆盖
          uni.$u.toast("验证码已发送");
          this.$emit("ch");
          // 通知验证码组件内部开始倒计时
          this.$refs.uCode.start();
        }, 2000);
      } else {
        uni.$u.toast("倒计时结束后再发送");
      }
    },
    end() {
      // uni.$u.toast("倒计时结束");
    },
    start() {
      // uni.$u.toast("倒计时开始");
    },
    // 数据改变
    ch(e) {
      this.$emit("changevalue", e);
    },
  },
  model: {
    prop: "value",
    event: "changevalue",
  },

  destroyed() {
    clearInterval(this.smsTimer);
  },
};
</script>

<style>
</style>