正品联盟页面修改

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

@@ -59,6 +59,32 @@ ul{margin:0;padding:0;list-style-type:none}
 .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%}
+
+/*授权证书*/
+.container-main .sq-book{position:absolute;width: 149px;height: 112px;bottom:20px;left:30px;z-index:10;}
+.sq-book-modal{width: 100%;height: 100vh;position: fixed;z-index: 9999;top: 0;left: 0;background: rgba(0,0,0,.3)}
+.sq-book-modal img{display: block;width: 622px;height: 467px;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);
+animation: showBig 1s ease;
+}
+@keyframes showBig {
+    from{
+        width: 0;
+        height: 0;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%)
+    }
+    to{
+        position: fixed;
+        width: 622px;
+        height: 467px;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%)
+    }
+}
 }
 
 @media screen and (max-width:768px){
@@ -99,4 +125,24 @@ body{background: #fff}
 
 .float-zplm{position: fixed;z-index: 99; bottom: 30vw;right: 3.4vw; width:15.7vw;}
 .float-zplm img{width: 100%}
+/*授权证书*/
+.container-main .sq-book{position:absolute;width: 27.2vw;height: 20.6vw;bottom:4.1vw;left:4vw;z-index:10;}
+.sq-book-modal{width: 100%;height: 100vh;position: fixed;z-index: 9999;top: 0;left: 0;background: rgba(0,0,0,.3)}
+.sq-book-modal img{display: block;width: 92vw;height: 69vw;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%);
+animation: showBig 1s ease;}
+
+@keyframes showBig {
+    from{
+        width: 0;
+        height: 0;
+        position: fixed;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%,-50%)
+    }
+    to{
+        width: 92vw;height: 69vw;position: fixed;top: 50%;left: 50%;transform: translate(-50%,-50%)
+    }
+}
+
 }

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

@@ -12,6 +12,7 @@
 var Http = {
         AjaxService : function(option){
             var NODE_ENV_BASE_URL = $("#spiServer").val();
+            console.log(NODE_ENV_BASE_URL);
             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/product/qualityauthorize.js

@@ -13,7 +13,9 @@ var qualityAuthorize = new Vue({
         //产品参数对象
         parameters:null,
         //声明内容
-        statementContent:''
+        statementContent:'',
+        //控制授权证书是否弹出
+        isShowSqBookModal:false
     },
     filters:{
         snCode:function (code) {
@@ -31,8 +33,8 @@ var qualityAuthorize = new Vue({
         },
         //获取商品参数对象
         initParams:function(){
-            var _that = this;
-           ProductApi.GetAuthProductDeatil({productId:this.productId},function(res){
+           var _that = this;
+           ProductApi.GetAuthProductDeatil({productId:_that.productId},function(res){
                 if(res.code === 0){
                     _that.parameters = res.data;
                     console.log(_that.parameters)
@@ -49,6 +51,14 @@ var qualityAuthorize = new Vue({
                 this.statementContent = '采美声明！'
             }
             this.showStatement = true;
+        },
+        //授权证书弹出
+        showSqBookModal:function(){
+            this.isShowSqBookModal = true
+        },
+        //授权证书影藏
+        hideSqBookModal:function(){
+            this.isShowSqBookModal = false
         }
     },
     // created:function() {
@@ -59,9 +69,12 @@ var qualityAuthorize = new Vue({
     // }
     mounted:function () {
         //根据地址获取产品id
+        var _that = this;
         var pathname = window.location.pathname;
         this.productId = pathname.split('-')[1].split('.')[0];
         this.initParams();
-
+        setTimeout(function () {
+            _that.isShowSqBookModal = true;
+        }, 500);
     }
 });

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

@@ -1,139 +1,104 @@
 <!DOCTYPE html>
 <html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
       xsi:schemaLocation="https://www.thymeleaf.org ">
-<head>
-    <title>采美365网--采美正品联盟-正品授权-官方防伪网站</title>
+<head><title>采美365网--采美正品联盟-正品授权-官方防伪网站</title>
     <template th:replace="components/head-link"></template>
     <link th:href="@{/css/product/qualityauthorize.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
+<input type="hidden" th:value="${spiServer}" id="spiServer">
+<input type="hidden" th:value="${agent}" id="userAgent">
 <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">
-        <div class="inner">
-          <div class="logo"><img src="/img/quality/icon-logo.png" alt=""></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="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>
+        <!-- 顶部logo区域 -->
+        <div class="container-header clear">
+            <div class="header-top">
+                <div class="inner">
+                    <div class="logo"><img src="/img/quality/icon-logo.png" alt=""></div>
+                </div>
             </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>
+        <!-- 顶部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">
+                    <img class="sq-book" @click="showSqBookModal" v-show="!isShowSqBookModal" :src="parameters.certificateImage">
+                </div>
+                <!-- 商品介绍区域 -->
+                <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.brandName}}授予{{parameters.authParty}}正品拥有</p>
+                    <div class="pink-box sn-number">
+                        <div class="item-row"><span>SN码：{{parameters.snCode | snCode}}</span></div>
+                    </div>
+                </div>
             </div>
-          </div>
-
-          <p>该仪器由{{parameters.agentName ? parameters.agentName : parameters.brandName}}授予{{parameters.authParty}}正品拥有</p>
-
-          <div class="pink-box sn-number">
-            <div class="item-row">
-              <span>SN码：{{parameters.snCode | snCode}}</span>
+            <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>
-      </div>
-
-
-      <div class="product-params">
-        <div class="title">
-          <span>产品参数</span>
+        <!-- 底部声明 -->
+        <div class="footer">
+            <p><a href="#" @click.prevent="openStatementDialog">采美声明</a>&nbsp;|&nbsp;由采美信息技术提供技术支持</p>
         </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 class="footer-mobile">
+            <p><a href="#" @click.prevent="openStatementDialog">采美声明</a></p>
+            <p>— 由采美信息技术提供技术支持 —</p>
         </div>
-        <!-- 内容 -->
-        <div class="content">
-          {{statementContent}}
+        <!--声明对话框-->
+        <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>
-    </div>
-
-
-    <div class="float-zplm">
-      <a target="_blank" href="#"><img src="/img/quality/float-img.png"></a>
-    </div>
+        <div class="float-zplm"><a target="_blank" href="#"><img src="/img/quality/float-img.png"></a></div>
 
+        <!--授权图模态框-->
+        <div class="sq-book-modal" @click="hideSqBookModal" v-show="isShowSqBookModal">
+            <img :src="parameters.certificateImage">
+        </div>
     </template>
-
-
-
-</div>
-
-<!-- 引入底部 -->
+</div><!-- 引入底部 -->
 <template th:replace="components/foot-link"></template>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/product/qualityauthorize.js(v=${version})}"></script>