ylrz_his_scrm_companyUI/src/components/H5/h5-form.vue

<template>
  <div :class="config.classText.join(' ')">
    <div class="form-container">
      <!-- 第一行：图片 -->
      <div v-if="config.showImage" class="form-image-row">
        <img v-if="config.formImage" :src="config.formImage" class="form-image" />
      </div>

      <!-- 第二行：手机号输入框 -->
      <div class="form-input-row">
        <input 
          type="tel" 
          class="form-input phone-input" 
          placeholder="请输入手机号"
          v-model="phoneNumber"
        />
      </div>

      <!-- 第三行：验证码输入框 + 获取验证码按钮 -->
      <div class="form-code-row">
        <input 
          type="text" 
          class="form-input code-input" 
          placeholder="请输入验证码"
          v-model="verifyCode"
        />
        <button class="get-code-btn" @click="getVerifyCode">
          {{ verifyCodeBtnText }}
        </button>
      </div>

      <!-- 第四行：提交按钮 -->
      <div v-if="config.showSubmitBtn" class="form-submit-row">
        <!-- 文字+背景色样式 -->
        <button 
          v-if="config.submitBtnStyle === 'text'"
          class="submit-btn text-style"
          :style="{ backgroundColor: config.submitBtnColor }"
        >
          {{ config.submitBtnText }}
        </button>
        <!-- 图片样式 -->
        <img 
          v-else-if="config.submitBtnStyle === 'image'"
          :src="config.submitBtnImage || require('@/assets/images/link-button.gif')"
          class="submit-btn image-style"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'h5-form',
  props: {
    config: {
      type: Object,
      default: () => {
        return {
          classText: ['parent-div'],
          showImage: true,
          formImage: '',
          showSubmitBtn: true,
          submitBtnStyle: 'text', // 'text' 或 'image'
          submitBtnColor: '#409EFF',
          submitBtnText: '提交',
          submitBtnImage: ''
        }
      }
    }
  },
  data() {
    return {
      phoneNumber: '',
      verifyCode: '',
      countdownTime: 0,
      verifyCodeBtnText: '获取验证码'
    }
  },
  methods: {
    getVerifyCode() {
      if (!this.phoneNumber) {
        this.$message.warning('请先输入手机号');
        return;
      }
      // 启动倒计时
      this.countdownTime = 60;
      this.updateButtonText();
    },
    updateButtonText() {
      if (this.countdownTime > 0) {
        this.verifyCodeBtnText = `${this.countdownTime}s`;
        this.countdownTime--;
        setTimeout(() => {
          this.updateButtonText();
        }, 1000);
      } else {
        this.verifyCodeBtnText = '获取验证码';
      }
    }
  }
}
</script>

<style src="./css/base.css"></style>
<style lang="scss" scoped>
.form-container {
  width: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.active {
  border-color: #02ff9b;
}

.form-image-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

.form-image {
  max-width: 100%;
  height: auto;
  max-height: 150px;
  border-radius: 4px;
}

.form-input-row,
.form-code-row {
  width: 100%;
  display: flex;
  gap: 8px;
}

.form-code-row {
  justify-content: space-between;
}

.form-input {
  border: 1px solid #DCDFE6;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 14px;
  color: #303133;
  
  &::placeholder {
    color: #909399;
  }

  &:focus {
    outline: none;
    border-color: #409EFF;
    box-shadow: 0 0 0 2px rgba(64, 158, 255, 0.2);
  }
}

.phone-input {
  width: 100%;
}

.code-input {
  flex: 1;
  min-width: 150px;
}

.get-code-btn {
  padding: 10px 16px;
  border: 1px solid #409EFF;
  background-color: #fff;
  color: #409EFF;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.3s ease;
  white-space: nowrap;

  &:hover {
    background-color: #F0F9FF;
  }

  &:active {
    background-color: #E6F2FF;
  }
}

.form-submit-row {
  width: 100%;
  display: flex;
  justify-content: center;
  margin-top: 8px;
}

.submit-btn {
  border: none;
  border-radius: 20px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s ease;
  width: calc(100% - 32px);

  &.text-style {
    padding: 12px 48px;
    color: #fff;
    font-weight: 600;

    &:hover {
      opacity: 0.9;
    }

    &:active {
      opacity: 0.8;
    }
  }

  &.image-style {
    max-width: 100%;
    height: auto;
    max-height: 60px;
    object-fit: contain;
    width: auto;

    &:hover {
      opacity: 0.9;
    }
  }
}
</style>