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