dlearn-front/pages/account/profile.vue

<template>
  <div class="flex justify-between flex-col text-[#383E43]">
    <div class="relative">
      <img
        v-if="profileImage"
        :src="profileImage"
        class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
        alt="profile"
      />
      <img
        v-else
        src="/public/images/alt.png"
        class="w-[40.256vw] md:w-[8.177vw] h-[40.256vw] md:h-[8.177vw] rounded-[50%]"
        alt="profile"
      />
      <label for="file-upload" class="custom-file-upload">
        <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>
      </label>
      <input type="file" id="file-upload" @change="changePhoto" />
    </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="data?.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="data?.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="data?.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="data?.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>
const profileName = useState('profileName')
const profileImage = useState('profileImage')
import { useToast } from "vue-toastification";
const toast = useToast();
const { authUser } = useAuth();
const loading = ref(false);
const {data, refresh} = await useFetch('/api/auth/me')

const edit = async (formData) => {

  if (formData.name !== authUser.value.name) {
    profileName.value = formData.name
  }

  try {
    loading.value = true;
    await $fetch("/api/user/update", {
      method: "PUT",
      body: formData,
    });
    toast.success('اطلاعات با موفقیت ویرایش شد')
    refresh()
  //  location.reload();
  } catch (error) {
    toast.error(error);
  } finally {
    loading.value = false;
  }
};
//const token = getCookie(event, 'token');
async function changePhoto(val) {

  const formData = new FormData();
  formData.append("directoryName", "test");
  formData.append("file", val.target.files[0]);

  const data = await useFetch("/api/uploader", {
    method: "POST",
    body: formData,
  });

  if (data.data.value.url) {
    console.log('done');
    await $fetch("/api/user/update", {
        method: "PUT",
        body: {
          avatarMedia: data.data.value.url
        },
      });
      profileImage.value = data.data.value.url
      toast.success('تصویر پروفایل تغییر کرد')
 
  }
}


</script>

<style scoped>
input[type="file"] {
  display: none;
}

.custom-file-upload {
  cursor: pointer;
}
</style>