dlearn-front/pages/account/profile.vue

<template>
  <div class="flex justify-between flex-col text-[#383E43]">
    <div class="relative">
      <img
        src="/public/images/client3.png"
        class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
        alt=""
      />
      <svg
        class="h-[10.769vw] md:h-[2.188vw] w-[10.769vw] md:w-[2.188vw] absolute -bottom-[0.2vw] right-[4vw] md:right-[0.7vw]"
        viewBox="0 0 42 42"
        fill="none"
        xmlns="http://www.w3.org/2000/svg"
      >
        <circle cx="21" cy="21" r="21" fill="#0D3F40" />
        <path
          d="M10.167 19.9167V17.75C10.167 13.9583 12.3337 12.3333 15.5837 12.3333H26.417C29.667 12.3333 31.8337 13.9583 31.8337 17.75V24.25C31.8337 28.0417 29.667 29.6667 26.417 29.6667H21.0003"
          stroke="white"
          stroke-width="2"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M21.0003 23.7083C22.4961 23.7083 23.7087 22.4958 23.7087 21C23.7087 19.5042 22.4961 18.2917 21.0003 18.2917C19.5046 18.2917 18.292 19.5042 18.292 21C18.292 22.4958 19.5046 23.7083 21.0003 23.7083Z"
          stroke="white"
          stroke-width="2"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M28.042 18.2917V23.7083"
          stroke="white"
          stroke-width="2"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M10.167 24.7917H15.952C16.6454 24.7917 17.2087 25.355 17.2087 26.0483V27.435"
          stroke="white"
          stroke-width="1.5"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M11.4886 23.47L10.167 24.7917L11.4886 26.1133"
          stroke="white"
          stroke-width="1.5"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M17.2087 30.5117H11.4236C10.7303 30.5117 10.167 29.9483 10.167 29.255V27.8683"
          stroke="white"
          stroke-width="1.5"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
        <path
          d="M15.8887 31.8337L17.2103 30.512L15.8887 29.1903"
          stroke="white"
          stroke-width="1.5"
          stroke-miterlimit="10"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </svg>
    </div>
    <FormKit type="form" @submit="edit" :incomplete-message="false" :actions="false">
    <div class="relative items-center gap-[5vw] md:gap-0 grid grid-cols-1 md:grid-cols-2 mt-[2vw] w-full md:w-[65%]">
      <div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
        <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">شماره موبایل</label>
        <input type="text" name="name"
         :value="authUser?.phone"
         readonly
         class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
        />
      </div>
      <div class="flex flex-col space-y-[0.2vw] mb-[0.5vw]">
        <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]"
          >نام و نام خانوادگی</label
        >
        <FormKit
        name="name"
        :value="authUser?.name"
          type="text"
          input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
        />
      </div>
      <div class="flex flex-col space-y-[0.2vw]">
        <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">نام کاربری</label>
        <FormKit
        name="userName"
        :value="authUser?.userName"
          type="text"
          input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
        />
      </div>
      <div class="flex flex-col space-y-[0.2vw]">
        <label for="" class="text-[3.19vw] md:text-[0.833vw] font-[400]">ایمیل</label>
        <FormKit
        name="email"
        :value="authUser?.email"
          type="text"
          input-class="bg-[#F5F5F5] h-[13.59vw] md:h-[2.969vw] w-full md:w-[19.01vw] rounded-[2.564vw] md:rounded-[0.521vw] px-[1vw]"
        />
      </div>
      <FormKit
      input-class="
      text-[3.59vw] md:text-[0.833vw] absolute md:left-[1vw] top-[80vw] md:top-[11vw] greenButton h-[13.59vw]
      md:h-[2.813vw] w-full md:w-[8.438vw] rounded-[2.564vw] md:rounded-[0.521vw] flexBox px-0
      "
      type="submit">
        ویرایش
    </FormKit>
    </div>
    </FormKit>
  </div>
</template>


<script setup>
import { useToast } from 'vue-toastification'
const toast = useToast()
const { authUser } = useAuth();
const loading = ref(false)

const edit = async(formData) => {
    try {
        loading.value = true;
        await $fetch('/api/user/update', {
            method: 'PUT',
            body: formData
        })
         location.reload()
      } catch (error) {
     toast.error(error)
    } finally {
        loading.value = false;
    }
}

</script>