Merge remote-tracking branch 'origin/developerE' into developerD

# Conflicts:
#	src/main/resources/config/dev/application-dev.yml

src/main/java/com/caimei/www/pojo/baike/BaikeProduct.java

@@ -30,6 +30,26 @@ public class BaikeProduct implements Serializable {
      */
     private String name;
 
+    /**
+     * 供应商id
+     */
+    private Integer shopId;
+
+    /**
+     * 供应商名称
+     */
+    private String shopName;
+
+    /**
+     * 供应商logo
+     */
+    private String shopLogo;
+
+    /**
+     * 产品链接
+     */
+    private String productLink;
+
     /**
      * 概述
      */
@@ -73,8 +93,7 @@ public class BaikeProduct implements Serializable {
     /**
      * 上市时间
      */
-    @DateTimeFormat(pattern = "yyyy-MM-dd")
-    private Date marketTime;
+    private String marketTime;
     /**
      * 公司/厂商
      */
@@ -82,8 +101,7 @@ public class BaikeProduct implements Serializable {
     /**
      * NMPA认证时间
      */
-    @DateTimeFormat(pattern = "yyyy-MM-dd")
-    private Date nmpaTime;
+    private String nmpaTime;
     /**
      * 适应人群
      */
@@ -109,10 +127,16 @@ public class BaikeProduct implements Serializable {
      * 分类名称
      */
     private String typeName;
+
+    /**
+     * 浏览量
+     */
+    private Integer pv;
+
     /**
      * 参数列表
      */
-    private List<BaikeProductParam> paramList;
+    private List<List<BaikeProductParam>> paramList;
     /**
      * 产品认证图片列表
      */

src/main/java/com/caimei/www/service/page/impl/ProductServiceImpl.java

@@ -2,6 +2,7 @@ package com.caimei.www.service.page.impl;
 
 import com.alibaba.fastjson.JSONArray;
 import com.alibaba.fastjson.JSONObject;
+import com.aliyun.oss.common.utils.StringUtils;
 import com.caimei.www.mapper.BaikeDao;
 import com.caimei.www.mapper.ProductDao;
 import com.caimei.www.pojo.JsonModel;
@@ -20,6 +21,7 @@ import org.springframework.beans.factory.annotation.Value;
 import org.springframework.stereotype.Service;
 
 import javax.annotation.Resource;
+import java.util.ArrayList;
 import java.util.List;
 import java.util.Map;
 
@@ -217,7 +219,20 @@ public class ProductServiceImpl implements ProductService {
         BaikeProduct baikeProduct = baikeDao.getBaikeProductDetail(productId);
         if (null != baikeProduct) {
             // 参数列表
-            List<BaikeProductParam> paramList = baikeDao.findParamList(productId);
+            List<BaikeProductParam> paramResult = baikeDao.findParamList(productId);
+            List<List<BaikeProductParam>> paramList = new ArrayList<>();
+            ArrayList<BaikeProductParam> paramElement = new ArrayList<>();
+            for (BaikeProductParam param : paramResult) {
+                int size = paramElement.size();
+                paramElement.add(param);
+                if (size == 1) {
+                    paramList.add(paramElement);
+                    paramElement = new ArrayList<>();
+                }
+            }
+            if (paramElement.size() != 0) {
+                paramList.add(paramElement);
+            }
             baikeProduct.setParamList(paramList);
             // 产品/仪器认证图片列表
             List<String> authImageList = baikeDao.findImageList(productId, 1);
@@ -228,10 +243,35 @@ public class ProductServiceImpl implements ProductService {
             // 问题列表
             List<BaikeProductQuestion> questionList = baikeDao.findQuestionList(productId);
             baikeProduct.setQuestionList(questionList);
+            // 格式化时间
+            String marketTime = baikeProduct.getMarketTime();
+            String nmpaTime = baikeProduct.getNmpaTime();
+            baikeProduct.setMarketTime(formatTime(marketTime));
+            baikeProduct.setNmpaTime(formatTime(nmpaTime));
+            if (StringUtils.isNullOrEmpty(baikeProduct.getShopLogo())) {
+                baikeProduct.setShopLogo("/img/default/suppliver.jpg");
+            }
         }
         return baikeProduct;
     }
 
+    private String formatTime(String time) {
+        String timeFormat = null;
+        if (!StringUtils.isNullOrEmpty(time)) {
+            String[] split = time.split("-");
+            if (split.length > 0) {
+                timeFormat = split[0] + "年";
+                if (split.length > 1) {
+                    timeFormat += split[1] + "月";
+                    if (split.length > 2) {
+                        timeFormat += split[2] + "日";
+                    }
+                }
+            }
+        }
+        return timeFormat;
+    }
+
     @Override
     public JsonModel encyclopediaPv(Integer id) {
         baikeDao.encyclopediaPv(id);

src/main/resources/config/dev/application-dev.yml

@@ -54,11 +54,11 @@ logging:
 caimei:
   siteEnv: 0 #网站环境，（2：正式环境，1：测试环境，0：开发环境）
   #spiServer: http://192.168.2.68:8008
-#  coreServer: https://core-b.caimei365.com
-#  coreServer: http://192.168.2.67:18002
-  coreServer: http://192.168.2.75:18002
+  coreServer: https://core-b.caimei365.com
+  #coreServer: http://192.168.2.68:18002
+  #coreServer: http://192.168.2.75:18002
   imageDomain: https://img-b.caimei365.com
-  wwwDomain: http:localhost:8009
+  wwwDomain: http://localhost:8009
   destPath: classpath:/
   # 正品联盟（临时配置）
   zplmDomain: https://zp-b.caimei365.com

src/main/resources/mapper/BaikeMapper.xml

@@ -8,6 +8,10 @@
 		select a.id              AS "id",
 			   a.commodityType   AS "commodityType",
 			   a.name            AS "name",
+		       a.shopId			 AS "shopId",
+		       s.name			 AS "shopName",
+		       s.logo			 AS "shopLogo",
+		       a.productLink	 AS "productLink",
 			   a.alias           AS "alias",
 			   a.discription     AS "discription",
 			   a.seoKeyword      AS "seoKeyword",
@@ -26,8 +30,7 @@
 			   a.unAdaptiveMan   AS "unAdaptiveMan",
 			   a.aroundOperation AS "aroundOperation",
 			   a.publishTime     AS "publishTime",
-			   a.basePv          AS "basePv",
-			   a.actualPv        AS "actualPv",
+			   ifnull(a.basePv,0)+ifnull(a.actualPv,0) AS "pv",
 			   a.typeId          AS "typeId",
 			   a.topPosition     AS "topPosition",
 			   a.status          AS "status",
@@ -35,7 +38,9 @@
 			   cbt.name          as "typeName"
 		from cm_baike_product a
 				 left join cm_baike_type cbt on a.typeId = cbt.id
-		where a.id = #{productId} and a.status = 1 and NOW() > publishTime;
+			left join shop s on a.shopId = s.shopID
+		where a.id = #{productId} and a.delFlag = 0 and a.status = 1
+		  and a.auditStatus = 2 and a.onlineStatus = 2 and NOW() > publishTime;
 	</select>
 
 	<select id="findParamList" resultType="com.caimei.www.pojo.baike.BaikeProductParam">

src/main/resources/static/css/article/article.css

@@ -79,7 +79,7 @@ dl,dd,dt{zoom:1}
 	.search .keyword:-moz-placeholder{color:#fff}
 	.search .keyword::-moz-placeholder{color:#fff}
 	.search .keyword:-ms-input-placeholder{color:#fff}
-	.content.sea-top{margin-top:110px}
+	/* .content.sea-top{margin-top:110px} */
 	.foot{width:100%;height:130px;background:#262626;margin-top:100px}
 	.footer{width:1190px;margin:0 auto;text-align:center;height: 130px;box-sizing: border-box;padding: 39px 0;}
 	.footer p{line-height: 30px;color: #FFFFFF;}
@@ -93,7 +93,7 @@ dl,dd,dt{zoom:1}
 	.bar a{color:#777;font-size:14px}
 	.classify.biaoqian{border-bottom:solid 1px #ededed}
 	.content{width:1190px;margin:0 auto;position:relative}
-	.content .mainData{float:left;width:860px}
+	.content .mainData{float:left;width: 860px;background:#ffffff;}
 	.content .new-list{width:100%;background:#ffffff;}
 	.content .row:nth-last-child(1){border-bottom:0}
 	.new-list .row{position:relative;display:table;width:800px;height:150px;margin:0 30px;padding:30px 0;border-bottom:solid 1px #ededed}
@@ -151,7 +151,9 @@ dl,dd,dt{zoom:1}
 	.new-list .serachBox .keyword{width:696px;height:50px;line-height:50px;padding-left:40px;border:1px solid #ddd;border-right:none;border-radius:12px 0 0 12px;color:#777;font-size:14px;background:url(/img/info/search1.png) no-repeat 10px 12px}
 	.new-list .serachBox .keyword:focus{border:1px solid #ddd;border-right:none;outline:medium}
 	.new-list .serachBox .searchBtn{position:absolute;top:0px;right:1px;display:block;width:100px;height:50px;line-height:50px;text-align:center;border-radius:0 12px 12px 0;color:#fff;background-color:#e15616;background-image:none;font-size:20px}
-	.new-list .search .result{font-size:14px;color:#333}
+	.new-list .search-tip{ font-size: 14px; }
+	.new-list .search-tip b{color:#E15616;font-weight:bold;}
+	.new-list .search-tip a{ color:#E15616; text-decoration: underline; }
 	.search .result b{color:#e15616}
 	.no-result{width:860px;height:500px;text-align:center;padding-top:100px}
 	.no-result .nofound{color:#333;font-size:18px;margin-top:20px}
@@ -207,7 +209,9 @@ dl,dd,dt{zoom:1}
 	/*.tip-bar{display: flex;justify-content: space-between;align-items: center;flex-direction: row-reverse}*/
 	.tip-bar{ padding: 2vw 0 }
 	.tip,.bar,.classify{height:6vw;line-height:6vw;font-size:3.1vw;overflow:hidden;color:#93979F;padding:0 2vw}
-	.classify em{color:#E15616;font-weight:bold;margin-right:1vw;font-size:3.7vw}
+	.classify.search-tip{ font-size: 3.2vw; }
+	.classify.search-tip em{color:#E15616;font-weight:bold;}
+	.classify.search-tip a{ color:#E15616; text-decoration: underline; }
 	.mainData{min-height:68vh}
 	.new-list{background:#FFF;}
 	.dataRousce{width:100%;background:#FFF;overflow:hidden}

src/main/resources/static/css/base/base.pc.css

@@ -7,7 +7,7 @@ header{box-shadow: 0 2px 10px #ebecef;}
 .h5Only{display:none!important;}
 /*微信二维码样式*/
 iframe{width:320px !important;height: 280px !important}
-#globalHead.fiexd{width: 100%;height: auto;position: fixed;top: 0;left: 0;z-index: 999;}
+#globalHead.fiexd{width: 100%;height: auto;position: fixed;top: 0;left: 0;z-index: 99999;}
 .impowerBox{width:320px !important;}
 .impowerBox .qrcode {width: 200px !important;}
 .impowerBox .title {display: none;}

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

@@ -22,13 +22,19 @@ img{cursor: pointer;}
 .article .section.description .content .content-left .alias{color:#93979f;margin-left:40px}
 .article .section.description .content .cover{width:120px;height:120px;border:1px dashed #93979f;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
 .article .section.description .content .cover img{width:120px;height:120px}
-.article .section.params .tr{width:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:1px solid #e3e6eb;flex-wrap: wrap;}
-.article .section.params .tr:first-child{border-top:1px solid;border-left:1px solid;border-color:#e3e6eb}
-.article .section.params .tr .group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:50%}
-.article .section.params .tr .th,.article .section.params .tr .td{line-height:40px;font-size:14px;height:40px;border-right:1px solid;border-bottom:1px solid;border-color:#e3e6eb;-webkit-box-sizing:border-box;box-sizing:border-box}
-.article .section.params .tr .th a,.article .section.params .tr .td a{color:#e15616}
-.article .section.params .tr .th{background:#f4f5f8;width: 30%;}
-.article .section.params .tr .td{background:#ffffff;width: 70%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}
+/*.article .section.params .tr{width:100%;text-align:center;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-sizing:border-box;box-sizing:border-box;border-left:1px solid #e3e6eb;flex-wrap: wrap;}*/
+/*.article .section.params .tr:first-child{border-top:1px solid;border-left:1px solid;border-color:#e3e6eb}*/
+/*.article .section.params .tr .group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:50%}*/
+/*.article .section.params .tr .th,.article .section.params .tr .td{line-height:40px;font-size:14px;height:40px;border-right:1px solid;border-bottom:1px solid;border-color:#e3e6eb;-webkit-box-sizing:border-box;box-sizing:border-box}*/
+/*.article .section.params .tr .th a,.article .section.params .tr .td a{color:#e15616}*/
+/*.article .section.params .tr .th{background:#f4f5f8;width: 30%;}*/
+/*.article .section.params .tr .td{background:#ffffff;width: 70%; overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}*/
+.article .section.params .content{width:100%;font-size:14px;border-collapse:unset;border-spacing:unset}
+.article .section.params .content tr td{padding:8px;line-height:1.6;border-top:1px solid;border-left:1px solid;border-color:#e3e6eb !important}
+.article .section.params .content tr td:last-child{border-right:1px solid}
+.article .section.params .content tr:last-child td{border-bottom:1px solid}
+.article .section.params .content tr .th{width:18%;background:#f4f5f8}
+.article .section.params .content tr .td a { color:#e15616 }
 .article .section.approve .content .name{font-size:14px;line-height:24px}
 .article .section.approve .content a{color:#e15616}
 .article .section.approve .content .img-list{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
@@ -42,6 +48,13 @@ img{cursor: pointer;}
 .article .section.question .content .collapse dt .icon{position:absolute;right:0;top:2px;cursor:pointer}
 .article .section.question .content .collapse dd{padding-right:0;margin-top:4px;}
 .article .section.question .content .collapse dd span{background:#34cc8c}
+.article .section.publish-info{display: flex;justify-content: space-between;align-items: center;font-size: 12px;color: #666}
+.article .section.some-link .group{ display: flex;justify-content: space-between;align-items: center; }
+.article .section.some-link .group .link{flex: 1; display: flex; align-items: center;margin-top: 24px}
+.article .section.some-link .group .link .name{ font-size: 14px; margin-left: 16px;max-width: 300px;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: 88px;height: 88px; }
+
 .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}
@@ -97,4 +110,9 @@ body{padding-top:40.3vw}
 .contact-popup .content p{font-size:4.2vw;text-align:center;line-height:8vw;color:#9aa5b5;margin:0}
 .contact-popup .content p.tel{color:#e15616}
 .contact-popup .content p.time{color:#2c3038}
+.article .section.publish-info{display: flex;justify-content: space-between;align-items: center;font-size: 2.8vw;color: #aaa;margin: 4.8vw 0}
+.article .section.some-link .group .link{flex: 1; display: flex; align-items: center;margin-top: 4.2vw}
+.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; }
 }

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

@@ -1,104 +1,46 @@
-@charset "UTF-8";
-input[hidden]{display:none !important}
-textarea{resize: none;}
+.max-width{width:100% !important}
+.hide-upload .el-upload{display:none}
+.cm-label{margin-right:24px}
+.cm-label em{color:#f56c6c;margin-right:4px}
+.w-e-menu .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.right{ width: auto !important; }
 
 @media screen  and (min-width: 768px){
-.form{width:500px;margin:0 auto;color:#22272E}
-.form .form-item{width:100%;position:relative;padding-bottom:24px;margin-top:16px}
-.form .form-label{display:block;line-height:26px;font-size:14px;color:#627386}
-.form .form-label em{display:none;color:#FF2A2A;font-style:normal;margin-right:2px}
-.form .form-item[required] .form-label em{display:inline}
-.form .form-item .errTips{position:absolute;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:24px;white-space:nowrap;color:red;font-size:12px}
-.form .form-item .errTips::before{content:"×";font-size:12px;display:block;width:14px;height:14px;margin-right:2px;line-height:14px;background:#FF2A2A;color:#fff;border-radius:50%;text-align:center}
-.form .form-control::-webkit-input-placeholder{font-size:14px;color:#9AA5B5}
-.form .form-control::-moz-placeholder{font-size:14px;color:#9AA5B5}
-.form .form-control:-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form .form-control::-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form .form-control::placeholder{font-size:14px;color:#9AA5B5}
-.form .form-control{outline:none;display:block;width:100%;padding:8px 16px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px}
-.form .form-select{color:#627386}
-.form .control-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.form .control-group .form-control{width:auto}
-.form .form-button{padding:0 16px;height:36px;line-height:36px;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:14px;color:#E15616;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
-.form .upload-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100px;height:100px;background:#FFFFFF;border:1px solid #E2E7EF;border-radius:2px;color:#9AA5B5;cursor:pointer}
-.form .upload-control span:first-child{font-size:38px}
-.form .upload-control span:last-child{font-size:14px}
-.form .radio-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.form .radio-control input[type="radio"]{display:none}
-.form .radio-control label.radio{position:relative;padding-left:26px;cursor:pointer;font-size:14px;color:#22272E}
-.form .radio-control label.radio::before{content:"";position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:block;width:18px;height:18px;border:1px solid #B8BFCA;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box}
-.form .radio-control label.radio::after{content:"";display:block;opacity:0;position:absolute;left:5px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px;height:8px;background:#E15616;border-radius:50%}
-.form .radio-control input[type="radio"]:checked + label.radio{color:#E15616}
-.form .radio-control input[type="radio"]:checked + label.radio::before{border-color:#E15616}
-.form .radio-control input[type="radio"]:checked + label.radio::after{opacity:1}
-.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}
-.form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
-.form .btn.submit{background:#E15616;color:#FFFFFF}
-.article-edit{}
-.article-edit .navLayout .right{width:auto}
-.article-edit .navLayout .right-box{width:968px}
-.article-edit .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)}
 .article-edit .top-tip{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;height:60px;text-align:center;font-size:12px;line-height:20px;color:#E15616;background:-webkit-gradient(linear,left top,right top,from(#FFFFFF),color-stop(50%,rgba(225,86,22,0.1)),to(#FFFFFF));background:-o-linear-gradient(left,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%);background:linear-gradient(90deg,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%)}
-.article-edit .tag-list{width:100%;padding-bottom:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
+.article-edit .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)}
+/* 标签 */
+.article-edit .tag-list{width:100%;padding-bottom: 16px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
 .article-edit .tag-list .tag{position:relative;padding:0 6px;margin:8px 8px 0 0;height:28px;line-height:28px;background:#FFF3E5;border-radius:2px;font-size:14px;font-weight:400;color:#4A4F58;cursor:pointer;border:1px solid #FFF3E5}
 .article-edit .tag-list .tag.active{color:#E15616;background:#FFE6DC;border-color:#E15616}
 .article-edit .tag-list .tag .close{display:none;position:absolute;top:-8px;right:-8px;width:16px;height:16px;background:#F94B4B;border-radius:50%;font-size:10px;line-height:16px;text-align:center;color:#fff;cursor:pointer}
-.article-edit .radio-group .form-label{width:80px}
-.article-edit .control-group{padding-bottom:24px}
-.article-edit .control-group .tagName{width:388px}
-.article-edit .control-group .addTag{width:90px}
-.article-edit .radio-control{margin-right:32px}
-.article-edit .btns{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}
-.article-edit .btns .btn{margin:0 16px}
+/* 添加标签 */
+.article-edit .label-add{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.article-edit .label-add .el-input{ width: auto;flex: 1 }
+.article-edit .label-add .add-tag{padding:0 16px;margin-left:16px;height:40px;line-height:38px;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:14px;color:#E15616;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+/* 表单区域 */
+.valide-form{width:500px;margin:0 auto;margin-top:40px}
+.valide-form .el-form--label-top .el-form-item__label{  line-height: 0; padding: 16px 0}
+.valide-form .btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
+.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}
 }
 
 @media screen  and (max-width: 768px){
-.form{width:100%;margin:0 auto;color:#22272E; padding: 0 3.2vw; box-sizing: border-box}
-.form .form-item:first-child{margin-top:6.4vw }
-.form .form-item{width:100%;position:relative;padding-bottom:5.6vw;}
-.form .form-label{display:block;line-height:4.8vw;font-size:3.4vw;color:#627386; margin-bottom: 1.4vw}
-.form .form-label em{display:none;color:#FF2A2A;font-style:normal;margin-right:2px}
-.form .form-item[required] .form-label em{display:inline}
-.form .form-item .errTips{position:absolute;bottom:0;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;line-height:4.8vw;white-space:nowrap;color:red;font-size:2.8vw}
-.form .form-item .errTips::before{content:"×";font-size:2.8vw;display:block;width:2.8vw;height:2.8vw;margin-right:2px;line-height:2.8vw;background:#FF2A2A;color:#fff;border-radius:50%;text-align:center}
-.form .form-control::-webkit-input-placeholder{font-size:3.4vw;color:#9AA5B5}
-.form .form-control::-moz-placeholder{font-size:3.4vw;color:#9AA5B5}
-.form .form-control:-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
-.form .form-control::-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
-.form .form-control::placeholder{font-size:3.4vw;color:#9AA5B5}
-.form .form-control{outline:none;display:block;width:100%;padding:3.6vw 2.2vw;-webkit-box-sizing:border-box;box-sizing:border-box;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px}
-.form .form-select{color:#627386}
-.form .control-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.form .control-group .form-control{width:auto}
-.form .form-button{padding:3.6vw 7vw;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:3.4vw;color:#E15616;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
-.form .upload-control{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100px;height:100px;background:#FFFFFF;border:1px solid #E2E7EF;border-radius:2px;color:#9AA5B5;cursor:pointer}
-.form .upload-control span:first-child{font-size:38px}
-.form .upload-control span:last-child{font-size:14px}
-.form .radio-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
-.form .radio-control input[type="radio"]{display:none}
-.form .radio-control label.radio{position:relative;padding-left:26px;cursor:pointer;font-size:14px;color:#22272E}
-.form .radio-control label.radio::before{content:"";position:absolute;left:0;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);display:block;width:18px;height:18px;border:1px solid #B8BFCA;border-radius:50%;-webkit-box-sizing:border-box;box-sizing:border-box}
-.form .radio-control label.radio::after{content:"";display:block;opacity:0;position:absolute;left:5px;top:50%;-webkit-transform:translateY(-50%);-ms-transform:translateY(-50%);transform:translateY(-50%);width:8px;height:8px;background:#E15616;border-radius:50%}
-.form .radio-control input[type="radio"]:checked + label.radio{color:#E15616}
-.form .radio-control input[type="radio"]:checked + label.radio::before{border-color:#E15616}
-.form .radio-control input[type="radio"]:checked + label.radio::after{opacity:1}
-.form .btn{width:100%;height:11.2vw;text-align:center;line-height:11.2vw;font-size:3.8vw;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
-.form .btn.break{background:#FFE6DC;border:1px solid #E15616;border-radius:2px;color:#E15616}
-.form .btn.submit{background:#E15616;color:#FFFFFF}
-.article-edit{}
-.article-edit .navLayout .right{width:auto}
-.article-edit .navLayout .right-box{width:100%;box-sizing: border-box;}
-.article-edit .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)}
+.article-edit .row{padding:2.4vw; background: #fff;}
 .article-edit .top-tip{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;height:9.6vw;text-align:center;font-size:2.8vw;line-height:3.2vw;color:#E15616;background:-webkit-gradient(linear,left top,right top,from(#FFFFFF),color-stop(50%,rgba(225,86,22,0.1)),to(#FFFFFF));background:-o-linear-gradient(left,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%);background:linear-gradient(90deg,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%)}
+/* 标签 */
 .article-edit .tag-list{width:100%;padding-bottom:32px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
 .article-edit .tag-list .tag{position:relative;padding:0 1vw;margin:2.4vw 2.4vw 0 0;height:7.2vw;line-height:7.2vw;background:#FFF3E5;border-radius:2px;font-size:2.8vw;font-weight:400;color:#4A4F58;cursor:pointer;border:1px solid #FFF3E5}
 .article-edit .tag-list .tag.active{color:#E15616;background:#FFE6DC;border-color:#E15616}
 .article-edit .tag-list .tag .close{display:none;position:absolute;top:-8px;right:-8px;width:16px;height:16px;background:#F94B4B;border-radius:50%;font-size:10px;line-height:16px;text-align:center;color:#fff;cursor:pointer}
-.article-edit .radio-group .form-label{width:80px}
-.article-edit .control-group{padding-bottom:5.6vw}
-.article-edit .control-group .tagName{width:69.4vw}
-.article-edit .control-group .addTag{width:21.4vw}
-.article-edit .radio-control{margin-right:5.6vw}
-/*.article-edit .btns{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}*/
-.article-edit .btns .btn{margin-bottom: 2.4vw }
+/* 添加标签 */
+.article-edit .label-add{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.article-edit .label-add .el-input{width:auto; flex: 1}
+.article-edit .label-add .add-tag{padding:0 16px;margin-left:16px;height:40px;line-height:38px;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:14px;color:#E15616;-webkit-box-sizing:border-box;box-sizing:border-box;cursor:pointer}
+/* 表单区域 */
+.valide-form{margin:0 auto;}
+.valide-form .el-form--label-top .el-form-item__label{  line-height: 0; padding: 4.6vw 0}
+.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}
 }

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

@@ -2,21 +2,22 @@
 @media screen and (min-width: 768px){
 .top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
 .top-row .crumbs{width:auto;padding:0;margin:0}
-.top-row .hot-tip{font-size:12px;color:#E15616}
-.form-section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
-.form-section .form-item{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-bottom:18px}
-.form-section .form-item .form-label{margin-right:8px;font-size:14px;color:#627386}
-.form-section .form-item .form-control{outline:none;width:210px;height:36px;padding:8px 12px;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}
-.form-section .form-item .form-control::-webkit-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::-moz-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control:-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-select{color:#627386}
-.form-section .form-item .form-button{height:36px;padding:0 30px;margin-left:16px;font-size:14px;line-height:36px;border-radius:2px;cursor:pointer}
-.form-section .buttons{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
-.form-section .form-item .form-button.search{color:#FFFFFF;background:#E15616}
-.form-section .form-item .form-button.add{background:#FFE6DC;border:1px solid #E15616;color:#E15616}
+.hot-tip{font-size:12px;color:#E15616;margin-bottom: 8px;}
+/*筛选区域*/
+.filter-container{ padding-bottom: 16px;}
+.filter-container .filter-control{ display: inline-block ; margin-top: 16px; margin-right: 2px;}
+.filter-container .filter-control .label { display: inline-block; line-height: 36px; }
+.filter-container .filter-control .control { display: inline-block ;}
+.filter-container .filter-control .el-input .el-input__inner{ height: 36px; line-height: 34px; border-radius: 2px;}
+.filter-container .filter-control .el-input { width: 168px; }
+.filter-container .filter-control .el-select .el-input{ width: 128px; }
+.filter-container .filter-control .el-select .el-input__inner{ width: 128px; }
+.filter-container .filter-control .el-select .el-select__caret{ line-height: 36px }
+.filter-container .filter-control .form-button{height:36px;padding:0 30px;margin-left:8px;font-size:14px;line-height:36px;border-radius:2px;cursor:pointer}
+.filter-container .filter-control .buttons{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
+.filter-container .filter-control .form-button.search{color:#FFFFFF;background:#E15616}
+.filter-container .filter-control .form-button.add{background:#FFE6DC;border:1px solid #E15616;color:#E15616}
+/*筛选区域END*/
 .navLayout{min-height:500px}
 .article-list{}
 .article-list .row{width:100%;padding:18px 20px 0;margin-bottom:16px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-box-shadow:0px 3px 6px rgba(0,0,0,0.07);box-shadow:0px 3px 6px rgba(0,0,0,0.07)}
@@ -28,7 +29,7 @@
 .article-list .table .title,.article-list .table .time,.article-list .table .option{width:100px}
 .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{width:40px;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}
+.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}
 .article-list .table .cover{display:inline-block;width:48px;height:48px;border:1px dashed #E2E7EF}
 .article-list .state{color:#22272E}
 .article-list .state.success{color:#34CC8C}
@@ -41,7 +42,7 @@
 @media screen and (max-width: 768px){
 /*.top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}*/
 .top-row .crumbs{width:auto;padding:0;margin:0}
-.top-row .hot-tip{font-size:2.8vw;color:#E15616}
+.hot-tip{font-size:2.8vw;color:#E15616;margin-bottom: 3.2vw}
 .form-section .form-item{padding-bottom:18px}
 .form-section .form-item .form-label{font-size:3.4vw;color:#627386;margin-bottom: 2.8vw;display: block}
 .form-section .form-item:nth-child(1) .form-label,
@@ -69,7 +70,7 @@
 .article-list .table .title,.article-list .table .time,.article-list .table .option{width:100px}
 .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{width:40px;height:22px;margin:2px 0;line-height:22px;text-align:center;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:2.8vw;color:#E15616;cursor:pointer}
+.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:2.8vw;color:#E15616;cursor:pointer}
 .article-list .table .cover{display:inline-block;width:48px;height:48px;border:1px dashed #E2E7EF}
 .article-list .state{color:#22272E}
 .article-list .state.success{color:#34CC8C}

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

@@ -2,21 +2,23 @@
 @media screen and (min-width: 768px){
 .top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}
 .top-row .crumbs{width:auto;padding:0;margin:0}
-.top-row .hot-tip{font-size:12px;color:#E15616}
-.form-section{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-wrap:wrap;flex-wrap:wrap}
-.form-section .form-item{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding-bottom:18px}
-.form-section .form-item .form-label{margin-right:8px;font-size:14px;color:#627386}
-.form-section .form-item .form-control{outline:none;width:210px;height:36px;padding:8px 12px;background:#FFFFFF;border:1px solid #B8BFCA;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box}
-.form-section .form-item .form-control::-webkit-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::-moz-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control:-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::-ms-input-placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-control::placeholder{font-size:14px;color:#9AA5B5}
-.form-section .form-item .form-select{color:#627386}
-.form-section .form-item .form-button{height:36px;padding:0 30px;margin-left:16px;font-size:14px;line-height:36px;border-radius:2px;cursor:pointer}
-.form-section .buttons{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
-.form-section .form-item .form-button.search{color:#FFFFFF;background:#E15616}
-.form-section .form-item .form-button.add{background:#FFE6DC;border:1px solid #E15616;color:#E15616}
+.hot-tip{font-size:12px;color:#E15616;margin-bottom: 8px}
+/*筛选区域*/
+.filter-container{ padding-bottom: 16px;}
+.filter-container .filter-control{ display: inline-block ; margin-top: 16px; margin-right: 2px;}
+.filter-container .filter-control .label { display: inline-block; line-height: 36px; }
+.filter-container .filter-control .control { display: inline-block ;}
+.filter-container .filter-control .el-input .el-input__inner{ height: 36px; line-height: 34px; border-radius: 2px; }
+.filter-container .filter-control .el-input { width: 210px; }
+.filter-container .filter-control .el-select.mini-width .el-input{ width: 128px; }
+.filter-container .filter-control .el-select.mini-width .el-input__inner{ width: 128px; }
+.filter-container .filter-control .el-select .el-select__caret{ line-height: 36px }
+
+.filter-container .filter-control .form-button{height:36px;padding:0 30px;margin-left:8px;font-size:14px;line-height:36px;border-radius:2px;cursor:pointer}
+.filter-container .filter-control .buttons{-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start}
+.filter-container .filter-control .form-button.search{color:#FFFFFF;background:#E15616}
+.filter-container .filter-control .form-button.add{background:#FFE6DC;border:1px solid #E15616;color:#E15616}
+/*筛选区域END*/
 .navLayout{min-height:500px}
 .article-list{}
 .article-list .row{width:100%;padding:18px 20px 0;margin-bottom:16px;-webkit-box-sizing:border-box;box-sizing:border-box;background:#fff;-webkit-box-shadow:0px 3px 6px rgba(0,0,0,0.07);box-shadow:0px 3px 6px rgba(0,0,0,0.07)}
@@ -28,7 +30,7 @@
 .article-list .table .title,.article-list .table .time,.article-list .table .option{width:100px}
 .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{width:40px;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}
+.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}
 .article-list .table .cover{display:inline-block;width:48px;height:48px;border:1px dashed #E2E7EF}
 .article-list .state{color:#22272E}
 .article-list .state.success{color:#34CC8C}
@@ -41,7 +43,7 @@
 @media screen and (max-width: 768px){
 /*.top-row{width:968px;padding:12px 0 12px 236px;margin:0 auto;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:end;-ms-flex-align:end;align-items:flex-end}*/
 .top-row .crumbs{width:auto;padding:0;margin:0}
-.top-row .hot-tip{font-size:2.8vw;color:#E15616}
+.hot-tip{font-size:2.8vw;color:#E15616}
 .form-section .form-item{padding-bottom:18px}
 .form-section .form-item .form-label{font-size:3.4vw;color:#627386;margin-bottom: 2.8vw;display: block}
 .form-section .form-item:nth-child(1) .form-label,
@@ -69,7 +71,7 @@
 .article-list .table .title,.article-list .table .time,.article-list .table .option{width:100px}
 .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{width:40px;height:22px;margin:2px 0;line-height:22px;text-align:center;background:#FFE6DC;border:1px solid #E15616;border-radius:2px;font-size:2.8vw;color:#E15616;cursor:pointer}
+.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:2.8vw;color:#E15616;cursor:pointer}
 .article-list .table .cover{display:inline-block;width:48px;height:48px;border:1px dashed #E2E7EF}
 .article-list .state{color:#22272E}
 .article-list .state.success{color:#34CC8C}

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

@@ -1,259 +1,47 @@
-
-.cm-label {
-    margin-right: 24px;
-}
-
-.cm-label em {
-    color: #f56c6c;
-    margin-right: 4px;
-}
-
-.el-form-item__label, .cm-label {
-    color: #666;
-}
-
-.cm-big-label .cm-label,
-.cm-big-label-el .el-form-item__label {
-    font-weight: bold;
-    color: #333;
-}
-
-.max-width {
-    width: 100% !important;
-}
-
-.edit-page .row {
-    box-sizing: border-box;
-    background: #FFFFFF;
-    box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07)
-}
-
-.edit-page .top-tip {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    text-align: center;
-    color: #E15616;
-    background: linear-gradient(90deg, #FFFFFF 0%, rgba(225, 86, 22, 0.1) 50%, #FFFFFF 100%)
-}
-
-
-
-.cover-uploader .el-upload {
-    border: 1px dashed #d9d9d9;
-    border-radius: 6px;
-    cursor: pointer;
-    position: relative;
-    overflow: hidden;
-}
-
-.cover-uploader .el-upload:hover {
-    border-color: #409eff;
-}
-
-.cover-uploader-icon {
-    font-size: 28px;
-    color: #8c939d;
-    width: 178px;
-    height: 178px;
-    line-height: 178px;
-    text-align: center;
-}
-
-.cover {
-    position: relative;
-    width: 178px;
-    height: 178px;
-    display: block;
-}
-
-.cover-uploader .el-upload::after {
-    content: '更换图片';
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    top: 0;
-    left: 0;
-    z-index: 999;
-    background: rgba(0, 0, 0, 0.4);
-    color: #eee;
-    opacity: 0;
-    transition: all 0.2s;
-}
-
-.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;
+.w-e-menu .w-e-panel-container .w-e-panel-tab-content .w-e-button-container button.right{ width: auto !important; }
+
+.cm-label{margin-right:24px}
+.cm-label em{color:#f56c6c;margin-right:4px}
+.el-form-item__label,.cm-label{color:#666}
+.cm-big-label .cm-label,.cm-big-label-el .el-form-item__label{font-weight:bold;color:#333}
+.max-width{width:100% !important}
+.edit-page .row{-webkit-box-sizing:border-box;box-sizing:border-box;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)}
+.edit-page .top-tip{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;text-align:center;color:#E15616;background:-webkit-gradient(linear,left top,right top,from(#FFFFFF),color-stop(50%,rgba(225,86,22,0.1)),to(#FFFFFF));background:-o-linear-gradient(left,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%);background:linear-gradient(90deg,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%)}
+.cover-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden}
+.cover-uploader .el-upload:hover{border-color:#409eff}
+.cover-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}
+.cover{position:relative;width:178px;height:178px;display:block}
+.cover-uploader .el-upload::after{content:'更换图片';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:100%;position:absolute;top:0;left:0;z-index:999;background:rgba(0,0,0,0.4);color:#eee;opacity:0;-webkit-transition:all 0.2s;-o-transition:all 0.2s;transition:all 0.2s}
+.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 .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 .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}
+
+@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)}
+.edit-page .top-tip{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;height:60px;text-align:center;font-size:12px;line-height:20px;color:#E15616;background:-webkit-gradient(linear,left top,right top,from(#FFFFFF),color-stop(50%,rgba(225,86,22,0.1)),to(#FFFFFF));background:-o-linear-gradient(left,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%);background:linear-gradient(90deg,#FFFFFF 0%,rgba(225,86,22,0.1) 50%,#FFFFFF 100%)}
+.valide-form{width:500px;margin:0 auto;margin-top:40px}
+.valide-form .el-form--label-top .el-form-item__label{  line-height: 0; padding: 16px 0}
+.valide-form .btns{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}
+.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}
+}
+
+@media screen and (max-width:768px){
+.edit-page .row{padding:2.4vw}
+.valide-form{margin:0 auto;margin-top:40px}
+.valide-form .el-form--label-top .el-form-item__label{  line-height: 0; padding: 4.6vw 0}
+.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}
 }
-
-.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 .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;
-}
-
-/* pc端 */
-@media screen and (min-width: 768px) {
-    .edit-page .row {
-        box-sizing: border-box;
-        padding: 24px 0;
-        background: #FFFFFF;
-        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.07)
-    }
-
-    .edit-page .top-tip {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        height: 60px;
-        text-align: center;
-        font-size: 12px;
-        line-height: 20px;
-        color: #E15616;
-        background: linear-gradient(90deg, #FFFFFF 0%, rgba(225, 86, 22, 0.1) 50%, #FFFFFF 100%)
-    }
-
-    .valide-form {
-        width: 500px;
-        margin: 0 auto;
-        margin-top: 40px;
-    }
-
-    .valide-form .btns {
-        display: flex;
-        justify-content: space-between;
-    }
-
-    .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
-    }
-}
-
-/* 移动端 */
-@media screen and (max-width: 768px) {
-    .edit-page .row{
-        padding:2.4vw;
-    }
-
-    .valide-form {
-        margin: 0 auto;
-        margin-top: 40px;
-    }
-
-    .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
-    }
-}
-

src/main/resources/static/js/activity/attestation.js

@@ -11,14 +11,14 @@ new Vue({
         suppileData:[
             { logo:'/img/activity/attestation/1.jpg', appId: 'wxdef0c3c369ff7013', name: '上海品辉医疗科技有限公司官方授权', title: '上海品辉医疗科技有限公司', type: 'home'},
             { logo:'/img/activity/attestation/2.jpg', appId: '', name: '认证通', title: '科医人医疗激光设备贸易公司', type: 'home'},
-            { logo:'/img/activity/attestation/3.jpg', appId: 'ldm', name: '认证通', title: '广州埃墨莉素生物科技有限公司', type: 'home'},
+            { logo:'/img/activity/attestation/3.jpg', appId: 'ldm', name: '认证通', title: '广州埃墨莉素生物科技有限公司', type: 'other'},
         ],
         // 认证通快捷入口
         firstEntryList: [
              // { logo: '/img/activity/attestation/1.jpg', appId: 'wxdef0c3c369ff7013', name: '品辉机构认证', title: '品辉机构认证' },
             { logo: '/img/activity/attestation/shuishu.jpg', appId: 'wxdef0c3c369ff7013', name: '水素水设备认证', title: '水素水设备认证', type: 'device' },
             // { logo: '/img/activity/attestation/3.jpg', appId: '', name: 'LDM机构认证', title: 'LDM机构认证' },
-            { logo: '/img/activity/attestation/3.jpg', appId: 'ldm', name: 'LDM设备认证', title: 'LDM设备认证' , type: 'club'},
+            { logo: '/img/activity/attestation/3.jpg', appId: 'ldm', name: 'LDM设备认证', title: 'LDM正品认证' , type: 'other'},
         ]
     },
     methods: {
@@ -31,6 +31,8 @@ new Vue({
                 window.open(`https://zp.caimei365.com/#/approve/device?appId=${data.appId}`);
             } else if(data.type === 'club'){
                 window.open(`https://zp.caimei365.com/#/approve/club?appId=${data.appId}`);
+            } else if(data.type === 'other'){
+                window.open('https://wangdian.skinovachina.com');
             } else {
                 window.open(`https://zp.caimei365.com/#/home?appId=${data.appId}`);
             }

src/main/resources/static/js/article/list.js

@@ -14,6 +14,7 @@ var articleList = new Vue({
         },
         listData: [],
         listRecord: 0,
+        productRecord: 0,
         pageInput: '1'
     },
     computed: {
@@ -64,6 +65,15 @@ var articleList = new Vue({
                 this.pageInput = 1;
             }
         },
+        fetchProductList : function(){
+            var _self = this;
+            ProductApi.GetProductSearchList({
+                keyword: this.params.keyword
+            }, function (res) {
+                res = JSON.parse(res.data)
+                _self.productRecord = res.total
+            })
+        },
         getArticleList: function (url, params) {
             var _self = this;
             $.getJSON(url, params, function (r) {
@@ -142,6 +152,7 @@ var articleList = new Vue({
         }
         if (requestUrl) {
             this.getArticleList(requestUrl, requestParams);
+            this.fetchProductList()
         }
         var _self = this;
         if(!isPC){

src/main/resources/static/js/base.js

@@ -390,6 +390,25 @@ $(function(){
                 window.location.href = '/equipment/list.html?keyword=' + encodeURIComponent(keyword);
             }
         } else{
+            if( keyword === '' ){
+                $.confirm({
+                    useBootstrap: false,
+                    boxWidth: (isPC?'300px':'70%'),
+                    title:'提示',
+                    content:'请至少输入文章关键字！',
+                    closeIcon: true,
+                    animation: 'opacity',
+                    closeAnimation: 'opacity',
+                    animateFromElement: false,
+                    buttons: {
+                        close: {
+                            text: '确定',
+                            btnClass: 'btn-confirm'
+                        }
+                    }
+                });
+                return;
+            }
             // 文章
             window.location.href = '/info/search-1.html?keyword=' + encodeURIComponent(keyword);
         }

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

@@ -17,7 +17,7 @@ $(function () {
     var timer = null; // 定时器
     var middleScreenWidth = 1450;
     // 生成导航
-    makeNavigate('.section h2', '.navigate');
+    makeNavigate('.section .title h2', '.navigate');
     if (windowWidth > 768) {
         offset = getScrollOffset('.navbar') + 10;
     } else {

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

@@ -1,41 +1,89 @@
 "use strict";
+const Editor = window.createEditorComponent();
 
 var articleEdit = new Vue({
     el: '#articleEdit',
-    mixins: [formMixin, uploadMixin],
+    components: {
+        Editor
+    },
     data: {
-        NODE_ENV_BASE_URL: '',
-        editor: null,
-        shopId: GLOBAL_SHOP_ID,
         // 供应商id
+        shopId: GLOBAL_SHOP_ID,
+        // 图片上传
+        action: $('#coreServer').val() + '/tools/image/upload/multi',
+        /* 表单提交数据 */
         formData: {
-            articleId: 0,
             // 文章id
-            title: '',
+            articleId: 0,
             // 标题
-            articleContent: '',
+            title: '',
             // 内容
-            guidanceImage: '',
+            articleContent: '',
             // 引导图
-            keyword: '',
+            guidanceImage: '',
             // seo关键词
-            label: '',
+            keyword: '',
             // 标签
-            publisher: '',
+            label: '',
             // 发布人
-            recommendContent: '',
+            publisher: '',
             // 推荐语
-            source: '',
+            recommendContent: '',
             // 来源
-            status: 1,
+            source: '',
             // 状态
-            typeId: '' // 文章分类
-
+            status: 1,
+            // 文章分类
+            typeId: ''
         },
+        // 图片列表
+        articleImageList: [],
+        // 文章标签列表
         articleLabels: [],
+        // 已选择标签列表
         chooseLabels: [],
+        // 文章分类列表
         articleTypeList: [],
-        addLabelName: ''
+        // 待添加标签名
+        addLabelName: '',
+        /* 表单验证规则 */
+        rules: {
+            // 标题
+            title: [
+                {required: true, message: '文章标题不能为空', trigger: 'blur'},
+                {maxLength: 9999, message: '标题字数超过最大限制(9999)', trigger: 'blur'},
+            ],
+            // 内容
+            articleContent: [
+                {required: true, message: '文章内容不能为空', trigger: 'change'},
+                {maxLength: 999999, message: '标题字数超过最大限制(999999)', trigger: 'change'},
+            ],
+            // 引导图
+            guidanceImage: [
+                {required: true, message: '请上传文章引导图', trigger: 'change'}
+            ],
+            // seo关键词
+            keyword: [
+                {required: true, message: 'SEO关键词不能为空', trigger: 'blur'}
+            ],
+            // 标签
+            label: [
+                {required: true, message: '文章标签不能为空', trigger: ['change', 'blur']}
+            ],
+            // 发布人
+            publisher: [
+                {required: true, message: '发布人信息不能为空', trigger: 'blur'}
+            ],
+            // 推荐语
+            recommendContent: [
+                {required: true, message: '推荐语/描述不能为空', trigger: 'blur'}
+            ],
+            // 文章分类
+            typeId: [
+                {required: true, message: '请选择文章所属分类', trigger: 'change'}
+            ]
+        },
+
     },
     watch: {
         chooseLabels: function chooseLabels(newVal) {
@@ -53,15 +101,10 @@ var articleEdit = new Vue({
         this.init();
     },
     mounted: function mounted() {
-        this.NODE_ENV_BASE_URL = $('#coreServer').val(); // console.log(this.NODE_ENV_BASE_URL);
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
         $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
-        this.initEditor();
     },
     beforeDestroy: function beforeDestroy() {
-        // 销毁编辑器
-        this.editor.destroy();
-        this.editor = null;
         localStorage.removeItem('articleId');
     },
     methods: {
@@ -79,9 +122,8 @@ var articleEdit = new Vue({
                 articleId: this.formData.articleId
             }, function (res) {
                 if (res.code === 0) {
-                    // console.log(res);
+                    console.log(res);
                     that.articleLabels = res.data.articleLabels.split(','); // 初始化表单数据
-
                     if (res.data.shopArticle) {
                         that.setFormData(res.data.shopArticle);
                     }
@@ -93,14 +135,12 @@ var articleEdit = new Vue({
         // 设置表单初始数据
         setFormData: function setFormData(shopArticle) {
             for (var key in this.formData) {
-                if (key === 'status' || key === 'typeId') {
-                    this.formData[key] = shopArticle[key].toString();
-                } else {
-                    this.formData[key] = shopArticle[key];
-                }
+                this.formData[key] = shopArticle[key];
+            }
+            // 初始化引导图
+            if (this.formData.guidanceImage) {
+                this.articleImageList = [{url: this.formData.guidanceImage}]
             }
-
-            this.editor.txt.html(this.formData.articleContent);
         },
         // 获取文章分类
         fetchArticleCatagory: function fetchArticleCatagory() {
@@ -136,31 +176,22 @@ var articleEdit = new Vue({
         checkLabel: function checkLabel(index) {
             return this.chooseLabels.indexOf(this.articleLabels[index]) > -1;
         },
-        // 引导图上传（文章封面图）
-        fileInputChange: function fileInputChange(e) {
-            var _this = this;
-
-            this.uploadImage(e.target.files[0]).then(function (res) {
-                _this.formData.guidanceImage = res;
-            });
+        // 图片上传成功
+        handleUploadSuccess: function handleUploadSuccess(response, file, fileList) {
+            this.formData.guidanceImage = response.data;
+            this.articleImageList = fileList;
         },
-        // 初始化富文本
-        initEditor: function initEditor() {
-            var E = window.wangEditor;
-            this.editor = new E("#editor");
-            this.initEditorOptions(this.editor, this.NODE_ENV_BASE_URL);
-            this.editor.create();
+        // 图片移除
+        handleImageRemove: function handleImageRemove(response, file, fileList) {
+            this.formData.guidanceImage = "";
+            this.articleImageList = [];
         },
         // 保存 提交表单
         handleSave: function handleSave() {
             var _this = this;
-            this.formData.articleContent = this.editor.txt.html();
-            this.handleFormData(); // console.log(this.formData);
-            this.validAll(this.formData).then(function (valid) {
-                console.log(valid);
+            this.$refs.ruleForm.validate(valide=>{
+                if(!valide) return;
                 _this.save();
-            }).catch(function (err) {
-                console.log(err);
             });
         },
         // 保存接口
@@ -178,23 +209,6 @@ var articleEdit = new Vue({
                 }
             });
         },
-        // 处理表单数据
-        handleFormData: function handleFormData() {
-            var that = this;
-            $('.form').submit(function (eventData) {
-                var formData = that.serializeArrayToObj($(this).serializeArray());
-
-                for (var key in formData) {
-                    if (key === 'typeId' || key === 'status') {
-                        that.formData[key] = Number(formData[key]);
-                    } else {
-                        that.formData[key] = formData[key];
-                    }
-                }
-
-                return false;
-            });
-        },
         // 表单数据转为对象
         serializeArrayToObj: function serializeArrayToObj(serializeArray) {
             var obj = Object.create(null);

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

@@ -14,6 +14,8 @@ var articleList = new Vue({
             title: '',
             publisher: '',
             auditStatus: '',
+            status: '',
+            onlineStatus: '',
             typeId: '',
             pageNum: 1,
             pageSize: 10
@@ -111,7 +113,8 @@ var articleList = new Vue({
                 if (res.code === 0) {
                     // 不刷新数据更新
                     article.status = newStatus;
-                    CAIMEI.dialog('修改文章状态成功!');
+                    const tip = newStatus ? '文章已发布' : '文章已存入草稿箱';
+                    CAIMEI.dialog(tip);
                 } else {
                     CAIMEI.dialog('修改文章状态失败!');
                 }
@@ -120,7 +123,8 @@ var articleList = new Vue({
         //查看
         toDetail: function toDetail(article) {
             if (article.auditStatus !== 2) return CAIMEI.dialog('请等待审核通过后查看!');
-            if (!article.status) return CAIMEI.dialog('文章未启用!');
+            if (article.onlineStatus !== 2) return CAIMEI.dialog('请等待文章上线后查看!');
+            if (!article.status) return CAIMEI.dialog('请发布后查看!');
             window.open('/info/detail-' + article.articleId + '-1.html');
         },
         // 跳转添加文章页面

src/main/resources/static/js/supplier-center/article/editor-component.js

@@ -0,0 +1,99 @@
+//富文本框封装
+function createEditorComponent() {
+	window.editorCount = 0;
+	const Editor = {
+		render: function render(h) {
+			return h('div', { class: { cm: true, editor: true }, attrs: { id: this.editorId } })
+		},
+		model: {
+			prop: 'value',
+			event: 'input',
+		},
+		props: {
+			value: {
+				type: String,
+				default: '',
+			},
+			placeholder: {
+				type: String,
+				default: '',
+			},
+			defaultTxt: {
+				type: String,
+				default: '',
+			},
+		},
+		data() {
+			return {
+				editorId: '',
+				editor: null,
+			}
+		},
+		watch: {
+			value(nVal, oldVal) {
+				if (nVal === oldVal) return
+				this.editor && this.editor.txt.html(nVal)
+			},
+		},
+
+		created: function created() {
+			window.editorCount++
+			this.editorId = 'editorId-' + window.editorCount
+			this.$nextTick(function () {
+				this.createEditor()
+			})
+		},
+		beforeDestroy: function beforeDestroy() {
+			this.editor.destroy()
+			this.editor = null
+		},
+		methods: {
+			// 创建编辑器
+			createEditor: function createEditor() {
+				const E = window.wangEditor
+				this.editor = new E('#' + this.editorId)
+				this.initEditorOptions()
+				this.editor.create()
+				this.editor.txt.html(this.value)
+			},
+			// 富文本框配置
+			initEditorOptions: function initEditorOptions() {
+				this.editor.config.zIndex = 333
+				this.editor.config.height = 200
+				this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024
+				this.editor.config.uploadImgMaxLength = 9 // 一次最多上传 5 个图片
+				this.editor.config.placeholder = this.placeholder
+				var that = this
+				// 监听输入事件
+				this.editor.config.onchange = function (newHtml) {
+					that.$emit('input', newHtml)
+				}
+
+				this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
+					that.$emit('choose-image', resultFiles)
+					resultFiles.forEach(function (file) {
+						// resultFiles 是 input 中选中的文件列表
+						// insertImgFn 是获取图片 url 后，插入到编辑器的方法
+						that.uploadImage(file).then(function (res) {
+							insertImgFn(res)
+						})
+					})
+				}
+			},
+			// 上传图片
+			uploadImage: function uploadImage(file) {
+				var formData = new FormData()
+				formData.append('file', file)
+				return new Promise(function (resolve, reject) {
+					PublicApi.uploadimg(formData, function (res) {
+						if (res.code === 0) {
+							resolve(res.data)
+						}
+						reject()
+					})
+				})
+			},
+		},
+	};
+	return Editor
+}

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

@@ -1,158 +0,0 @@
-"use strict";
-
-var formMixin = {
-    data: {
-        validData: {},
-        rules: {
-            title: [{
-                required: true,
-                type: 'string',
-                message: '请输入文章标题',
-                trigger: 'blur'
-            }],
-            label: [{
-                required: true,
-                message: '请输入文章标签',
-                trigger: ['blur', 'change']
-            }],
-            keyword: [{
-                required: true,
-                message: '请输入文章seo关键词',
-                trigger: 'blur'
-            }],
-            publisher: [{
-                required: true,
-                message: '请输入发布人',
-                trigger: 'blur'
-            }],
-            recommendContent: [{
-                required: true,
-                message: '请输入文章推荐语',
-                trigger: 'blur'
-            }],
-            articleContent: [{
-                required: true,
-                message: '请输入文章内容',
-                trigger: 'change'
-            }],
-            typeId: [{
-                required: true,
-                message: '请选择文章分类',
-                trigger: 'change'
-            }],
-            guidanceImage: [{
-                required: true,
-                message: '请上传文章引导图',
-                trigger: 'change'
-            }],
-            status: [{
-                required: true,
-                message: '请选择文章状态',
-                trigger: 'change'
-            }]
-        }
-    },
-    mounted: function mounted() {
-        //初始化表单验证
-        this.initValidForm(this.formData);
-    },
-    created: function created() {
-        //初始化验证关系对象
-        this.initValidData();
-    },
-    methods: {
-        //初始化验证关系对象
-        initValidData: function initValidData() {
-            for (var key in this.rules) {
-                this.$set(this.validData, key, {
-                    valid: true,
-                    message: ''
-                });
-            }
-        },
-        //初始化表单验证
-        initValidForm: function initValidForm(formData) {
-            var _this = this;
-
-            var that = this;
-
-            var _loop = function _loop(key) {
-                var rules = _this.rules[key];
-                var input = document.querySelector(".form-item[prop=\"".concat(key, "\"] input"));
-                var textarea = document.querySelector(".form-item[prop=\"".concat(key, "\"] textarea"));
-                var trigger = rules[0].trigger.toString();
-
-                if (trigger.indexOf('blur') > -1) {
-                    if (input) {
-                        input.addEventListener('blur', function () {
-                            that.validInputHandle(formData, key, rules);
-                        });
-                    }
-
-                    if (textarea) {
-                        textarea.addEventListener('blur', function () {
-                            that.validInputHandle(formData, key, rules);
-                        });
-                    }
-                }
-
-                if (trigger.indexOf('change') > -1) {
-                    var str = 'formData.' + key;
-                    that.$watch(str, function (newVal, oldVal) {
-                        that.validInputHandle(formData, key, rules);
-                    });
-                }
-            };
-
-            for (var key in this.rules) {
-                _loop(key);
-            }
-        },
-        //数据校验
-        validInputHandle: function validInputHandle(formData, key, rules) {
-            var validData = {
-                valid: true,
-                message: ''
-            };
-            rules.forEach(function (rule, index) {
-                if (!validData.valid) return; // 字符长度
-
-                var len = formData[key].toString().trim().length; // 是否必填
-
-                if (rule.required && !formData[key]) {
-                    validData.valid = false;
-                    validData.message = rule.message || '';
-                } // 最大值最小值
-
-
-                if (rule.maxLength && len < rule.minLength || rule.maxLength && len > rule.maxLength) {
-                    validData.valid = false;
-                    validData.message = rule.message || '';
-                } // 自定义校验规则
-
-
-                if (rule.pattern && !rule.pattern.test(formData[key])) {
-                    validData.valid = false;
-                    validData.message = rule.message || '';
-                }
-            });
-            this.validData[key] = validData;
-        },
-        // 验证全部数据
-        validAll: function validAll(formData) {
-            for (var key in this.rules) {
-                var rules = this.rules[key];
-                this.validInputHandle(formData, key, rules);
-            }
-
-            for (var _key in this.validData) {
-                // console.log(key, this.validData[key].valid);
-                if (!this.validData[_key].valid) {
-                    return Promise.reject(false);
-                }
-            }
-
-            return Promise.resolve(true);
-        }
-    }
-};

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

@@ -1,37 +0,0 @@
-"use strict";
-
-var uploadMixin = {
-    methods: {
-        // 富文本框配置
-        initEditorOptions: function initEditorOptions(editor, baseUrl) {
-            var that = this;
-            this.editor.config.zIndex = 333;
-            this.editor.config.height = 400;
-            this.editor.config.uploadImgMaxSize = 2 * 1024 * 1024;
-            this.editor.config.uploadImgMaxLength = 5; // 一次最多上传 5 个图片
-
-            this.editor.config.customUploadImg = function (resultFiles, insertImgFn) {
-                resultFiles.forEach(function (file) {
-                    // resultFiles 是 input 中选中的文件列表
-                    // insertImgFn 是获取图片 url 后，插入到编辑器的方法
-                    that.uploadImage(file).then(function (res) {
-                        insertImgFn(res);
-                    });
-                });
-            };
-        },
-        // 上传图片
-        uploadImage: function uploadImage(file) {
-            var formData = new FormData();
-            formData.append('file', file);
-            return new Promise(function (resolve, reject) {
-                PublicApi.uploadimg(formData, function (res) {
-                    if (res.code === 0) {
-                        resolve(res.data);
-                    }
-                    reject();
-                });
-            });
-        }
-    }
-};

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

@@ -27,13 +27,10 @@ const app = new Vue({
         }
 
         return {
-
             productId: 0,
             commodityType: 2, // 商品类型 1： 产品  2： 仪器
             shopId: GLOBAL_SHOP_ID,
-
             action: $('#coreServer').val() + '/tools/image/upload/multi',
-
             formData: {
                 // 仪器名称
                 name: '',
@@ -61,26 +58,30 @@ const app = new Vue({
                 producePlace: '',
                 // 上市时间
                 marketTime: '',
-                // 公司/厂商
+                // 供应商
                 company: '',
                 // NMPA认证时间
                 nmpaTime: '',
                 // 仪器认证
                 authImageList: '',
-                // 适应人群
+                // 适应证
                 adaptiveMan: '',
                 // 不适应人群
                 unAdaptiveMan: '',
-                // 术前术后
+                // 注意事项
                 aroundOperation: '',
                 // 效果展示图片列表
-                displayImageList: '',
+                // displayImageList: '',
                 // 常见问题
                 questionList: '',
                 // 仪器类别
                 typeId: '',
                 // 仪器状态
                 status: 1,
+                // seo关键词
+                seoKeyword: '',
+                // 仪器链接
+                productLink: '',
             },
             rules: {
                 // 仪器名称
@@ -91,49 +92,49 @@ const app = new Vue({
                 discription: [{required: true, message: '仪器概述不能为空', trigger: ['change', 'blur']}],
                 // 仪器图片
                 image: [{required: true, message: '请上传仪器图片', trigger: 'change'}],
-                // 认证链接
-                authLink: [{required: true, message: '请输入认证链接', trigger: ['change', 'blur']}],
-                // 认证二维码
-                authQrCode: [{required: true, message: '请上传证二维码', trigger: 'change'}],
+                // 产品链接
+                productLink: [{required: true, message: '产品链接不能为空', trigger: ['change', 'blur']}],
                 // 产仪器参数
                 paramList: [{required: true, validator: validateParamList, trigger: 'change'}],
-                // 仪器优点
-                advantage: [{required: true, message: '仪器优点不能为空', trigger: 'change'}],
-                // 仪器缺点
-                disadvantage: [{required: true, message: '仪器缺点不能为空', trigger: 'change'}],
-                // 仪器原理
-                principle: [{required: true, message: '仪器原理不能为空', trigger: 'change'}],
-                // 品牌
-                brand: [{required: true, message: '请输入仪器品牌', trigger: ['change', 'blur']}],
-                // 产地
-                producePlace: [{required: true, message: '仪器产地不能为空', trigger: ['change', 'blur']}],
-                // 上市时间
-                marketTime: [{required: true, message: '请填写上市时间', trigger: 'change'}],
-                // 公司/厂商
-                company: [{required: true, message: '公司/厂商不能为空', trigger: ['change', 'blur']}],
-                // NMPA认证时间
-                nmpaTime: [{required: true, message: '请填写NMPA认证时间', trigger: 'change'}],
-                // 仪器认证
-                authImageList: [{required: true, message: '请上传仪器认证图片', trigger: 'change'}],
-                // 适应人群
-                adaptiveMan: [{required: true, message: '适应人群不能为空', trigger: 'change'}],
-                // 不适应人群
-                unAdaptiveMan: [{required: true, message: '不适应人群不能为空', trigger: 'change'}],
-                // 术前术后
-                aroundOperation: [{required: true, message: '术前术后不能为空', trigger: 'change'}],
-                // 效果展示图片列表
-                displayImageList: [{required: true, message: '请上传效果展示图片', trigger: 'change'}],
-                // 常见问题
-                questionList: [{required: true, validator: validateQuestionList, trigger: 'change'}],
-                // 仪器类别
-                typeId: [{required: true, message: '请选择仪器类别', trigger: 'change'}],
-                // 仪器状态
-                status: [{required: true, message: '请选择仪器状态', trigger: 'change'}],
+                // // 认证链接
+                // authLink: [{required: true, message: '请输入认证链接', trigger: ['change', 'blur']}],
+                // // 认证二维码
+                // authQrCode: [{required: true, message: '请上传证二维码', trigger: 'change'}],
+                // // 仪器优点
+                // advantage: [{required: true, message: '仪器优点不能为空', trigger: 'change'}],
+                // // 仪器缺点
+                // disadvantage: [{required: true, message: '仪器缺点不能为空', trigger: 'change'}],
+                // // 仪器原理
+                // principle: [{required: true, message: '仪器原理不能为空', trigger: 'change'}],
+                // // 品牌
+                // brand: [{required: true, message: '请输入仪器品牌', trigger: ['change', 'blur']}],
+                // // 产地
+                // producePlace: [{required: true, message: '仪器产地不能为空', trigger: ['change', 'blur']}],
+                // // 上市时间
+                // marketTime: [{required: true, message: '请填写上市时间', trigger: 'change'}],
+                // // 供应商
+                // company: [{required: true, message: '公司/厂商不能为空', trigger: ['change', 'blur']}],
+                // // NMPA认证时间
+                // nmpaTime: [{required: true, message: '请填写NMPA认证时间', trigger: 'change'}],
+                // // 仪器认证
+                // authImageList: [{required: true, message: '请上传仪器认证图片', trigger: 'change'}],
+                // // 适应证
+                // adaptiveMan: [{required: true, message: '适应人群不能为空', trigger: 'change'}],
+                // // 不适应人群
+                // unAdaptiveMan: [{required: true, message: '不适应人群不能为空', trigger: 'change'}],
+                // // 术前术后
+                // aroundOperation: [{required: true, message: '术前术后不能为空', trigger: 'change'}],
+                // // 效果展示图片列表
+                // displayImageList: [{required: true, message: '请上传效果展示图片', trigger: 'change'}],
+                // // 常见问题
+                // questionList: [{required: true, validator: validateQuestionList, trigger: 'change'}],
+                // // 仪器类别
+                // typeId: [{required: true, message: '请选择仪器类别', trigger: 'change'}],
+                // // 仪器状态
+                // status: [{required: true, message: '请选择仪器状态', trigger: 'change'}],
             },
-
             // 仪器类别列表
             typeList: [],
-
             // 仪器参数
             // paramList: [],
             paramEmptyList: [], // 占位
@@ -147,6 +148,11 @@ const app = new Vue({
             displayImageList: [],  // 初始化列表
             dialogVisible: false,
             dialogImageUrl: '',
+            // 日期选择格式
+            marketTimeType: 'year',
+            nmpaTimeType: 'year',
+            // 空缺数量
+            emptyNum: ''
         }
     },
     computed: {
@@ -161,7 +167,7 @@ const app = new Vue({
             const filter = this.questionEmptyList.filter(item => item.question !== '' && item.answer !== '')
             if (filter.length > 0) return filter.map(item => ({question: item.question, answer: item.answer}))
             return []
-        },
+        }
     },
 
     mounted: function mounted() {
@@ -171,7 +177,7 @@ const app = new Vue({
 
     created() {
         this.getTypeList();
-        this.watchArrayStatus(['paramList', 'questionList', 'authImageList', 'displayImageList']);
+        this.watchArrayStatus(['paramList', 'questionList', 'authImageList']);
         this.getProductFormData();
     },
 
@@ -191,8 +197,59 @@ const app = new Vue({
                     this.socrllToErrorInput()
                     return;
                 }
-                this.saveFormData()
+                this.emptyNum = this.validateEmptyParams(this.formData)
+                if( this.emptyNum> 0 && this.formData.status === 1){
+                    this.$confirm('您还剩余' + this.emptyNum + '项未完善，将会导致用户对您产品/仪器的认识度不够，确认是否提交？', '提示', {
+                        confirmButtonText: '是',
+                        cancelButtonText: '否'
+                    }).then(() => {
+                        this.saveFormData()
+                    })
+                } else{
+                    this.saveFormData()
+                }
+            })
+        },
+
+        // 校验空参数个数
+        validateEmptyParams(params){
+            const keys = Object.keys(params)
+            console.log(params)
+            let count = 0
+            keys.forEach(key => {
+                if(typeof params[key] === "string"){
+                    if(params[key] === '' || params[key].trim().length <= 0){
+                        count ++
+                    }
+                }else if(typeof params[key] === 'number'){
+                    console.log(key)
+                }else if(typeof params[key] === 'object'){
+                    if(params[key] instanceof  Array){
+                        if(params[key].length <= 0){
+                            count ++
+                        }
+                    }else {
+                        if(params[key] === null){
+                            count ++
+                        }
+                    }
+                }else if(typeof params[key] === 'undefined'){
+                    count ++
+                }
             })
+            return count;
+        },
+
+        // 裁切时间格式
+        sliceDateStr(time, type) {
+            if(!time) return ''
+            time = dateFormat(time, 'yyyy-MM-dd')
+            if (type === 'year') {
+                time = time.slice(0, 4)
+            } else if (type === 'month') {
+                time = time.slice(0, 7)
+            }
+            return time
         },
 
         // 保存表单数据
@@ -204,13 +261,26 @@ const app = new Vue({
                 commodityType: this.commodityType,
                 paramList: JSON.stringify(this.paramList),
                 questionList: JSON.stringify(this.questionList),
-                marketTime: dateFormat(this.formData.marketTime, 'yyyy-MM-dd'),
-                nmpaTime: dateFormat(this.formData.nmpaTime, 'yyyy-MM-dd'),
+                // marketTime: dateFormat(this.formData.marketTime, 'yyyy-MM-dd'),
+                // nmpaTime: dateFormat(this.formData.nmpaTime, 'yyyy-MM-dd'),
                 authImageList: this.authImageList.map(image => (image.response ? image.response.data : image.url)),
-                displayImageList: this.displayImageList.map(image => (image.response ? image.response.data : image.url))
+                // displayImageList: this.displayImageList.map(image => (image.response ? image.response.data : image.url))
             };
 
+            /* 处理时间 */
+            if(this.formData.marketTime){
+                params.marketTime = this.sliceDateStr(this.formData.marketTime, this.marketTimeType)
+            }
+
+            /* 处理时间 */
+            if(this.formData.nmpaTime){
+                params.nmpaTime = this.sliceDateStr(this.formData.nmpaTime, this.nmpaTimeType)
+            }
+
             if (this.productId) params.productId = this.productId;
+
+            params.emptyNum = this.emptyNum;
+
             console.log(params);
             SupplierApi.ShopBaikeProductSave(params, function (res) {
                 if (res.code === 0) {
@@ -224,6 +294,18 @@ const app = new Vue({
             })
         },
 
+        // 获取时间类型（年月日）
+        getTimeType(time){
+            time = time.split('-')
+            if(time.length === 1){
+                return 'year'
+            }else if(time.length === 2){
+                return 'month'
+            }else {
+                return 'date'
+            }
+        },
+
 		initFormData: function(formData){
 			console.log(formData);
 			// 初始化this.formData
@@ -235,6 +317,11 @@ const app = new Vue({
                 		this.formData[key] = len > 0 ? len : ''
                 	} else if(['marketTime', 'nmpaTime'].includes(key)){
                 		this.formData[key] = new Date(formData[key])
+                        if(key === 'marketTime'){
+                            this.marketTimeType = this.getTimeType(formData[key])
+                        }else{
+                            this.nmpaTimeType = this.getTimeType(formData[key])
+                        }
                 	}
                 	else {
                 		this.formData[key] = formData[key];
@@ -245,7 +332,7 @@ const app = new Vue({
 			this.resetEmptyListData(formData.paramList, formData.questionList);
             // 处理图片
             this.authImageList = formData.authImageList.map(image => ({ url: image, name: 'authImage'}))
-            this.displayImageList = formData.displayImageList.map(image => ({ url: image, name: 'authImage'}))
+            // this.displayImageList = formData.displayImageList.map(image => ({ url: image, name: 'authImage'}))
 		},
 
 

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

@@ -16,6 +16,8 @@ var productList = new Vue({
             productId: '',
             name: '',
             auditStatus: '',
+            onlineStatus: '',
+            status: '',
             typeId: '',
             pageNum: 1,
             pageSize: 10
@@ -125,7 +127,18 @@ var productList = new Vue({
             if (product.status === 1) {
                 newStatus = 0;
             }
-
+            if(product.emptyNum > 0 && newStatus === 1){
+                this.$confirm('您还剩余' + product.emptyNum + '项未完善，将会导致用户对您产品/仪器的认识度不够，确认是否提交？', '提示', {
+                    confirmButtonText: '是',
+                    cancelButtonText: '否'
+                }).then(() => {
+                    this.ShopBaikeProductStatusUpdate(newStatus,product)
+                })
+            } else{
+                this.ShopBaikeProductStatusUpdate(newStatus,product)
+            }
+        },
+        ShopBaikeProductStatusUpdate(newStatus, product){
             SupplierApi.ShopBaikeProductStatusUpdate({
                 productId: product.productId,
                 shopId: this.shopId,
@@ -134,7 +147,8 @@ var productList = new Vue({
                 if (res.code === 0) {
                     // 不刷新数据更新
                     product.status = newStatus;
-                    CAIMEI.dialog('修改状态成功!');
+                    const tip = newStatus ? '文章已发布' : '文章已存入草稿箱';
+                    CAIMEI.dialog(tip);
                 } else {
                     CAIMEI.dialog('修改状态失败!');
                 }
@@ -143,7 +157,8 @@ var productList = new Vue({
         //查看
         toDetail: function toDetail(product) {
             if (product.auditStatus !== 2) return CAIMEI.dialog('请等待审核通过后查看!');
-            if (!product.status) return CAIMEI.dialog('请启用后查看!');
+            if (product.onlineStatus !== 2) return CAIMEI.dialog('请等待文章上线后查看!');
+            if (!product.status) return CAIMEI.dialog('请发布后查看!');
             window.open('/encyclopedia/instrument-' + product.productId + '.html');
         },
         // 跳转添加文章页面

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

@@ -57,26 +57,28 @@ const app = new Vue({
                 producePlace: '',
                 // 上市时间
                 marketTime: '',
-                // 公司/厂商
+                // 供应商
                 company: '',
                 // NMPA认证时间
                 nmpaTime: '',
                 // 产品认证
                 authImageList: '',
-                // 适应人群
+                // 适应证
                 adaptiveMan: '',
                 // 不适应人群
                 unAdaptiveMan: '',
                 // 术前术后
                 aroundOperation: '',
-                // 效果展示图片列表
-                displayImageList: '',
                 // 常见问题
                 questionList: '',
                 // 产品类别
                 typeId: '',
                 // 产品状态
                 status: 1,
+                // seo关键词
+                seoKeyword: '',
+                // 产品链接
+                productLink: '',
             },
             rules: {
                 // 产品名称
@@ -89,38 +91,40 @@ const app = new Vue({
                 image: [{required: true, message: '请上传产品图片', trigger: 'change'}],
                 // 产品参数
                 paramList: [{required: true, validator: validateParamList, trigger: 'change'}],
-                // 产品优点
-                advantage: [{required: true, message: '产品优点不能为空', trigger: 'change'}],
-                // 产品缺点
-                disadvantage: [{required: true, message: '产品缺点不能为空', trigger: 'change'}],
-                // 产品原理
-                principle: [{required: true, message: '产品原理不能为空', trigger: 'change'}],
-                // 品牌
-                brand: [{required: true, message: '请输入产品品牌', trigger: ['change', 'blur']}],
-                // 产地
-                producePlace: [{required: true, message: '产品产地不能为空', trigger: ['change', 'blur']}],
-                // 上市时间
-                marketTime: [{required: true, message: '请填写上市时间', trigger: 'change'}],
-                // 公司/厂商
-                company: [{required: true, message: '公司/厂商不能为空', trigger: ['change', 'blur']}],
-                // NMPA认证时间
-                nmpaTime: [{required: true, message: '请填写NMPA认证时间', trigger: 'change'}],
-                // 产品认证
-                authImageList: [{required: true, message: '请上传产品认证图片', trigger: 'change'}],
-                // 适应人群
-                adaptiveMan: [{required: true, message: '适应人群不能为空', trigger: 'change'}],
-                // 不适应人群
-                unAdaptiveMan: [{required: true, message: '不适应人群不能为空', trigger: 'change'}],
-                // 术前术后
-                aroundOperation: [{required: true, message: '术前术后不能为空', trigger: 'change'}],
-                // 效果展示图片列表
-                displayImageList: [{required: true, message: '请上传效果展示图片', trigger: 'change'}],
-                // 常见问题
-                questionList: [{required: true, validator: validateQuestionList, trigger: 'change'}],
+                // 产品链接
+                productLink: [{required: true, message: '产品链接不能为空', trigger: ['change', 'blur']}],
+                // // 产品优点
+                // advantage: [{required: true, message: '产品优点不能为空', trigger: 'change'}],
+                // // 产品缺点
+                // disadvantage: [{required: true, message: '产品缺点不能为空', trigger: 'change'}],
+                // // 产品原理
+                // principle: [{required: true, message: '产品原理不能为空', trigger: 'change'}],
+                // // 品牌
+                // brand: [{required: true, message: '请输入产品品牌', trigger: ['change', 'blur']}],
+                // // 产地
+                // producePlace: [{required: true, message: '产品产地不能为空', trigger: ['change', 'blur']}],
+                // // 上市时间
+                // marketTime: [{required: true, message: '请填写上市时间', trigger: 'change'}],
+                // // 供应商
+                // company: [{required: true, message: '公司/厂商不能为空', trigger: ['change', 'blur']}],
+                // // NMPA认证时间
+                // nmpaTime: [{required: true, message: '请填写NMPA认证时间', trigger: 'change'}],
+                // // 产品认证
+                // authImageList: [{required: true, message: '请上传产品认证图片', trigger: 'change'}],
+                // // 适应证
+                // adaptiveMan: [{required: true, message: '适应人群不能为空', trigger: 'change'}],
+                // // 不适应人群
+                // unAdaptiveMan: [{required: true, message: '不适应人群不能为空', trigger: 'change'}],
+                // // 术前术后
+                // aroundOperation: [{required: true, message: '术前术后不能为空', trigger: 'change'}],
+                // // 效果展示图片列表
+                // displayImageList: [{required: true, message: '请上传效果展示图片', trigger: 'change'}],
+                // // 常见问题
+                // questionList: [{required: true, validator: validateQuestionList, trigger: 'change'}],
                 // 产品类别
                 typeId: [{required: true, message: '请选择产品类别', trigger: 'change'}],
-                // 产品状态
-                status: [{required: true, message: '请选择产品状态', trigger: 'change'}],
+                // // 产品状态
+                // status: [{required: true, message: '请选择产品状态', trigger: 'change'}],
             },
 
             // 产品类别列表
@@ -139,6 +143,11 @@ const app = new Vue({
             displayImageList: [],  // 初始化列表
             dialogVisible: false,
             dialogImageUrl: '',
+            // 日期选择格式
+            marketTimeType: 'year',
+            nmpaTimeType: 'year',
+            // 空缺数量
+            emptyNum: ''
         }
     },
     computed: {
@@ -163,7 +172,7 @@ const app = new Vue({
 
     created() {
         this.getTypeList();
-        this.watchArrayStatus(['paramList', 'questionList', 'authImageList', 'displayImageList']);
+        this.watchArrayStatus(['paramList', 'questionList', 'authImageList']);
         this.getProductFormData();
 
     },
@@ -184,26 +193,95 @@ const app = new Vue({
                     this.socrllToErrorInput()
                     return
                 }
-                this.saveFormData()
+                this.emptyNum = this.validateEmptyParams(this.formData)
+                if( this.emptyNum> 0 && this.formData.status === 1){
+                    this.$confirm('您还剩余' + this.emptyNum + '项未完善，将会导致用户对您产品/仪器的认识度不够，确认是否提交？', '提示', {
+                        confirmButtonText: '是',
+                        cancelButtonText: '否'
+                    }).then(() => {
+                        this.saveFormData()
+                    })
+                } else{
+                    this.saveFormData()
+                }
+            })
+        },
+        // 校验空参数个数
+        validateEmptyParams(params){
+            let list = []
+            const keys = Object.keys(params)
+            let count = 0
+            keys.forEach(key => {
+                if(typeof params[key] === "string"){
+                    if(params[key] === '' || params[key].trim().length <= 0){
+                        list.push(key)
+                        count ++
+                    }
+                }else if(typeof params[key] === 'number'){
+                    console.log(key)
+                }else if(typeof params[key] === 'object'){
+                    if(params[key] instanceof  Array){
+                        if(params[key].length <= 0){
+                            list.push(key)
+                            count ++
+                        }
+                    }else {
+                        if(params[key] === null){
+                            list.push(key)
+                            count ++
+                        }
+                    }
+                }else if(typeof params[key] === 'undefined'){
+                    list.push(key)
+                    count ++
+                }
             })
+            console.log(list)
+            return count;
+        },
+        // 裁切时间格式
+        sliceDateStr(time, type) {
+            if(!time) return ''
+            time = dateFormat(time, 'yyyy-MM-dd')
+            if (type === 'year') {
+                time = time.slice(0, 4)
+            } else if (type === 'month') {
+                time = time.slice(0, 7)
+            }
+            return time
         },
 
         // 保存表单数据
         saveFormData() {
             const that = this;
+
             const params = {
                 ...this.formData,
                 shopId: this.shopId,
                 commodityType: this.commodityType,
                 paramList: JSON.stringify(this.paramList),
                 questionList: JSON.stringify(this.questionList),
-                marketTime: dateFormat(this.formData.marketTime, 'yyyy-MM-dd'),
-                nmpaTime: dateFormat(this.formData.nmpaTime, 'yyyy-MM-dd'),
+                // marketTime: dateFormat(this.formData.marketTime, 'yyyy-MM-dd'),
+                // nmpaTime: dateFormat(this.formData.nmpaTime, 'yyyy-MM-dd'),
                 authImageList: this.authImageList.map(image => (image.response ? image.response.data : image.url)),
                 displayImageList: this.displayImageList.map(image => (image.response ? image.response.data : image.url))
             };
 
+            console.log(params);
+
+            /* 处理时间 */
+            if(this.formData.marketTime){
+                params.marketTime = this.sliceDateStr(this.formData.marketTime, this.marketTimeType)
+            }
+
+            /* 处理时间 */
+            if(this.formData.nmpaTime){
+                params.nmpaTime = this.sliceDateStr(this.formData.nmpaTime, this.nmpaTimeType)
+            }
+
             if (this.productId) params.productId = this.productId;
+            params.emptyNum = this.emptyNum;
+
             console.log(params);
             SupplierApi.ShopBaikeProductSave(params, function (res) {
                 if (res.code === 0) {
@@ -217,6 +295,18 @@ const app = new Vue({
             })
         },
 
+        // 获取时间类型（年月日）
+        getTimeType(time){
+            time = time.split('-')
+            if(time.length === 1){
+                return 'year'
+            }else if(time.length === 2){
+                return 'month'
+            }else {
+                return 'date'
+            }
+        },
+
 		initFormData: function(formData){
 			console.log(formData);
 			// 初始化this.formData
@@ -228,6 +318,11 @@ const app = new Vue({
                 		this.formData[key] = len > 0 ? len : ''
                 	} else if(['marketTime', 'nmpaTime'].includes(key)){
                 		this.formData[key] = new Date(formData[key])
+                        if(key === 'marketTime'){
+                            this.marketTimeType = this.getTimeType(formData[key])
+                        }else{
+                            this.nmpaTimeType = this.getTimeType(formData[key])
+                        }
                 	}
                 	else {
                 		this.formData[key] = formData[key];

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

@@ -125,7 +125,18 @@ var productList = new Vue({
             if (product.status === 1) {
                 newStatus = 0;
             }
-
+            if(product.emptyNum > 0 && newStatus === 1){
+                this.$confirm('您还剩余' + product.emptyNum + '项未完善，将会导致用户对您产品/仪器的认识度不够，确认是否提交？', '提示', {
+                    confirmButtonText: '是',
+                    cancelButtonText: '否'
+                }).then(() => {
+                    this.ShopBaikeProductStatusUpdate(newStatus ,product)
+                })
+            } else{
+                this.ShopBaikeProductStatusUpdate(newStatus, product )
+            }
+        },
+        ShopBaikeProductStatusUpdate(newStatus, product){
             SupplierApi.ShopBaikeProductStatusUpdate({
                 productId: product.productId,
                 shopId: this.shopId,
@@ -134,7 +145,8 @@ var productList = new Vue({
                 if (res.code === 0) {
                     // 不刷新数据更新
                     product.status = newStatus;
-                    CAIMEI.dialog('修改状态成功!');
+                    const tip = newStatus ? '文章已发布' : '文章已存入草稿箱';
+                    CAIMEI.dialog(tip);
                 } else {
                     CAIMEI.dialog('修改状态失败!');
                 }
@@ -143,7 +155,8 @@ var productList = new Vue({
         //查看
         toDetail: function toDetail(product) {
             if (product.auditStatus !== 2) return CAIMEI.dialog('请等待审核通过后查看!');
-            if (!product.status) return CAIMEI.dialog('请启用后查看!');
+            if (product.onlineStatus !== 2) return CAIMEI.dialog('请等待文章上线后查看!');
+            if (!product.status) return CAIMEI.dialog('请发布后查看!');
             window.open('/encyclopedia/product-' + product.productId + '.html');
         },
         // 跳转添加文章页面

src/main/resources/static/js/utils.js

@@ -309,3 +309,40 @@ CAIMEI.returnedTarget = function(){//对象合并 IE 兼容方法
     }
 };
 
+/**
+ * @description: 根据年份月份计算当月天数
+ * @param year 年份
+ * @param month 月份
+ * @return 返回日期格式
+ */
+function fetchDaysByYear(year, month) {
+  // 该函数没有对参数进行校验  必须确保传入年份月份为正确的数字
+  year = parseInt(year, 10);
+  month = parseInt(month, 10);
+  let days;
+  switch (month) {
+    case 1:
+    case 3:
+    case 5:
+    case 7:
+    case 8:
+    case 10:
+    case 12:
+      days = 31;
+      break;
+    case 4:
+    case 6:
+    case 9:
+    case 11:
+      days = 30;
+      break;
+    case 2:
+      // 判断是否闰年
+      if ((year % 4 === 0 && year % 100 !== 0) || year % 400 === 0) {
+        days = 29;
+      } else {
+        days = 28;
+      }
+  }
+  return days;
+}

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

@@ -15,7 +15,7 @@
 <!--导航栏-->
 <template th:replace="article/components/article-header"></template>
 <div class="tip-bar">
-    <div class="tip">提示：产品详情请到采美商城搜索</div>
+    <!--<div class="tip">提示：产品详情请到采美商城搜索</div>-->
     <!--面包屑-->
     <div class="bar">
         <a href="/" target="_blank">首页</a> &gt; <a  th:each="type: *{articleType}" th:if="${typeId}==${type.id}" th:text="${type.name}" href="javascript:void(0);" class="title newTitle"></a>&gt; 正文

src/main/resources/templates/article/list.html

@@ -11,7 +11,7 @@
 <!--导航栏-->
 <template th:replace="article/components/article-header"></template>
 <div class="tip-bar">
-    <div class="tip">提示：产品详情请到采美商城搜索</div>
+    <!--<div class="tip">提示：产品详情请到采美商城搜索</div> -->
     <!--面包屑-->
     <div th:if="${typeId}>0" class="bar">
         <a href="/" target="_blank">首页</a>&gt; <a  th:each="type: ${articleType}" th:if="${typeId}==${type.id}" th:text="${type.name}" href="javascript:void(0);" class="title newTitle"></a>
@@ -26,13 +26,22 @@
                     <input class="keyword" type="text" :value="params.keyword" placeholder="请输入关键词" />
                     <a class="searchBtn" href="javascript:void(0);">搜索</a>
                 </div>
-                <p v-if="isPC" class="result" v-html="'为您找到相关结果<b>'+listRecord+'</b>条'"></p>
+                <p v-if="isPC" class="result search-tip">
+                    <span>为你找到相关文章<b v-text="listRecord"></b>条,</span>
+                    <span>同时为您找到相关产品<b v-text="productRecord"></b>个</span>
+                    <a target="_blank" :href="'/product/list.html?keyword=' + params.keyword" v-if="listRecord > 0">点击前往</a>
+                </p>
             </div>
             <p v-else-if="params.labelId" class="classify biaoqian">
                 <em id="labelTxt"></em>相关的文章
             </p>
-            <p v-if="params.keyword && !isPC" class="classify" v-html="'为您找到相关结果<em>'+listRecord+'</em>条'"></p>
+            <p v-if="params.keyword && !isPC" class="classify search-tip">
+                <span>为你找到相关文章<em v-text="listRecord"></em>条,</span>
+                <span>同时为您找到相关产品<em v-text="listRecord"></em>个</span>
+                <a target="_blank" :href="'/product/list.html?keyword=' + params.keyword" v-if="listRecord > 0">点击前往</a>
+            </p>
             <div v-if="listData.length>0" class="dataRousce">
+                <!--<div class="search-tip">为你找到相关文章59条，同时为您找到相关产品59条<a href="/">点击前往</a></div>-->
                 <div class="row" v-for="item in listData">
                     <div class="new-img">
                         <a :href="'/info/detail-'+item.id+'-1.html'" target="_blank">
@@ -105,6 +114,8 @@
 </div>
 <template th:replace="article/components/article-footer"></template>
 <template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>
 </body>

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

@@ -59,17 +59,17 @@
             <h2>仪器参数</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <div class="tr">
-                <div class="group" th:each="params: *{paramList}">
-                    <div class="th" th:text="${params.name}"></div>
-                    <div class="td" th:text="${params.content}"></div>
-                </div>
-            </div>
-        </div>
+        <table class="content">
+            <tr th:each="params: *{paramList}">
+                <block th:each="target: ${params}">
+                    <td class="th" th:text="${target.name}"></td>
+                    <td class="td" th:text="${target.content}"></td>
+                </block>
+            </tr>
+        </table>
     </section>
     <!-- 仪器优点 -->
-    <section class="section">
+    <section class="section" th:if="*{advantage != ''}">
         <div class="title">
             <h2>仪器优点</h2>
             <div class="line"></div>
@@ -77,7 +77,7 @@
         <div class="content" th:utext="*{advantage}"></div>
     </section>
     <!-- 仪器缺点 -->
-    <section class="section">
+    <section class="section" th:if="*{disadvantage != ''}">
         <div class="title">
             <h2>仪器缺点</h2>
             <div class="line"></div>
@@ -85,7 +85,7 @@
         <div class="content" th:utext="*{disadvantage}"></div>
     </section>
     <!-- 仪器原理 -->
-    <section class="section">
+    <section class="section" th:if="*{principle != ''}">
         <div class="title">
             <h2>仪器原理</h2>
             <div class="line"></div>
@@ -98,6 +98,29 @@
             <h2>仪器档案</h2>
             <div class="line"></div>
         </div>
+        <table class="content">
+            <tr>
+                <td class="th">品牌</td>
+                <td class="td" th:text="*{brand}"></td>
+                <td class="th">产地</td>
+                <td class="td" th:text="*{producePlace}"></td>
+            </tr>
+            <tr>
+                <td class="th">上市时间</td>
+                <td class="td" th:text="*{marketTime}"></td>
+                <td class="th">供应商</td>
+                <td class="td" th:text="*{company}"></td>
+            </tr>
+            <tr>
+                <td class="th">NMPA认证时间</td>
+                <td class="td" th:text="*{nmpaTime}"></td>
+                <td class="th">价格区间</td>
+                <td class="td">
+                    <a href="javascript:void(0);" id="contactPopupBtn">点击查询</a>
+                </td>
+            </tr>
+        </table>
+        <!--
         <div class="content">
             <div class="tr">
                 <div class="group">
@@ -112,17 +135,17 @@
             <div class="tr">
                 <div class="group">
                     <div class="th">上市时间</div>
-                    <div class="td" th:text="*{#dates.format(marketTime,'yyyy年MM月dd日')}"></div>
+                    <div class="td" th:text="*{marketTime}"></div>
                 </div>
                 <div class="group">
-                    <div class="th">公司/厂商</div>
+                    <div class="th">供应商</div>
                     <div class="td" th:text="*{company}"></div>
                 </div>
             </div>
             <div class="tr">
                 <div class="group">
                     <div class="th">NMPA认证时间</div>
-                    <div class="td" th:text="*{#dates.format(nmpaTime,'yyyy年MM月dd日')}"></div>
+                    <div class="td" th:text="*{nmpaTime}"></div>
                 </div>
                 <div class="group">
                     <div class="th">价格区间</div>
@@ -130,9 +153,10 @@
                 </div>
             </div>
         </div>
+        -->
     </section>
     <!-- 仪器认证 -->
-    <section class="section approve">
+    <section class="section approve" th:unless="*{#arrays.isEmpty(authImageList)}">
         <div class="title">
             <h2>仪器认证</h2>
             <div class="line"></div>
@@ -145,31 +169,31 @@
         </div>
     </section>
     <!-- 适应人群 -->
-    <section class="section">
+    <section class="section" th:if="*{adaptiveMan != ''}">
         <div class="title">
-            <h2>适应人群</h2>
+            <h2>适应症</h2>
             <div class="line"></div>
         </div>
         <div class="content" th:utext="*{adaptiveMan}"></div>
     </section>
     <!-- 不适应人群 -->
-    <section class="section">
+    <section class="section" th:if="*{unAdaptiveMan != ''}">
         <div class="title">
             <h2>不适应人群</h2>
             <div class="line"></div>
         </div>
         <div class="content" th:utext="*{unAdaptiveMan}"></div>
     </section>
-    <!-- 术前术后 -->
-    <section class="section">
+    <!-- 注意事项 -->
+    <section class="section" th:if="*{aroundOperation != ''}">
         <div class="title">
-            <h2>术前术后</h2>
+            <h2>注意事项</h2>
             <div class="line"></div>
         </div>
         <div class="content" th:utext="*{aroundOperation}"></div>
     </section>
-    <!-- 效果展示 -->
-    <section class="section effect">
+    <!-- 效果展示
+    <section class="section effect" th:unless="*{#arrays.isEmpty(displayImageList)}">
         <div class="title">
             <h2>效果展示</h2>
             <div class="line"></div>
@@ -178,8 +202,9 @@
             <img th:src="${img}" th:each="img: *{displayImageList}"/>
         </div>
     </section>
+    -->
     <!-- 常见问题 -->
-    <section class="section question">
+    <section class="section question" th:unless="*{#arrays.isEmpty(questionList)}">
         <div class="title">
             <h2>常见问题</h2>
             <div class="line"></div>
@@ -200,6 +225,31 @@
             </dl>
         </div>
     </section>
+
+    <!-- 日期 && 浏览量 -->
+    <section class="section publish-info">
+        <div class="publish-date"><span>日   期：</span><span>2021-10-27 17:23</span></div>
+        <div class="review"><span>浏览量：</span><span th:text="*{pv}"></span></div>
+    </section>
+
+    <!--  相关链接 -->
+    <section class="section some-link">
+        <div class="title">
+            <h2>相关链接</h2>
+            <div class="line"></div>
+        </div>
+        <div class="group">
+            <a th:href="*{ productLink }" target="_blank" class="link">
+                <img th:src="*{image}" th:alt="*{name}" class="image"/>
+                <span th:text="*{name}" class="name"></span>
+            </a>
+            <a th:href="*{ '/supplier-' + shopId + '.html' }" target="_blank" class="link" th:if="*{shopId != ''}">
+                <img th:src="*{shopLogo}" th:alt="*{shopName}" class="image"/>
+                <span th:text="*{shopName}" class="name"></span>
+            </a>
+        </div>
+    </section>
+
 </article>
 <!-- 侧边楼层导航 -->
 <aside class="navigate" id="category"></aside>

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

@@ -44,17 +44,17 @@
             <h2>产品参数</h2>
             <div class="line"></div>
         </div>
-        <div class="content">
-            <div class="tr">
-                <div class="group" th:each="params: *{paramList}">
-                    <div class="th" th:text="${params.name}"></div>
-                    <div class="td" th:text="${params.content}"></div>
-                </div>
-            </div>
-        </div>
+        <table class="content">
+            <tr th:each="params: *{paramList}">
+                <block th:each="target: ${params}">
+                    <td class="th" th:text="${target.name}"></td>
+                    <td class="td" th:text="${target.content}"></td>
+                </block>
+            </tr>
+        </table>
     </section>
     <!-- 产品优点 -->
-    <section class="section">
+    <section class="section" th:if="*{advantage != ''}">
         <div class="title">
             <h2>产品优点</h2>
             <div class="line"></div>
@@ -62,7 +62,7 @@
         <div class="content" th:utext="*{advantage}"></div>
     </section>
     <!-- 产品缺点 -->
-    <section class="section">
+    <section class="section" th:if="*{disadvantage != ''}">
         <div class="title">
             <h2>产品缺点</h2>
             <div class="line"></div>
@@ -70,7 +70,7 @@
         <div class="content" th:utext="*{disadvantage}"></div>
     </section>
     <!-- 产品原理 -->
-    <section class="section">
+    <section class="section" th:if="*{principle != ''}">
         <div class="title">
             <h2>产品原理</h2>
             <div class="line"></div>
@@ -83,6 +83,29 @@
             <h2>产品档案</h2>
             <div class="line"></div>
         </div>
+        <table class="content">
+            <tr>
+                <td class="th">品牌</td>
+                <td class="td" th:text="*{brand}"></td>
+                <td class="th">产地</td>
+                <td class="td" th:text="*{producePlace}"></td>
+            </tr>
+            <tr>
+                <td class="th">上市时间</td>
+                <td class="td" th:text="*{marketTime}"></td>
+                <td class="th">供应商</td>
+                <td class="td" th:text="*{company}"></td>
+            </tr>
+            <tr>
+                <td class="th">NMPA认证时间</td>
+                <td class="td" th:text="*{nmpaTime}"></td>
+                <td class="th">价格区间</td>
+                <td class="td">
+                    <a href="javascript:void(0);" id="contactPopupBtn">点击查询</a>
+                </td>
+            </tr>
+        </table>
+        <!--
         <div class="content">
             <div class="tr">
                 <div class="group">
@@ -97,17 +120,17 @@
             <div class="tr">
                 <div class="group">
                     <div class="th">上市时间</div>
-                    <div class="td" th:text="*{#dates.format(marketTime,'yyyy年MM月dd日')}"></div>
+                    <div class="td" th:text="*{marketTime}"></div>
                 </div>
                 <div class="group">
-                    <div class="th">公司/厂商</div>
+                    <div class="th">供应商</div>
                     <div class="td" th:text="*{company}"></div>
                 </div>
             </div>
             <div class="tr">
                 <div class="group">
                     <div class="th">NMPA认证时间</div>
-                    <div class="td" th:text="*{#dates.format(nmpaTime,'yyyy年MM月dd日')}"></div>
+                    <div class="td" th:text="*{nmpaTime}"></div>
                 </div>
                 <div class="group">
                     <div class="th">价格区间</div>
@@ -115,9 +138,10 @@
                 </div>
             </div>
         </div>
+        -->
     </section>
     <!-- 产品认证 -->
-    <section class="section approve">
+    <section class="section approve" th:unless="*{#arrays.isEmpty(authImageList)}">
         <div class="title">
             <h2>产品认证</h2>
             <div class="line"></div>
@@ -130,30 +154,30 @@
         </div>
     </section>
     <!-- 适应人群 -->
-    <section class="section">
+    <section class="section" th:if="*{ adaptiveMan != '' }">
         <div class="title">
-            <h2>适应人群</h2>
+            <h2>适应症</h2>
             <div class="line"></div>
         </div>
         <div class="content" th:utext="*{adaptiveMan}"></div>
     </section>
     <!-- 不适应人群 -->
-    <section class="section">
+    <section class="section" th:if="*{ unAdaptiveMan != '' }">
         <div class="title">
             <h2>不适应人群</h2>
             <div class="line"></div>
         </div>
         <div class="content" th:utext="*{unAdaptiveMan}"></div>
     </section>
-    <!-- 术前术后 -->
-    <section class="section">
+    <!-- 注意事项 -->
+    <section class="section" th:if="*{ aroundOperation != '' }">
         <div class="title">
-            <h2>术前术后</h2>
+            <h2>注意事项</h2>
             <div class="line"></div>
         </div>
         <div class="content" th:utext="*{aroundOperation}"></div>
     </section>
-    <!-- 效果展示 -->
+    <!-- 效果展示
     <section class="section effect">
         <div class="title">
             <h2>效果展示</h2>
@@ -163,8 +187,9 @@
             <img th:src="${img}" th:each="img: *{displayImageList}"/>
         </div>
     </section>
+    -->
     <!-- 常见问题 -->
-    <section class="section question">
+    <section class="section question" th:unless="*{#arrays.isEmpty(questionList)}">
         <div class="title">
             <h2>常见问题</h2>
             <div class="line"></div>
@@ -182,6 +207,31 @@
             </dl>
         </div>
     </section>
+
+    <!-- 日期 && 浏览量 -->
+    <section class="section publish-info">
+        <div class="publish-date"><span>日   期：</span><span>2021-10-27 17:23</span></div>
+        <div class="review"><span>浏览量：</span><span th:text="*{pv}"></span></div>
+    </section>
+
+    <!--  相关链接 -->
+    <section class="section some-link">
+        <div class="title">
+            <h2>相关链接</h2>
+            <div class="line"></div>
+        </div>
+        <div class="group">
+            <a th:href="*{ productLink }" target="_blank" class="link">
+                <img th:src="*{image}" th:alt="*{name}" class="image"/>
+                <span th:text="*{name}" class="name"></span>
+            </a>
+            <a th:href="*{ '/supplier-' + shopId + '.html' }" target="_blank" class="link" th:if="*{shopId != ''}">
+                <img th:src="*{shopLogo}" th:alt="*{shopName}" class="image"/>
+                <span th:text="*{shopName}" class="name"></span>
+            </a>
+        </div>
+    </section>
+
 </article>
 <!-- 侧边楼层导航 -->
 <aside class="navigate" id="category"></aside>

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

@@ -2,12 +2,14 @@
 <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>
+    <title>采美365网-采美文章-编辑文章</title>
     <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 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">
+    <link th:href="@{/css/supplier-center/article/article-edit.css(v=${version})}" charset="UTF-8" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
 <body>
@@ -21,138 +23,103 @@
         <div class="crumbs" v-if="isPC">
             <span>我的采美</span>
             <span>&gt;</span>
-            <span>文章管理</span>
+            <span>采美文章</span>
             <span>&gt;</span>
-            <span>编辑文章</span>
+            <span>文章管理</span>
         </div>
         <div class="wrap clear">
             <!--左侧导航-->
             <template th:replace="supplier-center/components/tableft"></template>
             <div class="right-box right">
                 <div class="row">
-                    <div class="top-tip">温馨提示：多发布文章，有利于曝光您的产品以及提高您产品的销售量，文章发布并且审核通过后<br/>可在信息中心搜索您的文章</div>
-                    <form class="form">
-                        <!-- 标题 -->
-                        <div class="form-item" required prop="title">
-                            <label for="title" class="form-label"><em>*</em>标题:</label>
-                            <input id="title" name="title" class="form-control" placeholder="请输入文章标题"
-                                   v-model="formData.title"/>
-                            <template v-if="validData['title'] && !validData['title'].valid">
-                                <div class="errTips" v-html="validData['title'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 文章标签 -->
-                        <div class="form-item" required prop="label">
-                            <label for="tag" class="form-label"><em>*</em>文章标签:</label>
-                            <input id="tag" name="label" class="form-control" placeholder="多个标签请用英文逗号( , )分割，例如：美白,祛痘"
-                                   v-model="formData.label"/>
-                            <template v-if="validData['label'] && !validData['label'].valid">
-                                <div class="errTips" v-html="validData['label'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 预选标签列表 -->
-                        <div class="tag-list">
-                            <div v-for="(label, index) in articleLabels" class="tag"
-                                 :class="{active: checkLabel(index)}" @click.stop="labelClick(index)">{{label}}<span
-                                    class="close">×</span></div>
-                        </div>
-                        <!-- 新增标签 -->
-                        <div class="control-group">
-                            <input id="tagName" name="addLabel" class="form-control tagName" placeholder="请输入标签名"
-                                   v-model="addLabelName"/>
-                            <button class="form-button addTag" type="button" @click.stop="addLabel">添加</button>
-                        </div>
-                        <!-- SEO关键词 -->
-                        <div class="form-item" required prop="keyword">
-                            <label for="keyword" class="form-label"><em>*</em>SEO关键词:</label>
-                            <input id="keyword" type="text" name="keyword" class="form-control" placeholder="请输入SEO关键词"
-                                   v-model="formData.keyword"/>
-                            <template v-if="validData['keyword'] && !validData['keyword'].valid">
-                                <div class="errTips" v-html="validData['keyword'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 发布人 -->
-                        <div class="form-item" required prop="publisher">
-                            <label for="postAuthor" class="form-label"><em>*</em>发布人:</label>
-                            <input id="postAuthor" name="publisher" class="form-control" placeholder="请输入发布人"
-                                   v-model="formData.publisher"/>
-                            <template v-if="validData['publisher'] && !validData['publisher'].valid">
-                                <div class="errTips" v-html="validData['publisher'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 来源 -->
-                        <div class="form-item">
-                            <label for="source" class="form-label"><em>*</em>来源:</label>
-                            <input id="source" name="source" class="form-control" placeholder="请输入文章来源"
-                                   v-model="formData.source"/>
-                            <template v-if="validData['source'] && !validData['source'].valid">
-                                <div class="errTips" v-html="validData['source'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 推荐语 -->
-                        <div class="form-item" required prop="recommendContent">
-                            <label for="desc" class="form-label"><em>*</em>推荐语（描述）:</label>
-                            <textarea id="desc" name="recommendContent" placeholder="请输入推荐语" rows="4"
-                                      v-model="formData.recommendContent" class="form-control"></textarea>
-                            <template v-if="validData['recommendContent'] && !validData['recommendContent'].valid">
-                                <div class="errTips" v-html="validData['recommendContent'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 文章内容 -->
-                        <div class="form-item" required prop="articleContent">
-                            <label class="form-label"><em>*</em>文章内容:</label>
-                            <div id="editor"></div>
-                            <template v-if="validData['articleContent'] && !validData['articleContent'].valid">
-                                <div class="errTips" v-html="validData['articleContent'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 文章分类 -->
-                        <div class="form-item" required prop="typeId">
-                            <label for="category" class="form-label"><em>*</em>文章分类:</label>
-                            <select id="category" name="typeId" class="form-control form-select"
-                                    v-model="formData.typeId">
-                                <option value="">请选择</option>
-                                <template v-for="(typeInfo, index) in articleTypeList">
-                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
-                                </template>
-                            </select>
-                            <template v-if="validData['typeId'] && !validData['typeId'].valid">
-                                <div class="errTips" v-html="validData['typeId'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 引导图 -->
-                        <div class="form-item" required prop="guidanceImage">
-                            <label class="form-label"><em>*</em>引导图:</label>
-                            <label for="cover" class="upload-control">
-                                <template v-if="!formData.guidanceImage">
-                                    <span>+</span>
-                                    <span>添加图片</span>
-                                </template>
-                                <img :src="formData.guidanceImage" alt="guidanceImage" v-show="formData.guidanceImage">
-                            </label>
-                            <input type="file" name="guidanceImage" id="cover" class="form-control" hidden
-                                   @change="fileInputChange(event)"/>
-                            <template v-if="validData['guidanceImage'] && !validData['guidanceImage'].valid">
-                                <div class="errTips" v-html="validData['guidanceImage'].message"></div>
-                            </template>
-                        </div>
-                        <!-- 状态 -->
-                        <div class="form-item radio-group" required prop="status">
-                            <div class="form-label"><em>*</em>状态:</div>
-                            <div class="radio-control">
-                                <input id="on" type="radio" value="1" name="status" v-model="formData.status"/>
-                                <label for="on" class="radio">启用</label>
-                            </div>
-                            <div class="radio-control">
-                                <input id="off" type="radio" value="0" name="status" v-model="formData.status"/>
-                                <label for="off" class="radio">停用</label>
-                            </div>
-                        </div>
+                    <div class="top-tip">温馨提示：发布采美文章有利于曝光您的店铺商品，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>
+
+                    <div class="valide-form">
+                        <el-form :model="formData" :rules="rules" ref="ruleForm" label-position="top">
+                            <!-- 标题 -->
+                            <el-form-item label="标题" prop="title">
+                                <el-input v-model="formData.title" placeholder="请输入文章标题"></el-input>
+                            </el-form-item>
+                            <!-- 文章标签 -->
+                            <el-form-item label="文章标签" prop="label">
+                                <el-input v-model="formData.label" placeholder="请输入文章标签"></el-input>
+                            </el-form-item>
+                            <el-form-item  label="">
+                                <!-- 预选标签列表 -->
+                                <div class="tag-list">
+                                    <div v-for="(label, index) in articleLabels"
+                                         class="tag"
+                                         :class="{active: checkLabel(index)}" @click.stop="labelClick(index)">
+                                        <span>{{label}}</span>
+                                        <span class="close">×</span>
+                                    </div>
+                                </div>
+                                <!-- 新增标签 -->
+                                <div class="label-add">
+                                    <el-input v-model="addLabelName" placeholder="请输入标签名"></el-input>
+                                    <button class="add-tag" type="button" @click.stop="addLabel">添加</button>
+                                </div>
+                            </el-form-item>
+                            <!-- SEO关键词 -->
+                            <el-form-item label="SEO关键词" prop="keyword">
+                                <el-input v-model="formData.keyword" placeholder="请输入SEO关键词"></el-input>
+                            </el-form-item>
+                            <!-- 发布人 -->
+                            <el-form-item label="发布人" prop="publisher">
+                                <el-input v-model="formData.publisher" placeholder="请填写发布人姓名"></el-input>
+                            </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-input type="textarea" :rows="3" v-model="formData.recommendContent" placeholder="请填写推荐语(描述)"></el-input>
+                            </el-form-item>
+                            <!-- 文章内容 -->
+                            <el-form-item label="文章内容" prop="articleContent">
+                                <el-input v-model="formData.articleContent" v-show="false"></el-input>
+                                <editor v-model="formData.articleContent" placeholder="请输入文章内容"></editor>
+                            </el-form-item>
+                            <!-- 文章分类 -->
+                            <el-form-item label="文章分类" prop="typeId">
+                                <el-select v-model="formData.typeId" class="max-width">
+                                    <template v-for="(typeInfo, index) in articleTypeList">
+                                        <el-option :label="typeInfo.typeName" :value="typeInfo.typeId" :key="typeInfo.typeId"></el-option>
+                                    </template>
+                                </el-select>
+                            </el-form-item>
+                            <!-- 引导图 -->
+                            <el-form-item label="引导图" prop="guidanceImage">
+                                <el-input v-model="formData.guidanceImage" placeholder="引导图" v-show="false"></el-input>
+                                <el-upload
+                                        :class="{ 'hide-upload': articleImageList.length >= 1 }"
+                                        :action="action"
+                                        list-type="picture-card"
+                                        :on-success="handleUploadSuccess"
+                                        :on-remove="handleImageRemove"
+                                        :file-list="articleImageList"
+                                        :limit="1"
+                                >
+                                    <i class="el-icon-plus"></i>
+                                    <div slot="tip" class="el-upload__tip">建议图片尺寸210px*210px，并上传白底图片</div>
+                                </el-upload>
+                            </el-form-item>
+                            <!-- 状态 -->
+                            <el-form-item label="" prop="status">
+                                <span class="cm-label"><em>*</em>状态:</span>
+                                <el-radio-group v-model="formData.status">
+                                    <el-radio :label="1">发布</el-radio>
+                                    <el-radio :label="0">保存草稿箱</el-radio>
+                                </el-radio-group>
+                            </el-form-item>
+                        </el-form>
+                        <!-- 提交 -->
                         <div class="form-item btns">
                             <button class="btn break" @click="handleBack">返回</button>
                             <button class="btn submit" @click="handleSave">保存</button>
                         </div>
-                    </form>
+                    </div>
                 </div>
             </div>
         </div>
@@ -162,14 +129,10 @@
 <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="@{/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/formMixin.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript"
-        th:src="@{/js/supplier-center/article/uploadMixin.js(v=${version})}"></script>
-<script charset="UTF-8" type="text/javascript"
-        th:src="@{/js/supplier-center/article/article-edit.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>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/article/article-edit.js(v=${version})}"></script>
 </body>
 </html>

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

@@ -4,9 +4,11 @@
 <head>
     <title>采美365网-文章管理-文章列表</title>
     <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 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/table.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">
     <template th:replace="components/analysis"></template>
 </head>
@@ -21,11 +23,10 @@
             <div class="crumbs">
                 <span>我的采美</span>
                 <span>&gt;</span>
-                <span>文章管理</span>
+                <span>采美文章</span>
                 <span>&gt;</span>
-                <span>文章列表</span>
+                <span>文章管理</span>
             </div>
-            <div class="hot-tip">温馨提示：多发布文章，有利于曝光您的店铺商品，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>
         </div>
         <div class="wrap clear">
             <!--左侧导航-->
@@ -33,38 +34,64 @@
             <div class="right">
                 <!--筛选-->
                 <div class="row">
-                    <div class="form-section">
-                        <div class="form-item">
-                            <label for="articleId" class="form-label">文章ID:</label>
-                            <input id="articleId" class="form-control" v-model="listQuery.articleId" type="text" placeholder="请输入文章ID"/>
+                    <div class="hot-tip">温馨提示：发布采美文章有利于曝光您的店铺商品，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>
+                    <div class="filter-container">
+                        <!--文章ID-->
+                        <div class="filter-control">
+                            <span class="label">文章ID：</span>
+                            <el-input class="control" v-model="listQuery.articleId" placeholder="请输入文章ID" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="articleTitle" class="form-label">文章标题:</label>
-                            <input id="articleTitle" class="form-control" v-model="listQuery.title" type="text" placeholder="请输入文章标题"/>
+                        <!--文章标题-->
+                        <div class="filter-control">
+                            <span class="label">文章标题：</span>
+                            <el-input class="control" v-model="listQuery.title" placeholder="请输入文章标题" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="articleAuthor" class="form-label">发布人:</label>
-                            <input id="articleAuthor" class="form-control" v-model="listQuery.publisher" type="text" placeholder="输入发布人"/>
+                        <!--发布人-->
+                        <div class="filter-control">
+                            <span class="label">发布人：</span>
+                            <el-input class="control" v-model="listQuery.publisher" placeholder="请输入文章发布人" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="articleCate" class="form-label">文章分类:</label>
-                            <select id="articleCate" class="form-control form-select" v-model="listQuery.typeId" @change="getArticleList">
-                                <option value="">请选择</option>
+                        <!--文章分类-->
+                        <div class="filter-control">
+                            <span class="label">文章分类：</span>
+                            <el-select v-model="listQuery.typeId" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
                                 <template v-for="(typeInfo, index) in articleTypeList">
-                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
+                                    <el-option :key="index" :label="typeInfo.typeName" :value="typeInfo.typeId"></el-option>
                                 </template>
-                            </select>
+                            </el-select>
+                        </div>
+                        <!--审核状态-->
+                        <div class="filter-control">
+                            <span class="label">审核状态：</span>
+                            <el-select v-model="listQuery.auditStatus" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待审核" :value="1"></el-option>
+                                <el-option label="审核通过" :value="2"></el-option>
+                                <el-option label="审核未通过" :value="3"></el-option>
+                            </el-select>
                         </div>
-                        <div class="form-item">
-                            <label for="articleStatus" class="form-label">审核状态:</label>
-                            <select id="articleStatus" class="form-control form-select" v-model="listQuery.auditStatus"  @change="handleSearchList">
-                                <option value="">全部</option>
-                                <option value="1">待审核</option>
-                                <option value="2">审核通过</option>
-                                <option value="3">审核未通过</option>
-                            </select>
+                        <!--上线状态-->
+                        <div class="filter-control">
+                            <span class="label">上线状态：</span>
+                            <el-select v-model="listQuery.onlineStatus" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待上线" :value="1"></el-option>
+                                <el-option label="已上线" :value="2"></el-option>
+                                <el-option label="已下线" :value="3"></el-option>
+                            </el-select>
                         </div>
-                        <div class="form-item buttons">
+                        <!--状态-->
+                        <div class="filter-control">
+                            <span class="label">状态：</span>
+                            <el-select v-model="listQuery.status" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="已发布" :value="1"></el-option>
+                                <el-option label="保存草稿箱" :value="2"></el-option>
+                            </el-select>
+                        </div>
+                        <!--筛选按钮-->
+                        <div class="filter-control">
                             <button class="form-button search" type="button" @click="handleSearchList">搜索</button>
                             <button class="form-button add" type="button" @click="handleAddArticle">添加</button>
                         </div>
@@ -81,6 +108,7 @@
                             <th>点赞数</th>
                             <th>阅读量</th>
                             <th>审核状态</th>
+                            <th>上线状态</th>
                             <th>发布时间</th>
                             <th>发布人</th>
                             <th>添加时间</th>
@@ -104,6 +132,11 @@
                                     <span class="state danger" v-else>审核失败</span>
                                     <span class="reason" v-if="articleInfo.auditStatus === 3" :title="'审核失败：' + articleInfo.failReason">?</span>
                                 </td>
+                                <td>
+                                    <span class="state default" v-if="articleInfo.onlineStatus === 1">待上线</span>
+                                    <span class="state success" v-if="articleInfo.onlineStatus === 2">已上线</span>
+                                    <span class="state danger" v-if="articleInfo.onlineStatus === 3">已下线</span>
+                                </td>
                                 <td class="time">
                                     <div class="time">{{ articleInfo.publishDate | formatDate }}</div>
                                 </td>
@@ -112,13 +145,13 @@
                                     <div class="time">{{ articleInfo.createDate | formatDate}}</div>
                                 </td>
                                 <td>
-                                    <span class="state primary" v-if="articleInfo.status === 1">已启用</span>
-                                    <span class="state default" v-else>未启用</span>
+                                    <span class="state primary" v-if="articleInfo.status === 1">已发布</span>
+                                    <span class="state danger" v-else>保存草<br>稿箱</span>
                                 </td>
                                 <td class="option">
                                     <div class="option">
-                                        <button class="form-button edit" @click="clickOption(articleInfo, 1)">编辑</button>
-                                        <button class="form-button stop" @click="clickOption(articleInfo, 2)">{{ articleInfo.status === 1 ? '停用':'启用' }}</button>
+                                        <button class="form-button stop" @click="clickOption(articleInfo, 2)">{{ articleInfo.status === 1 ? '保存草稿箱':'发布' }}</button>
+                                        <button class="form-button edit" @click="clickOption(articleInfo, 1)">编辑</button><br>
                                         <button class="form-button search" @click="clickOption(articleInfo, 3)">查看</button>
                                         <button class="form-button delete" @click="clickOption(articleInfo, 4)">删除</button>
                                     </div>
@@ -151,10 +184,9 @@
 <!-- 引入底部 -->
 <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="@{/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>
+<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>
 </body>
 </html>

src/main/resources/templates/supplier-center/components/tableft.html

@@ -20,13 +20,13 @@
         </div>
     </div>
     <div class="navList">
-        <span class="tab">文章管理</span>
+        <span class="tab">采美文章</span>
         <div class="con" style="display:none">
-            <a href="/supplier/article/list.html">文章列表</a>
+            <a href="/supplier/article/list.html">文章管理</a>
         </div>
     </div>
     <div class="navList">
-        <span class="tab">百科文库</span>
+        <span class="tab">采美百科</span>
         <div class="con" style="display:none">
             <a href="/supplier/encyclopedia/product-list.html">产品</a>
             <a href="/supplier/encyclopedia/instrument-list.html">仪器</a>

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

@@ -2,7 +2,7 @@
 <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>
+    <title>采美365网-采美百科-仪器</title>
     <template th:replace="components/head-link"></template>
     <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">
@@ -23,32 +23,35 @@
         <div class="crumbs" v-if="isPC">
             <span>我的采美</span>
             <span>&gt;</span>
-            <span>百科文库</span>
+            <span>采美百科</span>
             <span>&gt;</span>
-            <span>添加仪器百科</span>
+            <span>仪器</span>
         </div>
         <div class="wrap clear">
             <!--左侧导航-->
             <template th:replace="supplier-center/components/tableft"></template>
             <div class="right-box right">
                 <div class="row">
-                    <div class="top-tip">温馨提示：发布百科文章有利于曝光您的店铺商品，更有利于客户对产品与仪器有更深的认识度，提高成交率<br />发布并且审核通过后，可在采美百科搜索您的百科文章</div>
+                    <div class="top-tip">温馨提示：发布采美百科有利于曝光您的店铺商品，更有利于客户对产品与仪器有更深的认识度，提高成交率。<br>（注意：发布并且审核通过后，可在采美百科搜索您的仪器）</div>
                     <!-- 带验证的表单 -->
                     <div class="valide-form">
                         <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">
                                 <el-input v-model="formData.name" placeholder="请输入仪器名称"></el-input>
                             </el-form-item>
-                            <el-form-item label="仪器别名" prop="alias">
+                            <el-form-item label="仪器别名（必填）" prop="alias">
                                 <el-input v-model="formData.alias" placeholder="请输入英文名或其他名称"></el-input>
                             </el-form-item>
-                            <el-form-item label="仪器概述" prop="discription">
+                            <el-form-item label="仪器概述（必填）" prop="discription">
                                 <el-input v-model="formData.discription" type="textarea" placeholder="请输入仪器概述"
                                           :rows="5"></el-input>
                             </el-form-item>
-                            <el-form-item label="仪器图片" prop="image">
+                            <el-form-item label="仪器链接（必填）" prop="productLink">
+                                <el-input v-model="formData.productLink" placeholder="输入您采美商城的商品链接详情，便于用户精准找到"></el-input>
+                            </el-form-item>
+                            <el-form-item label="仪器图片（必传）" prop="image">
                                 <el-input v-model="formData.image" v-show="false"></el-input>
                                 <el-upload
                                         class="cover-uploader"
@@ -61,9 +64,30 @@
                                 >
                                     <img v-if="formData.image" :src="formData.image" class="cover"/>
                                     <i v-else class="el-icon-plus cover-uploader-icon"></i>
+                                    <div slot="tip" class="el-upload__tip">建议图片尺寸210px*210px，并上传白底图片</div>
                                 </el-upload>
                             </el-form-item>
 
+                            <!-- 仪器参数 -->
+                            <el-form-item label="仪器参数（必填，至少两项）" prop="paramList" class="cm-big-label-el">
+                                <el-input v-model="formData.paramList" v-show="false"></el-input>
+                                <div class="form-params-group">
+                                    <span class="add-one" @click="addParam">添加参数</span>
+                                    <el-row class="form-params-group-row" :gutter="8"
+                                            v-for="(param, index) in paramEmptyList" :key="index">
+                                        <el-col :span="8">
+                                            <el-input v-model="param.name" :placeholder="param.p1"></el-input>
+                                        </el-col>
+                                        <el-col :span="16">
+                                            <el-input v-model="param.content" :placeholder="param.p2"></el-input>
+                                        </el-col>
+                                        <span class="remove" v-if="paramEmptyList.length > minLimitParams"
+                                              @click="removeParam(index)"
+                                        >&times;</span>
+                                    </el-row>
+                                </div>
+                            </el-form-item>
+
                             <!-- 正品识别 -->
                             <div class="cm-big-label"><span class="cm-label">正品识别</span></div>
                             <el-form-item label="认证链接" prop="authLink">
@@ -82,30 +106,10 @@
                                 >
                                     <img v-if="formData.authQrCode" :src="formData.authQrCode" class="cover"/>
                                     <i v-else class="el-icon-plus cover-uploader-icon"></i>
+                                    <div slot="tip" class="el-upload__tip">建议图片尺寸210px*210px，并上传白底图片</div>
                                 </el-upload>
                             </el-form-item>
 
-                            <!-- 仪器参数 -->
-                            <el-form-item label="仪器参数" prop="paramList" class="cm-big-label-el">
-                                <el-input v-model="formData.paramList" v-show="false"></el-input>
-                                <div class="form-params-group">
-                                    <span class="add-one" @click="addParam">添加参数</span>
-                                    <el-row class="form-params-group-row" :gutter="8"
-                                            v-for="(param, index) in paramEmptyList" :key="index">
-                                        <el-col :span="8">
-                                            <el-input v-model="param.name" :placeholder="param.p1"></el-input>
-                                        </el-col>
-                                        <el-col :span="16">
-                                            <el-input v-model="param.content" :placeholder="param.p2"></el-input>
-                                        </el-col>
-                                        <span class="remove" v-if="paramEmptyList.length > minLimitParams"
-                                              @click="removeParam(index)"
-                                        >&times;</span
-                                        >
-                                    </el-row>
-                                </div>
-                            </el-form-item>
-
                             <!-- 仪器优点 -->
                             <el-form-item label="仪器优点" prop="advantage" class="cm-big-label-el">
                                 <el-input v-model="formData.advantage" v-show="false"></el-input>
@@ -124,6 +128,11 @@
                                 <editor v-model="formData.principle" placeholder="请输入仪器原理"></editor>
                             </el-form-item>
 
+                            <!-- SEO关键词 -->
+                            <el-form-item label="SEO关键字" prop="seo">
+                                <el-input v-model="formData.seoKeyword" placeholder="例如：名称,名称"></el-input>
+                            </el-form-item>
+
                             <!-- 仪器档案 -->
                             <div class="cm-big-label"><span class="cm-label">仪器档案</span></div>
                             <el-form-item label="品牌" prop="brand">
@@ -133,17 +142,27 @@
                                 <el-input v-model="formData.producePlace" placeholder="请输入仪器产地"></el-input>
                             </el-form-item>
                             <el-form-item label="上市时间" prop="marketTime">
-                                <el-date-picker class="max-width" v-model="formData.marketTime" type="date"
+                                <el-date-picker class="max-width" v-model="formData.marketTime" :type="marketTimeType"
                                                 placeholder="上市时间">
                                 </el-date-picker>
+                                <el-radio-group v-model="marketTimeType" class="max-width">
+                                    <el-radio label="year">年</el-radio>
+                                    <el-radio label="month">年/月</el-radio>
+                                    <el-radio label="date">年/月/日</el-radio>
+                                </el-radio-group>
                             </el-form-item>
-                            <el-form-item label="公司/厂商" prop="company">
-                                <el-input v-model="formData.company" placeholder="请输入公司/厂商"></el-input>
+                            <el-form-item label="供应商" prop="company">
+                                <el-input v-model="formData.company" placeholder="请输入供应商"></el-input>
                             </el-form-item>
                             <el-form-item label="NMPA认证时间" prop="nmpaTime">
-                                <el-date-picker class="max-width" v-model="formData.nmpaTime" type="date"
+                                <el-date-picker class="max-width" v-model="formData.nmpaTime" :type="nmpaTimeType"
                                                 placeholder="NMPA认证时间">
                                 </el-date-picker>
+                                <el-radio-group v-model="nmpaTimeType" class="max-width">
+                                    <el-radio label="year">年</el-radio>
+                                    <el-radio label="month">年/月</el-radio>
+                                    <el-radio label="date">年/月/日</el-radio>
+                                </el-radio-group>
                             </el-form-item>
                             <el-form-item label="仪器认证" prop="authImageList">
                                 <el-input v-model="formData.authImageList" v-show="false"></el-input>
@@ -158,13 +177,14 @@
                                         :limit="4"
                                 >
                                     <i class="el-icon-plus"></i>
+                                    <div slot="tip" class="el-upload__tip">建议图片尺寸210px*210px，并上传白底图片</div>
                                 </el-upload>
                             </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">
                                 <el-input v-model="formData.adaptiveMan" v-show="false"></el-input>
-                                <editor v-model="formData.adaptiveMan" placeholder="请输入适应人群"></editor>
+                                <editor v-model="formData.adaptiveMan" placeholder="请输入适应症"></editor>
                             </el-form-item>
 
                             <!-- 不适应人群 -->
@@ -173,13 +193,13 @@
                                 <editor v-model="formData.unAdaptiveMan" placeholder="请输入不适应人群"></editor>
                             </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">
                                 <el-input v-model="formData.aroundOperation" v-show="false"></el-input>
-                                <editor v-model="formData.aroundOperation" placeholder="请输入术前术后"></editor>
+                                <editor v-model="formData.aroundOperation" placeholder="请输入注意事项"></editor>
                             </el-form-item>
 
-                            <!-- 效果展示 -->
+                            <!-- 效果展示
                             <el-form-item label="效果展示" prop="displayImageList" class="cm-big-label-el">
                                 <el-input v-model="formData.displayImageList" v-show="false"></el-input>
                                 <el-upload
@@ -195,6 +215,7 @@
                                     <i class="el-icon-plus"></i>
                                 </el-upload>
                             </el-form-item>
+                            -->
 
                             <!-- 常见问题 -->
                             <el-form-item label="常见问题" prop="questionList" class="cm-big-label-el">
@@ -202,9 +223,9 @@
                                 <div class="form-question-group">
                                     <span class="add-one" @click="addQuestion">添加问答</span>
                                     <div class="form-question-group-row" v-for="(item, index) in questionEmptyList">
-                                        <div class="cm-label"><em>*</em>问题{{ index + 1}}:</div>
+                                        <div class="cm-label"><!--<em>*</em>-->问题{{ index + 1}}:</div>
                                         <el-input placeholder="请输入问题内容" v-model="item.question"></el-input>
-                                        <div class="cm-label"><em>*</em>答:</div>
+                                        <div class="cm-label"><!--<em>*</em>-->答:</div>
                                         <el-input type="textarea" v-model="item.answer" placeholder="请输入问题解答内容"
                                                   :rows="4"></el-input>
                                         <span class="remove" v-if="questionEmptyList.length > minLimitQuestions"
@@ -223,10 +244,10 @@
                                 </el-select>
                             </el-form-item>
                             <el-form-item label="" prop="status" label-position="left">
-                                <span class="cm-label"><em>*</em>仪器状态:</span>
+                                <span class="cm-label"><!--<em>*</em>-->仪器状态:</span>
                                 <el-radio-group v-model="formData.status">
-                                    <el-radio :label="1">启用</el-radio>
-                                    <el-radio :label="0">停用</el-radio>
+                                    <el-radio :label="1">发布</el-radio>
+                                    <el-radio :label="0">保存草稿箱</el-radio>
                                 </el-radio-group>
                             </el-form-item>
                         </el-form>

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

@@ -2,10 +2,12 @@
 <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>
+    <title>采美365网-采美百科-仪器</title>
     <template th:replace="components/head-link"></template>
     <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">
+    <!--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 th:href="@{/css/supplier-center/encyclopedia/article-list.css(v=${version})}" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
@@ -20,11 +22,10 @@
             <div class="crumbs">
                 <span>我的采美</span>
                 <span>&gt;</span>
-                <span>百科文库</span>
+                <span>采美百科</span>
                 <span>&gt;</span>
-                <span>仪器百科列表</span>
+                <span>仪器</span>
             </div>
-            <div class="hot-tip">温馨提示：多发布文章，有利于曝光您的店铺仪器，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>
         </div>
         <div class="wrap clear">
             <!--左侧导航-->
@@ -32,38 +33,62 @@
             <div class="right">
                 <!--筛选-->
                 <div class="row">
-                    <div class="form-section">
-                        <div class="form-item">
-                            <label for="productId" class="form-label">仪器ID:</label>
-                            <input id="productId" class="form-control" v-model="listQuery.productId" type="text" placeholder="请输入仪器ID"/>
+                    <div class="hot-tip">温馨提示：发布采美百科有利于曝光您的店铺商品，更有利于客户对产品与仪器有更深的认识度，提高成交率。（注意：发布并且审核通过后，可在采美百科搜索您的仪器）</div>
+                    <div class="filter-container">
+                        <!--仪器ID-->
+                        <div class="filter-control">
+                            <span class="label">仪器ID：</span>
+                            <el-input class="control" v-model="listQuery.productId" placeholder="请输入仪器ID" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="productTitle" class="form-label">仪器名称:</label>
-                            <input id="productTitle" class="form-control" v-model="listQuery.name" type="text" placeholder="请输入仪器名称"/>
+                        <!--仪器名称-->
+                        <div class="filter-control">
+                            <span class="label">仪器名称：</span>
+                            <el-input class="control" v-model="listQuery.name" placeholder="请输入仪器名称" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="productCate" class="form-label">仪器分类:</label>
-                            <select id="productCate" class="form-control form-select" v-model="listQuery.typeId" @change="getArticleList">
-                                <option value="">请选择</option>
+                        <!--仪器分类-->
+                        <div class="filter-control">
+                            <span class="label">仪器分类：</span>
+                            <el-select v-model="listQuery.typeId" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
                                 <template v-for="(typeInfo, index) in productTypeList">
-                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
+                                    <el-option :key="index" :label="typeInfo.typeName" :value="typeInfo.typeId"></el-option>
                                 </template>
-                            </select>
+                            </el-select>
                         </div>
-                        <div class="form-item">
-                            <label for="productStatus" class="form-label">审核状态:</label>
-                            <select id="productStatus" class="form-control form-select" v-model="listQuery.auditStatus"  @change="handleSearchList">
-                                <option value="">全部</option>
-                                <option value="1">待审核</option>
-                                <option value="2">审核通过</option>
-                                <option value="3">审核未通过</option>
-                            </select>
+                        <!--审核状态-->
+                        <div class="filter-control">
+                            <span class="label">审核状态：</span>
+                            <el-select v-model="listQuery.auditStatus" @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待审核" :value="1"></el-option>
+                                <el-option label="审核通过" :value="2"></el-option>
+                                <el-option label="审核未通过" :value="3"></el-option>
+                            </el-select>
                         </div>
-                        <div class="form-item buttons">
+                        <!--上线状态-->
+                        <div class="filter-control">
+                            <span class="label">上线状态：</span>
+                            <el-select v-model="listQuery.onlineStatus" @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待上线" :value="1"></el-option>
+                                <el-option label="已上线" :value="2"></el-option>
+                                <el-option label="已下线" :value="3"></el-option>
+                            </el-select>
+                        </div>
+                        <!--状态-->
+                        <div class="filter-control">
+                            <span class="label">状态：</span>
+                            <el-select v-model="listQuery.status" @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="已发布" :value="1"></el-option>
+                                <el-option label="保存草稿箱" :value="0"></el-option>
+                            </el-select>
+                        </div>
+                        <!--筛选按钮-->
+                        <div class="filter-control">
                             <button class="form-button search" type="button" @click="handleSearchList">搜索</button>
                             <button class="form-button add" type="button" @click="handleAddArticle">添加</button>
                         </div>
-                        <div class="form-item"></div>
                     </div>
                 </div>
                 <!--列表表格-->
@@ -75,6 +100,7 @@
                             <th>仪器分类</th>
                             <th>阅读量</th>
                             <th>审核状态</th>
+                            <th>上线状态</th>
                             <th>发布时间</th>
                             <th>添加时间</th>
                             <th>状态</th>
@@ -94,6 +120,11 @@
                                     <span class="state danger" v-else>审核失败</span>
                                     <span class="reason" v-if="productInfo.auditStatus === 3" :title="'审核失败：' + productInfo.failReason">?</span>
                                 </td>
+                                <td>
+                                    <span class="state default" v-if="productInfo.onlineStatus === 1">待上线</span>
+                                    <span class="state success" v-if="productInfo.onlineStatus === 2">已上线</span>
+                                    <span class="state danger" v-if="productInfo.onlineStatus === 3">已下线</span>
+                                </td>
                                 <td class="time">
                                     <div class="time">{{ productInfo.publishTime | formatDate }}</div>
                                 </td>
@@ -101,13 +132,13 @@
                                     <div class="time">{{ productInfo.addTime | formatDate}}</div>
                                 </td>
                                 <td>
-                                    <span class="state primary" v-if="productInfo.status === 1">已启用</span>
-                                    <span class="state default" v-else>未启用</span>
+                                    <span class="state primary" v-if="productInfo.status === 1">已发布</span>
+                                    <span class="state danger" v-else>保存草稿箱</span>
                                 </td>
                                 <td class="option">
                                     <div class="option">
-                                        <button class="form-button edit" @click="clickOption(productInfo, 1)">编辑</button>
-                                        <button class="form-button stop" @click="clickOption(productInfo, 2)">{{ productInfo.status === 1 ? '停用':'启用' }}</button>
+                                        <button class="form-button stop" @click="clickOption(productInfo, 2)">{{ productInfo.status === 1 ? '保存草稿箱':'发布' }}</button>
+                                        <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>
                                     </div>
@@ -140,11 +171,9 @@
 <!-- 引入底部 -->
 <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="@{/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>
+<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>
 </body>
 </html>

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

@@ -2,7 +2,7 @@
 <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>
+    <title>采美365网-采美百科-产品</title>
     <template th:replace="components/head-link"></template>
     <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">
@@ -23,32 +23,35 @@
         <div class="crumbs" v-if="isPC">
             <span>我的采美</span>
             <span>&gt;</span>
-            <span>百科文库</span>
+            <span>采美百科</span>
             <span>&gt;</span>
-            <span>添加产品百科</span>
+            <span>产品</span>
         </div>
         <div class="wrap clear">
             <!--左侧导航-->
             <template th:replace="supplier-center/components/tableft"></template>
             <div class="right-box right">
                 <div class="row">
-                    <div class="top-tip">温馨提示：发布百科文章有利于曝光您的店铺商品，更有利于客户对产品与仪器有更深的认识度，提高成交率<br />发布并且审核通过后，可在采美百科搜索您的百科文章</div>
+                    <div class="top-tip">温馨提示：发布采美百科有利于曝光您的店铺商品，更有利于客户对产品与仪器有更深的认识度，提高成交率。<br>（注意：发布并且审核通过后，可在采美百科搜索您的产品）</div>
                     <!-- 带验证的表单 -->
                     <div class="valide-form">
                         <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">
                                 <el-input v-model="formData.name" placeholder="请输入产品名称"></el-input>
                             </el-form-item>
-                            <el-form-item label="产品别名" prop="alias">
+                            <el-form-item label="产品别名（必填）" prop="alias">
                                 <el-input v-model="formData.alias" placeholder="请输入英文名或其他名称"></el-input>
                             </el-form-item>
-                            <el-form-item label="产品概述" prop="discription">
+                            <el-form-item label="产品概述（必填）" prop="discription">
                                 <el-input v-model="formData.discription" type="textarea" placeholder="请输入产品概述"
                                           :rows="5"></el-input>
                             </el-form-item>
-                            <el-form-item label="产品图片" prop="image">
+                            <el-form-item label="产品链接（必填）" prop="productLink">
+                                <el-input v-model="formData.productLink" placeholder="输入您采美商城的商品链接详情，便于用户精准找到"></el-input>
+                            </el-form-item>
+                            <el-form-item label="产品图片（必传）" prop="image">
                                 <el-input v-model="formData.image" v-show="false"></el-input>
                                 <el-upload
                                         class="cover-uploader"
@@ -61,11 +64,12 @@
                                 >
                                     <img v-if="formData.image" :src="formData.image" class="cover"/>
                                     <i v-else class="el-icon-plus cover-uploader-icon"></i>
+                                    <div slot="tip" class="el-upload__tip">建议图片尺寸210px*210px，并上传白底图片</div>
                                 </el-upload>
                             </el-form-item>
 
                             <!-- 产品参数 -->
-                            <el-form-item label="产品参数" prop="paramList" class="cm-big-label-el">
+                            <el-form-item label="产品参数（必填，至少两项）" prop="paramList" class="cm-big-label-el">
                                 <el-input v-model="formData.paramList" v-show="false"></el-input>
                                 <div class="form-params-group">
                                     <span class="add-one" @click="addParam">添加参数</span>
@@ -103,6 +107,11 @@
                                 <editor v-model="formData.principle" placeholder="请输入产品原理"></editor>
                             </el-form-item>
 
+                            <!-- SEO关键词 -->
+                            <el-form-item label="SEO关键字" prop="seo">
+                                <el-input v-model="formData.seoKeyword" placeholder="例如：名称,名称"></el-input>
+                            </el-form-item>
+
                             <!-- 产品档案 -->
                             <div class="cm-big-label"><span class="cm-label">产品档案</span></div>
                             <el-form-item label="品牌" prop="brand">
@@ -112,17 +121,27 @@
                                 <el-input v-model="formData.producePlace" placeholder="请输入产品产地"></el-input>
                             </el-form-item>
                             <el-form-item label="上市时间" prop="marketTime">
-                                <el-date-picker class="max-width" v-model="formData.marketTime" type="date"
+                                <el-date-picker class="max-width" v-model="formData.marketTime" :type="marketTimeType"
                                                 placeholder="上市时间">
                                 </el-date-picker>
+                                <el-radio-group v-model="marketTimeType" class="max-width">
+                                    <el-radio label="year">年</el-radio>
+                                    <el-radio label="month">年/月</el-radio>
+                                    <el-radio label="date">年/月/日</el-radio>
+                                </el-radio-group>
                             </el-form-item>
-                            <el-form-item label="公司/厂商" prop="company">
-                                <el-input v-model="formData.company" placeholder="请输入公司/厂商"></el-input>
+                            <el-form-item label="供应商" prop="company">
+                                <el-input v-model="formData.company" placeholder="请输入供应商"></el-input>
                             </el-form-item>
                             <el-form-item label="NMPA认证时间" prop="nmpaTime">
-                                <el-date-picker class="max-width" v-model="formData.nmpaTime" type="date"
+                                <el-date-picker class="max-width" v-model="formData.nmpaTime" :type="nmpaTimeType"
                                                 placeholder="NMPA认证时间">
                                 </el-date-picker>
+                                <el-radio-group v-model="nmpaTimeType" class="max-width">
+                                    <el-radio label="year">年</el-radio>
+                                    <el-radio label="month">年/月</el-radio>
+                                    <el-radio label="date">年/月/日</el-radio>
+                                </el-radio-group>
                             </el-form-item>
                             <el-form-item label="产品认证" prop="authImageList">
                                 <el-input v-model="formData.authImageList" v-show="false"></el-input>
@@ -137,13 +156,14 @@
                                         :limit="4"
                                 >
                                     <i class="el-icon-plus"></i>
+                                    <div slot="tip" class="el-upload__tip">建议图片尺寸210px*210px，并上传白底图片</div>
                                 </el-upload>
                             </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">
                                 <el-input v-model="formData.adaptiveMan" v-show="false"></el-input>
-                                <editor v-model="formData.adaptiveMan" placeholder="请输入适应人群"></editor>
+                                <editor v-model="formData.adaptiveMan" placeholder="请输入适应证"></editor>
                             </el-form-item>
 
                             <!-- 不适应人群 -->
@@ -152,27 +172,10 @@
                                 <editor v-model="formData.unAdaptiveMan" placeholder="请输入不适应人群"></editor>
                             </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">
                                 <el-input v-model="formData.aroundOperation" v-show="false"></el-input>
-                                <editor v-model="formData.aroundOperation" placeholder="请输入术前术后"></editor>
-                            </el-form-item>
-
-                            <!-- 效果展示 -->
-                            <el-form-item label="效果展示" prop="displayImageList" class="cm-big-label-el">
-                                <el-input v-model="formData.displayImageList" v-show="false"></el-input>
-                                <el-upload
-                                        :class="{ 'hide-upload': displayImageList.length >= 8 }"
-                                        :action="action"
-                                        list-type="picture-card"
-                                        :on-preview="handlePictureCardPreview"
-                                        :on-remove="handleDisplayImageRemove"
-                                        :on-success="handleDisplayImageSuccess"
-                                        :file-list="displayImageList"
-                                        :limit="8"
-                                >
-                                    <i class="el-icon-plus"></i>
-                                </el-upload>
+                                <editor v-model="formData.aroundOperation" placeholder="请输入注意事项"></editor>
                             </el-form-item>
 
                             <!-- 常见问题 -->
@@ -181,9 +184,9 @@
                                 <div class="form-question-group">
                                     <span class="add-one" @click="addQuestion">添加问答</span>
                                     <div class="form-question-group-row" v-for="(item, index) in questionEmptyList">
-                                        <div class="cm-label"><em>*</em>问题{{ index + 1}}:</div>
+                                        <div class="cm-label"><!--<em>*</em>-->问题{{ index + 1}}:</div>
                                         <el-input placeholder="请输入问题内容" v-model="item.question"></el-input>
-                                        <div class="cm-label"><em>*</em>答:</div>
+                                        <div class="cm-label"><!--<em>*</em>-->答:</div>
                                         <el-input type="textarea" v-model="item.answer" placeholder="请输入问题解答内容"
                                                   :rows="4"></el-input>
                                         <span class="remove" v-if="questionEmptyList.length > minLimitQuestions"
@@ -194,7 +197,7 @@
                                 </div>
                             </el-form-item>
 
-                            <el-form-item label="产品类别" prop="typeId" class="cm-big-label-el">
+                            <el-form-item label="产品类别" prop="typeId" class="cm-big-label-el" props="typeId">
                                 <el-select class="max-width" v-model="formData.typeId" placeholder="请选择产品类别">
                                     <el-option v-for="item in typeList" :key="item.typeId" :label="item.typeName"
                                                :value="item.typeId">
@@ -202,10 +205,10 @@
                                 </el-select>
                             </el-form-item>
                             <el-form-item label="" prop="status" label-position="left">
-                                <span class="cm-label"><em>*</em>产品状态:</span>
+                                <span class="cm-label"><!--<em>*</em>-->产品状态:</span>
                                 <el-radio-group v-model="formData.status">
-                                    <el-radio :label="1">启用</el-radio>
-                                    <el-radio :label="0">停用</el-radio>
+                                    <el-radio :label="1">发布</el-radio>
+                                    <el-radio :label="0">保存草稿箱</el-radio>
                                 </el-radio-group>
                             </el-form-item>
                         </el-form>

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

@@ -2,10 +2,12 @@
 <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>
+    <title>采美365网-采美百科-产品</title>
     <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 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/encyclopedia/article-list.css(v=${version})}" rel="stylesheet" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
@@ -20,11 +22,10 @@
             <div class="crumbs">
                 <span>我的采美</span>
                 <span>&gt;</span>
-                <span>百科文库</span>
+                <span>采美百科</span>
                 <span>&gt;</span>
-                <span>产品百科列表</span>
+                <span>产品</span>
             </div>
-            <div class="hot-tip">温馨提示：多发布文章，有利于曝光您的店铺产品，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>
         </div>
         <div class="wrap clear">
             <!--左侧导航-->
@@ -32,38 +33,62 @@
             <div class="right">
                 <!--筛选-->
                 <div class="row">
-                    <div class="form-section">
-                        <div class="form-item">
-                            <label for="productId" class="form-label">产品ID:</label>
-                            <input id="productId" class="form-control" v-model="listQuery.productId" type="text" placeholder="请输入产品ID"/>
+                    <div class="hot-tip">温馨提示：发布采美百科有利于曝光您的店铺商品，更有利于客户对产品与仪器有更深的认识度，提高成交率。（注意：发布并且审核通过后，可在采美百科搜索您的产品）</div>
+                    <div class="filter-container">
+                        <!--产品ID-->
+                        <div class="filter-control">
+                            <span class="label">产品ID：</span>
+                            <el-input class="control" v-model="listQuery.productId" placeholder="请输入产品ID" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="productTitle" class="form-label">产品名称:</label>
-                            <input id="productTitle" class="form-control" v-model="listQuery.name" type="text" placeholder="请输入产品名称"/>
+                        <!--产品名称-->
+                        <div class="filter-control">
+                            <span class="label">产品名称：</span>
+                            <el-input class="control" v-model="listQuery.name" placeholder="请输入产品名称" clearable></el-input>
                         </div>
-                        <div class="form-item">
-                            <label for="productCate" class="form-label">产品分类:</label>
-                            <select id="productCate" class="form-control form-select" v-model="listQuery.typeId" @change="getArticleList">
-                                <option value="">请选择</option>
+                        <!--产品分类-->
+                        <div class="filter-control">
+                            <span class="label">产品分类：</span>
+                            <el-select v-model="listQuery.typeId" @change="getArticleList" clearable>
+                                <el-option label="全部" value=""></el-option>
                                 <template v-for="(typeInfo, index) in productTypeList">
-                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
+                                    <el-option :key="index" :label="typeInfo.typeName" :value="typeInfo.typeId"></el-option>
                                 </template>
-                            </select>
+                            </el-select>
                         </div>
-                        <div class="form-item">
-                            <label for="productStatus" class="form-label">审核状态:</label>
-                            <select id="productStatus" class="form-control form-select" v-model="listQuery.auditStatus"  @change="handleSearchList">
-                                <option value="">全部</option>
-                                <option value="1">待审核</option>
-                                <option value="2">审核通过</option>
-                                <option value="3">审核未通过</option>
-                            </select>
+                        <!--审核状态-->
+                        <div class="filter-control">
+                            <span class="label">审核状态：</span>
+                            <el-select v-model="listQuery.auditStatus" @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待审核" :value="1"></el-option>
+                                <el-option label="审核通过" :value="2"></el-option>
+                                <el-option label="审核未通过" :value="3"></el-option>
+                            </el-select>
                         </div>
-                        <div class="form-item buttons">
+                        <!--上线状态-->
+                        <div class="filter-control">
+                            <span class="label">上线状态：</span>
+                            <el-select v-model="listQuery.onlineStatus"  @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="待上线" :value="1"></el-option>
+                                <el-option label="已上线" :value="2"></el-option>
+                                <el-option label="已下线" :value="3"></el-option>
+                            </el-select>
+                        </div>
+                        <!--状态-->
+                        <div class="filter-control">
+                            <span class="label">状态：</span>
+                            <el-select v-model="listQuery.status"  @change="getArticleList" class="mini-width" clearable>
+                                <el-option label="全部" value=""></el-option>
+                                <el-option label="已发布" :value="1"></el-option>
+                                <el-option label="保存草稿箱" :value="0"></el-option>
+                            </el-select>
+                        </div>
+                        <!--筛选按钮-->
+                        <div class="filter-control">
                             <button class="form-button search" type="button" @click="handleSearchList">搜索</button>
                             <button class="form-button add" type="button" @click="handleAddArticle">添加</button>
                         </div>
-                        <div class="form-item"></div>
                     </div>
                 </div>
                 <!--列表表格-->
@@ -75,6 +100,7 @@
                             <th>产品分类</th>
                             <th>阅读量</th>
                             <th>审核状态</th>
+                            <th>上线状态</th>
                             <th>发布时间</th>
                             <th>添加时间</th>
                             <th>状态</th>
@@ -94,6 +120,11 @@
                                     <span class="state danger" v-else>审核失败</span>
                                     <span class="reason" v-if="productInfo.auditStatus === 3" :title="'审核失败：' + productInfo.failReason">?</span>
                                 </td>
+                                <td>
+                                    <span class="state default" v-if="productInfo.onlineStatus === 1">待上线</span>
+                                    <span class="state success" v-if="productInfo.onlineStatus === 2">已上线</span>
+                                    <span class="state danger" v-if="productInfo.onlineStatus === 3">已下线</span>
+                                </td>
                                 <td class="time">
                                     <div class="time">{{ productInfo.publishTime | formatDate }}</div>
                                 </td>
@@ -101,13 +132,13 @@
                                     <div class="time">{{ productInfo.addTime | formatDate}}</div>
                                 </td>
                                 <td>
-                                    <span class="state primary" v-if="productInfo.status === 1">已启用</span>
-                                    <span class="state default" v-else>未启用</span>
+                                    <span class="state primary" v-if="productInfo.status === 1">已发布</span>
+                                    <span class="state danger" v-else>保存草稿箱</span>
                                 </td>
                                 <td class="option">
                                     <div class="option">
-                                        <button class="form-button edit" @click="clickOption(productInfo, 1)">编辑</button>
-                                        <button class="form-button stop" @click="clickOption(productInfo, 2)">{{ productInfo.status === 1 ? '停用':'启用' }}</button>
+                                        <button class="form-button stop" @click="clickOption(productInfo, 2)">{{ productInfo.status === 1 ? '保存草稿箱':'发布' }}</button>
+                                        <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>
                                     </div>
@@ -140,11 +171,9 @@
 <!-- 引入底部 -->
 <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="@{/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>
+<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>
 </body>
 </html>