share

application/plugins/view/share/index/content.html

 <div class="plugins-share">
     <ul>
-        <li class="share-sian">
-            <span class="icon iconfont icon-sina"></span>
-        </li>
-        <li class="share-qq">
+        <li class="share-qq" data-type="qq">
             <span class="icon iconfont icon-qq"></span>
         </li>
-        <li class="share-url">
-            <span class="icon iconfont icon-url"></span>
-        </li>
-        <li class="share-qq-space">
+        <li class="share-qq-space" data-type="qq-space">
             <span class="icon iconfont icon-qq-space"></span>
         </li>
-        <li class="share-weixin">
+        <li class="share-weixin" data-type="weixin">
             <span class="icon iconfont icon-weixin"></span>
         </li>
+        <li class="share-sian" data-type="sian">
+            <span class="icon iconfont icon-sina"></span>
+        </li>
+        <li class="share-url" data-type="url">
+            <span class="icon iconfont icon-url"></span>
+        </li>
     </ul>
+</div>
+
+<!-- 微信弹出框 -->
+<div class="am-modal am-modal-no-btn" tabindex="-1" id="plugins-share-weixin-modal">
+    <div class="am-modal-dialog">
+        <div class="am-modal-hd">
+            <a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
+        </div>
+        <div class="am-modal-bd">
+            <div id="plugins-share-modal-weixin-qrcode" class="am-text-center"></div>
+            <p>打开微信，点击底部的“发现”</p>
+            <p>使用“扫一扫”即可将网页分享至朋友圈</p>
+        </div>
+    </div>
 </div>
\ No newline at end of file

public/static/plugins/css/share/style.css

@@ -8,8 +8,33 @@
 }
 .plugins-share ul li {
     float: left;
+    width: 35px;
+    height: 35px;
+    text-align: center;
+    line-height: 35px;
+    border-radius: 50px;
+    margin-right: 10px;
+    cursor: pointer;
+}
+.plugins-share ul li:last-child {
+    margin-right: 0;
 }
 .plugins-share ul li .iconfont {
     font-size: 20px;
     color: #fff;
 }
+.plugins-share ul li.share-qq {
+    background: #d82d0e;
+}
+.plugins-share ul li.share-qq-space {
+    background: #0da6e4;
+}
+.plugins-share ul li.share-weixin {
+    background: #3eab0f;
+}
+.plugins-share ul li.share-sian {
+    background: #e71f2d;
+}
+.plugins-share ul li.share-url {
+    background: #607d8b;
+}

public/static/plugins/js/share/style.js

+$(function()
+{
+    // 分享事件
+    $(document).on('click', '.plugins-share ul li', function()
+    {
+        // 分享类型
+        var type = $(this).data('type');
+
+        // 来源站点
+        var site = 'shopxo';
+
+        // url
+        var url = $(this).parents('.plugins-share').data('url') || window.location.href;
+            url = encodeURIComponent(url);
+
+        // 标题
+        var title = $(this).parents('.plugins-share').data('title') || $('title').text() || null;
+            title = title == null ? '' : encodeURIComponent(title);
+
+        // 描述
+        var desc = $(this).parents('.plugins-share').data('desc') || $('meta[name="description"]').attr('content') || null;
+            desc = desc == null ? '' : encodeURIComponent(desc);
+
+        // 封面图
+        var pic = $(this).parents('.plugins-share').data('pic') || null;
+            pic = pic == null ? '' : encodeURIComponent(pic);
+
+        // 平台地址
+        var platform_url = null;
+        switch(type)
+        {
+            // QQ
+            case 'qq' :
+                platform_url = 'https://connect.qq.com/widget/shareqq/index.html?url='+url+'&utm_medium=qqim&title='+title+'&desc='+desc+'&pics='+pic+'&site='+site
+                break;
+
+            // QQ空间
+            case 'qq-space' :
+                platform_url = 'http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url='+url+'&utm_medium=qzone&title='+title+'&desc='+desc+'&pics='+pic+'&summary='+desc+'&site='+site;
+                break;
+
+            // 新浪
+            case 'sian' :
+                platform_url = 'http://service.weibo.com/share/share.php?url='+url+'&utm_medium=sian&title='+title+'&desc='+desc+'&pics='+pic+'&site='+site;
+                break;
+
+            // 微信
+            case 'weixin' :
+                var $modal = $('#plugins-share-weixin-modal');
+                $('#plugins-share-modal-weixin-qrcode').empty().qrcode({
+                    text: decodeURIComponent(url),
+                    width: 200,
+                    height: 200
+                });
+                $modal.modal({width: 260});
+                $modal.modal('open');
+                break;
+
+            // url
+            case 'url' :
+                alert("已复制好，可贴粘。");
+                break;
+        }
+        
+        // 跳转
+        if(platform_url != null)
+        {
+            window.open(platform_url);  
+        }
+    });
+});
\ No newline at end of file