项目背景
公司平台要做一个通讯系统，本来是java 来做的后面改前端+PHP来做，所以就用VUE来做这个了。
github
github地址
新人求star
技术栈
vue-axios
vuex
websocket
sass
css3
等...
已经完成进度
- 整体结构已经完成
- 好友列表完成
- 好友添加拒绝完成
- 好友列表发起聊天完成
- 聊天页面点击聊天完成
- 发送聊天完成
- 点击聊天列表清除未读消息完成
- 实时消息通知完成
- 好友动态上下线完成
- 实时加好友通知完成
- 优化发送文字长度
- 聊天记录本地储存 如果页面不刷新 则不会丢失
- 与后端已经联调完成，一期已经上线
部分代码
添加好友代码
<div class="AddContacts" id="AddContacts">
<navBar></navBar>
<div class="AddContactsBox">
<h3>添加好友</h3>
<div class="AddContactsSerchBox">
<input type="text" placeholder="请输入用户名/好友昵称..." id="serchInput" @focus="delStatus" @keydown.13="enter($event)"/>
<span @click="serchBtn">搜索</span>
<p v-if="status">{{statusMessage}}</p>
</div>
<div class="AddContactsSerchListBox">
<h4>搜索结果 <a href="javascript:;" v-if="false"> <查看推荐好友</a></h4>
<ul>
<li v-for="(list,index) in data.list" :id="list.aid" :ueraid="list.aid" v-if="(list.status != 2) && (list.aid != isselfAid)" :aa="isselfAid">
<div class="imgHd"><img :src="list.avatar"/></div>
<div class="userInfo">
<p>{{list.nickname}} <i :class="list.sex" v-if="false"></i></p>
<span :class="list.status === 0 ? 'addFriends':'addProving'" @click="addFriend(list.status,list.aid,index)"><img src="../images/addFriends.png" v-if="list.status === 0"/>{{list.status === 0 ? '好友':'待验证'}}</span>
</div>
</li>
</ul>
</div>
</div>
公共弹窗代码
<div class="RulePop" id="RulePop">
<div class="pop">
<h3>提示<span class="close" @click="$store.commit('rulestate',{type:'',status:false,data:{}})"></span></h3>
<div class="cont">
<div :class="['contMessage',type]">
<i></i>
<span>{{type === 'del' ? '确定要移除 '+ delInfo.name +' 吗？' : message[type]}}</span>
</div>
<div class="box" v-show="type === 'del'">
<a href="javascript:;" @click="delFriends()">确定</a>
<a href="javascript:;" @click="$store.commit('rulestate',{type:'',status:false,data:{}})">取消</a>
</div>
</div>
</div>
<div class="divMask"></div>
</div>
好友模块相关代码
<div class="Contacts" id="Contacts">
<div class="ContactsBox">
<div class="ChatSerch">
<input type="text" class="ChatSerchInput" placeholder="搜索..."/>
</div>
<div class="ChatList clearfix">
<div class="addContacts">
<div class="title addContactsTitle titleB" :data-num="data[1].ApplyList.length">
好友申请 [{{data[1].ApplyList.length}}]
</div>
<div class="addContactsList overflow" v-if="data[1].ApplyList.length">
<div class="ulwrapper">
<ul>
<li v-for="(list,index) in data[1].ApplyList" @click="mFadd(list.aid,list.id,true)" :useraid="list.aid" :userid="list.id">
<div class="userHd">
<div class="userHdImg"><img :src="list.avatar"/></div>
</div>
<div class="userInfo">
<div class="userInfoA">
<span class="name textHidden">{{list.nickname}}</span>
</div>
<div class="userInfoB">
<span class="oneMessage textHidden">申请加我为好友</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<div class="myFriends">
<div class="title myFriendsTitle titleB" >
我的好友 [{{data[0].onlineNum}}/{{data[0].friendsList.length}}]
</div>
<div class="myFriendsList overflow">
<div class="ulwrapper">
<ul>
<li v-for="(list,index) in data[0].friendsList" :key="index" :useraid="list.aid" :class="['',{'offline':list.is_online == 0}]" @contextmenu="showMenu(index)" :state="list.is_online" @click="mFadd(list.aid,list.id,false)">
<vue-context-menu :contextMenuData="contextMenuData" :transferIndex="transferIndex" @savedata="savedata(list.aid,list.id,false)" @newdata="newdata(list)"></vue-context-menu>
<div class="userHd">
<div class="userHdImg"><img :src="list.avatar"/></div>
<span class="onlineState online_game" v-if="false"></span>
</div>
<div class="userInfo">
<div class="userInfoA">
<span class="name textHidden">{{list.nickname}}</span>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<ContactsView :currentData.sync="currentData" :type.sync="type" :isDefault.sync="isDefault"></ContactsView>
</div>
聊天模块相关代码
<div class="Chat clearfix" id="Chat">
<div class="ChatBox">
<div class="ChatSerch">
<input type="text" class="ChatSerchInput" placeholder="搜索..."/>
</div>
<div class="ChatList clearfix">
<div class="ulwrapper">
<ul>
<li v-for="(list,index) in data.offlinelist" :class="[list.current === 'current' ? 'current':'']" :index="index" :current= "list.current" @click="adclick(list,index)" :useraid="list.aid" :sessionid="list.session_id" :id="list.aid">
<div :class="[list.is_online == 0 ? 'offline':'']">
<div class="userHd">
<div class="userHdImg"><img :src="list.avatar"/></div>
<span class="onlineState online_game" v-if="list.playing_status != 0">
<em><i></i>正在玩{{list.playing_game_info.name}}</em>
</span>
</div>
<div class="userInfo">
<div class="userInfoA">
<span class="name textHidden">{{list.nickname}}</span>
<span class="userMessageNum textHidden" v-if="list.message_count > 0" :num="list.message_count">{{list.message_count > 99 ? '99+': list.message_count}}</span>
</div>
<div class="userInfoB">
<span class="oneMessage textHidden">{{list.last_message}}</span>
<span class="userInfoTime textHidden">{{list.last_send_at}}</span>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
<ChatView :chatData.sync="chatData" :isDefault.sync="isDefault" :sendMsg.sync="sendMsg"></ChatView>
</div>`
