供应商发货 添加商品资质信息~

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

@@ -25,7 +25,7 @@ public class SupplierPageController extends BaseController {
     /** 添加物流 */
 	private static final String LOGISTICS_ADD = "supplier-center/order/logistics-add";
     /** 商品资质详情 */
-	private static final String QUALIFICATIONS_DETAIL = "supplier-center/order/qualifications-detail";
+	private static final String QUALIFICATIONS_DETAIL = "supplier-center/order/qualifications-details";
     /** 添加编辑商品资质 */
 	private static final String QUALIFICATIONS_ADD = "supplier-center/order/qualifications-add";
     /** 售货清单 */
@@ -103,7 +103,6 @@ public class SupplierPageController extends BaseController {
     public String qualificationsDetail() {
         return QUALIFICATIONS_DETAIL;
     }
-
     /** 添加商品资质 */
     @GetMapping("/supplier/order/qualifications/add.html")
     public String qualificationsAdd() {

src/main/resources/static/css/supplier-center/order/qualifications-details.css

@@ -1,114 +1,37 @@
 @media screen and (min-width:768px) {
     .crumbs {font-size: 16px;color: #22272e}
-    .userinfo {padding: 5px 20px;background: #fff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
-    .info {height: 56px;line-height: 56px;border-bottom: solid 1px #e2e7ef;font-size: 16px;color: #22272e;overflow: hidden}
-    .comback {width: 90px;height: 36px;background-color: #ffe6dc;border-radius: 2px;border: solid 1px #e15616;float: right;line-height: 36px;margin-top: 10px;cursor: pointer;color: #e15616;}
-    .userinfo .user p {display: inline-block;color: #627386;margin: 15px 45px 15px 0px;}
-    .userinfo .user p span {color: #22272e;}
-    .address {margin-bottom: 15px;color: #627386;}
-    .address span {color: #22272e;}
-    .product-info {margin-top: 20px;}
-    .price {overflow: hidden;}
-    .protitle {color: #22272e;font-size: 16px;padding: 15px;}
-    .product {background: #fff;padding: 10px 20px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
-    .product-title {border-bottom: solid 1px #e2e7ef;height: 54px;line-height: 54px}
-    .product-title li {display: inline-block;list-style: none;color: #627386;width: 11%;text-align: center;}
-    .product-title li:nth-child(1) {width: 50%;text-align: left}
-    .pro-information li {list-style: none;}
-    .pro-information li {width: 100%;padding: 10px 0;}
-    .pro-information li div {display: inline-block;width: 11%;text-align: center;color: #627386;}
-    .pro-information li div.product-img {width: 50%;text-align: left;}
-    .product-img img {width: 70px;height: 70px;border: solid 1px #e2e7ef;}
-    .product-img h3 {display: inline-block;width: 300px;margin-left: 10px;font-size: 16px;color: #22272e;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
-    .add-logistics{height: auto;background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);margin-top: 10px;padding: 20px;color: #627386;}
-    .company-number{display: flex;width: 100%;}
-    .logist-right>div{margin-top: 5px;}
-    .company-number>div{width: 49%;display: inline-block;margin: 2px 0;flex: 2;}
-    .company{width: 210px;height: 36px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;color: #627386;padding-left: 10px;cursor: pointer;}
-    input::placeholder{color: #9aa5b5;font-size: 12px;}
-    textarea::placeholder {color: #9aa5b5;}
-    .red{color: #f94b4b;}
-    .companyBtn{position: absolute;width: 36px;height: 36px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;margin-left: 8px;cursor: pointer;}
-    .mIcon.add{background: url(/img/account/add.png) no-repeat;height: 80px;display: block;background-size: 80px;}
-    .add-text {font-size: 12px;color: #333330;opacity: 0.5;position: absolute;top: 60%;right: 13px;}
-    .upload-file{position: relative;float: left;margin: 10px 10px 10px 0px;cursor: pointer;width: 80px;height: 80px;border-radius: 2px;}
-    .input-file{width: 80px;height: 80px;opacity: 0;cursor: pointer;position: absolute;top: 0}
-    #uploadGoodsImages{overflow: hidden;float: left;width: 90%}
-    .release-from{overflow: hidden;}
-    .red-color{float: left;height: 80px;line-height: 80px;width: 85px;}
-    .upload-file img{width: 100%;height: 100%;}
-    .icon.del:before {width: 20px;height: 20px;background-position: -116px -138px;position: absolute;top: -3px;right: -3px;}
-    .form-upload-tips .icon-wen:before {width: 20px;height: 20px;background-position: -84px -144px;cursor: pointer; margin-top: 10px;}
-    .wen-tips {width: 300px;height: 47px;background-color: #1890f9;box-shadow: 0px 3px 6px 0px rgba(24, 144, 249, 0.17);color: #fff;position: absolute;left: inherit;font-size: 12px;text-align: center;line-height: 47px;top: 33px;display: none;}
-    .form-upload-tips{float: left;position: relative;}
-    .form-upload-tips .wen-tips:before {content: '';width: 0px;height: 0px;border-width: 8px;border-style: solid;border-color: transparent transparent #1890f9 transparent;position: absolute;top: -15px;left:5px;}
-    .form-upload-tips:hover .wen-tips {display: block;}
-    .remarks textarea{width: 496px;height: 114px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;resize: none;padding: 10px;color: #9aa5b5;}
-    .remarks{margin-top: 25px;position: relative;}
-    .remarks .rema{height: 114px;line-height: 114px;display: inline-block;float: left;width: 85px;text-align: center}
-    .size-num {position: absolute;right: 350px;top: 109px;color: #9aa5b5}
-    .defineBtn button{width: 90px;height: 36px;line-height: 36px;text-align: center;color: #fff;background-color: #e15616;border-radius: 2px;border: solid 1px #e15616;cursor: pointer;margin-right: 15px}
-    .defineBtn{overflow: hidden;padding: 20px;}
-    .defineBtn>div{float: right;}
-    .icon.add-company:before{width: 20px;height: 25px;background-position: -307px -511px}
-    .icon.sub-company:before{width: 20px;height: 25px;background-position: -337px -511px}
-
+    .qualifications-content{background: #fff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);min-height: 518px;box-sizing: border-box;padding:32px 197px;}
+    .qualifications-content.empty{padding: 126px 197px;}
+    .qualifications-content.empty .empty-container-image{width: 210px;height: 140px;}
+    .qualifications-content.empty .error-text{line-height:44px;font-size: 14px;color: #22272e;}
+    .qualifications-content.empty .login-btn{width: 156px;height: 36px;margin: 0 auto;font-size: 14px;background-color: #E15616;color: #FFFFFF;text-align: center;line-height: 36px;cursor: pointer;}
+    .qualifications-content .list{width: 100%;height: auto;margin-bottom: 20px;}
+    .qualifications-content .list-view-title{width: 100%;height: 44px;line-height:44px;font-size: 16px;color: #22272e;}
+    .qualifications-content .list-view{width: 100%;min-height: 44px;line-height:44px;font-size: 14px;}
+    .qualifications-content .list-view.margin{margin-bottom: 20px;}
+    .qualifications-content .list-view-label{width: 74px;min-height: 44px;line-height:44px;font-size: 14px;color: #627386;float: left;}
+    .qualifications-content .list-view-text{width:500px;min-height: 44px;line-height:44px;font-size: 14px;color: #22272e;float: left;}
+    .qualifications-content .list-file-view{width:500px;min-height: 30px;line-height:30px;font-size: 14px;color: #22272e;float: left;}
+    .qualifications-content .list-view-image{width:112px;height: 80px;display: block;float: left;margin-right: 16px;margin-bottom: 16px;}
+    .qualifications-content .list-view-image:nth-child(4n){margin-right: 0;}
+    .qualifications-btn{width: 100%;height: 36px;float: left;margin-top: 100px;}
+    .qualifications-btn .edit-button{width: 156px;height: 36px;margin: 0 auto;font-size: 14px;background-color: #E15616;color: #FFFFFF;text-align: center;line-height: 36px;}
 }
 
 /*移动*/
 @media screen and (max-width:768px) {
     .crumbs {font-size:3.4vw;color: #22272e}
-    .userinfo {padding: 1.3vw 5.3vw;background: #fff;box-shadow: 0 .8vw 1.6vw 0 rgba(0, 0, 0, 0.07);}
-    .info {height: 13vw;line-height: 13vw;font-size: 3.4vw;color: #22272e;overflow: hidden}
-    .comback {width: 22.4vw;height: 7.2vw;background-color: #ffe6dc;border-radius: 4.8vw;border: solid .27vw #e15616;float: right;line-height: 7.2vw;margin-top: 2.7vw;cursor: pointer;color: #e15616;}
-    .userinfo .user p {display: inline-block;color: #627386;margin: 0 6.7vw 2.7vw 0;}
-    .userinfo .user p:nth-child(1){width: 100%}
-    .userinfo .user p span {color: #22272e;}
-    .address {margin-bottom: 4vw;color: #627386;}
-    .address span {color: #22272e;}
-    .product-info {box-shadow: 0px .8vw 1.6vw 0px rgba(0, 0, 0, 0.07);background: #fff;margin-top: 2.7vw}
-    .price {overflow: hidden;}
-    .protitle {color: #22272e;font-size: 3.4vw;padding: 2.7vw 5.3vw;}
-    .product {background: #fff;padding: 2.7vw 5.3vw;box-shadow: 0px .8vw 1.3vw 0px rgba(0, 0, 0, 0.07);height: 50vw}
-    .product-title {height: 5.3vw;line-height: 5.3vw;position: relative;width: 100%}
-    .product-title li {display: inline-block;list-style: none;color: #9aa5b5;position: relative;top: 26vw;width: 21vw}
-    .product-title li:nth-child(1) {width: 100%;text-align: left;top: 0;}
-    .pro-information li {list-style: none;}
-    .pro-information li {width: 100%;padding: 2.7vw 0;}
-    .pro-information li div {display: inline-block;color: #22272e;top: 11.6vw;width: 21vw;position: relative}
-    .pro-information li div.product-img {width: 100%;text-align: left;top: 0}
-    .product-img img {width: 18.7vw;height: 18.7vw;border: solid .27vw #e2e7ef;}
-    .product-img h3 {display: inline-block;width: 40vw;margin-left: 2.7vw;font-size: 3.4VW;color: #22272e;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
-    .add-logistics{height: auto;background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);margin-top: 2.7vw;padding: 20px;color: #627386;}
-    .company-number{width: 100%;}
-    .logist-right>div{margin-top: 1.3vw;}
-    .company-number>div{margin: 4vw 0;}
-    .logistics-order-number.company{width: 72vw}
-    .company{width: 75vw;height: 11.8vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;color: #9aa5b5;padding-left: 2.7vw;margin-top: 2.7vw}
-    input::placeholder,textarea::placeholder {color: #9aa5b5;font-size:3.2vw;}
-    textarea::placeholder {color: #9aa5b5;}
-    .red{color: #f94b4b;}
-    .companyBtn{width: 11.8vw;height: 11.8vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;
-    margin-left: .53vw;cursor: pointer;color: #b8bfca;position: relative;top:1.3vw}
-    .mIcon.add{background: url(/img/account/add.png) no-repeat;height: 23vw;display: block;    background-size: 23vw;}
-    .upload-file{position: relative;float: left;margin: 0 2.7vw 2.7vw 0px;cursor: pointer;width: 23vw;height: 23vw;border-radius: .53vw;}
-    .input-file{width: 23vw;height:23vw;opacity: 0;cursor: pointer;position: absolute;top: 0;}
-    #uploadGoodsImages{overflow: hidden;float: left;width: 100%;margin-top: 2.7vw}
-    .release-from{overflow: hidden;}
-    .upload-file img{width: 100%;height: 100%;}
-    .mIcon.del:before {width: 5.3vw;height: 5.3vw;background-position: -90vw -7.5vw;position: absolute;top: -.8vw;right: -.8vw}
-    .form-upload-tips .icon-wen:before {width: 5.3vw;height: 5.3vw;background-position: -76.4vw 0vw;cursor: pointer;}
-    .wen-tips {width: 67.2vw;height:9vw;background-color: #1890f9;box-shadow: 0px .8vw 1.3vw 0px rgba(24, 144, 249, 0.17);color: #fff;position: absolute;left: inherit;font-size: 2.6vw;text-align: left;line-height: 9vw;top:8.8vw;display: none;}
-    .form-upload-tips{float: left;position: relative;}
-    .form-upload-tips .wen-tips:before {content: '';width: 0px;height: 0px;border-width: 8px;border-style: solid;border-color: transparent transparent #1890f9 transparent;position: absolute;top: -3.5vw;left:1.3vw;}
-    .form-upload-tips:hover .wen-tips {display: block;}
-    .remarks textarea{width: 83.4vw;height: 42.4vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;resize: none;padding: 2.7vw;color: #9aa5b5;}
-    .remarks{position: relative}
-    .remarks .rema{line-height:10.7vw ;}
-    .size-num {position: absolute;right: 2.7vw;top: 52vw;color: #9aa5b5}
-    .defineBtn button{width: 100%;height: 11.2vw;line-height: 11.2vw;text-align: center;color: #fff;background-color: #e15616;border-radius: .53vw;border: solid .27vw #e15616;cursor: pointer;margin-bottom: 2.7vw}
-    .defineBtn button:nth-child(2){background:#ffe6dc;color: #e15616 }
-    .defineBtn{overflow: hidden;margin-top: 4vw}
-    .mIcon.add-company:before{width: 5.3vw;height: 6.7vw;background-position: -33.9vw -68.8vw}
-    .mIcon.sub-company:before{width: 5.3vw;height:6.7vw;background-position: -41.3vw -68vw}
+    .qualifications-content{background: #fff;box-sizing: border-box;padding:3.4vw;}
+    .qualifications-content .list{width: 100%;height: auto;margin-bottom: 2vw;}
+    .qualifications-content .list-view-title{width: 100%;height:8.8vw;line-height:8.8vw;font-size: 3.6vw;color: #22272e;}
+    .qualifications-content .list-view{width: 100%;height:8.8vw;line-height:8.8vw;font-size: 3.2vw;}
+    .qualifications-content .list-view.margin{margin-bottom: 20px;}
+    .qualifications-content .list-view-label{width: 16.2vw;min-height: 8.8vw;line-height:8.8vw;font-size: 3.2vw;color: #627386;float: left;}
+    .qualifications-content .list-view-text{width:77vw;min-height: 8.8vw;line-height:8.8vw;font-size: 3.2vw;color: #22272e;float: left;}
+    .qualifications-content .list-file-view{width:100%;min-height: 6vw;line-height:6vw;font-size: 3.2vw;color: #22272e;float: left;}
+    .qualifications-content .list-view-image{width:17.6vw;height: 13.6vw;display: block;float: left;margin-right: 2vw;margin-bottom: 2vw;}
+    .qualifications-content .list-view-image:nth-child(4n){margin-right: 0;}
+    .qualifications-btn{width: 100%;height: 11.2vw;float: left;margin-top: 5vw;}
+    .qualifications-btn .edit-button{width: 100%;height: 11.2vw;margin: 0 auto;font-size: 3.2vw;background-color: #E15616;color: #FFFFFF;text-align: center;line-height: 11.2vw;}
+
 }

src/main/resources/static/css/supplier-center/order/qualifications.css

@@ -1,114 +1,83 @@
 @media screen and (min-width:768px) {
     .crumbs {font-size: 16px;color: #22272e}
-    .userinfo {padding: 5px 20px;background: #fff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
-    .info {height: 56px;line-height: 56px;border-bottom: solid 1px #e2e7ef;font-size: 16px;color: #22272e;overflow: hidden}
-    .comback {width: 90px;height: 36px;background-color: #ffe6dc;border-radius: 2px;border: solid 1px #e15616;float: right;line-height: 36px;margin-top: 10px;cursor: pointer;color: #e15616;}
-    .userinfo .user p {display: inline-block;color: #627386;margin: 15px 45px 15px 0px;}
-    .userinfo .user p span {color: #22272e;}
-    .address {margin-bottom: 15px;color: #627386;}
-    .address span {color: #22272e;}
-    .product-info {margin-top: 20px;}
-    .price {overflow: hidden;}
-    .protitle {color: #22272e;font-size: 16px;padding: 15px;}
-    .product {background: #fff;padding: 10px 20px;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);}
-    .product-title {border-bottom: solid 1px #e2e7ef;height: 54px;line-height: 54px}
-    .product-title li {display: inline-block;list-style: none;color: #627386;width: 11%;text-align: center;}
-    .product-title li:nth-child(1) {width: 50%;text-align: left}
-    .pro-information li {list-style: none;}
-    .pro-information li {width: 100%;padding: 10px 0;}
-    .pro-information li div {display: inline-block;width: 11%;text-align: center;color: #627386;}
-    .pro-information li div.product-img {width: 50%;text-align: left;}
-    .product-img img {width: 70px;height: 70px;border: solid 1px #e2e7ef;}
-    .product-img h3 {display: inline-block;width: 300px;margin-left: 10px;font-size: 16px;color: #22272e;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
-    .add-logistics{height: auto;background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);margin-top: 10px;padding: 20px;color: #627386;}
-    .company-number{display: flex;width: 100%;}
-    .logist-right>div{margin-top: 5px;}
-    .company-number>div{width: 49%;display: inline-block;margin: 2px 0;flex: 2;}
-    .company{width: 210px;height: 36px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;color: #627386;padding-left: 10px;cursor: pointer;}
-    input::placeholder{color: #9aa5b5;font-size: 12px;}
-    textarea::placeholder {color: #9aa5b5;}
-    .red{color: #f94b4b;}
-    .companyBtn{position: absolute;width: 36px;height: 36px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;margin-left: 8px;cursor: pointer;}
-    .mIcon.add{background: url(/img/account/add.png) no-repeat;height: 80px;display: block;background-size: 80px;}
-    .add-text {font-size: 12px;color: #333330;opacity: 0.5;position: absolute;top: 60%;right: 13px;}
-    .upload-file{position: relative;float: left;margin: 10px 10px 10px 0px;cursor: pointer;width: 80px;height: 80px;border-radius: 2px;}
-    .input-file{width: 80px;height: 80px;opacity: 0;cursor: pointer;position: absolute;top: 0}
-    #uploadGoodsImages{overflow: hidden;float: left;width: 90%}
-    .release-from{overflow: hidden;}
-    .red-color{float: left;height: 80px;line-height: 80px;width: 85px;}
-    .upload-file img{width: 100%;height: 100%;}
-    .icon.del:before {width: 20px;height: 20px;background-position: -116px -138px;position: absolute;top: -3px;right: -3px;}
-    .form-upload-tips .icon-wen:before {width: 20px;height: 20px;background-position: -84px -144px;cursor: pointer; margin-top: 10px;}
-    .wen-tips {width: 300px;height: 47px;background-color: #1890f9;box-shadow: 0px 3px 6px 0px rgba(24, 144, 249, 0.17);color: #fff;position: absolute;left: inherit;font-size: 12px;text-align: center;line-height: 47px;top: 33px;display: none;}
-    .form-upload-tips{float: left;position: relative;}
-    .form-upload-tips .wen-tips:before {content: '';width: 0px;height: 0px;border-width: 8px;border-style: solid;border-color: transparent transparent #1890f9 transparent;position: absolute;top: -15px;left:5px;}
-    .form-upload-tips:hover .wen-tips {display: block;}
-    .remarks textarea{width: 496px;height: 114px;background-color: #ffffff;border-radius: 2px;border: solid 1px #b8bfca;resize: none;padding: 10px;color: #9aa5b5;}
-    .remarks{margin-top: 25px;position: relative;}
-    .remarks .rema{height: 114px;line-height: 114px;display: inline-block;float: left;width: 85px;text-align: center}
-    .size-num {position: absolute;right: 350px;top: 109px;color: #9aa5b5}
-    .defineBtn button{width: 90px;height: 36px;line-height: 36px;text-align: center;color: #fff;background-color: #e15616;border-radius: 2px;border: solid 1px #e15616;cursor: pointer;margin-right: 15px}
-    .defineBtn{overflow: hidden;padding: 20px;}
-    .defineBtn>div{float: right;}
-    .icon.add-company:before{width: 20px;height: 25px;background-position: -307px -511px}
-    .icon.sub-company:before{width: 20px;height: 25px;background-position: -337px -511px}
-
+    .icon.del:before {width: 20px;height: 20px;background-position: -116px -138px;position: absolute;top: -3px;right: -3px;cursor: pointer;}
+    .qualifications-title{width: 100%;height: 36px;background-image: linear-gradient(270deg, #ffffff 0%, rgba(225,86,22,0.1) 51%, #ffffff 100%);color: #E15616;font-size: 16px;line-height: 36px;text-align: center;margin-bottom: 20px;}
+    .qualifications-content{background: #fff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);min-height: 500px;box-sizing: border-box;padding:32px 236px;}
+    .qualifications-content .list{width: 100%;height: auto;margin-bottom: 20px;}
+    .qualifications-content .list-view-title{width: 100%;height: 44px;line-height:44px;font-size: 16px;color: #22272e;}
+    .qualifications-content .list-view-title .title-left{float: left;}
+    .qualifications-content .list-view-title .title-right{float: right;color: #E15616;cursor: pointer;}
+    .qualifications-content .list-view{width: 100%;min-height: 44px;line-height:44px;font-size: 14px;}
+    .qualifications-content .list-view.margin{margin-bottom: 20px;}
+    .qualifications-content .list-view-label{width: 100%;min-height: 30px;line-height:30px;font-size: 14px;color: #627386;float: left;}
+    .qualifications-content .select {position: relative;display: block;width: 100%;color: #22272e;vertical-align: middle;text-align: left;height: 36px;user-select: none}
+    .qualifications-content .select .placeholder {position: relative;display: block;padding-left: 10px;border-radius: 2px;cursor: pointer;border: solid 1px #b8bfca;height: 36px;line-height: 36px;color: #333333;}
+    .qualifications-content .select.is-open .placeholder:after {content: '\f077';}
+    .qualifications-content .select.is-open ul {display: block;}
+    .qualifications-content .select.select--white .placeholder {background: #fff;color: #999;}
+    .qualifications-content .select.select--white .placeholder:hover {background: #fafafa;}
+    .qualifications-content .select ul {position: absolute;overflow: hidden;width: 100%;background: #fff;border-radius: 2px;top: 100%;left: 0;list-style: none;margin: 2px 0 0 0;padding: 0;z-index: 100;border: solid 1px #b8bfca;max-height: 350px;overflow: auto;}
+    .qualifications-content .select ul li {display: block;text-align: left;padding: 10px;color: #999;cursor: pointer;box-sizing: border-box;height: 50px;line-height: 30px;}
+    .qualifications-content .select ul li:hover {background-color: #ffe6dc;color: #e15616}
+    .icon.brand:before {width: 25px;height: 25px;background-position: -87px 11px;position: absolute;right: 15px}
+    .qualifications-content .list-view-text{width:100%;min-height: 44px;line-height:44px;font-size: 14px;color: #22272e;float: left;}
+    .qualifications-content .list-view-text .input{width:100%;height: 36px;padding: 0 10px;line-height:36px;font-size: 14px;color: #22272e;box-sizing: border-box;border: 1px solid #b8bfca;border-radius: 2px;}
+    .qualifications-content .list-file-view{width:100%;min-height: 30px;line-height:30px;font-size: 14px;color: #22272e;float: left;position: relative;}
+    .qualifications-content .list-view-upload{width: 100%;height: 80px;float: left;}
+    .qualifications-content .upload-file{width: 92px;height: 66px;float: left;position: relative;margin-right: 7px;}
+    .qualifications-content .upload-file .icon-add-file{width:100% ;height: 100%;background: url("/img/supplier/icon-upload-file@2x.png");display: block;}
+    .qualifications-content .upload-file .icon-add-img{width:100% ;height: 100%;background: url("/img/supplier/icon-upload-image@2x.png");display: block;}
+    .qualifications-content .upload-file .input-file{width:100% ;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;}
+    .qualifications-content .upload-image{width: 92px;height: 66px;float: left;margin-right: 7px;margin-bottom: 7px;border: solid 1px #b8bfca;box-sizing: border-box;cursor: pointer;position: relative;}
+    .qualifications-content .list-view-image{width: 100%;height: 100%;display: block;}
+    .qualifications-content .list-view-image:nth-child(4n){margin-right: 0;}
+    .qualifications-content .list-btn{width: 156px;height: 36px;cursor: pointer;box-sizing: border-box;border: 1px solid #E15616;line-height: 36px;color: #E15616;margin: 0 auto;border-radius: 2px;padding: 10px 37px;}
+    .qualifications-content .list-btn .i-span{width: 16px;height: 16px;display: block;border-radius: 50%;border: 1px solid #E15616;box-sizing: border-box;text-align: center;line-height: 13px;font-size: 14px;float: left;}
+    .qualifications-content .list-btn .p-span{display: block;float: right;line-height: 16px;height: 16px;}
+    .qualifications-btn{width: 100%;height: 36px;float: left;margin-top: 100px;}
+    .qualifications-btn .cancel-button{width: 232px;height: 50px;float: left;font-size: 14px;box-sizing: border-box;border: 1px solid #E15616;background-color: #ffe6dc;color: #E15616;text-align: center;line-height: 50px;}
+    .qualifications-btn .edit-button{width: 232px;height: 50px;float: right;font-size: 14px;background-color: #E15616;color: #FFFFFF;text-align: center;line-height: 50px;}
 }
 
 /*移动*/
 @media screen and (max-width:768px) {
     .crumbs {font-size:3.4vw;color: #22272e}
-    .userinfo {padding: 1.3vw 5.3vw;background: #fff;box-shadow: 0 .8vw 1.6vw 0 rgba(0, 0, 0, 0.07);}
-    .info {height: 13vw;line-height: 13vw;font-size: 3.4vw;color: #22272e;overflow: hidden}
-    .comback {width: 22.4vw;height: 7.2vw;background-color: #ffe6dc;border-radius: 4.8vw;border: solid .27vw #e15616;float: right;line-height: 7.2vw;margin-top: 2.7vw;cursor: pointer;color: #e15616;}
-    .userinfo .user p {display: inline-block;color: #627386;margin: 0 6.7vw 2.7vw 0;}
-    .userinfo .user p:nth-child(1){width: 100%}
-    .userinfo .user p span {color: #22272e;}
-    .address {margin-bottom: 4vw;color: #627386;}
-    .address span {color: #22272e;}
-    .product-info {box-shadow: 0px .8vw 1.6vw 0px rgba(0, 0, 0, 0.07);background: #fff;margin-top: 2.7vw}
-    .price {overflow: hidden;}
-    .protitle {color: #22272e;font-size: 3.4vw;padding: 2.7vw 5.3vw;}
-    .product {background: #fff;padding: 2.7vw 5.3vw;box-shadow: 0px .8vw 1.3vw 0px rgba(0, 0, 0, 0.07);height: 50vw}
-    .product-title {height: 5.3vw;line-height: 5.3vw;position: relative;width: 100%}
-    .product-title li {display: inline-block;list-style: none;color: #9aa5b5;position: relative;top: 26vw;width: 21vw}
-    .product-title li:nth-child(1) {width: 100%;text-align: left;top: 0;}
-    .pro-information li {list-style: none;}
-    .pro-information li {width: 100%;padding: 2.7vw 0;}
-    .pro-information li div {display: inline-block;color: #22272e;top: 11.6vw;width: 21vw;position: relative}
-    .pro-information li div.product-img {width: 100%;text-align: left;top: 0}
-    .product-img img {width: 18.7vw;height: 18.7vw;border: solid .27vw #e2e7ef;}
-    .product-img h3 {display: inline-block;width: 40vw;margin-left: 2.7vw;font-size: 3.4VW;color: #22272e;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical}
-    .add-logistics{height: auto;background-color: #ffffff;box-shadow: 0px 3px 6px 0px rgba(0, 0, 0, 0.07);margin-top: 2.7vw;padding: 20px;color: #627386;}
-    .company-number{width: 100%;}
-    .logist-right>div{margin-top: 1.3vw;}
-    .company-number>div{margin: 4vw 0;}
-    .logistics-order-number.company{width: 72vw}
-    .company{width: 75vw;height: 11.8vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;color: #9aa5b5;padding-left: 2.7vw;margin-top: 2.7vw}
-    input::placeholder,textarea::placeholder {color: #9aa5b5;font-size:3.2vw;}
-    textarea::placeholder {color: #9aa5b5;}
-    .red{color: #f94b4b;}
-    .companyBtn{width: 11.8vw;height: 11.8vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;
-    margin-left: .53vw;cursor: pointer;color: #b8bfca;position: relative;top:1.3vw}
-    .mIcon.add{background: url(/img/account/add.png) no-repeat;height: 23vw;display: block;    background-size: 23vw;}
-    .upload-file{position: relative;float: left;margin: 0 2.7vw 2.7vw 0px;cursor: pointer;width: 23vw;height: 23vw;border-radius: .53vw;}
-    .input-file{width: 23vw;height:23vw;opacity: 0;cursor: pointer;position: absolute;top: 0;}
-    #uploadGoodsImages{overflow: hidden;float: left;width: 100%;margin-top: 2.7vw}
-    .release-from{overflow: hidden;}
-    .upload-file img{width: 100%;height: 100%;}
-    .mIcon.del:before {width: 5.3vw;height: 5.3vw;background-position: -90vw -7.5vw;position: absolute;top: -.8vw;right: -.8vw}
-    .form-upload-tips .icon-wen:before {width: 5.3vw;height: 5.3vw;background-position: -76.4vw 0vw;cursor: pointer;}
-    .wen-tips {width: 67.2vw;height:9vw;background-color: #1890f9;box-shadow: 0px .8vw 1.3vw 0px rgba(24, 144, 249, 0.17);color: #fff;position: absolute;left: inherit;font-size: 2.6vw;text-align: left;line-height: 9vw;top:8.8vw;display: none;}
-    .form-upload-tips{float: left;position: relative;}
-    .form-upload-tips .wen-tips:before {content: '';width: 0px;height: 0px;border-width: 8px;border-style: solid;border-color: transparent transparent #1890f9 transparent;position: absolute;top: -3.5vw;left:1.3vw;}
-    .form-upload-tips:hover .wen-tips {display: block;}
-    .remarks textarea{width: 83.4vw;height: 42.4vw;background-color: #ffffff;border-radius: .53vw;border: solid .27vw #b8bfca;resize: none;padding: 2.7vw;color: #9aa5b5;}
-    .remarks{position: relative}
-    .remarks .rema{line-height:10.7vw ;}
-    .size-num {position: absolute;right: 2.7vw;top: 52vw;color: #9aa5b5}
-    .defineBtn button{width: 100%;height: 11.2vw;line-height: 11.2vw;text-align: center;color: #fff;background-color: #e15616;border-radius: .53vw;border: solid .27vw #e15616;cursor: pointer;margin-bottom: 2.7vw}
-    .defineBtn button:nth-child(2){background:#ffe6dc;color: #e15616 }
-    .defineBtn{overflow: hidden;margin-top: 4vw}
-    .mIcon.add-company:before{width: 5.3vw;height: 6.7vw;background-position: -33.9vw -68.8vw}
-    .mIcon.sub-company:before{width: 5.3vw;height:6.7vw;background-position: -41.3vw -68vw}
+    .mIcon.del:before {width: 5.3vw;height: 5.3vw;background-position: -89.6vw -7.7vw;position: absolute;top: -1vw;right: -.8vw}
+    .brand.mIcon:before{width: 5.3vw;height: 5.3vw;background-position: -51.2vw -.27vw;position: absolute;top: 2vw;right: 2.7vw}
+    .qualifications-title{width: 100%;height: 9.6vw;background-image: linear-gradient(270deg, #ffffff 0%, rgba(225,86,22,0.1) 51%, #ffffff 100%);color: #E15616;font-size: 3vw;line-height: 9.6vw;text-align: center;margin-bottom:4vw;}
+    .qualifications-content{background: #fff;box-sizing: border-box;padding:3.4vw;padding-bottom: 20vw;}
+    .qualifications-content .list{width: 100%;height: auto;margin-bottom: 2vw;}
+    .qualifications-content .list-view-title{width: 100%;height:8.8vw;line-height:8.8vw;font-size: 3.6vw;color: #22272e;}
+    .qualifications-content .list-view-title .title-left{float: left;}
+    .qualifications-content .list-view-title .title-right{float: right;color: #E15616;cursor: pointer;}
+    .qualifications-content .list-view{width: 100%;height:8.8vw;line-height:8.8vw;font-size: 3.2vw;}
+    .qualifications-content .list-view.margin{margin-bottom: 20px;}
+    .qualifications-content .list-view-label{width:100%;min-height: 8.8vw;line-height:8.8vw;font-size: 3.2vw;color: #627386;float: left;}
+    .qualifications-content .list-view-text{width:100%;min-height: 8.8vw;line-height:8.8vw;font-size: 3.2vw;color: #22272e;float: left;}
+    .qualifications-content .list-view-text .input{width:100%;height:8.8vw;padding: 0 2vw;line-height:8.8vw;font-size:3.2vw;color: #22272e;box-sizing: border-box;border: 1px solid #b8bfca;border-radius: 2px;}
+    .qualifications-content .list-file-view{width:100%;min-height: 8.8vw;line-height:8.8vw;position: relative;font-size: 3.2vw;color: #22272e;float: left;margin-bottom: 3vw;}
+    .qualifications-content .list-view-upload{width: 100%;height: 16vw;float: left;}
+    .qualifications-content .upload-file{width: 17vw;height: 13.6vw;float: left;position: relative;}
+    .qualifications-content .upload-file .icon-add-file{width:100% ;height: 100%;background: url("/img/supplier/icon-upload-file@1x.png");display: block;background-size: cover;}
+    .qualifications-content .upload-file .icon-add-img{width:100% ;height: 100%;background: url("/img/supplier/icon-upload-image@1x.png");display: block;background-size: cover;}
+    .qualifications-content .upload-file .input-file{width:100% ;height: 100%;position: absolute;top: 0;left: 0;opacity: 0;}
+    .qualifications-content .upload-image{width: 17vw;height: 13.6vw;float: left;margin-right:2vw;margin-bottom: 2vw;border: solid 1px #b8bfca;box-sizing: border-box;cursor: pointer;position: relative;}
+    .qualifications-content .list-view-image{width:100%;height: 100%;display: block;float: left;}
+    .qualifications-content .upload-image:nth-child(5n){margin-right: 0;}
+    .qualifications-btn{width: 100%;height: 11.2vw;float: left;margin-top: 5vw;}
+    .qualifications-content .list-btn{width: 33.2vw;height: 9vw;cursor: pointer;box-sizing: border-box;border: 1px solid #E15616;line-height:  9vw;color: #E15616;margin: 0 auto;margin-top: 10vw;border-radius: 2px;padding: 2vw 6vw;}
+    .qualifications-content .list-btn .i-span{width: 5vw;height: 5vw;display: block;border-radius: 50%;border: 1px solid #E15616;box-sizing: border-box;text-align: center;line-height: 4.5vw;font-size: 3.6vw;float: left;}
+    .qualifications-content .list-btn .p-span{display: block;float: right;line-height: 5vw;height: 5vw;font-size: 3.4vw;}
+    .qualifications-btn .cancel-button{width: 100%;height: 11.2vw;text-align: center;line-height: 11.2vw;color: #E15616;}
+    .qualifications-btn .edit-button{width: 100%;height: 11.2vw;font-size: 3.2vw;background-color: #E15616;color: #FFFFFF;text-align: center;line-height: 11.2vw;}
+
+    .select {position: relative;display: block;width: 100%;color: #9aa5b5;vertical-align: middle;text-align: left;height: 9.6vw;user-select: none}
+    .select .placeholder {position: relative;display: block;padding-left: 2.7vw;border-radius: .53vw;cursor: pointer;border: solid .27vw #b8bfca;height:9.6vw;line-height: 9.6vw;color: #333333;}
+    .select.is-open .placeholder:after {content: '\f077';}
+    .select.is-open ul {display: block;}
+    .select.select--white .placeholder {background: #fff;color: #999;}
+    .select.select--white .placeholder:hover {background: #fafafa;}
+    .select ul {position: absolute;width: 99.5%;background: #fff;border-radius: .53vw;top: 100%;left: 0;list-style: none;border: solid 1px #b8bfca;max-height: 93.3vw;overflow: auto;z-index: 1;}
+    .select ul li {display: block;text-align: left;padding: 0.8em 1em 0.8em 1em;color: #999;cursor: pointer;}
+    .select ul li:hover {background-color: #ffe6dc;color: #e15616}
 }

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

@@ -241,6 +241,39 @@ var SupplierApi = {
                 callback(res);
             });
         },
+        GetSupplierLogisticsRecord: function (params, callback) {//发货-添加商品资质初始化查询商品
+            Http.AjaxService({
+                url:'/supplier/logisticsRecord',
+                type:'get',
+                data:params,
+                json:false
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        GetSupplierQualificationData: function (params, callback) {//发货-商品资质回显
+            Http.AjaxService({
+                url:'/supplier/qualification/data',
+                type:'get',
+                data:params,
+                json:false
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
+        GetSupplierQualificationUpdata: function (params, callback) {//发货-保存商品资质
+            Http.AjaxService({
+                url:'/supplier/qualification',
+                type:'post',
+                data:params,
+                json:false
+            })
+            .then(function(res){
+                callback(res);
+            });
+        },
         shopInfo: function (params, callback) {//资料信息 回显数据
             Http.AjaxService({
                 url:'/user/shop/info',

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

@@ -7,6 +7,25 @@ var PublicApi = {
         uploadimg: function (params, callback) {//供应商添加物流上传图片
             Http.uploadImage({ url:'/formData/MultiPictareaddData',data:params},callback)
         },
+        uploadFile: function (params, callback) {//上传文件
+            Http.uploadImage({
+                url:'/file/upload',
+                data:params
+            },callback)
+        },
+        deleteOssFile: function (params, callback) {//删除Oss文件
+            Http.AjaxService({
+                url:'/file/delete',
+                type:'post',
+                data:params,
+                json:false,
+                mask:true,
+                replace:false
+            })
+                .then(function(res){
+                    callback(res);
+                });
+        },
         GetHomeData:function(params,callback){ //首页数据
             // Http.AjaxService({ url:'/home/data', type:'get', data:params, json:false})
             //     .then(function(res){

src/main/resources/static/js/supplier-center/order/qualifications-detail.js

@@ -1,152 +1,57 @@
 ;
-var logistics = new Vue({
-    el:'#logistics',
+var addlogistics = new Vue({
+    el:'#qualifications',
     data:{
-         userInfo:{},
-         orderList:[],
-         GoodsImagesList:[],
-         formData:new FormData(),
-         txtVal: 0,
-         desc:'',
-         kdlist:[],
-         logisticList:[
-             {
-                value:'',
-                name:'',
-                numList:[
-                    {number:''}
-                ]
-             }
-         ],
-         params:{
-            logistics:[],//物流
-            record:[],
-            info:{
-                image:'',
-                note:'',//备注
-                shopOrderId:'',//商品id
-            },
-         },
-         select:'',
-         electShow:false,
+        open:false,
+        shopOrderId:0,
+        logisticsBatchId:0,
+        isEmpty:false,
+        qualificationsList:[]
     },
     methods:{
-        bigImage:function(){
-            var viewer = new Viewer(document.getElementById('uploadGoodsImages'));
-        },
-         uploadGoodsImagesFn: function(event){//上传商品图片
+        showViewerImageFn: function(index ){//预览图片
+            console.log(index)
             var _this = this;
-            var inputDOM = _this.$refs.goodsImages;
-            var file = inputDOM.files;
-            _this.formData.append('file', file[0]);
-            SupplierApi.uploadimg(_this.formData,function(response){
-               _this.GoodsImagesList.push(response.data);
-               _this.params.info.image =_this.GoodsImagesList.join('##').substring();
-                event.target.value = '';
-            });
+            var DomEven = '#listViewImage'+index;
+            var ViewerDom = document.querySelector(DomEven);
+            _this.viewer = new Viewer(ViewerDom, {url:'data-image'});
         },
-         removeGoodsImagesFn: function(index){//删除商品图片
-            var _this = this;
-            _this.GoodsImagesList.splice(index,1);
-             _this.params.info.image =_this.GoodsImagesList.join('##').substring();
-         },
-         selshow:function(event,index){
-            this.select = index;
-            this.electShow = !this.electShow
-         },
-         addBtn:function () { //添加物流
-             var _this = this;
-             var obj = {
-                        value:'',
-                        name:'',
-                        numList:[
-                            {number:''}
-                        ]
-                  };
-              _this.logisticList.push(obj);
-         },
-         addNum:function(item,index){
-            var _this = this;
-            var obj = {number:''};
-            item.numList.push(obj);
-         },
-         subBtn:function (list) {
+        GetSupplierQualificationData:function(logisticsBatchId){//初始化查询商品资质详情
             var _this = this;
-             _this.logisticList.splice(_this.kdlist.indexOf(list), 1);
-         },
-         reduceBtn:function(item){
-            var _this = this;
-             item.numList.splice(item.numList.indexOf(item.numList), 1);
-         },
-         parameter:function(){//参数信息
-           var _this = this;
-           var record=[];
-            $('.pro-information li').each(function(){//发货数
-                  var productobj={};
-                  productobj.orderProductId = $(this).attr('orderproductid');
-                  productobj.num = $(this).find('.del-num').text();
-                    record.push(productobj)
-            });
-             _this.params.record=record
-            _this.params.info.shopOrderId = $('.pro-information li').attr('shopOrderID');
-            _this.logisticList.forEach(function (pros) {
-                    var obj = {};
-                    var Code = pros.value;
-                    var yName = pros.name;
-                    var numList = pros.numList;
-                    numList.forEach(function (item) {
-                        var logisNum = item.number;
-                         obj={
-                            logisticsCompanyCode:Code,
-                            logisticsCompanyName:yName,
-                            number:logisNum
-                        };
-                         if(obj.logisticsCompanyCode==""&&obj.logisticsCompanyName==""){
-                            CAIMEI.Alert('请选择快递公司','确定')
-                        }else if(obj.number==""){
-                            CAIMEI.Alert('请输入快递单号','确定')
-                        }else {
-                         _this.params.logistics.push(obj);
-                        }
-                     })
-              })
-         },
-         ChangeLogistics:function(event,item,index){
-             var donClass = '#logistics'+index;
-             var domLogistics =  document.querySelector(donClass);
-             item.name = domLogistics.options[domLogistics.selectedIndex].text;
-             item.value =event.target.value;
-         },
-         turnBtn:function () {//提交发货
+            SupplierApi.GetSupplierQualificationData({logisticsBatchId:logisticsBatchId},function(response){
+                if(response.code == 0 ){
+                    var data = response.data;
+                    if(data && data.length > 0) {
+                        _this.qualificationsList = data;
+                        _this.isEmpty = false
+                    }else{
+                        _this.isEmpty = true
+                    }
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        editSubmitFn:function (type) {
             var _this = this;
-             _this.parameter();
-             console.log(_this.params)
-            var params = JSON.stringify(_this.params);
-            SupplierApi.addLogistics({params:params},function (res) {
-                if(res.code == 0) {
-                setTimeout(function () {
-                        CAIMEI.dialog('发货成功')
-                    },1000)
-                     window.location.href = '/supplier/order/delivery_record.html?shopOrderID='+_this.params.info.shopOrderId;
-                  }else {
-
-                  }
-             })
-         },
+            switch(type){
+                case 'edit':
+                    window.location.href = '/supplier/order/qualifications/add.html?type=edit&logisticsBatchId='+_this.logisticsBatchId+'&shopOrderId='+_this.shopOrderId;
+                    break;
+                case 'add':
+                    window.location.href = '/supplier/order/qualifications/add.html?type=add&logisticsBatchId='+_this.logisticsBatchId+'&shopOrderId='+_this.shopOrderId;
+                    break;
+            }
+        }
     },
     mounted:function () {
-      var _self = this;
-          SupplierApi.kdList(function (res) {
-             if(res.code==0){
-                var data = res.data;
-                data.forEach(function(item){
-                   _self.kdlist.push(item);
-                });
-              console.log(_self.kdlist.length);
-             }
-          });
-        _self.userInfo =JSON.parse(CAIMEI.Storage.getItem('userInfo_deliver'));
-        _self.orderList = JSON.parse(CAIMEI.Storage.getItem('orderList'));
+        var _self = this;
+        _self.shopOrderId=CAIMEI.getUrlParam('shopOrderId');
+        _self.logisticsBatchId = CAIMEI.getUrlParam('logisticsBatchId');
+        _self.GetSupplierQualificationData(_self.logisticsBatchId)
+        if(isPC){
+            _self.open=true;
+        }
 
     }
 })

src/main/resources/static/js/supplier-center/order/qualifications.js

@@ -1,152 +1,174 @@
 ;
-var logistics = new Vue({
-    el:'#logistics',
+var addlogistics = new Vue({
+    el:'#qualifications',
     data:{
-         userInfo:{},
-         orderList:[],
-         GoodsImagesList:[],
-         formData:new FormData(),
-         txtVal: 0,
-         desc:'',
-         kdlist:[],
-         logisticList:[
-             {
-                value:'',
-                name:'',
-                numList:[
-                    {number:''}
-                ]
-             }
-         ],
-         params:{
-            logistics:[],//物流
-            record:[],
-            info:{
-                image:'',
-                note:'',//备注
-                shopOrderId:'',//商品id
-            },
-         },
-         select:'',
-         electShow:false,
+        open:false,
+        pageType:'',
+        shopOrderId:0,
+        logisticsBatchId:0,
+        selectGoods:false,
+        productActions:[],
+        qualificationsList:[
+            {
+                productName:'请选择商品',
+                recordId:'',
+                sn:'',
+                fileList:[],
+                imageList:[]
+            }
+        ]
     },
     methods:{
-        bigImage:function(){
-            var viewer = new Viewer(document.getElementById('uploadGoodsImages'));
+        GetSupplierQualificationData:function(logisticsBatchId){//编辑回显商品资质信息
+            var _this = this;
+            SupplierApi.GetSupplierQualificationData({logisticsBatchId:logisticsBatchId},function(response){
+                if(response.code == 0 ){
+                    var data = response.data;
+                    if(data && data.length > 0) {
+                        _this.qualificationsList = data;
+                        _this.isEmpty = false
+                    }else{
+                        _this.isEmpty = true
+                    }
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        GetSupplierLogisticsRecord:function(logisticsBatchId){//添加商品资质初始化查询商品信息
+            var _this = this;
+            SupplierApi.GetSupplierLogisticsRecord({ logisticsBatchId : logisticsBatchId },function(response){
+                if(response.code == 0 ){
+                    var data = response.data;
+                    data.forEach(function(el,index){
+                        var obj = {
+                                id : el.id,
+                                productName : el.productName
+                            };
+                        _this.productActions.push(obj)
+                    });
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
+        },
+        editButtonConfim:function(){//确定添加商品资质信息
+            var _this = this;
+            var params = [];
+            _this.qualificationsList.forEach(function(el,index){
+                var obj = {
+                        recordId : el.recordId,
+                        sn : el.sn,
+                        files : el.fileList,
+                        images : el.imageList
+                    };
+                params.push(obj)
+            });
+            SupplierApi.GetSupplierQualificationUpdata({ params:JSON.stringify(params) },function(response){
+                if(response.code == 0 ){
+                    CAIMEI.dialog('保存资质成功');
+                }else{
+                    CAIMEI.Alert(response.msg, '确定', false);
+                }
+            })
         },
-         uploadGoodsImagesFn: function(event){//上传商品图片
+        showViewerImageFn: function(index,imageIndex ){//预览图片
             var _this = this;
-            var inputDOM = _this.$refs.goodsImages;
-            var file = inputDOM.files;
-            _this.formData.append('file', file[0]);
-            SupplierApi.uploadimg(_this.formData,function(response){
-               _this.GoodsImagesList.push(response.data);
-               _this.params.info.image =_this.GoodsImagesList.join('##').substring();
+            var DomEven = '#listViewImage'+index+''+imageIndex;
+            var ViewerDom = document.querySelector(DomEven);
+            _this.viewer = new Viewer(ViewerDom, {url:'data-image'});
+        },
+        showGoodSelect:function(){
+            var _this = this;
+            _this.selectGoods = !_this.selectGoods;
+        },
+        changeGoodsFn:function(item,good){ //品牌列表
+            var _this = this;
+            item.recordId =  good.id;
+            item.productName = good.productName;
+        },
+        uploadImagesFn: function(index,array,event){//上传商品资质图片
+            var _this = this;
+            var inputDOM = _this.$refs['Qualificationsimage'+index];
+            var file = inputDOM[0].files;
+            var formData = new FormData();
+            formData.append('file', file[0]);
+            PublicApi.uploadimg(formData,function(response){
+                array.push(response.data);
+                event.target.value = '';
+            });
+        },
+        uploadFileFn : function(index,array,event){//上传承诺函文件
+            var _this = this;
+            var inputDOM = _this.$refs['QualificationsFile'+index];
+            var file = inputDOM[0].files;
+            console.log('file========>',file);
+            var formData = new FormData();
+            formData.append('file', file[0]);
+            PublicApi.uploadFile(formData,function(response){
+                var obj = {
+                        fileName:response.data.fileName,
+                        ossName:response.data.ossName
+                    };
+                array.push(obj);
+                console.log('array',array);
                 event.target.value = '';
             });
         },
-         removeGoodsImagesFn: function(index){//删除商品图片
+        removeGoodsImagesFn: function(index){//删除商品图片
             var _this = this;
             _this.GoodsImagesList.splice(index,1);
-             _this.params.info.image =_this.GoodsImagesList.join('##').substring();
-         },
-         selshow:function(event,index){
-            this.select = index;
-            this.electShow = !this.electShow
-         },
-         addBtn:function () { //添加物流
-             var _this = this;
-             var obj = {
-                        value:'',
-                        name:'',
-                        numList:[
-                            {number:''}
-                        ]
-                  };
-              _this.logisticList.push(obj);
-         },
-         addNum:function(item,index){
+            _this.secondParams.image =_this.GoodsImagesList.toString()+',';
+        },
+        deleteImageFileFn: function(array,index){//删除图片
+            array.splice(index, 1);
+        },
+        deleteFileFn:function(array,index){//删除商品资质文件
             var _this = this;
-            var obj = {number:''};
-            item.numList.push(obj);
-         },
-         subBtn:function (list) {
+            PublicApi.deleteOssFile({ ossName : array[index].ossName },function (response) {
+                if (response.code==0){
+                    array.splice(index, 1);
+                }else{
+                    console.log('删除文件异常提示===>',response.msg)
+                }
+            })
+        },
+        addListFn : function(){//添加商品
             var _this = this;
-             _this.logisticList.splice(_this.kdlist.indexOf(list), 1);
-         },
-         reduceBtn:function(item){
+            var obj ={
+                    productName:'',
+                    recordId:'',
+                    sn:'',
+                    fileList:[],
+                    imageList:[
+                        'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1194131577,2954769920&fm=26&gp=0.jpg',
+                        'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=1194131577,2954769920&fm=26&gp=0.jpg'
+                    ]
+                };
+            _this.qualificationsList.push(obj)
+        },
+        deleteLogistItemFn: function(item,index){
             var _this = this;
-             item.numList.splice(item.numList.indexOf(item.numList), 1);
-         },
-         parameter:function(){//参数信息
-           var _this = this;
-           var record=[];
-            $('.pro-information li').each(function(){//发货数
-                  var productobj={};
-                  productobj.orderProductId = $(this).attr('orderproductid');
-                  productobj.num = $(this).find('.del-num').text();
-                    record.push(productobj)
+            CAIMEI.Modal('确认删除商品吗？','取消','确定',function () {
+                _this.qualificationsList.splice(index, 1);
             });
-             _this.params.record=record
-            _this.params.info.shopOrderId = $('.pro-information li').attr('shopOrderID');
-            _this.logisticList.forEach(function (pros) {
-                    var obj = {};
-                    var Code = pros.value;
-                    var yName = pros.name;
-                    var numList = pros.numList;
-                    numList.forEach(function (item) {
-                        var logisNum = item.number;
-                         obj={
-                            logisticsCompanyCode:Code,
-                            logisticsCompanyName:yName,
-                            number:logisNum
-                        };
-                         if(obj.logisticsCompanyCode==""&&obj.logisticsCompanyName==""){
-                            CAIMEI.Alert('请选择快递公司','确定')
-                        }else if(obj.number==""){
-                            CAIMEI.Alert('请输入快递单号','确定')
-                        }else {
-                         _this.params.logistics.push(obj);
-                        }
-                     })
-              })
-         },
-         ChangeLogistics:function(event,item,index){
-             var donClass = '#logistics'+index;
-             var domLogistics =  document.querySelector(donClass);
-             item.name = domLogistics.options[domLogistics.selectedIndex].text;
-             item.value =event.target.value;
-         },
-         turnBtn:function () {//提交发货
+        },
+        editButtonCanel:function(){//暂不填写
             var _this = this;
-             _this.parameter();
-             console.log(_this.params)
-            var params = JSON.stringify(_this.params);
-            SupplierApi.addLogistics({params:params},function (res) {
-                if(res.code == 0) {
-                setTimeout(function () {
-                        CAIMEI.dialog('发货成功')
-                    },1000)
-                     window.location.href = '/supplier/order/delivery_record.html?shopOrderID='+_this.params.info.shopOrderId;
-                  }else {
-
-                  }
-             })
-         },
+            window.location.href = '/supplier/order/delivery_record.html?shopOrderID='+_this.shopOrderId;
+        }
     },
     mounted:function () {
-      var _self = this;
-          SupplierApi.kdList(function (res) {
-             if(res.code==0){
-                var data = res.data;
-                data.forEach(function(item){
-                   _self.kdlist.push(item);
-                });
-              console.log(_self.kdlist.length);
-             }
-          });
-        _self.userInfo =JSON.parse(CAIMEI.Storage.getItem('userInfo_deliver'));
-        _self.orderList = JSON.parse(CAIMEI.Storage.getItem('orderList'));
-
+        var _self = this;
+        _self.shopOrderId=CAIMEI.getUrlParam('shopOrderId');
+        _self.logisticsBatchId = CAIMEI.getUrlParam('logisticsBatchId');
+        _self.pageType = CAIMEI.getUrlParam('type');
+        if( _self.pageType == 'edit'){
+            _self.GetSupplierLogisticsRecord( _self.logisticsBatchId);
+            _self.GetSupplierQualificationData( _self.logisticsBatchId);
+        }else{
+            _self.GetSupplierLogisticsRecord(_self.logisticsBatchId);
+        }
+        _self.open=true;
     }
-})
+});

src/main/resources/static/js/supplier-center/order/record.js

@@ -78,8 +78,8 @@ var deliveryRecode = new Vue({
                     window.location.href = '/supplier/order/logistics/add.html?logisticsBatchId='+logisticsBatchID+'&shopOrderId='+shopOrderID+'';
                 },200)
         },
-        qualificationsDetails:function(logisticsBatchID,shopOrderID){
-            window.location.href='/supplier/order/qualifications/detail.html?logisticsBatchId='+logisticsBatchID+'&shopOrderId='+shopOrderID+''
+        qualificationsDetails:function(logisticsBatchId,shopOrderID){
+            window.location.href='/supplier/order/qualifications/detail.html?logisticsBatchId='+logisticsBatchId+'&shopOrderId='+shopOrderID+''
         },
         Revoke:function (logisticsBatchID,shopOrderID) {//撤销发货
              CAIMEI.Modal('确定要撤销这次发货吗？撤销后需要重新进行发货。','取消','确定',function () {

src/main/resources/templates/flea-market/form.html

@@ -40,7 +40,7 @@
                             <div class="unlogin-label spacing" style="letter-spacing: 1px;"><span class="red-color">*</span>商品品牌：</div>
 
                             <div class="select" @click="showBrand">
-                                <span class="placeholder" ><i class="icon brand mIcon"></i>{{brandname}}</span>
+                                <span class="placeholder" ><i class="icon brand mIcon"></i>{{ brandname }}</span>
                                 <ul v-show="selectBrand">
                                     <li  v-for="(item,index) in BrandList"   :key="index" :value='item.id' @click="ChangeBrand(item)">{{item.name}}</li>
                                 </ul>

src/main/resources/templates/supplier-center/order/qualifications-add.html

@@ -5,7 +5,7 @@
     <title>采美365网</title>
     <template th:replace="components/head-link"></template>
     <link rel="stylesheet" th:href="@{/css/base/center.css(v=${version})}" type="text/css">
-    <link rel="stylesheet" th:href="@{/css/supplier-center/order/logistics.css(v=${version})}" type="text/css">
+    <link rel="stylesheet" th:href="@{/css/supplier-center/order/qualifications.css(v=${version})}" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
 <body>
@@ -13,14 +13,16 @@
 <template th:replace="components/header"></template>
 
 <!-- 我的采美 -->
-<div id="addlogistics">
+<div id="qualifications">
     <div class="navLayout">
         <div class="crumbs" v-if="isPC">
             <span>我的交易</span>
             <span>&gt;</span>
             <span>我的订单</span>
             <span>&gt;</span>
-            <span>添加物流</span>
+            <span>发货记录</span>
+            <span>&gt;</span>
+            <span>上传商品资质</span>
         </div>
         <div class="wrap clear">
             <!--左侧面包屑-->
@@ -28,101 +30,87 @@
                 <template th:replace="supplier-center/components/tableft"></template>
             </div>
             <div class="right">
-                <div class="userinfo">
-                    <p class="info">
-                        <span>买家信息</span>
-                        <button @click="history.go(-1)" class="comback" type="button">返回</button>
-                    </p>
-                    <div class="user">
-                        <p>买家名称：<span>{{userInfo.name}}</span></p>
-                        <p>收货人：<span>{{userInfo.shouHuoRen}}</span></p>
-                        <p>联系方式：<span>{{userInfo.mobile}}</span></p>
-                    </div>
-                    <p class="address">收货地址：<span>{{userInfo.address}}</span></p>
-                </div>
-                <div class="product-info">
-                    <div class="price">
-                        <p class="protitle">商品信息</p>
-                    </div>
-                    <div class="product">
-                        <ul class="product-title">
-                            <li>商品信息</li>
-                            <li>购买数量</li>
-                            <li>已发数量</li>
-                            <li>未发数量</li>
-                            <li>本次发货</li>
-                        </ul>
-                        <ul class="pro-information">
-                            <li :orderProductId = 'order.orderProductID' :shopOrderID="order.shopOrderID" v-for="order in orderList ">
-                                <div class="product-img">
-                                    <img :src="order.image"/>
-                                    <h3>{{order.productName}}</h3>
+                <div class="qualifications-content clear">
+                    <div class="qualifications-title">若发货商品内存在仪器类商品，建议填写下列商品信息再发货</div>
+                    <div class="list clear" v-for="(item,index) in qualificationsList" :key="index">
+                        <div class="list-view-title">
+                            <div class="title-left">商品{{ index+1 }}</div>
+                            <div class="title-right" v-if="(index+1) > 1" @click="deleteLogistItemFn(item,index)">
+                                删除商品
+                            </div>
+                        </div>
+                        <div class="list-view">
+                            <div class="list-view-label">商品:</div>
+                            <div class="list-view-text">
+                                <div class="select" @click="showGoodSelect">
+                                    <span class="placeholder" >
+                                        <i class="icon brand mIcon"></i>{{ item.productName }}
+                                    </span>
+                                    <ul v-show="selectGoods">
+                                        <li  v-for="(goods,index) in productActions"   :key="index" :value='goods.id' @click="changeGoodsFn(item,goods)">{{goods.productName}}</li>
+                                    </ul>
                                 </div>
-                                <div>{{order.buyNum}}</div>
-                                <div>{{order.shipmentsNum}}</div>
-                                <div>{{order.notShippedNum}}</div>
-                                <div class="del-num">{{order.num}}</div>
-                            </li>
-                        </ul>
-                    </div>
-                </div>
-                <div class="add-logistics">
-                    <div class="add-wrap">
-                        <div :key="index" class="company-number" v-for="(item,index) in logisticList">
-                            <div class="logist-left">
-                                <i class="red icon">*</i>
-                                物流公司：
-                                <select :id="'logistics'+ index" @change="ChangeLogistics($event,item,index)" class="logistics-company-name company" name="">
-                                    <option value="0">请选择</option>
-                                    <option :key="kdIndex" :name='kd.label' :value="kd.value" v-for="(kd,kdIndex) in kdlist">{{kd.label}}</option>
-                                </select>
-                                <button class="add-company companyBtn icon mIcon" @click="addBtn()" v-if="index==0"></button>
-                                <button class="sub-company companyBtn icon mIcon" @click="subBtn(item)" v-else></button>
                             </div>
-                            <div class="logist-right">
-                                <div :key="numIndex" v-for="(num,numIndex) in item.numList">
-                                    <i class="red">*</i>
-                                    物流编号：
-                                    <input class="logistics-order-number company" oninput="value=value.replace(/[^\d]/g,'')" placeholder="请输入物流编号" type="text" v-model="num.number">
-                                    <button class="add-company companyBtn icon mIcon" @click="addNum(item,numIndex)"
-                                            v-if="numIndex==0">
-                                    </button>
-                                    <button class="sub-company companyBtn icon mIcon" v-else @click="reduceBtn(item)"></button>
+                        </div>
+                        <div class="list-view">
+                            <div class="list-view-label">SN码:</div>
+                            <div class="list-view-text">
+                                <input class="input" type="text" v-model="item.sn" placeholder="请输入商品SN码">
+                            </div>
+                        </div>
+                        <div class="list-view margin">
+                            <div class="list-view-label">资质文件:</div>
+                            <div class="list-view-upload">
+                                <div class="upload-file">
+                                    <i class="icon-add-file mIcon"></i>
+                                    <input :ref="'QualificationsFile'+index"
+                                           type="file" name="file"
+                                           class="input-file"
+                                           accept="*.pdf*.doc*.docx"
+                                           @change="uploadFileFn(index,item.fileList,$event)"
+                                    >
+                                </div>
+                            </div>
+                            <div class="list-view-text" v-for="(file,fileIndex) in item.fileList" :key="fileIndex">
+                                <div class="list-file-view">
+                                    <input class="input" type="text" v-model="file.fileName" disabled="disabled">
+                                    <i class="icon mIcon del" @click="deleteFileFn(item.fileList,fileIndex)"></i>
                                 </div>
                             </div>
                         </div>
-                    </div>
-                    <div class="upload-img">
-                        <div class="release-from ">
-                            <span class="red-color">&nbsp;图片备注：</span>
-                            <div class="release-input" id="uploadGoodsImages">
-                                <div :key="index" class="upload-file" v-for="(item, index) in GoodsImagesList">
-                                    <img :data-image="item" :data-original='item' :src="item" alt="" class="upload-img" @click="bigImage">
-                                    <i @click="removeGoodsImagesFn(index)" class="icon mIcon del"></i>
+                        <div class="list-view margin">
+                            <div class="list-view-label">图片(若不方便上传文件，可用图片代替)：</div>
+                            <div class="list-view-text">
+                                <div class="upload-image" v-for="(image,imageIndex) in item.imageList"  :key="imageIndex">
+                                    <img  class="list-view-image"
+                                          :id="'listViewImage'+index+''+ imageIndex"
+                                          :data-image="image"
+                                          :src="image"
+                                          alt="商品资质图"
+                                          @click="showViewerImageFn(index,imageIndex)"
+                                    >
+                                    <i class="icon mIcon del" @click="deleteImageFileFn(item.imageList,imageIndex)"></i>
                                 </div>
-                                <div class="upload-file" v-show="GoodsImagesList.length<5">
-                                    <i class="icon mIcon add"></i>
-                                    <input @change="uploadGoodsImagesFn" accept="image/png,image/jpeg,image/gif,image/jpg" class="input-file" name="file" ref="goodsImages"
+                                <div class="upload-file" v-if="item.imageList.length<10 || item.imageList.length == 0">
+                                    <i class="icon-add-img mIcon"></i>
+                                    <input :ref="'Qualificationsimage'+index"
                                            type="file"
-                                           value="">
-                                </div>
-                                <div class="form-upload-tips">
-                                    <i class="icon mIcon icon-wen"></i>
-                                    <div class="wen-tips">请备注快递单，发货现场和货物的照片，最多10张</div>
+                                           name="file"
+                                           class="input-file"
+                                           accept="image/png,image/jpeg,image/gif,image/jpg"
+                                           @change="uploadImagesFn(index,item.imageList,$event)"
+                                    >
                                 </div>
                             </div>
                         </div>
                     </div>
-                    <div class="remarks">
-                        <span class="rema">备注：</span>
-                        <textarea maxlength="200" placeholder="文字备注，200字以内" v-model="params.remark"></textarea>
-                        <div class="size-num">{{params.remark.length}}/200</div>
+                    <div class="list-btn" v-if="qualificationsList.length < productActions.length" @click="addListFn">
+                        <span class="i-span">+</span>
+                        <span class="p-span">添加商品</span>
                     </div>
-                    <div class="defineBtn">
-                        <div>
-                            <button @click="turnBtn" type="button">确定</button>
-                            <button @click="history.go(-1)" type="button">取消</button>
-                        </div>
+                    <div class="qualifications-btn">
+                        <div class="cancel-button" @click="editButtonCanel">暂不填写</div>
+                        <div class="edit-button" @click="editButtonConfim">确定</div>
                     </div>
                 </div>
             </div>
@@ -135,6 +123,6 @@
 <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" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}" type="text/javascript"></script>
-<script charset="utf-8" th:src="@{/js/supplier-center/order/logistics-add.js(v=${version})}" type="text/javascript"></script>
+<script charset="utf-8" th:src="@{/js/supplier-center/order/qualifications.js(v=${version})}" type="text/javascript"></script>
 </body>
 </html>

src/main/resources/templates/supplier-center/order/qualifications-details.html

@@ -4,8 +4,8 @@
 <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:href="@{/css/supplier-center/order/logistics-detail.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link rel="stylesheet" th:href="@{/css/base/center.css(v=${version})}" type="text/css">
+    <link rel="stylesheet" th:href="@{/css/supplier-center/order/qualifications-details.css(v=${version})}" type="text/css">
     <template th:replace="components/analysis"></template>
 </head>
 <body>
@@ -13,82 +13,65 @@
 <template th:replace="components/header"></template>
 
 <!-- 我的采美 -->
-<div id="logisticsDetail">
-    <div class="navLayout" v-cloak="">
+<div id="qualifications">
+    <div class="navLayout">
         <div class="crumbs" v-if="isPC">
             <span>我的交易</span>
             <span>&gt;</span>
             <span>我的订单</span>
             <span>&gt;</span>
-            <span>查看物流</span>
+            <span>发货记录</span>
+            <span>&gt;</span>
+            <span>商品资质</span>
         </div>
         <div class="wrap clear">
             <!--左侧面包屑-->
-            <template th:replace="supplier-center/components/tableft"></template>
+            <div v-show="open">
+                <template th:replace="supplier-center/components/tableft"></template>
+            </div>
             <div class="right">
-                <div class="userinfo">
-                    <p class="info">
-                        <span>买家信息</span>
-                        <button type="button" class="comback" @click="history.go(-1)">返回</button>
-                    </p>
-                    <div class="user">
-                        <p>买家名称：<span>{{userInfo.name}}</span></p>
-                        <p>收货人：<span>{{userInfo.shouHuoRen}}</span></p>
-                        <p>联系方式：<span>{{userInfo.mobile}}</span></p>
-                    </div>
-                    <p class="address">收货地址：<span>{{userInfo.address}}</span></p>
-                </div>
-                <div class="record-product">
-                    <div class="protitle">发货信息</div>
-                    <div class="product" >
-                        <ul class="product-title">
-                            <li>商品信息</li>
-                            <li>购买数量</li>
-                            <li>已发数量</li>
-                            <li>未发数量</li>
-                            <li>本次发货</li>
-                        </ul>
-                        <ul class="product-info">
-                            <li v-for="order in listData.logisticsRecordList">
-                                <div class="product-img">
-                                    <img :src="order.image"/>
-                                    <h3>{{order.productName}}</h3>
-                                </div>
-                                <div>{{order.buyNum}}</div>
-                                <div>{{order.shipmentsNum}}</div>
-                                <div>{{order.notShippedNum}}</div>
-                                <div>{{order.num}}</div>
-                            </li>
-                            <p class="record-time">发货时间：{{listData.deliveryTime}}</p>
-                            <div class="img-remark">
-                                <span>图片备注：</span>
-                                <ul v-if="listData.remarkImages!=null" id="uploadGoodsImages">
-                                    <li v-for="cmImg in listData.remarkImages">
-                                        <img :src="cmImg" @click="bigImage">
-                                    </li>
-                                </ul>
-                                <span style="color: #22272e" v-else>暂无图片备注</span>
-                            </div>
-                            <p class="remark">文字备注：
-                                <span v-if="listData.remark!=''&&listData.remark!=null">{{listData.remark}}</span>
-                                <span v-else>暂无备注</span>
-                            </p>
-                        </ul>
-
-                    </div>
-                    <div class="logis">
-                        <div class="delivery-logis-title">物流信息</div>
-                        <div id="InformationList" v-if="listData.logisticsInformationList.length>0">
-                            <div class="logistics-info" v-for="logis in listData.logisticsInformationList">
-                                <div class="logistics-time">物流时间：{{logis.updateDate}}</div>
-                                <div class="logistics-company">物流公司：{{logis.logisticsCompanyName}}</div>
-                                <div class="logistics-number">物流单号：{{logis.nu}}</div>
+                <div class="qualifications-content clear" v-if="!isEmpty">
+                    <div class="list clear" v-for="(item,index) in qualificationsList" :key="index">
+                        <div class="list-view-title">商品{{ index+1 }}</div>
+                        <div class="list-view">
+                            <div class="list-view-label">商品:</div>
+                            <div class="list-view-text">{{ item.name }}</div>
+                        </div>
+                        <div class="list-view">
+                            <div class="list-view-label">SN码:</div>
+                            <div class="list-view-text">{{ item.code }}</div>
+                        </div>
+                        <div class="list-view margin">
+                            <div class="list-view-label">资质文件:</div>
+                            <div class="list-view-text">
+                               <div class="list-file-view" v-for="(file,fileIndex) in item.fileList" :key="fileIndex">
+                                   {{ file.ossName }}
+                               </div>
                             </div>
                         </div>
-                        <div class="logistics-record" v-else>
-                            <p>暂无物流信息</p>
+                        <div class="list-view margin">
+                            <div class="list-view-label">图片:</div>
+                            <div class="list-view-text">
+                                <img  v-for="(image,imageIndex) in item.imageList"
+                                      :key="imageIndex"
+                                      class="list-view-image"
+                                      :id="'listViewImage'+ imageIndex"
+                                      :data-image="image"
+                                      :src="image"
+                                      alt="商品资质图"
+                                      @click="showViewerImageFn(imageIndex)"
+                                >
+                            </div>
                         </div>
                     </div>
+                    <div class="qualifications-btn">
+                        <div class="edit-button" @click="editSubmitFn('edit')">编辑</div>
+                    </div>
+                </div>
+                <div v-else class="qualifications-content empty">
+                    <img class="empty-container-image" src="/img/supplier/icon-quess-empty@2x.png" >
+                    <p class="error-text">暂无商品资质信息</p>
+                    <div class="login-btn" @click="editSubmitFn('add')">去补充</div>
                 </div>
             </div>
         </div>
@@ -99,8 +82,7 @@
 <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/order/logistics-detail.js(v=${version})}"></script>
+<script charset="utf-8" th:src="@{/js/common/serviceapi/supplier.service.js(v=${version})}" type="text/javascript"></script>
+<script charset="utf-8" th:src="@{/js/supplier-center/order/qualifications-detail.js(v=${version})}" type="text/javascript"></script>
 </body>
 </html>