|
|
<!DOCTYPE html>
|
|
|
<html lang="zh">
|
|
|
<head>
|
|
|
<meta charset="UTF-8">
|
|
|
<title>欢迎使用iTalk聊天室</title>
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
|
|
|
<meta name="description" content="">
|
|
|
<meta name="keywords" content="">
|
|
|
<meta name="author" content="">
|
|
|
<link rel="icon" href="/static/images/logo.png" >
|
|
|
<link rel="stylesheet" href="/static/css/iconfont.css">
|
|
|
<link rel="stylesheet" href="/static/css/iTalk.css">
|
|
|
</head>
|
|
|
<body>
|
|
|
<div id="app"></div>
|
|
|
<template id="tpl">
|
|
|
<div class="tpl">
|
|
|
<div class="it-warp" v-if="loginUser">
|
|
|
<div class="it-panel" v-show="currentMenu=='session'">
|
|
|
<div class="it-search-warp" >
|
|
|
<img :src="loginUser.avatarUrl" alt="">
|
|
|
<div class="it-search-group">
|
|
|
<span class="iconfont icon-search"></span>
|
|
|
<input type="text" placeholder="搜索" v-model="keyword">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="wt-session-listBox wt-scroll">
|
|
|
<div class="wt-users-item" v-for="item in searchUser(keyword)"
|
|
|
:class="{active:item.id==sessionId}"
|
|
|
@click="changeSession(item)">
|
|
|
<div class="wt-user-avatar">
|
|
|
<img :src="item.avatarUrl" alt="">
|
|
|
</div>
|
|
|
<div class="wt-item-info">
|
|
|
<div class="wt-item-name">
|
|
|
{{item.name}}
|
|
|
<span class="wt-message-time" v-if="getLastMessage(item.id).time">{{getLastMessage(item.id).time | friendlyTime}}</span>
|
|
|
</div>
|
|
|
<div class="wt-item-message">
|
|
|
{{getLastMessage(item.id).content}}
|
|
|
<span class="wt-message-num" v-if="getUnReaderNum(item.id)!=0">{{getUnReaderNum(item.id)}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="it-panel" v-show="currentMenu=='setting'">
|
|
|
<div class="it-setting-banner">
|
|
|
<div class="it-loginAvatar">
|
|
|
<img :src="loginUser.avatarUrl" alt="">
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="it-setting-list">
|
|
|
<div class="it-setting-item">
|
|
|
<span>用户名：{{loginUser.name}}</span>
|
|
|
</div>
|
|
|
<div class="it-setting-item">
|
|
|
<span>消息提示音</span>
|
|
|
<div class="it-switch">
|
|
|
<input type="checkbox" id="voice" v-model="setting.isVoice">
|
|
|
<label for="voice"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="it-setting-item">
|
|
|
<span>显示用户名称</span>
|
|
|
<div class="it-switch">
|
|
|
<input type="checkbox" id="name" v-model="setting.isName">
|
|
|
<label for="name"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="it-setting-item">
|
|
|
<span>显示消息时间</span>
|
|
|
<div class="it-switch">
|
|
|
<input type="checkbox" id="switch" v-model="setting.isTime">
|
|
|
<label for="switch"></label>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<span class="iconfont icon-bug it-bug" @click.stop="showLogs()"></span>
|
|
|
</div>
|
|
|
<div class="it-panel" v-show="currentMenu=='about'">
|
|
|
<h2 class="it-about-title">关于</h2>
|
|
|
<div class="it-about-list">
|
|
|
<div class="it-about-item">版本：v1.0</div>
|
|
|
<div class="it-about-item"><span>协议：MIT</span></div>
|
|
|
<div class="it-about-item"><span>GitHub：<a href="https://github.com/cleverqin/node-websocket-Chatroom" target="_blank">源码地址</a></span></div>
|
|
|
<div class="it-about-item"><span>邮箱：705597001@qq.com</span></div>
|
|
|
<div class="it-about-item"><span><a href="https://github.com/cleverqin/node-websocket-Chatroom" target="_blank"><img src="https://img.shields.io/github/stars/cleverqin/node-websocket-Chatroom?label=Star&style=flat&logo=github" alt="" style="vertical-align: middle;"></a> <a href="https://github.com/cleverqin/node-websocket-Chatroom" target="_blank"><img src="https://img.shields.io/github/forks/cleverqin/node-websocket-Chatroom?label=Fork&style=flat&logo=github" alt="" style="vertical-align: middle;"></a></span></div>
|
|
|
</div>
|
|
|
<span class="iconfont icon-bug it-bug" @click.stop="showLogs()"></span>
|
|
|
</div>
|
|
|
<div class="it-menuBox">
|
|
|
<div class="item-menu-item " :class="{active:currentMenu=='session'}" @click="currentMenu='session'">
|
|
|
<span class="iconfont icon-comments"></span>
|
|
|
<p>会话</p>
|
|
|
</div>
|
|
|
<div class="item-menu-item " :class="{active:currentMenu=='setting'}" @click="currentMenu='setting'">
|
|
|
<span class="iconfont icon-cog"></span>
|
|
|
<p>设置</p>
|
|
|
</div>
|
|
|
<div class="item-menu-item " :class="{active:currentMenu=='about'}" @click="currentMenu='about'">
|
|
|
<span class="iconfont icon-info"></span>
|
|
|
<p>关于</p>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="it-session-window" v-if="session">
|
|
|
<div class="it-session-header">
|
|
|
<span class="iconfont icon-left it-back" @click="sessionId=''"></span>
|
|
|
<img :src="session.avatarUrl" alt="">
|
|
|
<span>{{session.name}}</span>
|
|
|
<span class="iconfont icon-phone" v-if="session.deviceType=='touch'"></span>
|
|
|
<span class="iconfont icon-pc" v-if="session.deviceType=='pc'"></span>
|
|
|
<template v-if="session.type=='group'">
|
|
|
<span class="wt-session-address">({{sessionList.length}})</span>
|
|
|
</template>
|
|
|
</div>
|
|
|
<div class="it-session-container" :style="{bottom:!isShow?'41px':'181px'}">
|
|
|
<div class="wt-window-messageList wt-scroll" ref="messageList">
|
|
|
<template v-for="item in messageList">
|
|
|
<div class="wt-message-item" :class="item.from.id==loginUser.id?'wt-message-send':'wt-message-receive'" >
|
|
|
<div class="wt-avatarBox">
|
|
|
<img :src="item.from.avatarUrl" alt="">
|
|
|
</div>
|
|
|
<div class="wt-message-body">
|
|
|
<template v-if="setting.isName">
|
|
|
<div class="wt-from-info" v-if="item.from.id!=loginUser.id">
|
|
|
<span >{{item.from.name}}</span>
|
|
|
<span class="wt-time-span" v-if="setting.isTime">{{item.time | friendlyTime}}</span>
|
|
|
</div>
|
|
|
<div class="wt-from-info" v-else>
|
|
|
<span class="wt-time-span" v-if="setting.isTime">{{item.time | friendlyTime}}</span>
|
|
|
<span >{{item.from.name}}</span>
|
|
|
</div>
|
|
|
</template>
|
|
|
<div class="wt-message-text" v-html="parseText(item.content)"></div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
</div>
|
|
|
</div>
|
|
|
<div class="it-session-footer">
|
|
|
<div class="it-send-form">
|
|
|
<span class="iconfont icon-expression" @click.stop="showExpression()"></span>
|
|
|
<div class="it-input"><input type="text" v-model="text" @keyup.enter="sendMessage(text)"></div>
|
|
|
<span class="it-sendBtn" @click="sendMessage(text)">发送</span>
|
|
|
</div>
|
|
|
<div class="it-expression-warp" v-show="isShow">
|
|
|
<div class="it-expression-list">
|
|
|
<div class="it-expression-item" v-for="item in qqExpression" @click.stop="selectExpression(item)">
|
|
|
<img :src="baseUrl+item.url" alt="" >
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
<transition name="slider">
|
|
|
<div class="wt-logBox" v-show="isShowLog">
|
|
|
<div class="wt-logHeader">
|
|
|
连接日志
|
|
|
<span class="wt-log-closeBtn iconfont icon-close" @click.stop="isShowLog=false"></span>
|
|
|
</div>
|
|
|
<div class="wt-log-container" @click.stop="">
|
|
|
<div class="ui-scroll wt-log-list" id="log-container">
|
|
|
<div class="wt-log-item" v-for="log in logs">
|
|
|
<span :class="'wt-log-'+log.type">{{log.text}}</span>
|
|
|
<span class="wt-log-time">{{log.time|formatTime}}</span>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
|
<transition name="slider">
|
|
|
<div class="wt-alter-message" v-show="isAlter">{{alterMessage}}</div>
|
|
|
</transition>
|
|
|
<login @login="userLogin" v-if="!loginUser"></login>
|
|
|
<audio src="/static/images/8400.mp3" ref="audio"></audio>
|
|
|
</div>
|
|
|
</template>
|
|
|
<template id="login">
|
|
|
<div class="iTalk-container iTalk-loginBox">
|
|
|
<div class="iTalk-loginForm-box">
|
|
|
<transition name="slider">
|
|
|
<div class="wt-error-message" v-if="errorMsg">{{errorMsg}}</div>
|
|
|
</transition>
|
|
|
<form class="iTalk-login-form">
|
|
|
<div class="iTalk-loginUser-avatarBox">
|
|
|
<img :src="user.avatarUrl" alt="" @click.stop="isShow=!isShow">
|
|
|
</div>
|
|
|
<div class="iTalk-form-inputBox">
|
|
|
<input type="text" class="iTalk-user-name" placeholder="用户名" v-model="user.name">
|
|
|
<input type="text" class="iTalk-user-password" placeholder="密码">
|
|
|
<button type="button" class="iTalk-formBtn" @click="login(user)">登录</button>
|
|
|
</div>
|
|
|
</form>
|
|
|
</div>
|
|
|
<transition name="slider">
|
|
|
<div class="iTalk-select-imgBox" v-show="isShow">
|
|
|
<div class="iTalk-addAvatar-box">
|
|
|
<input type="text" v-model="QQ" placeholder="输入QQ号添加使用QQ头像" @click.stop="" @keyup.enter="addQQAvatar(QQ)">
|
|
|
</div>
|
|
|
<ul class="iTalk-avatar-list">
|
|
|
<li :class="{active:user.avatarUrl==item}" v-for="item in avatars">
|
|
|
<img :src="item" alt="" @click="user.avatarUrl=item">
|
|
|
</li>
|
|
|
</ul>
|
|
|
</div>
|
|
|
</transition>
|
|
|
</div>
|
|
|
</template>
|
|
|
<script src="/static/js/vue.min.2.2.0.js"></script>
|
|
|
<script src="/static/js/vue-resource.js"></script>
|
|
|
<script src="/static/js/socket.io.js"></script>
|
|
|
<script src="/static/js/index.js"></script>
|
|
|
</body>
|
|
|
</html>
|
|
|
|