From 859ec7a60a9a1f30c898dbf1ae05c50dccfc40e5 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Thu, 11 Aug 2022 01:51:55 +0800
Subject: [PATCH] 优化视频模块内页
---
src/components/mini/box12-comment.vue | 15 ++++
src/components/mini/mdDetail.vue | 4
src/components/swichLabel/main1-home.vue | 3
src/components/mini/box13-reply.vue | 4 +
src/components/group/MyVideo.vue | 44 +++++++++-----
src/components/mini/box14-video.vue | 8 +-
src/components/mini/box7-search.vue | 1
src/config/router.config.js | 11 +++
src/components/group/articleListScorll.vue | 4
src/components/mini/box16-videoDetail.vue | 66 ++++++++++++++++++++++
src/components/swichLabel/main2-music-search.vue | 9 ++-
11 files changed, 140 insertions(+), 29 deletions(-)
diff --git a/src/components/group/MyVideo.vue b/src/components/group/MyVideo.vue
index 723d6a0..4efcec7 100644
--- a/src/components/group/MyVideo.vue
+++ b/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>
diff --git a/src/components/group/articleListScorll.vue b/src/components/group/articleListScorll.vue
index 0191c81..09dcc6c 100644
--- a/src/components/group/articleListScorll.vue
+++ b/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);
},
},
diff --git a/src/components/mini/box12-comment.vue b/src/components/mini/box12-comment.vue
index 8749aff..684caa2 100644
--- a/src/components/mini/box12-comment.vue
+++ b/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({
diff --git a/src/components/mini/box13-reply.vue b/src/components/mini/box13-reply.vue
index c5ef6b2..fdb52e5 100644
--- a/src/components/mini/box13-reply.vue
+++ b/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>
diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue
index 9e794c3..952dd7d 100644
--- a/src/components/mini/box14-video.vue
+++ b/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 {
diff --git a/src/components/mini/box16-videoDetail.vue b/src/components/mini/box16-videoDetail.vue
new file mode 100644
index 0000000..126478e
--- /dev/null
+++ b/src/components/mini/box16-videoDetail.vue
@@ -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>
diff --git a/src/components/mini/box7-search.vue b/src/components/mini/box7-search.vue
index 3da5c1b..9c06d0f 100644
--- a/src/components/mini/box7-search.vue
+++ b/src/components/mini/box7-search.vue
@@ -13,7 +13,6 @@
</div>
<hr>
<span>{{sentence}}</span>
- <!-- <span>之所以叫月台,是希望,能在这里出现的视频会越来越多,熙熙囔囔</span> -->
</div>
</div>
</div>
diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue
index 2513e82..93149d1 100644
--- a/src/components/mini/mdDetail.vue
+++ b/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;
}
diff --git a/src/components/swichLabel/main1-home.vue b/src/components/swichLabel/main1-home.vue
index 8fb8274..9f4f1e1 100644
--- a/src/components/swichLabel/main1-home.vue
+++ b/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%;
diff --git a/src/components/swichLabel/main2-music-search.vue b/src/components/swichLabel/main2-music-search.vue
index 565e063..02cd100 100644
--- a/src/components/swichLabel/main2-music-search.vue
+++ b/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,
diff --git a/src/config/router.config.js b/src/config/router.config.js
index e3d511e..c7b9eed 100644
--- a/src/config/router.config.js
+++ b/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',
--
Gitblit v1.9.1