去评论
dz插件网

实现亮剑在线聊天插件穿透Theme Box素材发布资源下载插件里面使用在线客服加载的实现方法

admin
2023/07/28 22:20:32
实现亮剑在线聊天插件穿透Theme Box素材发布资源下载插件里面使用在线客服加载的实现方法：

最终效果：http://market.dz-x.net


Theme Box的素材发布资源下载插件比较封闭，要实现让亮剑在线聊天插件穿透在这个插件里面实现客服效果：


编辑：
/source/plugin/one_market/template/default/common/footer.php

也就是在 </body> 之前，
其上行添加：
  1. <script src="source/plugin/aljhtx/static/js/jquery-2.2.3.min.js" type="text/javascript" type="text/javascript" charset="utf-8"></script>
  2. <script>var jQuery=jQuery.noConflict();</script>


  5. <script src="source/plugin/aljhtx/static/js/layer/layer.js?20181220" type="text/javascript" type="text/javascript" charset="utf-8"></script>
  6. <style>
  7.     body .layui-layim-min {
  8.         border: 1px solid #D9D9D9;
  9.     }


  12.     .aljol-layui-layer-shade {
  13.         position: fixed;
  14.         _position: absolute;
  15.         pointer-events: auto;
  16.         -webkit-overflow-scrolling: touch;
  17.         margin: 0;
  18.         padding: 0;
  19.         top:auto;
  20.         left:auto;
  21.         bottom:0;
  22.         right:0;
  23.         background-color: #fff;
  24.         -webkit-background-clip: content;
  25.         border-radius: 2px;
  26.         box-shadow: 1px 1px 50px rgba(0,0,0,.3);
  27.         z-index: 5;
  28.     }
  29.     .layui-box, .layui-box * {
  30.         box-sizing: content-box;
  31.     }
  32.     .layui-layer-page .layui-layer-content {
  33.         position: relative;
  34.         overflow: auto;
  35.     }
  36.     .layui-layim-min .layui-layer-content {
  37.         margin: 0 5px;
  38.         padding: 5px 10px;
  39.         white-space: nowrap;
  40.     }
  41.     .layim-chat-list li, .layui-layim-min .layui-layer-content {
  42.         position: relative;
  43.         margin: 5px;
  44.         padding: 5px 30px 5px 5px;
  45.         line-height: 40px;
  46.         cursor: pointer;
  47.         border-radius: 3px;
  48.     }
  49.     .layim-chat-list li img, .layui-layim-min .layui-layer-content img {
  50.         width: 40px;
  51.         height: 40px;
  52.         border-radius: 100%;
  53.     }
  54.     .layim-chat-list li *, .layui-layim-min .layui-layer-content * {
  55.         display: inline-block;
  56.         *display: inline;
  57.         *zoom: 1;
  58.         vertical-align: top;
  59.         font-size: 14px;
  60.     }
  61.     .layui-layim-close .layui-layer-content span {
  62.         width: auto;
  63.         max-width: 120px;
  64.     }
  65.     .layim-chat-list li span, .layui-layim-min .layui-layer-content span {
  66.         width: 100px;
  67.         padding-left: 10px;
  68.         font-size: 16px;
  69.         white-space: nowrap;
  70.         overflow: hidden;
  71.         text-overflow: ellipsis;
  72.     }
  73.     .layui-layer-setwin {
  74.         position: absolute;
  75.         right: 15px;
  76.         *right: 0;
  77.         top: 15px;
  78.         font-size: 0;
  79.         line-height: initial;
  80.     }
  81.     .ajlol-order-numbers {
  82.         display: inline-block;
  83.         text-align: center;
  84.         position: absolute;
  85.         bottom: 17px;
  86.         background-color: #f23030;
  87.         height: 17px;
  88.         padding-left: 5px;
  89.         padding-right: 5px;
  90.         line-height: 17px;
  91.         font-style: normal;
  92.         border-radius: 15px;
  93.         right: 7px;
  94.         font-size: 9px;
  95.         color: #fff;
  96.         font-family: PingFangSC-Regular,Helvetica,"Droid Sans",Arial,sans-serif;
  97.         border:1px solid #fff
  98.     }
  99. </style>




  104. <div class="aljol-layui-layer-shade layui-layer-page layui-box layui-layim-min layui-layim-close" id="layui-layer5" type="page" times="5" showtime="0" contype="string">
  105.     <div id="layui-layim-close" class="layui-layer-content">
  106.         <img src="avatar.php?uid=$_G['uid']&size=small" />
  107.         <span>在线聊天</span>
  108.         <div class="aljol-newscount">
  109.             
  110.         </div>
  111.     </div>
  112.     <span class="layui-layer-setwin">


  115.     </span>
  116. </div>
  117. <script>
  118.     function open_aljol() {
  119.         layer.open({
  120.             type: 2
  121.             ,offset: 'rb'
  122.             ,title: '在线聊天'
  123.             ,area: ['414px', '80%']
  124.             ,content: 'plugin.php?id=aljol' //iframe的url
  125.             ,shade: 0 //不显示遮罩
  126.         });
  127.     }


  130.     OL = {
  131.         voice_aljol: function() {
  132.             var audio = document.createElement("audio");
  133.             audio.src = 'source/plugin/aljol/static/img/aljol.mp3';
  134.             audio.play();
  135.         },
  136.         newsMes_aljol:function () {
  137.             var url='plugin.php?id=aljol&act=newsnum&ajax=1';
  138.             jQuery.post(url,function(res){
  139.                 if(res!=null && res!='') {
  140.                     if(res.newscount>0){
  141.                         jQuery('.aljol-newscount').html('<i class="ajlol-order-numbers">'+res.newscount+'</i>');
  142.                     }else{
  143.                         jQuery('.aljol-newscount').html('');
  144.                     }
  145.                     
  146.                     if(res.newscnum>0){
  147.                         OL.voice_aljol();
  148.                     }
  149.                     
  150.                 }
  151.             },'json');
  152.         },
  153.         init:function () {
  154.             setInterval(function(){
  155.                 OL.newsMes_aljol();
  156.             },5000)
  157.         }
  158.     };
  159.     OL.init();
  160. </script>



手机端添加：
编辑：/source/plugin/one_market/template/touch/default/common/footer.php
也就是在 </body> 之前，
其上行
[此处包含隐藏内容，如果需要查看请回复]
然后保存后，再次刷新插件页面，即可正常加载亮剑在线聊天客服插件了~

最终效果演示：http://market.dz-x.net


由此衍生：任何插件的页面都可以加载亮剑这个在线聊天客服插件，如需实现，联系右侧QQ客服协助~


该教程所涉及的插件：
[Theme Box]素材发布资源下载 OSS存储+用户组打折+下载限速 (one_market)[更新支持DZ X3.5]
https://www.dz-x.net/t/5197/1/1.html
(出处: DZ插件网)

【亮剑】在线聊天 (aljol)
https://www.dz-x.net/t/1930/1/1.html
(出处: DZ插件网)


同类教程的更多扩展功能的应用案例：
在Theme Box的素材发布资源下载插件导航里面加上多国语言切换导航按钮并实现多种展现效果的方式
https://www.dz-x.net/t/60430/1/1.html
(出处: DZ插件网)

进入原文参与互动