fashion-ssr-vue3/components/common/footer/consult.vue

<script lang='ts' setup>
// import { useUserStore } from '@/stores/modules/user'
import { submitSubscribeApi } from '~/api/model/common'

// const userStore = useUserStore()
// const { isLogin } = storeToRefs(userStore)
const form = ref<any>({
  mail: '',
})
async function submitSubscribe() {
  try {
    await submitSubscribeApi(form.value)
    ElMessage.success(`You've subscribed successfully.`)
    form.value.mail = ''
  }
  catch (error) {
    console.log(error)
  }
}
const validateEmail = computed(() => {
  const emailReg = /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/
  if (!form.value.mail)
    return true
  return emailReg.test(form.value.mail)
})
</script>

<template>
  <div class="p-40px pb-0 pt-58px mb-216px pr-150px w-1400px mx-auto bg-#F8F5F3">
    <div class="flex justify-between pos-relative">
      <div class="w-620px">
        <div class="text-#999999 mb-10px">
          QUALITY WHOLESALE
        </div>
        <h2 class="text-40px fw-600 lh-56px text-#333 !mb-30px custom-title-font">
          Subscribe for Exclusive Wholesale Offers and Updates!
        </h2>
        <div class="pos-relative w-500px">
          <el-input v-model.trim="form.mail" class="custom-input h-50px  " placeholder="Enter your email here" />
          <el-button :disabled="!validateEmail || !form.mail" type="primary" class="!bg-#fff pos-absolute top-50% transform-translate-y--50% right-10px w-140px !h-40px !text-16px !b-rd-150px" @click="submitSubscribe">
            Subscribe
          </el-button>
        </div>
        <div v-if="!validateEmail" class="text-red mt-4px">
          Please enter a valid email address.
        </div>
      </div>
      <div class="flex items-end">
        <img src="@/assets/images/footer_consult.png" class="w-450px h-250px" alt="" srcset="">
      </div>
    </div>
  </div>
</template>

<style lang='less' scoped>
.consult-item{
  &::before{
    position: absolute;
    content: "";
    bottom:  10%;
    top:  10%;
    right: 0px;
    width: 1px;
    background: #5B463E;
  }
  &:last-child::before{
    display: none;
  }
}
::v-deep(.custom-input){
  .el-input__wrapper{
    border-radius:4px!important;
    padding-left: 20px!important;
    color: #999;
    font-size: 16px;
    box-shadow: unset!important;
  }
}
</style>