优化上传逻辑,月台添加mini播放弹窗

 src/components/group/MyModal.vue

@@ -91,7 +91,8 @@
                // }, 3000);
            },
            reset(e) {
                var res = this.$refs.modalBox.$refs.myForm.resetFields()
                var res = this.$refs.modalBox.$refs.myForm.resetFields();
                //this.$refs.modalBox.reset();
            },
            handleCancel(e) {
                this.visible = false;

 src/components/group/articleListScorll.vue

@@ -1,5 +1,5 @@
<template>
    <div>
    <div class="fade">
        <div v-infinite-scroll="loadMore" infinite-scroll-disabled="busy" :infinite-scroll-distance="10">
            <div class="mySecret" v-if="data.length==0">
                <p>空空如也..</p>
@@ -11,7 +11,7 @@
            </div>


            <div v-if="loading && !busy" class="demo-loading-container">
            <div v-if="loading && !busy" class="loading-container">
                <a-spin />
            </div>
        </div>
@@ -68,21 +68,22 @@
                }
            },
            typeId: function(newValue, oldValue) {
                this.busy = true;
				
                //有条件不刷新
                if (newValue == undefined && oldValue != "") {
                    return
                }
				
                // if (newValue == undefined || oldValue == "") {
                //     return
                // }

                this.busy = true;
                this.$message.info('loading', 0.3);
                this.onChange(1);
            },
        },
        activated() {
            this.busy = false;
            window.addEventListener('scroll', this);
        },
        deactivated() {
            this.busy = true;
            window.removeEventListener('scroll', this);
        },
        methods: {
@@ -136,7 +137,7 @@
    };
</script>
<style>
    .demo-loading-container {
    .loading-container {
        position: absolute;
        bottom: 40px;
        width: 100%;

 src/components/group/tool.vue

@@ -8,6 +8,7 @@
            <!-- <a-button @click="showDrawer2">
                抽屉2
            </a-button> -->
			
            <a-button @click="showMessage">
                <a-badge status="success">
                    消息
@@ -28,7 +29,10 @@
                    <a-icon :type="iconType" />
                </transition>
            </a-button>

            <a-button @click="addLink" v-if="showHidenButton">
                加链
                <a-icon type="smile" />
            </a-button>

            <!-- <a-button>
                工具
@@ -39,15 +43,28 @@
</template>

<script>
    import myConstant from "../../config/myConstant.js"

    export default {
        data() {
            return {
                iconType: "arrows-alt",
                screen: false,
                screenModel: "拉伸"
                screenModel: "拉伸",
                showHidenButton: false,
            }
        },
        mounted() {
            let tempVisitorData = localStorage.getItem(myConstant.visitorDataKey);
            if (tempVisitorData != null && JSON.parse(tempVisitorData).nickName == myConstant.userName) {
                //this.$message.info("认证成功..")
                this.showHidenButton = true
            }
        },
        methods: {
            addLink() {
                this.$message.info("添加友链中..")
            },
            showMessage() {
                this.$emit('showMessage')
            },

 src/components/layouts/baseLayout.vue

@@ -13,6 +13,11 @@
            <AplayerBox />
            <tagFooter />
            <MyVideo ref="MyVideo" />
            <a-button v-if="miniVideoPlayData!=null" class="fadeInRight"
                style="position: fixed;right: 0px;bottom: 120px;" @click="showMyVideo(miniVideoPlayData)">
                视频盒子
                <a-icon type="youtube" />
            </a-button>
        </a-layout-footer>

        <a-back-top>
@@ -36,12 +41,24 @@
        },
        data() {
            return {

                miniVideoPlayData: null,
                showMiniBox: false
            }
        },
        methods: {
            showMyVideo(param) {
                this.miniVideoPlayData = param;
                console.log("开启mini盒子");


                this.$refs.MyVideo.showModal(param);
                if (!this.showMiniBox) {
                    this.$notification.info({
                        message: '这里是盒子的最小化啦..',
                        placement: 'bottomRight',
                    });
                    this.showMiniBox = true;
                }
            },
            // 下载文件
            down: function() {

 src/components/mini/box-friend.vue

@@ -35,7 +35,7 @@
        },
        data() {
            return {
                img404: "this.onerror='';this.src=\"https://blog.zeruns.tech/tx.jpg\"",
                img404: "this.onerror='';this.src=\"http://t.inleft.com/share/media_photo/404.png\"",
                list: []
            }
        }

 src/components/mini/box10-add.vue

@@ -22,11 +22,9 @@
            </a-form-model-item>

            <a-form-model-item label="日志文件" v-show="!form.online">

                <a-upload :customRequest="customRequest" name="file" :showUploadList="true" @change="handleChange"
                    :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
                    :data="{'fileType':fileTypeMarkDown}">

                <a-upload ref="blogFileUpload" :customRequest="customRequest" name="file" :showUploadList="true"
                    @change="handleChange" :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
                    :data="{'fileType':fileTypeMarkDown}" accept=".md,.html,.htm,.txt">
                    <a-button>
                        <a-icon type="upload" />限 markdown/html
                    </a-button>
@@ -104,8 +102,10 @@

                <a-form-model-item label="封面">
                    <a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
                        @change="handleChangeCoverFile" :default-file-list="form.coverFileList" 
                        :beforeUpload="beforeUploadCover" :data="{'fileType':fileTypeCover}">
                        :data="{'fileType':fileTypeCover}" @change="handleChangeCoverFile"
                        :default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover"
                        accept=".jpg,.png,.jpeg">
                        <!-- :disabled="form.coverFileList.length>=1" -->
                        <a-button>
                            <a-icon type="upload" />jpg/png/jpeg..
                        </a-button>
@@ -195,18 +195,16 @@
            })
        },
        data() {

            let _this = this;
            let validateContent = (rule, value, callback) => {
                if (this.form.online) {
                    console.log("内容未填");
                    this.$refs.myForm.validateField('content')
                    if (this.form.content == null || this.form.content == "") {
                if (_this.form.online) {
                    //this.$refs.myForm.validateField('content')
                    if (_this.form.content == null || _this.form.content == "") {
                        callback(new Error('内容未填'));
                    }
                } else {
                    console.log("文件未传");
                    this.$refs.myForm.validateField('blogFileList')
                    if (this.form.fileId == null) {
                    //this.$refs.myForm.validateField('blogFileList')
                    if (_this.form.fileId == null) {
                        callback(new Error('文件未传'));
                    }
                }
@@ -289,28 +287,31 @@
            };
        },
        methods: {

            beforeUploadCover(file, fileList) {
                if (this.form.coverFileList.length > 1) {
                    this.$message.error('这里最多上传一个文件');
                    return false;
                }
            reset() {
                // this.form.blogFileList = [];
                // this.form.coverFileList = [];
            },
            beforeUpload(file, fileList) {
            beforeUploadCover(file, fileList) {
                return new Promise((resolve, reject) => {
                    if (this.form.fileId != null) {
                    if (this.form.coverFileList.length >= 1) {
                        this.$message.error('这里最多上传一个文件');
                        return reject(false);
                    }
                    // var testmsg=/^image\/(jpeg|png|jpg)$/.test(file.type)
                    // // var testmsg=/^image\/(md|html|markdown)$/.test(file.type)
                    // if (!testmsg) {
                    //   this.$message.error('上传文件格式不对!');
                    //   return reject(false);
                    // }
                    if (file.size > myConstant.uploadFileSizeLimit) {
                        this.$message.error('上传文件大小不能超过 2M!');
                        return reject(false);
                    }
                    return resolve(true)
                });
            },
            beforeUpload(file, fileList) {
                return new Promise((resolve, reject) => {
                    if (this.form.blogFileList.length >= 1) {
                        this.$message.error('这里最多上传一个文件');
                        return reject(false);
                    }

                    const isLt2M = file.size / 1024 / 1024 <= 2 //图片大小不超过2MB
                    if (!isLt2M) {
                    if (file.size > myConstant.uploadFileSizeLimit) {
                        this.$message.error('上传文件大小不能超过 2M!');
                        return reject(false);
                    }
@@ -319,6 +320,8 @@

            },
            handleChange(info) {
                this.form.blogFileList = info.fileList;

                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
@@ -328,8 +331,14 @@
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }

                if (this.form.blogFileList == null || this.form.blogFileList.length == 0) {
                    this.form.fileId = null
                }
            },
            handleChangeCoverFile(info) {
                this.form.coverFileList = info.fileList;

                if (info.file.status !== 'uploading') {
                    console.log(info.file, info.fileList);
                }
@@ -338,6 +347,10 @@
                    this.$message.success(`${info.file.name} file uploaded successfully`);
                } else if (info.file.status === 'error') {
                    this.$message.error(`${info.file.name} file upload failed.`);
                }

                if (this.form.coverFileList == null || this.form.coverFileList.length == 0) {
                    this.form.coverFile = null
                }
            },
            /**
@@ -365,9 +378,9 @@
                return trigger => trigger.parentNode;
            },
            handleClose(removedTag) {
                const tags = this.tags.filter(tag => tag !== removedTag);
                // const tags = this.tags.filter(tag => tag !== removedTag);
                //console.log(tags);
                this.tags = tags;
                this.tags = this.tags.filter(tag => tag !== removedTag);
            },

            showInput() {

 src/components/mini/box13-reply.vue

@@ -176,7 +176,7 @@
                nickName: "",
                eMail: "",
                homePage: "",
                isReceiveMail: true,
                isReceiveMail: false,
                isSecretMsg: false,
                visitorContent: "",
                parentId: 0,

 src/components/mini/box14-video.vue

@@ -1,5 +1,5 @@
<template>
    <div>
    <div class="fade">
        <div class="mySecretSamll" v-if="data==null|| data.length==0">
            <p>
                <a-icon type="delete" /> 空空如也..
@@ -7,7 +7,7 @@
        </div>
        <div class="gridClass">
            <div class="entry-preview" v-for="item in data">
                <div class="thumbnail_box" @click="showMyVideo(item.id)">
                <div class="thumbnail_box" @click="showMyVideo(item)">
                    <div class="thumbnail">
                        <img :src="item.coverFileURL" alt="" loading="lazy" :onerror="img404">
                    </div>
@@ -15,9 +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>
                            </router-link> -->
                                {{item.title}}
                        </h5>
                        <div class="post_content">
                            {{item.introduce}}
@@ -26,7 +27,7 @@
                    <div class="entry-meta">
                        <div class="post-categories">
                            <span class="tag vcard">
                                <a-icon type="book" />
                                <a-icon type="customer-service" />
                                <a href="#" rel="category tag"> {{item.articleTypeName}}</a>
                            </span>
                            <!-- <span class="tag-list">
@@ -95,9 +96,11 @@
                    return res
                })
            },
            showMyVideo(param) {
            showMyVideo(item) {
                this.$emit('showMyVideo', {
                    id: param
                    id: item.id,
                    isAllowedComment: item.isAllowedComment,
                    introduce: item.introduce,
                })
            }
        }

 src/components/mini/box15-videoPlayBox.vue

@@ -56,11 +56,29 @@
            return {
                dp: null,
                video: {},
                firstLoad: true
            }
        },
        methods: {
            myPlay() {
                this.$message.info("start play..")
            },
            changePlay(videoData) {
                // this.video = {
                //     img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                //     url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
                //     type: "normal"
                // }

                this.loadVideo(videoData)

                // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
                // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
                document.querySelector(".dplayer-mask").remove();
                document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
                let length = document.querySelectorAll(".dplayer-menu-item").length;
                document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
                document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
            },
            loadVideo(videoInfo) {
                this.dp = new DPlayer({
@@ -115,25 +133,8 @@
                    }
                })
            }
        },
        mounted() {

            this.video = {
                img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
                type: "normal"
            }
		
            this.loadVideo(this.video)

            // 以下为隐藏一些作者的信息和视频播放源 如不需要可删除
            // document.querySelector(".dplayer-menu").remove(); //隐藏右键菜单
            document.querySelector(".dplayer-mask").remove();
            document.querySelector(".dplayer-info-panel-item-url").remove(); //隐藏播放源
            let length = document.querySelectorAll(".dplayer-menu-item").length;
            document.querySelectorAll(".dplayer-menu-item")[length - 1].remove(); // 去掉作者信息
            document.querySelectorAll(".dplayer-menu-item")[length - 2].remove(); // 去掉作者信息
        }

    }
</script>
<style lang="less" scoped>

 src/components/mini/box16-videoDetail.vue

@@ -1,11 +1,14 @@
<template>
    <div>
         <div class="boxMain">
             <videoPlayBox></videoPlayBox>
         </div>
         <div class="articleComment">
             <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true"/>
         </div>
        <div class="boxMain">
            <videoPlayBox ref="videoPlayBox"></videoPlayBox>
        </div>
        <div style="padding: 20px 20px 5px;" class="myShadow">
            <pre>{{introduce}}</pre>
        </div>
        <div class="articleComment">
            <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" />
        </div>
    </div>

</template>
@@ -16,6 +19,10 @@
    } from '../../api/blogArticleComment.js'
    import videoPlayBox from "../mini/box15-videoPlayBox.vue"
    import comment from "../mini/box12-comment.vue"

    import {
        queryBlogArticleDetail
    } from '../../api/blogArticle.js'

    export default {
        components: {
@@ -31,7 +38,6 @@
            // },
            articleId: function(newValue, oldValue) {
                if (newValue == undefined || newValue == null || newValue == "") {
                    this.showMsg = true;
                    this.errorMsg = "日志id参数缺失";
                } else {
                    this.$nextTick(function() {
@@ -43,13 +49,76 @@
        data() {
            return {
                articleId: "",
                isAllowedComment: false
                lastArticleId: "",
                isAllowedComment: false,
                introduce: "",
                secret: "",
                myLock: false,
                videoData: {
                    img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
                    url: "",
                    type: "normal"
                }
            }
        },
        methods: {
            showVideo(param) {
                this.articleId = param.id
            showVideo(item) {
                this.lastArticleId = this.articleId;
                this.articleId = item.id
                this.isAllowedComment = item.isAllowedComment
                this.introduce = item.introduce
                this.loadData()
            },
            loadData() {

                if (this.myLock) {
                    this.$message.info("正在努力加载中..", 3)
                    return
                }

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

                    if (res.code != 200) {

                        if (res.code == 1019001) {
                            //日志需要授权
                            this.$message.error(res.message)
                        } else if (res.code == 1019002) {

                            this.$message.error(res.message)
                        } else {
                            this.$notification.error({
                                message: '好像哪里不对劲..',
                                description: res.message,
                                placement: 'bottomRight'
                            });
                        }
                        return
                    }

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

                    this.myLock = false;
                    if (this.lastArticleId != this.articleId) {
                        _this.$refs.videoPlayBox.changePlay(this.videoData)
                    }
                })

            }
        },
    }
</script>
@@ -58,9 +127,20 @@
        color: black;
    }

    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 {
        display: flex;
        justify-content: center;
        padding: 20px;
        padding: 5px 20px;
    }

    .myShadow {

        box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
            -8px -8px 18px #ffffff;
    }
</style>

 src/components/mini/mdDetail.vue

@@ -8,7 +8,7 @@

        <div v-if="showMsg && !myLock">
            <div class="mySecretSamll" v-if="articleFileType==myConstant.fileTypeShort">
                    <p>碎碎念只有那么一点了,但是下面依旧可以碎碎念</p>
                <p>碎碎念只有那么一点了,但是下面依旧可以碎碎念</p>
            </div>
            <div class="mySecret" v-else>
                <h1>怎样才能让你看到我呢</h1>
@@ -34,7 +34,7 @@
                <vue-markdown :source="source"></vue-markdown>
            </div>
        </div>
        <div class="articleInfoMiniData" >
        <div class="articleInfoMiniData">
            <div class="smallOption" @click="articleOptionHandle('dislike')">
                <a-icon type="dislike" style="margin-top: 2px;" />
            </div>
@@ -75,7 +75,7 @@

    import axios from 'axios'
    import myConstant from "../../config/myConstant.js"
	

    export default {
        components: {
            VueMarkdown,
@@ -83,7 +83,7 @@
        },
        data() {
            return {
                myConstant:myConstant,
                myConstant: myConstant,
                articelMeta: "",
                isAllowedComment: 1,
                articleId: "",
@@ -131,8 +131,10 @@
                this.showMsg = true;
                this.errorMsg = "加载中..";

                if (this.articleFileType == myConstant.fileTypeShort) {
                    this.errorMsg = "没有更多啦..";
                if (this.articleFileType == myConstant.fileTypeShort ||
                    this.articleFileType == myConstant.fileTypeVideo ||
                    this.articleFileType == myConstant.fileTypeMp3) {
                    this.errorMsg = "该类型日志在这里没有更多啦..";
                    return
                }

@@ -193,7 +195,7 @@

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


 src/components/mini/tagInfo.vue

@@ -1,4 +1,5 @@
<template>
    <!-- 异步加载组件  消息总线独立 状态管理  常量抽取 模块重构 jtx使用  css优化-->
    <div class="swichTag ">
        <a-page-header title="关于我的一些..小故事" style="padding: 10px 0px 20px 0px;" @back="() => this.$router.go(-1)" />
        <a-timeline pending="...">
@@ -50,24 +51,26 @@
  时间:2020.02某个不眠的深夜
  音源/录像: es110的内置录音/mi 9的普通摄像
  剪辑:pr(其实就贴了一张图,一镜到底)
 
  对我而言,2018-2020发生了很多事情,
  为此放弃了很多东西,不得不说那是一段不愿意回忆起的日子
  2019年8月 我的挚友找了个梯子给我找来了这个谱子
  它更像一副良药,缓慢而温和治愈我
  以上.送给那些孤独的朋友..
  
  寻找天堂这部作品更引起了我的共鸣
  这个时间点之前,瞰哥还有另一个神作,去月球,我也很喜欢这个
  讲的是一个十分感人的爱情故事
  "如果你忘记了，或是走丢了呢？"
  "那么我们总会在月亮上相遇的。"
  因而<<to the moon>> 这首曲子也在我的曲库里
  但对我而言,寻找天堂这部作品更引起了我的共鸣
  2018-2020发生了很多事情,为此放弃了很多东西,不得不说那是一段不愿意回忆起的日子
  2019年8月 我的挚友找了个梯子给我找来了这个谱子
  它更像一副良药,缓慢而温和治愈我
  以上.送给那些孤独的朋友..
  
  -->

            <!-- 
 这首曲子叫卡农/canon(也是一种调式,不过大家都这么称呼它) 
 或者矫情一点,我一般叫它 Canon In D Arranged By George Winston
 如它的名字所见,谱子出自乔治·温斯顿,(有些难度的地方我可能自己做了简化处理,比如最后的几小节,所以有谱子对不上也是正常的,因为这个是属于我的卡农(骄傲.jpg))
 如它的名字所见,谱子出自乔治·温斯顿,
 (有些难度的地方我可能自己做了简化处理,比如最后的几小节,所以有谱子对不上也是正常的,因为这个是属于我的卡农(骄傲.jpg))
 时间:来自年代久远的2016.09 某个没课的下午
 音源/录像: 舍友的iphone
 剪辑:手机版的小影
@@ -86,6 +89,14 @@
            <br>
            <a-timeline-item color="">
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
                <h3 class="layui-timeline-title">2022-08-11</h3>
                <p>更新:优化了视频模块,现在可以在
                    <router-link :to="{path:'/platform'}">「月 台」</router-link>看到新发布的视频啦
                </p>
                <p class="myTip">谱子??谱子还没想好放哪里..</p>
            </a-timeline-item>
            <a-timeline-item color="">
                <a-icon slot="dot" type="clock-circle-o" style="font-size: 18px;" />
                <h3 class="layui-timeline-title">2022-07-29</h3>
                <span>
                    <router-link to="/comment">优化更新:记住到访的朋友</router-link>

 src/components/swichLabel/main1-home.vue

@@ -36,9 +36,7 @@
                        </a-affix>
                    </a-col>
                    <keep-alive>
                        <transition name="fade">
                            <router-view></router-view>
                        </transition>
                        <router-view></router-view>
                    </keep-alive>
                </a-col>


 src/config/myConstant.js

@@ -6,5 +6,10 @@
    fileTypeMp3: 4,
    fileTypeShort: 5,
    fileTypeCover: 9,
    uploadFileSizeLimit: 2 * 1024 * 1024,
    visitorDataKey: "visitorData.inleft.com",
    userName:"inleft"
}


export default myConstant;