dlearn-front/pages/[product]/index.vue

<template>
  <div class="flex items-center flex-col pb-[30vw] md:pb-[7vw]">
    <product-page-course-detailsHeader :props="data.course" />
    <div
      class="flex flex-col flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-[81.04%] mt-[10vw] md:mt-[4.7vw]"
    >
      <div
        class="w-full md:w-[56.354vw] text-[#383E43] text-[3.59vw] md:text-[1.055vw] leading-[5.897vw] md:leading-[1.582vw]"
      >
        <product-page-course-detailsDescription :props="data.course" />
        test
        <product-page-course-detailsHeadlines :props="data.course" />

        <!-- <product-page-course-detailsComments :props="data.comments" /> -->
        <div
          class="flex items-center gap-[3vw] md:gap-[0.7vw] mt-[12vw] md:mt-[6.3vw] mb-[6vw] md:mb-[2.1vw]"
        >
          <svg
            class="w-[1.538vw] md:w-[0.521vw] h-[8.462vw] md:h-[2.76vw]"
            viewBox="0 0 10 53"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M0 5C0 2.23858 2.23858 0 5 0H10V53H5C2.23858 53 0 50.7614 0 48V5Z"
              fill="#0D3F40"
            />
          </svg>
          <span class="text-[4.544vw] md:text-[1.481vw] font-semibold"
            >نظرات</span
          >
        </div>

        <!-- comment 1 -->
        <div
          v-for="item in data.comments"
          :key="item.id"
          class="mt-[1vw] relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between p-[4vw] md:p-[1.55vw]"
        >
          <img
            src="/public/images/client1.png"
            alt="profile"
            class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
          />

          <div class="ps-[3vw] md:ps-[1vw] w-full">
            <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
              علی مصلحی
            </p>
            <div class="thin">
              <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
                1402/09/14
              </p>
              <p
                class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
              >
                {{ item.text }}
              </p>
            </div>

            <div
              v-for="reply in item.replies"
              :key="reply.id"
              class="relative bg-[#F8F8F8] rounded-[3.846vw] md:rounded-[0.781vw] flex justify-between ps-[16vw] md:ps-[6vw] p-[2vw] md:p-[1.55vw]"
            >
              <img
                src="/public/images/client3.png"
                alt="profile"
                class="w-[10.256vw] md:w-[3.958vw] h-[10.256vw] md:h-[3.958vw] rounded-[50%]"
              />

              <div class="ps-[3vw] md:ps-[1vw] w-full">
                <p class="text-[3.59vw] md:text-[0.938vw] text-[#383E43]">
                  علی مصلحی
                </p>
                <div class="thin">
                  <p class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
                    1402/09/14
                  </p>
                  <p
                    class="w-[98%] text-[3.19vw] md:text-[0.833vw] text-[#383E43] leading-[4.785vw] md:leading-[1.25vw] mt-[2vw] md:mt-[0.5vw]"
                  >
                 {{ reply.text }}
                  </p>
                </div>
              </div>

              <!-- <svg
                @click="sendReplay(reply.id)"
                class="cursor-pointer absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
                viewBox="0 0 24 24"
                fill="none"
                xmlns="http://www.w3.org/2000/svg"
              >
                <path
                  d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
                  stroke="#383E43"
                  stroke-width="1.5"
                  stroke-miterlimit="10"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
                <path
                  d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
                  stroke="#383E43"
                  stroke-width="1.5"
                  stroke-linecap="round"
                  stroke-linejoin="round"
                />
              </svg> -->
            </div>



       
          </div>

          <svg
            @click="sendReplay(item.id)"
            class="cursor-pointer absolute md:left-[2vw] left-[5vw] h-[4.615vw] w-[4.615vw] md:h-[1.25vw] md:w-[1.25vw]"
            viewBox="0 0 24 24"
            fill="none"
            xmlns="http://www.w3.org/2000/svg"
          >
            <path
              d="M7.12988 18.3101H15.1299C17.8899 18.3101 20.1299 16.0701 20.1299 13.3101C20.1299 10.5501 17.8899 8.31006 15.1299 8.31006H4.12988"
              stroke="#383E43"
              stroke-width="1.5"
              stroke-miterlimit="10"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
            <path
              d="M6.43012 10.8099L3.87012 8.24994L6.43012 5.68994"
              stroke="#383E43"
              stroke-width="1.5"
              stroke-linecap="round"
              stroke-linejoin="round"
            />
          </svg>
        </div>
      </div>
      <div class="w-full md:w-[23.438vw] text-[#383E43]">
        <product-page-course-detailsCourse-status :props="data.course" />
        <product-page-course-detailsCourse-information :props="data.course" />
      </div>
    </div>

    <div
      class="w-[63.438vw] bg-[#F8F8F8] p-[4vw] md:p-[1vw] rounded-[3.846vw] md:rounded-[0.781vw] mt-[6vw] md:mt-[2vw]"
    >
      <div class="space-y-[5vw] md:space-y-[1vw]">
        <div class="flex gap-[1vw]">
          <img
            src="/public/images/client1.png"
            alt=""
            class="h-[10.256vw0] md:h-[3.385vw] w-[10.256vw] md:w-[3.385vw] rounded-[50%]"
          />
          <div
            class="space-y-[4vw] mt-[1vw] md:mt-0 ms-[1vw] md:ms-0 md:space-y-0"
          >
            <p class="text-[3.59vw] md:text-[0.938vw]">علی مصلحی</p>
            <p
              v-if="replayTarget === null"
              class="text-[2.836vw] md:text-[0.741vw] text-[#878787]"
            >
              پرسش جدید
            </p>
            <p v-else class="text-[2.836vw] md:text-[0.741vw] text-[#878787]">
              پاسخ به علی مصلحی
            </p>
          </div>
        </div>
        <textarea
          v-model="comment"
          class="h-[50vw] md:h-[18vw] w-full rounded-[3.846vw] md:rounded-[0.781vw] p-[1vw]"
          name=""
          id=""
          cols="30"
          rows="10"
        ></textarea>
        <div
          class="flex justify-end gap-[1vw] text-[3.19vw] md:text-[0.833vw] text-white"
        >
          <button
            @click="deleteComment"
            class="h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-[#5A6268]"
          >
            حذف
          </button>
          <button
            @click="sendComment"
            class="cursor-pointer h-[8.974vw] md:h-[2.292vw] w-[20.769vw] md:w-[5.573vw] rounded-[2.051vw] md:rounded-[0.521vw] bg-primaryGreen"
          >
            ثبت
          </button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useToast } from "vue-toastification";
const toast = useToast();
const route = useRoute();
const replayTarget = ref(null);
const { data, refresh } = await useFetch("/api/productId", {
  method: "POST",
  body: {
    id: route.params.product,
  },
});
console.log(data.value.comments[0]);
const comment = ref(null);

const sendComment = async () => {
  if (comment.value === "" || comment.value === null) {
    return toast.error("متن خود را وارد کنید");
  }
  const comments = await useFetch("/api/comments/sendcomment", {
    method: "POST",
    query: {
      id: data.value.course._id,
    },
    body: {
      text: comment.value,
      parent: replayTarget.value,
    },
  });
  comment.value = null;
  toast.success("نظر شما با موفقیت ثبت شد");
  refresh();
};

const sendReplay = (id) => {
  replayTarget.value = id;
};
const deleteComment = () => {
  replayTarget.value = null;
  comment.value = null;
};
</script>