|
|
@@ -1,175 +1,105 @@
|
|
|
<!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>
|
|
|
-<!--美博会专题-->
|
|
|
-<div class="container" id="qualityAuthorize" v-cloak>
|
|
|
- <input type="hidden" th:value="${spiServer}" id="spiServer"><input type="hidden" th:value="${coreServer}" id="coreServer">
|
|
|
- <input type="hidden" th:value="${agent}" id="userAgent">
|
|
|
- <div class="container-header clear">
|
|
|
- <div class="header-top" v-if="isPC">采美正品联盟</div>
|
|
|
- <div class="header-bottom" v-if="isPC">
|
|
|
- <div class="inner">
|
|
|
- <div class="logo">
|
|
|
- <a href="/index.html">
|
|
|
- <img src="/img/base/logo.png" alt="">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="header-right">
|
|
|
- <div class="header-nav">
|
|
|
- <a href="javascript:void(0)">
|
|
|
- <i class="icon icon-nav"></i>
|
|
|
- 采美商城
|
|
|
- </a>
|
|
|
- <div class="header-nav-tabs">
|
|
|
- <div class="item-nav" v-for="(item, index) in tabsList" :class="current==index?'addImg':''" :key="index">
|
|
|
- <a href="javascript:void(0)">{{ item.text }}</a>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="header-use">
|
|
|
- <a href="javascript:void(0)">个人中心</a>
|
|
|
- </div>
|
|
|
+<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>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <div class="header-bottom" v-if="!isPC">
|
|
|
- <div class="bottom_nav">
|
|
|
- <i class="mIcon icon_nav"></i>
|
|
|
- <div class="header-nav-tabs">
|
|
|
- <div class="item-nav" v-for="(item, index) in tabsList" :class="current==index?'addImg':''" :key="index">
|
|
|
- <a href="javascript:void(0)">{{ item.text }}</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>
|
|
|
- <div class="bottom_logo">
|
|
|
- <a href="/index.html">
|
|
|
- <img src="/img/base/logo.png" alt="">
|
|
|
- </a>
|
|
|
- </div>
|
|
|
- <div class="bottom_use">
|
|
|
- <i class="mIcon icon_nav"></i>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="header-bottom-msg" v-if="!isPC">
|
|
|
- <i class="mIcon icon-msg"></i>
|
|
|
- <p>请仔细比对仪器上的序列号与SN码是否一致，您也可前往官方防伪网站查看更多信息。</p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="container-content clear">
|
|
|
- <div class="inner">
|
|
|
- <div class="content-top">
|
|
|
- <div class="content-top-left">
|
|
|
- <div class="content-logo">
|
|
|
- <img src="/img/quality/logo.png" alt="">
|
|
|
+ <!-- 商品介绍区域 -->
|
|
|
+ <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="content-mssg">
|
|
|
- <div class="mssg-name">上海品辉医疗正品授权</div>
|
|
|
- <div class="mssg-labels">
|
|
|
- <span>正品联盟成员</span>
|
|
|
- </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>
|
|
|
- </div>
|
|
|
- <div class="content-top-right" v-if="isPC">
|
|
|
- <div class="content-button">
|
|
|
- <a href="javascript:void(0)">查看下一个(0)</a>
|
|
|
+ <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 class="content-bottom">
|
|
|
- <div class="preview-banner clearfix" id="imgShown" >
|
|
|
- <div class="preview-banner-big bigImage" v-if="isPC">
|
|
|
- <img class="preview-img" :src="previewBigimage" >
|
|
|
- <span class="mask"></span>
|
|
|
- </div>
|
|
|
- <div class="preview-banner-small" id="CM____pic_thumb" v-if="isPC">
|
|
|
- <ul class="preview-thumb-ul">
|
|
|
- <li class="item" v-for="(item, index) in previewThumb" :class="current==index?'addImg':''" :key="index" :data-src="item" @click="ImgList(item,index)">
|
|
|
- <img :src="item">
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- <div class="CM____pic_thumb swiper-container" id="swiperImage" v-else>
|
|
|
- <ul class="swiper-wrapper clear preview-thumb-ul">
|
|
|
- <li class="swiper-slide mfc"v-for="(item, index) in previewThumb" :class="current==index?'addImg':''" :key="index" :data-src="item" @click="ImgList(item,index)">
|
|
|
- <img :src="item">
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- <div class="swiper-pagination mfc"></div>
|
|
|
- </div>
|
|
|
- <div class="preview-box" id="mag" v-if="isPC">
|
|
|
- <div class="bigitem">
|
|
|
- <img id="magnifierImg" :src="previewBigimage"/>
|
|
|
- </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 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> | 由采美信息技术提供技术支持</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>
|
|
|
-</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><!-- 引入底部 -->
|
|
|
<template th:replace="components/foot-link"></template>
|
|
|
-<script charset="utf-8" type="text/javascript" src="/lib/magnifier.js"></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>
|
|
|
+</body>
|
