fashion-ssr-vue3/components/business/contact/form.vue

<!-- @format -->

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

const ruleFormRef = ref<FormInstance>()
const formInfo = ref<any>({
  name: '',
  mail: '',
  subjects: '',
  mobileAreaCode: '+86',
  mobile: '',
  message: '',
  country: undefined,
})
const mobileAreaCodeList = ref()
const countryList = ref()
const rules = ref<FormRules>({
  name: [
    {
      required: false,
      message: 'FirstName must be filled in',
      trigger: 'blur',
    },
  ],
  mail: [
    {
      required: false,
      message: 'email must be filled in',
      trigger: 'blur',
    },
    {
      pattern: /^[^\s@]+@[^\s@]+\.[^\s@]+$/,
      message: 'Please enter a valid email.',
    },
  ],
  subjects: [
    {
      required: false,
      message: 'subjects must be filled in',
      trigger: 'blur',
    },
  ],
  mobile: [
    {
      required: false,
      message: 'mobile must be filled in',
      trigger: 'blur',
    },
  ],
  message: [
    {
      required: false,
      message: 'message must be filled in',
      trigger: 'blur',
    },
  ],
  country: [
    {
      required: false,
      message: 'country must be selected',
      trigger: 'change',
    },
  ],
})
async function submitInfo(formEl: FormInstance | undefined) {
  if (!formEl)
    return
  await formEl.validate(async (valid) => {
    if (valid) {
      await consultingServiceApi(formInfo.value)
      ElMessage.success('You have been submitted successfully!')
      formEl.resetFields()
    }
    else {
      console.log('error submit!')
    }
  })
}
async function getMobileAreaCodeList() {
  const list = await getDictListApi('A064')
  mobileAreaCodeList.value = list
}
async function getCountryList() {
  const list = await getDictListApi('A070')
  countryList.value = list
}
getMobileAreaCodeList()
getCountryList()
</script>

<template>
  <div class="py-80px bg-#F9FAFB">
    <div class="w-1200-auto">
      <h2 class="text-36px text-center fw-800 ls-2 text-#333 custom-title-font">
        Submit Your Product <span class="custom-title-bg !pb-0">Needs</span>
      </h2>
      <div class="text-22px lh-40px text-#999 text-center mt-30px">
        7th Floor, Tianbo International Building, 55 Jiangdong
      </div>
      <div class="text-22px lh-40px text-#999 text-center mb-60px">
        Middle Road, Yiwu, Zhejiang, China
      </div>
      <div class="form w-550px m-auto">
        <el-form
          ref="ruleFormRef"
          class="custom-form-item"
          :rules="rules"
          :model="formInfo"
        >
          <el-form-item label="Name" prop="name">
            <el-input
              v-model="formInfo.name"
              placeholder="Please enter your name"
              class="h-40px item-input !b-rd-10px"
            />
          </el-form-item>
          <el-form-item label="Email" prop="mail">
            <el-input
              v-model="formInfo.mail"
              placeholder="Please enter your email"
              class="h-40px item-input !b-rd-10px"
            />
          </el-form-item>
          <el-form-item label="Subjects" prop="subjects">
            <el-input
              v-model="formInfo.subjects"
              placeholder="Please enter your subjects"
              class="h-40px item-input !b-rd-10px"
            />
          </el-form-item>
          <el-form-item label="Country" prop="country" class="custom-form-item">
            <el-select
              v-model="formInfo.country"
              placeholder="Please enter your country"
            >
              <el-option
                v-for="(item, index) in countryList"
                :key="index"
                :value="item.value"
                :label="`${item.label}`"
              >
                {{ item.label }}
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="Phone number" prop="mobile">
            <!-- <el-input
              v-model="formInfo.mobile"
              placeholder="Please enter your Phone number"
              class="h-40px item-input !b-rd-10px"
            /> -->
            <el-input
              v-model="formInfo.mobile"
              class="h-40px item-input !b-rd-10px"
              placeholder="Please enter your Phone number"
            >
              <template #prepend>
                <el-select
                  v-model="formInfo.mobileAreaCode"
                  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="Message" prop="message" class="!mb-60px">
            <el-input
              v-model="formInfo.message"
              type="textarea"
              :rows="4"
              placeholder="Please enter information"
              class="!b-rd-10px"
            />
          </el-form-item>
          <el-form-item>
            <el-button
              class="!w-full !h-50px !text-16px !fw-500 !b-rd-300px !bg-#9B6CFF !text-#fff"
              @click="submitInfo(ruleFormRef)"
            >
              Submit
            </el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="less" scoped>
:deep(.custom-form-item) {
  .el-form-item__label {
    margin-bottom: 10px;
    font-size: 16px !important;
    font-weight: bold;
    color: #333 !important;
  }
  .el-form-item {
    display: block !important;
    margin-bottom: 34px;
    &:last-child {
      margin-bottom: 0px !important;
    }
    .el-form-item__content {
      .el-textarea {
        .el-textarea__inner {
          height: 100px !important;
        }
      }
      .el-select {
        .el-select__wrapper {
          box-shadow: none !important;
          height: 40px !important;
          border-radius: 10px !important;
        }
      }
      .item-input {
        .el-input-group__prepend{
          box-shadow: none !important;
          border-radius: 10px !important;
        }
        .el-input__wrapper {
          box-shadow: none !important;
          border-radius: 10px !important;
        }
      }
      .el-textarea {
        .el-textarea__inner {
          box-shadow: none !important;
          border-radius: 10px !important;
        }
      }
    }
  }
}
</style>