fashion-ssr-vue3/components/common/loginAndDownload/comp/info/index.vue

<!-- @format -->

<script lang="ts" setup>
import type { FormInstance, FormRules } from 'element-plus'
import useLoginAndDownload from '../../useLoginAndDownload'
import { getDictListApi } from '~/api/model/common'

const { formInfo, visible, setSubmitInfo } = useLoginAndDownload()
const ruleFormRef = ref<FormInstance>()
const annualPurchaseAmountList = ref()
const mobileAreaCodeList = ref()
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',
    },
  ],
  mobile: [
    {
      required: true,
      message: 'Mobile must be filled in',
      trigger: 'blur',
    },
  ],
  type: [
    {
      required: true,
      message: 'Mobile must be filled in',
      trigger: 'blur',
    },
  ],
  companyName: [
    {
      required: true,
      message: 'CompanyName must be filled in',
      trigger: 'change',
    },
  ],
  annualPurchaseAmount: [
    {
      required: true,
      message: 'AnnualPurchaseAmount must be selected',
      trigger: 'change',
    },
  ],
})

async function getMobileAreaCodeList() {
  const list = await getDictListApi('A064')
  mobileAreaCodeList.value = list
}
async function getAnnualPurchaseAmountList() {
  const list = await getDictListApi('A072')
  annualPurchaseAmountList.value = list
}
getMobileAreaCodeList()
getAnnualPurchaseAmountList()
</script>

<template>
  <div>
    <div
      class="custom-title-font text-24px fw-800 text-#333 mb-10px flex items-center"
    >
      Fill in Your Information
    </div>
    <div class="text-14px text-#1A1A1A lh-22px mb-20px">
      We need some basic information to create your account.
    </div>
    <el-form ref="ruleFormRef" :rules="rules" :model="formInfo">
      <div class="flex">
        <el-form-item
          class="custom-form-item custom-form-item-hidden-label mr-20px"
          label=""
          prop="firstName"
        >
          <el-input
            v-model="formInfo.firstName"
            placeholder="* First Name"
            class="h-50px"
          />
        </el-form-item>
        <el-form-item
          class="custom-form-item custom-form-item-hidden-label mr-12px"
          label=""
          prop="lastName"
        >
          <el-input
            v-model="formInfo.lastName"
            placeholder="* Last Name"
            class="h-50px"
          />
        </el-form-item>
      </div>

      <el-form-item label="" class="custom-form-item" prop="mobile">
        <el-input
          v-model="formInfo.mobile"
          placeholder="Phone number"
          class="h-50px custom-inner-input"
        >
          <template #prepend>
            <el-select
              v-model="formInfo.mobileAreaCode"
              class="!h-50px !lh-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="" class="custom-form-item" prop="type">
        <el-select v-model="formInfo.type" placeholder="* Needs">
          <el-option
            class="!h-50px !lh-50px"
            label="Just browing"
            value="browing"
          />
          <el-option
            class="!h-50px !lh-50px"
            label="Find suppliers"
            value="suppliers"
          />
        </el-select>
      </el-form-item>

      <el-form-item
        v-if="visible"
        label=""
        class="custom-form-item"
        prop="companyName"
      >
        <el-input
          v-model="formInfo.companyName"
          placeholder="Company name"
          class="h-50px"
        />
      </el-form-item>
      <el-form-item
        v-if="visible"
        label=""
        prop="annualPurchaseAmount"
        class="custom-form-item"
      >
        <el-select
          v-model="formInfo.annualPurchaseAmount"
          placeholder="* Sourcing Budget "
        >
          <el-option
            v-for="(item, index) in annualPurchaseAmountList"
            :key="index"
            class="!h-50px !lh-50px"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item v-if="visible" label="" class="custom-form-item">
        <el-input
          v-model="formInfo.mark"
          type="textarea"
          placeholder="Describe your needs"
          :rows="4"
        />
      </el-form-item>

      <el-form-item>
        <el-button
          class="!w-full !h-50px mb-50px !text-16px !fw-500 !b-rd-10px !bg-#9B6CFF !text-#fff"
          @click="setSubmitInfo(ruleFormRef)"
        >
          Download Catalog
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
::v-deep(.login-input) {
  &.error-txt {
    .el-input__wrapper {
      border: 1px solid red !important;
    }
  }
  .el-input__wrapper {
    border-radius: 10px;
  }
}
:deep(.custom-form-item) {
  margin-bottom: 24px;
  display: block !important;
  .el-form-item__content {
    justify-content: space-between;
    .el-input {
      .el-input__wrapper {
        border-radius: 10px;
      }
      .el-input-group__prepend {
        border-top-left-radius: 10px;
        border-bottom-left-radius: 10px;
        .el-select {
          .el-select__wrapper {
            height: 50px !important;
            background-color: #fff !important;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            &:hover {
              border: 1px solid #9b6cff !important;
            }
          }
        }
      }

      &.custom-inner-input {
        .el-input__wrapper {
          border-top-left-radius: 0px;
          border-bottom-left-radius: 0px;
        }
        .el-select {
          .el-select__wrapper {
            height: 50px !important;
            background-color: #fff !important;
            border-top-left-radius: 10px;
            border-bottom-left-radius: 10px;
            border-top-right-radius: 0px !important;
            border-bottom-right-radius: 0px !important;
          }
        }
      }
    }
    .el-select {
      .el-select__wrapper {
        height: 50px !important;
        background-color: #fff !important;
        border-radius: 10px;
        &.is-focused {
          box-shadow: none !important;
          border: 1px solid #9b6cff !important;
        }
        &:hover {
          box-shadow: none !important;
          border: 1px solid #9b6cff !important;
        }
      }
    }
    .el-textarea{
      .el-textarea__inner{
        border-radius: 10px;
        &:focus {
          box-shadow: none !important;
          border: 1px solid #9b6cff !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: 100%;
    &:last-child {
      .el-form-item__label-wrap {
        opacity: 0;
      }
    }
  }
}
</style>