在微信中显示对应商品的小程序码

@@ -5,148 +5,318 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title></title>
+    <style>
+        img {
+            border: 0;
+            display: block;
+            margin: 0 auto;
+            max-width: 100%;
+        }
+
+        .open-wechat-QR {
+            display: none;
+        }
+
+        .top-downloadbar.wechat .download-go {
+            position: absolute;
+            top: 50%;
+            -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+            font-size: .7rem;
+            padding: 0 .5rem;
+            height: 1.35rem;
+            line-height: 1.35rem;
+            border-radius: .165rem;
+            color: #fff;
+            text-decoration: none;
+            right: 5.375rem;
+            background: #000;
+        }
+
+        .top-downloadbar.wechat .open-wechat-QR {
+            display: block;
+            position: absolute;
+            top: 50%;
+            -webkit-transform: translateY(-50%);
+            transform: translateY(-50%);
+            font-size: .7rem;
+            padding: 0 .5rem;
+            height: 1.35rem;
+            line-height: 1.35rem;
+            border-radius: .165rem;
+            color: #fff;
+            text-decoration: none;
+            right: .375rem;
+            background: red;
+        }
+
+        .mini-app-container {
+            display: none;
+            position: fixed;
+            width: 100%;
+            height: 100%;
+            left: 0;
+            top: 0;
+            background-color: rgba(0, 0, 0, 0.5);
+            z-index: 99;
+        }
+
+        .mini-app-container.show {
+            display: block;
+        }
+
+        .mini-app-container .mini-app-dialog {
+            position: absolute;
+            width: 12.5rem;
+            left: 50%;
+            top: 50%;
+            background-color: #fff;
+            -webkit-border-radius: 0.2rem;
+            border-radius: 0.2rem;
+            -webkit-transform: translateX(-50%) translateY(-50%);
+            transform: translateX(-50%) translateY(-50%);
+            overflow: hidden;
+        }
+
+        .mini-app-dialog .mini-app-header {
+            position: relative;
+            width: 100%;
+            height: 2rem;
+            line-height: 2rem;
+        }
+
+        .mini-app-dialog .mini-app-close {
+            width: 0.75rem;
+            height: 0.75rem;
+            position: absolute;
+            right: 0.25rem;
+            top: 0.25rem;
+            background-size: cover;
+            background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAmFJREFUeNrMl99OE0EUxrdL9bYYbWoEJajUP5ckXsM2IZJe0IQQqY9AGq0+QY0vUExs+gqQkCblAi0ktPckvUQoQoyihDbE6qWELN9pzjbr6O7MlK7xJB/Tdg/nN+fszOzZkG3bhszK5fIlDI+hKegRdAe6wpe/Q/vQFrQBradSqV+ymCE/MICDGF5AGeiaoWYnUAHKYwJtbTCgaQyLUMzozZpQFvAlJTCAAxjecJb9sCL0DBM48wQzlGY4Z/TXStATN9wUHBYDgJLNchX/zBjZznO2QdpT5553wLx6dy6wkFStBcVptTulzvpAJ3jfNhQCb0Mj0LTH9Sj0snOPke1lyQr+ihkeYExAexKoBd/P9D8+fhlimnwaRX0c38FxCAEpmOUBJ2gCPk34UsarPvGu0ilo8lHoZ2PQpgsuZv6BocfwuYXPVWhUErMDHle4d3GG3wDgkOEfGWq5oDUFKNm4yRkZPcCtHjLtVjGMPxGN7XCP4RbDaSveZOhtjTgRytjW3Iu24m++RuCfGv67XN4jZDoMXcfnL1z2A404P0zJ3hShlgPl8lZd8EkN+B6B67qZMvQudJ/vuS68TuCKxKnB0G8C1LEHDI9plL1icp/U8nFKuqCbAtQNrzKcjswZSWtUcZ5OOXx55eFI5aNM3ivseTo6k9BDaM3D5zUmlwvzF3pIL3g8oWoaq5WAnySPxXy3A+FuMGsEb8+dzrPb+uCHZQxvA4QW3B2n2HNRD70SALQkVvQ3MHeBaW7I+2VFscP8vxr6v7zCZLk1iv6TVxiFl7ZBvtwWXtoqAJ7KYp4LMACryxGMnWAbNgAAAABJRU5ErkJggg==");
+        }
+
+        .mini-app-dialog .mini-app-content {
+            padding: 0.625rem;
+            text-align: center;
+        }
+
+        #mini_app_img {
+            width: 6.45rem;
+            height: 6.45rem;
+        }
+
+        .mini-app-footer {
+            height: 3.65rem;
+            line-height: 3.65rem;
+            font-size: 0.7rem;
+            text-align: center;
+        }
+    </style>
     <script type="text/javascript">
-        (function(d,c){var e=d.documentElement,a="orientationchange" in window?"orientationchange":"resize",b=function(){var f=e.clientWidth;if(!f){return}if(f>=750){e.style.fontSize="40px"}else{e.style.fontSize=40*(f/750)+"px"}};if(!d.addEventListener){return}b();c.addEventListener(a,b,false);d.addEventListener("DOMContentLoaded",b,false)})(document,window);
+      (function (d, c) {
+        var e = d.documentElement, a = "orientationchange" in window ? "orientationchange" : "resize", b = function () {
+          var f = e.clientWidth;
+          if (!f) {
+            return
+          }
+          if (f >= 750) {
+            e.style.fontSize = "40px"
+          } else {
+            e.style.fontSize = 40 * (f / 750) + "px"
+          }
+        };
+        if (!d.addEventListener) {
+          return
+        }
+        b();
+        c.addEventListener(a, b, false);
+        d.addEventListener("DOMContentLoaded", b, false)
+      })(document, window);
     </script>
-    <link href="https://cdn.yoho.cn/ufo/1.0.1/css/swiper-4.4.1.min.css" rel="stylesheet" type="text/css"/>
-    <link href="https://cdn.yoho.cn/ufo/1.0.1/css/goodsDetail.css" rel="stylesheet" type="text/css"/>
-    <script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
+    <link href="//cdn.yoho.cn/ufo/1.0.1/css/swiper-4.4.1.min.css" rel="stylesheet" type="text/css"/>
+    <link href="//cdn.yoho.cn/ufo/1.0.1/css/goodsDetail.css" rel="stylesheet" type="text/css"/>
+    <script type="text/javascript" src="//res.wx.qq.com/open/js/jweixin-1.1.0.js"></script>
 </head>
 <body>
-    <div class="top-downloadbar" id="top-downloadbar">
-        <a href="javascript:void(0);" class="download-close" id="download-close"></a>
-        <span class="download-icon"></span>
-        <span class="download-text">Yoho!Buy有货</span>
-        <p class="download-text-desc">新用户送惊喜礼包</p>
-        <a class="download-go" id="download-go" href=''>立即打开</a>
-    </div>
-    <div class="goods-detail-page">
-        <div class="head">
-            <div class="swiper-pagination"></div>
+<div class="top-downloadbar" id="top-downloadbar">
+    <a href="javascript:void(0);" class="download-close" id="download-close"></a>
+    <span class="download-icon"></span>
+    <span class="download-text">Yoho!Buy有货</span>
+    <p class="download-text-desc">新用户送惊喜礼包</p>
+    <a class="download-go" id="download-go" href=''>立即打开</a>
+    <a class="open-wechat-QR" id="open_wechat-qr">进入小程序</a>
+</div>
+<!--小程序二维码在微信中展示-->
+<div class="mini-app-container">
+    <div class="mini-app-dialog">
+        <div class="mini-app-header">
+            <span class="mini-app-close" id="mini_app_close"></span>
         </div>
-        <div class="swiper-container">
-            <div class="swiper-wrapper">
-            </div>
-            
+        <div class="mini-app-content">
+            <img id="mini_app_img">
         </div>
-
-        <h2 class="goods-title"></h2>
-        <ul class="goods-info">
-            <li>
-                <div class="label">颜色</div>
-                <div class="cont color"></div>
-            </li>
-            <li>
-                <div class="label">品牌</div>
-                <div class="cont brand-name"></div>
-            </li>
-            <li>
-                <div class="label">系列</div>
-                <div class="cont series-name"></div>
-            </li>
-            <li>
-                <div class="label">发货时间</div>
-                <div class="cont sale-time"></div>
-            </li>
-            <li>
-                <div class="label">货号</div>
-                <div class="cont product-code"></div>
-            </li>
-        </ul>
-
-        <img src="https://cdn.yoho.cn/ufoapp/productdetail/service.png" class="goods-dec">
+        <div class="mini-app-footer">长按识别小程序码进入</div>
     </div>
-        
-    
-    <script src="https://cdn.yoho.cn/ufo/1.0.1/js/jquery-1.11.3.min.js" type="text/javascript"></script>
-    <script src="https://cdn.yoho.cn/ufo/1.0.1/js/swiper-4.4.1.min.js" type="text/javascript"></script>
-    <script src="https://cdn.yoho.cn/ufo/1.0.1/js/share.js"></script>
-    <script>
-        function getUrlParam(name) {
-            var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
-            var r = window.location.search.substr(1).match(reg);
-
-            if (r != null) {
-                return unescape(r[2]);
-            }
+</div>
+<div class="goods-detail-page">
+    <div class="head">
+        <div class="swiper-pagination"></div>
+    </div>
+    <div class="swiper-container">
+        <div class="swiper-wrapper">
+        </div>
+    </div>
+
+    <h2 class="goods-title"></h2>
+    <ul class="goods-info">
+        <li>
+            <div class="label">颜色</div>
+            <div class="cont color"></div>
+        </li>
+        <li>
+            <div class="label">品牌</div>
+            <div class="cont brand-name"></div>
+        </li>
+        <li>
+            <div class="label">系列</div>
+            <div class="cont series-name"></div>
+        </li>
+        <li>
+            <div class="label">发货时间</div>
+            <div class="cont sale-time"></div>
+        </li>
+        <li>
+            <div class="label">货号</div>
+            <div class="cont product-code"></div>
+        </li>
+    </ul>
+
+    <img src="//cdn.yoho.cn/ufoapp/productdetail/service.png" class="goods-dec">
+</div>
+
+
+<script src="//cdn.yoho.cn/ufo/1.0.1/js/jquery-1.11.3.min.js" type="text/javascript"></script>
+<script src="//cdn.yoho.cn/ufo/1.0.1/js/swiper-4.4.1.min.js" type="text/javascript"></script>
+<script src="//cdn.yoho.cn/ufo/1.0.1/js/share.js"></script>
+<script>
+  function getUrlParam(name) {
+    var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
+    var r = window.location.search.substr(1).match(reg);
+
+    if (r != null) {
+      return unescape(r[2]);
+    }
+
+    return null;
+  }
+
+  function getImgUrl(src, width = 300, height = 300, mode = 2) {
+    return src ? src.replace(/(\{width}|\{height}|\{mode})/g, function ($0) {
+      const dict = {
+        '{width}': width,
+        '{height}': height,
+        '{mode}': mode || 2
+      };
+
+      return dict[$0];
+    }).replace(/https?:/, '') : '';
+  };
 
-            return null; 
+  $(function () {
+    var productId = getUrlParam('id');
+    var ajaxUrl = location.pathname.indexOf('ufo-gateway') > -1 ? '/ufo-gateway' : '/';
+    var qrDomain = '//m.yohobuy.com/api/wechat/miniapp.jpg'; // 小程序二维码图片生成地址
+    /*if (location.hostname.indexOf('localhost') > -1) {
+      ajaxUrl = 'http://2.yohobuy.com/';
+      qrDomain = '//api-test3.dev.yohocorp.com/wechat/miniapp/img-check.jpg';
+    }*/
+    var isWechat = /MicroMessenger/.test(navigator.userAgent);
+    var errorCount = 0; // 加载二维码错误次数
+
+    if (isWechat) { // 判断如果在微信中则显示二维码，头部展示进入小程序按钮
+      $('#top-downloadbar').addClass('wechat');
+      var qrImage = qrDomain + '?param={"id":' + productId + '}&miniQrType=23&miniapp_type=63'; // 小程序二维码图片生成地址+参数获取二维码
+      $('#mini_app_img').attr('src', qrImage);
+
+      $('#mini_app_img')[0].onload = function() {
+        $('.mini-app-container').addClass('show'); // 打开页面就显示二维码
+      };
+      $('#mini_app_img')[0].onerror = function () {
+        if (errorCount < 5) {
+          errorCount += 1;
+          setTimeout(function(){
+            $('#mini_app_img').attr('src', qrImage);
+          }, 1000);
+        } else {
+          console.log('二维码图片无法加载');
         }
+      }
+      $('#mini_app_close').on('click', function() { // 点击X按钮关闭二维码
+        $('.mini-app-container').removeClass('show');
+      });
+      $('#open_wechat-qr').on('click', function() { // 点击进入小程序按钮显示二维码
+        $('.mini-app-container').addClass('show');
+      })
+    }
 
-        function getImgUrl(src, width = 300, height = 300, mode = 2) {
-            return src ? src.replace(/(\{width}|\{height}|\{mode})/g, function($0) {
-                const dict = {
-                    '{width}': width,
-                    '{height}': height,
-                    '{mode}': mode || 2
-                };
+    $('.download-go').attr('href', '//union.yoho.cn/union/app-downloads.html?openby:yohobuy={"action":"go.ufo","params":{"pagename":"productDetail","productId":' + productId + '}}')
 
-                return dict[$0];
-            }).replace(/https?:/, '') : '';
-        };
+    $('.download-close').on('click', function () {
+      $('.top-downloadbar').hide();
+    });
+
+    $.get(ajaxUrl, {
+      method: 'ufo.product.data',
+      product_id: productId
+    }, function (ret) {
+      if (ret && ret.code == 200) {
+        var data = ret.data && ret.data.product_info || {};
+        var goodsList = data.goods_list && data.goods_list[0] || {};
 
-        $(function() {
-            var productId = getUrlParam('id');
-            var ajaxUrl = location.pathname.indexOf('ufo-gateway') > -1 ? '/ufo-gateway' : '/';
-
-            $('.download-go').attr('href', 'https://union.yoho.cn/union/app-downloads.html?openby:yohobuy={"action":"go.ufo","params":{"pagename":"productDetail","productId":' + productId + '}}')
-
-            $('.download-close').on('click', function() {
-                $('.top-downloadbar').hide();
-            });
-
-            $.get(ajaxUrl, {
-                method: 'ufo.product.data',
-                product_id: productId
-            }, function(ret) {
-                if (ret && ret.code == 200) {
-                    var data = ret.data && ret.data.product_info || {};
-                    var goodsList = data.goods_list && data.goods_list[0] || {};
-
-                    $('.color').html(goodsList.color_name || '');
-                    $('.brand-name').html(data.brand_name || '');
-                    $('.series-name').html(data.series_name || '');
-                    $('.sale-time').html(data.sale_time || '');
-                    $('.product-code').html(data.product_code || '');
-                    $('.goods-title').html(data.product_name || '');
-                    $('title').html(data.product_name || '商品详情');
-
-                    goodsList.image_list.map(function(item) {
-                        if(item.image_url) {
-                            $('.swiper-wrapper').append('<div class="swiper-slide"><img src="' + getImgUrl(item.image_url, 750, 750) + '"></div>');
-                        }
-                    });
-
-                    if ($('.swiper-slide').length > 0) {
-                        new Swiper('.swiper-container', {
-                            autoplay: true,
-                            pagination: {
-                                el: '.swiper-pagination',
-                                type: 'fraction',
-                                renderFraction: function (currentClass, totalClass) {
-                                return '<span class="' + currentClass + '"></span>' +
-                                        '|' +
-                                        '<span class="' + totalClass + '"></span>';
-                                }
-                            }
-                        });
-                    }
-
-                    var shareImg = '';
-
-                    if (goodsList && goodsList.image_list && goodsList.image_list.length > 0) {
-                        shareImg = getImgUrl(goodsList.image_list[0].image_url);
-                    }
-
-                    share({
-                        shareTitle: data.product_name + '-UFO潮流好物',
-                        shareDesc: '我在UFO飞碟好物发现了一件超棒的商品，戳进来看>>>',
-                        shareImg: 'http:' + shareImg,
-                        shareLink: location.href
-                    })
-                }
-            })
+        $('.color').html(goodsList.color_name || '');
+        $('.brand-name').html(data.brand_name || '');
+        $('.series-name').html(data.series_name || '');
+        $('.sale-time').html(data.sale_time || '');
+        $('.product-code').html(data.product_code || '');
+        $('.goods-title').html(data.product_name || '');
+        $('title').html(data.product_name || '商品详情');
+
+        goodsList.image_list.map(function (item) {
+          if (item.image_url) {
+            $('.swiper-wrapper').append('<div class="swiper-slide"><img src="' + getImgUrl(item.image_url, 750, 750) + '"></div>');
+          }
         });
-    </script>
+
+        if ($('.swiper-slide').length > 0) {
+          new Swiper('.swiper-container', {
+            autoplay: true,
+            pagination: {
+              el: '.swiper-pagination',
+              type: 'fraction',
+              renderFraction: function (currentClass, totalClass) {
+                return '<span class="' + currentClass + '"></span>' +
+                  '|' +
+                  '<span class="' + totalClass + '"></span>';
+              }
+            }
+          });
+        }
+
+        var shareImg = '';
+
+        if (goodsList && goodsList.image_list && goodsList.image_list.length > 0) {
+          shareImg = getImgUrl(goodsList.image_list[0].image_url);
+        }
+
+        share({
+          shareTitle: data.product_name + '-UFO潮流好物',
+          shareDesc: '我在UFO飞碟好物发现了一件超棒的商品，戳进来看>>>',
+          shareImg: 'http:' + shareImg,
+          shareLink: location.href
+        })
+      }
+    })
+  });
+</script>
 </body>
 </html>
\ No newline at end of file