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

<script lang='ts' setup>
import useLoginAndDownload from '../../useLoginAndDownload'
import { useUserStore } from '@/stores/modules/user'

const { onSubmitRequest } = useLoginAndDownload()
const { userInfo } = storeToRefs(useUserStore())
const userName = computed(() => {
  return (userInfo.value?.firstName || userInfo.value?.lastName) ? `${userInfo.value?.firstName} ${userInfo.value?.lastName}` : 'EJET Spark'
})
</script>

<template>
  <div>
    <div class="custom-title-font text-24px fw-800 text-#333 mb-10px">
      Submit Catalog Request
    </div>
    <div class="text-14px text-#1A1A1A lh-22px mb-22px">
      You are requesting the catalog with your EJET Spark account below.
    </div>
    <div class="flex flex-col gap-20px">
      <div class="flex py-15px px-35px b-rd-10px b-#D8D8D b-1px b-solid cursor-pointer hover:b-#9B6CFF">
        <!-- 获取首字母 -->
        <div class="w-50px h-50px bg-#F2E5F2 text-#9B6CFF text-24px flex justify-center b-rd-50% items-center mr-28px">
          {{ userName.charAt(0) }}
        </div>
        <div>
          <div class="text-18px fw-bold text-#333 custom-title-font">
            {{ userName }}
          </div>
          <div class="text-#9B6CFF mt-8px">
            {{ userInfo?.email }}
          </div>
        </div>
      </div>
    </div>
    <el-button
      class="!w-full !h-50px mt-24px !text-16px !fw-500 !b-rd-10px !bg-#9B6CFF !text-#fff"
      @click="onSubmitRequest"
    >
      Request Catalog
    </el-button>
  </div>
</template>

<style lang='less' scoped>
::v-deep(.login-input) {
   .el-input__wrapper{
    border-radius: 10px;
   }
}
</style>