print-package-H5/pages/apply-inspection/index.vue

<template>
  <view class="form">
    <uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="申请验厂"></uni-nav-bar>
    <view class="divider"></view>
    <view class="justify-between group">
      <view class="flex-row">
        <text class="text_1">*</text>
        <text class="text_2">手机号</text>
      </view>
      <qn-easyinput
        :maxlength="11"
        v-model="form.mobile"
        :inputBorder="false"
        text="right"
        type="number"
        placeholderStyle="fontSize: 28rpx"
        placeholder="请输入手机号"
      ></qn-easyinput>
    </view>
    <view class="divider"></view>
    <view class="justify-between group">
      <view class="flex-row">
        <text class="text_1">*</text>
        <text class="text_2">验证码</text>
        <view>
          <view v-show="timer > 0" class="timer_area">
            <text class="timer">{{ `(${timer}S后) ` }}</text>
            <text class="timer_text">重新获取</text>
          </view>
          <text v-show="timer <= 0" class="code" @click="getCode">获取验证码</text>
        </view>
      </view>
      <qn-easyinput
        :maxlength="6"
        v-model="form.captcha"
        :inputBorder="false"
        text="right"
        type="number"
        placeholderStyle=" fontSize: 28rpx"
        placeholder="请输入验证码"
      ></qn-easyinput>
    </view>
    <view class="divider"></view>
    <view class="justify-between group">
      <view class="flex-row">
        <text class="text_1">*</text>
        <text class="text_2">用户名</text>
      </view>
      <qn-easyinput
        :maxlength="20"
        v-model="form.userName"
        :inputBorder="false"
        text="right"
        placeholderStyle=" fontSize: 28rpx"
        placeholder="请输入用户名"
      ></qn-easyinput>
    </view>
    <view class="divider"></view>
    <view class="justify-between group">
      <view class="flex-row">
        <text class="text_1">*</text>
        <text class="text_2">企业名</text>
      </view>
      <qn-easyinput
        :maxlength="20"
        v-model="form.enterpriseName"
        :inputBorder="false"
        text="right"
        placeholderStyle=" fontSize: 28rpx"
        placeholder="请输入企业名"
      ></qn-easyinput>
    </view>
    <view class="divider"></view>
    <qn-footer fixed>
      <view class="flex-col items-center text-wrapper_1" @click="apply">
        <text>提交申请</text>
      </view>
    </qn-footer>
  </view>
</template>

<script>
import { validateField } from '@/utils/index.js'
import { getAuthCaptcha } from '@/apis/commonApi.js'
import { userApplying } from '@/apis/factoryApi.js'
import { codePurpose, verificationType } from '@/enums/index.js'
import { back } from '@/utils/hook.js'
const validateFields = [
  {
    name: 'userName',
    rules: [{ required: true, message: '请输入用户名' }]
  },
  {
    name: 'mobile',
    rules: [
      { required: true, message: '请输入手机号' },
      { type: 'phone', message: '请输入正确的手机号' }
    ]
  },
  {
    name: 'captcha',
    rules: [{ required: true, message: '请输入验证码' }]
  },
  {
    name: 'enterpriseName',
    rules: [{ required: true, message: '请输入企业名' }]
  }
]

export default {
  data() {
    return {
      form: {
        userName: '',
        mobile: '',
        enterpriseName: '',
        captcha: ''
      },
      factoryId: '',
      timer: 0
    }
  },
  methods: {
    back,
    // 申请验厂
    apply() {
      for (let field of validateFields) {
        const { name, rules } = field
        const value = this.form[name]
        const { isValid, msg } = validateField(value, rules)
        if (!isValid) {
          uni.showToast({
            title: msg,
            icon: 'none'
          })
          return
        }
      }
      userApplying({
        ...this.form
      }).then((res) => {
        if (res) {
          uni.showModal({
            title: '申请已发出，请联系该企业管理员通过审核',
            icon: 'success',
            success: () => {
              back()
            }
          })
        }
      })
    },
    // 获取验证码
    getCode() {
      let rules = [
        { required: true, message: '请输入手机号' },
        { type: 'phone', message: '请输入正确的手机号' }
      ]
      const { isValid, msg } = validateField(this.form.mobile, rules)
      if (!isValid) {
        uni.showToast({
          title: msg,
          icon: 'none'
        })
        return
      }
      this.countdown()
      getAuthCaptcha({
        purpose: codePurpose.CERTIFICATION,
        verifiableAccount: this.form.mobile,
        verifiableAccountType: verificationType.PHONE
      }).then(() => {
        uni.showToast({
          title: '验证码已发送',
          icon: 'none'
        })
      })
    },
    // 倒计时
    countdown() {
      this.timer = 60
      let timer = setInterval(() => {
        this.timer--
        if (this.timer <= 0) {
          clearInterval(timer)
        }
      }, 1000)
    }
  }
}
</script>

<style lang="scss" scoped>
.form {
  width: 750rpx;
  background-color: #fff;
}
.text-wrapper_1 {
  margin: 0 32rpx;
  padding: 23rpx 0;
  background-color: rgb(0, 122, 255);
  border-radius: 10rpx;
  color: rgb(255, 255, 255);
}
.timer_area {
  width: auto;
  flex: 0 0 auto;
  margin-left: 16rpx;
  .timer {
    font-size: 28rpx;
    color: #007aff;
  }
  .timer_text {
    font-size: 28rpx;
    color: #999999;
  }
}
.code {
  margin-left: 16rpx;
  width: 160rpx;
  font-size: 28rpx;
  color: #007aff;
  flex: 0 0 auto;
}
.group {
  padding: 24rpx 28rpx 24rpx 32rpx;
  font-size: 28rpx;
  line-height: 40rpx;
  white-space: nowrap;
  .text_3 {
    color: rgb(0, 122, 255);
  }
  .text_1 {
    color: rgb(245, 34, 45);
  }
  .text_2 {
    margin-left: 4rpx;
    color: rgb(0, 0, 0);
  }
}
.divider {
  margin: 0 28rpx;
  background-color: rgb(216, 216, 216);
  height: 2rpx;
}
</style>