正品联盟异常页面

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

@@ -66,7 +66,13 @@ ul{margin:0;padding:0;list-style-type:none}
 .sq-book-modal{width:100%;height:100vh;position:fixed;z-index:997;top:0;left:0;background:rgba(0,0,0,.7);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
 .sq-book-img{width:622px;/*height:467px;*/-webkit-box-shadow:0 10px 28px rgba(255,199,30,.26);box-shadow:0 10px 28px rgba(255,199,30,.26);position:fixed;left:0;right:0;margin:0 auto;top:20%;z-index:998}
 .sq-book-img img{width:100%;height:auto}
-}@media screen and (max-width:768px){body{background:#fff}
+
+.not-found {height: calc(100vh - 80px); display: flex;justify-content: center;align-items: center;flex-direction: column;}
+.not-found img{}
+.not-found p{font-size: 20px;color: #a8a8a8;padding: 60px;text-align: center;}
+}
+
+@media screen and (max-width:768px){body{background:#fff}
 .container{font-size:3.6vw;color:#101010}
 .container-header{display:none}
 .container-content{width:100%}
@@ -108,6 +114,11 @@ ul{margin:0;padding:0;list-style-type:none}
 .sq-book-modal{width:100%;height:100vh;position:fixed;z-index:997;top:0;left:0;background:rgba(0,0,0,.7)}
 .sq-book-img{z-index:998;display:block;width:92vw;/*height:69vw;*/position:fixed;top:41.2vw;left:0;right:0;margin:0 auto;-webkit-box-shadow:0 10px 28px rgba(255,199,30,.26);box-shadow:0 10px 28px rgba(255,199,30,.26)}
 .sq-book-img img{width:100%}
+.not-found{width:100vw;padding-top: 40vw;text-align: center}
+.not-found img{width: 30vw}
+.not-found p{font-size: 4vw;margin-top: 6vw;color: #a8a8a8}
+
+
 }.myZoomIn{-webkit-animation:zoomIn 1s ease;animation:zoomIn 1s ease}
 .myZoomOut{-webkit-animation:zoomOut 1s ease;animation:zoomOut 1s ease}
 @-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:scale3d(.3,.3,.3);transform:scale3d(.3,.3,.3)}

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

@@ -18,7 +18,8 @@ var qualityAuthorize = new Vue({
         isShowSqBookModal:false,
         sqBookModal:'',
         cmContent:'',
-        isCmComtent:false
+        isCmComtent:false,
+        message:'',
     },
     filters:{
         snCode:function (code) {
@@ -42,9 +43,12 @@ var qualityAuthorize = new Vue({
                     _that.parameters = res.data;
                     console.log(_that.parameters)
                 }else{
-                    //如果该产品不存在，跳转到404页面
-                    window.location.href = '/404.html'
+                    _that.message = res.msg;
                 }
+                // else{
+                //     //如果该产品不存在，跳转到404页面
+                //     window.location.href = '/404.html'
+                // }
            });
         },
         // 代理声明弹出框

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

@@ -10,16 +10,16 @@
 <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">
-        <!-- 顶部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>
+    <!-- 顶部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>
-        <!-- 顶部logo区域end-->
+    </div>
+    <!-- 顶部logo区域end-->
+    <template v-if="parameters">
         <!-- 主体内容区域 -->
         <div class="container-content">
             <div class="container-main fl-clear">
@@ -28,7 +28,8 @@
                     <img class="product-img" :src="isPC?parameters.pcImage:parameters.appletsImage">
                     <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="isPC?parameters.appletsCertificateImage:parameters.appletsCertificateImage">
+                    <img class="sq-book" @click="showSqBookModal" v-show="!isShowSqBookModal"
+                         :src="isPC?parameters.appletsCertificateImage:parameters.appletsCertificateImage">
                 </div>
                 <!-- 商品介绍区域 -->
                 <div class="product-desc">
@@ -38,7 +39,8 @@
                         <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>
+                            <a class="fl-right" target="_blank" :href="parameters.securityLink"
+                               v-if="parameters.securityLink">官网认证>></a></div>
                     </div>
                     <!-- 代理声明区域-->
                     <div class="default-box" v-if="parameters.shopType === 2">
@@ -51,10 +53,13 @@
                             <!-- 图片 -->
                             <a :href="parameters.statementImage" target="_blank" v-if="parameters.statementType === 3">代理声明>></a>
                             <!-- 文件 -->
-                            <a :href="parameters.statementFile.url" target="_blank" v-if="parameters.statementType === 4" :download="parameters.statementFile.name">代理声明>></a>
+                            <a :href="parameters.statementFile.url" target="_blank"
+                               v-if="parameters.statementType === 4"
+                               :download="parameters.statementFile.name">代理声明>></a>
                         </div>
                     </div>
-                    <p>该仪器由{{parameters.agentFlag !== 0 ? parameters.shopName : parameters.brandName}}授予{{parameters.authParty}}正品拥有</p>
+                    <p>该仪器由{{parameters.agentFlag !== 0 ? parameters.shopName :
+                        parameters.brandName}}授予{{parameters.authParty}}正品拥有</p>
                     <div class="pink-box sn-number">
                         <div class="item-row"><span>SN码：{{parameters.snCode | snCode}}</span></div>
                     </div>
@@ -98,19 +103,28 @@
                 <div class="content" v-html="cmContent" else></div>
             </div>
         </div>
-        <div class="float-zplm"><a target="_blank" href="https://www-b.caimei365.com/topic-6.html?name=%E6%AD%A3%E5%93%81%E8%81%94%E7%9B%9F"><img src="/img/quality/float-img.png"></a></div>
+        <div class="float-zplm"><a target="_blank"
+                                   href="https://www-b.caimei365.com/topic-6.html?name=%E6%AD%A3%E5%93%81%E8%81%94%E7%9B%9F"><img
+                src="/img/quality/float-img.png"></a></div>
 
         <!--授权图模态框-->
         <div class="sq-book-modal" @click="hideSqBookModal" v-show="isShowSqBookModal" id="sq-book-modal"></div>
         <transition enter-active-class="myZoomIn" leave-active-class="myZoomOut">
-            <div class="sq-book-img myZoomIn"  v-show="isShowSqBookModal">
-                    <i class="close" @click="hideSqBookModal"></i>
-                    <img :src="isPC?parameters.appletsCertificateImage:parameters.appletsCertificateImage">
+            <div class="sq-book-img myZoomIn" v-show="isShowSqBookModal">
+                <i class="close" @click="hideSqBookModal"></i>
+                <img :src="isPC?parameters.appletsCertificateImage:parameters.appletsCertificateImage">
             </div>
         </transition>
     </template>
+    <template v-else>
+        <div class="not-found">
+            <img src="https://static.caimei365.com/www/not-found.png">
+            <p>该商品授权信息不存在!</p>
+        </div>
+    </template>
 </div><!-- 引入底部 -->
 <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/common/serviceapi/product.service.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/product/qualityauthorize.js(v=${version})}"></script>
 </body>