inleft
2022-08-11 859ec7a60a9a1f30c898dbf1ae05c50dccfc40e5
优化视频模块内页
10 files modified
1 files added
169 ■■■■ changed files
src/components/group/MyVideo.vue 44 ●●●●● patch | view | raw | blame | history
src/components/group/articleListScorll.vue 4 ●●●● patch | view | raw | blame | history
src/components/mini/box12-comment.vue 15 ●●●●● patch | view | raw | blame | history
src/components/mini/box13-reply.vue 4 ●●● patch | view | raw | blame | history
src/components/mini/box14-video.vue 8 ●●●●● patch | view | raw | blame | history
src/components/mini/box16-videoDetail.vue 66 ●●●●● patch | view | raw | blame | history
src/components/mini/box7-search.vue 1 ●●●● patch | view | raw | blame | history
src/components/mini/mdDetail.vue 4 ●●●● patch | view | raw | blame | history
src/components/swichLabel/main1-home.vue 3 ●●●● patch | view | raw | blame | history
src/components/swichLabel/main2-music-search.vue 9 ●●●●● patch | view | raw | blame | history
src/config/router.config.js 11 ●●●●● patch | view | raw | blame | history
src/components/group/MyVideo.vue
@@ -1,34 +1,50 @@
<template>
    <div class="myModal">
        <a-modal v-model="visible" title="" :footer="null" :mask="false" :maskClosable="true"
            :bodyStyle="{'overflow':'overlay','maxHeight': '550px'}">
            <div>{{this.placement}}</div>
            <videoPlayBox></videoPlayBox>
        <a-modal v-model="visible" title="视频盒子" :footer="null" :mask="false" :maskClosable="true"
            :bodyStyle="{'overflow':'overlay','maxHeight': '750px'}">
            <videoDetail ref="videoDetail"></videoDetail>
        </a-modal>
    </div>
</template>
<script>
    import {
        history
    } from '../../api/blogArticleComment.js'
    import videoPlayBox from "../mini/box15-videoPlayBox.vue"
    import videoDetail from "../mini/box16-videoDetail.vue"
    export default {
        components: {
            videoPlayBox
            videoDetail,
        },
        watch: {
            // '$route'(to, from) {
            //     if ("mdDetail" === to.name) {
            //         this.articleId = this.$route.query.id;
            //         this.articleFileType = this.$route.query.articleFileType;
            //     }
            // },
            articleId: function(newValue, oldValue) {
                if (newValue == undefined || newValue == null || newValue == "") {
                    this.showMsg = true;
                    this.errorMsg = "日志id参数缺失";
                } else {
                    this.$nextTick(function() {
                        this.$refs.myComment.updateCommentList(this.articleId);
                    })
                }
            },
        },
        data() {
            return {
                visible: false,
                placement: "fbottom"
                articleId: "",
            }
        },
        beforeMount() {},
        methods: {
            showModal(param) {
                this.placement = param.id
                this.visible = true;
                this.$nextTick(function() {
                    this.$refs.videoDetail.showVideo(param)
                })
            },
            handleCancel(e) {
                this.visible = false;
@@ -38,7 +54,5 @@
    }
</script>
<style scoped>
    a {
        color: black;
    }
</style>
src/components/group/articleListScorll.vue
@@ -69,13 +69,13 @@
            },
            typeId: function(newValue, oldValue) {
                this.busy = true;
                this.$message.info('loading', 0.3);
                
                //有条件不刷新
                if (newValue == undefined && oldValue != "") {
                    return
                }
                this.$message.info('loading', 0.3);
                this.onChange(1);
            },
        },
src/components/mini/box12-comment.vue
@@ -1,6 +1,14 @@
<template>
    <div>
        <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
        <a-collapse v-if="foldReply">
            <a-collapse-panel key="replyPanel" header="回复">
                <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
            </a-collapse-panel>
        </a-collapse>
        <div v-else>
            <replyBox ref="commentBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
        </div>
        <a-modal v-model="visible" :title="replyTaget" :footer="null"
            :bodyStyle="{'overflow':'overlay','maxHeight': '550px','scrollbarWidth': 'none'}">
            <replyBox ref="replyBoxId" v-bind="$attrs" @sendMsg="sendMsg()"></replyBox>
@@ -100,6 +108,11 @@
        components: {
            replyBox
        },
        props: {
            "foldReply": {
                default: false,
            },
        },
        methods: {
            updateCommentList(articleId) {
                queryBlogCommentList({
src/components/mini/box13-reply.vue
@@ -1,4 +1,5 @@
<template>
    <div>
        <div class="visitInfo">
            <a-form-model ref="myForm" layout="inline" :rules="rules" :model="form" :label-col="labelCol"
@@ -19,7 +20,7 @@
                    v-show="form.nickName=='inleft'||form.nickName=='笔墨'||form.nickName=='阿墨'">
                    <a-input-password v-model="form.authCode" autocomplete='new-password' type="password"
                        placeholder="我的授权码">
                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)"/>
                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                    </a-input-password>
                </a-form-model-item>
            </a-form-model>
@@ -59,6 +60,7 @@
            </div>
        </a-comment>
    </div>
</template>
<script>
src/components/mini/box14-video.vue
@@ -15,7 +15,9 @@
                <div class="entry-post">
                    <div class="entry-header">
                        <h5 class="entry-title">
                            <a href="#" rel="bookmark">{{item.title}}</a>
                            <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
                                {{item.title}}
                            </router-link>
                        </h5>
                        <div class="post_content">
                            {{item.introduce}}
@@ -36,7 +38,7 @@
                        <div class="post-on">
                            <span class="entry-date">
                                <a-icon type="calendar" />
                                <a href="#"  rel="bookmark">
                                <a href="#" rel="bookmark">
                                    {{item.publishDate}}
                                </a>
                            </span>
@@ -61,7 +63,7 @@
    } from '../../api/blogArticle.js'
    import myConstant from "../../config/myConstant.js"
    export default {
        data() {
            return {
src/components/mini/box16-videoDetail.vue
New file
@@ -0,0 +1,66 @@
<template>
    <div>
         <div class="boxMain">
             <videoPlayBox></videoPlayBox>
         </div>
         <div class="articleComment">
             <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true"/>
         </div>
    </div>
</template>
<script>
    import {
        history
    } from '../../api/blogArticleComment.js'
    import videoPlayBox from "../mini/box15-videoPlayBox.vue"
    import comment from "../mini/box12-comment.vue"
    export default {
        components: {
            videoPlayBox,
            comment,
        },
        watch: {
            // '$route'(to, from) {
            //     if ("mdDetail" === to.name) {
            //         this.articleId = this.$route.query.id;
            //         this.articleFileType = this.$route.query.articleFileType;
            //     }
            // },
            articleId: function(newValue, oldValue) {
                if (newValue == undefined || newValue == null || newValue == "") {
                    this.showMsg = true;
                    this.errorMsg = "日志id参数缺失";
                } else {
                    this.$nextTick(function() {
                        this.$refs.myComment.updateCommentList(this.articleId);
                    })
                }
            },
        },
        data() {
            return {
                articleId: "",
                isAllowedComment: false
            }
        },
        methods: {
            showVideo(param) {
                this.articleId = param.id
            },
        },
    }
</script>
<style scoped>
    a {
        color: black;
    }
    .boxMain {
        display: flex;
        justify-content: center;
        padding: 20px;
    }
</style>
src/components/mini/box7-search.vue
@@ -13,7 +13,6 @@
                </div>
                <hr>
                <span>{{sentence}}</span>
                <!-- <span>之所以叫月台,是希望,能在这里出现的视频会越来越多,熙熙囔囔</span> -->
            </div>
        </div>
    </div>
src/components/mini/mdDetail.vue
@@ -252,8 +252,8 @@
    .markdown-body,
    .articleComment {
        min-height: 750px;
        padding: 35px 20px 10px 20px;
        min-height: 70%;
        padding: 35px 20px 30px 20px;
        box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
            -8px -8px 18px #ffffff;
    }
src/components/swichLabel/main1-home.vue
@@ -14,7 +14,7 @@
            </a-drawer>
        </div>
        <div class="blog-main">
        <div class="blog-main ">
            <a-row>
                <keep-alive>
@@ -150,6 +150,7 @@
    .blog-main {
        min-height: 860px;
        margin-top: 80px;
        padding-left: 3%;
        padding-right: 3%;
src/components/swichLabel/main2-music-search.vue
@@ -7,7 +7,10 @@
            <a-col v-bind="colApiMain" class="holdHeight">
                <!-- <box8></box8> -->
                <!-- <boxLeft></boxLeft> -->
                <myVideo v-on="$listeners"></myVideo>
                <!-- <myVideo v-on="$listeners"></myVideo> -->
                <keep-alive>
                    <router-view v-on="$listeners"></router-view>
                </keep-alive>
            </a-col>
        </a-row>
@@ -57,8 +60,8 @@
                colApiMain: {
                    xs: {
                        span: 24,
                        offset: 0,
                        span: 22,
                        offset: 1,
                    },
                    sm: {
                        span: 22,
src/config/router.config.js
@@ -14,6 +14,8 @@
import tagInfo from '../components/mini/tagInfo.vue'
import boxFriend from '../components/mini/box-friend.vue'
import mdDetail from '../components/mini/mdDetail.vue'
import videoDetail from '../components/mini/box16-videoDetail.vue'
import videoList from '../components/mini/box14-video.vue'
export const asyncRouterMap = [{
@@ -79,6 +81,15 @@
            {
                path: '/platform',
                component: platform,
                children: [{
                    path: '/',
                    name: "videoList",
                    component: videoList,
                },{
                    path: '/videoDetail',
                    name: "videoDetail",
                    component: videoDetail,
                }]
            },
            {
                path: '/main3',