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

<template>
  <div class="flex w-full flex-col pb-[30vw] md:pb-[7vw]">
    <template>
      <div class="flex items-center flex-col pb-[25vw] md:pb-[6vw]">
        <div
          class="flex flex-col gap-[1vw] flex-col-reverse md:flex-row justify-between w-[87.69%] md:w-full mt-[8.2vw]"
        >
          <div
            class="w-full md:w-[56.354vw] text-[#383E43] text-[1.055vw] leading-[1.582vw]"
          >
    
    
       <product-page-attended-coursesVideo />
       <product-page-attended-coursesDownload-box />
       <product-page-attended-coursesChats />
    
      
        
        
        </div>
    
          <div class="w-full md:w-[23.438vw]">
            

            <div
            class="mt-[82vw] md:mt-[4.6vw] min-h-[87.692vw] md:min-h-[29.635vw] rounded-[3.846vw] md:rounded-[0.781vw] bg-[#F8F8F8] pinkShadow space-y-[2vw] thin"
          >
            <div class="flexBox w-full flex-col text-[0.938vw] text-[#878787]">
              <label
              v-for="item in data.course.courseHeadlines" :key="item.id"
                class="h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
              >
                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
                  <input type="radio" class="accent-primaryGreen" />
                 {{ item.headline }}
                </div>
                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
                  02:24
                  <svg
                    class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
                    viewBox="0 0 19 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clip-path="url(#clip0_1_896)">
                      <path
                        d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
                        stroke="#383E43"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
                        stroke="#383E43"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1_896">
                        <rect
                          width="19"
                          height="19"
                          fill="white"
                          transform="translate(0 0.5)"
                        />
                      </clipPath>
                    </defs>
                  </svg>
                </div>
              </label>
        
              <!-- <label
                class="bg-[#FDF4FB] h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
              >
                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
                  <input
                    type="radio"
                    checked="checked"
                    class="accent-primaryGreen"
                  />
                  آشنایی با ساختار صفحات
                </div>
                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
                  08:44
                  <svg
                    class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
                    viewBox="0 0 19 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clip-path="url(#clip0_1_896)">
                      <path
                        d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
                        stroke="#383E43"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
                        stroke="#383E43"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1_896">
                        <rect
                          width="19"
                          height="19"
                          fill="white"
                          transform="translate(0 0.5)"
                        />
                      </clipPath>
                    </defs>
                  </svg>
                </div>
              </label>
        
              <label
                class="h-[14.615vw] md:h-[3.125vw] px-[3vw] md:px-[1.25vw] text-[3.59vw] md:text-[0.833vw] w-full flex justify-between"
              >
                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
                  <input type="radio" class="accent-primaryGreen" />
                  تگ های Heading
                </div>
                <div class="flexBox gap-[1vw] md:gap-[0.3vw]">
                  07:41
                  <svg
                    class="h-[4.359vw] w-[4.359vw] md:h-[0.99vw] md:w-[0.99vw]"
                    viewBox="0 0 19 20"
                    fill="none"
                    xmlns="http://www.w3.org/2000/svg"
                  >
                    <g clip-path="url(#clip0_1_896)">
                      <path
                        d="M17.4166 10C17.4166 14.37 13.8699 17.9167 9.49992 17.9167C5.12992 17.9167 1.58325 14.37 1.58325 10C1.58325 5.63001 5.12992 2.08334 9.49992 2.08334C13.8699 2.08334 17.4166 5.63001 17.4166 10Z"
                        stroke="#383E43"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                      <path
                        d="M12.437 12.5175L9.98286 11.0529C9.55536 10.7996 9.20703 10.19 9.20703 9.69124V6.4454"
                        stroke="#383E43"
                        stroke-width="1.5"
                        stroke-linecap="round"
                        stroke-linejoin="round"
                      />
                    </g>
                    <defs>
                      <clipPath id="clip0_1_896">
                        <rect
                          width="19"
                          height="19"
                          fill="white"
                          transform="translate(0 0.5)"
                        />
                      </clipPath>
                    </defs>
                  </svg>
                </div>
              </label> -->
            </div>
          </div> 











            <product-page-attended-coursesProgress-bar />
    
    
          </div>
        </div>
      </div>
    </template>
    
  </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,
  },
});
const courseHeadline = await useFetch("/api/courseHeadlines", {
method: 'POST',
  query: {
    id: route.params.product
  }
})

console.log(courseHeadline.data.value);
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>