添加视频详情页

 src/components/group/MyVideo.vue

@@ -1,7 +1,7 @@
<template>
    <div class="myModal">
        <a-modal v-model="visible" title="视频盒子" :width="myWidth" :footer="null" :mask="false" :maskClosable="true"
            :bodyStyle="{'overflow':'overlay','height': '750px'}" :afterClose="afterClose" >
            :bodyStyle="{'overflow':'overlay','height': '700px'}" :afterClose="afterClose">
            <videoDetail ref="videoDetail" :showFade="showFade"></videoDetail>
        </a-modal>
    </div>
@@ -62,6 +62,10 @@
                }
            },
            showModal(param) {
                if (this.$route.path == "/videoDetail") {
                    this.$message.info("已经在播放页面啦..")
                    return
                }
                this.visible = true;
                this.$nextTick(function() {
                    this.$refs.videoDetail.showVideo(param)

 src/components/group/boxLeft.vue

@@ -1,13 +1,13 @@
<template>
    <div class="blog-left-side fadeInLeft">
        <div class="blog-cell">
            <box1></box1>
            <box1 ></box1>
        </div>
        <div class="blog-cell">
            <box2></box2>
            <box2 ></box2>
        </div>
        <div class="blog-cell">
            <box3></box3>
            <box3 ></box3>
        </div>
    </div>
</template>

 src/components/layouts/baseLayout.vue

@@ -6,13 +6,13 @@
        </a-layout-header>

        <keep-alive>
            <router-view @showMyVideo="showMyVideo"></router-view>
            <router-view @showMyVideo="showMyVideo" @detailBackAction="detailBackAction"></router-view>
        </keep-alive>

        <a-layout-footer>
            <AplayerBox />
            <tagFooter />
            <MyVideo ref="MyVideo" @closeMyVideo="closeMyVideo" />
            <MyVideo ref="MyVideo" @closeMyVideo="closeMyVideo"/>

            <a-button v-if="miniVideoPlayData!=null && showMiniBox" class="fadeInRight"
                style="position: fixed;right: 0px;bottom: 130px;" @click="showMyVideo(miniVideoPlayData)">
@@ -55,6 +55,10 @@
                this.miniVideoPlayData = param;
                this.$refs.MyVideo.showModal(param);
            },
            detailBackAction(param) {
                this.miniVideoPlayData = param;
                this.closeMyVideo()
            },
            closeMyVideo() {
                if (this.firstQuery) {
                    this.firstQuery = !this.firstQuery;

 src/components/mini/box-new-article.vue

@@ -4,7 +4,8 @@
            <div class="miniTag" v-if="isTop==1">置顶</div>
            <div class="post_cover left_radius" v-if="index%2==0">

                <router-link :to="{path:'/platform'}" :title="title" v-if="articleFileType==myConstant.fileTypeVideo">
                <router-link :to="{path:'videoDetail',query:{id:id}}" :title="title"
                    v-if="articleFileType==myConstant.fileTypeVideo">
                    <div class="block left_radius"></div>
                    <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
                </router-link>
@@ -20,7 +21,8 @@
            </div>

            <div class="post_cover right_radius" v-else>
                <router-link :to="{path:'/platform'}" :title="title" v-if="articleFileType==myConstant.fileTypeVideo">
                <router-link :to="{path:'videoDetail',query:{id:id}}" :title="title"
                    v-if="articleFileType==myConstant.fileTypeVideo">
                    <div class="block left_radius"></div>
                    <img class="post_bg" :src="coverFileURL" :onerror="img404" :alt="title">
                </router-link>
@@ -37,19 +39,28 @@

            <div class="recent-post-info">

                <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}"
                    class="article-title">
                <router-link :to="{path:'/videoDetail',query:{id:id}}" class="article-title"
                    v-if="articleFileType==myConstant.fileTypeVideo">
                    <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
                    <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
                    {{title}}
                    <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge>
                </router-link>

                <router-link :to="{path:'/mdDetail',query:{id:id,articleFileType:articleFileType}}"
                    class="article-title" v-else>
                    <a-icon type="lock" style="color:rgba(0,0,0,.25)" v-if="authStatus==3" />
                    <a-icon type="stop" style="color:rgba(0,0,0,.25)" v-if="authStatus==2" />
                    {{title}}
                    <a-badge :count="1" dot v-if="isAnyUpdate==1" title="最近有更新"></a-badge>
                </router-link>

                <!-- <a class="article-title" href="/mdDetail" :title="title"> {{title}}</a> -->
                <div class="article-meta-wrap" style="display: flex;">
                    <span class="post-meta-date">
                        <a-icon type="calendar" />
                        <span class="article-meta-label"></span>
                        <time datetime="2022-01-13T06:25:00.000Z" title=" 2022-01-13 14:25:00"> {{publishDate}} </time>
                        <time> {{publishDate}} </time>
                    </span>
                    <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>

@@ -59,7 +70,7 @@
                            class="article-meta__categories"> {{articleTypeName}}</router-link>
                        <span v-if="articleFileType==myConstant.fileTypeShort">
                            <span v-if="jumpURL !=null && jumpURL!=''">
                                <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
                                <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
                                <span class="post-meta-date">
                                    <a-icon type="share-alt" />
                                    <a :href="jumpURL" target="_blank" class="no-underline"> 外链 </a>
@@ -67,7 +78,7 @@
                            </span>

                            <span v-else>
                                <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
                                <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
                                <span class="post-meta-date">
                                    <a-icon type="thunderbolt" />碎碎念
                                </span>
@@ -75,14 +86,13 @@
                        </span>

                        <span v-if="articleFileType==myConstant.fileTypeVideo">
                            <span v-if="jumpURL !=null && jumpURL!=''">
                                <span class="article-meta__separator" style="margin: 0px 3px ;">|</span>
                                <span class="post-meta-date">
                                    <a-icon type="video-camera" />
                                    <a :href="jumpURL" target="_blank" class="no-underline"> 视频 </a>
                                </span>
                            <span class="article-meta__separator" style="margin: 0px 3px ;"> | </span>
                            <span class="post-meta-date">
                                <a-icon type="video-camera" />
                                <router-link :to="{path:'/videoDetail',query:{id:id}}">
                                    视频
                                </router-link>
                            </span>

                        </span>
                        <!-- <a class="article-meta__categories" href="#"> {{tag}}</a> -->
                    </span>

 src/components/mini/box14-video.vue

@@ -15,10 +15,10 @@
                <div class="entry-post">
                    <div class="entry-header">
                        <h5 class="entry-title">
                            <!-- <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
                            <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
                                {{item.title}}
                            </router-link> -->
                            {{item.title}}
                            </router-link>
                            <!-- {{item.title}} -->
                        </h5>
                        <div class="post_content">
                            {{item.introduce}}
@@ -200,7 +200,6 @@

        .entry-preview .entry-meta {
            display: flex;
            justify-content: space-between;
            font-size: .5rem;
            padding: .5rem 0 0 0;
            flex-wrap: wrap;

 src/components/mini/box15-videoPlayBox.vue

@@ -77,7 +77,7 @@
            var _this = this;

            //调整音量
            _this.$message.success("加载完成,请注意音量是否合适..")
            _this.$message.success("模块加载完成,请注意音量是否合适..")

            this.dp.volume(this.volumeInit, true, false);

@@ -153,6 +153,11 @@
            },
            //加载播放
            startPlay(videoData) {
                if (videoData == null || videoData == undefined) {
                    this.$message.error("无效资源..")
                    return
                }

                //重要!!防止hls类型视频在切换后不停在后台缓存
                if (this.hls != null) {
                    this.hls.destroy();
@@ -169,9 +174,8 @@
                    this.hls = new Hls();
                }

                setTimeout(() => {
                    this.dp.switchVideo(this.playingVideoData)
                }, 500);
                this.dp.switchVideo(this.playingVideoData)
				
            },
            //播放器初始化
            init() {
@@ -196,7 +200,6 @@
                        },

                    ],

                    highlight: [
                        //进度条上的自定义时间标记
                        // 进度条时间点高亮

 src/components/mini/box16-videoDetail.vue

@@ -1,15 +1,23 @@
<template>
    <div class="boxMain">
        <div class=" playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
            <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
    <div>
        <div v-if="showBackButton">
            <a-button @click="()=>this.$router.back(-1)" style="position: sticky;">
                <a-icon type="left" />
            </a-button>
        </div>
        <div v-bind:class="{ fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
            <div class="introduce myShadow" v-if="introduce!=''">
                <pre style="white-space: pre-line;">{{introduce}}</pre>
        <div class="boxMain">
            <div class="playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
                <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
            </div>
            <div class="articleComment ">
                <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
                    :foldReply="true" />
            <div 
                v-bind:class="{ showButtonMargin:( showBackButton ) ,fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
                <div class="introduce myShadow" v-if="introduce!=''">
                    <pre style="white-space: pre-line;">{{introduce}}</pre>
                </div>
                <div class="articleComment ">
                    <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
                        :foldReply="true" />
                </div>
            </div>
        </div>
    </div>
@@ -32,13 +40,38 @@
            videoPlayBox,
            comment,
        },
        created() {
            if (this.$route.query.id != undefined && this.$route.query.id != null && this.$route.query.id != "") {
                let item = {
                    id: this.$route.query.id,
                    isAllowedComment: this.isAllowedComment,
                    introduce: this.introduce,
                }
                this.showVideo(item);
                this.showBackButton = true;
            }
        },
        deactivated() {
            if (this.showBackButton) {
                this.$emit('detailBackAction', {
                    id: this.articleId,
                    isAllowedComment: this.isAllowedComment,
                    introduce: this.introduce,
                })
            }
        },
        watch: {
            // '$route'(to, from) {
            //     if ("mdDetail" === to.name) {
            //         this.articleId = this.$route.query.id;
            //         this.articleFileType = this.$route.query.articleFileType;
            //     }
            // },
            '$route'(to, from) {
                if ("videoDetail" === to.name) {
                    let item = {
                        id: this.$route.query.id,
                        isAllowedComment: this.isAllowedComment,
                        introduce: this.introduce,
                    }
                    this.showVideo(item);
                    this.showBackButton = true;
                }
            },
            articleId: function(newValue, oldValue) {
                if (newValue == undefined || newValue == null || newValue == "") {
                    this.errorMsg = "日志id参数缺失";
@@ -53,6 +86,7 @@
        },
        data() {
            return {
                showBackButton: false,
                articleId: "",
                lastArticleId: "",
                isAllowedComment: false,
@@ -77,6 +111,8 @@
                this.$refs.myComment.updateCommentList(videoData.id);
            },
            showVideo(item) {
                this.showBackButton = false;

                //防止重复加载
                this.lastArticleId = this.articleId;
                this.articleId = item.id
@@ -88,10 +124,11 @@
                this.isAllowedComment = item.isAllowedComment;
                this.introduce = item.introduce;
                this.loadData();

            },
            loadData() {

                if (this.$refs.videoPlayBox.isPlaying) {
                if (this.$refs.videoPlayBox != undefined && this.$refs.videoPlayBox.isPlaying) {
                    this.$message.info("视频源已切换..", 6)
                }

@@ -102,8 +139,8 @@

                let _this = this;
                queryBlogArticleDetail({
                    id: this.articleId,
                    authWord: this.secret == "" ? null : md5(this.secret)
                    id: _this.articleId,
                    authWord: _this.secret == "" ? null : md5(_this.secret)
                }).then((res) => {
                    this.myLock = !this.myLock;

@@ -122,10 +159,13 @@
                                placement: 'bottomRight'
                            });
                        }
                        this.myLock = !this.myLock;
                        return
                    }

                    this.isAllowedComment = res.data.isAllowedComment;
                    this.introduce = res.data.introduce;

                    this.videoData.url = res.data.articleFileURL;
                    this.videoData.img = res.data.coverFileURL;
                    this.videoData.title = res.data.title;
@@ -167,14 +207,18 @@
        grid-template-columns: repeat(2, 1fr);
        display: grid;
        clear: both;
        gap: 2rem;
        grid-row-gap: 2rem;
        max-height: 100%;
    }

    .playBox {
        display: flex;
        justify-content: center;
        padding: 20px 0px;
        padding: 35px 0px;
    }

    .showButtonMargin {
        margin: 75px 0px 0px 0px;
    }

    .myShadow {
@@ -194,6 +238,8 @@
            gap: 0rem;
        }

        .showButtonMargin {
            margin: 0px;
        }
    }

</style>

 src/components/mini/mdDetail.vue

@@ -1,7 +1,7 @@
<template>
    <div class="article-meta">
        <div>
            <a-button @click="back" style="position: absolute;">
            <a-button @click="()=>this.$router.back(-1)" style="position: absolute;">
                <a-icon type="left" />
            </a-button>
        </div>
@@ -10,6 +10,7 @@
            <div class="mySecretSamll" v-if="articleFileType==myConstant.fileTypeShort">
                <p>碎碎念只有那么一点了,但是下面依旧可以碎碎念</p>
            </div>

            <div class="mySecret" v-else>
                <h1>怎样才能让你看到我呢</h1>
                <h1>只要你要,只要我有...</h1>
@@ -30,10 +31,18 @@
                <span class="myTip">{{errorMsg}}</span>
            </div>

            <div class="mySecret"
                v-else-if="articleFileType==myConstant.fileTypeVideo|| articleFileType==myConstant.fileTypeMp3">
                <pre style="white-space: pre-line;">
                {{introduce}}
                </pre>
            </div>

            <div class="markdown-body article-detail" v-else>
                <vue-markdown :source="source"></vue-markdown>
            </div>
        </div>

        <div class="articleInfoMiniData">
            <div class="smallOption" @click="articleOptionHandle('dislike')">
                <a-icon type="dislike" style="margin-top: 2px;" />
@@ -86,6 +95,7 @@
                myConstant: myConstant,
                articelMeta: "",
                isAllowedComment: 1,
                introduce: "",
                articleId: "",
                articleFileType: myConstant.fileTypeMarkDown,
                source: "",
@@ -131,9 +141,7 @@
                this.showMsg = true;
                this.errorMsg = "加载中..";

                if (this.articleFileType == myConstant.fileTypeShort ||
                    this.articleFileType == myConstant.fileTypeVideo ||
                    this.articleFileType == myConstant.fileTypeMp3) {
                if (this.articleFileType == myConstant.fileTypeShort) {
                    this.errorMsg = "该类型日志在这里没有更多啦..";
                    return
                }
@@ -168,12 +176,19 @@
                    // this.test = res.data.isAllowedComment == 1 ? true : false;

                    this.isAllowedComment = res.data.isAllowedComment;
                    this.introduce = res.data.introduce;

                    this.articelMeta = res.data;
                    this.$axios
                        .get(res.data.articleFileURL)
                        .then((res) => {
                            this.source = res.data;
                        })

                    if (res.data.articleFileType == myConstant.fileTypeMarkDown ||
                        res.data.articleFileType == myConstant.fileTypeHtml) {

                        this.$axios
                            .get(res.data.articleFileURL)
                            .then((res) => {
                                this.source = res.data;
                            })
                    }

                    //获取日志资源文件
                    this.showMsg = false;
@@ -193,9 +208,6 @@
                        this.search.disabled = false;
                    })

            },
            back: function() {
                this.$router.back(-1);
            }
        },

@@ -243,7 +255,7 @@
    }

    .mySecretSamll {
        padding: 30px 10px 10px; 
        padding: 30px 10px 10px;
        height: 115px;
        display: flex;
        flex-direction: column;
@@ -256,7 +268,7 @@
    .markdown-body,
    .articleComment {
        min-height: 70%;
        padding: 35px 20px 30px 20px;
        padding: 30px 20px 20px 20px;
        box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
            -8px -8px 18px #ffffff;
    }