|
|
@@ -0,0 +1,409 @@
|
|
|
+<!--
|
|
|
+ * @Description: 课程视频
|
|
|
+ * @Author: 空白格
|
|
|
+ * @Date: 2022-08-29 14:30:20
|
|
|
+ * @LastEditors: 空白格
|
|
|
+ * @LastEditTime: 2022-08-29 14:37:20
|
|
|
+ * @FilePath: \veterans_client_web\src\views\EducationPromote\CourseVideo\CourseVideoIndex.vue
|
|
|
+ * @Copyright: Copyright (c) 2016~2022 by 空白格, All Rights Reserved.
|
|
|
+-->
|
|
|
+<template>
|
|
|
+ <div class="course-details">
|
|
|
+ <div class="course-details-breadcrumb">
|
|
|
+ <el-breadcrumb
|
|
|
+ class="course-details-breadcrumb-content"
|
|
|
+ separator-class="el-icon-arrow-right"
|
|
|
+ >
|
|
|
+ <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
|
|
|
+ <el-breadcrumb-item
|
|
|
+ v-for="(item, index) in breadcrumbList"
|
|
|
+ :key="index"
|
|
|
+ :to="'/' + item.path"
|
|
|
+ >{{ item.label }}</el-breadcrumb-item
|
|
|
+ >
|
|
|
+ </el-breadcrumb>
|
|
|
+ </div>
|
|
|
+ <div class="course-details-video">
|
|
|
+ <div class="course-details-video-box">
|
|
|
+ <course-video
|
|
|
+ ref="courseVideo"
|
|
|
+ :courseDetails="detailsInfo"
|
|
|
+ @changeClasses="changeClasses"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="course-details-comment" v-loading="commentObj.loading">
|
|
|
+ <el-row :gutter="11">
|
|
|
+ <el-col :xs="24" :sm="24" :md="16" :lg="16" :xl="16">
|
|
|
+ <div class="course-details-comment-content">
|
|
|
+ <div class="cdcc-header">
|
|
|
+ <div class="cdcc-header-title">课程评论</div>
|
|
|
+ <div class="cdcc-header-total">
|
|
|
+ 共{{ commentObj.total || 0 }}条评论
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="cdcc-list" v-if="commentObj.list.length">
|
|
|
+ <div
|
|
|
+ class="cdcc-list-item"
|
|
|
+ v-for="(item, index) in commentObj.list"
|
|
|
+ :key="index"
|
|
|
+ >
|
|
|
+ <div class="cdcc-list-item-left">
|
|
|
+ <el-avatar
|
|
|
+ shape="square"
|
|
|
+ :size="77"
|
|
|
+ :src="item.createByAvatar"
|
|
|
+ ></el-avatar>
|
|
|
+ </div>
|
|
|
+ <div class="cdcc-list-item-right">
|
|
|
+ <div class="clir-item">{{ item.createBy }}</div>
|
|
|
+ <div class="clir-item">
|
|
|
+ <div>
|
|
|
+ <el-rate
|
|
|
+ v-model="item.starLevel"
|
|
|
+ :disabled="true"
|
|
|
+ :colors="['#C4C4C4', '#C4C4C4', '#C4C4C4']"
|
|
|
+ ></el-rate>
|
|
|
+ </div>
|
|
|
+ <div class="date">{{ item.createTime }}</div>
|
|
|
+ </div>
|
|
|
+ <div class="clir-item">{{ item.content }}</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="pagination" v-if="commentObj.total">
|
|
|
+ <el-pagination
|
|
|
+ background
|
|
|
+ layout="prev, pager, next"
|
|
|
+ :page-size="commentObj.queryParams.pageSize"
|
|
|
+ :total="commentObj.total"
|
|
|
+ @current-change="currentChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="empty" v-else>
|
|
|
+ <el-empty description="评论数据为空"></el-empty>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ <el-col :xs="24" :sm="24" :md="8" :lg="8" :xl="8">
|
|
|
+ <div class="course-details-comment-submit">
|
|
|
+ <div class="cdcs-title">我的评论</div>
|
|
|
+ <div class="cdcs-form">
|
|
|
+ <el-form
|
|
|
+ ref="form"
|
|
|
+ :model="commentObj.form"
|
|
|
+ :rules="commentObj.rules"
|
|
|
+ >
|
|
|
+ <el-form-item prop="starLevel">
|
|
|
+ <el-rate v-model="commentObj.form.starLevel"></el-rate>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item prop="content">
|
|
|
+ <el-input
|
|
|
+ type="textarea"
|
|
|
+ :rows="6"
|
|
|
+ placeholder="请输入您的评价"
|
|
|
+ v-model="commentObj.form.content"
|
|
|
+ >
|
|
|
+ </el-input>
|
|
|
+ </el-form-item>
|
|
|
+ <el-form-item>
|
|
|
+ <div class="cdcs-form-btn">
|
|
|
+ <el-button
|
|
|
+ class="cdcs-form-btn-sub"
|
|
|
+ @click="submitComment"
|
|
|
+ :loading="commentObj.subLoading"
|
|
|
+ >提交</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </el-form-item>
|
|
|
+ </el-form>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import CourseVideo from "@/components/CourseVideo";
|
|
|
+import { getCommentList, addComment } from "@/api/AdaptiveTraining";
|
|
|
+import { getSkillVideoDetails } from "@/api/SkillTraining";
|
|
|
+export default {
|
|
|
+ name: "CourseVideoIndex",
|
|
|
+ components: {
|
|
|
+ CourseVideo,
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ breadcrumbList: [],
|
|
|
+ classesId: null,
|
|
|
+ detailsInfo: {},
|
|
|
+ currentClasses: {},
|
|
|
+ commentObj: {
|
|
|
+ total: 0,
|
|
|
+ list: [],
|
|
|
+ loading: false,
|
|
|
+ subLoading: false,
|
|
|
+ queryParams: {
|
|
|
+ pageNum: 1,
|
|
|
+ pageSize: 10,
|
|
|
+ tabId: undefined,
|
|
|
+ },
|
|
|
+ form: {
|
|
|
+ tabId: "",
|
|
|
+ starLevel: 0,
|
|
|
+ content: "",
|
|
|
+ },
|
|
|
+ rules: {
|
|
|
+ starLevel: [{ required: true, message: "请评分", trigger: "change" }],
|
|
|
+ content: [
|
|
|
+ { required: true, message: "请输入您的评价", trigger: "blur" },
|
|
|
+ ],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ };
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.handleRouter();
|
|
|
+ const { id } = this.$route.query;
|
|
|
+ if (id) {
|
|
|
+ this.classesId = id;
|
|
|
+ this.commentObj.queryParams.tabId = id;
|
|
|
+ this.commentObj.form.tabId = id;
|
|
|
+ this.getDetails();
|
|
|
+ this.getCommentList();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ /**
|
|
|
+ * 获取课程详情
|
|
|
+ * @date 2022-08-24
|
|
|
+ * @param {any} id
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ getDetails() {
|
|
|
+ getSkillVideoDetails({ id: this.classesId }).then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.detailsInfo = res?.data;
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 切换章节触发
|
|
|
+ * @date 2022-08-25
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ changeClasses() {
|
|
|
+ this.getDetails();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 获取课程评论
|
|
|
+ * @date 2022-08-25
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ getCommentList() {
|
|
|
+ this.commentObj.loading = true;
|
|
|
+ getCommentList(this.commentObj.queryParams)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.commentObj.list = res?.rows;
|
|
|
+ this.commentObj.total = Number(res?.total);
|
|
|
+ }
|
|
|
+ this.commentObj.loading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.commentObj.loading = false;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 分页切换触发
|
|
|
+ * @date 2022-08-25
|
|
|
+ * @param {any} page
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ currentChange(page) {
|
|
|
+ this.commentObj.queryParams.pageNum = page;
|
|
|
+ this.getCommentList();
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 提交评论
|
|
|
+ * @date 2022-08-25
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ submitComment() {
|
|
|
+ this.$refs["form"].validate((valid) => {
|
|
|
+ if (valid) {
|
|
|
+ this.commentObj.subLoading = true;
|
|
|
+ addComment(this.commentObj.form)
|
|
|
+ .then((res) => {
|
|
|
+ if (res.code === 200) {
|
|
|
+ this.$message.success("评论成功!");
|
|
|
+ this.$refs["form"].resetFields();
|
|
|
+ this.commentObj.queryParams.pageNum = 1;
|
|
|
+ this.getCommentList();
|
|
|
+ } else {
|
|
|
+ this.$message.error(res.msg || "评论失败!");
|
|
|
+ }
|
|
|
+ this.commentObj.subLoading = false;
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ this.commentObj.subLoading = false;
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ /**
|
|
|
+ * 根据路由获取面包屑
|
|
|
+ * @date 2022-08-24
|
|
|
+ * @returns {any}
|
|
|
+ */
|
|
|
+ handleRouter() {
|
|
|
+ let path = this.$router.currentRoute.path.slice(1),
|
|
|
+ routerOptions = this.$router.options.routes[0].children,
|
|
|
+ breadcrumbList = [],
|
|
|
+ pathList;
|
|
|
+ if (path) {
|
|
|
+ pathList = path.split("/").filter((item) => item && item.trim());
|
|
|
+ pathList[pathList.length - 1] = path;
|
|
|
+ pathList.forEach((item) => {
|
|
|
+ routerOptions.forEach((jitem) => {
|
|
|
+ if (item === jitem.path) {
|
|
|
+ breadcrumbList.push({
|
|
|
+ path: jitem.path,
|
|
|
+ label: jitem.meta.title,
|
|
|
+ });
|
|
|
+ }
|
|
|
+ });
|
|
|
+ });
|
|
|
+ this.breadcrumbList = breadcrumbList;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ this.$refs["courseVideo"].submitVideoDuration();
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.course-details {
|
|
|
+ &-breadcrumb {
|
|
|
+ height: 57px;
|
|
|
+ line-height: 57px;
|
|
|
+ background: #43565f;
|
|
|
+ &-content {
|
|
|
+ width: 70%;
|
|
|
+ height: 57px;
|
|
|
+ line-height: 57px;
|
|
|
+ min-width: 600px;
|
|
|
+ margin: 0 auto;
|
|
|
+ :deep(.el-breadcrumb__inner.is-link) {
|
|
|
+ color: #fff;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-video {
|
|
|
+ background: #181c1e;
|
|
|
+ &-box {
|
|
|
+ width: 70%;
|
|
|
+ min-width: 600px;
|
|
|
+ margin: 0 auto;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-comment {
|
|
|
+ width: 70%;
|
|
|
+ min-width: 600px;
|
|
|
+ margin: 16px auto 0;
|
|
|
+ &-content {
|
|
|
+ background: #fff;
|
|
|
+ padding: 30px 20px;
|
|
|
+ .cdcc-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ border-bottom: solid 1px #cbcbcb;
|
|
|
+ padding-bottom: 10px;
|
|
|
+ &-title {
|
|
|
+ color: #1a1a1a;
|
|
|
+ font-size: 20px;
|
|
|
+ font-weight: 500;
|
|
|
+ }
|
|
|
+ &-total {
|
|
|
+ color: #8d8d8d;
|
|
|
+ font-size: 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .cdcc-list {
|
|
|
+ padding: 30px 0 0;
|
|
|
+ &-item {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 22px;
|
|
|
+ &-left {
|
|
|
+ margin-right: 14px;
|
|
|
+ }
|
|
|
+ &-right {
|
|
|
+ .clir-item {
|
|
|
+ display: flex;
|
|
|
+ font-size: 14px;
|
|
|
+ margin-bottom: 5px;
|
|
|
+ :deep(.el-rate__icon) {
|
|
|
+ margin-right: 2px;
|
|
|
+ }
|
|
|
+ .date {
|
|
|
+ color: #a5a5a5;
|
|
|
+ margin-left: 30px;
|
|
|
+ font-size: 13px;
|
|
|
+ }
|
|
|
+ &:first-child {
|
|
|
+ color: #3d3d3d;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+ &:last-child {
|
|
|
+ color: #6c6c6c;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .pagination {
|
|
|
+ text-align: center;
|
|
|
+ margin-top: 20px;
|
|
|
+ :deep(.el-pager .active) {
|
|
|
+ background-color: #ff3939;
|
|
|
+ }
|
|
|
+ :deep(.el-pagination.is-background
|
|
|
+ .el-pager
|
|
|
+ li:not(.disabled).active) {
|
|
|
+ background-color: #ff3939;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .empty {
|
|
|
+ padding: 30px 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ &-submit {
|
|
|
+ background: #fff;
|
|
|
+ padding: 30px 20px;
|
|
|
+ .cdcs-title {
|
|
|
+ font-size: 20px;
|
|
|
+ color: #1a1a1a;
|
|
|
+ margin-bottom: 14px;
|
|
|
+ }
|
|
|
+ .cdcs-form {
|
|
|
+ &-btn {
|
|
|
+ width: 100%;
|
|
|
+ text-align: center;
|
|
|
+ &-sub {
|
|
|
+ width: 80%;
|
|
|
+ background-color: #709078;
|
|
|
+ color: #fff;
|
|
|
+ border-radius: 30px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
