77 lines
2.2 KiB
JavaScript
77 lines
2.2 KiB
JavaScript
class Login {
|
|
constructor() {
|
|
this.ImgList = [
|
|
'1.jpg','2.jpg','3.gif','4.gif','5.gif',
|
|
'6.jpg','7.jpg','8.jpg','9.jpg','10.jpg'
|
|
];
|
|
this.UserChiooseImg = "1.jpg"
|
|
this.RenderUserImg()
|
|
this.bindClickEnterRoom()
|
|
this.onSocket()
|
|
}
|
|
|
|
|
|
RenderUserImg() {
|
|
this.ImgList.forEach((v,i)=>{
|
|
$(".chiooseUserImg").append(`
|
|
<li class="${i == 0 ? 'active' : ''}">
|
|
<img src="../img/${v}" alt="">
|
|
</li>
|
|
`);
|
|
});
|
|
|
|
// 绑定选中事件
|
|
var li = $(".chiooseUserImg li");
|
|
var self = this;
|
|
li.on("click", function() {
|
|
// 切换激活样式
|
|
$(this).addClass("active").siblings().removeClass("active");
|
|
// 获取你点击li的下标
|
|
var index = $(this).index();
|
|
// 将用户选中的图片保存到 UserChiooseImg
|
|
self.UserChiooseImg = self.ImgList[index];
|
|
});
|
|
|
|
$(".setUserImage").on("click", () => {
|
|
$(".login img").attr("src", `../img/${this.UserChiooseImg}`)
|
|
$('#chiooseImg').modal('hide')
|
|
})
|
|
}
|
|
|
|
bindClickEnterRoom() {
|
|
$(".icon-tubiaozhizuomoban").on("click", () => {
|
|
var name = $(".name").val();
|
|
var room = $(".room").val();
|
|
|
|
if (name.length == 0) {
|
|
new $.zui.Messager('用户名不能为空！', {
|
|
icon: 'exclamation-sign',
|
|
type: 'danger'
|
|
}).show();
|
|
} else {
|
|
ws.socket.emit("UserLogin", {
|
|
name: name,
|
|
url: this.UserChiooseImg,
|
|
room: room
|
|
});
|
|
}
|
|
})
|
|
}
|
|
|
|
onSocket() {
|
|
// 如果用户已存在
|
|
ws.socket.on("UserAlready", res => {
|
|
new $.zui.Messager(res, {
|
|
icon: 'exclamation-sign',
|
|
type: 'danger'
|
|
}).show();
|
|
})
|
|
|
|
ws.socket.on("LoginSuccess", (res) => {
|
|
localStorage.setItem("UserInfo", JSON.stringify(res))
|
|
go("index.html")
|
|
})
|
|
}
|
|
}
|
|
|
|
new Login(); |