fashion-ssr-vue3/components/business/register/stepOne.vue

<!-- @format -->

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import DragVerify from '~/components/common/drag-verify/index.vue'
import { useRegister } from '~/pages/register/useRegister'
import { getDictListApi } from '~/api/model/common'
import { passwordRegular } from '~/enums/regEnum'

const { params, register, backStep } = useRegister()

const mobileAreaCodeList = ref()
const ruleFormRef = ref<FormInstance>()
const rules = ref<FormRules>({
  firstName: [
    {
      required: true,
      message: 'FirstName must be filled in',
      trigger: 'blur',
    },
  ],
  lastName: [
    {
      required: true,
      message: 'LastName must be filled in',
      trigger: 'blur',
    },
  ],
  email: [
    { required: true, message: 'Email must be filled in', trigger: 'blur' },
    {
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: 'please fill in correct email',
    },
  ],
  mobile: [
    {
      required: true,
      message: 'Mobile must be filled in',
      trigger: 'blur',
    },
  ],
  password: [
    {
      required: true,
      trigger: 'change',
      validator: (rule, value, callback) => {
        if (value) {
          if (passwordRegular.test(value))
            callback()
          else
            callback(new Error('Please enter password that matches the rules'))
        }

        else { callback(new Error('Password must be filled in')) }
      },
    },
  ],
  checked: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value)
          callback()
        else callback(new Error('Please check the agreement'))
      },
    },
  ],
  isUnlock: [
    {
      required: true,
      validator: (rule, value, callback) => {
        if (value)
          callback()
        else callback(new Error('Please slide to verity'))
      },
    },
  ],
})
async function getMobileAreaCodeList() {
  const list = await getDictListApi('A064')
  mobileAreaCodeList.value = list
}
async function submitForm(formEl: FormInstance | undefined) {
  if (!formEl)
    return
  await formEl.validate((valid, fields) => {
    if (valid)
      register()
    else
      console.log('error submit!', fields)
  })
}
getMobileAreaCodeList()
</script>

<template>
  <div>
    <div class="fw-500 mb-24px text-40px text-#000">
      Personal
    </div>
    <el-form
      ref="ruleFormRef"
      :model="params"
      :rules="rules"
      label-width="auto"
      size="default"
      status-icon
    >
      <div class="flex">
        <el-form-item
          class="custom-form-item custom-form-item-hidden-label mr-12px"
          label="Full Name"
          prop="firstName"
        >
          <el-input v-model="params.firstName" placeholder="Full Name" class="h-50px" />
        </el-form-item>
        <el-form-item
          class="custom-form-item custom-form-item-hidden-label mr-12px"
          label="Last Name"
          prop="lastName"
        >
          <el-input v-model="params.lastName" placeholder="Last Name" class="h-50px" />
        </el-form-item>
      </div>
      <el-form-item
        label="Email"
        class="custom-form-item     "
        prop="email"
      >
        <el-input v-model="params.email" placeholder="Email" class="h-50px" />
      </el-form-item>
      <el-form-item
        label="Mobile Number"
        class="custom-form-item"
        prop="mobile"
      >
        <el-input v-model="params.mobile" placeholder="Mobile Number" class="h-50px">
          <template #prepend>
            <el-select v-model="params.mobileAreaCode" class="!h-50px" placeholder="Select" style="width: 120px">
              <el-option
                v-for="(item, index) in mobileAreaCodeList"
                :key="index"
                :value="item.value"
                :label="`${item.value} ${item.label}`"
              >
                {{ item.value }} {{ item.label }}
              </el-option>
            </el-select>
          </template>
        </el-input>
      </el-form-item>
      <el-form-item
        label="Create Password"
        class="custom-form-item"
        prop="password"
      >
        <el-popover
          placement="right"
          :width="270"
          class="!text-#5B463E !text-16px"
          trigger="hover"
          content="6-20 characters, contain letters numbers or symbols only"
        >
          <template #reference>
            <el-input v-model="params.password" :show-password="true" placeholder="Password" class="h-50px" />
          </template>
        </el-popover>
      </el-form-item>
      <el-form-item label="Verity" class="custom-form-item !mb-12px" prop="isUnlock">
        <DragVerify
          v-model:value="params.isUnlock"
          start-text="please slide to verify"
        />
      </el-form-item>
      <el-form-item label="" class="custom-form-item" prop="checked">
        <el-checkbox v-model="params.checked">
          I agree to the
        </el-checkbox>
        <span class="text-16px text-#CC9879 cursor-pointer">《Terms & Conditions》
        </span>
        <a href="/policy"> <span class="text-16px text-#CC9879 cursor-pointer"> Privacy Policy
        </span></a>.
      </el-form-item>
      <el-form-item class="custom-form-item">
        <el-button
          class="!bg-#fff !text-#5B463E !w-48% !h-50px !text-18px !fw-500 !b-rd-6px b-#5B463E"
          @click="backStep"
        >
          Back
        </el-button>
        <el-button
          class="!bg-#C58C64 !text-#fff !ml-0 !w-48% !h-50px !text-18px !fw-500 !b-rd-6px"
          @click="submitForm(ruleFormRef)"
        >
          Next
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
:deep(.custom-form-item) {
  margin-bottom: 22px;
  display: block !important;
  .el-form-item__content{
    justify-content: space-between;
    .el-input{
      .el-select{
        .el-select__wrapper{
          height: 50px!important;
          background-color: #fff!important;
        }
      }
    }
  }

  .el-form-item__label-wrap {
     margin-left: unset!important;
     .el-form-item__label {
        margin-bottom: 5px;
        font-size: 16px !important;
        color: #5b463e !important;
      }
    }
  &.custom-form-item-hidden-label {
    width: 270px;
    &:last-child {
      .el-form-item__label-wrap {
        opacity: 0;
      }
    }
  }
}
</style>