14 |
15 |
16 |
17 |
18 |
19 |
3 |
7 |
9 |
10 |
11 |
94 |
137 |
138 |
--------------------------------------------------------------------------------
/src/assets/fonts/iconfont.css:
--------------------------------------------------------------------------------
1 |
2 | @font-face {font-family: "iconfont";
3 | src: url('iconfont.eot?t=1495519142886'); /* IE9*/
4 | src: url('iconfont.eot?t=1495519142886#iefix') format('embedded-opentype'), /* IE6-IE8 */
5 | url('iconfont.woff?t=1495519142886') format('woff'), /* chrome, firefox */
6 | url('iconfont.ttf?t=1495519142886') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
7 | url('iconfont.svg?t=1495519142886#iconfont') format('svg'); /* iOS 4.1- */
8 | }
9 |
10 | .iconfont {
11 | font-family:"iconfont" !important;
12 | font-size:16px;
13 | font-style:normal;
14 | -webkit-font-smoothing: antialiased;
15 | -moz-osx-font-smoothing: grayscale;
16 | }
17 |
18 | .icon-search:before { content: "\e607"; }
19 |
20 | .icon-mute:before { content: "\e657"; }
21 |
22 | .icon-collection:before { content: "\e608"; }
23 |
24 | .icon-friend:before { content: "\e603"; }
25 |
26 | .icon-msg:before { content: "\e60a"; }
27 |
28 | .icon-look:before { content: "\e639"; }
29 |
30 |
--------------------------------------------------------------------------------
/src/assets/fonts/iconfont.eot:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TomHusky/vue-wechat-demo/8946fa020321f31839e7a95008615326550e71cf/src/assets/fonts/iconfont.eot
--------------------------------------------------------------------------------
/src/assets/fonts/iconfont.js:
--------------------------------------------------------------------------------
1 | (function(window){var svgSprite="";var script=function(){var scripts=document.getElementsByTagName("script");return scripts[scripts.length-1]}();var shouldInjectCss=script.getAttribute("data-injectcss");var ready=function(fn){if(document.addEventListener){if(~["complete","loaded","interactive"].indexOf(document.readyState)){setTimeout(fn,0)}else{var loadFn=function(){document.removeEventListener("DOMContentLoaded",loadFn,false);fn()};document.addEventListener("DOMContentLoaded",loadFn,false)}}else if(document.attachEvent){IEContentLoaded(window,fn)}function IEContentLoaded(w,fn){var d=w.document,done=false,init=function(){if(!done){done=true;fn()}};var polling=function(){try{d.documentElement.doScroll("left")}catch(e){setTimeout(polling,50);return}init()};polling();d.onreadystatechange=function(){if(d.readyState=="complete"){d.onreadystatechange=null;init()}}}};var before=function(el,target){target.parentNode.insertBefore(el,target)};var prepend=function(el,target){if(target.firstChild){before(el,target.firstChild)}else{target.appendChild(el)}};function appendSvg(){var div,svg;div=document.createElement("div");div.innerHTML=svgSprite;svgSprite=null;svg=div.getElementsByTagName("svg")[0];if(svg){svg.setAttribute("aria-hidden","true");svg.style.position="absolute";svg.style.width=0;svg.style.height=0;svg.style.overflow="hidden";prepend(svg,document.body)}}if(shouldInjectCss&&!window.__iconfont__svg__cssinject__){window.__iconfont__svg__cssinject__=true;try{document.write("")}catch(e){console&&console.log(e)}}ready(appendSvg)})(window)
--------------------------------------------------------------------------------
/src/assets/fonts/iconfont.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 |
59 |
--------------------------------------------------------------------------------
/src/assets/fonts/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TomHusky/vue-wechat-demo/8946fa020321f31839e7a95008615326550e71cf/src/assets/fonts/iconfont.ttf
--------------------------------------------------------------------------------
/src/assets/fonts/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TomHusky/vue-wechat-demo/8946fa020321f31839e7a95008615326550e71cf/src/assets/fonts/iconfont.woff
--------------------------------------------------------------------------------
/src/assets/icons/iconfont.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "iconfont"; /* Project id 2790053 */
3 | src: url('iconfont.woff2?t=1637130830910') format('woff2'),
4 | url('iconfont.woff?t=1637130830910') format('woff'),
5 | url('iconfont.ttf?t=1637130830910') format('truetype');
6 | }
7 |
8 | .iconfont {
9 | font-family: "iconfont" !important;
10 | font-size: 16px;
11 | font-style: normal;
12 | -webkit-font-smoothing: antialiased;
13 | -moz-osx-font-smoothing: grayscale;
14 | }
15 |
16 | .icon-edit:before {
17 | content: "\e514";
18 | }
19 |
20 | .icon-warn:before {
21 | content: "\e513";
22 | }
23 |
24 | .icon-file:before {
25 | content: "\e512";
26 | }
27 |
28 | .icon-img:before {
29 | content: "\e510";
30 | }
31 |
32 | .icon-emoji:before {
33 | content: "\e511";
34 | }
35 |
36 | .icon-add:before {
37 | content: "\e509";
38 | }
39 |
40 | .icon-window-max:before {
41 | content: "\e501";
42 | }
43 |
44 | .icon-window-ding:before {
45 | content: "\e502";
46 | }
47 |
48 | .icon-window-min:before {
49 | content: "\e503";
50 | }
51 |
52 | .icon-close:before {
53 | content: "\e504";
54 | }
55 |
56 | .icon-account:before {
57 | content: "\e505";
58 | }
59 |
60 | .icon-password:before {
61 | content: "\e506";
62 | }
63 |
64 | .icon-san:before {
65 | content: "\e507";
66 | }
67 |
68 | .icon-more:before {
69 | content: "\e508";
70 | }
71 |
72 |
--------------------------------------------------------------------------------
/src/assets/icons/iconfont.js:
--------------------------------------------------------------------------------
1 | !function(c){var t,e,o,i,l,n='',a=(a=document.getElementsByTagName("script"))[a.length-1].getAttribute("data-injectcss"),d=function(c,t){t.parentNode.insertBefore(c,t)};if(a&&!c.__iconfont__svg__cssinject__){c.__iconfont__svg__cssinject__=!0;try{document.write("")}catch(c){console&&console.log(c)}}function h(){l||(l=!0,o())}function s(){try{i.documentElement.doScroll("left")}catch(c){return void setTimeout(s,50)}h()}t=function(){var c,t;(t=document.createElement("div")).innerHTML=n,n=null,(c=t.getElementsByTagName("svg")[0])&&(c.setAttribute("aria-hidden","true"),c.style.position="absolute",c.style.width=0,c.style.height=0,c.style.overflow="hidden",t=c,(c=document.body).firstChild?d(t,c.firstChild):c.appendChild(t))},document.addEventListener?~["complete","loaded","interactive"].indexOf(document.readyState)?setTimeout(t,0):(e=function(){document.removeEventListener("DOMContentLoaded",e,!1),t()},document.addEventListener("DOMContentLoaded",e,!1)):document.attachEvent&&(o=t,i=c.document,l=!1,s(),i.onreadystatechange=function(){"complete"==i.readyState&&(i.onreadystatechange=null,h())})}(window);
--------------------------------------------------------------------------------
/src/assets/icons/iconfont.json:
--------------------------------------------------------------------------------
1 | {
2 | "id": "2790053",
3 | "name": "vuechat",
4 | "font_family": "iconfont",
5 | "css_prefix_text": "icon-",
6 | "description": "",
7 | "glyphs": [
8 | {
9 | "icon_id": "25777244",
10 | "name": "edit",
11 | "font_class": "edit",
12 | "unicode": "e514",
13 | "unicode_decimal": 58644
14 | },
15 | {
16 | "icon_id": "25458489",
17 | "name": "warn",
18 | "font_class": "warn",
19 | "unicode": "e513",
20 | "unicode_decimal": 58643
21 | },
22 | {
23 | "icon_id": "25182025",
24 | "name": "file",
25 | "font_class": "file",
26 | "unicode": "e512",
27 | "unicode_decimal": 58642
28 | },
29 | {
30 | "icon_id": "25080143",
31 | "name": "img",
32 | "font_class": "img",
33 | "unicode": "e510",
34 | "unicode_decimal": 58640
35 | },
36 | {
37 | "icon_id": "25080144",
38 | "name": "emoji",
39 | "font_class": "emoji",
40 | "unicode": "e511",
41 | "unicode_decimal": 58641
42 | },
43 | {
44 | "icon_id": "24909999",
45 | "name": "add",
46 | "font_class": "add",
47 | "unicode": "e509",
48 | "unicode_decimal": 58633
49 | },
50 | {
51 | "icon_id": "24715226",
52 | "name": "max",
53 | "font_class": "window-max",
54 | "unicode": "e501",
55 | "unicode_decimal": 58625
56 | },
57 | {
58 | "icon_id": "24715227",
59 | "name": "ding",
60 | "font_class": "window-ding",
61 | "unicode": "e502",
62 | "unicode_decimal": 58626
63 | },
64 | {
65 | "icon_id": "24715228",
66 | "name": "min",
67 | "font_class": "window-min",
68 | "unicode": "e503",
69 | "unicode_decimal": 58627
70 | },
71 | {
72 | "icon_id": "24710152",
73 | "name": "close",
74 | "font_class": "close",
75 | "unicode": "e504",
76 | "unicode_decimal": 58628
77 | },
78 | {
79 | "icon_id": "24462922",
80 | "name": "account",
81 | "font_class": "account",
82 | "unicode": "e505",
83 | "unicode_decimal": 58629
84 | },
85 | {
86 | "icon_id": "24462928",
87 | "name": "password",
88 | "font_class": "password",
89 | "unicode": "e506",
90 | "unicode_decimal": 58630
91 | },
92 | {
93 | "icon_id": "24106461",
94 | "name": "三",
95 | "font_class": "san",
96 | "unicode": "e507",
97 | "unicode_decimal": 58631
98 | },
99 | {
100 | "icon_id": "24106460",
101 | "name": "more",
102 | "font_class": "more",
103 | "unicode": "e508",
104 | "unicode_decimal": 58632
105 | }
106 | ]
107 | }
108 |
--------------------------------------------------------------------------------
/src/assets/icons/iconfont.ttf:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TomHusky/vue-wechat-demo/8946fa020321f31839e7a95008615326550e71cf/src/assets/icons/iconfont.ttf
--------------------------------------------------------------------------------
/src/assets/icons/iconfont.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TomHusky/vue-wechat-demo/8946fa020321f31839e7a95008615326550e71cf/src/assets/icons/iconfont.woff
--------------------------------------------------------------------------------
/src/assets/icons/iconfont.woff2:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TomHusky/vue-wechat-demo/8946fa020321f31839e7a95008615326550e71cf/src/assets/icons/iconfont.woff2
--------------------------------------------------------------------------------
/src/assets/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TomHusky/vue-wechat-demo/8946fa020321f31839e7a95008615326550e71cf/src/assets/logo.png
--------------------------------------------------------------------------------
/src/components/chatlist/ChatList.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
57 |
58 |
77 |
78 |
79 |
80 |
218 |
219 |
283 |
--------------------------------------------------------------------------------
/src/components/chatlist/FriendChatInfo.vue:
--------------------------------------------------------------------------------
1 |
2 | -
5 |
6 |
-
14 | 15 |33 |
24 |
32 | 34 |53 |35 | {{ 36 | item.info.remark === null || item.info.remark === "" 37 | ? item.info.nickname 38 | : item.info.remark 39 | }} 40 |
41 | 42 | 52 |
54 |
55 |
-
59 |
- 置顶 60 |
- 61 | 标记为未读 62 | 63 |
- 64 | 标记为已读 65 | 66 |
- 67 | 消息免打扰 68 | 69 |
- 70 | 开启新消息提醒 71 | 72 |
- 不显示聊天 73 |
- 删除聊天 74 |
3 |
50 |
51 |
52 |
128 |
129 |
--------------------------------------------------------------------------------
/src/components/friendlist/FriendList.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
49 |
5 |
28 |
29 |
6 |
11 |
7 | 
8 |
9 |
8 | 添加
10 |
12 | ![]()
20 |
27 |
21 | {{ selectedChatFriend.nickname }}
22 |
23 |
24 | {{ selectedChatFriend.remark }}
25 |
26 |
30 |
48 |
31 |
41 | 消息免打扰
32 |
33 |
42 |
47 | 置顶聊天
43 |
44 |
4 |
65 |
66 |
67 |
91 |
92 |
142 |
--------------------------------------------------------------------------------
/src/components/info/FriendInfo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 | -
5 |
-
6 | 7 | {{ newfriend.initial }} 8 |9 |14 |33 |15 |30 | 31 |
22 |
29 | {{ newfriend.remark }}32 |
34 | -
35 | 36 | {{ groupChat.initial }} 37 |38 |43 |46 |
44 |
{{ groupChat.remark }}45 |
47 | -
53 | {{ item.initial }}54 |59 |62 |
60 |
{{ item.remark }}61 |
63 |
4 |
5 |
47 |
48 |
49 |
97 |
98 |
198 |
199 |
--------------------------------------------------------------------------------
/src/components/info/GroupInfo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
6 |
46 |
7 |
27 |
8 |
18 |
9 |
16 | {{ selectedFriend.nickname }}
10 |
15 | {{ selectedFriend.signature }}
17 |
19 | ![]()
25 |
26 |
28 |
42 |
29 | 备 注{{ selectedFriend.remark }}
30 |
31 |
35 | 地 区{{ selectedFriend.area }}
36 |
37 |
38 | 来 源{{ selectedFriend.origin }}
39 |
40 | 微信号{{ selectedFriend.wxid }}
41 |
43 | 发消息
44 |
45 |
4 |
51 |
52 |
53 |
107 |
108 |
178 |
179 |
--------------------------------------------------------------------------------
/src/components/info/Info.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
7 | 全部群聊
6 |
8 |
46 |
9 |
15 |
16 |
45 |
17 |
27 |
18 |
24 |
25 |
24 | 添加
26 |
33 | ![]()
40 |
44 |
41 | {{ item.groupName }}
42 |
43 |
4 |
8 |
9 |
10 |
29 |
30 |
31 |
32 |
--------------------------------------------------------------------------------
/src/components/info/NewFriendInfo.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
54 |
55 |
56 |
92 |
93 |
186 |
187 |
--------------------------------------------------------------------------------
/src/components/info/man.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TomHusky/vue-wechat-demo/8946fa020321f31839e7a95008615326550e71cf/src/components/info/man.png
--------------------------------------------------------------------------------
/src/components/info/woman.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TomHusky/vue-wechat-demo/8946fa020321f31839e7a95008615326550e71cf/src/components/info/woman.png
--------------------------------------------------------------------------------
/src/components/message/MessageChat.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
9 |
6 |
8 | {{ selectedFriend.nickname }}
7 |
10 |
53 | -
11 |
12 |
-
13 | 14 |22 |
21 |
23 |48 | 49 |24 | {{ item.nickname }} 25 |
26 |27 | 已添加 28 | 已拒绝 31 | 38 | 45 |46 |{{ item.info }}
47 |
50 |
51 |
4 |
5 |
19 |
20 |
49 |
50 |
51 |
52 |
192 |
193 |
194 |
--------------------------------------------------------------------------------
/src/components/message/more.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/components/mycard/MyCard.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
33 | ![]()
46 |
47 |
48 |
4 |
5 | ![]()
11 |
12 |
36 |
39 |
40 |
41 |
42 |
77 |
78 |
138 |
--------------------------------------------------------------------------------
/src/components/other/Badge.vue:
--------------------------------------------------------------------------------
1 |
2 |
12 |
21 | {{ getShowNum }}
23 |
24 |
25 |
26 |
83 |
84 |
--------------------------------------------------------------------------------
/src/components/other/Switch.vue:
--------------------------------------------------------------------------------
1 |
2 |
22 |
23 |
24 |
46 |
47 |
--------------------------------------------------------------------------------
/src/components/other/confirm/CusConfirm.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
35 |
14 |
34 |
15 |
16 |
17 | {{ title }}
18 |
19 |
21 |
22 |
31 |
32 |
33 |
3 |
14 | {{ label }}
15 |
16 |
17 |
18 |
53 |
54 |
--------------------------------------------------------------------------------
/src/components/other/input/RoundCheckBox.vue:
--------------------------------------------------------------------------------
1 |
2 |
13 |
14 |
15 |
43 |
44 |
--------------------------------------------------------------------------------
/src/components/other/loading/Loading.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
11 |
12 |
13 |
58 |
59 |
--------------------------------------------------------------------------------
/src/components/other/loading/PopupLoading.vue:
--------------------------------------------------------------------------------
1 |
2 |
8 | Loading...
9 |
10 |
3 |
7 |
8 |
9 |
54 |
55 |
--------------------------------------------------------------------------------
/src/components/other/menu/CMenu.vue:
--------------------------------------------------------------------------------
1 |
2 |
9 |
10 |
11 |
59 |
60 |
--------------------------------------------------------------------------------
/src/components/other/message/Message.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 | Loading...
5 |
6 |
4 |
26 |
27 |
28 |
84 |
85 |
155 |
--------------------------------------------------------------------------------
/src/components/search/SearchList.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
5 |
9 |
18 |
23 |
24 |
25 |
4 |
28 |
29 |
30 |
74 |
75 |
150 |
--------------------------------------------------------------------------------
/src/components/search/delete.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/TomHusky/vue-wechat-demo/8946fa020321f31839e7a95008615326550e71cf/src/components/search/delete.png
--------------------------------------------------------------------------------
/src/config/index.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | useI18n: false,
3 | publicPath: {
4 | // 本地环境发布目录
5 | dev: '/',
6 | // 生产环境发布目录
7 | pro: '/vue-wechat-demo/'
8 | },
9 | }
10 |
--------------------------------------------------------------------------------
/src/libs/directive/index.js:
--------------------------------------------------------------------------------
1 | export default {
2 | drag(el, data, vnode) {
3 | let that = vnode.context
4 | let odiv = el; //获取当前元素
5 | let moveDataelse = {
6 | appOffsetLeft: null,
7 | appOffsetTop: null,
8 | x: null,
9 | y: null
10 | }
11 | odiv.onmousedown = (event) => {
12 | let app = document.getElementById("wechat");
13 | moveDataelse.x = event.pageX;
14 | moveDataelse.y = event.pageY;
15 | moveDataelse.appOffsetLeft = app.offsetLeft;
16 | moveDataelse.appOffsetTop = app.offsetTop;
17 | document.onmousemove = (event) => {
18 | let moveLeft = event.pageX - moveDataelse.x;
19 | let moveTop = event.pageY - moveDataelse.y;
20 | let resultLeft = moveDataelse.appOffsetLeft + moveLeft;
21 | let resultTop = moveDataelse.appOffsetTop + moveTop;
22 | if (resultLeft >= 5 && resultLeft <= that.$store.state.system.windowWidth - app.offsetWidth -5) {
23 | app.style.left = resultLeft + "px";
24 | }
25 | if (resultTop >= 5 && resultTop <= that.$store.state.system.windowHeight - app.offsetHeight -5) {
26 | app.style.top = resultTop + "px";
27 | }
28 | };
29 | document.onmouseup = (event) => {
30 | document.onmousemove = null;
31 | document.onmouseup = null;
32 | moveDataelse.x = null;
33 | moveDataelse.y = null;
34 | moveDataelse.appOffsetLeft = null;
35 | moveDataelse.appOffsetTop = null;
36 | };
37 | }
38 | },
39 | }
40 |
--------------------------------------------------------------------------------
/src/libs/notification.js:
--------------------------------------------------------------------------------
1 | export const sendNotifi = (that, msg,type) => {
2 | if (!document.hidden) {
3 | return;
4 | }
5 | let options = {
6 | body: msg.msgContent,
7 | silent: false,
8 | icon: msg.avatar,
9 | sound:'/static/mp3/newMsg.mp3'
10 | }
11 |
12 | let notification = new Notification(msg.remark, options);
13 | notification.onclick = function () {
14 | // window.open(`页面链接`, '_blank');
15 | //可直接打开通知notification相关联的tab窗口
16 | window.focus();
17 | notify.close();
18 | }
19 | //标题栏闪动
20 | // let defaultTitle = document.title;
21 | // that.timer = setInterval(function () {
22 | // let title = document.title;
23 | // if (document.hidden) {
24 | // if (/你有新消息/.test(title) == false) {
25 | // document.title = '【你有新消息】';
26 | // } else {
27 | // document.title = defaultTitle;
28 | // }
29 | // } else {
30 | // document.title = defaultTitle;
31 | // }
32 | // }, 500);
33 | }
--------------------------------------------------------------------------------
/src/libs/util.js:
--------------------------------------------------------------------------------
1 | export const TOKEN_KEY = 'token'
2 |
3 | export const removeToken = () => {
4 | localStorage.removeItem(TOKEN_KEY);
5 | }
6 |
7 | export const setToken = (token, auto) => {
8 | if (auto) {
9 | localStorage.setItem(TOKEN_KEY, token)
10 | } else {
11 | localStorage.setItem(TOKEN_KEY, token)
12 | }
13 | }
14 |
15 | export const getToken = () => {
16 | const token = localStorage.getItem(TOKEN_KEY)
17 | if (token && token !== 'undefined') {
18 | return token
19 | } else {
20 | return false
21 | }
22 | }
23 |
24 | export const hasChild = (item) => {
25 | return item.children && item.children.length !== 0
26 | }
27 |
28 | /**
29 | * @param {String} url
30 | * @description 从URL中解析参数
31 | */
32 | export const getParams = url => {
33 | let paramObj = {}
34 | if (url.indexOf('?') != -1) {
35 | const keyValueArr = url.split('?')[1].split('&')
36 | keyValueArr.forEach(item => {
37 | const keyValue = item.split('=')
38 | paramObj[keyValue[0]] = keyValue[1]
39 | })
40 | }
41 | return paramObj
42 | }
43 |
44 | /**
45 | * @param {Number} times 回调函数需要执行的次数
46 | * @param {Function} callback 回调函数
47 | */
48 | export const doCustomTimes = (times, callback) => {
49 | let i = -1
50 | while (++i < times) {
51 | callback(i)
52 | }
53 | }
54 |
55 | /**
56 | * @param {Object} file 从上传组件得到的文件对象
57 | * @returns {Promise} resolve参数是解析后的二维数组
58 | * @description 从Csv文件中解析出表格，解析成二维数组
59 | */
60 | export const getArrayFromFile = (file) => {
61 | let nameSplit = file.name.split('.')
62 | let format = nameSplit[nameSplit.length - 1]
63 | return new Promise((resolve, reject) => {
64 | let reader = new FileReader()
65 | reader.readAsText(file) // 以文本格式读取
66 | let arr = []
67 | reader.onload = function (evt) {
68 | let data = evt.target.result // 读到的数据
69 | let pasteData = data.trim()
70 | arr = pasteData.split((/[\n\u0085\u2028\u2029]|\r\n?/g)).map(row => {
71 | return row.split('\t')
72 | }).map(item => {
73 | return item[0].split(',')
74 | })
75 | if (format === 'csv') {
76 | resolve(arr)
77 | } else {
78 | reject(new Error('[Format Error]:你上传的不是Csv文件'))
79 | }
80 | }
81 | })
82 | }
83 |
84 | /**
85 | * @param {Array} array 表格数据二维数组
86 | * @returns {Object} { columns, tableData }
87 | * @description 从二维数组中获取表头和表格数据，将第一行作为表头，用于在iView的表格中展示数据
88 | */
89 | export const getTableDataFromArray = (array) => {
90 | let columns = []
91 | let tableData = []
92 | if (array.length > 1) {
93 | let titles = array.shift()
94 | columns = titles.map(item => {
95 | return {
96 | title: item,
97 | key: item
98 | }
99 | })
100 | tableData = array.map(item => {
101 | let res = {}
102 | item.forEach((col, i) => {
103 | res[titles[i]] = col
104 | })
105 | return res
106 | })
107 | }
108 | return {
109 | columns,
110 | tableData
111 | }
112 | }
113 |
114 |
115 | // scrollTop animation
116 | export const scrollTop = (el, from = 0, to, duration = 500, endCallback) => {
117 | if (!window.requestAnimationFrame) {
118 | window.requestAnimationFrame = (
119 | window.webkitRequestAnimationFrame ||
120 | window.mozRequestAnimationFrame ||
121 | window.msRequestAnimationFrame ||
122 | function (callback) {
123 | return window.setTimeout(callback, 1000 / 60)
124 | }
125 | )
126 | }
127 | const difference = Math.abs(from - to)
128 | const step = Math.ceil(difference / duration * 50)
129 |
130 | const scroll = (start, end, step) => {
131 | if (start === end) {
132 | endCallback && endCallback()
133 | return
134 | }
135 |
136 | let d = (start + step > end) ? end : start + step
137 | if (start > end) {
138 | d = (start - step < end) ? end : start - step
139 | }
140 |
141 | if (el === window) {
142 | window.scrollTo(d, d)
143 | } else {
144 | el.scrollTop = d
145 | }
146 | window.requestAnimationFrame(() => scroll(d, end, step))
147 | }
148 | scroll(from, to, step)
149 | }
150 |
151 | /**
152 | * 验证url
153 | * @param str_url
154 | * @returns {boolean}
155 | */
156 | export const isURL = (url) => {
157 | let strRegex = '((https|http|ftp|rtsp|mms)?://)'
158 | let re = new RegExp(strRegex)
159 | return re.test(url)
160 | }
161 |
162 |
163 | export const startWith = (str, prefix) => {
164 | let reg = new RegExp('^' + prefix)
165 | return reg.test(str)
166 | }
167 |
168 | export const endWith = (str, suffix) => {
169 | let reg = new RegExp(suffix + '$')
170 | return reg.test(str)
171 | }
172 |
173 | /**
174 | * 判断终端以及浏览器
175 | * userAgent string User-Agent信息
176 | */
177 | export const readUserAgent = (ua) => {
178 | let data = {
179 | terminal: '',
180 | browser: '',
181 | terminalType: {}
182 | }
183 | data.terminalType = {
184 | trident: ua.indexOf('Trident') > -1, // IE内核
185 | presto: ua.indexOf('Presto') > -1, // opera内核
186 | webKit: ua.indexOf('AppleWebKit') > -1, // 苹果、谷歌内核
187 | gecko: ua.indexOf('Gecko') > -1 && ua.indexOf('KHTML') == -1, // 火狐内核
188 | mobile: !!ua.match(/AppleWebKit.*Mobile.*/), // 是否为移动终端
189 | ios: !!ua.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/), // ios终端
190 | android: ua.indexOf('Android') > -1 || ua.indexOf('Adr') > -1, // android终端
191 | iPhone: ua.indexOf('iPhone') > -1, // 是否为iPhone或者QQHD浏览器
192 | iPad: ua.indexOf('iPad') > -1, // 是否iPad
193 | webApp: ua.indexOf('Safari') == -1, // 是否web应该程序，没有头部与底部
194 | weixin: ua.indexOf('MicroMessenger') > -1, // 是否微信 （2015-01-22新增）
195 | qq: ua.match(/\sQQ/i) == ' qq' // 是否QQ
196 | }
197 | if (data.terminalType.ios || data.terminalType.iPhone || data.terminalType.iPad) {
198 | data.terminal = '苹果'
199 | } else if (data.terminalType.android) {
200 | data.terminal = '安卓'
201 | } else {
202 | data.terminal = 'PC'
203 | }
204 | if (/msie/i.test(ua) && !/opera/.test(ua)) {
205 | data.browser = 'IE'
206 | } else if (/firefox/i.test(ua)) {
207 | data.browser = 'Firefox'
208 | } else if (/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua)) {
209 | data.browser = 'Chrome'
210 | } else if (/opera/i.test(ua)) {
211 | data.browser = 'Opera'
212 | } else if (/iPad/i.test(ua)) {
213 | data.browser = 'iPad'
214 | } else if (/webkit/i.test(ua) && !(/chrome/i.test(ua) && /webkit/i.test(ua) && /mozilla/i.test(ua))) {
215 | data.browser = 'Safari'
216 | } else {
217 | data.browser = '未知'
218 | }
219 | return data
220 | }
221 |
--------------------------------------------------------------------------------
/src/main.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import App from './App'
3 | import router from './router'
4 | import config from '@/config'
5 | import store from './store/index.js'
6 | import cdire from './libs/directive/index'
7 | import '@/assets/icons/iconfont.css'
8 |
9 | //自定义全局组件
10 | import CusConfirm from '@/components/other/confirm/CusConfirm'
11 | Vue.prototype.$confirm = CusConfirm.install;
12 |
13 |
14 | import Message from '@/components/other/message'
15 | Vue.prototype.$message = Message.install;
16 |
17 | /**
18 | * @description 全局注册应用配置
19 | */
20 | Vue.prototype.$config = config
21 |
22 | Vue.config.productionTip = false
23 |
24 | // 拖拽命令
25 | const directive = {
26 | 'drag': cdire.drag,
27 | }
28 |
29 | Object.keys(directive).forEach(key => {
30 | Vue.directive(key, directive[key])
31 | })
32 |
33 |
34 | new Vue({
35 | el: '#app',
36 | router,
37 | store,
38 | render: h => h(App),
39 | }).$mount('#app')
40 |
--------------------------------------------------------------------------------
/src/page/chat/Chat.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 |
9 |
18 |
23 |
24 |
25 |
26 |
27 |
3 |
16 |
17 |
18 |
70 |
71 |
105 |
--------------------------------------------------------------------------------
/src/page/friend/Friend.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
7 |
8 |
9 |
11 |
12 |
15 |
3 |
19 |
20 |
74 |
75 |
76 |
77 |
147 |
148 |
--------------------------------------------------------------------------------
/src/page/game/Game.vue:
--------------------------------------------------------------------------------
1 |
2 |
4 |
7 |
8 |
10 |
21 |
72 |
73 |
23 |
61 |
24 |
51 |
25 | ![]()
31 |
32 |
33 |
50 |
34 |
41 |
49 | {{ searchUser.nickname }}
35 |
40 |
52 |
60 |
53 | 账 号{{ searchUser.username }}
54 |
55 | 微信号{{ searchUser.wxid }}
56 |
57 | 地 区{{ searchUser.area }}
58 |
59 |
62 |
71 |
63 |
66 | 发送好友申请
64 | 65 |
67 |
70 | 备注名
68 | 69 |
3 |
4 |
5 |
6 |
7 |
8 |
269 |
270 |
--------------------------------------------------------------------------------
/src/page/login/Login.vue:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
27 |
28 |
29 |
117 |
118 |
--------------------------------------------------------------------------------
/src/page/login/account-choice.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/page/login/account.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/page/login/password-choice.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/page/login/password.svg:
--------------------------------------------------------------------------------
1 |
--------------------------------------------------------------------------------
/src/page/wechat/Wechat.vue:
--------------------------------------------------------------------------------
1 |
2 |
5 | ![]()
6 |
7 |
8 |
9 |
10 |
11 |
12 |
13 | 登录
14 |
15 |
26 |
3 |
9 |
12 |
22 |
23 |
24 |
25 |
26 |
122 |
198 |
--------------------------------------------------------------------------------
/src/page/wechat/init.js:
--------------------------------------------------------------------------------
1 | import store from '@/store/index.js'
2 | export function initInfo() {
3 | initFriendList();
4 | initGroupChatList();
5 | }
6 |
7 | export function initSystemInfo() {
8 | initSystemIcon();
9 | }
10 |
11 | function initSystemIcon() {
12 | if (store.state.system.systemFileIcon != null) {
13 | return;
14 | }
15 | // listSystemIcon().then((res) => {
16 | // if (res.code == 0) {
17 | // store.commit("system/setSystemFileIcon", res.data);
18 | // }
19 | // })
20 | }
21 |
22 | function initFriendList() {
23 | // listFriendInfo()
24 | // .then((res) => {
25 | // if (res.code == 0) {
26 | // store.commit("friend/addFriendList", res.data);
27 | // }
28 | // }).catch(err => {
29 | // console.log(err);
30 | // })
31 | }
32 |
33 | function initGroupChatList() {
34 | for (let group of store.state.groupchat.groupChatList) {
35 | let user = store.getters["user/getUser"];
36 | user.groupNickname = user.nickname;
37 | let value = {
38 | groupNo: group.groupNo,
39 | user: user
40 | }
41 | store.commit("groupchat/groupAddUser", value);
42 | }
43 | // listGroupChat()
44 | // .then((res) => {
45 | // if (res.code == 0) {
46 | // store.commit("groupchat/addGroupChatList", res.data);
47 | // }
48 | // })
49 | }
--------------------------------------------------------------------------------
/src/router/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Router from 'vue-router'
3 | import routes from './routers'
4 | import {
5 | getToken
6 | } from '@/libs/util'
7 | import config from '@/config'
8 |
9 | Vue.use(Router)
10 |
11 | let BASE_URL = ''
12 | switch (process.env.NODE_ENV) {
13 | case 'development':
14 | BASE_URL = config.publicPath.dev // 这里是本地的请求url
15 | break
16 | case 'production':
17 | BASE_URL = config.publicPath.pro // 生产环境url
18 | break
19 | }
20 |
21 | const router = new Router({
22 | routes: routes,
23 | // mode: 'history',
24 | linkActiveClass: 'active',
25 | })
26 | // router.push({ path: '/' });
27 |
28 | router.beforeEach((to, from, next) => {
29 | let token = getToken();
30 | if (to.path == "/login") {
31 | if (token) {
32 | next("/");
33 | } else {
34 | next();
35 | }
36 | } else {
37 | if (token) {
38 | if (to.path === '') {
39 | next("/chat");
40 | } else {
41 | next();
42 | }
43 | } else {
44 | next("/login");
45 | }
46 | }
47 | })
48 | export default router
--------------------------------------------------------------------------------
/src/router/routers.js:
--------------------------------------------------------------------------------
1 | export default [{
2 | path: '/login',
3 | name: 'login',
4 | component: () => import('@/page/login/Login.vue')
5 | },
6 | {
7 | path: "/",
8 | component: () => import('@/page/wechat/Wechat.vue'),
9 | redirect: '/chat',
10 | children: [{
11 | path: '/chat',
12 | component: () => import('@/page/chat/Chat.vue')
13 | },
14 | {
15 | path: '/friend',
16 | component: () => import('@/page/friend/Friend.vue')
17 | },
18 | {
19 | path: '/game',
20 | component: () => import('@/page/game/Game.vue')
21 | }
22 | ]
23 | },
24 | ]
--------------------------------------------------------------------------------
/src/store/index.js:
--------------------------------------------------------------------------------
1 | import Vue from 'vue'
2 | import Vuex from 'vuex'
3 | Vue.use(Vuex)
4 |
5 | // https://webpack.js.org/guides/dependency-management/#requirecontext
6 | const modulesFiles = require.context("./modules", true, /\.js$/);
7 |
8 | // you do not need `import app from './modules/app'`
9 | // it will auto require all vuex module from modules file
10 | const modules = modulesFiles.keys().reduce((modules, modulePath) => {
11 | // set './app.js' => 'app'
12 | const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
13 | const value = modulesFiles(modulePath);
14 | modules[moduleName] = value.default;
15 | return modules;
16 | }, {});
17 |
18 | const store = new Vuex.Store({
19 | modules
20 | });
21 | export default store;
22 |
--------------------------------------------------------------------------------
/src/store/modules/friend.js:
--------------------------------------------------------------------------------
1 | const state = {
2 | friendlist: [{
3 | id: -1,
4 | wxid: "wx001", //微信号
5 | initial: 'A', //姓名首字母
6 | username: "99",
7 | avatar: 'static/images/vue.jpg', //头像
8 | signature: "他什么也没有说", //个性签名
9 | nickname: "机器人", //昵称
10 | sex: 0, //性别 1为男，0为女
11 | remark: "偷懒的机器人", //备注
12 | origin: "官方",
13 | area: "广东广州", //地区
14 | },
15 | {
16 | "username": "1486842355",
17 | "wxid": "1486842355n7dg",
18 | "nickname": "面白い男",
19 | "email": "1486842355@qq.com",
20 | "phone": null,
21 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210923160332031-1473597366.jpg",
22 | "sex": 1,
23 | "signature": "",
24 | "remark": "胡裕嵩",
25 | "area": "湖南长沙",
26 | "origin": "扫一扫",
27 | "label": null,
28 | "notDisturb": false,
29 | "initial": "M"
30 | },
31 | {
32 | "username": "1025431504",
33 | "wxid": "1025431504CtZx",
34 | "nickname": "简单丶爱才美",
35 | "email": "1025431504@qq.com",
36 | "phone": null,
37 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210923160401526-1461243363.jpg",
38 | "sex": 1,
39 | "signature": "",
40 | "remark": "简单丶爱才美",
41 | "area": null,
42 | "origin": "账号搜索",
43 | "label": null,
44 | "notDisturb": false,
45 | "initial": "J"
46 | },
47 | {
48 | "username": "1398952749",
49 | "wxid": "1398952749sqK7",
50 | "nickname": "我不听",
51 | "email": "1398952749@qq.com",
52 | "phone": null,
53 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210923160406881-373503134.jpg",
54 | "sex": 1,
55 | "signature": "闪电五连鞭！",
56 | "remark": "我不听",
57 | "area": null,
58 | "origin": "账号搜索",
59 | "label": null,
60 | "notDisturb": false,
61 | "initial": "W"
62 | },
63 | {
64 | "username": "1053692173",
65 | "wxid": "1053692173TTGF",
66 | "nickname": "元逍",
67 | "email": "1053692173@qq.com",
68 | "phone": null,
69 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210923160338342-264344984.jpg",
70 | "sex": 1,
71 | "signature": "",
72 | "remark": "元逍",
73 | "area": null,
74 | "origin": "账号搜索",
75 | "label": null,
76 | "notDisturb": false,
77 | "initial": "Y"
78 | },
79 | {
80 | "username": "591754925",
81 | "wxid": "591754925KsbG",
82 | "nickname": "呆呆獸",
83 | "email": "591754925@qq.com",
84 | "phone": null,
85 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210923160411759-1598871399.jpg",
86 | "sex": 1,
87 | "signature": "",
88 | "remark": "呆呆獸",
89 | "area": null,
90 | "origin": "账号搜索",
91 | "label": null,
92 | "notDisturb": false,
93 | "initial": "D"
94 | },
95 | {
96 | "username": "1653887048",
97 | "wxid": "1653887048KlA7",
98 | "nickname": "清风流水",
99 | "email": "1653887048@qq.com",
100 | "phone": null,
101 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210923160346563-821241686.jpg",
102 | "sex": 1,
103 | "signature": "",
104 | "remark": "清风流水",
105 | "area": null,
106 | "origin": "账号搜索",
107 | "label": null,
108 | "notDisturb": false,
109 | "initial": "Q"
110 | }
111 | ],
112 | // 好友请求列表
113 | newFriendList: [{
114 | applyId: "apply_0101",
115 | username: "1737401145",
116 | wxid: "lwj11111",
117 | nickname: "码云",
118 | avatar: "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210929094050713-2085134549.png",
119 | sex: 1,
120 | info: "我是jack码",
121 | status: 0,
122 | userInfo: {
123 | username: "1737401145",
124 | wxid: "lwj11111",
125 | nickname: "码云",
126 | email: "1737401145@qq.com",
127 | phone: null,
128 | avatar: "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210929094050713-2085134549.png",
129 | sex: 1,
130 | signature: "你犯法了知道吗？",
131 | remark: "jack码",
132 | area: "广东广州",
133 | origin: "qq搜索",
134 | label: "警局",
135 | notDisturb: false,
136 | initial: "F"
137 | }
138 | }, ],
139 | newfriend: {
140 | id: 0,
141 | wxid: "1", //微信号
142 | username: "1",
143 | initial: "新的朋友", //姓名首字母
144 | avatar: "static/images/newfriend.jpg", //头像
145 | signature: "", //个性签名
146 | nickname: "新的朋友", //昵称
147 | sex: 0, //性别 1为男，0为女
148 | remark: "新的朋友", //备注
149 | area: "", //地区
150 | },
151 | groupChat: {
152 | id: 0,
153 | wxid: "2",
154 | username: "2",
155 | initial: "群聊",
156 | avatar: "static/images/group.png",
157 | signature: "",
158 | nickname: "群聊",
159 | sex: 0,
160 | remark: "群聊",
161 | area: "",
162 | },
163 | // 得知当前选择的是哪个好友
164 | selectFriendNo: '1'
165 | }
166 | const mutations = {
167 | // 得知用户当前选择的是哪个好友。
168 | selectFriend(state, value) {
169 | state.selectFriendNo = value
170 | },
171 | addFriend(state, value) {
172 | let friend = state.friendlist.find(friend => friend.username === value.username);
173 | if (friend == null) {
174 | state.friendlist.push(value);
175 | }
176 | },
177 | updateFriend(state, value) {
178 | let tmp = state.friendlist.find((i) => i.username === value.username)
179 | Object.assign(tmp, value);
180 | },
181 | addFriendList(state, value) {
182 | state.friendlist = state.friendlist.filter((x, index) => {
183 | if (x.id == -1 || value.find((y) => x.username === y.username)) {
184 | return x;
185 | }
186 | });
187 | let add = value.filter(x => !state.friendlist.find((y) => x.username === y.username));
188 | for (let i = 0; i < add.length; i++) {
189 | state.friendlist.push(add[i]);
190 | }
191 | },
192 | addNewFriend(state, value) {
193 | let add = value.filter(x => !state.newFriendList.find((y) => x.applyId === y.applyId));
194 | for (let i = 0; i < add.length; i++) {
195 | state.newFriendList.push(add[i]);
196 | }
197 | },
198 | updateNewFriendStatus(state, value) {
199 | let newFriend = state.newFriendList.find(msg => msg.applyId === value.applyId);
200 | newFriend.status = value.status;
201 | }
202 | }
203 | const actions = {
204 | selectFriend: ({
205 | commit
206 | }, value) => commit('selectFriend', value),
207 | addFriendList: ({
208 | commit
209 | }, value) => commit('addFriendList', value),
210 | updateFriend: ({
211 | commit
212 | }, value) => commit('updateFriend', value),
213 | addFriend: ({
214 | commit
215 | }, value) => commit('addFriend', value),
216 | addNewFriend: ({
217 | commit
218 | }, value) => commit('addNewFriend', value),
219 | updateNewFriendStatus: ({
220 | commit
221 | }, value) => commit('updateNewFriendStatus', value),
222 | }
223 | const getters = {
224 | getNewFriendNums(state) {
225 | let nums = 0;
226 | for (let i = 0; i < state.newFriendList.length; i++) {
227 | if (state.newFriendList[i].status == 0) {
228 | nums++;
229 | }
230 | }
231 | return nums;
232 | },
233 | // 筛选出含有搜索值的好友列表
234 | searchedFriendlist(state, params, rootState) {
235 | let friends = state.friendlist.filter(friends => friends.remark.includes(rootState.system.searchText));
236 | return friends
237 | },
238 | // 通过当前选择是哪个好友匹配相应的好友
239 | selectedFriend(state) {
240 | if (state.selectFriendNo === '1') {
241 | return state.newfriend;
242 | }
243 | if (state.selectFriendNo === '2') {
244 | return state.groupChat;
245 | }
246 | let friend = state.friendlist.find(friend => friend.username === state.selectFriendNo);
247 | return friend
248 | },
249 | selectedChatFriend(state, getters, rootState) {
250 | let friend = state.friendlist.find(friend => friend.username === rootState.chat.selectChatId);
251 | return friend
252 | },
253 | selectedFriendByUsername(state) {
254 | return function (username) {
255 | return state.friendlist.find(friend => friend.username === username)
256 | }
257 | },
258 | }
259 |
260 | export default {
261 | namespaced: true,
262 | // namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
263 | // 例： SET_NAME => user/SET_NAME
264 | state,
265 | mutations,
266 | actions,
267 | getters,
268 | }
--------------------------------------------------------------------------------
/src/store/modules/groupchat.js:
--------------------------------------------------------------------------------
1 | const state = {
2 | groupChatList: [{
3 | "ownerId": "1677900582",
4 | "groupName": "五道口职业技术学院校友会",
5 | "groupNo": "A_t431FMe74187",
6 | "notice": null,
7 | "remark": "校友会的叼毛们",
8 | "groupAvatar": "https://img2022.cnblogs.com/blog/1556860/202202/1556860-20220221135450877-25718536.jpg",
9 | "notDisturb": false,
10 | "userDetails": [{
11 | "username": "1677900582",
12 | "wxid": "lwj123213",
13 | "type": 0,
14 | "nickname": "麻花藤",
15 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210923160352097-806662701.jpg",
16 | "sex": 1,
17 | "signature": "开心开不开心",
18 | "area": "广东深圳",
19 | "groupNickname": "马化腾"
20 | },
21 | {
22 | "username": "1737401145",
23 | "wxid": "lwj11111",
24 | "type": 1,
25 | "nickname": "码云",
26 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210929094050713-2085134549.png",
27 | "sex": 1,
28 | "signature": "你犯法了知道吗？",
29 | "area": "广东广州",
30 | "groupNickname": "码云"
31 | },
32 | {
33 | "username": "1486842355",
34 | "wxid": "1486842355n7dg",
35 | "type": 1,
36 | "nickname": "面白い男",
37 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210923160332031-1473597366.jpg",
38 | "sex": 1,
39 | "signature": "",
40 | "area": "湖南长沙",
41 | "groupNickname": "面白い男"
42 | },
43 | {
44 | "username": "1025431504",
45 | "wxid": "1025431504CtZx",
46 | "type": 1,
47 | "nickname": "简单丶爱才美",
48 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210923160401526-1461243363.jpg",
49 | "sex": 1,
50 | "signature": "",
51 | "area": null,
52 | "groupNickname": "简单丶爱才美"
53 | },
54 | {
55 | "username": "1398952749",
56 | "wxid": "1398952749sqK7",
57 | "type": 1,
58 | "nickname": "我不听",
59 | "avatar": "https://img2020.cnblogs.com/blog/1556860/202109/1556860-20210923160406881-373503134.jpg",
60 | "sex": 1,
61 | "signature": "闪电五连鞭！",
62 | "area": null,
63 | "groupNickname": "我不听"
64 | }
65 | ],
66 | }],
67 | searchText: ""
68 | }
69 | const mutations = {
70 | // 搜索值
71 | search(state, value) {
72 | state.searchText = value
73 | },
74 | addGroupChat(state, value) {
75 | let groupChat = state.groupChatList.find(groupChat => groupChat.groupNo === value.groupNo);
76 | if (groupChat == null) {
77 | state.groupChatList.push(value);
78 | }
79 | },
80 | groupAddUser(state, value) {
81 | let groupChat = state.groupChatList.find(groupChat => groupChat.groupNo === value.groupNo);
82 | if (groupChat != null) {
83 | groupChat.userDetails.unshift(value.user);
84 | }
85 | },
86 | deleteGroupChat(state, value) {
87 | let index = -1;
88 | for (let i = 0; i < state.groupChatList.length; i++) {
89 | let x = state.groupChatList[i];
90 | if (x.groupNo === value) {
91 | index = i;
92 | }
93 | }
94 | if (index != -1) {
95 | state.groupChatList.splice(index, 1);
96 | }
97 | },
98 | addGroupChatList(state, value) {
99 | for (let i = 0; i < state.groupChatList.length; i++) {
100 | let x = state.groupChatList[i];
101 | if (!value.find((y) => x.groupNo === y.groupNo)) {
102 | x.deleted = true;
103 | }
104 | }
105 | let add = value.filter(x => !state.groupChatList.find((y) => x.groupNo === y.groupNo));
106 | for (let i = 0; i < add.length; i++) {
107 | state.groupChatList.push(add[i]);
108 | }
109 | }
110 | }
111 | const actions = {
112 | search: ({
113 | commit
114 | }, value) => {
115 | setTimeout(() => {
116 | commit('search', value)
117 | }, 100)
118 | },
119 | addGroupChat: ({
120 | commit
121 | }, value) => commit('addGroupChat', value),
122 | groupAddUser: ({
123 | commit
124 | }, value) => commit('groupAddUser', value),
125 | addGroupChatList: ({
126 | commit
127 | }, value) => commit('addGroupChatList', value),
128 | deleteGroupChat: ({
129 | commit
130 | }, value) => commit('deleteGroupChat', value),
131 | }
132 | const getters = {
133 | // 筛选出含有搜索值的好友列表
134 | searchedGroupChatList(state, params, rootState) {
135 | return state.groupChatList.filter(group => !group.deleted && (group.groupName.includes(state.searchText)));
136 | },
137 | // 根据群编号获取群信息
138 | selectedGroupChat(state, params, rootState) {
139 | return state.groupChatList.find(group => group.groupNo === rootState.chat.selectChatId);
140 | },
141 | selectedGroupChatByNo(state) {
142 | return function (groupNo) {
143 | return state.groupChatList.find(group => !group.deleted && (group.groupNo === groupNo))
144 | }
145 | },
146 | }
147 |
148 | export default {
149 | namespaced: true,
150 | // namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
151 | // 例： SET_NAME => user/SET_NAME
152 | state,
153 | mutations,
154 | actions,
155 | getters,
156 | }
--------------------------------------------------------------------------------
/src/store/modules/user.js:
--------------------------------------------------------------------------------
1 | import {
2 | getAvatar
3 | } from '@/libs/tools'
4 | import {
5 | removeToken,
6 | setToken,
7 | getToken
8 | } from '@/libs/util'
9 | const state = {
10 | token: getToken(),
11 | // 当前登录用户
12 | info: {
13 | signature: "",
14 | sex: 1,
15 | wxid: "",
16 | area: "广州",
17 | nickname: '房东的Tom',
18 | avatar: null,
19 | username: "",
20 | },
21 | }
22 | const mutations = {
23 | saveToken(state, {
24 | token,
25 | auto
26 | }) {
27 | if (token == null) {
28 | removeToken();
29 | } else {
30 | state.token = token
31 | setToken(token, auto)
32 | }
33 | },
34 | setUserInfo(state, info) {
35 | state.info = info;
36 | }
37 | }
38 |
39 | const actions = {
40 | setUserInfo: ({
41 | commit
42 | }, info) => commit('setUserInfo', info),
43 | // 登录
44 | handleLogin({
45 | state,
46 | commit
47 | }, {
48 | username,
49 | nickname,
50 | password,
51 | auto
52 | }) {
53 | username = username.trim();
54 | return new Promise((resolve, reject) => {
55 | let token = "1212121";
56 | commit('saveToken', {
57 | token,
58 | auto
59 | })
60 | state.info.signature = "走别人的路，让别人无路可走";
61 | state.info.sex = 1;
62 | state.info.wxid = "12345";
63 | state.info.area = "奥林帕斯山";
64 | state.info.nickname = nickname;
65 | state.info.avatar = getAvatar(nickname);
66 | state.info.username = username;
67 | resolve(state.info);
68 | })
69 | },
70 | // 退出登录
71 | handleLogout({
72 | commit
73 | }) {
74 | commit('saveToken', {
75 | token: null,
76 | auto: true
77 | })
78 | }
79 | }
80 | const getters = {
81 | getUser(state, mutations, rootState) {
82 | if (state.info.avatar == null || state.info.avatar === '') {
83 | state.info.avatar = getAvatar(state.info.nickname);
84 | }
85 | return state.info;
86 | }
87 | }
88 |
89 |
90 | export default {
91 | namespaced: true,
92 | // namespaced: true 的方式使其成为带命名空间的模块。保证在变量名一样的时候，添加一个父级名拼接。
93 | // 例： SET_NAME => user/SET_NAME
94 | state,
95 | mutations,
96 | actions,
97 | getters,
98 | }
--------------------------------------------------------------------------------
/vue.config.js:
--------------------------------------------------------------------------------
1 | const TerserPlugin = require('terser-webpack-plugin');
2 | const config = require('./src/config')
3 |
4 |
5 | let BASE_URL = ''
6 | switch (process.env.NODE_ENV) {
7 | case 'development':
8 | BASE_URL = config.publicPath.dev //这里是本地的请求url
9 | break
10 | case 'production':
11 | BASE_URL = config.publicPath.pro //生产环境url
12 | break
13 | }
14 |
15 | module.exports = {
16 | publicPath: BASE_URL,
17 | devServer: {
18 | port: 8000, // 端口
19 | },
20 | // 如果你不需要使用eslint，把lintOnSave设为false即可
21 | lintOnSave: false,
22 | css: {
23 | loaderOptions: {
24 | less: {
25 | javascriptEnabled: true
26 | }
27 | }
28 | },
29 | // 打包时不生成.map文件
30 | productionSourceMap: false,
31 | configureWebpack: (config) => {
32 | if (process.env.NODE_ENV === 'production') {
33 | config.optimization.minimizer[0].options.terserOptions.compress.drop_console = true
34 | }
35 | },
36 | }
--------------------------------------------------------------------------------
13 |
21 |