layim 实现自定义皮肤(PHP版)

分享 未结
7 2509
回眸淡然笑
悬赏:20飞吻
老规矩先上效果图

需要用到的资源点 这里 下载(php文件以及sql文件)
如果同时将自定义皮肤保存至服务器,即可实现皮肤的随处可用(换浏览器登录也会正常显示自定义皮肤),这里我修改了部分源码
修改部分如下
============layim部分==============
  //换肤模版 修改
var elemSkinTpl = ['<ul class="layui-layim-skin">'
,'{{# layui.each(d.skin, function(index, item){ }}'
,'<li><img layim-event="setSkin" src="{{ item }}"></li>'
,'{{# }); }}'
,'<li layim-event="setSkin"><cite>默认</cite></li>'
,'<li layim-event="setSkinByUser"><input type="file" name="file" style="opacity: 0.01;width: 86px;height: 60px;display: block;"><cite style="margin-top: -60px;display: block;">自定义</cite></li>'
,'</ul>'].join('');
可以看到 这里我自定义了一个事件 setSkinByUser
setSkinByUser 的具体代码
    ,setSkinByUser: function (othis) {//自定义皮肤 修改
var type = 'uploadSkin';//自定义配置上传皮肤路径
var upload = cache.base[type] || {};
// othis.find('input')[0].click();
//关闭换肤
var local = layui.datcache.mine.id || {};
//调用layui.upload方法
layui.upload({
url: (upload.url || '')
, method: upload.type
, elem: othis.find('input')[0]
, unwrap: true
, type: type
, before: function () {

}
, success: function (res) {
if (res.code == 0) {
res.data = res.data || {};
//修改src
othis.attr('src', res.data.src);
//定义系统设置皮肤方法,setSkin会帮我们做剩下的事情
events.setSkin(othis);
layer.close(layer.index);
// cache.base.skin.push(res.data.src);
} else {
layer.msg(res.msg || '上传失败');
}
}
});
}
其中自定义配置上传皮肤路径 uploadSkin 在layim.config()中
                    //自定义皮肤
,uploadSkin: {
url: 'class/doAction.php?action=uploadSkin'
, type: 'post' //默认post
}
//选择系统皮肤
,systemSkin: {
url: 'class/doAction.php?action=systemSkin'
, type: 'post' //默认post
}
setSkin的代码
    //生成换肤
,setSkin: function(othis){//修改
var src = othis.attr('src');
var local = layui.datcache.mine.id || {};
local.skin = src;
if(!src) delete local.skin;
layui.data('layim', {
key: cache.mine.id
,value: local
});
var setSkinByUser = othis.attr('layim-event');

if (setSkinByUser == 'setSkin') {
var type = 'systemSkin';//自定义配置上传皮肤路径
var upload = cache.base[type] || {};
$.post(upload.url,{type:src},function(data){
console.log('系统皮肤');
});
};

try{
layimMain.css({
'background-image': src ? 'url('+ src +')' : 'none'
});
layimChat.css({
'background-image': src ? 'url('+ src +')' : 'none'
});
} catch(e) {}
layui.each(call.setSkin, function(index, item){
var filename = (src||'').replace(layui.cache.dir+'css/modules/layim/skin/', '');
item && item(filename, src);
});
}
==============php部分===========
doAction.php
    case 'uploadSkin':
$memberIdx = $_SESSION['info']['id'];
$isSetSkin = $PdoMySQL->find($tb_skin, 'memberIdx = "' . $memberIdx . '"', 'url,isUserUpload');
$file = $_FILES['file'];
$ext = explode('.',$file['name']);
if ($file['type'] != 'image/jpeg' && $file['type'] != 'image/png') {
echo '{"code":"9999","status":"n","info":"请上传格式为jpg或png的图片"}';
}
$data['url'] = $memberIdx.'_'.time().'.'.$ext[count($ext)-1];
move_uploaded_file($file['tmp_name'],'../uploads/skin/'.$data['url']);
$data['isUserUpload'] = '1';
if ($isSetSkin) {
if ($isSetSkin['isUserUpload'] == 1) {
unlink('../uploads/skin/'.$isSetSkin['url']);
}
$success = $PdoMySQL->update($data,$tb_skin, 'memberIdx = "' . $memberIdx . '"');
}else{
$data['memberIdx'] = $memberIdx;
$success = $PdoMySQL->add($data, $tb_skin);
}
$res['data']['src'] = '/uploads/skin/'.$data['url'];
$res['code'] = 0;
$res['msg'] = "";

echo json_encode($res);
break;
case 'systemSkin':
$memberIdx = $_SESSION['info']['id'];
$type = $_POST['type'];
$isSetSkin = $PdoMySQL->find($tb_skin, 'memberIdx = "' . $memberIdx . '"', 'url');
$skin = explode('/',$type);
$data['url'] = $skin[count($skin)-1];
$data['isUserUpload'] = 0;

if ($isSetSkin) {
$success = $PdoMySQL->update($data,$tb_skin, 'memberIdx = "' . $memberIdx . '"');
}else{
$data['memberIdx'] = $memberIdx;
$success = $PdoMySQL->add($data, $tb_skin);
}
$res['code'] = 0;
$res['msg'] = "";
$res['data']['src'] = $type;
echo json_encode($res);
break;
大功告成
回帖
本帖已设置禁止回复