冲突

src/api/kecheng.ts

@@ -56,7 +56,7 @@ export const study_record = (data: any) => {
     data,
   });
 };
-//添加学习记录
+//加入课程
 export const join = (data: any) => {
   return request({
     url: "/join_course/join",
@@ -64,3 +64,27 @@ export const join = (data: any) => {
     data,
   });
 };
+//加入课程
+export const delect = (data: any) => {
+  return request({
+    url: "/comment/del",
+    method: "post",
+    data,
+  });
+};
+//删除收藏
+export const collectdel = (data: any) => {
+  return request({
+    url: "/collect/del",
+    method: "post",
+    data,
+  });
+};
+//点赞
+export const like = (data: any) => {
+  return request({
+    url: "course_video/like",
+    method: "post",
+    data,
+  });
+};

src/components/Banne/index.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="block text-center">
-    <el-carousel height="500px" arrow="never">
+    <el-carousel  arrow="never">
       <el-carousel-item
         v-for="(item, index) in props.banneImageList"
         :key="index"

src/components/corporation.vue

@@ -3,7 +3,7 @@
   <div class="bgbox">
     <div class="title">{{ title }}</div>
     <div v-if="info" class="info">{{ info }}</div>
-    <div class="box">
+    <div class="box" v-if="ing == 0">
       <img
         class="item"
         v-for="(item, idx) in list"
@@ -12,6 +12,11 @@
         alt=""
       />
     </div>
+    <div v-else class="box">
+      <div class="imgbox">
+        <div class="bo" @mouseover="changeBackground"></div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -29,10 +34,74 @@ const props = defineProps({
   list: {
     default: [],
   },
+  ing: {
+    default: "",
+  },
 });
+const changeBackground = ()=>{
+
+}
 </script>
 
 <style lang="scss" scoped>
+// @keyframes ball {
+//   0% {
+//     bottom: 0;
+//     left: 0;
+//     width: 580px;
+//     height: 320px;
+//     position: absolute;
+//   }
+//   100% {
+//     top: 0;
+//     left: 0;
+//     width: 580px;
+//     height: 600px;
+//     position: absolute;
+//   }
+// }
+.bo {
+  width: 580px;
+  height: 320px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.8) 0%,
+    #ffffff 30%,
+    #ffffff 100%
+  );
+  border-radius: 14px;
+  backdrop-filter: blur(10px);
+  position: absolute;
+  bottom: 0px;
+  left: 0;
+  // animation-name: ball;
+  // animation-duration: 4s;
+}
+.bo:hover {
+  width: 580px;
+  height: 600px;
+  background: linear-gradient(
+    180deg,
+    rgba(255, 255, 255, 0.8) 0%,
+    #ffffff 30%,
+    #ffffff 100%
+  );
+  border-radius: 14px;
+  backdrop-filter: blur(10px);
+  transition: all 1s;
+  // top: 0px;
+  // left: 0;
+  transform: translateY(-0%); /* 使用transform进行微调 */
+}
+.imgbox {
+  background: url("../assets/images/price_bg2.png");
+  width: 580px;
+  height: 600px;
+  background-size: 100%;
+  overflow: hidden;
+  position: relative;
+  border-radius: 14px;
+}
 .info {
   font-family: PingFangSC, PingFang SC;
   font-weight: 400;

src/components/row/row.vue

@@ -1,10 +1,10 @@
 <script setup name="CommentRow" lang="ts">
 import { computed, onMounted, ref } from "vue";
+import { ElMessage } from "element-plus";
 
 // import { placeholderPic } from "~/utils/util";
 //评论接口
-// import * as commentApi from "~/api/comment";
-// import * as gatherApi from "~/api/gather";
+import * as commentApi from "../../api/kecheng";
 import {
   ArrowLeft,
   LocationFilled,
@@ -58,61 +58,67 @@ const Props = defineProps({
     type: Number,
     default: "1",
   },
-  user_id: {
+  time: {
     type: Number,
-    default: "1",
+    default: "",
   },
-  time: {
+  course_id: {
     type: Number,
     default: "",
   },
+  video_id: {
+    type: Number,
+    default: "",
+  },
+  reply_id: {
+    type: Number,
+    default: "",
+  },
+  reply_p_id: {
+    type: Number,
+    default: "",
+  },
+  dialogVisible: {
+    default: false,
+  },
 });
 
 // 是否有回复
 const existReply = computed(() => !!Props.reply);
 const dialogVisible = ref(false);
-const replace = () => {
-  dialogVisible.value = true;
-};
-//回复
+dialogVisible.value = Props.dialogVisible;
 const emit = defineEmits(["todetails"], ["like"]);
 const todetails = () => {
   emit("list");
 };
-const textarea = ref();
+const text = ref("");
+const replace = () => {
+  dialogVisible.value = true;
+};
+//回复
+
 const replace1 = async () => {
   try {
-    const { data } = await commentApi.collect({
-      source_type: Props.source_type,
-      source_id: Props.source_id,
-      content: textarea.value,
-      parent_id: Props.parent_id,
+    const { data } = await commentApi.comment({
+      comment_type: 1,
+      reply_id: Props.reply_id,
+      content: text.value,
+      course_id: Props.course_id,
+      video_id: Props.video_id,
+      reply_p_id: Props.reply_p_id,
     });
     dialogVisible.value = false;
-    todetails();
-  } catch (error) {}
-};
-//点赞
-const like = async (id) => {
-  try {
-    const { msg } = await gatherApi.like({
-      source_type: "comment",
-      source_id: Props.parent_id,
-    });
-    ElMessage({
-      message: msg,
-      type: "success",
-    });
+    text.value = "";
     todetails();
   } catch (error) {
-    console.log("error", error);
+    console.log(error);
   }
 };
 const delectshow = ref(false);
 const dele = async (id) => {
   try {
-    const { msg } = await gatherApi.delect({
-      id: Props.parent_id,
+    const { msg } = await commentApi.delect({
+      id: Props.reply_id,
     });
     ElMessage({
       message: "删除成功",
@@ -125,50 +131,33 @@ const dele = async (id) => {
   }
 };
 const userid = ref();
-// userid.value = JSON.parse(localStorage.getItem("USER_STORE"));
-userid.value = 2;
-
-const delect = () => {};
+userid.value = JSON.parse(localStorage.getItem("USER_STORE"));
 </script>
 
 <template>
   <div class="comment-row-container flex-row">
     <div class="comment-row-avatar">
-      <img
-        class="circle"
-        :src="Props.avatar"
-        style="width: 40px; height: 40px"
-        alt=""
-      />
+      <img class="circle" :src="Props.avatar" alt="" />
     </div>
     <div class="comment-row-main">
       <div class="comment-row-main__header flex-row flex-aic">
         <div class="namebox flex-row flex-aic">
           <span class="crcuname">{{ name }}</span>
           <template v-if="existReply">
-            <span>回复</span>
-            <a class="crconame">@{{ reply }}</a>
+            <span class="replayname">回复</span>
+            <a class="crconame" style="color: rgba(13, 15, 255, 1)"
+              >@{{ reply }}:</a
+            >
           </template>
+          <p v-if="existReply" class="comment-row-main__descs replycomment">
+            {{ descs }}
+          </p>
         </div>
         <!-- <div class="timebox"> {{ Props.crateTime }}</div> -->
       </div>
-      <p class="comment-row-main__descs">{{ descs }}</p>
+      <p v-if="existReply == ''" class="comment-row-main__descs">{{ descs }}</p>
+      <div class="martop"></div>
       <ul class="comment-row-main__footer flex-row">
-        <!-- <li @click="like(Props.id)">
-          <SvgIcon
-            name="like"
-            :size="22"
-            :rgap="2"
-            :color="Props.is_like == 1 ? '#00b0b0' : '#999999'"
-          />
-          <span :style="{ color: Props.is_like == 1 ? '#00b0b0' : '#999999' }"
-            >赞</span
-          >
-          <span
-            :style="{ color: Props.is_like == 1 ? '#00b0b0' : '#999999' }"
-            >{{ Props.like_count }}</span
-          >
-        </li> -->
         <li>
           <SvgIcon name="message" :size="22" :rgap="2" color="#888888" />
           <span>发布于{{ time }}</span>
@@ -177,49 +166,164 @@ const delect = () => {};
           <SvgIcon name="message" :size="22" :rgap="2" color="#888888" />
           <span>回复</span>
         </li>
-        <li @click="delectshow = true">
-          <!-- v-if="Props.author_id == userid.id || Props.user_id == userid.id" -->
+        <li
+          @click="delectshow = true"
+          v-if="Props.author_id == userid.id || Props.user_id == userid.id"
+        >
           <span>删除</span>
         </li>
       </ul>
+      <div class="textara" v-if="dialogVisible == true">
+        <el-input
+          v-model="text"
+          :rows="4"
+          type="textarea"
+          placeholder="请输入评论内容…"
+        />
+        <div
+          @click="replace1"
+          class="buttona"
+          :style="{
+            background:
+              text == '' ? 'rgba(13, 15, 255, 0.3)' : 'rgba(13, 15, 255, 1)',
+          }"
+        >
+          评论
+        </div>
+      </div>
     </div>
   </div>
-  <!-- 回复窗口 -->
-  <el-dialog v-model="dialogVisible" title="回复" width="500">
-    <div>
-      <el-input
-        v-model="textarea"
-        :rows="3"
-        type="textarea"
-        placeholder="请输入"
-      />
-    </div>
-    <div style="display: flex; justify-content: end; margin-top: 20px">
-      <div class="btn" @click="replace1">回复</div>
-    </div>
-  </el-dialog>
-  <el-dialog v-model="delectshow" width="354">
-    <div
-      style="
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-      "
-    >
-      <el-icon color="rgba(246, 177, 19, 1)" :size="34" class="no-inherit">
-        <WarningFilled />
-      </el-icon>
-      <div style="margin-top: 16px" class="changeadd">确定要删除吗？</div>
-      <div style="display: flex; margin-top: 26px">
-        <div class="cancel" @click="delectshow = false">取消</div>
-        <div class="confirm" @click="dele">确定</div>
+  <!-- 删除窗口 -->
+  <div class="box" v-if="delectshow" @click="delectshow = false">
+    <div class="delebox" @click.stop="delectshow = true">
+      <div class="delefont">删除评论</div>
+      <div class="delecontent">删除评论后，评论下所有回复都会被删除,是否继续?</div>
+      <div style="display: flex;align-items: center;justify-content: space-between;">
+        <div class="qu" @click.stop="delectshow = false">取消</div>
+        <div class="delec" @click.stop="dele">删除</div>
       </div>
+      <img @click.stop="delectshow = false" class="closeimg" src="" alt="" />
     </div>
-  </el-dialog>
+  </div>
 </template>
 
 <style lang="scss" scoped>
+.box {
+  background: rgba(0, 0, 0, 0.4);
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 1900;
+  width: 1920px;
+  height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  .qu {
+    width: 134px;
+    height: 38px;
+    border-radius: 4px;
+    border: 1px solid #979797;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #222222;
+    line-height: 38px;
+    text-align: center;
+    font-style: normal;
+    cursor: pointer;
+  }
+  .delec {
+    width: 134px;
+    height: 38px;
+    background: #0d0fff;
+    border-radius: 4px;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #ffffff;
+    line-height: 38px;
+    text-align: center;
+    font-style: normal;
+    cursor: pointer;
+  }
+  .delefont {
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 600;
+    font-size: 16px;
+    color: #222222;
+    line-height: 22px;
+    text-align: center;
+    font-style: normal;
+  }
+  .delecontent {
+    padding: 0 18px;
+    box-sizing: border-box;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 400;
+    font-size: 14px;
+    color: #585e6b;
+    line-height: 20px;
+    text-align: center;
+    font-style: normal;
+    margin-top: 20px;
+    margin-bottom: 34px;
+  }
+  .delebox {
+    width: 340px;
+    height: 220px;
+    background: #ffffff;
+    border-radius: 6px;
+    margin: 0 auto;
+    z-index: 2000;
+    position: relative;
+    padding: 36px 24px 30px;
+    box-sizing: border-box;
+  }
+  .closeimg {
+    width: 26px;
+    height: 26px;
+    position: absolute;
+    right: 20px;
+    top: 20px;
+    cursor: pointer;
+  }
+}
+.martop {
+  margin-top: 24px;
+}
+.replycomment {
+  margin: 8px 10px !important;
+}
+.replayname {
+  margin: 0 6px;
+}
+.circle {
+  width: 40px;
+  height: 40px;
+  border-radius: 50%;
+}
+.buttona {
+  width: 56px;
+  height: 32px;
+  // background: rgba(13, 15, 255, 0.3);
+  border-radius: 3px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 32px;
+  text-align: center;
+  font-style: normal;
+  position: absolute;
+  right: 16px;
+  bottom: 10px;
+  cursor: pointer;
+}
+.textara {
+  margin-top: 6px;
+  position: relative;
+}
 .confirm {
   width: 78px;
   height: 36px;
@@ -298,7 +402,14 @@ const delect = () => {};
     }
 
     &__descs {
-      margin: 8px 0;
+      margin: 16px 0;
+      font-family: PingFangSC, PingFang SC;
+      font-weight: 400;
+      font-size: 14px;
+      color: #222222;
+      line-height: 20px;
+      text-align: left;
+      font-style: normal;
     }
 
     &__footer {

src/view/Home/product.vue

@@ -57,6 +57,7 @@
     :info="tabbar.info.enhancement_package_content"
     v-if="index == 3"
     :list="tabbar.newlist"
+    :ing="0"
   ></corporation>
   <!-- 管理平台 -->
   <application :titleinfo="tabbar.info.scene_content" :image="tabbar.info.scene_image" style="background: #ffffff" v-if="index == 3"></application>
@@ -66,6 +67,7 @@
     v-if="index != 3"
     title="客户案例"
     :list="tabbar.customerlist"
+    :ing="1"
   ></corporation>
   <bottom></bottom>
 </template>

src/view/Login/index.vue

@@ -131,6 +131,7 @@ const __topic__ = async () => {
     });
     localStorage.setItem("access_token", JSON.stringify(data.token));
     localStorage.setItem("userInfo", JSON.stringify(data));
+    localStorage.setItem("USER_STORE", JSON.stringify(data));
   } catch (error) {}
 };
 //登录

src/view/video/course.vue

@@ -55,18 +55,143 @@
               <div>第{{ index + 1 }}课 {{ child.title }}</div>
               <div class="tim">{{ child.duration }}</div>
             </div>
-            <div
-              v-if="child.study_record && child.study_record.is_complete == 0"
-            >
-              <div class="jifen">{{ child.points }}积分</div>
+            <div style="display: flex; align-items: center">
+              <div
+                v-if="child.study_record && child.study_record.is_complete == 0"
+              >
+                <div
+                  class="jifen"
+                  style="
+                    background: #1fb759;
+                    display: flex;
+                    align-items: center;
+                  "
+                >
+                  <img
+                    class="smallimg"
+                    src="../../assets/images/yes.png"
+                    alt=""
+                  />
+                  {{ child.points }}积分
+                </div>
+              </div>
+              <div class="jifen" v-else>可获得{{ child.points }}积分</div>
+              <div class="lineab"></div>
+              <div
+                class="late"
+                v-if="child.study_record && child.study_record.is_complete == 0"
+              >
+                已学习
+              </div>
+              <div
+                v-else-if="
+                  child.study_record &&
+                  child.study_record.is_complete == 1 &&
+                  child.id == videodetail.detail.new_record.video_id
+                "
+                class="late"
+              >
+                最近学习
+              </div>
+              <img
+                v-if="child.study_record && child.study_record.is_complete == 0"
+                class="smallimg"
+                src="../../assets/images/complete.png"
+                alt=""
+              />
+              <img
+                v-else-if="
+                  child.study_record &&
+                  child.study_record.is_complete == 1 &&
+                  child.id == videodetail.detail.new_record.video_id
+                "
+                class="smallimg"
+                src="../../assets/images/lately.png"
+                alt=""
+              />
+              <img
+                v-else
+                class="smallimg"
+                src="../../assets/images/uncompleted.png"
+                alt=""
+              />
             </div>
-            <div class="jifen" v-else>可获得{{ child.points }}积分</div>
           </div>
         </div>
       </div>
     </div>
     <!-- 评论 -->
-    <div class="content"></div>
+    <div class="content">
+      <div class="course" v-if="active == 1">
+        <div v-if="islogin">
+          <div class="bigtitle">评论</div>
+          <div>
+            <el-input
+              v-model="textarea"
+              :rows="2"
+              type="textarea"
+              placeholder="请输入评论内容…"
+            />
+          </div>
+          <div class="bluebtn" @click="comment">发布评论</div>
+          <div class="comment-list">
+            <dl v-for="(item, idx) in commentList.list" :key="idx">
+              <dt>
+                <row
+                  :name="item.member.nickname"
+                  :key="idx"
+                  reply=""
+                  :descs="item.content"
+                  :time="item.created_at"
+                  :course_id="route.query.id"
+                  video_id=""
+                  :author_id="item.member.id"
+                  :avatar="item.member.avatar"
+                  @list="comment_list"
+                  :reply_id="item.id"
+                  :reply_p_id="item.id"
+                ></row>
+              </dt>
+              <dd v-for="(child, index) in item.reply" :key="index">
+                <row
+                  :name="child.member.nickname"
+                  :reply="child.reply_member.nickname"
+                  :descs="child.content"
+                  :course_id="route.query.id"
+                  video_id=""
+                  :author_id="child.member.id"
+                  :avatar="child.member.avatar"
+                  @list="comment_list"
+                  :time="child.created_at"
+                  :reply_id="child.id"
+                  :reply_p_id="child.reply_p_id"
+                ></row>
+              </dd>
+            </dl>
+          </div>
+          <div>
+            <el-pagination
+              background
+              layout="prev, pager, next"
+              :total="total"
+              @size-change="handleSizeChange"
+              @current-change="handleCurrentChange"
+              :page-size="5"
+            />
+          </div>
+        </div>
+        <div v-else>
+          <div class="bigtitle">评论</div>
+          <div
+            style="display: flex; flex-direction: column; align-items: center"
+          >
+            <img class="suo" src="../../assets/images/suo.png" alt="" />
+            <div class="login">登录后才能查看评论</div>
+            <div class="log">立即登录</div>
+          </div>
+        </div>
+      </div>
+    </div>
     <!-- 定位 -->
     <div class="fix">
       <div class="img">
@@ -84,7 +209,18 @@
             :show-text="false"
           />
         </div>
-        <div class="button" v-if="is_join == 0" @click="videoinfo">继续学习</div>
+        <div
+          class="button"
+          v-if="is_join == 0"
+          @click="
+            videoinfo(
+              videodetail.detail.new_record.video_id,
+              videodetail.detail.new_record.duration
+            )
+          "
+        >
+          继续学习
+        </div>
         <div class="button" v-else @click="join">加入课程</div>
         <div class="updata" v-if="videodetail.detail.updated_at">
           最后更新时间：{{ videodetail.detail.updated_at.slice(0, 10) }}
@@ -92,7 +228,7 @@
         <div class="linea"></div>
         <div class="share">
           <img class="image" src="../../assets/images/share.png" alt="" />
-          <div class="font">分享</div>
+          <div class="font" @click="shareLink">分享</div>
         </div>
       </div>
     </div>
@@ -103,6 +239,7 @@
 import { useRouter, useRoute } from "vue-router";
 import { onMounted, ref, reactive } from "vue";
 import * as videoAPi from "../../api/kecheng";
+import row from "../../components/row/row.vue";
 const router = useRouter();
 const route = useRoute();
 //判断是否加入
@@ -117,20 +254,77 @@ if (localStorage.getItem("access_token")) {
 const videodetail = reactive({
   detail: {},
 });
+const commentList = reactive({
+  list: [],
+});
 //进度条
 const percentage = ref(0);
 const read = ref(0);
 const all = ref(0);
+const total = ref(0);
+const page = ref(1);
+//评论列表
+const comment_list = async () => {
+  try {
+    const { data } = await videoAPi.comment_list({
+      course_id: route.query.id,
+      page: page.value,
+      limit: 5,
+    });
+    commentList.list = data.data;
+    total.value = data.total;
+  } catch (error) {}
+};
+onMounted(comment_list);
+//输入框内容
+const textarea = ref("");
+//评论
+const comment = async () => {
+  try {
+    const { data } = await videoAPi.comment({
+      comment_type: 0,
+      reply_id: "",
+      content: textarea.value,
+      video_id: "",
+      course_id: route.query.id,
+    });
+    textarea.value = "";
+    comment_list();
+  } catch (error) {}
+};
+const handleSizeChange = (val) => {
+  console.log(`${val} items per page`);
+};
+const handleCurrentChange = (val) => {
+  page.value = val;
+  comment_list();
+  console.log(`current page: ${val}`);
+};
 //加入课程
 const join = async () => {
   try {
     const { data } = await videoAPi.details({
       course_id: route.query.id,
     });
-    is_join.value = 0
+    is_join.value = 0;
   } catch (error) {}
 };
-//继续学习
+//分享
+const url = ref();
+const shareLink = async () => {
+  url.value =
+    "https://www.yixiangvr.com/web/#/course?" +
+    "id=" +
+    route.query.id +
+    "&read=" +
+    0;
+  try {
+    await navigator.clipboard.writeText(url.value);
+    alert("链接已复制到剪贴板");
+  } catch (err) {
+    alert("复制链接失败");
+  }
+};
 
 //课程详情
 const details = async () => {
@@ -169,17 +363,100 @@ const tabs = (idx) => {
   active.value = idx;
 };
 const customColor = ref("#409eff");
-const videoinfo = (id) => {
+const videoinfo = (id, time) => {
   router.push({
     name: "info",
     query: {
       id: id,
+      time: time || 0,
     },
   });
 };
 </script>
 
 <style lang="scss" scoped>
+// .lefta {
+//   width: 820px;
+//   // height: 968px;
+//   background: #ffffff;
+//   padding: 40px 30px 78px;
+//   box-sizing: border-box;
+.bigtitle {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 30px;
+  color: #222222;
+  line-height: 42px;
+  text-align: left;
+  font-style: normal;
+  margin-bottom: 22px;
+}
+.bluebtn {
+  width: 98px;
+  height: 40px;
+  background: #0d0fff;
+  border-radius: 4px;
+  margin-top: 24px;
+  margin-bottom: 30px;
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 500;
+  font-size: 14px;
+  color: #ffffff;
+  line-height: 40px;
+  text-align: center;
+  font-style: normal;
+  cursor: pointer;
+}
+// }
+.comment {
+  &-list {
+    dl {
+      margin-bottom: 16px;
+    }
+
+    dt {
+      margin-bottom: 25px;
+    }
+
+    dd {
+      margin-bottom: 20px;
+      margin-inline-start: 56px;
+    }
+
+    &-more {
+      display: inline-block;
+      line-height: 30px;
+      font-size: 15px;
+      font-weight: 400;
+      padding: 0 10px;
+      color: #444444;
+      background: #f4f4f4;
+      user-select: none;
+      cursor: pointer;
+
+      .el-icon {
+        vertical-align: middle;
+      }
+    }
+  }
+}
+.late {
+  font-family: PingFangSC, PingFang SC;
+  font-weight: 400;
+  font-size: 12px;
+  color: #333333;
+  line-height: 17px;
+  text-align: center;
+  font-style: normal;
+  margin-right: 6px;
+}
+.lineab {
+  width: 1px;
+  height: 17px;
+  background: #979797;
+  opacity: 0.2;
+  margin: 0 16px;
+}
 .review {
   width: 820px;
   //   height: 796px;
@@ -216,6 +493,11 @@ const videoinfo = (id) => {
   width: 286px;
   margin-top: 30px;
 }
+.smallimg {
+  width: 10px;
+  height: 10px;
+  margin-right: 4px;
+}
 .jifen {
   width: 88px;
   height: 24px;
@@ -226,8 +508,9 @@ const videoinfo = (id) => {
   font-size: 12px;
   color: #ffffff;
   line-height: 24px;
-  text-align: center;
-  font-style: normal;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 .fix {
   position: absolute;

src/view/video/info.vue

@@ -16,20 +16,24 @@
           @ended="onVideoEnded"
           :src="videoinfo.info.url"
           @timeupdate="timeUpdate"
+          :initial-time="timeStamp"
+          @play="time"
         ></video>
         <!-- </div> -->
         <div class="like">
-          <div class="flex">
-            <img class="image" src="../../assets/images/like.png" alt="" />
-            <span class="number">{{ videoinfo.info.like_num }}</span>
+          <div class="flex" @click="like" style="cursor: pointer;">
+            <img v-if="is_like==1" class="image" src="../../assets/images/like.png" alt="" />
+            <img v-else class="image" src="../../assets/images/likea.png" alt="" />
+            <span :style="{color:is_like==0?'rgba(0, 83, 255, 1)':''}" class="number">{{ videoinfo.info.like_num }}</span>
           </div>
-          <div class="flex left">
-            <img class="image" src="../../assets/images/Collect.png" alt="" />
-            <span class="number">{{ videoinfo.info.collect_num }}</span>
+          <div class="flex left" @click="collect" style="cursor: pointer;">
+            <img v-if="is_collect==1" class="image" src="../../assets/images/Collect.png" alt="" />
+            <img v-else class="image" src="../../assets/images/collecta.png" alt="" />
+            <span :style="{color:is_collect==0?'rgba(254, 198, 64, 1)':''}" class="number">{{ videoinfo.info.collect_num }}</span>
           </div>
-          <div class="flex left">
+          <div class="flex left" style="cursor: pointer;">
             <img class="image" src="../../assets/images/mission.png" alt="" />
-            <span class="number">分享</span>
+            <span class="number" @click="shareLink">分享</span>
           </div>
         </div>
       </div>
@@ -48,7 +52,10 @@
               />
             </div>
             <div class="bluebtn" @click="comment">发布评论</div>
-            <div class="comment-list">
+            <div
+              class="comment-list"
+              v-if="JSON.stringify(videoinfo.info) != '{}'"
+            >
               <dl v-for="(item, idx) in commentList.list" :key="idx">
                 <dt>
                   <row
@@ -57,6 +64,13 @@
                     reply=""
                     :descs="item.content"
                     :time="item.created_at"
+                    :course_id="videoinfo.info.course_id"
+                    :video_id="route.query.id"
+                    :author_id="item.member.id"
+                    :avatar="item.member.avatar"
+                    @list="comment_list"
+                    :reply_id="item.id"
+                    :reply_p_id="item.id"
                   ></row>
                 </dt>
                 <dd v-for="(child, index) in item.reply" :key="index">
@@ -64,11 +78,28 @@
                     :name="child.member.nickname"
                     :reply="child.reply_member.nickname"
                     :descs="child.content"
+                    :course_id="videoinfo.info.course_id"
+                    :video_id="route.query.id"
+                    :author_id="child.member.id"
+                    :avatar="child.member.avatar"
+                    @list="comment_list"
                     :time="child.created_at"
+                    :reply_id="child.id"
+                    :reply_p_id="child.reply_p_id"
                   ></row>
                 </dd>
               </dl>
             </div>
+            <div>
+              <el-pagination
+                background
+                layout="prev, pager, next"
+                :total="total"
+                @size-change="handleSizeChange"
+                @current-change="handleCurrentChange"
+                :page-size="5"
+              />
+            </div>
           </div>
           <div v-else>
             <div class="bigtitle">评论</div>
@@ -83,22 +114,27 @@
         </div>
         <div class="right">
           <div class="title">云厂长视频中心</div>
-          <div class="flex item">
+          <div
+            class="flex item"
+            @click="toinfo(item.id)"
+            v-for="(item, idx) in imgList.list"
+            :key="idx"
+          >
             <div class="" style="display: flex; flex: 1">
               <img class="mg" src="../../assets/images/price_bg.png" alt="" />
               <div class="font">
-                <div class="title">销售模块</div>
+                <div class="title">{{ item.title }}</div>
                 <div
                   class="flex info"
                   style="align-items: center; justify-content: space-between"
                 >
-                  <div class="order">共24节课</div>
-                  <div class="people">共24人学习</div>
+                  <div class="order">共{{ item.video_num }}节课</div>
+                  <div class="people">共{{ item.study_num }}人学习</div>
                 </div>
               </div>
             </div>
           </div>
-          <div class="button">去看看</div>
+          <div class="button" @click="look">去看看</div>
         </div>
       </div>
     </div>
@@ -117,6 +153,113 @@ const route = useRoute();
 const videoinfo = reactive({
   info: {},
 });
+const total = ref(0);
+const page = ref(1);
+const imgList = reactive({
+  //banne图需要的数据
+  list: [],
+});
+const look = () => {
+  router.replace({
+    name: "video",
+  });
+};
+const toinfo = (id) => {
+  router.push({
+    name: "course",
+    query: {
+      id: id,
+      read: 0,
+    },
+  });
+};
+//分享
+const url = ref();
+const shareLink = async () => {
+  url.value =
+    "https://www.yixiangvr.com/web/#/course?" +
+    "id=" +
+    route.query.id +
+    "&read=" +
+    0;
+  try {
+    await navigator.clipboard.writeText(url.value);
+    alert("链接已复制到剪贴板");
+  } catch (err) {
+    alert("复制链接失败");
+  }
+};
+//点赞
+const is_like = ref(0);
+const like = () => {
+  if (is_like.value == 0) {
+  } else {
+    // is_like.value = 0
+    likea();
+    
+  }
+};
+//收藏
+const is_collect = ref(0);
+const collect = () => {
+  if (is_collect.value == 0) {
+    collectdel();
+    
+  } else {
+    collectadd();
+    
+  }
+};
+//收藏接口
+const collectadd = async () => {
+  try {
+    const { data } = await videoAPi.collect({
+      video_id: route.query.id,
+    });
+    is_collect.value = 0;
+    course_video()
+  } catch (error) {}
+};
+//点赞接口
+const likea = async () => {
+  try {
+    const { data } = await videoAPi.like({
+      video_id: route.query.id,
+    });
+    is_like.value = 0;
+    course_video()
+  } catch (error) {}
+};
+//删除收藏
+const collectdel = async () => {
+  try {
+    const { data } = await videoAPi.collectdel({
+      id: route.query.id,
+    });
+    is_collect.value = 1;
+    course_video()
+  } catch (error) {}
+};
+//视频详情
+const course_video = async () => {
+  try {
+    const { data } = await videoAPi.course_video({
+      id: route.query.id,
+    });
+    videoinfo.info = data;
+    is_like.value = data.is_like;
+    is_collect.value = data.is_collect;
+  } catch (error) {}
+};
+onMounted(course_video);
+//课程列表
+const list = async () => {
+  try {
+    const { data } = await videoAPi.list({});
+    imgList.list = data.data;
+  } catch (error) {}
+};
+onMounted(list);
 //判断是否登录
 const islogin = ref(false);
 if (localStorage.getItem("access_token")) {
@@ -136,19 +279,10 @@ const comment = async () => {
       video_id: route.query.id,
       course_id: videoinfo.info.course.id,
     });
+    textarea.value = "";
     comment_list();
   } catch (error) {}
 };
-//视频详情
-const course_video = async () => {
-  try {
-    const { data } = await videoAPi.course_video({
-      id: route.query.id,
-    });
-    videoinfo.info = data;
-  } catch (error) {}
-};
-onMounted(course_video);
 const commentList = reactive({
   list: [],
 });
@@ -156,14 +290,22 @@ const commentList = reactive({
 const comment_list = async () => {
   try {
     const { data } = await videoAPi.comment_list({
-      course_id: route.query.id,
+      video_id: route.query.id,
+      page: page.value,
+      limit: 5,
     });
     commentList.list = data.data;
+    total.value = data.total;
   } catch (error) {}
 };
 onMounted(comment_list);
 
-onMounted(() => {});
+const handleSizeChange = (val) => {};
+const handleCurrentChange = (val) => {
+  page.value = val;
+  comment_list();
+  console.log(`current page: ${val}`);
+};
 
 const read = ref(0);
 let intervalId = ref();
@@ -178,32 +320,23 @@ const onVideoEnded = () => {
   //可在这里做视频播放结束后的处理，比如跳转新页面、显示弹框等
 };
 // 当前播放时间
-const timeStamp = ref("");
+const timeStamp = ref(0);
+timeStamp.value = route.query.time;
 const allTime = ref("");
 const currentTime = ref("");
 //timeUpdate
-const timeUpdate = (e) => {
+
+const time = () => {
   intervalId.value = setInterval(() => {
-    //获取当前播放时间 duration
-    // if (timeStamp.value != parseInt(e.target.currentTime)) {
-    allTime.value = parseInt(e.target.duration); //视频总时长（秒）
-    //对播放的时间进行整
-    timeStamp.value = parseInt(e.target.currentTime); //播放进度 (秒)
-    // this.biNum = Math.floor((this.timeStamp / this.allTime) * 10000) / 100; //暂时没用到
-    currentTime.value = e.target.currentTime;
-    // }
     study_record();
-  }, 4000);
+  }, 7000);
 };
-const study_record = async () => {
-  try {
-    const { data } = await videoAPi.study_record({
-      video_id: route.query.id,
-      total_duration: allTime.value,
-      duration: timeStamp.value,
-    });
-  } catch (error) {}
+const timeUpdate = (e) => {
+  allTime.value = parseInt(e.target.duration);
+  timeStamp.value = parseInt(e.target.currentTime);
+  currentTime.value = e.target.currentTime;
 };
+
 //返回课程
 const returna = () => {
   router.replace({
@@ -408,7 +541,7 @@ const returna = () => {
   align-items: center;
 }
 .videobox {
-  width: 1920px;
+  width: 100%;
   height: 740px;
   background: #111111;
   backdrop-filter: blur(10px);