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

backup.sql

@@ -220,5 +220,119 @@ CREATE TABLE `cm_baike_product_question` (
     `productId` int DEFAULT NULL COMMENT '产品/仪器id',
     `question` varchar(150) COMMENT '问题',
     `answer` varchar(45) COMMENT '答案',
-    PRIMARY KEY (`id`))
+    PRIMARY KEY (`id`));
 -- =================================== 2021年11月 采美百科 end =====================================
+-- =================================== 2021年12月 小版本 start =====================================
+CREATE TABLE `cm_brand_course_file` (
+    `id` int NOT NULL AUTO_INCREMENT,
+    `title` varchar(300) NULL COMMENT '视频标题',
+    `name` varchar(300) NULL COMMENT '文件名称',
+    `ossName` varchar(300) NULL COMMENT 'oss名称',
+    `type` int NULL COMMENT '文件类型：1视频，2文档',
+    `module` VARCHAR(20) NULL COMMENT '文件模块id',
+    `createTime` datetime NULL COMMENT '创建时间',
+    PRIMARY KEY (`id`)
+) COMMENT='正品联盟教程文件';
+
+ALTER TABLE `cm_baike_product`
+    ADD COLUMN `publishSource` INT NULL DEFAULT 1 COMMENT '百科发布来源：1采美365网，2供应商' AFTER `commodityType`,
+    ADD COLUMN `shopId` INT NULL COMMENT '供应商id，publishSource为2时才有值' AFTER `publishSource`,
+    ADD COLUMN `auditStatus` INT NULL DEFAULT 2 COMMENT '百科审核状态：1待审核，2审核通过，3审核失败' AFTER `status`,
+    ADD COLUMN `failReason` TEXT NULL COMMENT '审核失败理由' AFTER `auditStatus`,
+    ADD COLUMN `delFlag` INT NULL DEFAULT 0 AFTER `addTime`;
+
+CREATE TABLE `cm_hehe_collage` (
+    `id` INT NOT NULL AUTO_INCREMENT,
+    `productId` INT NULL COMMENT '拼团商品id',
+    `price` DECIMAL(15,2) NULL COMMENT '拼团价',
+    `memberNum` INT NULL COMMENT '拼团人数',
+    `status` INT NULL COMMENT '拼团状态：0拼团中（拼主未支付），1拼团中，2已拼成，3已关闭',
+    `startTime` DATETIME NULL COMMENT '开始时间',
+    `completeTime` DATETIME NULL COMMENT '成团时间',
+    `endTime` DATETIME NULL COMMENT '结束时间',
+    `remarks` VARCHAR(100) NULL COMMENT '备注',
+    PRIMARY KEY (`id`))
+COMMENT = '呵呵商城拼团记录';
+
+CREATE TABLE `cm_hehe_collage_product` (
+    `id` INT NOT NULL AUTO_INCREMENT,
+    `productId` INT NULL COMMENT '商品id',
+    `price` DECIMAL(15,2) NULL COMMENT '拼团价格',
+    `limitedNum` INT NULL COMMENT '单人限购量',
+    `unlimitedFlag` INT NULL COMMENT '不限购买量标识：1不限制，0限制',
+    `memberNum` INT NULL COMMENT '拼团人数',
+    `status` INT NULL COMMENT '商品状态：0已下架，1已上架',
+    `addTime` DATETIME NULL COMMENT '添加时间',
+    PRIMARY KEY (`id`))
+COMMENT = '呵呵商城拼团商品';
+
+CREATE TABLE `cm_hehe_collage_member` (
+    `id` INT NOT NULL AUTO_INCREMENT,
+    `collageId` INT NULL COMMENT '拼团id',
+    `userId` INT NULL COMMENT '用户id',
+    `orderId` INT NULL COMMENT '订单id',
+    `launchFlag` INT NULL COMMENT '拼主标识：0不是，1是',
+    PRIMARY KEY (`id`))
+COMMENT = '呵呵商城拼团成员表';
+
+
+CREATE TABLE `cm_hehe_reduction` (
+    `id` INT NOT NULL AUTO_INCREMENT,
+    `name` VARCHAR(30) NULL COMMENT '活动名称',
+    `reducedAmount` DECIMAL(15,2) NULL COMMENT '减免金额',
+    `touchPrice` DECIMAL(15,2) NULL COMMENT '减免条件',
+    `shareNum` INT NULL COMMENT '分享次数',
+    `startTime` DATETIME NULL COMMENT '上架时间',
+    `endTime` DATETIME NULL COMMENT '下架时间',
+    `addTime` DATETIME NULL COMMENT '添加时间',
+    PRIMARY KEY (`id`))
+COMMENT = '呵呵商城分享减免活动';
+
+CREATE TABLE `cm_hehe_reduction_user` (
+    `id` INT NOT NULL AUTO_INCREMENT,
+    `userId` INT NULL COMMENT '呵呵商城用户id',
+    `reductionId` INT NULL COMMENT '分享减免id',
+    `shareType` INT NULL COMMENT '分享渠道：1微信好友，2微信朋友圈',
+    `shareTime` DATETIME NULL COMMENT '分享时间',
+    `touchPrice` DECIMAL(15,2) NULL COMMENT '减免条件',
+    `reductionAmount` DECIMAL(15,2) NULL COMMENT '减免金额',
+    `orderId` INT NULL COMMENT '使用该减免的订单id',
+    PRIMARY KEY (`id`))
+COMMENT = '呵呵商城分享减免用户记录';
+
+ALTER TABLE `cm_order`
+    ADD COLUMN `reductionAmount` DECIMAL(15,2) NULL DEFAULT 0.00 COMMENT '分享减免金额（呵呵）' AFTER `orderSeen`;
+
+INSERT INTO `cm_sms_statistics` (`markId`, `sendNum`, `onClick`, `description`) VALUES ('15', '0', '0', '呵呵活动券生效');
+INSERT INTO `cm_sms_statistics` (`markId`, `sendNum`, `onClick`, `description`) VALUES ('16', '0', '0', '呵呵专享券生效');
+INSERT INTO `cm_sms_statistics` (`markId`, `sendNum`, `onClick`, `description`) VALUES ('17', '0', '0', '呵呵新人券生效');
+INSERT INTO `cm_sms_statistics` (`markId`, `sendNum`, `onClick`, `description`) VALUES ('18', '0', '0', '呵呵邀请券生效');
+INSERT INTO `cm_sms_statistics` (`markId`, `sendNum`, `onClick`, `description`) VALUES ('19', '0', '0', '呵呵消费券生效');
+INSERT INTO `cm_sms_statistics` (`markId`, `sendNum`, `onClick`, `description`) VALUES ('20', '0', '0', '呵呵优惠券7天后失效未使用');
+INSERT INTO `cm_sms_statistics` (`markId`, `sendNum`, `onClick`, `description`) VALUES ('21', '0', '0', '呵呵优惠券当天失效未使用');
+INSERT INTO `cm_sms_statistics` (`markId`, `sendNum`, `onClick`, `description`) VALUES ('22', '0', '0', '呵呵优惠券7天后失效未领取');
+
+
+ALTER TABLE `cm_baike_product`
+    CHANGE COLUMN `name` `name` TEXT NULL DEFAULT NULL COMMENT '名称' ,
+    CHANGE COLUMN `alias` `alias` TEXT NULL DEFAULT NULL COMMENT '别名' ,
+    CHANGE COLUMN `discription` `discription` TEXT NULL DEFAULT NULL COMMENT '描述' ,
+    CHANGE COLUMN `seoKeyword` `seoKeyword` TEXT NULL DEFAULT NULL COMMENT 'seo关键词' ,
+    CHANGE COLUMN `advantage` `advantage` TEXT NULL DEFAULT NULL COMMENT '优点' ,
+    CHANGE COLUMN `disadvantage` `disadvantage` TEXT NULL DEFAULT NULL COMMENT '缺点' ,
+    CHANGE COLUMN `principle` `principle` TEXT NULL DEFAULT NULL COMMENT '原理' ,
+    CHANGE COLUMN `brand` `brand` TEXT NULL DEFAULT NULL COMMENT '品牌' ,
+    CHANGE COLUMN `producePlace` `producePlace` TEXT NULL DEFAULT NULL COMMENT '产地' ,
+    CHANGE COLUMN `company` `company` TEXT NULL DEFAULT NULL COMMENT '公司/供应商' ,
+    CHANGE COLUMN `adaptiveMan` `adaptiveMan` TEXT NULL DEFAULT NULL COMMENT '适应人群' ,
+    CHANGE COLUMN `unAdaptiveMan` `unAdaptiveMan` TEXT NULL DEFAULT NULL COMMENT '不适应人群' ,
+    CHANGE COLUMN `aroundOperation` `aroundOperation` TEXT NULL DEFAULT NULL COMMENT '术前术后' ;
+
+ALTER TABLE `cm_baike_product_param`
+    CHANGE COLUMN `name` `name` TEXT NULL DEFAULT NULL COMMENT '参数名称' ,
+    CHANGE COLUMN `content` `content` TEXT NULL DEFAULT NULL COMMENT '参数内容' ;
+
+ALTER TABLE `cm_baike_product_question`
+    CHANGE COLUMN `question` `question` TEXT NULL DEFAULT NULL COMMENT '问题' ,
+    CHANGE COLUMN `answer` `answer` TEXT NULL DEFAULT NULL COMMENT '答案' ;
+-- =================================== 2021年12月 小版本 end =====================================

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

@@ -66,6 +66,14 @@ public class SupplierPageController extends BaseController {
     private static final String ARTICLE_LIST = "supplier-center/article/article-list";
     /** 供应商文章编辑页面 */
     private static final String ARTICLE_EDIT = "supplier-center/article/article-edit";
+    /** 供应商采美百科商品资料列表页面 */
+    private static final String ENCYCLOPEDIA_PRODUCT_LIST = "supplier-center/encyclopedia/product-list";
+    /** 供应商采美百科仪器资料列表页面 */
+    private static final String ENCYCLOPEDIA_INSTRUMENT_LIST = "supplier-center/encyclopedia/instrument-list";
+    /** 供应商采美百科商品资料编辑页面 */
+    private static final String ENCYCLOPEDIA_PRODUCT_EDIT = "supplier-center/encyclopedia/product-edit";
+    /** 供应商采美百仪器资料编辑页面 */
+    private static final String ENCYCLOPEDIA_INSTRUMENT_EDIT = "supplier-center/encyclopedia/instrument-edit";
 
 
     /** 我的采美 */
@@ -226,4 +234,29 @@ public class SupplierPageController extends BaseController {
     public String supplierArticleEdit() {
         return ARTICLE_EDIT;
     }
+
+    /** 供应商采美百科商品列表页面 */
+    @GetMapping("/supplier/encyclopedia/product-list.html")
+    public String getEncyclopediaProductList() {
+        return ENCYCLOPEDIA_PRODUCT_LIST;
+    }
+
+    /** 供应商采美百科仪器列表页面 */
+    @GetMapping("/supplier/encyclopedia/instrument-list.html")
+    public String getEncyclopediaInstrumentList() {
+        return ENCYCLOPEDIA_INSTRUMENT_LIST;
+    }
+
+    /** 供应商采美百科商品编辑页面 */
+    @GetMapping("/supplier/encyclopedia/product-edit.html")
+    public String getEncyclopediaProductEdit() {
+        return ENCYCLOPEDIA_PRODUCT_EDIT;
+    }
+
+    /** 供应商采美百科仪器编辑页面 */
+    @GetMapping("/supplier/encyclopedia/instrument-edit.html")
+    public String getEncyclopediaInstrumentEdit() {
+        return ENCYCLOPEDIA_INSTRUMENT_EDIT;
+    }
+
 }

src/main/java/com/caimei/www/controller/unlimited/ProductController.java

@@ -32,7 +32,9 @@ public class ProductController extends BaseController {
     private static final String INSTRUMENT_PAGE_PATH = "product/instrument";
     private static final String TEMPORARY_PAGE_PATH = "product/temporary";
     private static final String INSTRUMENT_LIST_PATH = "product/instruelist";
-    private static final String QUALITY_AUTHORRIZE_PATH = "product/qualityauthorize";
+    // private static final String QUALITY_AUTHORRIZE_PATH = "product/qualityauthorize";
+    /** 新正品联盟页面 */
+    private static final String QUALITY_AUTHORRIZE_PATH = "product/alliance-page";
     private static final String ACTIVITY_TOP_PATH = "activity/activityTopic";
     private static final String CLOUD_BEAUTY_PATH = "activity/beautyTopic";
     private static final String ACTIVITY_COUPON_EXP = "activity/couponExp";

src/main/java/com/caimei/www/mapper/ProductDao.java

@@ -72,9 +72,4 @@ public interface ProductDao {
      * 修复商品图片（临时）
      */
     List<String> getProductInfo();
-
-    /**
-     * 查询采美百科产品/仪器详情数据
-     */
-    BaikeProduct getBaikeProductDetail(Integer productId);
 }

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

@@ -53,7 +53,7 @@ logging:
 # 服务域名
 caimei:
   siteEnv: 0 #网站环境，（2：正式环境，1：测试环境，0：开发环境）
-  spiServer: http://192.168.2.68:8008
+  #spiServer: http://192.168.2.68:8008
   coreServer: https://core-b.caimei365.com
   #coreServer: http://192.168.2.68:18002
   #coreServer: http://192.168.2.75:18002

src/main/resources/mapper/ProductMapper.xml

@@ -125,36 +125,5 @@
     <select id="getProductInfo" resultType="java.lang.String">
         select detailinfo from productdetailinfo where detailinfo like '%img-b.caimei365.com%'
 	</select>
-    <select id="getBaikeProductDetail" resultType="com.caimei.www.pojo.baike.BaikeProduct">
-		select a.id              AS "id",
-			   a.commodityType   AS "commodityType",
-			   a.name            AS "name",
-			   a.alias           AS "alias",
-			   a.discription     AS "discription",
-			   a.image           AS "image",
-			   a.advantage       AS "advantage",
-			   a.disadvantage    AS "disadvantage",
-			   a.principle       AS "principle",
-			   a.brand           AS "brand",
-			   a.producePlace    AS "producePlace",
-			   a.marketTime      AS "marketTime",
-			   a.company         AS "company",
-			   a.nmpaTime        AS "nmpaTime",
-			   a.adaptiveMan     AS "adaptiveMan",
-			   a.unAdaptiveMan   AS "unAdaptiveMan",
-			   a.aroundOperation AS "aroundOperation",
-			   a.publishTime     AS "publishTime",
-			   a.basePv          AS "basePv",
-			   a.actualPv        AS "actualPv",
-			   a.typeId          AS "typeId",
-			   a.topPosition     AS "topPosition",
-			   a.status          AS "status",
-			   a.addTime         AS "addTime",
-			   cbt.name          as "typeName"
-		from cm_baike_product a
-				 left join cm_baike_type cbt on a.typeId = cbt.id
-		where id = #{productId};
-
-	</select>
 
 </mapper>

src/main/resources/static/css/product/alliance-page.css

@@ -0,0 +1,123 @@
+html{width:100%}
+html::-webkit-scrollbar{width:8px;height:8px;background-color:#f8f8f8}
+html::-webkit-scrollbar-thumb{border-radius:4px;background:#b9b9b9}
+body{margin:0;color:#393939;background:#f8f8f8}
+h1,h2,p{margin:0}
+a{text-decoration:none}
+[v-cloak]{display:none}
+#zplm{position:relative}
+@media screen and (min-width:768px){body{padding-top:80px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.container{width:1184px;margin:0 auto}
+.zp-header{position:fixed;top:0;width:100%;z-index:99;background:-webkit-gradient(linear,right top,left top,from(#191919),to(#464646));background:-o-linear-gradient(right,#191919 0%,#464646 100%);background:linear-gradient(270deg,#191919 0%,#464646 100%)}
+.zp-header .container{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;height:80px}
+.zp-header h1 .name{font-size:0}
+.zp-main{min-height:84vh;overflow:hidden}
+.zp-main .zp-row{margin:16px auto;padding:24px;background:#fff;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.zp-main .zp-row:nth-child(1){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.zp-main .zp-img{position:relative;width:540px;height:540px;border:1px solid #ececec;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.zp-main .zp-img::after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:3}
+.zp-main .zp-img img{display:block}
+.zp-main .zp-img .zp-cover-img{width:100%;height:100%}
+.zp-main .zp-img .zp-auth-logo,.zp-main .zp-img .zp-auth-sign,.zp-main .zp-img .zp-auth-card{position:absolute}
+.zp-main .zp-img .zp-auth-logo{max-width:120px;max-height:120px;top:24px;left:24px}
+.zp-main .zp-img .zp-auth-sign{right:24px;bottom:24px;width:70px;height:70px}
+.zp-main .zp-img .zp-auth-card{left:24px;bottom:24px;width:140px;height:110px;cursor:pointer;z-index:4}
+.zp-main .zp-info{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:24px}
+.zp-main .zp-info h2{font-size:20px;font-weight:bold;line-height:28px;width:100%;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}
+.zp-main .zp-info .content{position:relative;margin-top:24px}
+.zp-main .zp-info .content .zp-item{font-size:14px;line-height:24px;margin-bottom:8px}
+.zp-main .zp-info .content .zp-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;margin-bottom:8px}
+.zp-main .zp-info .content .zp-group .line{width:1px;height:14px;background:#949494;margin:0 16px}
+.zp-main .zp-info .content .zp-group .zp-brand,.zp-main .zp-info .content .zp-group .zp-origin{color:#949494;margin-bottom:0}
+.zp-main .zp-info .content .zp-agent{font-size:16px}
+.zp-main .zp-info .content .zp-click{position:absolute}
+.zp-main .zp-info .content .zp-click.websit{top:0;right:0;color:#bc1724;font-size:14px;line-height:24px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.zp-main .zp-info .content .zp-click.websit span{margin-left:0;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.zp-main .zp-info .content .zp-click.websit:hover span{margin-left:4px}
+.zp-main .zp-info .zp-auth-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:114px;padding:24px;margin-top:24px;color:#bc1724;background:url(/img/alliance-page/zp-pc-auth-bg.png) no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}
+.zp-main .zp-info .zp-auth-info .zp-auth-icon{width:100%;height:28px;background:url(/img/alliance-page/zp-pc-auth-icon.png) no-repeat}
+.zp-main .zp-info .zp-auth-info .zp-auth-text{font-size:16px;color:#bc1724;}
+.zp-main .zp-info .zp-auth-info .zp-auth-text b{font-weight:bold}
+.zp-main .zp-title{font-size:18px;font-weight:bold}
+.zp-main .zp-title .line{position:relative;width:100%;height:1px;margin-top:12px;background:#ececec}
+.zp-main .zp-title .line::before{position:absolute;left:0;bottom:0;content:"";display:block;width:72px;height:2px;background:#393939}
+.zp-main .zp-params{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:24px}
+.zp-main .zp-params .row{width:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.zp-main .zp-params .row .col{font-size:14px;padding:6px 0;line-height:24px}
+.zp-main .zp-params .row .col:first-child{width:14%;color:#949494}
+.zp-main .zp-params .row .col:first-child::after{content:":";margin-left:4px}
+.zp-main .zp-params .row .col:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}
+.zp-footer{margin-top:24px;padding:20px 0;background-color:#eee}
+.zp-footer p{text-align:center;font-size:14px;color:#999}
+.zp-footer p a{color:#999;-webkit-transition:color 0.2s;-o-transition:color 0.2s;transition:color 0.2s}
+.zp-footer p a:hover{color:#bc1724}
+.zp-mask{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;background:rgba(0,0,0,0.5)}
+.zp-popup{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;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}
+.zp-popup .zp-popup-content{position:relative;width:620px;height:380px;border-radius:4px;background:#fff;overflow:hidden}
+.zp-popup .zp-popup-content .title{padding:12px 20px;background:#f1f1f1;font-size:18px;line-height:30px}
+.zp-popup .zp-popup-content .content{height:326px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px;overflow-y:auto;line-height:2;text-align:justify;text-indent:2em;font-size:14px}
+.zp-popup .zp-popup-content .content::-webkit-scrollbar{width:4px;height:4px;background-color:#fff}
+.zp-popup .zp-popup-content .content::-webkit-scrollbar-thumb{border-radius:2px;background:#b9b9b9}
+.zp-popup .zp-popup-content .close{position:absolute;right:12px;top:12px;display:block;width:30px;height:30px;background:url(/img/alliance-page/icon-close.png) no-repeat center;cursor:pointer}
+.zp-popup .zp-popup-content .close:hover{background-image:url(/img/alliance-page/icon-close-hover.png)}
+.zp-popup .zp-img-popup{position:fixed;width:622px}
+.zp-popup .zp-img-popup img{display:block;width:100%}
+.zp-popup .zp-img-popup .close{position:absolute;display:block;width:32px;height:32px;top:-40px;right:0;background:url(/img/alliance-page/zp-close.png) no-repeat center;background-size:32px;cursor:pointer}
+.zp-wechat-ewm{position:fixed;width:160px;right:0;bottom:80px;padding:8px;border-radius:4px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:-5px -5px 8px rgba(200,200,200,0.1);box-shadow:-5px -5px 8px rgba(200,200,200,0.1)}
+.zp-wechat-ewm img{display:block;width:100%}
+.zp-wechat-ewm .zp-tip{font-size:12px;text-align:center}
+.zp-wechat-ewm .zp-tip span:first-child{display:none}
+.zp-wechat-ewm .close{width:24px;height:24px;background:url(/img/alliance-page/icon-close-hover.png) no-repeat center;background-size:10px;position:absolute;top:-12px;left:-12px;border-radius:50%;padding:4px;background-color:#fff;-webkit-box-shadow:-5px -5px 8px rgba(200,200,200,0.1);box-shadow:-5px -5px 8px rgba(200,200,200,0.1);cursor:pointer}
+.not-found{height:calc(100vh - 80px);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;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}
+.not-found img{}
+.not-found p{font-size:20px;color:#a8a8a8;padding:60px;text-align:center}
+}@media screen and (max-width:768px){body{width:100vw}
+.zp-header{display:none}
+.zp-main{overflow:hidden}
+.zp-main .zp-row:nth-child(2){padding:4vw;background:#fff}
+.zp-main .zp-row h2,.zp-main .zp-row .content{background:#fff;padding:0 4vw}
+.zp-main .zp-img{width:100vw;height:100vw;position:relative;overflow:hidden}
+.zp-main .zp-img .zp-cover-img{position:relative;width:100%;height:100%}
+.zp-main .zp-img .zp-auth-logo,.zp-main .zp-img .zp-auth-sign,.zp-main .zp-img .zp-auth-card{position:absolute;z-index:3}
+.zp-main .zp-img .zp-auth-logo{max-width:18vw;max-height:18vw;top:4vw;left:4vw}
+.zp-main .zp-img .zp-auth-sign{width:14vw;height:14vw;right:4vw;bottom:4vw}
+.zp-main .zp-img .zp-auth-card{width:27vw;height:20vw;left:4vw;bottom:4vw;cursor:pointer}
+.zp-main .zp-info h2{font-size:4.2vw;font-weight:normal;line-height:1.6;text-align:justify;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.zp-main .zp-info .content{position:relative;padding:4vw}
+.zp-main .zp-info .content .zp-item{font-size:3.6vw;line-height:2}
+.zp-main .zp-info .content .zp-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}
+.zp-main .zp-info .content .zp-group .zp-item{color:#949494}
+.zp-main .zp-info .content .zp-group .line{display:block;width:1px;height:3.6vw;background:#c4c4c4;margin:0 3.6vw}
+.zp-main .zp-info .content .zp-click{position:absolute;top:4vw;right:4vw;line-height:2;cursor:pointer}
+.zp-main .zp-info .content .zp-click.websit{font-size:3.6vw;color:#bc1724}
+.zp-main .zp-info .zp-auth-info{width:100vw;height:20vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0 4vw;margin:4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;background:url(/img/alliance-page/zp-h5-auth-bg.png) no-repeat;background-size:100vw auto}
+.zp-main .zp-info .zp-auth-info .zp-auth-icon{width:100%;height:4.7vw;background:url(/img/alliance-page/zp-h5-auth-icon.png) no-repeat;background-size:12vw auto}
+.zp-main .zp-info .zp-auth-info .zp-auth-text{font-size:3.6vw;margin-top:1.2vw;line-height:1.6;color:#bc1724;}
+.zp-main .zp-title{font-size:4.2vw}
+.zp-main .zp-title .line{width:100%;height:1px;background:#c4c4c4;margin-top:4vw;opacity:0.4}
+.zp-main .zp-params .row{display:table-row}
+.zp-main .zp-params .row .col{display:table-cell;padding:2vw 1vw;font-size:3.6vw}
+.zp-main .zp-params .row .col:nth-child(1){color:#949494;max-width:40vw;min-width:16vw;padding-right:3vw}
+.zp-footer{width:100vw;background-color:#fff;margin-top:4vw;padding:4vw 0}
+.zp-footer p{text-align:center;font-size:3.2vw;color:#999}
+.zp-footer p a{color:#f52e3e;font-weight:bold;cursor:pointer}
+.zp-mask{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;background:rgba(0,0,0,0.5)}
+.zp-popup{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;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}
+.zp-popup .zp-popup-content{position:relative;width:86vw;height:128vw;border-radius:4px;background:#fff;overflow:hidden}
+.zp-popup .zp-popup-content .title{padding:4vw 0;background:#f1f1f1;font-size:4.2vw;line-height:4.8vw;text-align:center}
+.zp-popup .zp-popup-content .content{height:111vw;-webkit-box-sizing:border-box;box-sizing:border-box;padding:4vw 4vw 0;overflow-y:auto;line-height:2;text-align:justify;text-indent:2em;font-size:3.6vw}
+.zp-popup .zp-popup-content .close{position:absolute;right:4vw;top:4vw;display:block;width:4.8vw;height:4.8vw;background:url(/img/alliance-page/icon-close.png) no-repeat center;cursor:pointer}
+.zp-popup .zp-popup-content .close:hover{background-image:url(/img/alliance-page/icon-close-hover.png)}
+.zp-popup .zp-img-popup{position:fixed;width:86vw}
+.zp-popup .zp-img-popup img{display:block;width:100%}
+.zp-popup .zp-img-popup .close{position:absolute;display:block;width:6vw;height:6vw;top:-8vw;right:0;background:url(/img/alliance-page/zp-close.png) no-repeat center;background-size:6vw;cursor:pointer}
+.zp-wechat-ewm{position:fixed;width:33vw;right:4vw;bottom:30vw;padding:2vw;border-radius:4px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2);box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2)}
+.zp-wechat-ewm img{display:block;width:100%}
+.zp-wechat-ewm .zp-tip{font-size:2.8vw;text-align:center}
+.zp-wechat-ewm .zp-tip span{display:block}
+.zp-wechat-ewm .close{width:4vw;height:4vw;background:url(/img/alliance-page/icon-close-hover.png) no-repeat center;background-size:2vw;position:absolute;top:-2vw;left:-2vw;border-radius:50%;padding:1vw;background-color:#fff;-webkit-box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2);box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2)}
+.not-found{width:100vw;padding-top:50vw;text-align:center}
+.not-found img{width:30vw}
+.not-found p{font-size:4vw;margin-top:6vw;color:#a8a8a8}
+}.loading-wrap{position:fixed;top:0;left:0;z-index:99;width:100vw;height:100vh;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;background:rgba(255,255,255,1)}
+.loading-wrap img{width:120px}

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

@@ -1,6 +1,8 @@
 @charset "UTF-8";
 input[hidden]{display:none !important}
 textarea{resize: none;}
+
+@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}
@@ -48,3 +50,55 @@ textarea{resize: none;}
 .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}
+}
+
+@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 .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 }
+}

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

@@ -1,4 +1,6 @@
-@charset "UTF-8";.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}
+@charset "UTF-8";
+@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}
@@ -34,3 +36,45 @@
 .article-list .state.danger{color:#F94B4B}
 .article-list .state.primary{color:#1890F9}
 .article-list .pageWrap{width:100% !important}
+}
+
+@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}
+.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,
+.form-section .form-item:nth-child(2) .form-label,
+.form-section .form-item:nth-child(3) .form-label{display: block;}
+.form-section .form-item .form-control{outline:none;width:100%;height:36px;padding:2.2vw 2.8vw;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:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::-moz-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control:-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-select{color:#627386}
+.form-section .form-item .form-button{height:11.2vw;width: 40vw; font-size:2.8vw;text-align: center; line-height:11.2vw;border-radius:2px;cursor:pointer}
+.form-section .buttons{display: flex; justify-content:space-between}
+.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}
+.navLayout{min-height:500px}
+.article-list{}
+.article-list .row{overflow-y: auto; width:100%;padding:4vw 3.4vw 0;margin-bottom:3.8vw;-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)}
+.article-list .table,.table tr,.table th,.table td{border:0}
+.article-list .table{width:250vw;}
+.article-list .table th{font-size:3.4vw;color:#627386;padding-bottom:3.8vw;border-bottom:1px solid #E2E7EF}
+.article-list .table td{font-size:2.8vw;color:#22272E;text-align:center}
+.article-list .table td{padding:3.8vw 0}
+.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 .cover{display:inline-block;width:48px;height:48px;border:1px dashed #E2E7EF}
+.article-list .state{color:#22272E}
+.article-list .state.success{color:#34CC8C}
+.article-list .state.warning{color:#F9A94B}
+.article-list .state.danger{color:#F94B4B}
+.article-list .state.primary{color:#1890F9}
+.article-list .pageWrap{width:100% !important}
+}

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

@@ -0,0 +1,80 @@
+@charset "UTF-8";
+@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}
+.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)}
+.article-list .table,.table tr,.table th,.table td{border:0}
+.article-list .table{width:100%}
+.article-list .table th{font-size:14px;color:#627386;padding-bottom:16px;border-bottom:1px solid #E2E7EF}
+.article-list .table td{font-size:12px;color:#22272E;text-align:center}
+.article-list .table td{padding:16px 0}
+.article-list .table .title,.article-list .table .time,.article-list .table .option{width:100px}
+.article-list .table .title{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 .cover{display:inline-block;width:48px;height:48px;border:1px dashed #E2E7EF}
+.article-list .state{color:#22272E}
+.article-list .state.success{color:#34CC8C}
+.article-list .state.warning{color:#F9A94B}
+.article-list .state.danger{color:#F94B4B}
+.article-list .state.primary{color:#1890F9}
+.article-list .pageWrap{width:100% !important}
+}
+
+@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}
+.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,
+.form-section .form-item:nth-child(2) .form-label,
+.form-section .form-item:nth-child(3) .form-label{display: block;}
+.form-section .form-item .form-control{outline:none;width:100%;height:36px;padding:2.2vw 2.8vw;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:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::-moz-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control:-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::-ms-input-placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-control::placeholder{font-size:3.4vw;color:#9AA5B5}
+.form-section .form-item .form-select{color:#627386}
+.form-section .form-item .form-button{height:11.2vw;width: 40vw; font-size:2.8vw;text-align: center; line-height:11.2vw;border-radius:2px;cursor:pointer}
+.form-section .buttons{display: flex; justify-content:space-between}
+.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}
+.navLayout{min-height:500px}
+.article-list{}
+.article-list .row{overflow-y: auto; width:100%;padding:4vw 3.4vw 0;margin-bottom:3.8vw;-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)}
+.article-list .table,.table tr,.table th,.table td{border:0}
+.article-list .table{width:250vw;}
+.article-list .table th{font-size:3.4vw;color:#627386;padding-bottom:3.8vw;border-bottom:1px solid #E2E7EF}
+.article-list .table td{font-size:2.8vw;color:#22272E;text-align:center}
+.article-list .table td{padding:3.8vw 0}
+.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 .cover{display:inline-block;width:48px;height:48px;border:1px dashed #E2E7EF}
+.article-list .state{color:#22272E}
+.article-list .state.success{color:#34CC8C}
+.article-list .state.warning{color:#F9A94B}
+.article-list .state.danger{color:#F94B4B}
+.article-list .state.primary{color:#1890F9}
+.article-list .pageWrap{width:100% !important}
+}

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

@@ -0,0 +1,259 @@
+
+.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;
+}
+
+.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/css/supplier-center/encyclopedia/table.css

@@ -0,0 +1,680 @@
+@charset "UTF-8";
+/*!
+ * Generated using the Bootstrap Customizer (https://v3.bootcss.com/customize/)
+ */
+/*!
+ * Bootstrap v3.4.1 (https://getbootstrap.com/)
+ * Copyright 2011-2019 Twitter, Inc.
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
+ */
+/*! normalize.css v3.0.3 | MIT License | github.com/necolas/normalize.css */
+html {
+    font-family: sans-serif;
+    -ms-text-size-adjust: 100%;
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    margin: 0;
+}
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+menu,
+nav,
+section,
+summary {
+    display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+    display: inline-block;
+    vertical-align: baseline;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+[hidden],
+template {
+    display: none;
+}
+
+a {
+    background-color: transparent;
+}
+
+a:active,
+a:hover {
+    outline: 0;
+}
+
+abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    text-decoration: underline dotted;
+}
+
+b,
+strong {
+    font-weight: bold;
+}
+
+dfn {
+    font-style: italic;
+}
+
+h1 {
+    font-size: 2em;
+    margin: 0.67em 0;
+}
+
+mark {
+    background: #ff0;
+    color: #000;
+}
+
+small {
+    font-size: 80%;
+}
+
+sub,
+sup {
+    font-size: 75%;
+    line-height: 0;
+    position: relative;
+    vertical-align: baseline;
+}
+
+sup {
+    top: -0.5em;
+}
+
+sub {
+    bottom: -0.25em;
+}
+
+img {
+    border: 0;
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+figure {
+    margin: 1em 40px;
+}
+
+hr {
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+    height: 0;
+}
+
+pre {
+    overflow: auto;
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+button,
+input,
+optgroup,
+select,
+textarea {
+    color: inherit;
+    font: inherit;
+    margin: 0;
+}
+
+button {
+    overflow: visible;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+    -webkit-appearance: button;
+    cursor: pointer;
+}
+
+button[disabled],
+html input[disabled] {
+    cursor: default;
+}
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+    border: 0;
+    padding: 0;
+}
+
+input {
+    line-height: normal;
+}
+
+input[type="checkbox"],
+input[type="radio"] {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+    padding: 0;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+}
+
+input[type="search"] {
+    -webkit-appearance: textfield;
+    -webkit-box-sizing: content-box;
+    -moz-box-sizing: content-box;
+    box-sizing: content-box;
+}
+
+input[type="search"]::-webkit-search-cancel-button,
+input[type="search"]::-webkit-search-decoration {
+    -webkit-appearance: none;
+}
+
+fieldset {
+    border: 1px solid #c0c0c0;
+    margin: 0 2px;
+    padding: 0.35em 0.625em 0.75em;
+}
+
+legend {
+    border: 0;
+    padding: 0;
+}
+
+textarea {
+    overflow: auto;
+}
+
+optgroup {
+    font-weight: bold;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+td,
+th {
+    padding: 0;
+}
+
+* {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+*:before,
+*:after {
+    -webkit-box-sizing: border-box;
+    -moz-box-sizing: border-box;
+    box-sizing: border-box;
+}
+
+html {
+    font-size: 10px;
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+body {
+    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 1.42857143;
+    color: #333333;
+    background-color: #ffffff;
+}
+
+input,
+button,
+select,
+textarea {
+    font-family: inherit;
+    font-size: inherit;
+    line-height: inherit;
+}
+
+a {
+    color: #337ab7;
+    text-decoration: none;
+}
+
+a:hover,
+a:focus {
+    color: #23527c;
+    text-decoration: underline;
+}
+
+a:focus {
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: -2px;
+}
+
+figure {
+    margin: 0;
+}
+
+img {
+    vertical-align: middle;
+}
+
+.img-responsive {
+    display: block;
+    max-width: 100%;
+    height: auto;
+}
+
+.img-rounded {
+    border-radius: 6px;
+}
+
+.img-thumbnail {
+    padding: 4px;
+    line-height: 1.42857143;
+    background-color: #ffffff;
+    border: 1px solid #dddddd;
+    border-radius: 4px;
+    -webkit-transition: all 0.2s ease-in-out;
+    -o-transition: all 0.2s ease-in-out;
+    transition: all 0.2s ease-in-out;
+    display: inline-block;
+    max-width: 100%;
+    height: auto;
+}
+
+.img-circle {
+    border-radius: 50%;
+}
+
+hr {
+    margin-top: 20px;
+    margin-bottom: 20px;
+    border: 0;
+    border-top: 1px solid #eeeeee;
+}
+
+.sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    border: 0;
+}
+
+.sr-only-focusable:active,
+.sr-only-focusable:focus {
+    position: static;
+    width: auto;
+    height: auto;
+    margin: 0;
+    overflow: visible;
+    clip: auto;
+}
+
+[role="button"] {
+    cursor: pointer;
+}
+
+table {
+    background-color: transparent;
+}
+
+table col[class*="col-"] {
+    position: static;
+    display: table-column;
+    float: none;
+}
+
+table td[class*="col-"],
+table th[class*="col-"] {
+    position: static;
+    display: table-cell;
+    float: none;
+}
+
+caption {
+    padding-top: 8px;
+    padding-bottom: 8px;
+    color: #777777;
+    text-align: left;
+}
+
+th {
+    text-align: left;
+}
+
+.table {
+    width: 100%;
+    max-width: 100%;
+    margin-bottom: 20px;
+}
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+    padding: 8px;
+    line-height: 1.42857143;
+    vertical-align: top;
+    border-top: 1px solid #dddddd;
+}
+
+.table > thead > tr > th {
+    vertical-align: bottom;
+    border-bottom: 2px solid #dddddd;
+}
+
+.table > caption + thead > tr:first-child > th,
+.table > colgroup + thead > tr:first-child > th,
+.table > thead:first-child > tr:first-child > th,
+.table > caption + thead > tr:first-child > td,
+.table > colgroup + thead > tr:first-child > td,
+.table > thead:first-child > tr:first-child > td {
+    border-top: 0;
+}
+
+.table > tbody + tbody {
+    border-top: 2px solid #dddddd;
+}
+
+.table .table {
+    background-color: #ffffff;
+}
+
+.table-condensed > thead > tr > th,
+.table-condensed > tbody > tr > th,
+.table-condensed > tfoot > tr > th,
+.table-condensed > thead > tr > td,
+.table-condensed > tbody > tr > td,
+.table-condensed > tfoot > tr > td {
+    padding: 5px;
+}
+
+.table-bordered {
+    border: 1px solid #dddddd;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+    border: 1px solid #dddddd;
+}
+
+.table-bordered > thead > tr > th,
+.table-bordered > thead > tr > td {
+    border-bottom-width: 2px;
+}
+
+.table-striped > tbody > tr:nth-of-type(odd) {
+    background-color: #f9f9f9;
+}
+
+.table-hover > tbody > tr:hover {
+    background-color: #f5f5f5;
+}
+
+.table > thead > tr > td.active,
+.table > tbody > tr > td.active,
+.table > tfoot > tr > td.active,
+.table > thead > tr > th.active,
+.table > tbody > tr > th.active,
+.table > tfoot > tr > th.active,
+.table > thead > tr.active > td,
+.table > tbody > tr.active > td,
+.table > tfoot > tr.active > td,
+.table > thead > tr.active > th,
+.table > tbody > tr.active > th,
+.table > tfoot > tr.active > th {
+    background-color: #f5f5f5;
+}
+
+.table-hover > tbody > tr > td.active:hover,
+.table-hover > tbody > tr > th.active:hover,
+.table-hover > tbody > tr.active:hover > td,
+.table-hover > tbody > tr:hover > .active,
+.table-hover > tbody > tr.active:hover > th {
+    background-color: #e8e8e8;
+}
+
+.table > thead > tr > td.success,
+.table > tbody > tr > td.success,
+.table > tfoot > tr > td.success,
+.table > thead > tr > th.success,
+.table > tbody > tr > th.success,
+.table > tfoot > tr > th.success,
+.table > thead > tr.success > td,
+.table > tbody > tr.success > td,
+.table > tfoot > tr.success > td,
+.table > thead > tr.success > th,
+.table > tbody > tr.success > th,
+.table > tfoot > tr.success > th {
+    background-color: #dff0d8;
+}
+
+.table-hover > tbody > tr > td.success:hover,
+.table-hover > tbody > tr > th.success:hover,
+.table-hover > tbody > tr.success:hover > td,
+.table-hover > tbody > tr:hover > .success,
+.table-hover > tbody > tr.success:hover > th {
+    background-color: #d0e9c6;
+}
+
+.table > thead > tr > td.info,
+.table > tbody > tr > td.info,
+.table > tfoot > tr > td.info,
+.table > thead > tr > th.info,
+.table > tbody > tr > th.info,
+.table > tfoot > tr > th.info,
+.table > thead > tr.info > td,
+.table > tbody > tr.info > td,
+.table > tfoot > tr.info > td,
+.table > thead > tr.info > th,
+.table > tbody > tr.info > th,
+.table > tfoot > tr.info > th {
+    background-color: #d9edf7;
+}
+
+.table-hover > tbody > tr > td.info:hover,
+.table-hover > tbody > tr > th.info:hover,
+.table-hover > tbody > tr.info:hover > td,
+.table-hover > tbody > tr:hover > .info,
+.table-hover > tbody > tr.info:hover > th {
+    background-color: #c4e3f3;
+}
+
+.table > thead > tr > td.warning,
+.table > tbody > tr > td.warning,
+.table > tfoot > tr > td.warning,
+.table > thead > tr > th.warning,
+.table > tbody > tr > th.warning,
+.table > tfoot > tr > th.warning,
+.table > thead > tr.warning > td,
+.table > tbody > tr.warning > td,
+.table > tfoot > tr.warning > td,
+.table > thead > tr.warning > th,
+.table > tbody > tr.warning > th,
+.table > tfoot > tr.warning > th {
+    background-color: #fcf8e3;
+}
+
+.table-hover > tbody > tr > td.warning:hover,
+.table-hover > tbody > tr > th.warning:hover,
+.table-hover > tbody > tr.warning:hover > td,
+.table-hover > tbody > tr:hover > .warning,
+.table-hover > tbody > tr.warning:hover > th {
+    background-color: #faf2cc;
+}
+
+.table > thead > tr > td.danger,
+.table > tbody > tr > td.danger,
+.table > tfoot > tr > td.danger,
+.table > thead > tr > th.danger,
+.table > tbody > tr > th.danger,
+.table > tfoot > tr > th.danger,
+.table > thead > tr.danger > td,
+.table > tbody > tr.danger > td,
+.table > tfoot > tr.danger > td,
+.table > thead > tr.danger > th,
+.table > tbody > tr.danger > th,
+.table > tfoot > tr.danger > th {
+    background-color: #f2dede;
+}
+
+.table-hover > tbody > tr > td.danger:hover,
+.table-hover > tbody > tr > th.danger:hover,
+.table-hover > tbody > tr.danger:hover > td,
+.table-hover > tbody > tr:hover > .danger,
+.table-hover > tbody > tr.danger:hover > th {
+    background-color: #ebcccc;
+}
+
+.table-responsive {
+    min-height: .01%;
+    overflow-x: auto;
+}
+
+@media screen and (max-width: 767px) {
+    .table-responsive {
+        width: 100%;
+        margin-bottom: 15px;
+        overflow-y: hidden;
+        -ms-overflow-style: -ms-autohiding-scrollbar;
+        border: 1px solid #dddddd;
+    }
+
+    .table-responsive > .table {
+        margin-bottom: 0;
+    }
+
+    .table-responsive > .table > thead > tr > th,
+    .table-responsive > .table > tbody > tr > th,
+    .table-responsive > .table > tfoot > tr > th,
+    .table-responsive > .table > thead > tr > td,
+    .table-responsive > .table > tbody > tr > td,
+    .table-responsive > .table > tfoot > tr > td {
+        white-space: nowrap;
+    }
+
+    .table-responsive > .table-bordered {
+        border: 0;
+    }
+
+    .table-responsive > .table-bordered > thead > tr > th:first-child,
+    .table-responsive > .table-bordered > tbody > tr > th:first-child,
+    .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+    .table-responsive > .table-bordered > thead > tr > td:first-child,
+    .table-responsive > .table-bordered > tbody > tr > td:first-child,
+    .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+        border-left: 0;
+    }
+
+    .table-responsive > .table-bordered > thead > tr > th:last-child,
+    .table-responsive > .table-bordered > tbody > tr > th:last-child,
+    .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+    .table-responsive > .table-bordered > thead > tr > td:last-child,
+    .table-responsive > .table-bordered > tbody > tr > td:last-child,
+    .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+        border-right: 0;
+    }
+
+    .table-responsive > .table-bordered > tbody > tr:last-child > th,
+    .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+    .table-responsive > .table-bordered > tbody > tr:last-child > td,
+    .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+        border-bottom: 0;
+    }
+}
+
+.clearfix:before,
+.clearfix:after {
+    display: table;
+    content: " ";
+}
+
+.clearfix:after {
+    clear: both;
+}
+
+.center-block {
+    display: block;
+    margin-right: auto;
+    margin-left: auto;
+}
+
+.pull-right {
+    float: right !important;
+}
+
+.pull-left {
+    float: left !important;
+}
+
+.hide {
+    display: none !important;
+}
+
+.show {
+    display: block !important;
+}
+
+.invisible {
+    visibility: hidden;
+}
+
+.text-hide {
+    font: 0/0 a;
+    color: transparent;
+    text-shadow: none;
+    background-color: transparent;
+    border: 0;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.affix {
+    position: fixed;
+}

src/main/resources/static/js/common/ajax.service.js

@@ -32,6 +32,7 @@ var Http = {
                 dataType: "json",
                 headers: { 'X-Token': REV_TOKEN_ENV },
                 async:false,
+                // contentType: contentType,
                 contentType: option.json ? 'application/json;charset=UTF-8' : 'application/x-www-form-urlencoded',
                 beforeSend:function () {
                     // if (option.mask) {

src/main/resources/static/js/common/serviceapi/supplier.service.js

@@ -4,6 +4,79 @@
  * auther ZHJY
  */
 var SupplierApi = {
+        ShopBaikeProductDelete: function(params, callback){ // 百科商品/仪器 删除
+            Http.AjaxService({
+                url:'/user/shop/baike/product/delete',
+                type:'post',
+                data:params,
+                json:false,
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+
+
+        ShopBaikeProductTypeList: function(params, callback){ // 百科商品/仪器分类列表
+            Http.AjaxService({
+                url:'/user/shop/baike/product/type/list',
+                type:'get',
+                data:params,
+                json:false,
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+
+        ShopBaikeProductStatusUpdate: function(params, callback){ // 供应商百科商品/仪器状态更新
+            Http.AjaxService({
+                url:'/user/shop/baike/product/status/update',
+                type:'post',
+                data:params,
+                json:false,
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+
+        ShopBaikeProductSave: function(params, callback){ // 供应商百科商品/仪器信息保存
+            Http.AjaxService({
+                url:'/user/shop/baike/product/save',
+                type:'post',
+                data:params,
+                json:false,
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+
+        GetShopBaikeProductList: function(params, callback){ // 供应商百科商品/仪器列表
+            Http.AjaxService({
+                url:'/user/shop/baike/product/list',
+                type:'get',
+                data:params,
+                json:false,
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+
+        GetShopBaikeProductForm: function(params, callback){ // 供应商百科商品表单数据（回显数据）
+            Http.AjaxService({
+                url:'/user/shop/baike/product/form',
+                type:'get',
+                data:params,
+                json:false,
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+
         UploadFile: function(params, callback){ // 供应商文章上传图片
             Http.AjaxService({
                 url:'/tools/image/upload/ckeditor',

src/main/resources/static/js/product/alliance-page.js

@@ -0,0 +1,142 @@
+'use strict';
+// loading组件
+var LoadingWrap = {
+    name: 'Loading',
+    render: function render(h) {
+        return h('div', { class: ['loading-wrap'] }, [h('img', { attrs: { src: '/img/alliance-page/loading.gif', alt: 'loading' } })]);
+    }
+};
+
+function remove(el) {
+    el.removeChild(el.instance.$el);
+}
+
+function append(el) {
+    el.appendChild(el.instance.$el);
+}
+
+// 定义 loading 指令
+var loadingDirective = {
+    inserted: function inserted(el, binding) {
+        // 创建 loading 组件构造函数
+        var LoadingCtor = Vue.extend(LoadingWrap);
+        // new 一个 loading组件实例
+        var loadingInstance = new LoadingCtor();
+        // 组件挂载
+        el.instance = loadingInstance.$mount();
+        // 传入值为 true 时才展示
+        if (binding.value) {
+            // 将组件挂载到绑定指令的元素上
+            append(el);
+        }
+    },
+    update: function update(el, binding) {
+        // 值更新时进行操作
+        if (binding.value !== binding.oldValue) {
+            binding.value ? append(el) : remove(el);
+        }
+    }
+};
+
+// vue实例
+var zplm = new Vue({
+    el: '#zplm',
+    directives: {
+        loading: loadingDirective
+    },
+    data: {
+        isPc: $(window).width() > 768,
+        authCardVisible: false,
+        statementVisible: false,
+        showStatementContent: false,
+        wechatVisible: true,
+        showMask: false,
+        isRequest: true,
+        // 产品id
+        productId: '',
+        //产品参数对象
+        productAuthInfo: {},
+        //错误信息
+        errorMessage: '',
+        // 定时器
+        timer: null
+    },
+    computed: {
+        // 封面图 主图
+        coverImage: function coverImage() {
+            return this.isPc ? this.productAuthInfo.pcImage : this.productAuthInfo.appletsImage;
+        },
+
+        // 授权机构
+        authOrigin: function authOrigin() {
+            return this.productAuthInfo.agentFlag !== 0 ? this.productAuthInfo.shopName : this.productAuthInfo.brandName;
+        },
+
+        // 不换行
+        noWarp: function noWarp() {
+            if (this.isPc && this.productAuthInfo.paramList.length > 1) return { 'white-space': 'nowrap' };
+            return '';
+        }
+    },
+    created: function created() {
+        this.getProductId();
+        this.fetchProductAuthInfo();
+    },
+
+    filters: {
+        // 处理sn码
+        snCode: function snCode(code) {
+            if (!code) return '';
+            return code.replace(/^(\w{2})\w+(\w{4})$/, "$1******$2");
+        }
+    },
+    methods: {
+        // 获取商品id
+        getProductId: function getProductId() {
+            var productId = window.location.pathname.split('-')[1].split('.')[0];
+            this.productId = parseInt(productId);
+        },
+
+        // 获取授权信息
+        fetchProductAuthInfo: function fetchProductAuthInfo() {
+            var that = this;
+            ProductApi.GetAuthProductDeatil({ productId: that.productId }, function (res) {
+                // 获取授权信息失败
+                if (res.code) {
+                    that.isRequest = false;
+                    return that.errorMessage = res.msg;
+                }
+                // 获取授权信息成功
+                that.productAuthInfo = res.data;
+                that.isRequest = false;
+            });
+            setTimeout(function(){
+                if(that.isRequest){
+                    that.isRequest = false;
+                    location.href = '/404.html'
+                }
+            }, 10000)
+        },
+
+        // 显示授权牌
+        handleShowAuthCard: function handleShowAuthCard() {
+            this.authCardVisible = !this.authCardVisible;
+            this.showMask = !this.showMask;
+        },
+
+        // 显示声明弹窗
+        handleShowStatement: function handleShowStatement() {
+            var that = this;
+            this.statementVisible = !this.statementVisible;
+            this.showMask = !this.showMask;
+            this.timer = setTimeout(function () {
+                that.showStatementContent = !that.showStatementContent;
+            }, 800);
+        },
+
+        // 显示微信二维码
+        handleShowWechat: function handleShowWechat() {
+            this.wechatVisible = !this.wechatVisible;
+        }
+    }
+});

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

@@ -212,3 +212,6 @@ var articleEdit = new Vue({
     }
 });
 
+
+
+

src/main/resources/static/js/supplier-center/encyclopedia/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/encyclopedia/instrument-edit.js

@@ -0,0 +1,454 @@
+const Editor = window.createEditorComponent()
+
+const app = new Vue({
+    components: {
+        Editor,
+    },
+
+    data() {
+        var validateQuestionList = (rule, value, callback) => {
+            if (!value) {
+                callback(new Error('问答列表不能为空'))
+            } else if (value < this.minLimitQuestions) {
+                callback(new Error(`请填写至少${this.minLimitQuestions}条问答`))
+            } else {
+                callback();
+            }
+        }
+
+        var validateParamList = (rule, value, callback) => {
+            if (!value) {
+                callback(new Error('参数列表不能为空'))
+            } else if (value < this.minLimitParams) {
+                callback(new Error(`请填写至少${this.minLimitParams}条参数`))
+            } else {
+                callback();
+            }
+        }
+
+        return {
+
+            productId: 0,
+            commodityType: 2, // 商品类型 1： 产品  2： 仪器
+            shopId: GLOBAL_SHOP_ID,
+
+            action: $('#coreServer').val() + '/tools/image/upload/multi',
+
+            formData: {
+                // 仪器名称
+                name: '',
+                // 仪器别名
+                alias: '',
+                // 仪器概述
+                discription: '',
+                // 仪器图片
+                image: '',
+                // 认证链接
+                authLink: '',
+                // 认证二维码
+                authQrCode: '',
+                // 仪器参数
+                paramList: '',
+                // 仪器优点
+                advantage: '',
+                // 仪器缺点
+                disadvantage: '',
+                // 仪器原理
+                principle: '',
+                // 品牌
+                brand: '',
+                // 产地
+                producePlace: '',
+                // 上市时间
+                marketTime: '',
+                // 公司/厂商
+                company: '',
+                // NMPA认证时间
+                nmpaTime: '',
+                // 仪器认证
+                authImageList: '',
+                // 适应人群
+                adaptiveMan: '',
+                // 不适应人群
+                unAdaptiveMan: '',
+                // 术前术后
+                aroundOperation: '',
+                // 效果展示图片列表
+                displayImageList: '',
+                // 常见问题
+                questionList: '',
+                // 仪器类别
+                typeId: '',
+                // 仪器状态
+                status: 1,
+            },
+            rules: {
+                // 仪器名称
+                name: [{required: true, message: '仪器名称不能为空', trigger: ['change', 'blur']}],
+                // 仪器别名
+                alias: [{required: true, message: '仪器别名不能为空', trigger: ['change', 'blur']}],
+                // 仪器概述
+                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'}],
+                // 产仪器参数
+                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'}],
+            },
+
+            // 仪器类别列表
+            typeList: [],
+
+            // 仪器参数
+            // paramList: [],
+            paramEmptyList: [], // 占位
+            minLimitParams: 2,
+            // 常见问题
+            questionEmptyList: [], // 占位
+            minLimitQuestions: 2,
+            // 仪器认证
+            authImageList: [],
+            // 效果展示图片列表
+            displayImageList: [],  // 初始化列表
+            dialogVisible: false,
+            dialogImageUrl: '',
+        }
+    },
+    computed: {
+        // 仪器参数
+        paramList() {
+            const filter = this.paramEmptyList.filter(param => param.content !== '' && param.name !== '')
+            if (filter.length > 0) return filter.map(param => ({name: param.name, content: param.content}))
+            return []
+        },
+        // 常见问题
+        questionList() {
+            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() {
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(1).addClass("on");
+    },
+
+    created() {
+        this.getTypeList();
+        this.watchArrayStatus(['paramList', 'questionList', 'authImageList', 'displayImageList']);
+        this.getProductFormData();
+    },
+
+    methods: {
+
+        // 返回文章列表页面
+        handleBack: function handleBack() {
+            localStorage.removeItem('target-name');
+            window.open('/supplier/encyclopedia/instrument-list.html', 'supplier-instrument-list');
+            window.close();
+        },
+        // 保存事件
+        handleSave() {
+            this.$refs.ruleForm.validate(valide => {
+                console.log(valide);
+                if (!valide) {
+                    this.socrllToErrorInput()
+                    return;
+                }
+                this.saveFormData()
+            })
+        },
+
+        // 保存表单数据
+        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'),
+                authImageList: this.authImageList.map(image => (image.response ? image.response.data : image.url)),
+                displayImageList: this.displayImageList.map(image => (image.response ? image.response.data : image.url))
+            };
+
+            if (this.productId) params.productId = this.productId;
+            console.log(params);
+            SupplierApi.ShopBaikeProductSave(params, function (res) {
+                if (res.code === 0) {
+                    CAIMEI.dialog('保存成功', false);
+                    setTimeout(function () {
+                        that.handleBack();
+                    }, 2000);
+                } else {
+                    CAIMEI.Alert(res.msg, '确认', false)
+                }
+            })
+        },
+
+		initFormData: function(formData){
+			console.log(formData);
+			// 初始化this.formData
+            for (var key in this.formData) {
+                if (formData.hasOwnProperty(key)) {
+                	// 如果是数组 就取值length
+                	if(formData[key] instanceof  Array){
+                		const len = formData[key].length
+                		this.formData[key] = len > 0 ? len : ''
+                	} else if(['marketTime', 'nmpaTime'].includes(key)){
+                		this.formData[key] = new Date(formData[key])
+                	}
+                	else {
+                		this.formData[key] = formData[key];
+                	}
+                }
+            }
+            // 处理参数
+			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'}))
+		},
+
+
+		// 获取表单数据
+        getProductFormData() {
+            this.productId = localStorage.getItem('productId') || 0;
+            localStorage.removeItem('productId');
+            if (this.productId > 0) {
+				const that = this;
+				SupplierApi.GetShopBaikeProductForm({productId: this.productId}, function (res) {
+					if (res.code === 0) {
+						that.initFormData(res.data);
+					} else {
+						CAIMEI.dialog('获取仪器数据失败', false);
+						setTimeout(function () {
+							that.handleBack();
+						}, 2000);
+					}
+				});
+            }else {
+            	this.resetEmptyListData([],[])
+            }
+        },
+
+        // 获取分类列表
+        getTypeList() {
+            const that = this;
+            SupplierApi.ShopBaikeProductTypeList({commodityType: this.commodityType}, function (res) {
+                that.typeList = res.data;
+                console.log(res);
+            })
+        },
+
+        //添加一条参数
+        addParam() {
+            this.paramEmptyList.push({
+                name: '',
+                content: '',
+                p1: '参数名',
+                p2: '参数信息',
+            })
+        },
+
+        // 删除一条参数
+        removeParam(index) {
+            this.paramEmptyList.splice(index, 1)
+        },
+
+        //添加一条问答
+        addQuestion() {
+            this.questionEmptyList.push({
+                question: '',
+                answer: '',
+                p1: '请输入问题内容',
+                p2: '请输入问题解答内容',
+            })
+        },
+
+        // 删除一条问答
+        removeQuestion(index) {
+            this.questionEmptyList.splice(index, 1)
+        },
+
+        // 初始化可变表单数据
+        resetEmptyListData(paramSource, questionSource) {
+            this.makeEmptyList({
+                target: this.paramEmptyList,
+                source: paramSource,
+                limit: this.minLimitParams,
+                key: 'name',
+                value: 'content',
+            })
+            this.makeEmptyList({
+                target: this.questionEmptyList,
+                source: questionSource,
+                limit: this.minLimitQuestions,
+                key: 'question',
+                value: 'answer',
+            })
+        },
+
+        // 创建可变表单占位列表
+        makeEmptyList(options) {
+            options = {
+                target: [], // 目标数组
+                source: [], // 数据源数组
+                key: '',
+                value: '',
+                limit: 0, // 最小条数
+                argsList: ['参数', '品牌'], // placeholder文本
+                ...options,
+            }
+            let {target, source, limit, argsList, key, value} = options
+            let len = 0
+
+            target.push(
+                ...source.map(v => {
+                    v.p1 = `例如：${argsList[0]}`
+                    v.p2 = `请输入：${argsList[0]}信息`
+                    return v
+                })
+            )
+
+            len = limit - target.length
+            for (let i = 0; i < len; i++) {
+                const obj = {}
+                obj[key] = ''
+                obj[value] = ''
+                if (i <= argsList.length - 1) {
+                    obj.p1 = `例如：${argsList[i]}`
+                    obj.p2 = `请输入：${argsList[i]}信息`
+                } else {
+                    obj.p1 = `例如：${argsList[0]}`
+                    obj.p2 = `请输入：${argsList[0]}信息`
+                }
+                target.push(obj)
+            }
+        },
+
+        handleAuthQrCodeSuccess(response){
+            this.$refs.authQrCodeUploader.clearFiles();
+        	this.formData.authQrCode = response.data
+        },
+
+        // 仪器图片上传成功的回调
+        handleImageSuccess(response) {
+        	this.$refs.coverUploader.clearFiles();
+        	this.formData.image = response.data
+        },
+
+        // 认证图片上传成功的回调
+        handleAuthImageSuccess(response, file, fileList) {
+        	this.authImageList = fileList
+        },
+
+        // 移除认证图片
+        handleAuthImageRemove(file, fileList) {
+        	// console.log(fileList)
+            this.authImageList = fileList
+        },
+
+        // 效果图片上传成功的回调
+        handleDisplayImageSuccess(response, file, fileList) {
+        	this.displayImageList = fileList
+        },
+
+        // 移除效果图片
+        handleDisplayImageRemove(file, fileList) {
+            this.displayImageList = fileList
+        },
+
+        // 图片上传前的回调
+        beforeImageUpload(file) {
+            const isLt2M = file.size / 1024 / 1024 < 2
+            if (!isLt2M) {
+                this.$message.error('上传头像图片大小不能超过 2MB!')
+            }
+            return isLt2M
+        },
+
+        // 预览图片
+        handlePictureCardPreview(file) {
+            this.dialogImageUrl = file.url
+            this.dialogVisible = true
+        },
+
+        // 预览图片弹窗
+        handlePictureCardPreview(file) {
+            this.dialogImageUrl = file.url
+            this.dialogVisible = true
+        },
+
+        // 监听formData中类型为数组的数据状态
+        watchArrayStatus(args = []) {
+            args.forEach(arg => {
+                if (this[arg] instanceof Array) {
+                    this.$watch(
+                        arg,
+                        (nval, oval) => {
+                        	console.log(arg, nval.length);
+                        	console.log(this[arg]);
+                        	if(nval.length > 0){
+                        		this.formData[arg] = nval.length
+                        	} else{
+                        		this.formData[arg] = ''
+                        	}
+                        },
+                        {deep: true}
+                    )
+                }
+            })
+        },
+
+        // 滚动到必填位置
+        socrllToErrorInput(){
+            this.$nextTick(() => {
+                const scrollTop = $('.el-form-item__error').eq(0).parent().siblings('.el-form-item__label').offset().top
+                $('body,html').animate({
+                    scrollTop: scrollTop - $('#globalHead').height() -  40
+                }, 800)
+            })
+        }
+    },
+})
+
+app.$mount('#instrumentEdit')

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

@@ -0,0 +1,221 @@
+"use strict";
+
+console.log(123);
+
+var productList = new Vue({
+    el: '#productList',
+    data: {
+        name: 'supplier-instrument-list',
+        refreshType: '',
+        hidden: '',
+        visibilityChange: '',
+        listRecord: 0,
+        shopId: GLOBAL_SHOP_ID || 0,
+        listQuery: {
+            commodityType: 2,
+            productId: '',
+            name: '',
+            auditStatus: '',
+            typeId: '',
+            pageNum: 1,
+            pageSize: 10
+        },
+        pageInput: 1,
+        pageTotal: 0,
+        productList: [],
+        productTypeList: [],
+        categoryKeyMap: {
+            name: 'typeName',
+            value: 'typeId'
+        },
+        auditStatusList: [
+            {
+                name: '全部',
+                value: '',
+            },
+            {
+                name: '待审核',
+                value: 1,
+            },
+            {
+                name: '审核通过',
+                value: 2,
+            },
+            {
+                name: '审核未通过',
+                value: 3,
+            }
+        ]
+    },
+    computed: {
+        pageTotal: function pageTotal() {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function showPageBtn() {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            total = total > 0 ? total : 1;
+            var index = this.listQuery.pageNum,
+                arr = [];
+
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+
+                return arr;
+            }
+
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    filters: {
+        // 时间格式化
+        formatDate: function formatDate(date) {
+            if (!date) return '---';
+            return dateFormat(new Date(date));
+        }
+    },
+    created: function created() {
+        this.getArticleList();
+        this.fetchArticleCatagory();
+    },
+    mounted: function mounted() {
+        window.name = this.name;
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(1).addClass("on");
+    },
+    methods: {
+        // 获取文章列表
+        getArticleList: function getArticleList() {
+            var that = this;
+            this.listQuery.shopId = this.shopId;
+            SupplierApi.GetShopBaikeProductList(this.listQuery, function (res) {
+                console.log(res);
+                if (res.code === 0) {
+                    that.listRecord = res.data.total;
+                    that.productList = res.data.list;
+                    that.pageTotal = res.data.pages;
+                } else {
+                    CAIMEI.Alert(res.msg, '确定', false);
+                }
+            });
+        },
+        //表格操作按钮点击
+        clickOption: function clickOption(product, type) {
+            var handles = {
+                1: this.toEdit,
+                2: this.changeStatus,
+                3: this.toDetail,
+                4: this.handleDelete
+            };
+            handles[type](product);
+        },
+        //跳转编辑页面
+        toEdit: function toEdit(product) {
+            localStorage.setItem('productId', product.productId);
+            window.open('/supplier/encyclopedia/instrument-edit.html');
+        },
+        //修改状态
+        changeStatus: function changeStatus(product) {
+            var newStatus = 1;
+
+            if (product.status === 1) {
+                newStatus = 0;
+            }
+
+            SupplierApi.ShopBaikeProductStatusUpdate({
+                productId: product.productId,
+                shopId: this.shopId,
+                status: newStatus
+            }, function (res) {
+                if (res.code === 0) {
+                    // 不刷新数据更新
+                    product.status = newStatus;
+                    CAIMEI.dialog('修改状态成功!');
+                } else {
+                    CAIMEI.dialog('修改状态失败!');
+                }
+            });
+        },
+        //查看
+        toDetail: function toDetail(product) {
+            if (product.auditStatus !== 2) return CAIMEI.dialog('请等待审核通过后查看!');
+            if (!product.status) return CAIMEI.dialog('请启用后查看!');
+            window.open('/encyclopedia/instrument-' + product.productId + '.html');
+        },
+        // 跳转添加文章页面
+        handleAddArticle: function handleAddArticle() {
+            window.open('/supplier/encyclopedia/instrument-edit.html');
+        },
+        // 查询文章列表
+        handleSearchList: function handleSearchList() {
+            this.listQuery.pageNum = 1;
+            this.getArticleList();
+        },
+        // 获取文章列表
+        fetchArticleCatagory: function fetchArticleCatagory() {
+            var that = this;
+            SupplierApi.ShopBaikeProductTypeList({ commodityType: 2 }, function (res) {
+                if (res.code === 0) {
+                    that.productTypeList = res.data;
+                } else {
+                    CAIMEI.Alert(res.msg, '确定', false);
+                }
+            });
+        },
+        //删除确认
+        handleDelete: function handleDelete(product) {
+            var that = this;
+            var params = {
+                content: '确认删除该仪器信息?',
+                cancelBtnText: '取消',
+                confitmBtnText: '删除'
+            };
+            CAIMEI.Popup(params, function () {
+                that.productDelete(product);
+            });
+        },
+        // 删除文章
+        productDelete: function productDelete(product) {
+            var that = this;
+            SupplierApi.ShopBaikeProductDelete({
+                productId: product.productId
+            }, function (res) {
+                if (res.code === 0) {
+                    that.getArticleList();
+                    CAIMEI.dialog('删除成功!');
+                } else {
+                    CAIMEI.dialog('删除失败!');
+                }
+            });
+        },
+        //页码跳转
+        toPagination: function toPagination(pageNum) {
+            if (pageNum <= this.pageTotal) {
+                this.listQuery.pageNum = pageNum; // console.log('页码跳转');
+                this.getArticleList();
+                $('html ,body').animate({scrollTop: 0}, 400, 'linear'); // 页面置顶
+            }
+        },
+        // 输入框设置页码
+        checkNum: function checkNum() {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        cateSelectChange(data) {
+            console.log(data);
+            this.listQuery.typeId = data.typeId;
+            this.getArticleList()
+        },
+        auditStatusChange(data){
+            this.listQuery.auditStatus = data.value
+            this.getArticleList()
+        }
+    }
+});

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

@@ -0,0 +1,443 @@
+const Editor = window.createEditorComponent()
+
+const app = new Vue({
+    components: {
+        Editor,
+    },
+
+    data() {
+        var validateQuestionList = (rule, value, callback) => {
+            if (!value) {
+                callback(new Error('问答列表不能为空'))
+            } else if (value < this.minLimitQuestions) {
+                callback(new Error(`请填写至少${this.minLimitQuestions}条问答`))
+            } else {
+                callback();
+            }
+        }
+
+        var validateParamList = (rule, value, callback) => {
+            if (!value) {
+                callback(new Error('参数列表不能为空'))
+            } else if (value < this.minLimitParams) {
+                callback(new Error(`请填写至少${this.minLimitParams}条参数`))
+            } else {
+                callback();
+            }
+        }
+
+        return {
+
+            productId: 0,
+            commodityType: 1, // 商品类型 1： 产品  2： 仪器
+            shopId: GLOBAL_SHOP_ID,
+
+            action: $('#coreServer').val() + '/tools/image/upload/multi',
+
+            formData: {
+                // 产品名称
+                name: '',
+                // 产品别名
+                alias: '',
+                // 产品概述
+                discription: '',
+                // 产品图片
+                image: '',
+                // 产品参数
+                paramList: '',
+                // 产品优点
+                advantage: '',
+                // 产品缺点
+                disadvantage: '',
+                // 产品原理
+                principle: '',
+                // 品牌
+                brand: '',
+                // 产地
+                producePlace: '',
+                // 上市时间
+                marketTime: '',
+                // 公司/厂商
+                company: '',
+                // NMPA认证时间
+                nmpaTime: '',
+                // 产品认证
+                authImageList: '',
+                // 适应人群
+                adaptiveMan: '',
+                // 不适应人群
+                unAdaptiveMan: '',
+                // 术前术后
+                aroundOperation: '',
+                // 效果展示图片列表
+                displayImageList: '',
+                // 常见问题
+                questionList: '',
+                // 产品类别
+                typeId: '',
+                // 产品状态
+                status: 1,
+            },
+            rules: {
+                // 产品名称
+                name: [{required: true, message: '产品名称不能为空', trigger: ['change', 'blur']}],
+                // 产品别名
+                alias: [{required: true, message: '产品别名不能为空', trigger: ['change', 'blur']}],
+                // 产品概述
+                discription: [{required: true, message: '产品概述不能为空', trigger: ['change', 'blur']}],
+                // 产品图片
+                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'}],
+                // 产品类别
+                typeId: [{required: true, message: '请选择产品类别', trigger: 'change'}],
+                // 产品状态
+                status: [{required: true, message: '请选择产品状态', trigger: 'change'}],
+            },
+
+            // 产品类别列表
+            typeList: [],
+
+            // 产品参数
+            // paramList: [],
+            paramEmptyList: [], // 占位
+            minLimitParams: 2,
+            // 常见问题
+            questionEmptyList: [], // 占位
+            minLimitQuestions: 2,
+            // 产品认证
+            authImageList: [],
+            // 效果展示图片列表
+            displayImageList: [],  // 初始化列表
+            dialogVisible: false,
+            dialogImageUrl: '',
+        }
+    },
+    computed: {
+        // 产品参数
+        paramList() {
+            const filter = this.paramEmptyList.filter(param => param.content !== '' && param.name !== '')
+            if (filter.length > 0) return filter.map(param => ({name: param.name, content: param.content}))
+            return []
+        },
+        // 常见问题
+        questionList() {
+            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() {
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+    },
+
+    created() {
+        this.getTypeList();
+        this.watchArrayStatus(['paramList', 'questionList', 'authImageList', 'displayImageList']);
+        this.getProductFormData();
+
+    },
+
+    methods: {
+
+        // 返回文章列表页面
+        handleBack: function handleBack() {
+            localStorage.removeItem('target-name');
+            window.open('/supplier/encyclopedia/product-list.html', 'supplier-product-list');
+            window.close();
+        },
+        // 保存事件
+        handleSave() {
+            this.$refs.ruleForm.validate(valide => {
+                console.log(valide);
+                if (!valide) {
+                    this.socrllToErrorInput()
+                    return
+                }
+                this.saveFormData()
+            })
+        },
+
+        // 保存表单数据
+        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'),
+                authImageList: this.authImageList.map(image => (image.response ? image.response.data : image.url)),
+                displayImageList: this.displayImageList.map(image => (image.response ? image.response.data : image.url))
+            };
+
+            if (this.productId) params.productId = this.productId;
+            console.log(params);
+            SupplierApi.ShopBaikeProductSave(params, function (res) {
+                if (res.code === 0) {
+                    CAIMEI.dialog('保存成功', false);
+                    setTimeout(function () {
+                        that.handleBack();
+                    }, 2000);
+                } else {
+                    CAIMEI.Alert(res.msg, '确认', false)
+                }
+            })
+        },
+
+		initFormData: function(formData){
+			console.log(formData);
+			// 初始化this.formData
+            for (var key in this.formData) {
+                if (formData.hasOwnProperty(key)) {
+                	// 如果是数组 就取值length
+                	if(formData[key] instanceof  Array){
+                		const len = formData[key].length
+                		this.formData[key] = len > 0 ? len : ''
+                	} else if(['marketTime', 'nmpaTime'].includes(key)){
+                		this.formData[key] = new Date(formData[key])
+                	}
+                	else {
+                		this.formData[key] = formData[key];
+                	}
+                }
+            }
+            // 处理参数
+			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'}))
+		},
+
+
+		// 获取表单数据
+        getProductFormData() {
+            this.productId = localStorage.getItem('productId') || 0;
+            localStorage.removeItem('productId');
+            if (this.productId > 0) {
+				const that = this;
+				SupplierApi.GetShopBaikeProductForm({productId: this.productId}, function (res) {
+					if (res.code === 0) {
+						that.initFormData(res.data);
+					} else {
+						CAIMEI.dialog('获取产品数据失败', false);
+						setTimeout(function () {
+							that.handleBack();
+						}, 2000);
+					}
+				});
+            }else {
+            	this.resetEmptyListData([],[])
+            }
+        },
+
+        // 获取分类列表
+        getTypeList() {
+            const that = this;
+            SupplierApi.ShopBaikeProductTypeList({commodityType: this.commodityType}, function (res) {
+                that.typeList = res.data;
+                console.log(res);
+            })
+        },
+
+        //添加一条参数
+        addParam() {
+            this.paramEmptyList.push({
+                name: '',
+                content: '',
+                p1: '参数名',
+                p2: '参数信息',
+            })
+        },
+
+        // 删除一条参数
+        removeParam(index) {
+            this.paramEmptyList.splice(index, 1)
+        },
+
+        //添加一条问答
+        addQuestion() {
+            this.questionEmptyList.push({
+                question: '',
+                answer: '',
+                p1: '请输入问题内容',
+                p2: '请输入问题解答内容',
+            })
+        },
+
+        // 删除一条问答
+        removeQuestion(index) {
+            this.questionEmptyList.splice(index, 1)
+        },
+
+        // 初始化可变表单数据
+        resetEmptyListData(paramSource, questionSource) {
+            this.makeEmptyList({
+                target: this.paramEmptyList,
+                source: paramSource,
+                limit: this.minLimitParams,
+                key: 'name',
+                value: 'content',
+            })
+            this.makeEmptyList({
+                target: this.questionEmptyList,
+                source: questionSource,
+                limit: this.minLimitQuestions,
+                key: 'question',
+                value: 'answer',
+            })
+        },
+
+        // 创建可变表单占位列表
+        makeEmptyList(options) {
+            options = {
+                target: [], // 目标数组
+                source: [], // 数据源数组
+                key: '',
+                value: '',
+                limit: 0, // 最小条数
+                argsList: ['参数', '品牌'], // placeholder文本
+                ...options,
+            }
+            let {target, source, limit, argsList, key, value} = options
+            let len = 0
+
+            target.push(
+                ...source.map(v => {
+                    v.p1 = `例如：${argsList[0]}`
+                    v.p2 = `请输入：${argsList[0]}信息`
+                    return v
+                })
+            )
+
+            len = limit - target.length
+            for (let i = 0; i < len; i++) {
+                const obj = {}
+                obj[key] = ''
+                obj[value] = ''
+                if (i <= argsList.length - 1) {
+                    obj.p1 = `例如：${argsList[i]}`
+                    obj.p2 = `请输入：${argsList[i]}信息`
+                } else {
+                    obj.p1 = `例如：${argsList[0]}`
+                    obj.p2 = `请输入：${argsList[0]}信息`
+                }
+                target.push(obj)
+            }
+        },
+
+        // 产品图片上传成功的回调
+        handleImageSuccess(response) {
+        	this.$refs.coverUploader.clearFiles();
+        	this.formData.image = response.data
+        },
+
+        // 认证图片上传成功的回调
+        handleAuthImageSuccess(response, file, fileList) {
+        	this.authImageList = fileList
+        },
+
+        // 移除认证图片
+        handleAuthImageRemove(file, fileList) {
+        	// console.log(fileList)
+            this.authImageList = fileList
+        },
+
+        // 效果图片上传成功的回调
+        handleDisplayImageSuccess(response, file, fileList) {
+        	this.displayImageList = fileList
+        },
+
+        // 移除效果图片
+        handleDisplayImageRemove(file, fileList) {
+            this.displayImageList = fileList
+        },
+
+        // 图片上传前的回调
+        beforeImageUpload(file) {
+            const isLt2M = file.size / 1024 / 1024 < 2
+            if (!isLt2M) {
+                this.$message.error('上传头像图片大小不能超过 2MB!')
+            }
+            return isLt2M
+        },
+
+        // 预览图片
+        handlePictureCardPreview(file) {
+            this.dialogImageUrl = file.url
+            this.dialogVisible = true
+        },
+
+        // 预览图片弹窗
+        handlePictureCardPreview(file) {
+            this.dialogImageUrl = file.url
+            this.dialogVisible = true
+        },
+
+        // 监听formData中类型为数组的数据状态
+        watchArrayStatus(args = []) {
+            args.forEach(arg => {
+                if (this[arg] instanceof Array) {
+                    this.$watch(
+                        arg,
+                        (nval, oval) => {
+                        	console.log(arg, nval.length);
+                        	console.log(this[arg]);
+                        	if(nval.length > 0){
+                        		this.formData[arg] = nval.length
+                        	} else{
+                        		this.formData[arg] = ''
+                        	}
+                        },
+                        {deep: true}
+                    )
+                }
+            })
+        },
+
+        // 滚动到必填位置
+        socrllToErrorInput(){
+            this.$nextTick(() => {
+                const scrollTop = $('.el-form-item__error').eq(0).parent().siblings('.el-form-item__label').offset().top
+                $('body,html').animate({
+                    scrollTop: scrollTop - $('#globalHead').height() -  40
+                }, 800)
+            })
+        }
+
+    },
+})
+
+app.$mount('#productEdit')

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

@@ -0,0 +1,221 @@
+"use strict";
+
+console.log(123);
+
+var productList = new Vue({
+    el: '#productList',
+    data: {
+        name: 'supplier-product-list',
+        refreshType: '',
+        hidden: '',
+        visibilityChange: '',
+        listRecord: 0,
+        shopId: GLOBAL_SHOP_ID || 0,
+        listQuery: {
+            commodityType: 1,
+            productId: '',
+            name: '',
+            auditStatus: '',
+            typeId: '',
+            pageNum: 1,
+            pageSize: 10
+        },
+        pageInput: 1,
+        pageTotal: 0,
+        productList: [],
+        productTypeList: [],
+        categoryKeyMap: {
+            name: 'typeName',
+            value: 'typeId'
+        },
+        auditStatusList: [
+            {
+                name: '全部',
+                value: '',
+            },
+            {
+                name: '待审核',
+                value: 1,
+            },
+            {
+                name: '审核通过',
+                value: 2,
+            },
+            {
+                name: '审核未通过',
+                value: 3,
+            }
+        ]
+    },
+    computed: {
+        pageTotal: function pageTotal() {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            return total > 0 ? total : 1;
+        },
+        showPageBtn: function showPageBtn() {
+            var total = Math.ceil(this.listRecord / this.listQuery.pageSize);
+            total = total > 0 ? total : 1;
+            var index = this.listQuery.pageNum,
+                arr = [];
+
+            if (total <= 6) {
+                for (var i = 1; i <= total; i++) {
+                    arr.push(i);
+                }
+
+                return arr;
+            }
+
+            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
+            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
+            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
+        }
+    },
+    filters: {
+        // 时间格式化
+        formatDate: function formatDate(date) {
+            if (!date) return '---';
+            return dateFormat(new Date(date));
+        }
+    },
+    created: function created() {
+        this.getArticleList();
+        this.fetchArticleCatagory();
+    },
+    mounted: function mounted() {
+        window.name = this.name;
+        $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
+        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+    },
+    methods: {
+        // 获取文章列表
+        getArticleList: function getArticleList() {
+            var that = this;
+            this.listQuery.shopId = this.shopId;
+            SupplierApi.GetShopBaikeProductList(this.listQuery, function (res) {
+                console.log(res);
+                if (res.code === 0) {
+                    that.listRecord = res.data.total;
+                    that.productList = res.data.list;
+                    that.pageTotal = res.data.pages;
+                } else {
+                    CAIMEI.Alert(res.msg, '确定', false);
+                }
+            });
+        },
+        //表格操作按钮点击
+        clickOption: function clickOption(product, type) {
+            var handles = {
+                1: this.toEdit,
+                2: this.changeStatus,
+                3: this.toDetail,
+                4: this.handleDelete
+            };
+            handles[type](product);
+        },
+        //跳转编辑页面
+        toEdit: function toEdit(product) {
+            localStorage.setItem('productId', product.productId);
+            window.open('/supplier/encyclopedia/product-edit.html');
+        },
+        //修改状态
+        changeStatus: function changeStatus(product) {
+            var newStatus = 1;
+
+            if (product.status === 1) {
+                newStatus = 0;
+            }
+
+            SupplierApi.ShopBaikeProductStatusUpdate({
+                productId: product.productId,
+                shopId: this.shopId,
+                status: newStatus
+            }, function (res) {
+                if (res.code === 0) {
+                    // 不刷新数据更新
+                    product.status = newStatus;
+                    CAIMEI.dialog('修改状态成功!');
+                } else {
+                    CAIMEI.dialog('修改状态失败!');
+                }
+            });
+        },
+        //查看
+        toDetail: function toDetail(product) {
+            if (product.auditStatus !== 2) return CAIMEI.dialog('请等待审核通过后查看!');
+            if (!product.status) return CAIMEI.dialog('请启用后查看!');
+            window.open('/encyclopedia/product-' + product.productId + '.html');
+        },
+        // 跳转添加文章页面
+        handleAddArticle: function handleAddArticle() {
+            window.open('/supplier/encyclopedia/product-edit.html');
+        },
+        // 查询文章列表
+        handleSearchList: function handleSearchList() {
+            this.listQuery.pageNum = 1;
+            this.getArticleList();
+        },
+        // 获取文章列表
+        fetchArticleCatagory: function fetchArticleCatagory() {
+            var that = this;
+            SupplierApi.ShopBaikeProductTypeList({ commodityType: 1 }, function (res) {
+                if (res.code === 0) {
+                    that.productTypeList = res.data;
+                } else {
+                    CAIMEI.Alert(res.msg, '确定', false);
+                }
+            });
+        },
+        //删除确认
+        handleDelete: function handleDelete(product) {
+            var that = this;
+            var params = {
+                content: '确认删除该商品信息?',
+                cancelBtnText: '取消',
+                confitmBtnText: '删除'
+            };
+            CAIMEI.Popup(params, function () {
+                that.productDelete(product);
+            });
+        },
+        // 删除文章
+        productDelete: function productDelete(product) {
+            var that = this;
+            SupplierApi.ShopBaikeProductDelete({
+                productId: product.productId
+            }, function (res) {
+                if (res.code === 0) {
+                    that.getArticleList();
+                    CAIMEI.dialog('删除成功!');
+                } else {
+                    CAIMEI.dialog('删除失败!');
+                }
+            });
+        },
+        //页码跳转
+        toPagination: function toPagination(pageNum) {
+            if (pageNum <= this.pageTotal) {
+                this.listQuery.pageNum = pageNum; // console.log('页码跳转');
+                this.getArticleList();
+                $('html ,body').animate({scrollTop: 0}, 400, 'linear'); // 页面置顶
+            }
+        },
+        // 输入框设置页码
+        checkNum: function checkNum() {
+            if (this.pageInput > this.pageTotal) {
+                this.pageInput = this.pageTotal;
+            } else if (this.pageInput < 1) {
+                this.pageInput = 1;
+            }
+        },
+        cateSelectChange(data) {
+            console.log(data);
+            this.listQuery.typeId = data.typeId;
+            this.getArticleList()
+        },
+        auditStatusChange(data){
+            this.listQuery.auditStatus = data.value
+            this.getArticleList()
+        }
+    }
+});

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

@@ -177,7 +177,7 @@ var operationPage = new Vue({
         }
         console.log(this.listQuery.orderState)
         $('.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(1).addClass("on");
+        $('.navLayout').find('.navList').eq(4).addClass("on").find('.con').show().find('a').eq(1).addClass("on");
 
     }
 });

src/main/resources/static/js/supplier-center/setting/information.js

@@ -466,6 +466,6 @@
             }
         });
      $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
-     $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+     $('.navLayout').find('.navList').eq(4).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
     }
  })

src/main/resources/static/js/supplier-center/setting/password.js

@@ -219,7 +219,7 @@ var passwordPage = new Vue({
     mounted: function () {
         var _self = this;
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
-        $('.navLayout').find('.navList').eq(4).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
+        $('.navLayout').find('.navList').eq(5).addClass("on").find('.con').show().find('a').eq(0).addClass("on");
 
          }
 });

src/main/resources/static/js/supplier-center/setting/phone.js

@@ -129,6 +129,6 @@ var phonePage = new Vue({
             _self.form.userId = globalUserData.userId;
         }
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
-        $('.navLayout').find('.navList').eq(3).addClass("on").find('.con').show().find('a').eq(1).addClass("on");
+        $('.navLayout').find('.navList').eq(5).addClass("on").find('.con').show().find('a').eq(1).addClass("on");
     }
 });

src/main/resources/templates/encyclopedia/components/footer.html

@@ -8,7 +8,7 @@
             <span class="br">互联网药品信息服务资格证编号(粤)-非经营性-2021-0339</span>
             <span class="br">中华人民共和国增值电信业务经营许可证</span>
         </p>
-        <p>Copyright © 2015-2020 CAIMEI365.com All Rights Reserved 深圳市采美网络信息有限公司</p>
+        <p>Copyright © 2015-2021 CAIMEI365.com All Rights Reserved 深圳市采美网络信息有限公司</p>
     </div>
 </footer>
 <!-- 底部公共js -->

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

@@ -5,7 +5,7 @@
     <meta charset="UTF-8"/>
     <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
     <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
-    <title>采美百科-产品百科</title>
+    <title>采美百科-仪器百科</title>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/normalize.css(v=${version})}"/>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/base.css(v=${version})}"/>
     <link rel="stylesheet" th:href="@{/css/encyclopedia/common.css(v=${version})}"/>
@@ -23,7 +23,7 @@
 </div>
 <!-- 产品 / 仪器分类 -->
 <div class="category container" id="category">
-    <div class="name"><b>产品分类</b><em></em></div>
+    <div class="name"><b>仪器分类</b><em></em></div>
     <div class="category-list" id="category-list"></div>
     <div
             class="collapse on"

src/main/resources/templates/product/alliance-page.html

@@ -0,0 +1,170 @@
+<!DOCTYPE html>
+<html lang="en" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+	<head>
+		<meta charset="UTF-8" />
+		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
+		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
+		<title>正品联盟</title>
+		<link href="/lib/css/animate-4.1.1.min.css" rel="stylesheet" />
+		<link th:href="@{/css/product/alliance-page.css(v=${version})}" rel="stylesheet" type="text/css">
+	</head>
+	<body>
+	    <input type="hidden" th:value="${coreServer}" id="coreServer">
+		<div id="zplm" v-cloak v-loading="isRequest">
+			<template v-if="!isRequest && !errorMessage">
+				<!-- 顶部 -->
+				<header class="zp-header">
+					<div class="container">
+						<a href="#">
+							<h1>
+								<img src="/img/alliance-page/zp-pc-logo.png" alt="正品联盟" />
+								<span class="name">正品联盟</span>
+							</h1>
+						</a>
+					</div>
+				</header>
+
+				<!-- 内容主体 -->
+				<main class="zp-main">
+					<!-- 商品信息 -->
+					<div class="container zp-row">
+						<div class="zp-img">
+							<!-- 主图 -->
+							<img class="zp-cover-img" :src="coverImage" alt="主图" />
+							<!-- 授权logo -->
+							<img class="zp-auth-logo animate__animated animate__zoomIn" :src="productAuthInfo.authLogo" alt="授权logo" />
+							<!-- 授权标志 -->
+							<img class="zp-auth-sign animate__animated animate__zoomIn" src="/img/alliance-page/zp-auth-sign.png" alt="授权标志" />
+							<!-- 授权牌 -->
+							<img
+								class="zp-auth-card animate__animated animate__zoomIn"
+								:src="productAuthInfo.appletsCertificateImage"
+								v-show="!authCardVisible"
+								@click="handleShowAuthCard"
+								alt="授权牌"
+							/>
+						</div>
+						<div class="zp-info">
+							<h2 class="animate__animated animate__fadeInUp" v-text="productAuthInfo.productName"></h2>
+							<div class="content">
+								<div class="zp-group animate__animated animate__fadeInUp">
+									<div class="zp-item zp-brand">
+										<span>品牌：</span><span v-text="productAuthInfo.brandName"></span>
+									</div>
+									<span class="line"></span>
+									<div class="zp-item zp-origin">
+										<span>产地：</span><span v-text="productAuthInfo.productionPlace"></span>
+									</div>
+								</div>
+								<div class="zp-item zp-sncode animate__animated animate__fadeInUp">
+									<span>SN码：</span>
+									<span>{{ productAuthInfo.snCode | snCode }}</span>
+								</div>
+								<div class="zp-item zp-agent animate__animated animate__fadeInUp">
+									<span>代理商：</span>
+									<span v-text="productAuthInfo.shopName"></span>
+								</div>
+								<a
+									v-if="productAuthInfo.securityLink"
+									:href="productAuthInfo.securityLink"
+									class="zp-click websit animate__animated animate__delay-1s"
+									:class="isPc ? 'animate__fadeInDownBig' : 'animate__fadeInRightBig'"
+								>官网认证<span>&gt;</span>
+								</a>
+							</div>
+							<div class="zp-auth-info animate__animated" :class="isPc ? 'animate__backInUp' : 'animate__fadeInLeft'">
+								<div class="zp-auth-icon"></div>
+								<div class="zp-auth-text">{{ authOrigin }}<b>授予{{ productAuthInfo.authParty }}</b>正品拥有</div>
+							</div>
+						</div>
+					</div>
+					<!-- 参数信息 -->
+					<div class="container zp-row">
+						<div class="zp-title animate__animated animate__fadeInUp">
+							<div>相关参数</div>
+							<div class="line"></div>
+						</div>
+						<div class="zp-params animate__animated" :class="{animate__fadeInUpBig: isPc}">
+							<div
+								class="row animate__animated"
+								:class="!isPc && index % 2 ? 'animate__fadeInLeftBig' : 'animate__fadeInRightBig'"
+								v-for="(param , index) in productAuthInfo.paramList"
+								:key="index"
+								:style="[noWarp]"
+							>
+								<div class="col" v-text="param.name"></div>
+								<div class="col" v-text="param.content"></div>
+							</div>
+						</div>
+					</div>
+				</main>
+				<!-- 底部 -->
+				<footer class="zp-footer">
+					<p><a href="#" @click.prevent="handleShowStatement">采美声明</a>&nbsp;|&nbsp;由采美信息技术提供技术支持</p>
+				</footer>
+
+				<!-- 遮罩层 -->
+				<div class="zp-mask" v-show="showMask"></div>
+				<!-- 弹出层 -->
+				<transition enter-active-class="animate__fadeInUpBig" leave-active-class="animate__fadeOutDownBig">
+					<div class="zp-popup animate__animated" v-show="statementVisible">
+						<div class="zp-popup-content">
+							<span class="close" @click="handleShowStatement"></span>
+							<div class="title">采美声明</div>
+							<div class="content" v-show="showStatementContent">
+								<p>
+									目前，在市面上经常发现不少伪劣医疗美容产品/仪器，让众多的消费者无法辨别产品/仪器的真假，并且给品牌方及品牌代理商造成不少困扰
+								</p>
+								<p>
+									为了提高消费者对产品/仪器的可信度。由采美信息技术有限公司发起并提供技术支持，且得到各品牌与代理商的认可及授权后，共同打造正品
+									联盟平台。将产品/仪器的品牌授牌信息纳入到正品联盟平台。消费者可通过授权牌上二维码扫码得知该产品/仪器的品牌授权信息。通过这些信
+									息即可得知产品/仪器的真假，是否为品牌以及品牌代理商授权过的正品，从而解决消费者与品牌/品牌代理商的困扰。
+								</p>
+								<p>
+									为了提高消费者对产品/仪器的可信度。由采美信息技术有限公司发起并提供技术支持，且得到各品牌与代理商的认可及授权后，共同打造正品
+									联盟平台。将产品/仪器的品牌授牌信息纳入到正品联盟平台。消费者可通过授权牌上二维码扫码得知该产品/仪器的品牌授权信息。通过这些信
+									息即可得知产品/仪器的真假，是否为品牌以及品牌代理商授权过的正品，从而解决消费者与品牌/品牌代理商的困扰。
+								</p>
+							</div>
+						</div>
+					</div>
+				</transition>
+
+				<!-- 图片弹出层 -->
+				<transition enter-active-class="animate__zoomIn" leave-active-class="animate__zoomOut">
+					<div class="zp-popup animate__animated" v-show="authCardVisible">
+						<div class="zp-img-popup">
+							<img :src="productAuthInfo.appletsCertificateImage" alt="授权图片" />
+							<span class="close" @click="handleShowAuthCard"></span>
+						</div>
+					</div>
+				</transition>
+
+				<!-- 侧边二维码 -->
+				<transition enter-active-class="animate__fadeInRight" leave-active-class="animate__fadeOutRight">
+					<div class="zp-wechat-ewm animate__animated" v-show="wechatVisible">
+						<img :src="productAuthInfo.qrCodeImage" alt="关注公众号了解更多"/>
+						<div class="zp-tip">
+							<span>长按识别</span>
+							<span>关注公众号了解更多</span>
+						</div>
+						<span class="close" @click="handleShowWechat"></span>
+					</div>
+				</transition>
+			</template>
+			<template v-else>
+				<div class="not-found">
+					<img src="https://static.caimei365.com/www/not-found.png">
+					<p>该商品授权信息不存在!</p>
+				</div>
+			</template>
+		</div>
+
+		<script src="/lib/jquery-3.6.0.min.js"></script>
+		<script src="/lib/vue2.6.12.min.js"></script>
+		<script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js(v=${version})}"></script>
+		<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
+		<script charset="utf-8" type="text/javascript" th:src="@{/js/product/alliance-page.js(v=${version})}"></script>
+	</body>
+</html>

src/main/resources/templates/supplier-center/article/article-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">

src/main/resources/templates/supplier-center/article/article-list.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">

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

@@ -25,6 +25,13 @@
             <a href="/supplier/article/list.html">文章列表</a>
         </div>
     </div>
+    <div class="navList">
+        <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>
+        </div>
+    </div>
     <div class="navList">
         <span class="tab">管理中心</span>
         <div class="con" style="display:none">

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

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

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

@@ -0,0 +1,261 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-百科文库-添加仪器百科</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <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/edit-page-style.css}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="instrumentEdit" class="edit-page">
+    <div class="navLayout" v-cloak>
+        <div class="crumbs" v-if="isPC">
+            <span>我的采美</span>
+            <span>&gt;</span>
+            <span>百科文库</span>
+            <span>&gt;</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="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-input v-model="formData.name" placeholder="请输入仪器名称"></el-input>
+                            </el-form-item>
+                            <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-input v-model="formData.discription" type="textarea" placeholder="请输入仪器概述"
+                                          :rows="5"></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"
+                                        ref="coverUploader"
+                                        :action="action"
+                                        :show-file-list="false"
+                                        :on-success="handleImageSuccess"
+                                        :before-upload="beforeImageUpload"
+                                        :limit="1"
+                                >
+                                    <img v-if="formData.image" :src="formData.image" class="cover"/>
+                                    <i v-else class="el-icon-plus cover-uploader-icon"></i>
+                                </el-upload>
+                            </el-form-item>
+
+                            <!-- 正品识别 -->
+                            <div class="cm-big-label"><span class="cm-label">正品识别</span></div>
+                            <el-form-item label="认证链接" prop="authLink">
+                                <el-input v-model="formData.authLink" placeholder="请输入认证链接"></el-input>
+                            </el-form-item>
+                            <el-form-item label="认证二维码" prop="authQrCode">
+                                <el-input v-model="formData.authQrCode" v-show="false"></el-input>
+                                <el-upload
+                                        class="cover-uploader"
+                                        ref="authQrCodeUploader"
+                                        :action="action"
+                                        :show-file-list="false"
+                                        :on-success="handleAuthQrCodeSuccess"
+                                        :before-upload="beforeImageUpload"
+                                        :limit="1"
+                                >
+                                    <img v-if="formData.authQrCode" :src="formData.authQrCode" class="cover"/>
+                                    <i v-else class="el-icon-plus cover-uploader-icon"></i>
+                                </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>
+                                <editor v-model="formData.advantage" placeholder="请输入仪器优点"></editor>
+                            </el-form-item>
+
+                            <!-- 仪器缺点 -->
+                            <el-form-item label="仪器缺点" prop="disadvantage" class="cm-big-label-el">
+                                <el-input v-model="formData.disadvantage" v-show="false"></el-input>
+                                <editor v-model="formData.disadvantage" placeholder="请输入仪器缺点"></editor>
+                            </el-form-item>
+
+                            <!-- 仪器原理 -->
+                            <el-form-item label="仪器原理" prop="principle" class="cm-big-label-el">
+                                <el-input v-model="formData.principle" v-show="false"></el-input>
+                                <editor v-model="formData.principle" placeholder="请输入仪器原理"></editor>
+                            </el-form-item>
+
+                            <!-- 仪器档案 -->
+                            <div class="cm-big-label"><span class="cm-label">仪器档案</span></div>
+                            <el-form-item label="品牌" prop="brand">
+                                <el-input v-model="formData.brand" placeholder="请输入仪器品牌"></el-input>
+                            </el-form-item>
+                            <el-form-item label="产地" prop="producePlace">
+                                <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"
+                                                placeholder="上市时间">
+                                </el-date-picker>
+                            </el-form-item>
+                            <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"
+                                                placeholder="NMPA认证时间">
+                                </el-date-picker>
+                            </el-form-item>
+                            <el-form-item label="仪器认证" prop="authImageList">
+                                <el-input v-model="formData.authImageList" v-show="false"></el-input>
+                                <el-upload
+                                        :class="{ 'hide-upload': authImageList.length >= 4 }"
+                                        :action="action"
+                                        list-type="picture-card"
+                                        :on-preview="handlePictureCardPreview"
+                                        :on-remove="handleAuthImageRemove"
+                                        :on-success="handleAuthImageSuccess"
+                                        :file-list="authImageList"
+                                        :limit="4"
+                                >
+                                    <i class="el-icon-plus"></i>
+                                </el-upload>
+                            </el-form-item>
+
+                            <!-- 适应人群 -->
+                            <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>
+                            </el-form-item>
+
+                            <!-- 不适应人群 -->
+                            <el-form-item label="不适应人群" prop="unAdaptiveMan" class="cm-big-label-el">
+                                <el-input v-model="formData.unAdaptiveMan" v-show="false"></el-input>
+                                <editor v-model="formData.unAdaptiveMan" placeholder="请输入不适应人群"></editor>
+                            </el-form-item>
+
+                            <!-- 术前术后 -->
+                            <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>
+                            </el-form-item>
+
+                            <!-- 常见问题 -->
+                            <el-form-item label="常见问题" prop="questionList" class="cm-big-label-el">
+                                <el-input v-model="formData.questionList" v-show="false"></el-input>
+                                <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>
+                                        <el-input placeholder="请输入问题内容" v-model="item.question"></el-input>
+                                        <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"
+                                              @click="removeQuestion(index)"
+                                        >&times;</span
+                                        >
+                                    </div>
+                                </div>
+                            </el-form-item>
+
+                            <el-form-item label="仪器类别" prop="typeId" class="cm-big-label-el">
+                                <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">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="" prop="status" label-position="left">
+                                <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="btns">
+                            <button class="btn break" @click.prevent="handleBack">返回</button>
+                            <button class="btn submit" @click.prevent="handleSave">保存</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 图片预览 -->
+    <el-dialog :visible.sync="dialogVisible">
+        <img width="100%" :src="dialogImageUrl" alt=""/>
+    </el-dialog>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<!-- 引入vue组件 -->
+<template th:replace="supplier-center/encyclopedia/components/form-component"></template>
+
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/wangEditor.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/editor-component.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/instrument-edit.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-百科文库-仪器百科列表</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <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>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="productList" class="article-list">
+    <div class="navLayout" v-cloak>
+        <div v-if="isPC" class="top-row">
+            <div class="crumbs">
+                <span>我的采美</span>
+                <span>&gt;</span>
+                <span>百科文库</span>
+                <span>&gt;</span>
+                <span>仪器百科列表</span>
+            </div>
+            <div class="hot-tip">温馨提示：多发布文章，有利于曝光您的店铺仪器，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>
+        </div>
+        <div class="wrap clear">
+            <!--左侧导航-->
+            <template th:replace="supplier-center/components/tableft"></template>
+            <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>
+                        <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>
+                        <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>
+                                <template v-for="(typeInfo, index) in productTypeList">
+                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
+                                </template>
+                            </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>
+                        <div class="form-item buttons">
+                            <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>
+                <!--列表表格-->
+                <div class="row">
+                    <table class="table">
+                        <tr>
+                            <th>ID</th>
+                            <th>仪器名称</th>
+                            <th>仪器分类</th>
+                            <th>阅读量</th>
+                            <th>审核状态</th>
+                            <th>发布时间</th>
+                            <th>添加时间</th>
+                            <th>状态</th>
+                            <th>操作</th>
+                        </tr>
+                        <template v-for="(productInfo, index) in productList"  >
+                            <tr :key="index" class="tr-row">
+                                <td v-text="productInfo.productId"></td>
+                                <td class="title">
+                                    <div class="title" v-text="productInfo.name" :title="productInfo.name"></div>
+                                </td>
+                                <td v-text="productInfo.typeName"></td>
+                                <td v-text="productInfo.actualPv"></td>
+                                <td>
+                                    <span class="state warning" v-if="productInfo.auditStatus === 1">待审核</span>
+                                    <span class="state success" v-else-if="productInfo.auditStatus === 2">审核通过</span>
+                                    <span class="state danger" v-else>审核失败</span>
+                                    <span class="reason" v-if="productInfo.auditStatus === 3" :title="'审核失败：' + productInfo.failReason">?</span>
+                                </td>
+                                <td class="time">
+                                    <div class="time">{{ productInfo.publishTime | formatDate }}</div>
+                                </td>
+                                <td class="time">
+                                    <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>
+                                </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 search" @click="clickOption(productInfo, 3)">查看</button>
+                                        <button class="form-button delete" @click="clickOption(productInfo, 4)">删除</button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </template>
+                    </table>
+                </div>
+                <!--页码-->
+                <div class="pageWrap clear" v-if="isPC && pageTotal>1">
+                    <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)"
+                       href="javascript:void(0);"></a>
+                    <template v-for="n in showPageBtn">
+                        <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)"
+                           href="javascript:void(0);" v-text="n"></a>
+                        <span v-else>···</span>
+                    </template>
+                    <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)"
+                       href="javascript:void(0);"></a>
+                    <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+                    <span>跳至</span>
+                    <input v-model="pageInput" @blur="checkNum()"/>
+                    <span>页</span>&nbsp;
+                    <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+
+<script charset="utf-8" type="text/javascript" th:src="@{/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>
+</body>
+</html>

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

@@ -0,0 +1,240 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-百科文库-添加产品百科</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <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/edit-page-style.css}" rel="stylesheet" type="text/css">
+    <template th:replace="components/analysis"></template>
+</head>
+<body>
+<input type="hidden" th:value="${coreServer}" id="coreServer">
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="productEdit" class="edit-page">
+    <div class="navLayout" v-cloak>
+        <div class="crumbs" v-if="isPC">
+            <span>我的采美</span>
+            <span>&gt;</span>
+            <span>百科文库</span>
+            <span>&gt;</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="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-input v-model="formData.name" placeholder="请输入产品名称"></el-input>
+                            </el-form-item>
+                            <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-input v-model="formData.discription" type="textarea" placeholder="请输入产品概述"
+                                          :rows="5"></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"
+                                        ref="coverUploader"
+                                        :action="action"
+                                        :show-file-list="false"
+                                        :on-success="handleImageSuccess"
+                                        :before-upload="beforeImageUpload"
+                                        :limit="1"
+                                >
+                                    <img v-if="formData.image" :src="formData.image" class="cover"/>
+                                    <i v-else class="el-icon-plus cover-uploader-icon"></i>
+                                </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>
+                                <editor v-model="formData.advantage" placeholder="请输入产品优点"></editor>
+                            </el-form-item>
+
+                            <!-- 产品缺点 -->
+                            <el-form-item label="产品缺点" prop="disadvantage" class="cm-big-label-el">
+                                <el-input v-model="formData.disadvantage" v-show="false"></el-input>
+                                <editor v-model="formData.disadvantage" placeholder="请输入产品缺点"></editor>
+                            </el-form-item>
+
+                            <!-- 产品原理 -->
+                            <el-form-item label="产品原理" prop="principle" class="cm-big-label-el">
+                                <el-input v-model="formData.principle" v-show="false"></el-input>
+                                <editor v-model="formData.principle" placeholder="请输入产品原理"></editor>
+                            </el-form-item>
+
+                            <!-- 产品档案 -->
+                            <div class="cm-big-label"><span class="cm-label">产品档案</span></div>
+                            <el-form-item label="品牌" prop="brand">
+                                <el-input v-model="formData.brand" placeholder="请输入产品品牌"></el-input>
+                            </el-form-item>
+                            <el-form-item label="产地" prop="producePlace">
+                                <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"
+                                                placeholder="上市时间">
+                                </el-date-picker>
+                            </el-form-item>
+                            <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"
+                                                placeholder="NMPA认证时间">
+                                </el-date-picker>
+                            </el-form-item>
+                            <el-form-item label="产品认证" prop="authImageList">
+                                <el-input v-model="formData.authImageList" v-show="false"></el-input>
+                                <el-upload
+                                        :class="{ 'hide-upload': authImageList.length >= 4 }"
+                                        :action="action"
+                                        list-type="picture-card"
+                                        :on-preview="handlePictureCardPreview"
+                                        :on-remove="handleAuthImageRemove"
+                                        :on-success="handleAuthImageSuccess"
+                                        :file-list="authImageList"
+                                        :limit="4"
+                                >
+                                    <i class="el-icon-plus"></i>
+                                </el-upload>
+                            </el-form-item>
+
+                            <!-- 适应人群 -->
+                            <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>
+                            </el-form-item>
+
+                            <!-- 不适应人群 -->
+                            <el-form-item label="不适应人群" prop="unAdaptiveMan" class="cm-big-label-el">
+                                <el-input v-model="formData.unAdaptiveMan" v-show="false"></el-input>
+                                <editor v-model="formData.unAdaptiveMan" placeholder="请输入不适应人群"></editor>
+                            </el-form-item>
+
+                            <!-- 术前术后 -->
+                            <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>
+                            </el-form-item>
+
+                            <!-- 常见问题 -->
+                            <el-form-item label="常见问题" prop="questionList" class="cm-big-label-el">
+                                <el-input v-model="formData.questionList" v-show="false"></el-input>
+                                <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>
+                                        <el-input placeholder="请输入问题内容" v-model="item.question"></el-input>
+                                        <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"
+                                              @click="removeQuestion(index)"
+                                        >&times;</span
+                                        >
+                                    </div>
+                                </div>
+                            </el-form-item>
+
+                            <el-form-item label="产品类别" prop="typeId" class="cm-big-label-el">
+                                <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">
+                                    </el-option>
+                                </el-select>
+                            </el-form-item>
+                            <el-form-item label="" prop="status" label-position="left">
+                                <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="btns">
+                            <button class="btn break" @click.prevent="handleBack">返回</button>
+                            <button class="btn submit" @click.prevent="handleSave">保存</button>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- 图片预览 -->
+    <el-dialog :visible.sync="dialogVisible">
+        <img width="100%" :src="dialogImageUrl" alt=""/>
+    </el-dialog>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<!-- 引入vue组件 -->
+<template th:replace="supplier-center/encyclopedia/components/form-component"></template>
+
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/wangEditor.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/element-ui.min.js}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/center.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/editor-component.js(v=${version})}"></script>
+<script charset="UTF-8" type="text/javascript" th:src="@{/js/supplier-center/encyclopedia/product-edit.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -0,0 +1,150 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-百科文库-产品百科列表</title>
+    <template th:replace="components/head-link"></template>
+    <link th:href="@{/css/base/center.css(v=${version})}" rel="stylesheet" type="text/css">
+    <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>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 我的采美 -->
+<div id="productList" class="article-list">
+    <div class="navLayout" v-cloak>
+        <div v-if="isPC" class="top-row">
+            <div class="crumbs">
+                <span>我的采美</span>
+                <span>&gt;</span>
+                <span>百科文库</span>
+                <span>&gt;</span>
+                <span>产品百科列表</span>
+            </div>
+            <div class="hot-tip">温馨提示：多发布文章，有利于曝光您的店铺产品，提高成交量（发布并且审核通过后，可在信息中心搜索您的文章）</div>
+        </div>
+        <div class="wrap clear">
+            <!--左侧导航-->
+            <template th:replace="supplier-center/components/tableft"></template>
+            <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>
+                        <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>
+                        <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>
+                                <template v-for="(typeInfo, index) in productTypeList">
+                                    <option :value="typeInfo.typeId" :key="index">{{typeInfo.typeName}}</option>
+                                </template>
+                            </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>
+                        <div class="form-item buttons">
+                            <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>
+                <!--列表表格-->
+                <div class="row">
+                    <table class="table">
+                        <tr>
+                            <th>ID</th>
+                            <th>产品名称</th>
+                            <th>产品分类</th>
+                            <th>阅读量</th>
+                            <th>审核状态</th>
+                            <th>发布时间</th>
+                            <th>添加时间</th>
+                            <th>状态</th>
+                            <th>操作</th>
+                        </tr>
+                        <template v-for="(productInfo, index) in productList"  >
+                            <tr :key="index" class="tr-row">
+                                <td v-text="productInfo.productId"></td>
+                                <td class="title">
+                                    <div class="title" v-text="productInfo.name" :title="productInfo.name"></div>
+                                </td>
+                                <td v-text="productInfo.typeName"></td>
+                                <td v-text="productInfo.actualPv"></td>
+                                <td>
+                                    <span class="state warning" v-if="productInfo.auditStatus === 1">待审核</span>
+                                    <span class="state success" v-else-if="productInfo.auditStatus === 2">审核通过</span>
+                                    <span class="state danger" v-else>审核失败</span>
+                                    <span class="reason" v-if="productInfo.auditStatus === 3" :title="'审核失败：' + productInfo.failReason">?</span>
+                                </td>
+                                <td class="time">
+                                    <div class="time">{{ productInfo.publishTime | formatDate }}</div>
+                                </td>
+                                <td class="time">
+                                    <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>
+                                </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 search" @click="clickOption(productInfo, 3)">查看</button>
+                                        <button class="form-button delete" @click="clickOption(productInfo, 4)">删除</button>
+                                    </div>
+                                </td>
+                            </tr>
+                        </template>
+                    </table>
+                </div>
+                <!--页码-->
+                <div class="pageWrap clear" v-if="isPC && pageTotal>1">
+                    <a v-if="listQuery.pageNum>1" class="prev" @click="toPagination(listQuery.pageNum*1-1)"
+                       href="javascript:void(0);"></a>
+                    <template v-for="n in showPageBtn">
+                        <a v-if="n" :class="{'on':(n==listQuery.pageNum)}" @click="toPagination(n)"
+                           href="javascript:void(0);" v-text="n"></a>
+                        <span v-else>···</span>
+                    </template>
+                    <a v-if="listQuery.pageNum<pageTotal" class="next" @click="toPagination(listQuery.pageNum*1+1)"
+                       href="javascript:void(0);"></a>
+                    <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
+                    <span>跳至</span>
+                    <input v-model="pageInput" @blur="checkNum()"/>
+                    <span>页</span>&nbsp;
+                    <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+
+<script charset="utf-8" type="text/javascript" th:src="@{/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>
+</body>
+</html>