正品联盟页面修改

src/main/java/com/caimei/www/controller/unlimited/ProductController.java

@@ -32,7 +32,9 @@ public class ProductController extends BaseController {
     private static final String INSTRUMENT_PAGE_PATH = "product/instrument";
     private static final String TEMPORARY_PAGE_PATH = "product/temporary";
     private static final String INSTRUMENT_LIST_PATH = "product/instruelist";
-    private static final String QUALITY_AUTHORRIZE_PATH = "product/qualityauthorize";
+    // private static final String QUALITY_AUTHORRIZE_PATH = "product/qualityauthorize";
+    /** 新正品联盟页面 */
+    private static final String QUALITY_AUTHORRIZE_PATH = "product/alliance-page";
     private static final String ACTIVITY_TOP_PATH = "activity/activityTopic";
     private static final String CLOUD_BEAUTY_PATH = "activity/beautyTopic";
     private static final String ACTIVITY_COUPON_EXP = "activity/couponExp";

src/main/resources/static/css/product/alliance-page.css

@@ -0,0 +1,123 @@
+html{width:100%}
+html::-webkit-scrollbar{width:8px;height:8px;background-color:#f8f8f8}
+html::-webkit-scrollbar-thumb{border-radius:4px;background:#b9b9b9}
+body{margin:0;color:#393939;background:#f8f8f8}
+h1,h2,p{margin:0}
+a{text-decoration:none}
+[v-cloak]{display:none}
+#zplm{position:relative}
+@media screen and (min-width:768px){body{padding-top:80px;-webkit-box-sizing:border-box;box-sizing:border-box}
+.container{width:1184px;margin:0 auto}
+.zp-header{position:fixed;top:0;width:100%;z-index:99;background:-webkit-gradient(linear,right top,left top,from(#191919),to(#464646));background:-o-linear-gradient(right,#191919 0%,#464646 100%);background:linear-gradient(270deg,#191919 0%,#464646 100%)}
+.zp-header .container{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;height:80px}
+.zp-header h1 .name{font-size:0}
+.zp-main{min-height:84vh;overflow:hidden}
+.zp-main .zp-row{margin:16px auto;padding:24px;background:#fff;border-radius:2px;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.zp-main .zp-row:nth-child(1){display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.zp-main .zp-img{position:relative;width:540px;height:540px;border:1px solid #ececec;-webkit-box-sizing:border-box;box-sizing:border-box;overflow:hidden}
+.zp-main .zp-img::after{content:"";display:block;width:100%;height:100%;position:absolute;top:0;left:0;z-index:3}
+.zp-main .zp-img img{display:block}
+.zp-main .zp-img .zp-cover-img{width:100%;height:100%}
+.zp-main .zp-img .zp-auth-logo,.zp-main .zp-img .zp-auth-sign,.zp-main .zp-img .zp-auth-card{position:absolute}
+.zp-main .zp-img .zp-auth-logo{max-width:120px;max-height:120px;top:24px;left:24px}
+.zp-main .zp-img .zp-auth-sign{right:24px;bottom:24px;width:70px;height:70px}
+.zp-main .zp-img .zp-auth-card{left:24px;bottom:24px;width:140px;height:110px;cursor:pointer;z-index:4}
+.zp-main .zp-info{-webkit-box-flex:1;-ms-flex:1;flex:1;margin-left:24px}
+.zp-main .zp-info h2{font-size:20px;font-weight:bold;line-height:28px;width:100%;overflow:hidden;white-space:nowrap;-o-text-overflow:ellipsis;text-overflow:ellipsis}
+.zp-main .zp-info .content{position:relative;margin-top:24px}
+.zp-main .zp-info .content .zp-item{font-size:14px;line-height:24px;margin-bottom:8px}
+.zp-main .zp-info .content .zp-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:8px}
+.zp-main .zp-info .content .zp-group .line{width:1px;height:14px;background:#949494;margin:0 16px}
+.zp-main .zp-info .content .zp-group .zp-brand,.zp-main .zp-info .content .zp-group .zp-origin{color:#949494;margin-bottom:0}
+.zp-main .zp-info .content .zp-agent{font-size:16px}
+.zp-main .zp-info .content .zp-click{position:absolute}
+.zp-main .zp-info .content .zp-click.websit{top:0;right:0;color:#bc1724;font-size:14px;line-height:24px;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.zp-main .zp-info .content .zp-click.websit span{margin-left:0;-webkit-transition:all 0.4s;-o-transition:all 0.4s;transition:all 0.4s}
+.zp-main .zp-info .content .zp-click.websit:hover span{margin-left:4px}
+.zp-main .zp-info .zp-auth-info{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;height:114px;padding:24px;margin-top:24px;color:#bc1724;background:url(/img/alliance-page/zp-pc-auth-bg.png) no-repeat;-webkit-box-sizing:border-box;box-sizing:border-box}
+.zp-main .zp-info .zp-auth-info .zp-auth-icon{width:100%;height:28px;background:url(/img/alliance-page/zp-pc-auth-icon.png) no-repeat}
+.zp-main .zp-info .zp-auth-info .zp-auth-text{font-size:16px}
+.zp-main .zp-info .zp-auth-info .zp-auth-text b{font-weight:bold}
+.zp-main .zp-title{font-size:18px;font-weight:bold}
+.zp-main .zp-title .line{position:relative;width:100%;height:1px;margin-top:12px;background:#ececec}
+.zp-main .zp-title .line::before{position:absolute;left:0;bottom:0;content:"";display:block;width:72px;height:2px;background:#393939}
+.zp-main .zp-params{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-ms-flex-wrap:wrap;flex-wrap:wrap;margin-top:24px}
+.zp-main .zp-params .row{width:50%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start}
+.zp-main .zp-params .row .col{font-size:14px;padding:6px 0;line-height:24px}
+.zp-main .zp-params .row .col:first-child{width:14%;color:#949494}
+.zp-main .zp-params .row .col:first-child::after{content:":";margin-left:4px}
+.zp-main .zp-params .row .col:last-child{-webkit-box-flex:1;-ms-flex:1;flex:1}
+.zp-footer{margin-top:24px;padding:20px 0;background-color:#eee}
+.zp-footer p{text-align:center;font-size:14px;color:#999}
+.zp-footer p a{color:#999;-webkit-transition:color 0.2s;-o-transition:color 0.2s;transition:color 0.2s}
+.zp-footer p a:hover{color:#bc1724}
+.zp-mask{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;background:rgba(0,0,0,0.5)}
+.zp-popup{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;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}
+.zp-popup .zp-popup-content{position:relative;width:620px;height:380px;border-radius:4px;background:#fff;overflow:hidden}
+.zp-popup .zp-popup-content .title{padding:12px 20px;background:#f1f1f1;font-size:18px;line-height:30px}
+.zp-popup .zp-popup-content .content{height:326px;-webkit-box-sizing:border-box;box-sizing:border-box;padding:16px;overflow-y:auto;line-height:2;text-align:justify;text-indent:2em;font-size:14px}
+.zp-popup .zp-popup-content .content::-webkit-scrollbar{width:4px;height:4px;background-color:#fff}
+.zp-popup .zp-popup-content .content::-webkit-scrollbar-thumb{border-radius:2px;background:#b9b9b9}
+.zp-popup .zp-popup-content .close{position:absolute;right:12px;top:12px;display:block;width:30px;height:30px;background:url(/img/alliance-page/icon-close.png) no-repeat center;cursor:pointer}
+.zp-popup .zp-popup-content .close:hover{background-image:url(/img/alliance-page/icon-close-hover.png)}
+.zp-popup .zp-img-popup{position:fixed;width:622px}
+.zp-popup .zp-img-popup img{display:block;width:100%}
+.zp-popup .zp-img-popup .close{position:absolute;display:block;width:32px;height:32px;top:-40px;right:0;background:url(/img/alliance-page/zp-close.png) no-repeat center;background-size:32px;cursor:pointer}
+.zp-wechat-ewm{position:fixed;width:160px;right:0;bottom:80px;padding:8px;border-radius:4px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:-5px -5px 8px rgba(200,200,200,0.1);box-shadow:-5px -5px 8px rgba(200,200,200,0.1)}
+.zp-wechat-ewm img{display:block;width:100%}
+.zp-wechat-ewm .zp-tip{font-size:12px;text-align:center}
+.zp-wechat-ewm .zp-tip span:first-child{display:none}
+.zp-wechat-ewm .close{width:24px;height:24px;background:url(/img/alliance-page/icon-close-hover.png) no-repeat center;background-size:10px;position:absolute;top:-12px;left:-12px;border-radius:50%;padding:4px;background-color:#fff;-webkit-box-shadow:-5px -5px 8px rgba(200,200,200,0.1);box-shadow:-5px -5px 8px rgba(200,200,200,0.1);cursor:pointer}
+.not-found{height:calc(100vh - 80px);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;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;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{width:100vw}
+.zp-header{display:none}
+.zp-main{overflow:hidden}
+.zp-main .zp-row:nth-child(2){padding:4vw;background:#fff}
+.zp-main .zp-row h2,.zp-main .zp-row .content{background:#fff;padding:0 4vw}
+.zp-main .zp-img{width:100vw;height:100vw;position:relative;overflow:hidden}
+.zp-main .zp-img .zp-cover-img{position:relative;width:100%;height:100%}
+.zp-main .zp-img .zp-auth-logo,.zp-main .zp-img .zp-auth-sign,.zp-main .zp-img .zp-auth-card{position:absolute;z-index:3}
+.zp-main .zp-img .zp-auth-logo{max-width:18vw;max-height:18vw;top:4vw;left:4vw}
+.zp-main .zp-img .zp-auth-sign{width:14vw;height:14vw;right:4vw;bottom:4vw}
+.zp-main .zp-img .zp-auth-card{width:27vw;height:20vw;left:4vw;bottom:4vw;cursor:pointer}
+.zp-main .zp-info h2{font-size:4.2vw;font-weight:normal;line-height:1.6;text-align:justify;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+.zp-main .zp-info .content{position:relative;padding:4vw}
+.zp-main .zp-info .content .zp-item{font-size:3.6vw;line-height:2}
+.zp-main .zp-info .content .zp-group{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;-webkit-box-align:center;-ms-flex-align:center;align-items:center}
+.zp-main .zp-info .content .zp-group .zp-item{color:#949494}
+.zp-main .zp-info .content .zp-group .line{display:block;width:1px;height:3.6vw;background:#c4c4c4;margin:0 3.6vw}
+.zp-main .zp-info .content .zp-click{position:absolute;top:4vw;right:4vw;line-height:2;cursor:pointer}
+.zp-main .zp-info .content .zp-click.websit{font-size:3.6vw;color:#bc1724}
+.zp-main .zp-info .zp-auth-info{width:100vw;height:20vw;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;padding:0 4vw;margin:4vw 0;-webkit-box-sizing:border-box;box-sizing:border-box;background:url(/img/alliance-page/zp-h5-auth-bg.png) no-repeat;background-size:100vw auto}
+.zp-main .zp-info .zp-auth-info .zp-auth-icon{width:100%;height:4.7vw;background:url(/img/alliance-page/zp-h5-auth-icon.png) no-repeat;background-size:12vw auto}
+.zp-main .zp-info .zp-auth-info .zp-auth-text{font-size:3.6vw;margin-top:1.2vw;line-height:1.6}
+.zp-main .zp-title{font-size:4.2vw}
+.zp-main .zp-title .line{width:100%;height:1px;background:#c4c4c4;margin-top:4vw;opacity:0.4}
+.zp-main .zp-params .row{display:table-row}
+.zp-main .zp-params .row .col{display:table-cell;padding:2vw 1vw;font-size:3.6vw}
+.zp-main .zp-params .row .col:nth-child(1){color:#949494;max-width:40vw;min-width:16vw;padding-right:3vw}
+.zp-footer{width:100vw;background-color:#fff;margin-top:4vw;padding:4vw 0}
+.zp-footer p{text-align:center;font-size:3.2vw;color:#999}
+.zp-footer p a{color:#f52e3e;font-weight:bold;cursor:pointer}
+.zp-mask{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;background:rgba(0,0,0,0.5)}
+.zp-popup{position:fixed;width:100%;height:100%;left:0;top:0;z-index:100;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}
+.zp-popup .zp-popup-content{position:relative;width:86vw;height:128vw;border-radius:4px;background:#fff;overflow:hidden}
+.zp-popup .zp-popup-content .title{padding:4vw 0;background:#f1f1f1;font-size:4.2vw;line-height:4.8vw;text-align:center}
+.zp-popup .zp-popup-content .content{height:111vw;-webkit-box-sizing:border-box;box-sizing:border-box;padding:4vw 4vw 0;overflow-y:auto;line-height:2;text-align:justify;text-indent:2em;font-size:3.6vw}
+.zp-popup .zp-popup-content .close{position:absolute;right:4vw;top:4vw;display:block;width:4.8vw;height:4.8vw;background:url(/img/alliance-page/icon-close.png) no-repeat center;cursor:pointer}
+.zp-popup .zp-popup-content .close:hover{background-image:url(/img/alliance-page/icon-close-hover.png)}
+.zp-popup .zp-img-popup{position:fixed;width:86vw}
+.zp-popup .zp-img-popup img{display:block;width:100%}
+.zp-popup .zp-img-popup .close{position:absolute;display:block;width:6vw;height:6vw;top:-8vw;right:0;background:url(/img/alliance-page/zp-close.png) no-repeat center;background-size:6vw;cursor:pointer}
+.zp-wechat-ewm{position:fixed;width:33vw;right:4vw;bottom:30vw;padding:2vw;border-radius:4px;background:#fff;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2);box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2)}
+.zp-wechat-ewm img{display:block;width:100%}
+.zp-wechat-ewm .zp-tip{font-size:2.8vw;text-align:center}
+.zp-wechat-ewm .zp-tip span{display:block}
+.zp-wechat-ewm .close{width:4vw;height:4vw;background:url(/img/alliance-page/icon-close-hover.png) no-repeat center;background-size:2vw;position:absolute;top:-2vw;left:-2vw;border-radius:50%;padding:1vw;background-color:#fff;-webkit-box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2);box-shadow:-2vw -2vw 4vw rgba(200,200,200,0.2)}
+.not-found{width:100vw;padding-top:50vw;text-align:center}
+.not-found img{width:30vw}
+.not-found p{font-size:4vw;margin-top:6vw;color:#a8a8a8}
+}.loading-wrap{position:fixed;top:0;left:0;z-index:99;width:100vw;height:100vh;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;background:rgba(255,255,255,1)}
+.loading-wrap img{width:120px}

src/main/resources/static/js/product/alliance-page.js

@@ -0,0 +1,136 @@
+'use strict';
+// loading组件
+var LoadingWrap = {
+    name: 'Loading',
+    render: function render(h) {
+        return h('div', { class: ['loading-wrap'] }, [h('img', { attrs: { src: '/img/alliance-page/loading.gif', alt: 'loading' } })]);
+    }
+};
+
+function remove(el) {
+    el.removeChild(el.instance.$el);
+}
+
+function append(el) {
+    el.appendChild(el.instance.$el);
+}
+
+// 定义 loading 指令
+var loadingDirective = {
+    inserted: function inserted(el, binding) {
+        // 创建 loading 组件构造函数
+        var LoadingCtor = Vue.extend(LoadingWrap);
+        // new 一个 loading组件实例
+        var loadingInstance = new LoadingCtor();
+        // 组件挂载
+        el.instance = loadingInstance.$mount();
+        // 传入值为 true 时才展示
+        if (binding.value) {
+            // 将组件挂载到绑定指令的元素上
+            append(el);
+        }
+    },
+    update: function update(el, binding) {
+        // 值更新时进行操作
+        if (binding.value !== binding.oldValue) {
+            binding.value ? append(el) : remove(el);
+        }
+    }
+};
+
+// vue实例
+var zplm = new Vue({
+    el: '#zplm',
+    directives: {
+        loading: loadingDirective
+    },
+    data: {
+        isPc: $(window).width() > 768,
+        authCardVisible: false,
+        statementVisible: false,
+        showStatementContent: false,
+        wechatVisible: true,
+        showMask: false,
+        isRequest: true,
+        // 产品id
+        productId: '',
+        //产品参数对象
+        productAuthInfo: {},
+        //错误信息
+        errorMessage: '',
+        // 定时器
+        timer: null
+    },
+    computed: {
+        // 封面图 主图
+        coverImage: function coverImage() {
+            return this.isPc ? this.productAuthInfo.pcImage : this.productAuthInfo.appletsImage;
+        },
+
+        // 授权机构
+        authOrigin: function authOrigin() {
+            return this.productAuthInfo.agentFlag !== 0 ? this.productAuthInfo.shopName : this.productAuthInfo.brandName;
+        },
+
+        // 不换行
+        noWarp: function noWarp() {
+            if (this.isPc && this.productAuthInfo.paramList.length > 1) return { 'white-space': 'nowrap' };
+            return '';
+        }
+    },
+    created: function created() {
+        this.getProductId();
+        this.fetchProductAuthInfo();
+    },
+
+    filters: {
+        // 处理sn码
+        snCode: function snCode(code) {
+            if (!code) return '';
+            return code.replace(/^(\w{2})\w+(\w{4})$/, "$1******$2");
+        }
+    },
+    methods: {
+        // 获取商品id
+        getProductId: function getProductId() {
+            var productId = window.location.pathname.split('-')[1].split('.')[0];
+            this.productId = parseInt(productId);
+        },
+
+        // 获取授权信息
+        fetchProductAuthInfo: function fetchProductAuthInfo() {
+            var that = this;
+            ProductApi.GetAuthProductDeatil({ productId: that.productId }, function (res) {
+                // 获取授权信息失败
+                if (res.code) {
+                    that.isRequest = false;
+                    return that.errorMessage = res.msg;
+                }
+                // 获取授权信息成功
+                that.productAuthInfo = res.data;
+                that.isRequest = false;
+            });
+        },
+
+        // 显示授权牌
+        handleShowAuthCard: function handleShowAuthCard() {
+            this.authCardVisible = !this.authCardVisible;
+            this.showMask = !this.showMask;
+        },
+
+        // 显示声明弹窗
+        handleShowStatement: function handleShowStatement() {
+            var that = this;
+            this.statementVisible = !this.statementVisible;
+            this.showMask = !this.showMask;
+            this.timer = setTimeout(function () {
+                that.showStatementContent = !that.showStatementContent;
+            }, 800);
+        },
+
+        // 显示微信二维码
+        handleShowWechat: function handleShowWechat() {
+            this.wechatVisible = !this.wechatVisible;
+        }
+    }
+});

src/main/resources/static/js/supplier-center/operation/list.js

@@ -177,7 +177,7 @@ var operationPage = new Vue({
         }
         console.log(this.listQuery.orderState)
         $('.navLayout').find('.navList').removeClass("on").find('.con').hide().find('a').removeClass("on");
-        $('.navLayout').find('.navList').eq(2).addClass("on").find('.con').show().find('a').eq(1).addClass("on");
+        $('.navLayout').find('.navList').eq(4).addClass("on").find('.con').show().find('a').eq(1).addClass("on");
 
     }
 });

src/main/resources/templates/product/alliance-page.html

@@ -0,0 +1,170 @@
+<!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="${coreServer}" id="coreServer">
+		<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>&gt;</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"
+								:style="[noWarp]"
+							>
+								<div class="col" v-text="param.name"></div>
+								<div class="col" v-text="param.content"></div>
+							</div>
+						</div>
+					</div>
+				</main>
+				<!-- 底部 -->
+				<footer class="zp-footer">
+					<p><a href="#" @click.prevent="handleShowStatement">采美声明</a>&nbsp;|&nbsp;由采美信息技术提供技术支持</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">
+					<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>