日志内容详情页多媒体适配
markdown 内图片增加viewer相应

 src/components/group/platformGroup.vue

@@ -1,5 +1,5 @@
<template>

	
    <a-tabs :defaultActiveKey="activeKey" @change="changeKey"
        :tabBarStyle="{'display': 'flex','justify-content': 'center'}">
        <a-tab-pane :key="keyType.type_1" tab="片刻">
@@ -44,8 +44,9 @@
                    var random = Math.floor(Math.random() * 10);
                    this.activeKey = random >= 8 ?
                        this.keyType.type_3 : (random <= 3 ? this.keyType.type_2 : this.keyType.type_1)
						
                    this.$router.replace({query:{activeKey:this.activeKey}})
                }
                this.$router.replace({query:{activeKey:this.activeKey}})
            },
            changeKey(key) {
                this.activeKey = key

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

@@ -96,9 +96,9 @@
        methods: {
            routerJump(id, articleFileType, typeId) {
                let routerName = "mdDetail";
                if (articleFileType == this.fileType.fileTypeVideo_3) {
                    routerName = "videoDetail";
                }
                // if (articleFileType == this.fileType.fileTypeVideo_3) {
                //     routerName = "videoDetail";
                // }

                this.$router.push({
                    name: routerName,
@@ -107,11 +107,11 @@
                        articleFileType: articleFileType,
                        typeId: typeId
                    },
                    params: {
                        id: id,
                        articleFileType: articleFileType,
                        typeId: typeId
                    }
                    // params: {
                    //     id: id,
                    //     articleFileType: articleFileType,
                    //     typeId: typeId
                    // }
                })
            },
            routerToPlatform() {

 src/components/mini/box10-add.vue

@@ -58,7 +58,7 @@
                    </span>
                </a-form-model-item>

                <a-form-model-item label=" 日志类型">
                <a-form-model-item label=" 日志主类型">
                    <a-select v-model="form.blogType" mode="default" placeholder=""
                        :getPopupContainer="getCalendarContainer()">
                        <a-select-option value="1">
@@ -68,10 +68,16 @@
                            html
                        </a-select-option>
                        <a-select-option value="3">
                            video
                            视频
                        </a-select-option>
                        <a-select-option value="3">
                            音频
                        </a-select-option>
                        <a-select-option value="5">
                            fast(闪念)
                            图组
                        </a-select-option>
                        <a-select-option value="9">
                            taking
                        </a-select-option>
                    </a-select>
                </a-form-model-item>

 src/components/mini/box13-reply.vue

@@ -31,7 +31,7 @@
                <span v-html="parseContent(msgInfo.userComment).replace(/\n/g, '<br>')"></span>
            </div>
        </div>
        <a-comment>
        <a-comment  style="min-height: 320px;">
            <div slot="content">
                <MyOwO :content.sync="form.visitorContent" :replyHolder="replyHolder"></MyOwO>
                <div>

 src/components/mini/box15-videoPlayBox.vue

@@ -1,12 +1,12 @@
<template>
    <div>
        <div>
        <div v-if="!this.$attrs.showTar">
            正在播放: <span> {{playingVideoData.title}} </span>
        </div>
        <div class="myVideo fade">
            <div id="videoPlay" ref="myVdeoPlay"></div>
        </div>
        <div style="border-radius: 0 0 4px 4px;">
        <div style="border-radius: 0 0 4px 4px;" v-if="!this.$attrs.showTar">

            <div style="padding: 10px 0px;">
                音量 :
@@ -163,7 +163,14 @@
                    this.$message.error("无效资源..")
                    return
                }
				
                if (videoData.url != null && videoData.urlL != "" && videoData.url.endsWith("m3u8")) {
                    videoData.type = "customHls";
                } else {
                    videoData.type = "normal";
                }

				
                //重要!!防止hls类型视频在切换后不停在后台缓存
                if (this.hls != null) {
                    this.hls.destroy();

 src/components/mini/box16-videoDetail.vue

@@ -163,13 +163,12 @@
                        this.myLock = !this.myLock;
                        return
                    }
                    console.log(3333);

                    if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) {
                        this.$notification.error({
                            message: '该日志还没有上传视频资源..',
                            placement: 'bottomRight'
                        });
                        return
                    }

                    this.isAllowedComment = res.data.isAllowedComment;
@@ -181,15 +180,6 @@
                    this.videoData.title = res.data.title;
                    this.videoData.introduce = res.data.introduce;
                    this.videoData.id = res.data.id;


                    if (res.data.articleFileURL != null &&
                        res.data.articleFileURL != "" &&
                        res.data.articleFileURL.endsWith("m3u8")) {
                        this.videoData.type = "customHls";
                    } else {
                        this.videoData.type = "normal";
                    }

                    this.myLock = !this.myLock;
                    if (this.lastArticleId != this.articleId) {
@@ -203,10 +193,6 @@
    }
</script>
<style lang="less">
    pre {
        font-family: 'HYTangMeiRen';
        src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype");
    }

    .boxMain {
        user-select: none;

 src/components/mini/box18-photoShow.vue

@@ -11,7 +11,7 @@
                    <div class="entry-post">
                        <div class="entry-header">
                            <h5 class="entry-title">
                                <router-link :to="{name:'mdDetail',query:{id:item.id,typeId:item.articleTypeId}}" :title="item.title">
                                <router-link :to="{name:'mdDetail',query:{id:item.id}}" :title="item.title">
                                    {{item.title}}
                                </router-link>
                            </h5>

 src/components/mini/mdDetail.vue

@@ -6,13 +6,20 @@
            </figure>
        </div>

        <div v-if="showMsg && !myLock">
            <div class="mySecretSamll" v-if="articleFileType==fileType.fileTypeTalking_9">
                <p>碎碎念只有那么一点了</p>
                <p>但是下面依旧可以碎碎念</p>
            </div>
        <div class="mySecret" v-if="myLock">
            <h1>越不正经的人越深情..</h1>
            <h3>受庇护的文字..输入神秘代码以解除封印</h3>

            <div class="mySecret" v-else>
            <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pressEnter">
                <a-input-password @pressEnter="pressEnter">
                    <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                </a-input-password>
            </a-auto-complete>
            <span class="myTip">{{errorMsg}}</span>
        </div>

        <div v-else-if="showMsg">
            <div class="mySecret">
                <h1>怎样才能让你看到我呢</h1>
                <h1>只要你要,只要我有...</h1>
                <span class="myTip">{{errorMsg}}</span>
@@ -20,37 +27,62 @@
        </div>

        <div v-else>
            <div class="mySecret" v-if="myLock">
                <h1>越不正经的人越深情..</h1>
                <h3>受庇护的文字..输入神秘代码以解除封印</h3>
            <div v-if="articleFileType==fileType.fileTypeTalking_9">
                <div class="markdown-body  articleTitle">
                    <h4>{{articelMeta.title}}</h4>

                <a-auto-complete v-model="secret" ref="mySearch" v-bind="search" @blur="pressEnter">
                    <a-input-password @pressEnter="pressEnter">
                        <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
                    </a-input-password>
                </a-auto-complete>
                <span class="myTip">{{errorMsg}}</span>
            </div>

            <div class="mySecret" v-else-if="articleFileType==fileType.fileTypeVideo_3
                || articleFileType==fileType.fileTypeVideo_3
                || articleFileType==fileType.fileTypeTalking_9">

                <div class="mySecretSamll" v-if="introduce.length==0">
                    <p>碎碎念只有那么一点了22</p>
                    <p>但是下面依旧可以碎碎念</p>
                    <div class="introduceSamll" v-if="introduce.length==0">
                        <p>空荡荡的..我好像忘记写点什么了OωO</p>
                    </div>
                    <div class="introduce" v-else>
                        <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
                        {{introduce}}
                        </pre>
                    </div>
                </div>
                <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
                    {{introduce}}
                </pre>
            </div>
            <div v-viewer.static class="markdown-body article-detail" v-else>

            <div class="introduce"
                v-else-if="articleFileType==fileType.fileTypeVideo_3 || articleFileType==fileType.fileTypeMp3_4">
                <div class="markdown-body  articleTitle">
                    <h4>{{articelMeta.title}}</h4>
                </div>
                <div class="playBox">
                    <videoPlayBox ref="videoPlayBox" :showTar="true"></videoPlayBox>
                </div>
                <div class="introduce">
                    <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
                    {{introduce}}
                    </pre>
                </div>
            </div>

            <div class="introduce" v-else-if="articleFileType==fileType.fileTypePictures_5">
                <div class="markdown-body  articleTitle">
                    <h4>{{articelMeta.title}}</h4>
                </div>
                <div class="myPicture" @click="showPicture(articelMeta.pictureUrlList)">
                    <div>
                        <img :src="articelMeta.pictureUrlList[0]" :key="articelMeta.id" alt="" loading="lazy"
                            :onerror="img404">
                    </div>
                    <div style="text-align: center;">图组数量:{{articelMeta.pictureUrlList.length}}</div>
                </div>
                <div class="introduce">
                    <pre style="white-space: pre-line;padding: 10px;max-width: 100%;">
                    {{introduce}}
                    </pre>
                </div>
            </div>

            <div v-viewer.static="options" class="markdown-body " v-else>
                <div class="articleTitle">
                    <h4>{{articelMeta.title}}</h4>
                </div>
                <vue-markdown :source="source"></vue-markdown>
            </div>
        </div>

        <!-- <div class="articleInfoMiniData">
            <div>
                <a-icon type="calendar" class="samllPadding" />
@@ -74,7 +106,12 @@
                <a-icon type="folder-open" class="samllPadding" />
        </div> -->

        <div class="jumpURL" v-if="articelMeta.jumpURL">
            外链：<a target="_blank" :href="articelMeta.jumpURL" :title="articelMeta.jumpURL">{{articelMeta.jumpURL}}</a>
        </div>
		
        <div class="articleInfoMiniData">

            <div class="myTitleDeal">
                <a-icon type="left" />
                <a-tooltip placement="bottomLeft" :title="'上一篇: '+articelMeta.previousRecord.title"
@@ -87,6 +124,7 @@
                </a-tooltip>
                <span v-else class="myTip">到顶啦..</span>
            </div>

            <div style="display: -webkit-box;">
                <div class="myTitleDeal">
                    <a-tooltip placement="bottomLeft" :title="'下一篇: '+articelMeta.nextRecord.title"
@@ -117,27 +155,37 @@
    import {
        queryBlogArticleDetail
    } from '../../api/blogArticle.js'
	

    import comment from "../mini/box12-comment.vue"

    import axios from 'axios'
    import myConstant from "../../config/myConstant.js"
    import optionsConfig from "../../config/v-viewer-Config.js"
    import videoPlayBox from "../mini/box15-videoPlayBox.vue"
    import {
        api as viewerApi
    } from "v-viewer"


    export default {
        components: {
            VueMarkdown,
            comment
            comment,
            videoPlayBox
        },
        data() {
            return {
                fileType: myConstant.fileType,
                articelMeta: '',
                isAllowedComment: 1,
                introduce: "",
                articleId: "",
                articleFileType: myConstant.fileType.fileTypeMarkDown_1,
                typeId: null,

                fileType: myConstant.fileType,
                articelMeta: '',
                isAllowedComment: 1,
                coverURL: "",
                introduce: "",
                source: "",

                showMsg: false,
                myLock: false,
                errorMsg: '',
@@ -149,22 +197,33 @@
                    value: '',
                    disabled: false
                },
                coverURL: ""
                videoData: {
                    img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                    url: "",
                    type: "normal",
                    title: "",
                    introduce: "",
                    id: ""
                },
                options: optionsConfig,
                img404: myConstant.img404,
            }
        },
        created() {
            console.log(111);
            console.log(this.$route.params);
            this.articleId = this.$route.query.id;
            this.articleFileType = this.$route.query.articleFileType;
            this.typeId = this.$route.query.typeId;


        },
        watch: {
            '$route'(to, from) {
                if ("mdDetail" === to.name) {
                    this.articleId = this.$route.query.id;
                    this.articleFileType = this.$route.query.articleFileType;
                    this.typeId = this.$route.query.typeId;
                    if (this.articleId != this.$route.query.id) {
                        this.articleId = this.$route.query.id;
                        this.articleFileType = this.$route.query.articleFileType;
                        this.typeId = this.$route.query.typeId;
                    }
                }
            },
            articleId: function(newValue, oldValue) {
@@ -181,9 +240,16 @@
            articleOptionHandle(type) {
                this.$message.info(type)
            },
            showPicture(param) {
                viewerApi({
                    options: this.options,
                    images: param
                })
            },
            queryDetail() {
                this.showMsg = true;
                this.errorMsg = "加载中..";
                let _this = this;

                queryBlogArticleDetail({
                    id: this.articleId,
@@ -191,7 +257,6 @@
                    typeId: this.typeId,
                    fileType: this.articleFileType
                }).then((res) => {
                    this.showMsg = true;
                    this.myLock = false;
                    this.errorMsg = res.message;
                    this.source = "";
@@ -238,6 +303,30 @@
                                    this.$message.error("获取文件好像失败了..", 3)
                                ])
                        }
                    } else if (res.data.articleFileType == this.fileType.fileTypeVideo_3) {
                        if (res.data.videoUrlList == null || res.data.videoUrlList.length < 1) {
                            this.$notification.error({
                                message: '该日志还没有上传视频资源..',
                                placement: 'bottomRight'
                            });
                        } else {
                            this.videoData.url = res.data.videoUrlList[0];

                            this.videoData.img = res.data.coverFileURL;
                            this.videoData.title = res.data.title;
                            this.videoData.introduce = res.data.introduce;
                            this.videoData.id = res.data.id;
                            if (this.lastArticleId != this.articleId) {
                                console.log(111);
                                let tempParam = JSON.parse(JSON.stringify(this.videoData))

                                _this.$nextTick(function() {
                                    _this.$refs.videoPlayBox.startPlay(tempParam)
                                })
                            }
                        }


                    }

                    //获取日志资源文件
@@ -276,6 +365,19 @@
        text-align: center;
        width: 100%;

    }

    .myPicture {
        display: grid;
        width: 50%;
        padding: 20px 0px 0px 0px;

        img {
            display: block;
            width: 100%;
            transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
            border-radius: 16px;
        }
    }

    .headertop {
@@ -345,6 +447,16 @@
        -o-transform: scale(1.55, 1.55);
    }

    .jumpURL {
        box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
        padding: 10px 23px;
        margin: 20px 0px;

        a {
            color: black;
        }
    }

    .articleInfoMiniData {
        user-select: none;
        box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
@@ -371,7 +483,11 @@
    }

    .mySecret {
        height: 515px;
        height: 315px;
    }

    .mySecret,
    .introduce {
        display: flex;
        flex-direction: column;
        justify-content: center;
@@ -379,7 +495,8 @@
        align-items: center;
    }

    .mySecretSamll {
    .mySecretSamll,
    .introduceSamll {
        padding: 30px 10px 10px;
        height: 115px;
        display: flex;

 src/config/router.config.js

@@ -80,7 +80,6 @@
                }]
            },
            {
                name: "platform",
                path: '/platform',
                component: platform,
                children: [

 src/config/screenConfig.js

@@ -75,8 +75,8 @@
            offset: 4,
        },
        xxl: {
            span: 17,
            offset: 4,
            span: 13,
            offset: 6,
        },
    },
    // 放大版布局

 src/config/v-viewer-Config.js

@@ -4,7 +4,7 @@
    'button': true, // 是否显示右上角关闭按钮
    'navbar': true, // 是否显示缩略图底部导航栏
    'title': false, // 是否显示当前图片标题，默认显示alt属性内容和尺寸
    'toolbar': false, // 是否显示工具栏
    'toolbar': true, // 是否显示工具栏
    'tooltip': true, // 放大或缩小图片时，是否显示缩放百分比，默认true
    'fullscreen': true, // 播放时是否全屏，默认true
    'loading': true, // 加载图片时是否显示loading图标，默认true
@@ -12,7 +12,7 @@
    'movable': true, // 是否可以拖得图片，默认true
    'zoomable': true, // 是否可以缩放图片，默认true
    'rotatable': true, // 是否可以旋转图片，默认true
    'scalable': true, // 是否可以翻转图片，默认true
    'scalable': false, // 是否可以翻转图片，默认true
    'toggleOnDblclick': true, // 放大或缩小图片时，是否可以双击还原，默认true
    'transition': true, // 使用 CSS3 过度，默认true
    'keyboard': true, // 是否支持键盘，默认true

 src/main.js

@@ -12,8 +12,8 @@

import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'
 Vue.use(VueViewer)
 
Vue.use(VueViewer)


import 'animate.css'
// import wow from 'wowjs'