Commit f7bb0081 authored by 罗超's avatar 罗超

截图功能完成,聊天主体功能完成

parent 2eb827b9
...@@ -40,7 +40,10 @@ ...@@ -40,7 +40,10 @@
"axios": "^0.16.1", "axios": "^0.16.1",
"element-ui": "^1.4.4", "element-ui": "^1.4.4",
"js-md5": "^0.6.0", "js-md5": "^0.6.0",
"kscreenshot": "^1.2.0",
"moment": "^2.18.1", "moment": "^2.18.1",
"screenshot-desktop": "^1.7.0",
"v-viewer": "^1.4.0",
"vue": "^2.3.3", "vue": "^2.3.3",
"vue-draggable-resizable": "^2.0.0-rc1", "vue-draggable-resizable": "^2.0.0-rc1",
"vue-electron": "^1.0.6", "vue-electron": "^1.0.6",
......
This diff is collapsed.
import Vue from 'vue'
export default new Vue;
\ No newline at end of file
import md5 from 'js-md5' import md5 from 'js-md5'
import MsgBus from './msgBus'
export default { export default {
install (Vue, options) { install (Vue, options) {
Vue.prototype.MsgBus = MsgBus;
Vue.prototype.isOnline = function() { Vue.prototype.isOnline = function() {
return process.env.NODE_ENV !== 'development'; return process.env.NODE_ENV !== 'development';
}, },
......
<style> <style>
@import url('./assets/css/font.css'); @import url('./assets/css/font.css');
@import url('./assets/css/global.css'); @import url('./assets/css/global.css');
@import url('//at.alicdn.com/t/font_1062339_zmy9rxarggi.css'); @import url('//at.alicdn.com/t/font_1062339_wpmx8pr4mo.css');
</style> </style>
......
...@@ -3,7 +3,7 @@ ...@@ -3,7 +3,7 @@
src:url('../fonts/pingfang.woff2') format('woff'); src:url('../fonts/pingfang.woff2') format('woff');
} }
@font-face{ @font-face{
font-family: '华文细黑'; font-family: 'mic';
src:url('../fonts/msyhl_0.ttf') format('truetype'); src:url('../fonts/msyhl_0.ttf') format('truetype');
} }
@font-face{ @font-face{
...@@ -15,5 +15,5 @@ ...@@ -15,5 +15,5 @@
src:url('../fonts/pingfangR.ttf') format('truetype') src:url('../fonts/pingfangR.ttf') format('truetype')
} }
*{ *{
font-family: '华文细黑' !important; font-family: 'mic' !important;
} }
\ No newline at end of file
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</div> </div>
</div> </div>
<div class="contentarea"> <div class="contentarea">
<msg :user=user></msg> <msg :user=user v-show="chosenState.val==0"></msg>
</div> </div>
</div> </div>
</div> </div>
...@@ -77,6 +77,15 @@ export default { ...@@ -77,6 +77,15 @@ export default {
// scaleFactor; // scaleFactor;
// this.$electron.webFrame.setZoomFactor(zoomFactor); // this.$electron.webFrame.setZoomFactor(zoomFactor);
this.user = this.$electron.remote.getGlobal("LOGINUSER"); this.user = this.$electron.remote.getGlobal("LOGINUSER");
this.$electron.ipcRenderer.send('create-session')
let that=this
this.$electron.ipcRenderer.on('openMsgBox', (event,session) => {
that.changeMenu(0,'消息')
this.MsgBus.$emit("set-current-session",session)
})
this.$electron.ipcRenderer.on('ignore-all-unRead', (event,session) => {
this.MsgBus.$emit("ignore-all-unRead")
})
}, },
methods: { methods: {
changeMenu(i, n) { changeMenu(i, n) {
...@@ -84,6 +93,9 @@ export default { ...@@ -84,6 +93,9 @@ export default {
val: i, val: i,
name: n name: n
}; };
if(i!=0){
this.MsgBus.$emit("dispose-session")
}
}, },
minWin() { minWin() {
this.$electron.remote.getCurrentWindow().minimize(); this.$electron.remote.getCurrentWindow().minimize();
...@@ -99,6 +111,7 @@ export default { ...@@ -99,6 +111,7 @@ export default {
} }
}, },
hideWin() { hideWin() {
this.MsgBus.$emit("dispose-session")
this.$electron.remote.getCurrentWindow().hide(); this.$electron.remote.getCurrentWindow().hide();
} }
} }
......
...@@ -29,7 +29,17 @@ ...@@ -29,7 +29,17 @@
:h="consoleinfo.currenth" :h="consoleinfo.currenth"
:resizable="true" :resizable="true"
:active="true" :active="true"
></VueDraggableResizable> >
<chateditor
type="session"
:scene="scene"
:to="to"
:isRobot="isRobot"
:invalid="teamInvalid || muteInTeam"
:invalidHint="sendInvalidHint"
:advancedTeam="teamInfo && teamInfo.type === 'advanced'"
></chateditor>
</VueDraggableResizable>
</div> </div>
</template> </template>
<script> <script>
...@@ -37,7 +47,8 @@ import util from "../../../utils"; ...@@ -37,7 +47,8 @@ import util from "../../../utils";
import pageUtil from "../../../utils/page"; import pageUtil from "../../../utils/page";
import VueDraggableResizable from "vue-draggable-resizable"; import VueDraggableResizable from "vue-draggable-resizable";
import "vue-draggable-resizable/dist/VueDraggableResizable.css"; import "vue-draggable-resizable/dist/VueDraggableResizable.css";
import chatList from './chatlist' import chatList from "./chatlist";
import chateditor from "./chateditor";
export default { export default {
props: { props: {
id: { id: {
...@@ -47,7 +58,8 @@ export default { ...@@ -47,7 +58,8 @@ export default {
}, },
components: { components: {
VueDraggableResizable, VueDraggableResizable,
chatList chatList,
chateditor
}, },
data() { data() {
return { return {
...@@ -189,36 +201,39 @@ export default { ...@@ -189,36 +201,39 @@ export default {
localStorage.consoleh = h; localStorage.consoleh = h;
this.consoleinfo.currenth = h; this.consoleinfo.currenth = h;
}, },
onClickBack () { onClickBack() {
// location.href = '#/contacts' // location.href = '#/contacts'
window.stopPlayAudio && window.stopPlayAudio() window.stopPlayAudio && window.stopPlayAudio();
window.history.go(-1) window.history.go(-1);
}, },
msgsLoaded () { msgsLoaded() {
pageUtil.scrollChatListDown() pageUtil.scrollChatListDown();
}, },
enterNameCard () { enterNameCard() {
if (/^p2p-/.test(this.sessionId)) { if (/^p2p-/.test(this.sessionId)) {
let account = this.sessionId.replace(/^p2p-/, '') let account = this.sessionId.replace(/^p2p-/, "");
if (account === this.$store.state.userUID) { if (account === this.$store.state.userUID) {
location.href = `#/general` location.href = `#/general`;
return return;
} }
location.href = `#/namecard/${account}` location.href = `#/namecard/${account}`;
} }
}, },
onTeamManageClick() { onTeamManageClick() {
if (this.teamInfo && this.teamInfo.validToCurrentUser) { if (this.teamInfo && this.teamInfo.validToCurrentUser) {
location.href = `#/teammanage/${this.teamInfo.teamId}` location.href = `#/teammanage/${this.teamInfo.teamId}`;
} else { } else {
this.$toast('您已退出该群') this.$toast("您已退出该群");
} }
}, },
onHistoryClick() { onHistoryClick() {
if (this.scene!=='team' || (this.teamInfo && this.teamInfo.validToCurrentUser)) { if (
location.href = `#/chathistory/${this.sessionId}` this.scene !== "team" ||
(this.teamInfo && this.teamInfo.validToCurrentUser)
) {
location.href = `#/chathistory/${this.sessionId}`;
} else { } else {
this.$toast('您已退出该群') this.$toast("您已退出该群");
} }
} }
} }
...@@ -271,7 +286,7 @@ export default { ...@@ -271,7 +286,7 @@ export default {
} }
.msgbox .messagebox .messagecontent .invalidHint { .msgbox .messagebox .messagecontent .invalidHint {
text-align: center; text-align: center;
margin:20px; margin: 20px;
} }
.msgbox .messagebox .messagecontent .invalidHint span { .msgbox .messagebox .messagecontent .invalidHint span {
height: 22px; height: 22px;
......
This diff is collapsed.
<template>
<div class="m-chat-emoji">
<div class="emoji-content">
<div class="cnt">
<span class="emoji-item" :class="{'pinup-item':item.type==='pinup'}" v-for="item in currEmoji.list" @click.stop="selectEmoji(item)">
<img :src="item.img">
</span>
</div>
</div>
<div class="emoji-channel">
<span class="emoji-album" :class="{active: item.name==currAlbum}" v-for="item in emoji" @click.stop="selectAlbum(item)">
<img :src="item.album">
</span><span v-if="type==='session'" class="emoji-album" :class="{active: item.name==currAlbum}" v-for="item in pinup" @click.stop="selectAlbum(item)">
<img :src="item.album">
</span>
</div>
</div>
</template>
<script>
import emojiObj from '../../../configs/emoji'
function genEmojiList (type, emojiList) {
let result = {}
for (let name in emojiList) {
let emojiMap = emojiList[name]
let list = []
for (let key in emojiMap) {
list.push({
type,
name,
key,
img: emojiMap[key].img
})
}
if (list.length > 0) {
result[name] = {
type,
name,
list,
album: list[0].img
}
}
}
return result
}
export default {
props: {
type: String,
scene: String,
to: String
},
data () {
return {
currType: 'emoji',
currAlbum: 'emoji'
}
},
computed: {
emoji () {
return genEmojiList('emoji', emojiObj.emojiList)
},
pinup () {
return genEmojiList('pinup', emojiObj.pinupList)
},
currEmoji () {
if (this.currType === 'emoji') {
return this.emoji[this.currAlbum]
} else if (this.currType === 'pinup') {
return this.pinup[this.currAlbum]
}
return []
}
},
methods: {
selectAlbum (album) {
this.currType = album.type
this.currAlbum = album.name
},
selectEmoji (emoji) {
if (this.currType === 'emoji') {
// 由触发父组件事件,增加表情文案
this.$emit('add-emoji', emoji.key)
} else if (this.currType === 'pinup') {
if (this.type === 'session') {
this.$store.dispatch('sendMsg', {
type: 'custom',
scene: this.scene,
to: this.to,
pushContent: '[贴图表情]',
content: {
type: 3,
data: {
catalog: this.currAlbum,
chartlet: emoji.key
}
}
})
} else if (this.type === 'chatroom') {
this.$store.dispatch('sendChatroomMsg', {
type: 'custom',
pushContent: '[贴图表情]',
content: {
type: 3,
data: {
catalog: this.currAlbum,
chartlet: emoji.key
}
}
})
}
this.$emit('hide-emoji')
}
}
}
}
</script>
<style type="text/css">
.m-chat-emoji {
position: absolute;
top: -203px;
height: 200px;
left: 0;
width: 100%;
border-top: 1px solid #eee;
/* border-bottom: 1px solid #ccc; */
background-color: #fff;
z-index: 2017;
}
.m-chat-emoji .emoji-channel {
position: relative;
width: 100%;
height: auto;
margin: 0 5px;
}
.m-chat-emoji .emoji-channel .emoji-album {
display: inline-block;
width: 30px;
height: 30px;
margin-right: 10px;
margin-top: 5px;
}
.m-chat-emoji .emoji-channel .emoji-album img {
margin: 0;
display: block;
width: 30px;
height: 30px;
}
.m-chat-emoji .emoji-channel .emoji-album img.active {
background-color: #f0f0f0;
}
.emoji-content {
position: relative;
width: 100%;
height: 10rem;
background-color: #f0f0f0;
overflow-y: auto;
}
.emoji-content .cnt {
position: relative;
display: block;
margin: 0.4rem auto;
text-align: left;
}
.emoji-content::-webkit-scrollbar {
width: 4px;
height: 4px;
background-color: #f5f5f5;
}
/*定义滚动条的轨道,内阴影及圆角*/
.emoji-content::-webkit-scrollbar-track {
background-color: #f5f5f5;
}
/*定义滑块,内阴影及圆角*/
.emoji-content::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: transparent;
margin-bottom: 24px;
}
.emoji-content:hover::-webkit-scrollbar-thumb {
border-radius: 20px;
background-color: #aaa;
margin-bottom: 24px;
}
.emoji-item {
display: inline-block;
width: 28px;
height: 28px;
padding: 2px;
vertical-align: middle;
/*border: 1px solid #fff;*/
/*margin-left: -1px;*/
/*margin-bottom: -1px;*/
}
.emoji-item img {
width: inherit;
height: inherit;
}
.pinup-item {
width: 44px;
height: 44px;
}
</style>
<template> <template>
<div class="msgbox"> <div class="msgbox">
<audio id="msgaudio" >
<source src="../../static/audio/msg.mp3" type="audio/mpeg">
</audio>
<audio id="shakeaudio">
<source src="../../static/audio/shake.wav" type="audio/wav">
</audio>
<div class="sessionbox"> <div class="sessionbox">
<div class="search__session__box"> <div class="search__session__box">
<div class="seach_ctr"> <div class="seach_ctr">
...@@ -59,10 +66,10 @@ ...@@ -59,10 +66,10 @@
</div> </div>
<div class="messagebox"> <div class="messagebox">
<div v-if="currentSession.id!=''"> <div v-if="currentSession.id!=''">
<chat :id='currentSession.id'></chat> <chat :id="currentSession.id"></chat>
</div> </div>
<div v-else class="nosession"> <div v-else class="nosession">
<img src="../../assets/img/backgroundlogo.png" /> <img src="../../assets/img/backgroundlogo.png">
</div> </div>
</div> </div>
</div> </div>
...@@ -72,7 +79,7 @@ import util from "../../../utils"; ...@@ -72,7 +79,7 @@ import util from "../../../utils";
import config from "../../../configs"; import config from "../../../configs";
import VueDraggableResizable from "vue-draggable-resizable"; import VueDraggableResizable from "vue-draggable-resizable";
import "vue-draggable-resizable/dist/VueDraggableResizable.css"; import "vue-draggable-resizable/dist/VueDraggableResizable.css";
import chat from './chat' import chat from "./chat";
import { isNumber } from "util"; import { isNumber } from "util";
export default { export default {
props: { props: {
...@@ -90,7 +97,9 @@ export default { ...@@ -90,7 +97,9 @@ export default {
currentSession: { currentSession: {
id: "" id: ""
}, },
noticeObj: {} noticeObj: {},
douTimer: null,
newMsgList: []
}; };
}, },
updated() { updated() {
...@@ -100,11 +109,94 @@ export default { ...@@ -100,11 +109,94 @@ export default {
}, },
methods: { methods: {
enterChat(session) { enterChat(session) {
this.$electron.ipcRenderer.send("clearPrevImgs");
let index=-1
this.newMsgList.forEach((x,i)=>{
if(x.id==session.id){
index=i
}
})
if(index!=-1)
this.newMsgList.splice(index,1)
this.currentSession = session; this.currentSession = session;
},
dou() {
document.querySelector("#shakeaudio").play();
this.$electron.remote.getCurrentWindow().show();
this.$electron.remote.getCurrentWindow().setAlwaysOnTop(true);
this.$electron.remote.getCurrentWindow().setAlwaysOnTop(false);
if (!this.douTimer) {
let position = this.$electron.remote.getCurrentWindow().getPosition();
let x = position[0];
let y = position[1];
let t = 0;
let c = 0;
this.douTimer = setInterval(() => {
if (t == 0)
this.$electron.remote.getCurrentWindow().setPosition(x, y + 2);
if (t == 2)
this.$electron.remote.getCurrentWindow().setPosition(x - 2, y - 2);
if (t == 1)
this.$electron.remote.getCurrentWindow().setPosition(x - 2, y + 2);
if (t == 3) {
this.$electron.remote.getCurrentWindow().setPosition(x + 2, y);
t = 0;
} else {
t++;
}
c++;
if (c == 40) {
this.$electron.remote.getCurrentWindow().setPosition(x, y);
clearInterval(this.douTimer);
this.douTimer = null;
}
}, 25);
}
},
calcUnRead(oldarr, newarr) {
let isplay = false;
if(newarr.length>oldarr.length)
return true
newarr.forEach(x => {
let isExsit = false;
oldarr.forEach(y => {
if (x.id == y.id) {
isExsit = true;
if (x.unread > y.unread) {
isplay = true;
return false;
}
}
});
if (!isExsit) {
isplay = true;
return false;
}
});
return isplay
} }
}, },
mounted() { mounted() {
this.$store.dispatch("connect"); this.$store.dispatch("connect");
let that = this;
this.MsgBus.$on("doudong", function() {
that.dou();
});
this.MsgBus.$on("set-current-session", function(data) {
that.enterChat(data);
});
this.MsgBus.$on("dispose-session", function() {
that.$store.dispatch('resetCurrSession')
that.currentSession={
id: ""
}
});
this.MsgBus.$on("ignore-all-unRead", function() {
that.newMsgList.forEach(x=>{
that.$store.dispatch('setCurrSession', x.id)
that.$store.dispatch('sendMsgReceipt')
})
});
}, },
computed: { computed: {
sysMsgUnread() { sysMsgUnread() {
...@@ -124,6 +216,7 @@ export default { ...@@ -124,6 +216,7 @@ export default {
return `${this.$store.state.userUID}`; return `${this.$store.state.userUID}`;
}, },
sessionlist() { sessionlist() {
let unreadList = [];
let sessionlist = this.$store.state.sessionlist.filter(item => { let sessionlist = this.$store.state.sessionlist.filter(item => {
if (item.to === "684cb79fe92f46877777") return; //过滤推送消息 if (item.to === "684cb79fe92f46877777") return; //过滤推送消息
item.name = ""; item.name = "";
...@@ -183,8 +276,29 @@ export default { ...@@ -183,8 +276,29 @@ export default {
this.noticeObj = item; this.noticeObj = item;
return; return;
} }
if (item.unread > 0) {
if (item.lastMsg.tip && item.lastMsg.tip.indexOf("抖了一下") != -1) {
this.dou();
this.enterChat(item);
}
unreadList.push(item);
}
return item; return item;
}); });
if (!this.$electron.remote.getCurrentWindow().isVisible()) {
if(this.calcUnRead(this.newMsgList,unreadList)){
document.querySelector("#msgaudio").play();
}
this.$electron.ipcRenderer.send("newMessage", this.newMsgList);
} else {
this.$electron.ipcRenderer.send("newMessage", []);
}
if(!this.$electron.remote.getCurrentWindow().isFocused()){
if(this.calcUnRead(this.newMsgList,unreadList)){
this.$electron.remote.getCurrentWindow().flashFrame(true)
}
}
this.newMsgList=unreadList
return sessionlist; return sessionlist;
} }
} }
...@@ -354,15 +468,15 @@ export default { ...@@ -354,15 +468,15 @@ export default {
bottom: 0px; bottom: 0px;
cursor: default; cursor: default;
} }
.msgbox .messagebox .nosession{ .msgbox .messagebox .nosession {
display: flex; display: flex;
position: absolute; position: absolute;
top: 0; top: 0;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
align-items:center; align-items: center;
justify-content:center; justify-content: center;
} }
.msgbox .el-badge__content { .msgbox .el-badge__content {
min-width: 6px; min-width: 6px;
......
<template>
<div class="new-box" @mouseleave="leave">
<div class="title">{{userInfo.emName}}</div>
<ul>
<li v-for="(session, index) in sessionlist" class="clearfix" @click="openMsg(session)">
<img :src="session.avatar" />
<div class="content">
<div class="msgName">{{session.name}}</div>
<div class="unread-msg" v-show="session.unread > 0">{{session.unread}}</div>
<div class="msg-content">{{session.lastMsgShow}}</div>
</div>
</li>
</ul>
<div class="bottom-opera" @click="ignoreAllMsg()">
<span>忽略全部</span>
</div>
</div>
</template>
<script>
export default {
name: 'new-msg-page',
data () {
return {
userInfo: {},
chosenMenuIndex: 0,
sessionlist: new Array(),
chosenImg: ''
}
},
mounted: function () {
this.userInfo = this.$electron.remote.getGlobal('LOGINUSER')
this.sessionlist = this.$electron.remote.getGlobal('NEWMESSAGE')
setInterval(()=>{
this.sessionlist = this.$electron.remote.getGlobal('NEWMESSAGE')
},2000)
},
methods: {
openMsg (session) {
var sessions = new Array()
sessions.push(session)
this.$store.state.openNewMsgSession = sessions
this.$electron.ipcRenderer.send('openNewMessage', session)
},
leave () {
this.$electron.remote.getCurrentWindow().hide()
},
ignoreAllMsg () {
this.$electron.ipcRenderer.send('ignore-all-message')
}
}
}
</script>
<style scoped>
.new-box{
-webkit-app-region: no-drag !important;
width: 260px;
background: #fff;
border-top: 3px solid rgba(71, 121, 255, 1) ;
}
.new-box .title{
font-size: 22px;
color: #333;
padding: 5px 12px;
}
.new-box ul{
display: block;
margin-bottom: 0px;
width: 100%;
padding: 0px;
margin-top: 0px;
}
.new-box ul li{
display: block;
padding: 7px 12px;
list-style: none;
cursor: default;
position: relative;
-webkit-app-region: no-drag !important;
}
.new-box ul li:hover{
background: #D6D6D6;
}
.new-box ul li .unread-msg{
position: absolute;
background: #ef4455;
padding: 0px 4px;
top: 5px;
right: 12px;
border-radius: 17px;
height: 17px;
min-width: 10px;
line-height: 17px;
text-align: center;
color: #fff;
font-size:12px;
font-weight: 300;
}
.new-box ul li img{
width: 32px;
height: 32px;
border-radius:32px;
float: left;
margin-right:14px;
}
.new-box ul li .content{
float: left;
width: 190px;
}
.new-box ul li .content .msgName{
width: 100px;
font-size: 14px;
font-weight: 300;
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
color: #333 !important;
}
.new-box ul li .content .msg-content{
overflow: hidden;
text-overflow:ellipsis;
white-space: nowrap;
color: #bbb;
font-size: 12px;
}
.new-box .bottom-opera{
padding:7px 12px;
border-top: 1px solid #ededed;
}
.new-box .bottom-opera span{
color:#009ADA;
-webkit-app-region: no-drag !important;
cursor: pointer;
font-size: 12px;
}
</style>
<template> <template>
<div class="previewerfile"> <div class="previewerfile">
<div class="header__opera"> <div class="header__opera">
<span class="opera__item close" @click="hideWin"> <span class="opera__item close">
<i class="iconfont iconguanbi"></i> <i class="iconfont iconguanbi" @click="closeWin"></i>
</span> </span>
</div>
<iframe class="iframe" :src="url"></iframe>
</div> </div>
<div class="ze-opera"></div>
<iframe class="iframe" :src="url"></iframe>
</div>
</template> </template>
<script> <script>
export default { export default {
data () { data() {
return { return {
url:'' url: ""
} };
}, },
mounted() { mounted() {
this.url=this.$electron.remote.getGlobal('previwerurl') this.url = this.$electron.remote.getGlobal("PREVIWERURL");
}, console.log(this.url);
} },
methods: {
closeWin() {
this.$electron.remote.getCurrentWindow().close();
}
}
};
</script> </script>
<style scope> <style scope>
.previewerfile{ .previewerfile {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: rgba(0,0,0,.5); background: rgba(0, 0, 0, 0.5);
position: relative; position: relative;
}
.ze-opera{
position: absolute;
top: 60px;
background: #FFF;
left:0;
right: 0px;
height: 30px;
} }
.header__opera { .header__opera {
position: absolute; position: absolute;
top: 0px; top: 2px;
right: -1px; right: 0px;
left: 0;
height: 40px;
text-align: right; text-align: right;
-webkit-app-region: no-drag !important; -webkit-app-region: drag !important;
} }
.header__opera .opera__item { .header__opera .opera__item {
padding: 2px 5px; padding: 5px 6px 6px 6px;
color: #f1f1f1; color: #f1f1f1;
cursor: pointer; cursor: pointer;
display: inline-block; display: inline-block;
background: #eb3b5a;
-webkit-app-region: no-drag !important;
} }
.header__opera .opera__item i { .header__opera .opera__item i {
font-size: 14px; font-size: 36px;
} }
.login-box .login-box__header .header__opera .close:hover { .header__opera .close:hover {
background: #eb3b5a; background: #eb3b5a;
} }
.iframe{ .iframe {
width: 100%; width: 100%;
height: 100%; height: 100%;
box-sizing: border-box;
} }
</style> </style>
<template>
<div class="previewerimg">
<div class="viewer-box">
<viewer :images="images" :options="imageOptions" @inited="inited" @hidden='closeWin' class="viewer" ref="viewer">
<img v-for="src in images" :src="src" :key="src">
</viewer>
</div>
<div class="header__opera">
<span class="opera__item close">
<i class="iconfont iconguanbi" @click="closeWin"></i>
</span>
</div>
</div>
</template>
<script>
export default {
data() {
let that=this
return {
images: [],
imageOptions: {
navbar: false,
title: false,
hidden: function (e) {
that.$electron.remote.getCurrentWindow().close()
}
}
};
},
methods: {
closeWin() {
this.$electron.remote.getCurrentWindow().close();
},
inited(viewer) {
this.$viewer = viewer;
}
},
created() {
this.images = this.$electron.remote.getGlobal("PREVIWERIMGS");
},
mounted() {
this.$viewer.view(this.$electron.remote.getGlobal("PREVIWERIMG"))
this.$viewer.show();
}
};
</script>
<style>
.previewerimg {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
position: relative;
}
.header__opera {
position: absolute;
top: 0px;
right: 0px;
left: 0;
height: 40px;
text-align: right;
-webkit-app-region: drag !important;
z-index: 99999999999999999;
}
.header__opera .opera__item {
padding: 2px 5px;
color: #f1f1f1;
cursor: pointer;
display: inline-block;
background: #eb3b5a;
-webkit-app-region: no-drag !important;
}
.header__opera .opera__item i {
font-size: 36px;
}
.header__opera .close:hover {
background: #eb3b5a;
}
.viewer-box {
position: relative;
width: 100%;
height: 100%;
}
.viewer {
visibility: hidden;
}
</style>
<template>
<div class="previewerimg" :style="{'background':bg}">
<video :src="url" id="videos" autoplay width="400" controls='controls'></video>
<div class="header__opera">
<span class="opera__item close">
<i class="iconfont iconguanbi" @click="closeWin"></i>
</span>
</div>
</div>
</template>
<script>
export default {
data() {
return {
url:'',
bg:'rgba(0, 0, 0, 0)'
};
},
methods: {
closeWin() {
this.$electron.remote.getCurrentWindow().close();
}
},
mounted() {
this.url=this.$electron.remote.getGlobal('PREVIWERVIDEOURL')
setTimeout(() => {
console.log(this.$electron.remote.getCurrentWindow().height)
this.$electron.remote.getCurrentWindow().setSize(420,document.querySelector("#videos").clientHeight+20)
this.bg='rgba(0, 0, 0, 1)'
}, 1000);
}
};
</script>
<style scope>
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px);
}
.previewerimg {
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0);
position: relative;
padding: 10px;
box-sizing: border-box;
}
.header__opera {
position: absolute;
top: 0px;
right: 0px;
left: 0;
height: 40px;
text-align: right;
-webkit-app-region: drag !important;
z-index: 99999999999999999;
}
.header__opera .opera__item {
padding: 2px 5px;
color: #f1f1f1;
cursor: pointer;
display: inline-block;
background: #eb3b5a;
-webkit-app-region: no-drag !important;
}
.header__opera .opera__item i {
font-size: 36px;
}
.header__opera .close:hover {
background: #eb3b5a;
}
</style>
<template>
<div class="scrollerhot">
<img :src="imgPath" v-if="imgPath" draggable="false">
</div>
</template>
<script>
import kscreenshot from "kscreenshot";
export default {
data() {
return {
imgPath: null,
kscreenshotObj: null
};
},
created() {
//
let that = this;
this.imgPath = this.$electron.remote.getGlobal("DEFAULT_SCREENSHOT_PATH");
this.$electron.ipcRenderer.send("screens-session");
this.$electron.ipcRenderer.on("new-hot", event => {
that.imgPath = null;
that.imgPath = that.$electron.remote.getGlobal("DEFAULT_SCREENSHOT_PATH")
that.screenhot()
});
},
mounted() {
let that = this;
document.onkeydown = function(event) {
var e = event || window.event || arguments.callee.caller.arguments[0];
if (e && e.keyCode == 27) {
that.$electron.remote.getCurrentWindow().hide();
}
}
document.onmouseup = function(e) {
if (e.button == 2) {
setTimeout(() => {
let cnt = document.querySelectorAll("#kss").length;
if (cnt == 0) {
that.$electron.remote.getCurrentWindow().hide();
}
}, 100);
}
}
this.screenhot()
},
methods: {
screenhot() {
let that = this;
new kscreenshot({
key: 65,
endCB: function(e) {
that.$electron.ipcRenderer.send("addClipboard", e);
that.$electron.remote.getCurrentWindow().hide();
},
immediately: true,
toolShow: {
complete: true,
quit: false,
back: true,
arrow: true,
drawLine: true,
rect: true,
ellipse: true,
text: true,
color: true
}
}).startScreenShot();
}
}
};
</script>
<style>
.scrollerhot {
width: 100%;
height: 100%;
background: transparent;
}
.scrollerhot img {
width: 100%;
height: 100%;
}
</style>
import Vue from 'vue' import Vue from 'vue'
import axios from 'axios' import axios from 'axios'
import App from './App' import App from './App'
import router from './router' import router from './router'
import store from '../store' import store from '../store'
import ElementUI from 'element-ui' import ElementUI from 'element-ui'
import 'element-ui/lib/theme-default/index.css' import 'element-ui/lib/theme-default/index.css'
import editor from 'vue-html5-editor' import editor from 'vue-html5-editor'
import 'vue-html5-editor/src/style.css' import 'vue-html5-editor/src/style.css'
import MyPlugin from '../plugin/plugin' import MyPlugin from '../plugin/plugin'
import encrypt from '../plugin/encry' import encrypt from '../plugin/encry'
import 'viewerjs/dist/viewer.css'
import Viewer from 'v-viewer'
Vue.use(editor) Vue.use(editor)
Vue.use(MyPlugin) Vue.use(MyPlugin)
Vue.use(ElementUI) Vue.use(ElementUI)
Vue.use(Viewer,{
defaultOptions: {
zIndex: 9999
}
})
if (!process.env.IS_WEB) Vue.use(require('vue-electron')) if (!process.env.IS_WEB) Vue.use(require('vue-electron'))
Vue.http = Vue.prototype.$http = axios Vue.http = Vue.prototype.$http = axios
......
...@@ -13,6 +13,31 @@ export default new Router({ ...@@ -13,6 +13,31 @@ export default new Router({
path: '/home', path: '/home',
name: 'home', name: 'home',
component: require('@/components/index') component: require('@/components/index')
},
{
path: '/previewfile',
name: 'previewfile',
component: require('@/components/tools/previewerfile')
},
{
path: '/previewerimg',
name: 'previewerimg',
component: require('@/components/tools/previewerimg')
},
{
path: '/previewervideo',
name: 'previewervideo',
component: require('@/components/tools/previewervideo')
},
{
path: '/newmsg',
name: 'newmsg',
component: require('@/components/msssage/newMsgPop')
},
{
path: '/scrollerhot',
name: 'scrollerhot',
component: require('@/components/tools/scrollerhot')
} }
] ]
}) })
...@@ -11,7 +11,7 @@ import {updateBlack} from './blacks' ...@@ -11,7 +11,7 @@ import {updateBlack} from './blacks'
import {updateFriend, addFriend, deleteFriend} from './friends' import {updateFriend, addFriend, deleteFriend} from './friends'
import {resetSearchResult, searchUsers, searchTeam} from './search' import {resetSearchResult, searchUsers, searchTeam} from './search'
import {deleteSession, setCurrSession, resetCurrSession} from './session' import {deleteSession, setCurrSession, resetCurrSession} from './session'
import {sendMsg, sendFileMsg, sendMsgReceipt, sendRobotMsg, revocateMsg, updateLocalMsg, getHistoryMsgs, resetNoMoreHistoryMsgs, continueRobotMsg} from './msgs' import {sendMsg, sendTip, sendFileMsg,sendDataUrlMsg, sendMsgReceipt, sendRobotMsg, revocateMsg, updateLocalMsg, getHistoryMsgs, resetNoMoreHistoryMsgs, continueRobotMsg} from './msgs'
import {markSysMsgRead, resetSysMsgs, deleteSysMsgs, markCustomSysMsgRead} from './sysMsgs' import {markSysMsgRead, resetSysMsgs, deleteSysMsgs, markCustomSysMsgRead} from './sysMsgs'
import {sendChatroomMsg, sendChatroomRobotMsg, sendChatroomFileMsg, getChatroomHistoryMsgs} from './chatroomMsgs' import {sendChatroomMsg, sendChatroomRobotMsg, sendChatroomFileMsg, getChatroomHistoryMsgs} from './chatroomMsgs'
import {initChatroomInfos, getChatroomInfo, getChatroomMembers, clearChatroomMembers} from './chatroomInfos' import {initChatroomInfos, getChatroomInfo, getChatroomMembers, clearChatroomMembers} from './chatroomInfos'
...@@ -113,7 +113,9 @@ export default { ...@@ -113,7 +113,9 @@ export default {
resetCurrSession, resetCurrSession,
// 发送消息 // 发送消息
sendMsg, sendMsg,
sendTip,
sendFileMsg, sendFileMsg,
sendDataUrlMsg,
sendRobotMsg, sendRobotMsg,
// 发送消息已读回执 // 发送消息已读回执
sendMsgReceipt, sendMsgReceipt,
......
...@@ -39,6 +39,18 @@ export function onOfflineMsgs (obj) { ...@@ -39,6 +39,18 @@ export function onOfflineMsgs (obj) {
store.commit('updateMsgs', msgs) store.commit('updateMsgs', msgs)
} }
export function sendTip ({state, commit}, obj) {
const nim = store.state.nim
nim.sendTipMsg({
scene: obj.scene,
to: obj.to,
tip: obj.tip,
done: function sendTipMsgDone (error, msg) {
onSendMsgDone(error, msg)
}
})
}
export function onMsg (msg) { export function onMsg (msg) {
msg = formatMsg(msg) msg = formatMsg(msg)
store.commit('putMsg', msg) store.commit('putMsg', msg)
...@@ -174,14 +186,17 @@ export function sendMsg ({state, commit}, obj) { ...@@ -174,14 +186,17 @@ export function sendMsg ({state, commit}, obj) {
// 发送文件消息 // 发送文件消息
export function sendFileMsg ({state, commit}, obj) { export function sendFileMsg ({state, commit}, obj) {
const nim = state.nim const nim = state.nim
let { type } = obj let { type,fileInput } = obj
if (!type) { if (!type) {
type = 'file' type = 'file'
if (/\.(png|jpg|bmp|jpeg|gif)$/i.test(fileInput.value)) { if (/\.(png|jpg|bmp|jpeg|gif)$/i.test(fileInput.value)) {
type = 'image' type = 'image'
} else if (/\.(mov|mp4|ogg|webm)$/i.test(fileInput.value)) { } else if (/\.(mov|mp4|ogg|webm)$/i.test(fileInput.value)) {
type = 'video' type = 'video'
} else if (/\.(wav|mp3|wma)$/i.test(fileInput.value)) {
type = 'music'
} }
} }
store.dispatch('showLoading') store.dispatch('showLoading')
const data = Object.assign({ const data = Object.assign({
...@@ -208,6 +223,59 @@ export function sendFileMsg ({state, commit}, obj) { ...@@ -208,6 +223,59 @@ export function sendFileMsg ({state, commit}, obj) {
nim.sendFile(data) nim.sendFile(data)
} }
export function sendDataUrlMsg ({state, commit}, obj) {
const nim = state.nim
let {scene, to, dataURL, name,size,md5} = obj
let type = 'file'
if (/(png|jpg|bmp|jpeg|gif)$/i.test(name)) {
type = 'image'
} else if (/(mov|mp4|ogg|webm)$/i.test(name)) {
type = 'video'
} else if (/\.(wav|mp3|wma)$/i.test(fileInput.value)) {
type = 'music'
}
let customMsg = {
"msgtype":"custom_file",
"data":{
"pushContent":name,
"Height":"84",
"content":{
"fileType":name.substring(name.lastIndexOf('.')+1,name.length),
"fileUrl":"-1",
"fileName":name,
"fileSize":size,
'md5':md5
},
"recentContent":name,
"Width":"210"
}
}
store.dispatch('showLoading')
nim.sendFile({
scene: scene,
to: to,
type: type,
dataURL: dataURL,
custom: JSON.stringify(customMsg),
uploadprogress: function (data) {
// console.log(data.percentageText)
},
uploaderror: function () {
console && console.log('上传失败')
},
uploaddone: function (error, file) {
// console.log(error);
// console.log(file);
},
beforesend: function (msg) {
// console && console.log('正在发送消息, id=', msg);
},
done: function (error, msg) {
onSendMsgDone(error, msg)
}
})
}
// 发送机器人消息 // 发送机器人消息
export function sendRobotMsg ({state, commit}, obj) { export function sendRobotMsg ({state, commit}, obj) {
const nim = state.nim const nim = state.nim
......
static/icons/logo.png

31.3 KB | W: | H:

static/icons/logo.png

2.38 KB | W: | H:

static/icons/logo.png
static/icons/logo.png
static/icons/logo.png
static/icons/logo.png
  • 2-up
  • Swipe
  • Onion skin
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment