From 38a800ff006e7d90342ceb53ad547a8aaa2bd4d5 Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Wed, 24 Aug 2022 03:42:28 +0800
Subject: [PATCH] 月台新增图库标签
---
/dev/null | 55 ------
src/components/mini/mdDetail.vue | 12 +
src/api/blogArticle.js | 11 +
src/components/group/platformGroup.vue | 245 ++++++------------------------
src/components/mini/box17-linkAdd.vue | 0
src/components/group/MyLink.vue | 2
src/config/router.config.js | 12 +
src/components/mini/box18-photoShow.vue | 124 +++++++++++++++
src/components/swichLabel/main2-music-search.vue | 2
9 files changed, 207 insertions(+), 256 deletions(-)
diff --git a/src/api/blogArticle.js b/src/api/blogArticle.js
index fe82f26..818fae8 100644
--- a/src/api/blogArticle.js
+++ b/src/api/blogArticle.js
@@ -37,3 +37,14 @@
data: parameter
})
}
+
+/**
+ * 月台列表查询
+ */
+export function platform(parameter) {
+ return axios({
+ url: '/outside/blogArticle/platform',
+ method: 'get',
+ params: parameter
+ })
+}
diff --git a/src/components/group/MyLink.vue b/src/components/group/MyLink.vue
index 96cd4ee..1d7e8c3 100644
--- a/src/components/group/MyLink.vue
+++ b/src/components/group/MyLink.vue
@@ -14,7 +14,7 @@
</template>
<script>
- import LinkAdd from "../mini/box-17-linkAdd.vue"
+ import LinkAdd from "../mini/box17-linkAdd.vue"
import {
addLink
} from '../../api/blogLink.js'
diff --git a/src/components/group/platformGroup.vue b/src/components/group/platformGroup.vue
index 9b39852..7b2393e 100644
--- a/src/components/group/platformGroup.vue
+++ b/src/components/group/platformGroup.vue
@@ -1,208 +1,59 @@
<template>
- <div class="gridClass">
- <div class="entry-preview" v-for="item in data">
- <div class="thumbnail_box">
-
- <div class="thumbnail" @click="show(item.coverFileURL)">
- <img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy">
- </div>
-
- </div>
- <div class="entry-post">
- <div class="entry-header">
- <h5 class="entry-title">
- <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
- {{item.title}}
- </router-link>
- <!-- {{item.title}} -->
- </h5>
- <div class="post_content">
- {{item.introduce}}
- </div>
- </div>
- <div class="entry-meta">
- <div class="post-categories">
- <span class="tag vcard">
- <a-icon type="customer-service" />
- <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
- </span>
- <!-- <span class="tag-list">
- <a href="#" rel="tag">影评</a>
- <a href="#" rel="tag">电影</a>
- <a href="#" rel="tag">蜘蛛侠</a>
- </span> -->
- </div>
- <div class="post-on">
- <span class="entry-date">
- <a-icon type="calendar" />
- <a href="#" rel="bookmark">
- {{item.publishDate}}
- </a>
- </span>
- </div>
- </div>
- </div>
-
- </div>
-
- </div>
+ <a-tabs :defaultActiveKey="activeKey" :tabBarStyle="{'display': 'flex','justify-content': 'center'}">
+ <a-tab-pane key="1" tab="片刻">
+ <videoList v-on="$listeners" :activeKey="activeKey"></videoList>
+ </a-tab-pane>
+ <a-tab-pane key="2" tab="流影">
+ <photoShow :activeKey="activeKey"></photoShow>
+ </a-tab-pane>
+ <a-tab-pane key="3" tab="谱库">
+ <photoShow :activeKey="activeKey"></photoShow>
+ </a-tab-pane>
+ </a-tabs>
</template>
+
<script>
- import {
- api as viewerApi
- } from "v-viewer"
+ import videoList from "../mini/box14-video.vue"
+ import photoShow from "../mini/box18-photoShow.vue"
+
export default {
- data() {
- return {
- options: {
- 'inline': false, // 是否启用inline模式
- 'button': true, // 是否显示右上角关闭按钮
- 'navbar': true, // 是否显示缩略图底部导航栏
- 'title': false, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
- 'toolbar': false, // 是否显示工具栏
- 'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true
- 'fullscreen': true, // 播放时是否全屏，默认true
- 'loading': true, // 加载图片时是否显示loading图标，默认true
- 'loop': true, // 是否可以循环查看图片，默认true
- 'movable': true, // 是否可以拖得图片，默认true
- 'zoomable': true, // 是否可以缩放图片，默认true
- 'rotatable': true, // 是否可以旋转图片，默认true
- 'scalable': true, // 是否可以翻转图片，默认true
- 'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true
- 'transition': true, // 使用 CSS3 过度，默认true
- 'keyboard': true, // 是否支持键盘，默认true
- 'zoomRatio': 0.2, // 鼠标滚动时的缩放比例，默认0.1
- 'minZoomRatio': 0.5, // 最小缩放比例，默认0.01
- 'maxZoomRatio': 2.0, // 最大缩放比例，默认100
- // 'url': 'data-source' // 设置大图片的 url
- },
- data: [{
- "id": "1560643564944228354",
- "title": "把他们全部驱逐出去,一只不剩!",
- "articleFileURL": null,
- "coverFileURL": "http://t.inleft.com/blog//cover/1560643556949884929.jpg",
- "articleFileType": 3,
- "articleTypeId": "10",
- "articleTypeName": "前方高能",
- "introduce": "出处：进击的巨人第一季第25集\r\n时间点：10分左右",
- "lastEditorDate": null,
- "publishDate": "2022-08-19",
- "updateDate": "2022-08-19",
- "isTop": 0,
- "authStatus": 1,
- "isAllowedComment": 1,
- "isAnyUpdate": 0,
- "jumpURL": null,
- "previousRecord": null,
- "nextRecord": null
- }, {
- "id": "1560637549020446722",
- "title": "名场面之兵长砍猴",
- "articleFileURL": null,
- "coverFileURL": "http://t.inleft.com/blog//cover/1560637517290536962.jpg",
- "articleFileType": 3,
- "articleTypeId": "10",
- "articleTypeName": "前方高能",
- "introduce": "出处：进击的巨人第三季第17集\r\n时间点：5分左右",
- "lastEditorDate": null,
- "publishDate": "2022-08-19",
- "updateDate": "2022-08-19",
- "isTop": 0,
- "authStatus": 1,
- "isAllowedComment": 1,
- "isAnyUpdate": 0,
- "jumpURL": null,
- "previousRecord": null,
- "nextRecord": null
- }, {
- "id": "1560251661752991748",
- "title": "艾尔文团长的冲锋",
- "articleFileURL": null,
- "coverFileURL": "http://t.inleft.com/blog//cover/1560331526686638082.jpg",
- "articleFileType": 3,
- "articleTypeId": "10",
- "articleTypeName": "前方高能",
- "introduce": "出处：进击的巨人第三季第16集\r\n时间点：21分左右",
- "lastEditorDate": null,
- "publishDate": "2022-08-18",
- "updateDate": "2022-08-18",
- "isTop": 0,
- "authStatus": 1,
- "isAllowedComment": 1,
- "isAnyUpdate": 0,
- "jumpURL": null,
- "previousRecord": null,
- "nextRecord": null
- }, {
- "id": "1560251661752991747",
- "title": "我今日就要带她走,我睇下边个敢拦胆我!",
- "articleFileURL": null,
- "coverFileURL": "http://t.inleft.com/blog//cover/1560332612973625346.jpg",
- "articleFileType": 3,
- "articleTypeId": "10",
- "articleTypeName": "前方高能",
- "introduce": "出处：刺客伍六七第一季第9集\r\n时间点：13分左右",
- "lastEditorDate": null,
- "publishDate": "2022-08-18",
- "updateDate": "2022-08-18",
- "isTop": 0,
- "authStatus": 1,
- "isAllowedComment": 1,
- "isAnyUpdate": 0,
- "jumpURL": null,
- "previousRecord": null,
- "nextRecord": null
- }, {
- "id": "1560251661752991746",
- "title": "Death Note",
- "articleFileURL": null,
- "coverFileURL": "http://t.inleft.com/blog//cover/1560251636746551298.jpg",
- "articleFileType": 3,
- "articleTypeId": "10",
- "articleTypeName": "前方高能",
- "introduce": "出处：Death Note7集\r\n时间点：12分左右",
- "lastEditorDate": null,
- "publishDate": "2022-08-18",
- "updateDate": "2022-08-18",
- "isTop": 0,
- "authStatus": 1,
- "isAllowedComment": 1,
- "isAnyUpdate": 0,
- "jumpURL": null,
- "previousRecord": null,
- "nextRecord": null
- }, {
- "id": "1560239309611597825",
- "title": "罪恶王冠·王的黑化",
- "articleFileURL": null,
- "coverFileURL": "http://t.inleft.com/blog//cover/1560241671403208705.jpg",
- "articleFileType": 3,
- "articleTypeId": "10",
- "articleTypeName": "前方高能",
- "introduce": "出处：罪恶王冠15集\r\n时间点：16分左右\r\n",
- "lastEditorDate": null,
- "publishDate": "2022-08-18",
- "updateDate": "2022-08-18",
- "isTop": 0,
- "authStatus": 1,
- "isAllowedComment": 1,
- "isAnyUpdate": 0,
- "jumpURL": null,
- "previousRecord": null,
- "nextRecord": null
- }]
- }
+ components: {
+ videoList,
+ photoShow
+ },
+ created() {
+ this.getActiveKey()
+ },
+ watch: {
+ '$route'(to, from) {
+ if ("platform" === to.name) {
+ this.getActiveKey()
+ }
+ },
},
methods: {
- show(param) {
- console.log(111);
- viewerApi({
- options: this.options,
- image: param
- })
+ getActiveKey() {
+ if (this.$route.query.activeKey == "" || this.$route.query.activeKey == undefined) {
+ this.activeKey = this.defaultActiveKey;
+ } else {
+ this.activeKey = this.$route.query.activeKey;
+ }
+ },
+ },
+ data() {
+ return {
+ activeKey: "1",
+ defaultActiveKey: "1",
}
- }
+ },
+
}
</script>
+
+<style lang="less">
+ .ant-tabs-tab {
+ user-select: none;
+ }
+</style>
diff --git a/src/components/group/platformGroup2.vue b/src/components/group/platformGroup2.vue
deleted file mode 100644
index f7b98fc..0000000
--- a/src/components/group/platformGroup2.vue
+++ /dev/null
@@ -1,55 +0,0 @@
-<template>
- <!-- <a-tabs :centered="true">
- <a-tab-pane key="1" tab="片刻">
- <videoList v-on="$listeners"></videoList>
- </a-tab-pane>
- <a-tab-pane key="2" tab="流影">
- <a-tab-pane key="2" tab="谱库">
-
-
- </a-tab-pane>
- </a-tabs> -->
-
-
- <div>
- <!-- <viewer :options="options" :images="images" @inited="inited" class="viewer" ref="viewer">
- <template scope="scope">
- <img v-for="src in scope.images" :src="src" :key="src">
- {{scope.options}}
- </template>
- </viewer>
- <button type="button" @click="show">Show</button> -->
- 11
- </div>
-</template>
-
-<script>
- // import videoList from "../mini/box14-video.vue"
- // import 'viewerjs/dist/viewer.css'
- // // import Viewer from "v-viewer/src/component.vue"
- // import Viewer from "v-viewer/dist/v-viewer.min.js"
-
- export default {
- // components: {
- // videoList,
- // Viewer
- // },
- // data() {
- // images: ['1.jpg', '2.jpg']
- // },
- // methods: {
- // inited(viewer) {
- // this.$viewer = viewer
- // },
- // show() {
- // //调用$viewer的show方法，默认显示第一张图片
- // this.$viewer.show()
- // //如果需要指定显示某一张图片使用view方法，index是指定的那张图片所在数组的位置索引
- // //this.$viewer.view(index)
- // }
- // }
- }
-</script>
-
-<style>
-</style>
diff --git a/src/components/mini/box-17-linkAdd.vue b/src/components/mini/box17-linkAdd.vue
similarity index 100%
rename from src/components/mini/box-17-linkAdd.vue
rename to src/components/mini/box17-linkAdd.vue
diff --git a/src/components/mini/box18-photoShow.vue b/src/components/mini/box18-photoShow.vue
new file mode 100644
index 0000000..85c5c8e
--- /dev/null
+++ b/src/components/mini/box18-photoShow.vue
@@ -0,0 +1,124 @@
+<template>
+ <div>
+ <div class="gridClass">
+ <div class="entry-preview" v-for="item in data">
+ <div class="thumbnail_box">
+ <div class="thumbnail" @click="show(item.pictureUrlList)">
+ <img :src="item.coverFileURL" :key="item.id" alt="" loading="lazy" :onerror="img404">
+ </div>
+ </div>
+ <div class="entry-post">
+ <div class="entry-header">
+ <h5 class="entry-title">
+ <router-link :to="{path:'videoDetail',query:{id:item.id}}" :title="item.title">
+ {{item.title}}
+ </router-link>
+ </h5>
+ <div class="post_content">
+ {{item.introduce}}
+ </div>
+ </div>
+ <div class="entry-meta">
+ <div class="post-categories">
+ <span class="tag vcard">
+ <a-icon type="customer-service" />
+ <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
+ </span>
+ </div>
+ <div class="post-on">
+ <span class="entry-date">
+ <a-icon type="calendar" />
+ <a href="#" rel="bookmark">
+ {{item.publishDate}}
+ </a>
+ </span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <a-row type="flex" justify="center">
+ <div>
+ <a-pagination @change="onChange" :showQuickJumper="true" :size="page.size" v-model="page.current"
+ :defaultPageSize="page.defaultPageSize" :pageSize="page.pageSize" :total="page.total" />
+ </div>
+ </a-row>
+ </div>
+
+</template>
+<script>
+ import {
+ api as viewerApi
+ } from "v-viewer"
+
+ import {
+ platform
+ } from '../../api/blogArticle.js'
+
+ import myConstant from "../../config/myConstant.js"
+
+ export default {
+ data() {
+ return {
+ options: {
+ 'inline': false, // 是否启用inline模式
+ 'button': true, // 是否显示右上角关闭按钮
+ 'navbar': true, // 是否显示缩略图底部导航栏
+ 'title': false, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
+ 'toolbar': false, // 是否显示工具栏
+ 'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true
+ 'fullscreen': true, // 播放时是否全屏，默认true
+ 'loading': true, // 加载图片时是否显示loading图标，默认true
+ 'loop': true, // 是否可以循环查看图片，默认true
+ 'movable': true, // 是否可以拖得图片，默认true
+ 'zoomable': true, // 是否可以缩放图片，默认true
+ 'rotatable': true, // 是否可以旋转图片，默认true
+ 'scalable': true, // 是否可以翻转图片，默认true
+ 'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true
+ 'transition': true, // 使用 CSS3 过度，默认true
+ 'keyboard': true, // 是否支持键盘，默认true
+ 'zoomRatio': 0.1, // 鼠标滚动时的缩放比例，默认0.1
+ 'minZoomRatio': 0.3, // 最小缩放比例，默认0.01
+ 'maxZoomRatio': 2.0, // 最大缩放比例，默认100
+ // 'url': 'data-source' // 设置大图片的 url
+ },
+ page: {
+ size: "small",
+ total: 1,
+ pageSize: 6,
+ current: 1,
+ defaultPageSize: 6
+ },
+ data: [],
+ img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/idea_beijing.jpg\"",
+ }
+ },
+ mounted() {
+ this.onChange(this.page.current);
+ },
+ methods: {
+ onChange(current) {
+ this.page.current = current;
+ platform({
+ pageNo: current,
+ pageSize: this.page.pageSize,
+ fileType: 9,
+ typeId: 99,
+ activeKey:this.$attrs.activeKey
+ }).then((res) => {
+ this.page.total = Number(res.data.total)
+ this.page.pageSize = Number(res.data.size);
+ this.data = res.data.records;
+ return res
+ })
+ },
+ show(param) {
+ viewerApi({
+ options: this.options,
+ images: param
+ })
+ }
+ }
+
+ }
+</script>
diff --git a/src/components/mini/mdDetail.vue b/src/components/mini/mdDetail.vue
index 1fc7e24..73ac63e 100644
--- a/src/components/mini/mdDetail.vue
+++ b/src/components/mini/mdDetail.vue
@@ -50,6 +50,9 @@
</pre>
</div>
<div v-viewer.static class="markdown-body article-detail" v-else>
+ <div class="articleTitle">
+ <h4>{{articelMeta.title}}</h4>
+ </div>
<vue-markdown :source="source"></vue-markdown>
</div>
</div>
@@ -271,6 +274,15 @@
<style lang="less">
@import '../../assets/md.less';
+ .articleTitle {
+ h4{
+ margin: 0px 0px 20px 0px;
+ -webkit-line-clamp: 1;
+ }
+ text-align: center;
+ width: 100%;
+
+ }
.headertop {
position: relative;
diff --git a/src/components/swichLabel/main2-music-search.vue b/src/components/swichLabel/main2-music-search.vue
index b5dc323..52c2777 100644
--- a/src/components/swichLabel/main2-music-search.vue
+++ b/src/components/swichLabel/main2-music-search.vue
@@ -33,7 +33,7 @@
data() {
return {
- searchType: "视频/乐谱 搜索",
+ searchType: "月台搜索",
colApiLeft: {
xs: 24,
sm: {
diff --git a/src/config/router.config.js b/src/config/router.config.js
index 1356650..98a4291 100644
--- a/src/config/router.config.js
+++ b/src/config/router.config.js
@@ -82,11 +82,19 @@
{
path: '/platform',
component: platform,
- children: [{
+ children: [
+ // {
+ // path: '/',
+ // name: "videoList",
+ // component: videoList,
+ // },
+ {
path: '/',
name: "platformGroup",
component: platformGroup,
- }, {
+ },
+
+ {
path: '/videoDetail',
name: "videoDetail",
component: videoDetail,
--
Gitblit v1.9.1