新增权限验证需求

src/main/resources/static/js/document/beautyArchiveDetailMixin.js

@@ -18,7 +18,14 @@ var beautyArchiveDetailMixin = {
         fileArchiveList: [], // 文件资料列表
         defaultImage: 'https://static.caimei365.com/app/img/icon2/PC-default.png',  // 默认图片
         videoCover: 'https://static.caimei365.com/app/img/icon2/video-cover.png', //默认视频封面
-        archiveProductInfo: {}
+        archiveProductInfo: {},
+        userInfo: {}, // 用户信息
+        videoPermission: { // 视频播放权限
+            allTime: 10, // 分
+            onplay: 3 * 100 * 60 // 分钟
+        },
+        num:0,
+        duration: 0
     },
     filters: {
         // 时间格式化
@@ -44,8 +51,54 @@ var beautyArchiveDetailMixin = {
     },
     methods: {
         // 图片点击事件
-        handleShowImage: function () {
-            if (this.checkPermission() !== 0) return;
+        handleShowImage: function (i, imageList) {
+            // this.initPreviewImage()
+            console.log(this.permission)
+            if (this.permission === 2 || this.permission === 4 || this.permission === 1) {
+                if (imageList.length >= 5) {
+                    if (i < 2) {
+                        console.log(111)
+                        this.initPreviewImage()
+                    } else {
+                        if (this.checkPermission() !== 0) return;
+                    }
+                }else {
+                    if (this.checkPermission() !== 0) return;
+                }
+            } else {
+                if (this.checkPermission() !== 0) return;
+            }
+                        // CAIMEI.Popup({
+                        //     content: this.TipStatus.text,
+                        //     confitmBtnText: this.TipStatus.btn,
+                        //     cancelBtnText: '取消',
+                        //     closeIcon:true
+                        // }, function () {
+                        //     // 确认 执行 下一步  链接跳转 支付支付采美豆
+                        //     this.handleClickToPage(this.TipStatus.redirect);
+                        // }, function () {
+                        // });
+                    //     this.initPreviewImage()
+                    // } else {
+                    //     CAIMEI.Popup({
+                    //         content: this.TipStatus.text,
+                    //         confitmBtnText: this.TipStatus.btn,
+                    //         cancelBtnText: '取消',
+                    //         closeIcon:true
+                    //     }, function () {
+                    //         // 确认 执行 下一步  链接跳转 支付支付采美豆
+                    //         this.handleClickToPage(this.TipStatus.redirect);
+                    //     }, function () {
+                    //     });
+                    //     if (this.checkPermission() !== 0) return;
+                    // }
+            //     }else {
+            //         if (this.checkPermission() !== 0) return;
+            //     }
+            // } else {
+            //     if (this.checkPermission() !== 0) return;
+            // }
+            // if (this.checkPermission() !== 0) return;
         },
         //初始化预览图片配置
         initPreviewImage: function () {
@@ -56,36 +109,94 @@ var beautyArchiveDetailMixin = {
                 imageGroup['cm-images-' + index] = new Viewer(imageEl);
             });
             this.imageGroup = imageGroup;
-            console.log('初始化图片预览成功')
         },
         //显示视频播放窗口
-        handleShowPlayer: function (url) {
-            var _self = this;
-            if (this.checkPermission() !== 0) return;
-            //暂停上一个正在播放的播放器
-            this.currentVideoUrl = url;
-            this.isPlayer = true;
-            this.showVideoDialog = true;
-            setTimeout(function(){
-                // var video = this.$refs.videoRef;
-                _self.currentVideo = document.querySelector('#realPlayer');
-                _self.currentVideo.addEventListener('pause', function () {
-                    _self.isPlayer = false;
-                    console.log('暂停播放');
-                });
-                _self.currentVideo.addEventListener('ended', function () {
-                    _self.isPlayer = false;
-                    console.log('播放结束');
-                });
-                _self.currentVideo.addEventListener('error', function () {
-                    _self.isPlayer = false;
-                    console.log('播放错误');
-                });
-                _self.currentVideo.addEventListener('play', function () {
-                    _self.isPlayer = true;
-                    console.log('开始播放');
-                });
-            })
+        handleShowPlayer: function (url, dom) {
+            if (this.permission === 2 || this.permission === 4 || this.permission === 1) {
+                let _self = this;
+
+                //暂停上一个正在播放的播放器
+                this.currentVideoUrl = url;
+                this.isPlayer = true;
+                this.showVideoDialog = true;
+                console.log(url)
+                setTimeout(function(){
+                    // var video = this.$refs.videoRef;
+                    _self.currentVideo = document.querySelector('#realPlayer');
+                    // _self.currentVideo.oncanplay = function () {
+                    //     console.log(parseInt((_self.currentVideo.duration % 3600)/60))
+                    // }
+                    // console.log(_self.duration)
+                    if(_self.permission === 2 || _self.permission === 4 || _self.permission === 1) {
+                        _self.currentVideo.oncanplay = function () {
+                            console.log(_self.currentVideo.duration)
+                            if (parseInt((_self.currentVideo.duration % 3600)/60) < 10) {
+                                _self.isPlayer = false;
+                                _self.showVideoDialog = false;
+                                _self.currentVideo.pause()
+                                if (_self.checkPermission() !== 0) return;
+                            }
+                            if (parseInt((_self.currentVideo.duration % 3600)/60) >= 10) {
+                                _self.currentVideo.play()
+                            }
+                            _self.currentVideo.addEventListener('timeupdate', () =>{
+                                // if() {}
+                                if (parseInt(_self.currentVideo.currentTime) >= 3) {
+                                    _self.isPlayer = false;
+                                    _self.showVideoDialog = false;
+                                    _self.currentVideo.pause()
+                                    if (_self.checkPermission() !== 0) return;
+                                }
+                            })
+                        }
+
+                    }
+                        // _self.currentVideo.addEventListener('pause', function () {
+                        //     _self.isPlayer = false;
+                        //     console.log('暂停播放');
+                        // });
+                        // _self.currentVideo.addEventListener('ended', function () {
+                        //     _self.isPlayer = false;
+                        //     console.log('播放结束');
+                        // });
+                        // _self.currentVideo.addEventListener('error', function () {
+                        //     _self.isPlayer = false;
+                        //     console.log('播放错误');
+                        // });
+                        // _self.currentVideo.addEventListener('play', function () {
+                        //     _self.isPlayer = true;
+                        //     console.log('开始播放');
+                        // })
+                })
+            } else {
+                let _self = this;
+                if (_self.checkPermission() !== 0) return;
+                //暂停上一个正在播放的播放器
+                this.currentVideoUrl = url;
+                this.isPlayer = true;
+                this.showVideoDialog = true;
+                console.log(url)
+                setTimeout(function(){
+                    _self.currentVideo = document.querySelector('#realPlayer');
+                    _self.currentVideo.addEventListener('pause', function () {
+                        _self.isPlayer = false;
+                        console.log('暂停播放');
+                    });
+                    _self.currentVideo.addEventListener('ended', function () {
+                        _self.isPlayer = false;
+                        console.log('播放结束');
+                    });
+                    _self.currentVideo.addEventListener('error', function () {
+                        _self.isPlayer = false;
+                        console.log('播放错误');
+                    });
+                    _self.currentVideo.addEventListener('play', function () {
+                        _self.isPlayer = true;
+                        console.log('开始播放');
+                    })
+                })
+            }
+
         },
         //隐藏视频播放窗口
         handleClosePlayer: function () {
@@ -239,6 +350,14 @@ var beautyArchiveDetailMixin = {
                 _self.listLoading = false;
                 _self.cmSysParams.pageLabel =  res.data.relatedLabels;
                 _self.cmSysParams.pageType = 20;
+                _self.imageArchiveList.forEach((item, index) => {
+                    if (item.imageNum !== item.imageList.length) {
+                        _self.num = item.imageNum - item.imageList.length
+                        for (let i = 0; i < _self.num; i++) {
+                            item.imageList.push(_self.defaultImage)
+                        }
+                    }
+                })
                 // 只有当前用户权限为0时初始化图片预览
                 if (_self.permission === 0) {
                     setTimeout(function () {

src/main/resources/static/js/supplier-center/article/article-edit.js

@@ -210,6 +210,22 @@ var articleEdit = new Vue({
             });
         },
 
+        // 采美文章预览
+        handlePreview() {
+            if (window.localStorage.getItem('articelData')) {
+                window.localStorage.removeItem('articelData')
+            }
+            let _this = this
+            this.$refs.ruleForm.validate(valide=>{
+                if(!valide) return;
+                // _this.save();
+                const date = new Date()
+                const params = {..._this.formData, labelIds: _this.formData.labelIds.join(','), publishDate: date.getFullYear() + '-'+(date.getMonth() +1)+'-'+date.getDay() +' ' + date.getHours() + ':' +date.getMinutes() + ':' +date.getSeconds()}
+                window.localStorage.setItem('articelData', JSON.stringify(params))
+                window.open('/supplier/article/preview.html');
+            });
+        },
+
         // 监听formData
         watchFormData: function(){
             const self = this

src/main/resources/static/js/supplier-center/article/preview.js

@@ -0,0 +1,86 @@
+(function(){
+    //点赞
+    $("body").on("click", ".dianzan .like", function(){
+        // if($(this).hasClass("hasDian")){
+        //     CAIMEI.Alert("您已经给该信息点过赞!",'确定');
+        // }else{
+        //     var infoId = $(this).attr("data-id");
+        //     $.get("/article/like", {id: infoId}, function(res){
+        //         if(res.code === 0){
+        //             console.log("点赞成功!");
+        //             $(".like").text( parseInt($(".like").attr("data-count"))+1).addClass("hasDian");
+        //         } else {
+        //             CAIMEI.Alert(res.msg,'确定');
+        //         }
+        //     });
+        // }
+    });
+}());
+//相关阅读
+var articleRelated = new Vue({
+    el: "#mainData",
+    mixins: [cmSysVitaMixins],
+    data: {
+        infoId: $("#articleId").val()?$("#articleId").val()*1:0,
+        articleLabels: $("#articleLabels").val()?$("#articleLabels").val():"",
+        related: {},
+        relatedLabels:'',
+        articleData: {}, // article数据
+    },
+    methods: {
+        getRelatedList: function () {
+            var _self = this;
+            if(this.infoId ===0){return;}
+            $.getJSON("/article/related",{
+                id: this.infoId,
+                labels: this.articleLabels
+            }).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.related = r.data;
+                }
+            });
+        },
+
+    },
+    created: function () {
+        const pageLabelArray = []
+        this.cmSysParams.pageType = 11;
+        this.infoId = this.handlearticleId = $("#articleId").val() ? $("#articleId").val()*1 : 0;
+        this.articleLabels = $("#articleLabels").val()?$("#articleLabels").val():"";
+        this.relatedLabels = $("#relatedLabels").val()?$("#relatedLabels").val():"";
+        console.log('relatedLabels',this.relatedLabels)
+        if(this.relatedLabels){
+            this.cmSysParams.pageLabel =  this.relatedLabels
+        }else{
+            $('.dea-tag-li').each(function(){
+                pageLabelArray.push($(this).find('a').text());
+            })
+            this.cmSysParams.pageLabel =  pageLabelArray.join('/');
+        }
+        console.log('pageLabel', this.cmSysParams.pageLabel)
+        // 获取相关阅读
+        // this.getRelatedList();
+        this.articleData = JSON.parse(window.localStorage.getItem('articelData'))
+        console.log(this.articleData)
+    },
+    mounted: function () {
+        var _self = this;
+        var thisUri = window.location.href;
+        $('#qrcode').qrcode({
+            "render": "canvas",
+            "width": '120',
+            "height": '120',
+            "color": "#3a3",
+            "text": thisUri
+        });
+        // 文章浏览量+1
+        $.get("/article/pv", {id: this.infoId}, function(res){
+            if(res.code === 0){
+                // 更新文章索引
+                $.post(coreServer + "/commodity/search/index/update/article", {articleId: _self.infoId}, function(res){
+                    console.log(res.msg);
+                });
+            }
+        });
+    }
+});

src/main/resources/static/js/supplier-center/encyclopedia/edit.js

@@ -369,6 +369,48 @@ const edit = new Vue({
                 }, 500)
             })
         },
+
+        // 提交表单
+        async handlePreview() {
+            try {
+                if(this.showAgreement){
+                    CAIMEI.dialog('请先阅读编辑须知协议', false);
+                    return
+                }
+                this.formData.shopId = GLOBAL_SHOP_ID
+                this.formData.imageList = this.filterImageList(this.fileList)
+                this.formData.videoList = this.filterVideoList(this.fileList)
+                await this.$refs.ruleForm.validate()
+                const params = {
+                    shopId: this.formData.shopId,
+                    id: this.formData.id, // 词条id
+                    name: this.formData.name, // 词条名称
+                    alias: this.formData.alias, // 义项名
+                    discription: this.formData.discription, // 词条概述
+                    image: this.formData.image, // 头图地址
+                    typeId: this.formData.typeId, // 分类id
+                    seoKeyword: this.formData.seoKeyword, // seo关键字
+                    status: this.formData.status, // 状态0保存草稿箱  1已发布
+                    infoListStr: JSON.stringify(this.formData.infoList), //  信息栏集合
+                    referenceListStr:JSON.stringify(this.formData.referenceList), // 参考资料集合
+                    textInfoListStr: JSON.stringify(this.formData.textInfoList),
+                    imageListStr: JSON.stringify(this.formData.imageList), // 概述图册集合
+                    videoListStr:JSON.stringify(this.formData.videoList), // 视频集合
+                    labelIds: this.formData.labelIds ? this.formData.labelIds.join(',') : '' // 关联标签库列表
+                };
+                console.log(params)
+                // 删除之前的数据
+                if(window.localStorage.getItem('form')) {
+                    window.localStorage.removeItem('form')
+                }
+                window.localStorage.setItem('form', JSON.stringify(params))
+                // this.previewSensitiveWordsValidate()
+                window.open('/supplier/encyclopedia/preview.html');
+            } catch (e) {
+                console.log(e)
+                this.socrllToErrorWord()
+            }
+        },
         // 获取词条分类
         fetchTypeList() {
             const slef = this

src/main/resources/static/js/supplier-center/encyclopedia/preview.js

@@ -0,0 +1,103 @@
+function directory(container, flag = true) {
+    const section = $('.bk-section')
+    section.find('h2').each(function (index, item) {
+        const fristTitle = 'heading-' + (index + 1);
+        const fristTitleItem = $('<li></li>');
+        const a = $('<a></a>')
+        const text = flag ? (index + 1) + '、' + $(item).text() : $(item).text();
+        a.text(text)
+        a.attr('href', 'javascript:void(0)')
+        a.attr('data-id', fristTitle)
+        fristTitleItem.append(a)
+        $(container).append(fristTitleItem)
+        $(item).attr('id', fristTitle)
+        if (flag) {
+            let subTitle = $('<ul></ul>')
+            fristTitleItem.append(subTitle)
+            $(item).parent().nextUntil('.bk-title').each(function (i, el) {
+                if (el.nodeName !== 'H3') return
+                const subTitleItem = $('<li></li>')
+                const a = $('<a></a>')
+                a.text($(el).text())
+                a.attr('href', 'javascript:void(0)')
+                a.attr('data-id', fristTitle + i)
+                subTitleItem.append(a)
+                subTitle.append(subTitleItem)
+                $(el).attr('id', fristTitle + i)
+            })
+        }
+    })
+}
+$(function () {
+    directory('#bk-directory-pc', true)
+    directory('#bk-directory-mobile', false)
+    $('.bk-directory-list').find('a').on('click', function () {
+        const id = '#' + $(this).attr('data-id');
+        const scrollTop = innerWidth > 768 ? $(id).offset().top - $('header').height() : $(id).offset().top - $('header').height() - $('.bk-directory').height();
+        $("html, body").animate({
+            scrollTop: scrollTop
+        }, {duration: 500, easing: "swing"});
+        return false;
+    })
+
+    $('img.scapegoat').on('click', function () {
+        const id = $(this).attr('data-ctrid')
+        $("html, body").animate({
+            scrollTop: $('#' + id).offset().top
+        }, {duration: 500, easing: "swing"});
+    })
+
+    $('.bk-literature-list i').on('click', function(){
+        const id = $(this).parent('li').attr('id')
+        if(!id) return
+        const selector = '[data-ctrid=' + id + ']'
+        $("html, body").animate({
+            scrollTop: $(selector).eq(0).offset().top - 150
+        }, {duration: 500, easing: "swing"});
+    })
+
+    // 视频播放
+    $('.bk-album .bk-play').on('click', function(){
+        const videoUrl = $(this).siblings('video').attr('src');
+        $('#video-popup video').attr('src', videoUrl);
+        $('#video-popup').show();
+    })
+    $('#video-popup .close').on('click', function(){
+        $(this).parents('#video-popup').hide();
+    });
+})
+var bkPage = new Vue({
+    el: "#bk-page-container",
+    mixins: [cmSysVitaMixins],
+    data: {
+        relatedLabels:'',
+        previewFormData:{}, // preview 预览数据
+    },
+    methods: {
+
+    },
+    created() {
+        this.cmSysParams.pageType = 68;
+        this.relatedLabels = $("#relatedLabels").val()?$("#relatedLabels").val():"";
+        console.log('relatedLabels',this.relatedLabels)
+        if(this.relatedLabels){
+            this.cmSysParams.pageLabel =  this.relatedLabels
+        }else{
+            this.cmSysParams.pageLabel =  $('.bk-name').text();
+        }
+        console.log('pageLabel',this.cmSysParams.pageLabel)
+        // 获取数据进行预览
+        this.previewFormData = JSON.parse(window.localStorage.getItem('form'))
+        // 格式化数据
+        for (let key in this.previewFormData){
+            if (key.includes('Str')) {
+                this.previewFormData[key] = JSON.parse(this.previewFormData[key])
+            }
+        }
+        console.log(this.previewFormData)
+    },
+    mounted () {
+    },
+    destroyed() {
+    }
+});

src/main/resources/templates/product/detail.html

@@ -4,6 +4,7 @@
       xsi:schemaLocation="https://www.thymeleaf.org ">
 <head>
     <title th:text="'采美365网-'+${product.name}">采美365网-商品详情</title>
+    <meta name="referrer" content="no-referrer">
     <template th:replace="components/head-link"></template>
     <link th:href="@{/css/product/detail.h5.css(v=${version})}" media="screen and (max-width:768px)" rel="stylesheet"
           type="text/css">
@@ -656,13 +657,13 @@
                                     <div class="cm-detail  clear cm-images" :class="{'cm-one':item.imageNum === 1,'cm-two':item.imageNum === 2,'cm-list':item.imageNum>2   }">
                                         <!--可查看图片列表-->
                                         <template v-if="item.imageList">
-                                            <div class="cm-img-box" @click="handleShowImage" v-for="(image, i) in formatImage(item.imageList)" :key="i">
+                                            <div class="cm-img-box" @click="handleShowImage(i, item.imageList)" v-for="(image, i) in formatImage(item.imageList)" :key="i">
                                                 <img :src="image.imageUrl"/>
                                             </div>
                                         </template>
                                         <!--不可查看图片列表 默认图片-->
                                         <template v-else>
-                                            <div class="cm-img-box" @click="handleShowImage" v-for="(image, i) in item.imageNum" :key="i">
+                                            <div class="cm-img-box" @click="handleShowImage(i, item.imageList)" v-for="(image, i) in item.imageNum" :key="i">
                                                 <img :src="defaultImage" width="100%" height="100%">
                                             </div>
                                         </template>
@@ -682,8 +683,8 @@
                                     <div class="cm-time">{{ item.addTime | formatTime }}</div>
                                     <div class="cm-detail clear">
                                         <div class="cm-video-box">
-                                            <span class="cm-player-btn" @click="handleShowPlayer(item.fileUrl)"></span>
-                                            <video :src="item.fileUrl && item.fileUrl" :poster="item.fileUrl ? '' : videoCover ">
+                                            <span class="cm-player-btn" @click="handleShowPlayer(item.fileUrl, 'video'+index)"></span>
+                                            <video :src="item.fileUrl && item.fileUrl" :class="'video'+index" :poster="item.fileUrl ? '' : videoCover ">
                                                 您的浏览器不支持Video标签。
                                             </video>
                                         </div>

src/main/resources/templates/supplier-center/article/article-edit.html

@@ -143,6 +143,7 @@
                         <div class="form-item btns">
                             <button class="btn break" @click="handleBack">返回</button>
                             <button class="btn submit" @click="handleSave">提交</button>
+                            <button class="btn submit" @click="handlePreview">预览</button>
                         </div>
                     </div>
                 </div>

src/main/resources/templates/supplier-center/article/preview.html

@@ -0,0 +1,104 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title th:text="${article!=null?article.title:''}+'_采美365网'"></title>
+    <meta name="keywords" th:content="${article?.keyword}">
+    <meta name="description" th:content="${article?.recommendContent}">
+    <template th:replace="article/components/article-link"></template>
+    <template th:replace="components/analysis"></template>
+</head>
+<body class="home detailData">
+<input type="hidden" th:value="${articleId}" id="articleId">
+<input type="hidden" th:value="${article?.label}" id="articleLabels">
+<input type="hidden" th:value="${relatedLabels}" id="relatedLabels">
+<div class="cm-modal"></div>
+<!--导航栏-->
+<template th:replace="article/components/article-preview"></template>
+<div class="tip-bar">
+<!--    <div class="tip">提示：产品详情请到采美商城搜索</div>-->
+    <!--面包屑-->
+    <div class="bar">
+        <a href="#">首页</a> &gt; <a href="#" class="title newTitle">美业科普</a>&gt; 正文
+    </div>
+</div>
+<!--主体内容-->
+<div class="content clearfix">
+    <div class="mainData" id="mainData">
+        <div class="new-list article" v-if="articleData">
+            <div class="title">{{ articleData.title }}</div>
+            <p class="xinxi">
+                <em class="write icon mIcon">{{articleData.publisher}}</em>
+                <em class="source icon mIcon" v-if="articleData.source">{{articleData.source}}</em>
+                <em class="time icon mIcon">{{articleData.publishDate}}</em>
+                <em class="pv icon mIcon">0</em>
+            </p>
+            <div class="new-mian" id="contentDiv">{{articleData.recommendContent}}</div>
+            <div class="dianzan">
+                <span class="like icon mIcon">0</span>
+            </div>
+            <p class="dea-tag">
+                <span class="dea-tag-li" v-for="item,index in articleData.label.split(',')" :key="index">
+                    <a href="#">{{item}}</a>
+                </span>
+            </p>
+        </div>
+        <div class="new-list article all_mid" style="min-height:800px" v-if="!articleData">
+            <div class="middle">
+                <img src="/img/info/empty.png"/>
+                <p>抱歉,内容已删除</p>
+            </div>
+        </div>
+        <!--相关阅读-->
+        <div class="new-list dataRousce" id="articleRelated">
+            <p class="classify biaoqian">相关阅读</p>
+            <div class="row">
+                <div class="new-img">
+                    <a href="#">
+                        <img src="/img/info/empty.png"/>
+                    </a>
+                </div>
+                <div class="new-blurb">
+                    <a href="#">
+                        <p class="title">预览</p>
+                    </a>
+                    <p class="xinxi">
+                        <em class="write icon mIcon">2022-03-16 17:58:32</em>
+                        <em class="time icon mIcon">2022-03-16 17:58:32</em>
+                    </p>
+                    <p class="introduction">预览</p>
+                    <p v-if="isPC" class="P_img"><em class="pv icon mIcon">0</em></p>
+                </div>
+            </div>
+            <div id="scrollTop">
+                <div class="item" v-if="isPC">
+                    <span class="wechat icon mIcon">微信分享</span>
+                    <div class="wechatHover mFixed">
+                        <div id="qrcode"></div>
+                    </div>
+                </div>
+                <div class="item">
+                    <span class="toTop icon mIcon">置顶</span>
+                </div>
+            </div>
+            <!--Ross 弹窗-->
+            <template v-if="showRossHtml">
+                <template th:replace="components/ross-advert"></template>
+            </template>
+        </div>
+    </div>
+<!--    侧边栏Ross广告图-->
+    <div v-if="isPC && isRossShow" class="article-right-ross" :class="isRossShow ? 'show' : 'none'">
+        <a href="#" v-if="isPC"><img src="/img/ross/ross-image@1x.jpg" alt="深圳艾斯佰丽生物科技有限公司"></a>
+    </div>
+<!--    侧边栏-->
+    <template th:replace="article/components/article-sidebar"></template>
+
+</div>
+<template th:replace="article/components/article-footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" src="/lib/jquery.qrcode.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>
+<script th:src="@{/js/supplier-center/article/preview.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/supplier-center/encyclopedia/edit.html

@@ -169,6 +169,7 @@
                     <div class="bk-control">
                         <button class="bk-back" @click="handleBack">返回</button>
                         <button class="bk-confirm" @click="handleConfirm">提交</button>
+                        <button class="bk-confirm" @click="handlePreview">预览</button>
                     </div>
                 </div>
             </div>

src/main/resources/templates/supplier-center/encyclopedia/preview.html

@@ -0,0 +1,173 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+  <meta charset="UTF-8"/>
+  <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=0"/>
+  <title>采美百科-百科详情</title>
+  <link rel="stylesheet" href="/css/encyclopedia/normalize.css">
+  <link href="/lib/jquery-confirm.min.css" rel="stylesheet" type="text/css">
+  <link rel="stylesheet" href="/lib/swiper.min.css">
+  <!--element ui 样式表-->
+  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css"/>
+  <link rel="stylesheet" href="/lib/element-ui/element-ui-min.css"/>
+  <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}">
+  <link rel="stylesheet" th:href="@{/css/encyclopedia/preview.css(v=${version})}">
+  <script type="text/javascript" src="/lib/swiper.min.js"></script>
+</head>
+<body>
+<!-- 顶部公共区域 -->
+<template th:replace="encyclopedia/components/header"></template>
+<!-- 顶部公共区域 end-->
+<!--<input type="hidden" th:value="${baikeproduct.relatedLabels}" id="relatedLabels">-->
+<main id="bk-page-container">
+  <div class="bk-banner">
+    <img src="/img/encyclopedia/assets/pc-banner-detail.png" alt="采美百科" class="only-pc"/>
+    <img src="/img/encyclopedia/assets/h5-banner-detail.png" alt="采美百科" class="only-mobile"/>
+    <div class="bk-container only-pc">
+      <div class="bk-name" v-text="previewFormData.name">}</div>
+    </div>
+  </div>
+  <div class="bk-detail bk-container">
+    <div class="only-mobile bk-entry-name">
+      <div class="bk-name"></div>
+    </div>
+    <div class="bk-detail-left">
+      <div class="bk-name" v-html="previewFormData.alias"></div>
+      <div class="bk-overview" v-html="previewFormData.discription"></div>
+      <div class="bk-information only-pc">
+        <div class="bk-row" id="bk-row">
+          <div class="space" v-for="item,index in previewFormData.infoListStr" :key="item.id">
+            <div class="bk-label">{{item.infoName}}</div>
+            <div class="bk-content">{{item.infoContent}}</div>
+          </div>
+        </div>
+      </div>
+      <div class="bk-information only-mobile">
+        <div class="bk-row" v-for="item,index in previewFormData.infoListStr" :key="item.id">
+          <div class="bk-label">{{item.infoName}}</div>
+          <div class="bk-content">{{item.infoContent}}</div>
+        </div>
+      </div>
+      <div class="only-mobile bk-relevant">
+        <div class="bk-album">
+          <div class="bk-title">透明质酸的概述图册</div>
+          <div class="bk-album-list">
+            <div class="bk-album-item" v-for="item,index in previewFormData.imageListStr">
+              <img :src="item.image" v-if="item.type == 1">
+              <video :src="item.videoUrl" v-if="item.type == 2"></video>
+              <span class="bk-play" v-if="item.type == 2"></span>
+            </div>
+          </div>
+        </div>
+        <div class="bk-company">
+          <div class="bk-cover"><img src="https://picsum.photos/280/220?random=4"></div>
+          <div class="bk-title">上海品辉医疗科技有限公司</div>
+        </div>
+        <div class="bk-directory">
+          <div class="bk-title">导航<span>></span></div>
+          <ul class="bk-directory-list" id="bk-directory-mobile"></ul>
+        </div>
+      </div>
+      <div class="bk-section">
+        <div v-for="item,index in previewFormData.textInfoListStr" :key="item.id">
+          <div class="bk-title" v-if="item.dictionaryType === 1">
+            <h2>{{item.dictionaryContent}}</h2>
+            <div class="line"></div>
+          </div>
+          <h3 v-if="item.dictionaryType == 2" v-html="item.dictionaryContent"></h3>
+          <div class="bk-section-content" v-if="item.dictionaryType === 3" v-html="item.dictionaryContent"></div>
+        </div>
+      </div>
+      <div class="bk-literature">
+        <div class="bk-title">
+          <div>参考资料</div>
+          <div class="line"></div>
+        </div>
+        <ul class="bk-literature-list">
+          <div v-for="item,index in previewFormData.referenceListStr" :key="item.id">
+            <li v-if="item.referenceType === 1">
+              [<em>{{index + 1}}</em>]
+              <i></i>
+              <a class="link" :href="item.website">{{item.articleName}}</a>.
+              <span>{{item.websiteName}}</span>
+              <span v-if="item.acitationTimeStr">[引用日期:<span>{{item.acitationTimeStr}}</span>]</span>
+            </li>
+<!--            <li v-if="item.referenceType === 2">-->
+<!--              [<em>{{index + 1}}</em>]-->
+<!--              <i></i>-->
+<!--              <span>{{item.author}}</span>-->
+<!--              <span>{{{item.workName}}</span>：-->
+<!--              <span>{{item.press}}</span>，-->
+<!--              <span>{{item.publicationYearStr}}</span>-->
+<!--            </li>-->
+<!--            <li v-if="item.referenceType === 3">-->
+<!--              [<em>{{index + 1}}</em>]-->
+<!--              <i></i>-->
+<!--              <span>{{item.referenceDescription}}</span>-->
+<!--              <span>{{item.imageDescription}}</span>-->
+<!--              <a class="image" :href="item.imageUrl" target="_blank">{{item.articleName}}</a>-->
+<!--            </li>-->
+          </div>
+        </ul>
+      </div>
+      <div class="bk-remarks">声明：该文观点仅代表作者本人，不代表采美公司的立场或观点，本网站仅提供信息存储空间服务。任何单位与个人认为该文可能涉嫌侵犯其合法权利，应及时向采美公司提出书面权利通知，采美公司会依法处理。</div>
+      <div class="bk-pv">
+<!--        <div class="bk-pv-item">浏览次数：<span th:text="*{pv}"></span></div>-->
+<!--        <div class="bk-pv-item" th:text="*{publishTimeStr}"></div>-->
+      </div>
+    </div>
+    <div class="bk-detail-right only-pc">
+      <div class="bk-album">
+        <div class="swiper-container" id="album">
+          <div class="swiper-wrapper">
+            <div class="swiper-slide" v-for="item,index in previewFormData.imageListStr" :key="index">
+              <img :src="item.image" v-if="item.type == 1">
+              <video :src="item.videoUrl" v-if="item.type == 2"></video>
+              <span class="bk-play" v-if="item.type == 2"></span>
+            </div>
+          </div>
+          <div class="swiper-pagination"></div>
+        </div>
+        <div class="bk-title"><span>{{previewFormData.name + '的概述图册' }}</span></div>
+      </div>
+      <div class="bk-company">
+        <img :src="JSON.parse(window.localStorage.getItem('userInfo')).shopLogo ? JSON.parse(window.localStorage.getItem('userInfo')).shopLogo : '/img/base/placeholder.png'">
+        <div class="bk-title">{{JSON.parse(window.localStorage.getItem('userInfo')).name || '上海品辉医疗科技有限公司'}}</div>
+      </div>
+      <div class="bk-directory">
+        <div class="bk-title">文章目录</div>
+        <div class="bk-content">
+          <ul class="bk-directory-list" id="bk-directory-pc"></ul>
+        </div>
+      </div>
+
+    </div>
+  </div>
+</main>
+
+<!-- 视频播放弹窗 -->
+<!--<div class="video-popup" style="display: none;" id="video-popup">-->
+<!--  <div class="mask"></div>-->
+<!--  <span class="close"></span>-->
+<!--  <div class="content">-->
+<!--    <video controls></video>-->
+<!--  </div>-->
+<!--</div>-->
+
+<!-- 底部区域 -->
+<template th:replace="encyclopedia/components/footer"></template>
+<!-- 底部区域 end -->
+<script type="text/javascript" src="/lib/element-ui/element-ui.min.js"></script>
+<script charset="utf-8" type="text/javascript" src="/lib/aliyun-oss-sdk-6.17.1.min.js"></script>
+<script th:src="@{/js/supplier-center/encyclopedia/preview.js(v=${version})}"></script>
+<script type="text/javascript">
+  new Swiper('#album', {
+    pagination: {
+      el: '.swiper-pagination'
+    }
+  })
+</script>
+</body>
+</html>