页面接口调用

src/main/resources/static/css/product/qualityauthorize.css

@@ -1,124 +1,102 @@
 @charset "utf-8";
-/**
-* PC端
-*/
-@media screen and (min-width:768px){
-    body{background-color: #FFFFFF;}
-    .inner{width: 1184px;margin: 0 auto;}
-    .container-header{width: 100%;height: auto;}
-    .header-top{width: 100%;height: 80px;box-sizing: border-box;padding:23px 0;background-image: linear-gradient(270deg, #191919 0%, #464646 100%);}
-    .header-top .logo{width: 98px;height: 34px;float: left;}
-    .header-top .logo img{width: 98px;height: 34px;display: block;}
-    .container-content{width: 100%;height: auto;float: left;margin-top: 16px;}
-    .container-content .content-top{width: 100%;height: 120px;box-sizing: border-box;padding: 20px 16px;background-color: #ffffff;box-shadow: 0 2px 10px #ebecef;}
-    .container-content .content-top-left{width: 50%;float: left;height: 100%;}
-    #swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{position:absolute;top:50%;margin-top:-34px;display:block;width:44px;height:68px;line-height:68px;background:rgba(51,51,51,.16);color:#FFF;font-size:40px;text-align:center;border-radius:2px}
-    #swiper-container .swiper-button-prev{left:5px;right:auto}
-    #swiper-container .swiper-button-next{left:auto;right:5px}
-    #swiper-container .swiper-button-prev:after{content:"\276C"}
-    #swiper-container .swiper-button-next:after{content:"\276D"}
-    #swiper-container .swiper-button-prev:hover,#swiper-container .swiper-button-next:hover{background:rgba(255,230,220,.6)}
-    .container-content .content-logo{width: 112px;height: 80px;float: left;box-sizing: border-box;border: 1px solid #f5f5f5;border-radius: 2px;}
-    .container-content .content-logo img{width: 100%;height: 100%;border-radius: 2px;display: block;}
-    .container-content .content-mssg{width:300px ;float: left;margin-left: 16px;}
-    .container-content .mssg-name{width: 100%;height: 48px;line-height: 48px;font-size: 18px;color: #333333;font-weight: bold;text-align: left;}
-    .container-content .mssg-labels{width: 100%;height: 20px;float: left;}
-    .container-content .mssg-labels .tabs{width: 104px;height: 24px;margin-right: 12px;border-radius: 2px;font-size: 12px;line-height: 24px;text-align: center;color: #FFFFFF;display: inline-block;float: left;}
-    .container-content .mssg-labels .tabs.zp{background-image: linear-gradient(270deg,#c1821a 0%, #f7cd7e 100%);}
-    .container-content .mssg-labels .tabs.sq{background-image: linear-gradient(270deg, #374972 0%, #84a6f6 100%);}
-    .container-content .content-bottom{width: 100%;height: 660px;background-color: #FFFFFF;float: left;margin-top: 20px;box-sizing: border-box;padding: 16px;}
-    .content-bottom .preview-banner {width: 660px;height: 660px;float: left;position: relative;}
-    .content-bottom .preview-info.active {opacity: 1;}
-    .content-bottom .preview-banner-big {width: 660px;height: 452px;float: left;border: 1px solid #e4e4e4;}
-    .content-bottom .preview-banner-big .preview-img {width: 100%;height: 100%;display: block;}
-    .content-bottom .preview-banner-big span {display: none;position: absolute;left: 0;top: 0;width: 215px;height: 215px;border: 1px solid #aaa;background: rgba(255, 208, 22, 0.4);opacity: .5;filter: alpha(opacity:50);cursor: move;}
-    .content-bottom .preview-banner-small {width: 100%;height: 98px;padding: 10px;float: left;box-sizing:border-box;}
-    .content-bottom .preview-banner-small .item {width: 78px;height: 78px;margin-right: 9px;float: left;background-color: #fff;cursor: pointer;list-style: none;border: 1px solid #FFFFFF;}
-    .content-bottom .preview-banner-small .item:last-child {margin-right: 0;}
-    .content-bottom .preview-banner-small .item img {width: 100%;height: 100%;display: block;-moz-transition: .5s;-webkit-transition: .5s;transition: .5s;opacity: .5;}
-    .content-bottom .preview-banner-small .item.on {border-color: #e15616;}
-    .content-bottom .preview-banner-small .item.on img {opacity: 1;}
-    .content-bottom .preview-box {display: none;overflow: hidden;position: absolute;right: -555px;top: 0;width: 548px;height: 548px;border: 1px solid #e4e4e4;z-index: 9999;background: #FFFFFF;}
-    .content-bottom .preview-box img {width: 1096px;height: 1096px;margin-right: 10px;display: block;max-width:none;}
-    .content-bottom .preview-info {width: 508px;height: 660px;float: left;margin-left: 16px;}
-    .content-bottom .preview-info-title{width: 100%;height: 155px;border-bottom: 1px dashed #e2e7ef;}
-    .content-bottom .title-label{width: 100%;height: 47px;float: left;}
-    .content-bottom .title-label p{float: left;line-height: 47px;font-size: 14px;color: #9aa5b5;text-align: left;}
-    .content-bottom .title-label .icon-author{width: 47px;height: 47px;display: block;float: left;margin-left: 16px;}
-    .content-bottom .title-name{width: 100%;height: auto;line-height: 24px;font-size: 18px;color: #333333;font-weight: bold;text-align: left;float: left;}
-    .content-bottom .title-p{width: 100%;height: 44px;line-height: 44px;float: left;}
-    .content-bottom .title-p span{font-size: 14px;line-height: 44px;}
-    .content-bottom .title-p span.label{color: #9aa5b5;}
-    .content-bottom .title-p span.labal{color: #333333;}
-    .content-bottom .title-w{width: 100%;height: 24px;float: left;}
-    .content-bottom .title-w .title-w-bao{width: 24px;height: 24px;display: block;float: left;}
-    .content-bottom .title-w a{width: 104px;height: 24px;display: block;float: left;margin-left: 3px;background-color: #fff8e8;border-radius: 2px;text-align: center;font-size: 14px;line-height: 24px;color: #d8a245;}
-    .content-bottom .preview-info-details{width: 100%;height: auto;float: left;}
-    .content-bottom .preview-info-details .details-p{width: 100%;height: 40px;line-height: 40px;float: left;}
-    .content-bottom .preview-info-details .details-p span{font-size: 14px;line-height: 40px;}
-    .content-bottom .preview-info-details .details-p span.label{color: #9aa5b5;}
-    .content-bottom .preview-info-details .details-p span.labal{color: #333333;}
-    .content-bottom .preview-info-msg{width: 100%;height: 32px;float: left;margin-top: 25px;}
-    .content-bottom .preview-info-msg .info-msg{width: 588px;height: 32px;border-radius: 2px;background-color: #fef6f3;position: relative;font-size: 14px;line-height: 32px;text-align: center;padding-left: 16px;color: #e15616;}
-    .content-bottom .preview-info-msg .info-msg .icon:before{background-position: -93px -550px;width: 18px;height: 18px;left: 15px;top: 7px;position: absolute;}
+body{margin:0}
+h1,h2,h3,p{margin:0}
+a{text-decoration:none;color:#000}
+ul{margin:0;padding:0;list-style-type:none}
+.fl-left{float:left}
+.fl-right{float:right}
+.fl-clear::after{display:block;content:'';clear:both}
+.params{border-collapse:unset;border:0;width: 100%}
+.product-params .params tr td{border: 0}
+.product-params .params tr td:nth-child(2n-1){color:#999999}
 
 
-}
-
 
+@media screen and (min-width:768px){body{background-color:#F8F8F8}
+.inner{width:1184px;margin:0 auto}
+.container-header{width:100%;height:auto}
+.header-top{width:100%;height:80px;box-sizing:border-box;padding:23px 0;background-image:linear-gradient(270deg,#191919 0%,#464646 100%)}
+.header-top .logo{width:98px;height:34px;float:left}
+.header-top .logo img{width:98px;height:34px;display:block}
+.container-content{width:100%;height:auto;margin-top:16px}
+.container-content .content-top{width:100%;height:120px;box-sizing:border-box;padding:20px 16px;background-color:#ffffff;box-shadow:0 2px 10px #ebecef}
+.container-content .content-top-left{width:50%;float:left;height:100%}
+.container-main{width:1184px;height:590px;margin:0 auto;padding:25px;background:#FFF;border-radius:2px;box-sizing:border-box}
+.container-main .img-box{float: left;position:relative;width:540px;height:540px;border:1px solid #ececec;box-sizing:border-box;overflow:hidden;}
+.container-main .img-box .origin-logo-box{text-align:center;width:140px;position:absolute;top:45px;left:26px;z-index:10}
+.container-main .img-box .product-brand{max-width:140px;height:auto}
+.container-main .img-box .product-img{width:100%;height:100%}
+.container-main .img-box .product-authorize{width:116px;height:116px;position:absolute;bottom:20px;right:30px;z-index:10}
+.product-desc{width:570px;line-height:30px;color:#101010;float: right;}
+.product-desc .pink-box{margin:30px 0;padding:10px 16px;background:rgb(251,241,242);color:#bc1724}
+.product-desc .pink-box a{color:#bc1724}
+.product-desc .default-box{padding:10px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
+.product-desc .dls{color:#999}
+.product-desc .statement a{color:#bc1724}
+.product-desc .statement a::after{content:'?';display:inline-block;width:14px;height:14px;text-align:center;line-height:16px;font-size:14px;border:1px solid #bc1724;border-radius:50%;margin-left:5px}
+.product-desc p{margin:30px 0}
+.product-params{width:1184px;margin:16px auto 0;padding:25px;background:#FFFFFF;box-sizing:border-box}
+.product-params .title{position:relative;padding-bottom:10px;border-bottom:2px solid #eee;box-sizing:border-box}
+.product-params .title::after{content:'';display:block;position:absolute;bottom:-2px;left:0;width:72px;height:2px;background:#101010}
+.product-params .title span{font-size:18px;font-weight:bold}
+.product-params .pc-params li{float: left;width: 50%;margin: 30px 0}
+.product-params .pc-params li>div{float: left}
+.product-params .pc-params li .p-title{color: #999999}
+.footer{margin-top:60px;padding:20px 0;background-color:#eee}
+.footer p{text-align:center;font-size:14px;color:#999}
+.footer p a{color:#999}
+.product-desc a:hover{color:#F52E3E}
+.product-desc .statement a:hover::after{border-color:#F52E3E}
+.footer p a:hover{color:#F52E3E}
+.footer-mobile{display:none}
+.product-params .params.mobile{display:none}
 
+.statementModel{position:fixed;top:0;left:0;z-index:999;width:100%;height:100vh;background:rgba(0,0,0,.4)}
+.statementModel .model{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:620px;height:380px;border-radius:4px;background:#fff;overflow:hidden}
+.statementModel .title{padding:15px 20px;background:#f1f1f1;font-size:18px}
+.statementModel .close{position:absolute;right:20px;top:10px;display:block;width:30px;height:30px;background:url(/img/quality/icon-close.png) no-repeat center;cursor:pointer}
+.statementModel .close:hover{background-image:url(/img/quality/icon-close-hover.png)}
+.statementModel .content{padding:15px;height:296px;overflow-y:scroll}
+.float-zplm{position: fixed;z-index: 99; bottom: 16%;right: 2%; width:90px;}
+.float-zplm img{width: 100%}
+}
 
-/**
-* 移动端
-*/
 @media screen and (max-width:768px){
-    .inner{width: 100%;}
-    .container-header{width: 100%;height: auto;}
-    .header-bottom{width: 100%;height: 13.4vw;}
-    .bottom_nav{width: 13.4vw;height: 13.4vw;float: left;box-sizing: border-box;padding: 3.5vw;}
-    .bottom_nav .icon_nav{display: block;}
-    .bottom_nav .icon_nav:before{content: '';display: block;width: 6.4vw;height: 6.4vw;background-position: 0 0;}
-    .bottom_nav .header-nav-tabs{display: none;}
-    .bottom_logo{width:73.2vw;height: 13.4vw;float: left; box-sizing: border-box;padding: 3.75vw 0;}
-    .bottom_logo a{width: 23.8vw;height: 5.9vw;display: block;margin: 0 auto;}
-    .bottom_logo a img{width: 23.8vw;height: 5.9vw;display: block;}
-    .bottom_use{width: 13.4vw;height: 13.4vw;float: right;box-sizing: border-box;padding: 3.5vw;}
-    .bottom_use .icon_nav{display: block;}
-    .bottom_use .icon_nav:before{content: '';display: block;width: 6.4vw;height: 6.4vw;background-position:-8.6vw  0;}
-    .header-bottom-msg{width: 100%;height: 13.4vw;background-color: #fef6f3;float: left;box-sizing: border-box;position: relative;padding-left: 8vw;}
-    .header-bottom-msg .icon-msg{width: 8vw;height: 13.4vw;display: block;position: absolute;left: 0;top: 0;}
-    .header-bottom-msg .icon-msg:before{width: 6.4vw;height: 6.4vw;display: block;background-position: -85.1vw -43.7vw;}
-    .header-bottom-msg p{display: inline-block;padding-top: 2vw;line-height:4.7vw;font-size: 3vw;color: #E15616;box-sizing: border-box;height: 100%;padding-right: 2vw;}
-    .container-content{width: 100%;height: auto;float: left;}
-    .content-top{width: 100%;height: 28vw;float: left;background-color: #ffffff;box-sizing: border-box;padding: 4vw 3.2vw;border-bottom: 1px solid #EFEFEF;}
-    .content-top .content-top-left{width:100%;height: 20vw;float: left;}
-    .content-top .content-logo{width: 26.4vw;height: 20vw;float: left;}
-    .content-top .content-logo img{width: 26.4vw;height: 20vw;display: block;}
-    .content-top .content-mssg{width: 63.6vw;height: 20vw;float: left;margin-left: 3.2vw;}
-    .content-top .content-mssg .mssg-name{width: 100%;height: 8.9vw;float: left;line-height: 8.9vw;font-size: 3.8vw;color: #333333;font-weight: bold;}
-    .content-top .content-mssg .mssg-labels{width: 100%;height: 20px;float: left;}
-    .content-top .content-mssg .mssg-labels span{width: 24.2vw;height: 5.4vw;background-image: linear-gradient(270deg,#c1821a 0%, #f7cd7e 100%);border-radius: 0.2vw 2.7vw 0.2vw 2.7vw;font-size: 3vw;line-height: 5.4vw;text-align: center;color: #FFFFFF;display: inline-block;float: left;}
-    .content-bottom{width: 100%;height: auto;float: left;box-sizing: border-box;background-color: #ffffff;padding-bottom: 8vw;}
-    .swiper-pagination{width: 10.4vw;height: 5.6vw;border-radius: 1vw;background-color: rgba(51, 51, 51, 0.24);left: 85vw;z-index: 99999;color: #FFFFFF;}
-    .content-bottom .preview-info{width: 100%;height: auto;float: left;padding: 0 3.2vw;box-sizing: border-box;}
-    .content-bottom .preview-info-title{width: 100%;height:35.4vw;border-bottom: 1px dashed #e2e7ef;box-sizing: border-box;padding: 2.5vw 0 0 0;}
-    .content-bottom .title-label{width: 100%;height:10.4vw;float: left;}
-    .content-bottom .title-label p{float: left;line-height: 10.4vw;font-size: 3vw;color: #9aa5b5;text-align: left;}
-    .content-bottom .title-label .icon-author{width:  10.4vw;height:  10.4vw;display: block;float: left;margin-left: 3.2vw;}
-    .content-bottom .title-name{width: 100%;height: auto;line-height: 5.5vw;font-size: 4.2vw;color: #333333;font-weight: bold;text-align: left;float: left;}
-    .content-bottom .title-p{width: 100%;height: 7.5vw;line-height: 7.5vw;float: left;}
-    .content-bottom .title-p span{font-size: 3.4vw;line-height: 7.5vw;}
-    .content-bottom .title-p span.label{color: #9aa5b5;}
-    .content-bottom .title-p span.labal{color: #333333;}
-    .content-bottom .title-w{width: 100%;height: 5.6vw;float: left;}
-    .content-bottom .title-w .title-w-bao{width: 5.6vw;height: 5.6vw;display: block;float: left;}
-    .content-bottom .title-w a{width: 23.2vw;height: 5.2vw;display: block;float: left;margin-left:1vw;background-color: #fff8e8;border-radius: 0.2vw;text-align: center;font-size: 3vw;line-height: 5.2vw;color: #d8a245;}
-    .content-bottom .preview-info-details{width: 100%;height: auto;float: left;padding-top: 2vw;}
-    .content-bottom .preview-info-details .details-p{width: 100%;height: 7.5vw;line-height:7.5vw;float: left;}
-    .content-bottom .preview-info-details .details-p span{font-size: 3.4vw;line-height: 7.5vw;}
-    .content-bottom .preview-info-details .details-p span.label{color: #9aa5b5;}
-    .content-bottom .preview-info-details .details-p span.labal{color: #333333;}
-    .content-bottom .preview-button{width: 100%;height: 11.2vw;float: left;margin-top: 2vw;}
-    .content-bottom .preview-button a{width: 100%;height: 11.2vw;display: block;background-color: #d8d8d8;border-radius: 0.4vw;line-height: 11.2vw;font-size: 3.4vw;color: #ffffff;text-align: center;}
+body{background: #fff}
+.container{font-size:3.6vw;color:#101010}
+.container-header{display:none}
+.container-content{width:100%}
+.container-main{width:100vw}
+.container-main .img-box{width:100vw;position:relative}
+.container-main .product-img{width:100vw}
+.container-main .img-box .origin-logo-box{position:absolute;top:4vw;left:4vw;max-width:30vw;text-align:center;z-index:9}
+.container-main .img-box .origin-logo-box img{max-width:30vw}
+.container-main .img-box .product-authorize{width:23vw;height:23vw;position:absolute;bottom:3.2vw;right:4vw}
+.product-desc a{color:#bc1724}
+.product-desc h3{background:linear-gradient(to right,#101010,#404040);color:#fefefe;padding:4vw;font-size:4.4vw}
+.product-desc .pink-box{padding:3.2vw 4vw;background:rgb(251,241,242);color:#bc1724;line-height:8vw}
+.product-desc .default-box{width:92.3vw;margin:0 auto;padding:3.2vw 0;border-bottom:0.4vw solid #eee;line-height:8vw}
+.product-desc .statement a::after{content:'?';display:inline-block;width:3vw;height:3vw;text-align:center;line-height:3vw;font-size:3vw;border:1px solid #bc1724;border-radius:50%;margin-left:1vw}
+.product-desc p{padding:3.2vw 4vw;line-height:6vw}
+.product-desc .sn-number{padding:3.2vw 0;background:#f5f5f5}
+.product-desc .sn-number .item-row{background:rgb(251,241,242);padding:3.2vw 4vw}
+.product-params{padding:3.2vw 4vw}
+.product-params .title{padding:4vw 0;border-bottom:0.4vw solid #eee;font-size:4vw;font-weight:bold}
+.product-params .params{margin-top:3vw;border-spacing: 0 4vw}
+.product-params .params tr{line-height:6.6vw;}
+.product-params .footer{display:none}
+.footer{display:none}
+.footer-mobile{padding:8vw 0 4vw;line-height:7vw;text-align:center;background:#f5f5f5}
+.footer-mobile p{color:#b2b2b2;font-size:2.4vw}
+.footer-mobile a{color:#f52e3e;font-size:3vw;font-weight:bold}
+.product-params .pc-params.pc{display:none}
 
-}
+.statementModel{position:fixed;top:0;left:0;z-index:999;width:100%;height:100vh;background:rgba(0,0,0,.4)}
+.statementModel .model{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:86vw;height:128vw;border-radius:4px;background:#fff}
+.statementModel .title{padding:4vw 5vw;background:#f1f1f1;font-size:4.6vw;text-align:center}
+.statementModel .close{position:absolute;right:0;top:-10vw;display:block;width:8.2vw;height:8.2vw;background:url(/img/quality/mb-close.png) no-repeat center;background-size:8.2vw;cursor:pointer}
+.statementModel .content{padding:4vw;height:100vw;overflow-y:scroll}
+
+.float-zplm{position: fixed;z-index: 99; bottom: 30vw;right: 3.4vw; width:15.7vw;}
+.float-zplm img{width: 100%}
+}

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

@@ -11,7 +11,8 @@
 */
 var Http = {
         AjaxService : function(option){
-            var NODE_ENV_BASE_URL = $("#spiServer").val();
+            // var NODE_ENV_BASE_URL = $("#spiServer").val();
+            var NODE_ENV_BASE_URL = 'http://192.168.2.68:8008';
             var REV_TOKEN_ENV = '',REV_TOKEN_USERID='';
             var GET_LOGIN_STAUS = JSON.parse(window.localStorage.getItem("userInfo"));
             if (GET_LOGIN_STAUS != null) {

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

@@ -34,4 +34,10 @@ var ProductApi = {
                 callback(res);
             });
         },
+        GetAuthProductDeatil:function (params, callback) {//产品仪器商品列表查询
+             Http.AjaxService({ url:'/product/auth/details', type:'get', data:params, json:true})
+            .then(function(res){
+                callback(res);
+            });
+        }
 };

src/main/resources/static/js/product/qualityauthorize.js

@@ -4,103 +4,63 @@
 var qualityAuthorize = new Vue({
     el:"#qualityAuthorize",
     data: {
-        previewBigimage:'',
-        dataList:[
-            {
-                previewThumb:[
-                    '/img/quality/product-01.png',
-                    '/img/quality/product-02.png',
-                    '/img/quality/product-03.png',
-                    '/img/quality/product-04.png'
-                ],
-                product:{
-                    name:'日本氢气护肤仪店用氢水保湿抗炎延缓衰老',
-                    number:'V2**********9678',
-                    brand:'品辉国际',
-                    achz:'AC100-240V,50Hz-60Hz',
-                    xhgl:'130（Max）',
-                    HydroDome:'LED光线',
-                    size:'340mm(W)*430mm(D)*275mm(H）',
-                    kg:'12kg'
-                }
-            },
-            {
-                previewThumb:[
-                    '/img/quality/product-01.png',
-                    '/img/quality/product-02.png',
-                    '/img/quality/product-03.png',
-                    '/img/quality/product-04.png'
-                ],
-                product:{
-                    name:'日本氢气护肤仪店用氢水保湿抗炎延缓衰老',
-                    number:'V2**********9678',
-                    brand:'品辉国际',
-                    achz:'AC100-240V,50Hz-60Hz',
-                    xhgl:'130（Max）',
-                    HydroDome:'LED光线',
-                    size:'340mm(W)*430mm(D)*275mm(H）',
-                    kg:'12kg'
-                }
-            }
-        ],
-
-        previewParams:[],
-        current:0,
+        //是否显示声明对话框
+        showStatement:false,
+        //是否为手机屏幕
+        isMobile:false,
+        //产品id
+        productId:'5',
+        //产品参数对象
+        parameters:null,
+        //声明内容
+        statementContent:''
     },
-    filters: {
-
-
+    filters:{
+        snCode:function (code) {
+            return code.replace(/^(\w{2})\w+(\w{4})$/,"$1******$2");
+        }
     },
     methods: {
-        SwiperBanner: function(){
-            setTimeout(function(){
-                if (isPC) {
-                    $('#swiper-container').slide({
-                        mainCell:".swiper-wrapper-banner",
-                        titCell:".swiper-pagination-banner span",
-                        effect: "leftLoop",
-                        prevCell:".swiper-button-prev",
-                        nextCell:".swiper-button-next",
-                        interTime: 3000,
-                        autoPlay: false,
-                        autoPage: false,
-                        trigger: "mouseover"
-                    });
-                    var swiper = new Swiper('#swiper-container2', {
-                        loop : true,
-                        autoplay: {
-                            delay: 3000,
-                            disableOnInteraction: false
-                        },
-                        pagination: {
-                            el: '.swiper-pagination',
-                            clickable :true
-                        }
-                    });
-                } else {
-                    var swiper = new Swiper('#swiper-container', {
-                        loop : true,
-                        autoplay: {
-                            delay: 3000,
-                            disableOnInteraction: false
-                        },
-                        navigation: {
-                            nextEl: '.swiper-button-next',
-                            prevEl: '.swiper-button-prev'
-                        },
-                        pagination: {
-                            el: '.swiper-pagination',
-                            clickable :true
-                        }
-                    });
+        //弹窗声明框
+        showStatementModel:function(){
+            this.showStatement = true
+        },
+        //关闭声明框
+        closeStatementModel:function(){
+            this.showStatement = false
+        },
+        //获取商品参数对象
+        initParams:function(){
+            var _that = this;
+           ProductApi.GetAuthProductDeatil({productId:this.productId},function(res){
+                if(res.code === 0){
+                    _that.parameters = res.data;
                 }
-            },300);
+           });
         },
-
+        // 代理声明弹出框
+        openStatementDialog:function(flag){
+            if(flag === 1){
+            //代理声明
+                this.statementContent = this.parameters.statementContent
+            }else{
+            //采美声明
+                this.statementContent = '采美声明！'
+            }
+            this.showStatement = true;
+            console.log('代理声明...')
+        }
     },
-    mounted: function () {
-
-        // this.previewBigimage = this.previewThumb[0];
-        this.SwiperBanner();
+    // created:function() {
+    //     var _that = this;
+    //     Vue.nextTick(function () {
+    //         _that.initParams()
+    //     })
+    // }
+    mounted:function () {
+        //根据hash值获取产品id
+        var hash = window.location.hash;
+        this.productId = hash.slice(1,hash.length);
+        this.initParams()
     }
 });

src/main/resources/templates/pay/caimei-wisapay.html

@@ -0,0 +1,135 @@
+<!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>
+    <template th:replace="pay/components/pay-link"></template>
+    <link th:href="@{/css/pay/caimei-pay.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<div class="head-wrap">
+    <div class="inner clear">
+        <div class="logo"><a href="/index.html"><img src="/img/base/index_logo.png" alt=""></a></div>
+        <div class="text">生美/医美采购服务平台</div>
+        <input type="hidden" th:value="${spiServer}" id="spiServer">
+        <input type="hidden" th:value="${agent}" id="userAgent">
+    </div>
+</div>
+<div class="pay-container clear" id="payContainer" :class="isRequest ? 'active' : ''">
+    <div class="container" v-if="!isErrorShow">
+        <div class="pay-content clear">
+            <div class="pay-title">
+                <div class="title-left"><p><span id="userName">{{userName}}</span></p></div>
+                <div class="title-right">
+                    <div class="time">
+                        <span id="downHour">{{downHour}}</span>
+                        <span id="downMinute">{{downMinute}}</span>
+                        <span id="downSecond">{{downSecond}}</span>
+                    </div>
+                </div>
+            </div>
+            <div class="pay-goods">
+                <div class="good-top">
+                    <div class="good-top-inner">
+                        <div class="bot-right">
+                            <div class="bot-num"><span>运费：</span><span class="p" id="freight">{{freight}}</span></div>
+                            <div class="bot-num"><span>经理折扣：</span><span class="p" id="discountFee">￥{{discountFee | NumFormat}}</span></div>
+                            <div class="bot-num"><span>余额抵扣：</span><span class="p" id="balancePayFee">￥{{balancePayFee | NumFormat}}</span></div>
+                            <div class="bot-num"><span>合计：</span><span class="red" id="payTotalFee">￥{{payTotalFee | NumFormat}}</span></div>
+                        </div>
+                        <div class="bot-left" id="goodSlideToggle"@click="slideToggleContent">
+                            <i class="icon-down" :class="isSiled ? 'roter' : '' "></i>
+                            <p id="iconText">{{isSiled ? '点击箭头收起订单商品' :'点击箭头展开订单商品'}}</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="good-main" v-if="isSiled">
+                    <div class="list-title">
+                        <div class="t-li"><p>序号</p></div>
+                        <div class="t-li"><p>商品图片</p></div>
+                        <div class="t-li"><p>商品名称</p></div>
+                        <div class="t-li"><p>单价</p></div>
+                        <div class="t-li"><p>数量</p></div>
+                        <div class="t-li"><p>总价</p></div>
+                    </div>
+                    <div class="list-container" id="goodsContainer">
+                        <div class="list-main" v-for="(item, index) in orderProductList" :key="index" :class="{'active':index%2 != 1}">
+                            <div class="t-li"><p>{{index+1}}</p></div>
+                            <div class="t-li"><img :src="item.productImage" :alt="item.name"></div>
+                            <div class="t-li"><p>{{item.name}}</p></div>
+                            <div class="t-li"><p>￥{{item.price | NumFormat}}</p></div>
+                            <div class="t-li"><p>{{item.num}}</p></div>
+                            <div class="t-li"><p>￥{{item.totalFee | NumFormat}}</p></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="pay-ment">
+                <div class="pay-message">
+                    <div class="message-num"><span>本次支付金额：</span><span class="red" id="payableAmount">￥{{payableAmount | NumFormat}}</span></div>
+                    <div class="message-num"><span>剩余支付金额：</span><span class="red" id="payment">￥{{payment | NumFormat}}</span></div>
+                    <div class="message-num"><span>已支付：</span><span class="red" id="receiptAmount">￥{{receiptAmount | NumFormat}}</span></div>
+                </div>
+                <div class="pay-record">
+                    <div class="record-title">支付记录</div>
+                    <div class="record-content clear" id="discernReceipt">
+                        <div class="record-li none" v-if="discernReceiptList.length== 0">暂无支付记录</div>
+                        <div class="record-li" v-for="(item, index) in discernReceiptList" :key="index" v-else>
+                            <div class="record-tb">￥{{item.receiptAmount | NumFormat}}</div>
+                            <div class="record-tb">{{payTypeText(item.payType)}}</div>
+                            <div class="record-tb">{{item.receiptDate}}</div>
+                            <div class="record-tb"></div>
+                            <div class="record-tb"></div>
+                            <div class="record-tb"></div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <div class="pay-bank">
+                <div class="bank-title">请选择以下一家银行进行付款<span class="color">(请在倒计时时间内使用<span class="big"> {{ payInfo.PAY_PAYLINKTYPETEXT }} </span>完成本次支付)</span></div>
+                <div class="bank-list" id="bankContent" v-if="payInfo.PAY_PAYLINKTYPE == '1'">
+                    <a href="javascript:void(0);" v-if="item.B2bNum" v-for="(item, index) in B2BbankData" :key="index" :class="{ active: tabIndex === index }"  @click="changeTab(index,item)">
+                        <img :src="item.imgUrl" :alt="item.bankName">
+                    </a>
+                </div>
+                <div class="bank-list" id="bankContentC" v-if="payInfo.PAY_PAYLINKTYPE == '2'">
+                    <a href="javascript:void(0);" v-if="item.B2cNum" v-for="(item, index) in B2CbankData" :key="index" :class="{ active: tabIndex === index }"  @click="changeTab(index,item)">
+                        <img :src="item.imgUrl" :alt="item.bankName">
+                    </a>
+                </div>
+            </div>
+        </div>
+        <div class="pay-button-main">
+            <div class="inner">
+                <div class="pay-button">
+                    <a href="javascript:void(0);" id="paySubmit" @click="PaySubmitFn" :class="isSubMitStatus ? 'disabled' : ''">立即支付</a>
+                </div>
+            </div>
+        </div>
+    </div>
+    <div class="pay-error-content" v-else>
+        <div class="pay-error clear">
+            <div class="icon-error" id="iconError" :class="iconErrorClass"></div>
+            <div class="error-msg" id="errorMsg">{{iconErrorText}}</div>
+            <div class="error-msgnone">{{iconErrorMsgnone}}</div>
+        </div>
+    </div>
+    <div class="pay-alert-content" v-if="isPayAlert">
+        <div class="pay-alert">
+            <div class="title"><p>确认提示</p><i class="icon-close" @click.stop="hidePayAlert"></i></div>
+            <div class="content">
+                <h1>请在您新打开的页面上完成付款</h1>
+                <p>完成付款后请点击下面的按钮</p>
+            </div>
+            <div class="button" id="payButton"><a href="javascript:void(0);" @click="RefreshBody">已完成支付</a></div>
+        </div>
+    </div>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script src="https://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/pay.service.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/lib/qrcode.min.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/pay/caimei-pay.js(v=${version})}"></script>
+</body>
+</html>

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

@@ -7,112 +7,130 @@
     <link th:href="@{/css/product/qualityauthorize.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
-<!--美博会专题-->
-<div class="container" id="qualityAuthorize" v-cloak>
-    <input type="hidden" th:value="${spiServer}" id="spiServer">
+<div class="container" id="qualityAuthorize">
+    <template v-if="parameters">
+     <input type="hidden" th:value="${spiServer}" id="spiServer">
     <input type="hidden" th:value="${agent}" id="userAgent">
+    <!-- 顶部logo区域 -->
     <div class="container-header clear">
-        <div class="header-top" v-if="isPC">
-            <div class="inner">
-                <div class="logo"><img src="/img/quality/icon-logo.png" alt=""></div>
-            </div>
+      <div class="header-top">
+        <div class="inner">
+          <div class="logo"><img src="/img/quality/icon-logo.png" alt=""></div>
         </div>
+      </div>
     </div>
-    <div class="container-content clear">
-        <div class="content-top">
-            <div class="inner">
-                <div class="content-top-left">
-                    <div class="content-logo">
-                        <img src="/img/quality/logo.png" alt="">
-                    </div>
-                    <div class="content-mssg">
-                        <div class="mssg-name">上海品辉医疗正品授权</div>
-                        <div class="mssg-labels">
-                            <span class="tabs zp">正品联盟成员</span>
-                            <span class="tabs sq">授权产品(2个）</span>
-                        </div>
-                    </div>
-                </div>
-            </div>
+    <!--    顶部logo区域end-->
+
+     <!-- 主体内容区域 -->
+    <div class="container-content">
+        <div class="container-main fl-clear">
+        <!-- 图片区域 -->
+        <div class="img-box">
+          <img class="product-img" :src="parameters.image">
+          <div class="origin-logo-box">
+            <img class="product-brand" :src="parameters.authLogo">
+          </div>
+          <img class="product-authorize" src="/img/quality/pro-authorization.png">
         </div>
-        <div class="content-bottom">
-            <div id="swiper-container" class="swiper-container">
-                <ul class="swiper-wrapper swiper-wrapper-banner">
-                    <li class="swiper-slide mfc" v-for="item in dataList">
-                        <div class="inner">
-                            <div class="preview-banner clearfix" id="imgShown" >
-                                <div id="swiper-container2" class="swiper-container">
-                                    <ul class="swiper-wrapper swiper-wrapper-banner1">
-                                        <li class="swiper-slide mfc" v-for="image in item.previewThumb">
-                                            <img :src="image">
-                                        </li>
-                                    </ul>
-                                    <div class="swiper-pagination swiper-pagination-banner1 mfc"><span v-if="isPC" v-for="i in item.previewThumb.length"></span></div>
-                                </div>
-                            </div>
-                            <div class="preview-info">
-                                <div class="preview-info-title">
-                                    <div class="title-label">
-                                        <p>该仪器由西安柏恩美业有限公司购买</p>
-                                        <img class="icon-author" src="/img/quality/icon-author.png" alt="" v-if="isPC">
-                                        <img class="icon-author" src="/img/quality/icon-h5-author.png" alt="" v-if="!isPC">
-                                    </div>
-                                    <div class="title-name">M22 AOPT超光子王者之冠</div>
-                                    <div class="title-p">
-                                        <span class="label">SN码：</span>
-                                        <span class="labal">V2**********9678</span>
-                                    </div>
-                                    <div class="title-w">
-                                        <img class="title-w-bao" src="/img/quality/icon-bao.png" alt="" v-if="isPC">
-                                        <img class="title-w-bao" src="/img/quality/icon-h5-bao.png" alt="" v-if="!isPC">
-                                        <a href="javascript:void(0)">官方防伪网站</a>
-                                    </div>
-                                </div>
-                                <div class="preview-info-details">
-                                    <div class="details-p">
-                                        <span class="label">型号：</span>
-                                        <span class="labal">R100E</span>
-                                    </div>
-                                    <div class="details-p">
-                                        <span class="label">品牌：</span>
-                                        <span class="labal">上海品辉</span>
-                                    </div>
-                                    <div class="details-p">
-                                        <span class="label">出厂年月：</span>
-                                        <span class="labal">2017年12月6日</span>
-                                    </div>
-                                    <div class="details-p">
-                                        <span class="label">产品尺寸：</span>
-                                        <span class="labal">长*宽*高 30*29.5*12.5</span>
-                                    </div>
-                                    <div class="details-p">
-                                        <span class="label">能量源：</span>
-                                        <span class="labal">激光</span>
-                                    </div>
-                                    <div class="details-p">
-                                        <span class="label">波长：</span>
-                                        <span class="labal">515-1565nm</span>
-                                    </div>
-                                </div>
-                                <div class="preview-info-msg" v-if="isPC">
-                                    <div class="info-msg">
-                                        <i class="icon icon-msg"></i>
-                                        请仔细比对仪器上的序列号与SN码是否一致，您也可前往官方防伪网站查看更多信息。
-                                    </div>
-                                </div>
-                                <div class="preview-button" v-if="!isPC">
-                                    <a href="javascript:void(0)">查看下一个(0)</a>
-                                </div>
-                            </div>
-                        </div>
-                    </li>
-                </ul>
-                <div class="swiper-pagination swiper-pagination-banner mfc"><span v-if="isPC" v-for="i in dataList.length"></span></div>
-                <a class="swiper-button-prev" href="javascript:void(0)"></a>
-                <a class="swiper-button-next" href="javascript:void(0)"></a>
+        <!-- 商品介绍区域 -->
+        <div class="product-desc">
+          <!-- 商品介绍区域 -->
+          <h3>{{parameters.name}}</h3>
+
+          <div class="pink-box">
+            <div class="item-row">
+              <span>品牌：{{parameters.brandName}}</span>
+            </div>
+            <div class="fl-clear">
+              <span class="fl-left">产地：{{parameters.productionPlace}}</span>
+              <a class="fl-right" target="_blank" :href="parameters.securityLink" v-if="parameters.securityLink">防伪官网>></a>
+            </div>
+          </div>
+
+          <!-- 代理声明区域-->
+          <div class="default-box" v-if="parameters.agentFlag === 1">
+            <div class="item-row">
+              <span class="dls">代理商：</span><span>{{parameters.agentName}}</span>
+            </div>
+            <div class="item-row statement">
+              <!-- 链接 -->
+              <a :href="parameters.statementLink" v-if="parameters.statementType === 2">代理声明</a>
+              <!-- 弹窗 -->
+              <a href="#" @click.prevent="openStatementDialog(1)" v-else>代理声明</a>
             </div>
+          </div>
+
+          <p>该仪器由{{parameters.agentName ? parameters.agentName : parameters.name}}授予{{parameters.authParty}}正品拥有</p>
+
+          <div class="pink-box sn-number">
+            <div class="item-row">
+              <span>SN码：{{parameters.snCode | snCode}}</span>
+            </div>
+          </div>
+
+        </div>
+      </div>
+
+
+      <div class="product-params">
+        <div class="title">
+          <span>产品参数</span>
+        </div>
+        <!-- 手机端布局 -->
+        <table class="params mobile">
+          <tbody>
+            <tr v-for="(item , index) in parameters.paramList" :key="index">
+              <td>{{item.name}}</td>
+              <td>{{item.content}}</td>
+            </tr>
+          </tbody>
+        </table>
+        <!-- 电脑端布局 -->
+          <ul class="pc-params pc fl-clear">
+            <li class="fl-clear"  v-for="(item,index) in parameters.paramList" :key="index">
+              <div class="p-title">{{item.name}}：</div>
+              <div class="p-content">{{item.content}}</div>
+            </li>
+          </ul>
+      </div>
+
+    </div>
+
+    <!-- 底部声明 -->
+    <div class="footer">
+      <p><a href="#" @click.prevent="openStatementDialog">采美声明</a>&nbsp;|&nbsp;由采美信息技术提供技术支持</p>
+    </div>
+    <div class="footer-mobile">
+      <p><a href="#" @click.prevent="openStatementDialog">采美声明</a></p>
+      <p>— 由采美信息技术提供技术支持 —</p>
+    </div>
+
+
+
+    <!--声明对话框-->
+    <div class="statementModel" v-show="showStatement" style="display: none">
+      <div class="model">
+        <i class="close" @click="closeStatementModel"></i>
+        <!-- 标题 -->
+        <div class="title">
+          代理声明
         </div>
+        <!-- 内容 -->
+        <div class="content">
+          {{statementContent}}
+        </div>
+      </div>
+    </div>
+
+
+    <div class="float-zplm">
+      <a target="_blank" href="#"><img src="/img/quality/float-img.png"></a>
     </div>
+
+    </template>
+
+
+
 </div>
 
 <!-- 引入底部 -->