Merge remote-tracking branch 'origin/developerA' into developerA

src/main/java/com/caimei/www/controller/authorized/supplier/SupplierPageController.java

@@ -74,6 +74,8 @@ public class SupplierPageController extends BaseController {
     private static final String ENCYCLOPEDIA_PRODUCT_EDIT = "supplier-center/encyclopedia/product-edit";
     /** 供应商采美百仪器资料编辑页面 */
     private static final String ENCYCLOPEDIA_INSTRUMENT_EDIT = "supplier-center/encyclopedia/instrument-edit";
+    /** 供应商采美百科推荐编辑页面 */
+    private static final String ENCYCLOPEDIA_RECOMMEND_EDIT = "supplier-center/encyclopedia/recommend-edit";
 
 
     /** 我的采美 */
@@ -259,4 +261,9 @@ public class SupplierPageController extends BaseController {
         return ENCYCLOPEDIA_INSTRUMENT_EDIT;
     }
 
+    /** 供应商采美百科推荐编辑页面 */
+    @GetMapping("/supplier/encyclopedia/recommend-edit.html")
+    public String getEncyclopediarecommendEdit() {
+        return ENCYCLOPEDIA_RECOMMEND_EDIT;
+    }
 }

src/main/resources/static/css/encyclopedia/detail.css

@@ -55,12 +55,46 @@ img{cursor: pointer;}
 .article .section.some-link .group .link .name:hover{ color: #E15616 }
 .article .section.some-link .group .link .image{ width: 88px;height: 88px; }
 
+.article .section.related-video .content::after{content: "";display: block;clear:both;}
+.article .section.related-video .content .video-control{width: 338px;height: 230px;position: relative;background: #f1f1f1;float: left;margin: 24px 24px 0 0;}
+.article .section.related-video .content .video-control:nth-child(1),
+.article .section.related-video .content .video-control:nth-child(2),
+.article .section.related-video .content .video-control:nth-child(3){margin-top: 0;}
+.article .section.related-video .content .video-control video{width: 100%;height: 100%;position: relative;z-index: 6}
+.article .section.related-video .content .video-control .play{display: block;position: absolute;left: 50%;top: 50%; border-radius: 50%; width: 48px;height: 48px; transform: translate(-50%,-50%);background: url(/img/activity/pc-palyer.png);cursor: pointer;z-index: 9;background-size: 48px 48px;}
+
+
+.article .section .content::after{content:"";display:block;visibility:hidden;width:0;clear:both}
+.article .section .recommend-section{display: block; float:left;width:372px;height:546px;margin:0 18px 18px 0;background:#ffffff;border-radius:2px;overflow:hidden;-webkit-transition:all 0.6s;-o-transition:all 0.6s;transition:all 0.6s;border: 1px solid #E3E6EB;box-sizing: border-box;}
+/*.article .section .recommend-section:hover{-webkit-transform:translateY(-10px);-ms-transform:translateY(-10px);transform:translateY(-10px)}*/
+.article .section .recommend-section  h3{margin: 0;}
+.article .section .recommend-section:hover h3{color:#e15616}
+.article .section .recommend-section:nth-child(3n){margin-right:0}
+.article .section .recommend-section .cover{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;height:260px}
+.article .section .recommend-section .cover img{width:246px;height:246px}
+.article .section .recommend-section .content{padding:16px 16px 0;-webkit-box-sizing:border-box;box-sizing:border-box;}
+.article .section .recommend-section .content h3{-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s;font-weight:bold;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
+.article .section .recommend-section .content .title{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;height:52px;color:#4a4f58;margin-top:12px;line-height:26px;text-align:justify;word-break:break-all}
+.article .section .recommend-section .content .question{margin:12px 0;height:78px}
+.article .section .recommend-section .content .question p{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;color:#93979f;line-height:26px;font-size:14px}
+.article .section .recommend-section .content .question p:nth-child(3)~p{display: none}
+.article .section .recommend-section .content .tag-list{height:24px}
+.article .section .recommend-section .content .tag-list .tag{display:inline-block;height:24px;line-height:24px;background:#fef6f3;border-radius:2px;font-size:12px;color:#e15616;padding:0 8px;margin-right:8px}
+.article .section .recommend-section .content .dashed-line{margin-top:12px;height:0px;border-bottom:1px dashed #b8bfca}
+.article .section .recommend-section .content .footer{height:50px;line-height:50px;font-size:14px;color:#93979f}
+
 .contact-popup{display: none; position:fixed;top: 50%;left: 50%;z-index: 99999; transform: translate(-50%,-50%); width:314px;height:418px;overflow:hidden;background:url(/img/encyclopedia/contact.png) no-repeat center}
 .contact-popup .close{position:absolute;display:block;width:30px;height:30px;text-align:center;line-height:30px;top:10px;right:20px;font-size:28px;color:#2c3038;cursor:pointer}
 .contact-popup .content{margin-top:130px}
 .contact-popup .content p{font-size:16px;text-align:center;line-height:32px;color:#9aa5b5;margin:0}
 .contact-popup .content p.tel{color:#e15616}
 .contact-popup .content p.time{color:#2c3038}
+
+.video-popup{position: fixed;width: 100vw;height: 100vh;top: 0; left: 0;background: #333;z-index: 99999}
+/*.video-popup .mask{width: 100vw;height: 100vh;background: #333333;}*/
+.video-popup .content{width: 944px;height: 642px;position: absolute;left: 50%;top: 50%;transform: translate(-50%,-50%);background: #f1f1f1;}
+.video-popup .content video{width: 100%;height: 100%;display: block;}
+.video-popup .close {position: absolute;right: 15px;top: 15px; width: 36px;height: 36px;background: url(/img/activity/pc_close.png);background-size: 36px;cursor: pointer;}
 }
 @media screen and (max-width:768px){
 img{max-width: 100%;}
@@ -69,7 +103,7 @@ img{max-width: 100%;}
 .flex-between-center{-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
 .flex-start-center,.article .section.approve .img-list,.article .section.params .tr .group{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
 body{padding-top:40.3vw}
-.navigate{display:block;background:#fff;top:29.5vw;position:fixed;-webkit-box-shadow:1vw 0 2vw rgba(0,0,0,0.1);box-shadow:1vw 0 2vw rgba(0,0,0,0.1)}
+.navigate{display:block;background:#fff;top:29.5vw;position:fixed;-webkit-box-shadow:1vw 0 2vw rgba(0,0,0,0.1);box-shadow:1vw 0 2vw rgba(0,0,0,0.1);z-index: 10;}
 .navigate ul{overflow-x:scroll;width:100vw;height:10.8vw;padding:4vw 4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;white-space:nowrap}
 .navigate ul::-webkit-scrollbar{display:none}
 .navigate ul li{position:relative;display:inline-block;height:6.8vw;margin-right:5.6vw}
@@ -115,4 +149,27 @@ body{padding-top:40.3vw}
 .article .section.some-link .group .link .name{ font-size: 3.6vw; margin-left: 1.8vw;max-width: 60vw;display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-line-clamp: 2;-webkit-box-orient: vertical; line-height: 1.6}
 .article .section.some-link .group .link .name:hover{ color: #E15616 }
 .article .section.some-link .group .link .image{ width: 24vw;height: 24vw;box-sizing: border-box;border: 1px solid #E3E6EB; }
+
+.article .section.related-video .content {overflow-y: scroll;white-space: nowrap;width: 99vw;margin-left: -3.2vw;}
+.article .section.related-video .content .video-control{width: 75.6vw;height: 51.5vw;position: relative;background: #f1f1f1;display: inline-block;margin-left: 3.2vw;}
+.article .section.related-video .content .video-control:last-child{margin-right: 3.2vw;}
+.article .section.related-video .content .video-control video{width: 100%;height: 100%;position: relative;z-index: 6}
+.article .section.related-video .content .video-control .play{display: block;position: absolute;left: 50%;top: 50%; border-radius: 50%; width: 10.8vw;height: 10.8vw; transform: translate(-50%,-50%);background: url(/img/activity/pc-palyer.png);cursor: pointer;z-index: 9;background-size: 10.8vw 10.8vw;}
+
+.article .section.recommend {margin-top: 3.2vw;}
+.article .section .recommend-section {-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display: flex;padding: 2.4vw 0;border-top: 1px solid #B8BFCA;}
+.article .section .recommend-section:first-child {border-top: 0;}
+.article .section .recommend-section .cover{margin-right:2.4vw}
+.article .section .recommend-section .cover img{display:block;width:30.4vw;height:30.4vw;border:1px solid #e1e1e1}
+.article .section .recommend-section .content {flex: 1;padding: 0}
+.article .section .recommend-section .content h3{margin: 0;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;line-height:4vw;height:4vw;font-size:3.6vw;font-weight:bold;word-break: break-all;}
+.article .section .recommend-section .content .title{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;margin-top:1.6vw;font-size:3.2vw;line-height:4.6vw;text-align:justify;height:9.2vw; word-break: break-all;}
+.article .section .recommend-section .content .question{height:10vw;margin:2.4vw 0}
+.article .section .recommend-section .content .question p{overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;font-size:2.6vw;line-height:5vw;color:#93979f}
+.article .section .recommend-section .content .question p:nth-child(2)~p{display: none}
+.article .section .recommend-section .content .tag-list{height:4.8vw;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.article .section .recommend-section .content .tag-list .tag{height:4.8vw;padding:0 1.2vw;margin-right:1.6vw;background:#fef6f3;border-radius:0.2vw;font-size:2.6vw;color:#e15616;line-height:4.8vw}
+.article .section .recommend-section .content .tag-list .tag:last-child{display:none}
+.article .section .recommend-section .content .dashed-line{display:none}
+.article .section .recommend-section .content .footer{height:8vw;font-size:2.6vw;color:#93979f;line-height:8vw}
 }

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

@@ -23,6 +23,11 @@
 .valide-form .btn{width:232px;height:50px;text-align:center;line-height:50px;font-size:18px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
 .valide-form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
 .valide-form .btn.submit{background:#E15616;color:#FFFFFF}
+
+.valide-form .mint-filter { position: relative; }
+.valide-form .mint-filter .mint-message{ position: absolute; bottom: -25px; left: 0; font-size: 14px; color: #f56c6c; line-height: initial;}
+.valide-form .mint-filter .mint-message::before{content: "敏感词："}
+.valide-form .el-form-item { margin-bottom: 32px; }
 }
 
 @media screen  and (max-width: 768px){
@@ -43,4 +48,9 @@
 .valide-form .btn{width:100%;display:block;height:11.2vw;text-align:center;line-height:11.2vw;font-size:3.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin-bottom:2.4vw}
 .valide-form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
 .valide-form .btn.submit{background:#E15616;color:#FFFFFF}
+
+.valide-form .mint-filter { position: relative; }
+.valide-form .mint-filter .mint-message{ position: absolute; bottom: -7vw; left: 0; font-size: 3.4vw; color: #f56c6c; line-height: initial;}
+.valide-form .mint-filter .mint-message::before{content: "敏感词："}
+.valide-form .el-form-item { margin-bottom: 7.6vw; }
 }

src/main/resources/static/css/supplier-center/encyclopedia/article-list.css

@@ -27,7 +27,7 @@
 .article-list .table th{font-size:14px;color:#627386;padding-bottom:16px;border-bottom:1px solid #E2E7EF}
 .article-list .table td{font-size:12px;color:#22272E;text-align:center}
 .article-list .table td{padding:16px 0}
-.article-list .table .title,.article-list .table .time,.article-list .table .option{width:100px}
+.article-list .table .title,.article-list .table .time,.article-list .table .option{width:130px}
 .article-list .table .title{white-space:nowrap;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis}
 .article-list .table .reason{display:inline-block;width:14px;height:14px;background:#FF2A2A;color:#fff;border-radius:50%;vertical-align:middle;line-height:14px;text-align:center;margin-left:2px;cursor: help;}
 .article-list .table .option .form-button{padding: 0 2px; height:22px;margin:2px 0;line-height:22px;text-align:center;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:12px;color:#E15616;cursor:pointer}

src/main/resources/static/css/supplier-center/encyclopedia/edit-page-style.css

@@ -15,16 +15,19 @@
 .cover-uploader .el-upload:hover::after{opacity:1}
 .hide-upload .el-upload{display:none}
 .form-params-group,.form-question-group{position:relative}
-.form-params-group .add-one,.form-question-group .add-one{position:absolute;right:0;top:-40px;width:50px;height:30px;font-size:12px;line-height:30px;color:#e15616;cursor:pointer;text-decoration:underline}
+.form-params-group .add-one,.form-question-group .add-one{position:absolute;right:0;top:-30px;width:50px;height:30px;font-size:12px;line-height:30px;color:#e15616;cursor:pointer;text-decoration:underline}
 .form-params-group .form-params-group-row{position:relative;margin-bottom:12px}
 .form-params-group .form-params-group-row:last-of-type{margin-bottom:0}
 .form-params-group .form-params-group-row .remove,.form-question-group .form-question-group-row .remove{position:absolute;top:0;right:4px;width:20px;height:20px;background:#f94b4b;opacity:1;border-radius:0px 2px 0px 2px;text-align:center;line-height:20px;color:#fff;cursor:pointer;border-radius:4px}
 .form-question-group .form-question-group-row{position:relative;margin-bottom:24px}
 .form-question-group .form-question-group-row:last-of-type{margin-bottom:0}
-.form-question-group .add-one{top:-50px}
+.form-question-group .add-one{top:-36px}
 .form-question-group .form-question-group-row .remove{right:0;top:40px}
 .el-upload-list--picture-card .el-upload-list__item,.el-upload--picture-card{width:110px;height:110px}
 .el-upload--picture-card{line-height:120px}
+.form-video-group-list .form-video-group .el-form-item{margin-bottom: 25px;}
+.form-video-group-list .form-video-group .el-upload{width: 100%;}
+.form-video-group-list .form-video-group .el-upload-list{display: none;}
 
 @media screen and (min-width:768px){
 .edit-page .row{-webkit-box-sizing:border-box;box-sizing:border-box;padding:24px 0;background:#FFFFFF;-webkit-box-shadow:0 3px 6px rgba(0,0,0,0.07);box-shadow:0 3px 6px rgba(0,0,0,0.07)}
@@ -35,6 +38,17 @@
 .valide-form .btn{width:232px;height:50px;text-align:center;line-height:50px;font-size:18px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
 .valide-form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
 .valide-form .btn.submit{background:#E15616;color:#FFFFFF}
+.valide-form .mint-filter { position: relative; }
+.valide-form .mint-filter .mint-message{ position: absolute; bottom: -25px; left: 0; font-size: 14px; color: #f56c6c; line-height: initial;}
+.valide-form .mint-filter .mint-message::before{content: "敏感词："}
+.valide-form .el-form-item { margin-bottom: 32px; }
+.form-video-group-list {position: relative;}
+.form-video-group-list .form-video-group .add-one{font-size: 12px; position: absolute;color: #E15616;right: 3px;top: 0;text-decoration: underline;cursor: pointer;user-select: none;}
+.form-video-group-list .form-video-group .form-video-number {font-size: 14px;font-weight: bold; color: #4A4F58;margin: 16px 0;}
+.form-video-group-list .form-video-group .form-upload-button{border: 1px solid #E15616;background: #FFE6DC;font-size: 14px;color: #E15616;border-radius: 4px;line-height: 40px;box-sizing: border-box;height: 40px;width: 100%;transition: all .4s;cursor: pointer;}
+.form-video-group-list .form-video-group .form-upload-button:hover{background: #f3dcd2;}
+.form-video-group-list .form-video-group .form-video-section{position: relative;}
+.form-video-group-list .form-video-group .remove-btn{position: absolute;font-size: 12px;color: #F94B4B;bottom: 12px;right: -36px;text-decoration: underline;cursor: pointer;}
 }
 
 @media screen and (max-width:768px){
@@ -44,4 +58,15 @@
 .valide-form .btn{width:100%;display:block;height:11.2vw;text-align:center;line-height:11.2vw;font-size:3.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin-bottom:2.4vw}
 .valide-form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
 .valide-form .btn.submit{background:#E15616;color:#FFFFFF}
+.valide-form .mint-filter { position: relative; }
+.valide-form .mint-filter .mint-message{ position: absolute; bottom: -7vw; left: 0; font-size: 3.4vw; color: #f56c6c; line-height: initial;}
+.valide-form .mint-filter .mint-message::before{content: "敏感词："}
+.valide-form .el-form-item { margin-bottom: 7.6vw; }
+.form-video-group-list {position: relative;}
+.form-video-group-list .form-video-group .add-one{font-size: 12px; position: absolute;color: #E15616;right: 4px;top: 0;text-decoration: underline;cursor: pointer;user-select: none;}
+.form-video-group-list .form-video-group .form-video-number {font-size: 3.6vw;font-weight: bold; color: #4A4F58;margin: 3.2vw 0;}
+.form-video-group-list .form-video-group .form-upload-button{border: 1px solid #E15616;background: #FFE6DC;font-size: 3.4vw;color: #E15616;line-height: 40px;box-sizing: border-box;height: 40px;width: 100%;transition: all .4s;cursor: pointer;}
+.form-video-group-list .form-video-group .form-upload-button:hover{background: #f3dcd2;}
+.form-video-group-list .form-video-group .form-video-section{position: relative;}
+.form-video-group-list .form-video-group .remove-btn{position: absolute;font-size: 12px;color: #F94B4B;top: 0;right: 4px;text-decoration: underline;cursor: pointer;}
 }

src/main/resources/static/css/supplier-center/encyclopedia/recommend-edit.css

@@ -0,0 +1,42 @@
+table{border-collapse:initial}
+table,td,th{border:initial}
+#recommendEdit .navLayout{min-height:auto}
+@media screen and (min-width:768px){
+.recommend-edit .right{background:#fff;padding:32px 40px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.recommend-edit .recommend-title{font-size:16px;font-weight:bold;color:#4A4F58;text-align:center}
+.recommend-edit .recommend-list-label{margin:32px 0 16px;font-size:14px;color:#22272E}
+.recommend-edit .recommend-list-label span{font-size:14px;color:#9AA5B5}
+.recommend-edit .recommend-control{margin-top:80px}
+.recommend-edit .recommend-control .el-radio span.tip{font-size:14px;color:#9AA5B5}
+.recommend-edit .recommend-filter{margin:32px 0}
+.recommend-edit .recommend-filter .button{height:36px;width:92px;border-radius:4px;color:#E15616;border:1px solid #E15616;background:#FFE6DC;text-align:center;line-height:36px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin-left:8px}
+.recommend-edit .recommend-filter .recommend-filter-item{display:inline-block;margin-right:48px}
+.recommend-edit .recommend-filter .el-input{display:inline-block;width:186px}
+.recommend-edit .recommend-filter .el-input .el-input__inner{height:36px}
+.recommend-edit .recommend-filter .el-input .el-input__icon{line-height:36px}
+.recommend-edit .btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:120px}
+.recommend-edit .btn{width:232px;height:50px;margin:0 16px;text-align:center;line-height:50px;font-size:18px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+.recommend-edit .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
+.recommend-edit .btn.submit{background:#E15616;color:#FFFFFF}
+}
+
+@media screen and (max-width:768px){
+.recommend-edit .right{background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;padding: 0 3.2vw}
+.recommend-edit .recommend-title{padding: 7.2vw 0 5.6vw; font-size:3.6vw;font-weight:bold;color:#4A4F58;text-align:center}
+.recommend-edit .recommend-list-label{margin-bottom: 4vw;font-size:3.4vw;color:#22272E}
+.recommend-edit .recommend-list-label span{font-size:3.4vw;color:#9AA5B5}
+.recommend-edit .recommend-control{margin-top:5.6vw}
+.recommend-edit .recommend-control .recommend-control-label{display: block; margin-bottom: 4vw;}
+.recommend-edit .recommend-control .el-radio{margin: 1.7vw 0;}
+.recommend-edit .recommend-control .el-radio span.tip{font-size:2.8vw;color:#9AA5B5}
+.recommend-edit .recommend-filter{margin:32px 0}
+.recommend-edit .recommend-filter .button{display: inline-block; height:40px;width:21.4vw;border-radius:4px;color:#E15616;border:1px solid #E15616;background:#FFE6DC;text-align:center;line-height:40px;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin-left:1.4vw}
+.recommend-edit .recommend-filter .recommend-filter-item{display:block}
+.recommend-edit .recommend-filter .recommend-filter-label{display:block;margin-bottom: 2.4vw;margin-top: 5.6vw}
+.recommend-edit .recommend-filter .el-select{display:block;width: 100%;}
+.recommend-edit .recommend-filter .serach-input{display:inline-block;width: 69.3vw;}
+.recommend-edit .btns{margin-top: 27.2vw;margin-bottom: 4vw;}
+.recommend-edit .btns .btn{width:100%;display:block;height:11.2vw;text-align:center;line-height:11.2vw;font-size:3.6vw;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer;margin-bottom:2.4vw}
+.recommend-edit .btns .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
+.recommend-edit .btns .btn.submit{background:#E15616;color:#FFFFFF}
+}

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

@@ -0,0 +1,69 @@
+function fetchCompoentTemplate(id) {
+    return document.querySelector('#' + id).text
+}
+
+function createFormVideoGroup() {
+    let groupId = 0
+    return {
+        template: fetchCompoentTemplate('form-video-group'),
+        props: {
+            action: {
+                type: String,
+                default: ''
+            },
+            data: {
+                type: Object,
+                default: function () {
+                    return {}
+                }
+            }
+        },
+        data() {
+            return {
+                fileList: [],
+                formList: [],
+                rules: {
+                    videoTitle: [{required: true, message: '视频标题不能为空', trigger: ['blur']}],
+                    videoUrl: [{required: true, message: '视频链接不能为空', trigger: ['change']}]
+                }
+            }
+        },
+        computed: {
+            addFlag() {
+                return this.formList.length < 6
+            }
+        },
+        watch: {
+            formList: {
+                handler: function (nVal) {
+                    this.$emit('change', this.formList)
+                },
+                deep: true
+            }
+        },
+        methods: {
+            onUploadSuccess(response, file, fileList) {
+                this.fileList = []
+                this.formData.videoUrl = response.data
+                console.log(this.formData.videoUrl)
+            },
+            onUploadError(err, file, fileList) {
+                this.fileList = []
+                this.formData.videoUrl = ''
+            },
+            insertOne() {
+                groupId++
+                this.formList.push({
+                    ref: 'videoGroup' + groupId,
+                    groupId: groupId,
+                    videoTitle: '',
+                    videoUrl: ''
+                })
+            },
+            removeOne(row) {
+                const index = this.formList.findIndex(item => item.groupId === row.groupId)
+                this.formList.splice(index, 1)
+            }
+        }
+    }
+}

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

@@ -1,8 +1,10 @@
 const Editor = window.createEditorComponent()
+const FormVideoGroup = window.createFormVideoGroup()
 
 const app = new Vue({
     components: {
         Editor,
+        FormVideoGroup
     },
 
     data() {

src/main/resources/static/js/supplier-center/encyclopedia/instrument-list.js

@@ -111,10 +111,18 @@ var productList = new Vue({
                 1: this.toEdit,
                 2: this.changeStatus,
                 3: this.toDetail,
-                4: this.handleDelete
+                4: this.handleDelete,
+                5: this.handleEditRecommend
             };
             handles[type](product);
         },
+
+        // 配置推荐信息
+        handleEditRecommend(product){
+            localStorage.setItem('productId', product.productId);
+            window.open('/supplier/encyclopedia/recommend-edit.html');
+        },
+
         //跳转编辑页面
         toEdit: function toEdit(product) {
             localStorage.setItem('productId', product.productId);

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

@@ -1,8 +1,11 @@
 const Editor = window.createEditorComponent()
+const FormVideoGroup = window.createFormVideoGroup()
+
 
 const app = new Vue({
     components: {
         Editor,
+        FormVideoGroup
     },
 
     data() {

src/main/resources/static/js/supplier-center/encyclopedia/product-list.js

@@ -109,10 +109,18 @@ var productList = new Vue({
                 1: this.toEdit,
                 2: this.changeStatus,
                 3: this.toDetail,
-                4: this.handleDelete
+                4: this.handleDelete,
+                5: this.handleEditRecommend
             };
             handles[type](product);
         },
+
+        // 配置推荐信息
+        handleEditRecommend(product){
+            localStorage.setItem('productId', product.productId);
+            window.open('/supplier/encyclopedia/recommend-edit.html');
+        },
+
         //跳转编辑页面
         toEdit: function toEdit(product) {
             localStorage.setItem('productId', product.productId);

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

@@ -0,0 +1,17 @@
+var RecommendEdit = new Vue({
+    el: '#recommendEdit',
+    data: {
+        recommendList: [],
+        typeList: [{
+            typeName: '胚胎层',
+            typeId: 1
+        }],
+        recommendType: 0,
+    },
+    methods: {
+        handleBack() {
+        },
+        handleSave() {
+        }
+    }
+})

src/main/resources/templates/encyclopedia/instrument-detail.html

@@ -39,6 +39,41 @@
             </div>
         </div>
     </section>
+
+    <!-- 相关视频 -->
+    <section class="section related-video">
+        <div class="title">
+            <h2>相关视频</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+        </div>
+    </section>
+
     <!-- 正品识别 -->
     <section class="section approve">
         <div class="title">
@@ -250,6 +285,115 @@
         </div>
     </section>
 
+    <!--  猜你喜欢 -->
+    <section class="section recommend">
+        <div class="title">
+            <h2>猜你喜欢</h2>
+            <!-- <div class="line"></div> -->
+        </div>
+        <div class="content">
+            <a class="recommend-section">
+                <div class="cover">
+                    <img src="https://picsum.photos/400/400"/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：<span>2022-06-01   16:52</span></time>
+                        <span>浏览量：<span>999</span></span>
+                    </footer>
+                </div>
+            </a>
+            <a class="recommend-section">
+                <div class="cover">
+                    <img src="https://picsum.photos/400/400"/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：<span>2022-06-01   16:52</span></time>
+                        <span>浏览量：<span>999</span></span>
+                    </footer>
+                </div>
+            </a>
+            <a class="recommend-section">
+                <div class="cover">
+                    <img src="https://picsum.photos/400/400"/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：<span>2022-06-01   16:52</span></time>
+                        <span>浏览量：<span>999</span></span>
+                    </footer>
+                </div>
+            </a>
+            <a class="recommend-section">
+                <div class="cover">
+                    <img src="https://picsum.photos/400/400"/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：<span>2022-06-01   16:52</span></time>
+                        <span>浏览量：<span>999</span></span>
+                    </footer>
+                </div>
+            </a>
+        </div>
+    </section>
 </article>
 <!-- 侧边楼层导航 -->
 <aside class="navigate" id="category"></aside>
@@ -264,6 +408,15 @@
     </div>
 </div>
 
+<!-- 视频播放弹窗 -->
+<div class="video-popup" style="display: none;" id="video-popup">
+    <div class="mask"></div>
+    <span class="close"></span>
+    <div class="content">
+        <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
+    </div>
+</div>
+
 <!-- 引用公共底部 -->
 <template th:replace="encyclopedia/components/footer"></template>
 <script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>

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

@@ -38,6 +38,42 @@
             </div>
         </div>
     </section>
+
+    <!-- 相关视频 -->
+    <section class="section related-video">
+        <div class="title">
+            <h2>相关视频</h2>
+            <div class="line"></div>
+        </div>
+        <div class="content">
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+            <div class="video-control">
+                <span class="play"></span>
+                <video></video>
+            </div>
+        </div>
+    </section>
+
+
     <!-- 产品参数 -->
     <section class="section params">
         <div class="title">
@@ -232,7 +268,119 @@
         </div>
     </section>
 
+    <!--  猜你喜欢 -->
+    <section class="section recommend">
+        <div class="title">
+            <h2>猜你喜欢</h2>
+            <!-- <div class="line"></div> -->
+        </div>
+        <div class="content">
+            <a class="recommend-section">
+                <div class="cover">
+                    <img src="https://picsum.photos/400/400"/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：<span>2022-06-01   16:52</span></time>
+                        <span>浏览量：<span>999</span></span>
+                    </footer>
+                </div>
+            </a>
+            <a class="recommend-section">
+                <div class="cover">
+                    <img src="https://picsum.photos/400/400"/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：<span>2022-06-01   16:52</span></time>
+                        <span>浏览量：<span>999</span></span>
+                    </footer>
+                </div>
+            </a>
+            <a class="recommend-section">
+                <div class="cover">
+                    <img src="https://picsum.photos/400/400"/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：<span>2022-06-01   16:52</span></time>
+                        <span>浏览量：<span>999</span></span>
+                    </footer>
+                </div>
+            </a>
+            <a class="recommend-section">
+                <div class="cover">
+                    <img src="https://picsum.photos/400/400"/>
+                </div>
+                <div class="content">
+                    <h3>MD果酸</h3>
+                    <div class="title">MD果酸（ceuticals™ ）源自英国，由多位科学家及皮肤科医生共同研创；通过使用不同比</div>
+                    <div class="question">
+                        <p>MD果酸为什么不会刺激皮肤？</p>
+                        <p>MD果酸对于暗疮性皮肤能达到什么效果？</p>
+                        <p>MD果酸是否具有腐蚀性？</p>
+                    </div>
+                    <div class="tag-list">
+                        <span class="tag">常见问题</span>
+                        <span class="tag">效果展示</span>
+                        <span class="tag">技术原理</span>
+                        <span class="tag">术前术后</span>
+                    </div>
+                    <div class="dashed-line"></div>
+                    <footer class="footer">
+                        <time>日期：<span>2022-06-01   16:52</span></time>
+                        <span>浏览量：<span>999</span></span>
+                    </footer>
+                </div>
+            </a>
+        </div>
+    </section>
+
 </article>
+
+
 <!-- 侧边楼层导航 -->
 <aside class="navigate" id="category"></aside>
 <!-- 立即咨询弹窗 -->
@@ -245,6 +393,16 @@
         <p class="time">周一~周五 / 09:00 ~ 18:00</p>
     </div>
 </div>
+
+<!-- 视频播放弹窗 -->
+<div class="video-popup" style="display: none;" id="video-popup">
+    <div class="mask"></div>
+    <span class="close"></span>
+    <div class="content">
+        <video src="https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4" controls></video>
+    </div>
+</div>
+
 <!-- 引用公共底部 -->
 <template th:replace="encyclopedia/components/footer"></template>
 <script charset="utf-8" type="text/javascript" src="/lib/viewer.min.js"></script>

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

@@ -30,8 +30,10 @@
                     <img class="product-img" :src="isPC?parameters.pcImage:parameters.appletsImage">
                     <div class="origin-logo-box"><img class="product-brand" :src="parameters.authLogo"></div>
                     <img class="product-authorize" src="/img/quality/pro-authorization.png">
-                    <img class="sq-book" @click="showSqBookModal" v-show="!isShowSqBookModal"
-                         :src="isPC?parameters.appletsCertificateImage:parameters.appletsCertificateImage">
+                    <template v-if="parameters.appletsCertificateImage">
+                        <img class="sq-book" @click="showSqBookModal" v-show="!isShowSqBookModal"
+                             :src="isPC?parameters.appletsCertificateImage:parameters.appletsCertificateImage">
+                    </template>
                 </div>
                 <!-- 商品介绍区域 -->
                 <div class="product-desc">

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

@@ -6,7 +6,7 @@
     <template th:replace="components/head-link"></template>
     <!--element ui 样式表-->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
-    <link th:href="@{/lib/element-ui-min.css}" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" th:href="@{/lib/element-ui/element-ui-min.css}" />
     <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/supplier-center/article/article-edit.css(v=${version})}" charset="UTF-8" rel="stylesheet" type="text/css">
@@ -37,12 +37,14 @@
                     <div class="valide-form">
                         <el-form :model="formData" :rules="rules" ref="ruleForm" label-position="top">
                             <!-- 标题 -->
-                            <el-form-item label="标题" prop="title">
+                            <el-form-item label="标题" prop="title" class="mint-filter">
                                 <el-input v-model="formData.title" placeholder="请输入文章标题"></el-input>
+                                <div class="mint-message">123</div>
                             </el-form-item>
                             <!-- 文章标签 -->
-                            <el-form-item label="文章标签" prop="label">
+                            <el-form-item label="文章标签" prop="label" class="mint-filter">
                                 <el-input v-model="formData.label" placeholder="请输入文章标签"></el-input>
+                                <div class="mint-message">123</div>
                             </el-form-item>
                             <el-form-item  label="">
                                 <!-- 预选标签列表 -->
@@ -61,25 +63,29 @@
                                 </div>
                             </el-form-item>
                             <!-- SEO关键词 -->
-                            <el-form-item label="SEO关键词" prop="keyword">
+                            <el-form-item label="SEO关键词" prop="keyword" class="mint-filter">
                                 <el-input v-model="formData.keyword" placeholder="请输入SEO关键词"></el-input>
+                                <div class="mint-message">123</div>
                             </el-form-item>
                             <!-- 发布人 -->
-                            <el-form-item label="发布人" prop="publisher">
+                            <el-form-item label="发布人" prop="publisher" class="mint-filter">
                                 <el-input v-model="formData.publisher" placeholder="请填写发布人姓名"></el-input>
+                                <div class="mint-message">123</div>
                             </el-form-item>
                             <!-- 来源 -->
                             <el-form-item label="来源" prop="source">
                                 <el-input v-model="formData.source" placeholder="请填写文章来源"></el-input>
                             </el-form-item>
                             <!-- 推荐语(描述) -->
-                            <el-form-item label="推荐语(描述)" prop="recommendContent">
+                            <el-form-item label="推荐语(描述)" prop="recommendContent" class="mint-filter">
                                 <el-input type="textarea" :rows="3" v-model="formData.recommendContent" placeholder="请填写推荐语(描述)"></el-input>
+                                <div class="mint-message">123</div>
                             </el-form-item>
                             <!-- 文章内容 -->
-                            <el-form-item label="文章内容" prop="articleContent">
+                            <el-form-item label="文章内容" prop="articleContent" class="mint-filter">
                                 <el-input v-model="formData.articleContent" v-show="false"></el-input>
                                 <editor v-model="formData.articleContent" placeholder="请输入文章内容"></editor>
+                                <div class="mint-message">123</div>
                             </el-form-item>
                             <!-- 文章分类 -->
                             <el-form-item label="文章分类" prop="typeId">
@@ -129,7 +135,7 @@
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/wangEditor.min.js}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/article/editor-component.js(v=${version})}"></script>

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

@@ -6,7 +6,7 @@
     <template th:replace="components/head-link"></template>
     <!--element ui 样式表-->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
-    <link th:href="@{/lib/element-ui-min.css}" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" th:href="@{/lib/element-ui/element-ui-min.css}" />
     <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
 <!--    <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">-->
     <link th:href="@{/css/supplier-center/article/article-list.css(v=${version})}" rel="stylesheet" type="text/css">
@@ -184,7 +184,7 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/article/article-list.js(v=${version})}"></script>

src/main/resources/templates/supplier-center/encyclopedia/components/form-component.html

@@ -1,66 +0,0 @@
-<!-- 图片上传 -->
-<script type="text/html" id="imageUpload">
-    <div class="cm image-upload">
-        <template v-if="files.length > 0">
-            <div class="image border" v-for="(file,index) in files" :key="files">
-                <img :src="file.url" :alt="file.name"/>
-                <span class="remove" @click="removeImage(file,index)">&times;</span>
-            </div>
-        </template>
-        <div class="choose-image border" @click="handleClick" v-if="canChooseImage">
-            <input type="file" ref="file" @change="handleChooseImage" :multiple="multiple" :accept="accept"/>
-            <span>{{ placeholder }}</span>
-        </div>
-    </div>
-</script>
-<!-- 单选组件 -->
-<script type="text/html" id="radio">
-    <div class="cm radio" :class="{checked:isChecked}" @click="handleClick">
-        <slot></slot>
-    </div>
-</script>
-<!-- 下拉组件Select -->
-<script type="text/html" id="select">
-    <div class="cm select" @click.stop="optionsVisible = !optionsVisible">
-        <input type="text" class="cm input border" :placeholder="placeholder" v-model="label"/>
-        <span class="cm-icon iconfont " :class="optionsVisible ? 'icon-arrow-up' : 'icon-arrow-down'"></span>
-        <div class="options border radius shadow" v-show="optionsVisible">
-            <slot></slot>
-        </div>
-    </div>
-</script>
-<!-- 下拉子组件Option -->
-<script type="text/html" id="option">
-    <div class="cm option" @click.stop="handleClick">{{ label }}</div>
-</script>
-<!-- 文本框组 -->
-<script type="text/html" id="inputGroup">
-    <div class="input-group">
-        <span class="add-btn" @click.stop="handleAddOnce" v-if="addText">{{ addText }}</span>
-        <div class="cm form-group" v-for="(item, index) in showList" :key="index">
-            <input type="text" class="cm input  border valid-control" v-model="item[keyMap.key]" :placeholder="getPlaceholder(index).label"/>
-            <input type="text" class="cm input  border valid-control" v-model="item[keyMap.value]" :placeholder="getPlaceholder(index).value"/>
-            <span class="remove" v-if="showList.length > minLimit" @click.stop="handleRemove(item, index)">&times;</span>
-        </div>
-    </div>
-</script>
-<!--常见问题-->
-<script type="text/html" id="questionGroup">
-    <div class="question-group">
-        <span class="add-btn" @click.stop="handleAddOnce" v-if="addText">{{ addText }}</span>
-        <div class="cm form-group" v-for="(item, index) in showList" :key="index">
-            <div class="question">
-                <div class="form-label"><em>*</em><span>问题{{ index +1 }}</span></div>
-                <input type="text" class="cm input max border valid-control hello" v-model="item[keyMap.key]" :placeholder="getPlaceholder(index).label"/>
-            </div>
-            <div class="answer">
-                <div class="form-label"><em>*</em><span>答</span></div>
-                <textarea type="text" class="cm textarea border max no-resize valid-control" rows="3" v-model="item[keyMap.value]" :placeholder="getPlaceholder(index).value"></textarea>
-            </div>
-            <span class="remove" v-if="showList.length > minLimit" @click.stop="handleRemove(item)">&times;</span>
-        </div>
-    </div>
-</script>
-
-
-

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

@@ -8,7 +8,7 @@
     <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
     <!--element ui 样式表-->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
-    <link th:href="@{/lib/element-ui-min.css}" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" th:href="@{/lib/element-ui/element-ui-min.css}" />
     <link th:href="@{/css/supplier-center/encyclopedia/edit-page-style.css}" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
@@ -38,15 +38,18 @@
                         <el-form :model="formData" :rules="rules" ref="ruleForm" label-position="top">
                             <!-- 仪器简述 -->
                             <div class="cm-big-label"><span class="cm-label">仪器简述</span></div>
-                            <el-form-item label="仪器名称（必填）" prop="name">
+                            <el-form-item label="仪器名称（必填）" prop="name" class="mint-filter">
                                 <el-input v-model="formData.name" placeholder="请输入仪器名称"></el-input>
+                                <div class="mint-message">123</div>
                             </el-form-item>
-                            <el-form-item label="仪器别名（必填）" prop="alias">
+                            <el-form-item label="仪器别名（必填）" prop="alias" class="mint-filter">
                                 <el-input v-model="formData.alias" placeholder="请输入英文名或其他名称"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
-                            <el-form-item label="仪器概述（必填）" prop="discription">
+                            <el-form-item label="仪器概述（必填）" prop="discription" class="mint-filter">
                                 <el-input v-model="formData.discription" type="textarea" placeholder="请输入仪器概述"
                                           :rows="5"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
                             <el-form-item label="仪器链接（必填）" prop="productLink">
                                 <el-input v-model="formData.productLink" placeholder="输入您采美商城的商品链接详情，便于用户精准找到"></el-input>
@@ -68,8 +71,14 @@
                                 </el-upload>
                             </el-form-item>
 
+                            <!-- 相关视频 -->
+                            <div class="form-video-group-list">
+                                <div class="cm-big-label"><span class="cm-label">相关视频（各视频大小不超过50M，最多上传6个）</span></div>
+                                <form-video-group :action="action" ></form-video-group>
+                            </div>
+
                             <!-- 仪器参数 -->
-                            <el-form-item label="仪器参数（必填，至少两项）" prop="paramList" class="cm-big-label-el">
+                            <el-form-item label="仪器参数（必填，至少两项）" prop="paramList" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.paramList" v-show="false"></el-input>
                                 <div class="form-params-group">
                                     <span class="add-one" @click="addParam">添加参数</span>
@@ -86,6 +95,7 @@
                                         >&times;</span>
                                     </el-row>
                                 </div>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 正品识别 -->
@@ -111,35 +121,41 @@
                             </el-form-item>
 
                             <!-- 仪器优点 -->
-                            <el-form-item label="仪器优点" prop="advantage" class="cm-big-label-el">
+                            <el-form-item label="仪器优点" prop="advantage" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.advantage" v-show="false"></el-input>
                                 <editor v-model="formData.advantage" placeholder="请输入仪器优点"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 仪器缺点 -->
-                            <el-form-item label="仪器缺点" prop="disadvantage" class="cm-big-label-el">
+                            <el-form-item label="仪器缺点" prop="disadvantage" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.disadvantage" v-show="false"></el-input>
                                 <editor v-model="formData.disadvantage" placeholder="请输入仪器缺点"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 仪器原理 -->
-                            <el-form-item label="仪器原理" prop="principle" class="cm-big-label-el">
+                            <el-form-item label="仪器原理" prop="principle" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.principle" v-show="false"></el-input>
                                 <editor v-model="formData.principle" placeholder="请输入仪器原理"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- SEO关键词 -->
-                            <el-form-item label="SEO关键字" prop="seo">
+                            <el-form-item label="SEO关键字" prop="seo" class="mint-filter">
                                 <el-input v-model="formData.seoKeyword" placeholder="例如：名称,名称"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 仪器档案 -->
                             <div class="cm-big-label"><span class="cm-label">仪器档案</span></div>
-                            <el-form-item label="品牌" prop="brand">
+                            <el-form-item label="品牌" prop="brand" class="mint-filter">
                                 <el-input v-model="formData.brand" placeholder="请输入仪器品牌"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
-                            <el-form-item label="产地" prop="producePlace">
+                            <el-form-item label="产地" prop="producePlace" class="mint-filter">
                                 <el-input v-model="formData.producePlace" placeholder="请输入仪器产地"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
                             <el-form-item label="上市时间" prop="marketTime">
                                 <el-date-picker class="max-width" v-model="formData.marketTime" :type="marketTimeType"
@@ -151,8 +167,9 @@
                                     <el-radio label="date">年/月/日</el-radio>
                                 </el-radio-group>
                             </el-form-item>
-                            <el-form-item label="供应商" prop="company">
+                            <el-form-item label="供应商" prop="company" class="mint-filter">
                                 <el-input v-model="formData.company" placeholder="请输入供应商"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
                             <el-form-item label="NMPA认证时间" prop="nmpaTime">
                                 <el-date-picker class="max-width" v-model="formData.nmpaTime" :type="nmpaTimeType"
@@ -182,21 +199,24 @@
                             </el-form-item>
 
                             <!-- 适应人群 -->
-                            <el-form-item label="适应症" prop="adaptiveMan" class="cm-big-label-el">
+                            <el-form-item label="适应症" prop="adaptiveMan" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.adaptiveMan" v-show="false"></el-input>
                                 <editor v-model="formData.adaptiveMan" placeholder="请输入适应症"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 不适应人群 -->
-                            <el-form-item label="不适应人群" prop="unAdaptiveMan" class="cm-big-label-el">
+                            <el-form-item label="不适应人群" prop="unAdaptiveMan" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.unAdaptiveMan" v-show="false"></el-input>
                                 <editor v-model="formData.unAdaptiveMan" placeholder="请输入不适应人群"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 注意事项 -->
-                            <el-form-item label="注意事项" prop="aroundOperation" class="cm-big-label-el">
+                            <el-form-item label="注意事项" prop="aroundOperation" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.aroundOperation" v-show="false"></el-input>
                                 <editor v-model="formData.aroundOperation" placeholder="请输入注意事项"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 效果展示
@@ -218,7 +238,7 @@
                             -->
 
                             <!-- 常见问题 -->
-                            <el-form-item label="常见问题" prop="questionList" class="cm-big-label-el">
+                            <el-form-item label="常见问题" prop="questionList" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.questionList" v-show="false"></el-input>
                                 <div class="form-question-group">
                                     <span class="add-one" @click="addQuestion">添加问答</span>
@@ -234,6 +254,7 @@
                                         >
                                     </div>
                                 </div>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <el-form-item label="仪器类别" prop="typeId" class="cm-big-label-el">
@@ -266,17 +287,49 @@
         <img width="100%" :src="dialogImageUrl" alt=""/>
     </el-dialog>
 </div>
+
+<script id="form-video-group" type="text/html">
+    <div class="form-video-group" :style="{ paddingBottom:formList.length === 0 ? '35px' : 0  }">
+        <span class="add-one" @click="insertOne" v-if="addFlag">添加视频</span>
+        <template v-for="(formData,index) in formList">
+            <div class="form-video-section">
+                <span class="remove-btn" @click="removeOne(formData)">删除</span>
+                <div class="form-video-number">视频{{++index}}</div>
+                <el-form :model="formData" :rules="rules" :ref="formData.ref">
+                    <el-form-item label="标题" prop="videoTitle">
+                        <el-input v-model="formData.videoTitle" placeholder="请输入视频标题"></el-input>
+                    </el-form-item>
+                    <el-form-item label="" prop="videoUrl">
+                        <el-row :gutter="12">
+                            <el-col :span="18">
+                                <el-input v-model="formData.videoUrl" disabled placeholder="请选择视频路径"></el-input>
+                            </el-col>
+                            <el-col :span="6">
+                                <el-upload :action="action" :auto-upload="true" :show-file-list="false" :multiple="false" :limit="2"
+                                           accept=".mp4" :on-success="onUploadSuccess" :on-error="onUploadError" :file-list="fileList">
+                                    <template #trigger>
+                                        <button class="form-upload-button" @click.prevent>选择文件</button>
+                                    </template>
+                                </el-upload>
+                            </el-col>
+                        </el-row>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </template>
+    </div>
+</script>
+
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
-<!-- 引入vue组件 -->
-<template th:replace="supplier-center/encyclopedia/components/form-component"></template>
 
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/wangEditor.min.js}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/editor-component.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/components.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/instrument-edit.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/supplier-center/encyclopedia/instrument-list.html

@@ -7,7 +7,7 @@
     <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
     <!--element ui 样式表-->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
-    <link th:href="@{/lib/element-ui-min.css}" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" th:href="@{/lib/element-ui/element-ui-min.css}" />
     <link th:href="@{/css/supplier-center/encyclopedia/article-list.css(v=${version})}" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
@@ -141,6 +141,7 @@
                                         <button class="form-button edit" @click="clickOption(productInfo, 1)">编辑</button><br>
                                         <button class="form-button search" @click="clickOption(productInfo, 3)">查看</button>
                                         <button class="form-button delete" @click="clickOption(productInfo, 4)">删除</button>
+                                        <button class="form-button delete" @click="clickOption(productInfo, 5)">相关推荐</button>
                                     </div>
                                 </td>
                             </tr>
@@ -171,7 +172,7 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/instrument-list.js(v=${version})}"></script>

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

@@ -8,7 +8,7 @@
     <link th:if="${pageId==1026}" th:href="@{/css/base/form.css(v=${version})}" rel="stylesheet" type="text/css">
     <!--element ui 样式表-->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
-    <link th:href="@{/lib/element-ui-min.css}" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" th:href="@{/lib/element-ui/element-ui-min.css}" />
     <link th:href="@{/css/supplier-center/encyclopedia/edit-page-style.css}" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
@@ -38,15 +38,18 @@
                         <el-form :model="formData" :rules="rules" ref="ruleForm" label-position="top">
                             <!-- 产品简述 -->
                             <div class="cm-big-label"><span class="cm-label">产品简述</span></div>
-                            <el-form-item label="产品名称（必填）" prop="name">
+                            <el-form-item label="产品名称（必填）" prop="name" class="mint-filter">
                                 <el-input v-model="formData.name" placeholder="请输入产品名称"></el-input>
+                                <div class="mint-message">123</div>
                             </el-form-item>
-                            <el-form-item label="产品别名（必填）" prop="alias">
+                            <el-form-item label="产品别名（必填）" prop="alias" class="mint-filter">
                                 <el-input v-model="formData.alias" placeholder="请输入英文名或其他名称"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
-                            <el-form-item label="产品概述（必填）" prop="discription">
+                            <el-form-item label="产品概述（必填）" prop="discription" class="mint-filter">
                                 <el-input v-model="formData.discription" type="textarea" placeholder="请输入产品概述"
                                           :rows="5"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
                             <el-form-item label="产品链接（必填）" prop="productLink">
                                 <el-input v-model="formData.productLink" placeholder="输入您采美商城的商品链接详情，便于用户精准找到"></el-input>
@@ -68,8 +71,14 @@
                                 </el-upload>
                             </el-form-item>
 
+                            <!-- 相关视频 -->
+                            <div class="form-video-group-list">
+                                <div class="cm-big-label"><span class="cm-label">相关视频（各视频大小不超过50M，最多上传6个）</span></div>
+                                <form-video-group :action="action" ></form-video-group>
+                            </div>
+
                             <!-- 产品参数 -->
-                            <el-form-item label="产品参数（必填，至少两项）" prop="paramList" class="cm-big-label-el">
+                            <el-form-item label="产品参数（必填，至少两项）" prop="paramList" class="cm-big-label-el mint-filter" >
                                 <el-input v-model="formData.paramList" v-show="false"></el-input>
                                 <div class="form-params-group">
                                     <span class="add-one" @click="addParam">添加参数</span>
@@ -87,38 +96,45 @@
                                         >
                                     </el-row>
                                 </div>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 产品优点 -->
-                            <el-form-item label="产品优点" prop="advantage" class="cm-big-label-el">
+                            <el-form-item label="产品优点" prop="advantage" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.advantage" v-show="false"></el-input>
                                 <editor v-model="formData.advantage" placeholder="请输入产品优点"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 产品缺点 -->
-                            <el-form-item label="产品缺点" prop="disadvantage" class="cm-big-label-el">
+                            <el-form-item label="产品缺点" prop="disadvantage" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.disadvantage" v-show="false"></el-input>
                                 <editor v-model="formData.disadvantage" placeholder="请输入产品缺点"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 产品原理 -->
-                            <el-form-item label="产品原理" prop="principle" class="cm-big-label-el">
+                            <el-form-item label="产品原理" prop="principle" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.principle" v-show="false"></el-input>
                                 <editor v-model="formData.principle" placeholder="请输入产品原理"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- SEO关键词 -->
-                            <el-form-item label="SEO关键字" prop="seo">
+                            <el-form-item label="SEO关键字" prop="seo" class="mint-filter">
                                 <el-input v-model="formData.seoKeyword" placeholder="例如：名称,名称"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 产品档案 -->
                             <div class="cm-big-label"><span class="cm-label">产品档案</span></div>
-                            <el-form-item label="品牌" prop="brand">
+                            <el-form-item label="品牌" prop="brand" class="mint-filter">
                                 <el-input v-model="formData.brand" placeholder="请输入产品品牌"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
-                            <el-form-item label="产地" prop="producePlace">
+                            <el-form-item label="产地" prop="producePlace" class="mint-filter">
                                 <el-input v-model="formData.producePlace" placeholder="请输入产品产地"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
                             <el-form-item label="上市时间" prop="marketTime">
                                 <el-date-picker class="max-width" v-model="formData.marketTime" :type="marketTimeType"
@@ -130,8 +146,9 @@
                                     <el-radio label="date">年/月/日</el-radio>
                                 </el-radio-group>
                             </el-form-item>
-                            <el-form-item label="供应商" prop="company">
+                            <el-form-item label="供应商" prop="company" class="mint-filter">
                                 <el-input v-model="formData.company" placeholder="请输入供应商"></el-input>
+                                <div class="mint-message"></div>
                             </el-form-item>
                             <el-form-item label="NMPA认证时间" prop="nmpaTime">
                                 <el-date-picker class="max-width" v-model="formData.nmpaTime" :type="nmpaTimeType"
@@ -161,25 +178,28 @@
                             </el-form-item>
 
                             <!-- 适应证 -->
-                            <el-form-item label="适应证" prop="adaptiveMan" class="cm-big-label-el">
+                            <el-form-item label="适应证" prop="adaptiveMan" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.adaptiveMan" v-show="false"></el-input>
                                 <editor v-model="formData.adaptiveMan" placeholder="请输入适应证"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 不适应人群 -->
-                            <el-form-item label="不适应人群" prop="unAdaptiveMan" class="cm-big-label-el">
+                            <el-form-item label="不适应人群" prop="unAdaptiveMan" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.unAdaptiveMan" v-show="false"></el-input>
                                 <editor v-model="formData.unAdaptiveMan" placeholder="请输入不适应人群"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 注意事项 -->
-                            <el-form-item label="注意事项" prop="aroundOperation" class="cm-big-label-el">
+                            <el-form-item label="注意事项" prop="aroundOperation" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.aroundOperation" v-show="false"></el-input>
                                 <editor v-model="formData.aroundOperation" placeholder="请输入注意事项"></editor>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <!-- 常见问题 -->
-                            <el-form-item label="常见问题" prop="questionList" class="cm-big-label-el">
+                            <el-form-item label="常见问题" prop="questionList" class="cm-big-label-el mint-filter">
                                 <el-input v-model="formData.questionList" v-show="false"></el-input>
                                 <div class="form-question-group">
                                     <span class="add-one" @click="addQuestion">添加问答</span>
@@ -191,10 +211,10 @@
                                                   :rows="4"></el-input>
                                         <span class="remove" v-if="questionEmptyList.length > minLimitQuestions"
                                               @click="removeQuestion(index)"
-                                        >&times;</span
-                                        >
+                                        >&times;</span>
                                     </div>
                                 </div>
+                                <div class="mint-message"></div>
                             </el-form-item>
 
                             <el-form-item label="产品类别" prop="typeId" class="cm-big-label-el" props="typeId">
@@ -227,17 +247,52 @@
         <img width="100%" :src="dialogImageUrl" alt=""/>
     </el-dialog>
 </div>
+
+<script id="form-video-group" type="text/html">
+<div class="form-video-group" :style="{ paddingBottom:formList.length === 0 ? '35px' : 0  }">
+    <span class="add-one" @click="insertOne" v-if="addFlag">添加视频</span>
+    <template v-for="(formData,index) in formList">
+        <div class="form-video-section">
+            <span class="remove-btn" @click="removeOne(formData)">删除</span>
+            <div class="form-video-number">视频{{++index}}</div>
+            <el-form :model="formData" :rules="rules" :ref="formData.ref">
+                <el-form-item label="标题" prop="videoTitle">
+                    <el-input v-model="formData.videoTitle" placeholder="请输入视频标题"></el-input>
+                </el-form-item>
+                <el-form-item label="" prop="videoUrl">
+                    <el-row :gutter="12">
+                        <el-col :span="18">
+                            <el-input v-model="formData.videoUrl" disabled placeholder="请选择视频路径"></el-input>
+                        </el-col>
+                        <el-col :span="6">
+                            <el-upload :action="action" :auto-upload="true" :show-file-list="false" :multiple="false" :limit="2"
+                                       accept=".mp4" :on-success="onUploadSuccess" :on-error="onUploadError" :file-list="fileList">
+                                <template #trigger>
+                                    <button class="form-upload-button" @click.prevent>选择文件</button>
+                                </template>
+                            </el-upload>
+                        </el-col>
+                    </el-row>
+                </el-form-item>
+            </el-form>
+        </div>
+    </template>
+</div>
+</script>
+
+
+
+
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
-<!-- 引入vue组件 -->
-<template th:replace="supplier-center/encyclopedia/components/form-component"></template>
 
 <script charset="utf-8" type="text/javascript" th:src="@{/lib/wangEditor.min.js}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/editor-component.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/components.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/product-edit.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/supplier-center/encyclopedia/product-list.html

@@ -6,7 +6,7 @@
     <template th:replace="components/head-link"></template>
     <!--element ui 样式表-->
     <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
-    <link th:href="@{/lib/element-ui-min.css}" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" th:href="@{/lib/element-ui/element-ui-min.css}" />
     <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/supplier-center/encyclopedia/article-list.css(v=${version})}" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
@@ -141,6 +141,7 @@
                                         <button class="form-button edit" @click="clickOption(productInfo, 1)">编辑</button><br>
                                         <button class="form-button search" @click="clickOption(productInfo, 3)">查看</button>
                                         <button class="form-button delete" @click="clickOption(productInfo, 4)">删除</button>
+                                        <button class="form-button recommend" @click="clickOption(productInfo, 5)">相关推荐</button>
                                     </div>
                                 </td>
                             </tr>
@@ -171,7 +172,7 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/foot-link"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
 <script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/product-list.js(v=${version})}"></script>

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

@@ -0,0 +1,92 @@
+<!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>采美365网-采美百科-相关推荐</title>
+  <template th:replace="components/head-link"></template>
+  <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+  <!--element ui 样式表-->
+  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
+  <link rel="stylesheet" th:href="@{/lib/element-ui/element-ui-min.css}" />
+  <link th:href="@{/css/supplier-center/encyclopedia/recommend-edit.css(v=${version})}" rel="stylesheet" type="text/css">
+  <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="recommendEdit" class="recommend-edit">
+  <div class="navLayout" v-cloak>
+    <div v-if="isPC" class="top-row">
+      <div class="crumbs">
+        <span>我的采美</span>
+        <span>&gt;</span>
+        <span>采美百科</span>
+        <span>&gt;</span>
+        <span>产品</span>
+        <span>&gt;</span>
+        <span>相关推荐</span>
+      </div>
+    </div>
+    <div class="wrap clear">
+      <!--左侧导航-->
+      <template th:replace="supplier-center/components/tableft"></template>
+      <div class="right">
+        <div class="recommend-title">产品名称：无纺布脱毛纸</div>
+        <div class="recommend-list">
+          <div class="recommend-list-label">推荐列表<span>（当前列表推荐数为1，最多可推荐15条）</span></div>
+          <el-table :data="recommendList" style="width: 100%" :border="true">
+            <el-table-column prop="date" label="ID" align="center"></el-table-column>
+            <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
+            <el-table-column prop="address" label="排序" align="center"></el-table-column>
+            <el-table-column prop="address" label="操作" align="center"></el-table-column>
+          </el-table>
+        </div>
+        <!-- 推荐配置 -->
+        <div class="recommend-control">
+          <div class="recommend-control-item">
+            <span class="recommend-control-label">设置类型：</span>
+            <el-radio-group v-model="recommendType">
+              <el-radio :label="1">手动选择</el-radio>
+              <el-radio :label="0">自动选择<span class="tip">（设置自动选择后，系统将自动推荐相同分类中的前15个）</span></el-radio>
+            </el-radio-group>
+          </div>
+        </div>
+        <!-- 产品 仪器筛选 -->
+        <div class="recommend-filter">
+          <div class="recommend-filter-item">
+            <span class="recommend-filter-label">产品分类：</span>
+            <el-select  placeholder="请选择产品类别" class="max-width">
+              <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName" :value="item.typeId"></el-option>
+            </el-select>
+          </div>
+          <div class="recommend-filter-item">
+            <span class="recommend-filter-label">产品名称：</span>
+            <el-input class="serach-input"></el-input>
+            <button class="button">查询</button>
+          </div>
+        </div>
+        <el-table :data="recommendList" style="width: 100%" :border="true">
+          <el-table-column prop="date" label="ID" align="center"></el-table-column>
+          <el-table-column prop="name" label="产品名称" align="center"></el-table-column>
+          <el-table-column prop="address" label="排序" align="center"></el-table-column>
+          <el-table-column prop="address" label="操作" align="center"></el-table-column>
+        </el-table>
+
+        <div class="btns">
+          <button class="btn break" @click.prevent="handleBack">返回</button>
+          <button class="btn submit" @click.prevent="handleSave">保存</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui/element-ui.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/recommend-edit.js(v=${version})}"></script>
+</body>
+</html>