moxunpw
/
layui_toolnb


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314
							<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, height=device-height, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
  <meta name="format-detection" content="telephone=no">
  <title>镜像站@WAP 版演示</title>

  <link rel="stylesheet" href="../../../../res.layui.com/layui/dist/css/layui.css" tppabs="https://res.layui.com/layui/dist/css/layui.css?v=3.9.8">
</head>
<body>

<script src="../../../../res.layui.com/layui/dist/layui.js" tppabs="https://res.layui.com/layui/dist/layui.js?v=3.9.81"></script>
<script>
layui.config({
  base: '../dist/layim-assets/lib/'
  ,layimAssetsPath: '../dist/layim-assets/' //layim 资源文件所在目录
  ,version: true
}).extend({
  'layer-mobile': 'layer-mobile'
  ,'zepto': 'zepto'
  ,'upload-mobile': 'upload-mobile'
  ,'layim-mobile': 'layim-mobile'
}).use('layim-mobile', function(){
  var layim = layui['layim-mobile'] //WebIM
  ,layer = layui['layer-mobile']; //弹层

  //提示层
  layer.msg = function(content){
    return layer.open({
      content: content
      ,skin: 'msg'
      ,time: 2 //2秒后自动关闭
    });
  };
  
  //演示自动回复
  var autoReplay = [
    '您好，我现在有事不在，一会再和您联系。', 
    '你没发错吧？face[微笑] ',
    '这是一段演示消息 face[哈哈] ',
    '演示消息 face[心] face[心] face[心] ',
    'face[威武] face[威武] face[威武] face[威武] ',
    '<（@￣︶￣@）>',
    '你要和我说话？你真的要和我说话？你确定自己想说吗？你一定非说不可吗？那你说吧，这是自动回复。',
    'face[黑线]  你慢慢说，别急……',
    '(*^__^*) face[嘻嘻]'
  ];
  
  layim.config({
    
    
    //上传图片接口
    uploadImage: {
      url: '/upload/image' //（返回的数据格式见下文）
      ,type: '' //默认post
    }
    
    //上传文件接口
    ,uploadFile: {
      url: '/upload/file' //（返回的数据格式见下文）
      ,type: '' //默认post
    }
    
    //,brief: true

    ,init: {
      //我的信息
      mine: {
        "username": "测试" //我的昵称
        ,"id": 123 //我的ID
        ,"avatar": "../../../../other/crop.0.0.300.300.180/006Iv8Wjly8ff7ghbigcij308c08ct8i.jpg"/*tpa=http://tvax1.sinaimg.cn/crop.0.0.300.300.180/006Iv8Wjly8ff7ghbigcij308c08ct8i.jpg*/ //我的头像
        ,"sign": "测试内容"
      }
      //我的好友列表
      ,"friend": [{
      "groupname": "测试分组一"
      ,"id": 0
      ,"list": [{
        "username": "测试1"
        ,"id": "100001"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": "测试内容1"
        ,"status": "online"
      },{
        "username": "测试2"
        ,"id": "100001222"
        ,"sign": "测试内容2"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
      },{
        "username": "测试3"
        ,"id": "10034001"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": ""
      },{
        "username": "测试4"
        ,"id": "168168"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": "测试内容4"
      },{
        "username": "测试5"
        ,"id": "666666"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": "测试内容5"
      }]
    },{
      "groupname": "测试分组二"
      ,"id": 1
      ,"list": [{
        "username": "测试6"
        ,"id": "121286"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": "测试内容6"
      },{
        "username": "测试7"
        ,"id": "108101"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": "微电商达人"
      },{
        "username": "测试8"
        ,"id": "12123454"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": "测试内容8"
      },{
        "username": "测试9"
        ,"id": "102101"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": ""
      },{
        "username": "测试10"
        ,"id": "3435343"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": ""
      }]
    },{
      "groupname": "测试分组三"
      ,"id": 2
      ,"list": [{
        "username": "测试11"
        ,"id": "76543"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": "测试内容11"
      },{
        "username": "测试12"
        ,"id": "4803920"
        ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
        ,"sign": "测试内容12"
      }]
    }]
    ,"group": [{
      "groupname": "测试群组一"
      ,"id": "101"
      ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
    },{
      "groupname": "测试群组二"
      ,"id": "102"
      ,"avatar": "../../../../res.layui.com/images/fly/avatar/default.png"/*tpa=https://res.layui.com/images/fly/avatar/default.png*/
    }]
    }
    
    //扩展聊天面板工具栏
    ,tool: [{
      alias: 'code'
      ,title: '代码'
      ,iconUnicode: '&#xe64e;'
    }]
    
    //扩展更多列表
    ,moreList: [{
      alias: 'find'
      ,title: '发现'
      ,iconUnicode: '&#xe628;' //图标字体的unicode，可不填
      ,iconClass: '' //图标字体的class类名
    },{
      alias: 'share'
      ,title: '分享与邀请'
      ,iconUnicode: '&#xe641;' //图标字体的unicode，可不填
      ,iconClass: '' //图标字体的class类名
    }]
    
    //,tabIndex: 1 //用户设定初始打开的Tab项下标
    //,isNewFriend: false //是否开启“新的朋友”
    ,isgroup: true //是否开启“群聊”
    //,chatTitleColor: '#c00' //顶部Bar颜色
    //,title: 'LayIM' //应用名，默认：我的IM
  });
  
  //创建一个会话
  /*
  layim.chat({
    id: 111111
    ,name: '许闲心'
    ,type: 'kefu' //friend、group等字符，如果是group，则创建的是群聊
    ,avatar: 'http://tp1.sinaimg.cn/1571889140/180/40030060651/1'
  });
  */

  
  //监听点击“新的朋友”
  layim.on('newFriend', function(){
    layim.panel({
      title: '新的朋友' //标题
      ,tpl: '<div style="padding: 10px;">自定义模版，{{d.data.test}}</div>' //模版
      ,data: { //数据
        test: '么么哒'
      }
    });
  });
  
  //查看聊天信息
  layim.on('detail', function(data){
    //console.log(data); //获取当前会话对象
    layim.panel({
      title: data.name + ' 聊天信息' //标题
      ,tpl: '<div style="padding: 10px;">自定义模版</div>' //模版
      ,data: { //数据
        test: '么么哒'
      }
    });
  });
  
  //监听点击更多列表
  layim.on('moreList', function(obj){
    switch(obj.alias){
      case 'find':
        layer.msg('自定义发现动作');
        
        //模拟标记“发现新动态”为已读
        layim.showNew('More', false);
        layim.showNew('find', false);
      break;
      case 'share':
        layim.panel({
          title: '邀请好友' //标题
          ,tpl: '<div style="padding: 10px;">自定义模版，{{d.data.test}}</div>' //模版
          ,data: { //数据
            test: '么么哒'
          }
        });
      break;
    }
  });
  
  //监听返回
  layim.on('back', function(){
    //如果你只是弹出一个会话界面（不显示主面板），那么可通过监听返回，跳转到上一页面，如：history.back();
  });
  
  //监听自定义工具栏点击，以添加代码为例
  layim.on('tool(code)', function(insert, send){
    insert('[pre class=layui-code]123[/pre]'); //将内容插入到编辑器
    send();
  });
  
  //监听发送消息
  layim.on('sendMessage', function(data){
    var To = data.to;
    //console.log(data);

    //演示自动回复
    setTimeout(function(){
      var obj = {};
      if(To.type === 'group'){
        obj = {
          username: '模拟群员'+(Math.random()*100|0)
          ,avatar: layui.cache.layimAssetsPath + 'images/face/'+ (Math.random()*72|0) + '.gif'
          ,id: To.id
          ,type: 'group'
          ,content: autoReplay[Math.random()*9|0]
        }
      } else {
        obj = {
          username: To.name
          ,avatar: To.avatar
          ,id: To.id
          ,type: To.type
          ,content: autoReplay[Math.random()*9|0]
        }
      }
      layim.getMessage(obj);
    }, 3000);
  });
  
  //模拟收到一条好友消息
  setTimeout(function(){
    layim.getMessage({
      username: "测试1"
      ,avatar: ""
      ,id: "100001"
      ,type: "friend"
      ,cid: Math.random()*100000|0 //模拟消息id，会赋值在li的data-cid上，以便完成一些消息的操作（如撤回），可不填
      ,content: "嗨，欢迎体验LayIM。演示标记："+ new Date().getTime()
    });
  }, 3000);
  
  //监听查看更多记录
  layim.on('chatlog', function(data, ul){
    console.log(data);
    layim.panel({
      title: '与 '+ data.name +' 的聊天记录' //标题
      ,tpl: '<div style="padding: 10px;">这里是模版，{{d.data.test}}</div>' //模版
      ,data: { //数据
        test: 'Hello'
      }
    });
  });
  
  //模拟"更多"有新动态
  layim.showNew('More', true);
  layim.showNew('find', true);
});
</script>
</body>
</html>