72 lines
1.8 KiB
JavaScript
72 lines
1.8 KiB
JavaScript
class Log {
|
|
constructor() {
|
|
this.userinfo = {}
|
|
this.renderImg();
|
|
this.submitLogin();
|
|
this.golableOn();
|
|
}
|
|
|
|
renderImg() {
|
|
var userchioose = "./img/1.jpg"
|
|
for (var i = 1;i<11;i++) {
|
|
if (i == 3 || i == 4 || i == 5) {
|
|
$(".modal-body").append(`<img src="./img/${i}.gif" alt="">`)
|
|
} else {
|
|
$(".modal-body").append(`<img class="${i==1?'active': ''}" src="./img/${i}.jpg" alt="">`)
|
|
}
|
|
}
|
|
|
|
$(".modal-body img").click(function (){
|
|
$(this).addClass('active').siblings().removeClass("active");
|
|
console.log($(this).attr("src"))
|
|
userchioose = $(this).attr("src");
|
|
});
|
|
|
|
$(".submit").click(function () {
|
|
$(".header img").attr("src", userchioose)
|
|
$('#myModal').modal('hide', 'fit')
|
|
})
|
|
}
|
|
|
|
golableOn() {
|
|
io.socket.on('UserNameExist', () => {
|
|
new $.zui.Messager('用户名已存在，请重新输入', {
|
|
icon: 'heart',
|
|
placement: 'top-right', // 定义显示位置
|
|
type: 'danger'
|
|
}).show();
|
|
});
|
|
|
|
io.socket.on('LoginSuccess', () => {
|
|
console.log(this.userinfo);
|
|
localStorage.setItem("userinfo", JSON.stringify(this.userinfo))
|
|
location.href = "index.html";
|
|
})
|
|
}
|
|
|
|
submitLogin() {
|
|
$(".login").click(() => {
|
|
var room = $(".header input[type=number]")
|
|
var username = $(".header input[type=text]");
|
|
if (room.val().length == 0 || username.val().length ==0) {
|
|
new $.zui.Messager('房间号和用户名不能为空', {
|
|
icon: 'heart',
|
|
placement: 'top-right', // 定义显示位置
|
|
type: 'danger'
|
|
}).show();
|
|
} else {
|
|
this.userinfo = {
|
|
roomid: room.val(),
|
|
username: username.val(),
|
|
img: $(".header img").attr("src")
|
|
};
|
|
io.socket.emit('login', this.userinfo);
|
|
|
|
|
|
}
|
|
});
|
|
}
|
|
|
|
}
|
|
|
|
new Log(); |