Skip to content

P
pica-admin-IM
提交 c834c252 编写于 作者: guangjun.yang's avatar guangjun.yang
浏览文件
操作

解决bug等

上级 5c4cd9a0
展开全部 隐藏空白字符变更
内嵌 并排
正在显示 包含 192 行增加 和 1363 行删除
src/main.js
浏览文件 @ c834c252
...@@ -13,10 +13,12 @@ import 'element-ui/lib/theme-chalk/index.css'; ...@@ -13,10 +13,12 @@ import 'element-ui/lib/theme-chalk/index.css';
import vViewer from 'v-viewer'; import vViewer from 'v-viewer';
import 'viewerjs/dist/viewer.css'; import 'viewerjs/dist/viewer.css';
import ClipboardJS from 'clipboard'; import ClipboardJS from 'clipboard';
// import '@/utils/directive'; import '@/utils/directive';
Vue.prototype.ClipboardJS = ClipboardJS; Vue.prototype.ClipboardJS = ClipboardJS;
Vue.use(vViewer); Vue.use(vViewer, {
button: false
});
// 可调试 // 可调试
// Vue.config.devtools = true; // Vue.config.devtools = true;
......
src/router/router.js
浏览文件 @ c834c252
...@@ -9,7 +9,6 @@ const searchMessageDetail = r => require.ensure([], () => r(require('../views/IM ...@@ -9,7 +9,6 @@ const searchMessageDetail = r => require.ensure([], () => r(require('../views/IM
// 当前会话 // 当前会话
const currentSessionList = r => require.ensure([], () => r(require('../views/IM/current-session/index.vue')), 'currentMessageIndex') const currentSessionList = r => require.ensure([], () => r(require('../views/IM/current-session/index.vue')), 'currentMessageIndex')
const currentSessionDetail = r => require.ensure([], () => r(require('../views/IM/current-session/detail.vue')), 'currentMessageDetail')
// 我要群发 // 我要群发
const chainMessage = r => require.ensure([], () => r(require('../views/IM/chain-message/index.vue')), 'chainMessage') const chainMessage = r => require.ensure([], () => r(require('../views/IM/chain-message/index.vue')), 'chainMessage')
...@@ -38,9 +37,6 @@ export default [{ ...@@ -38,9 +37,6 @@ export default [{
}, { }, {
path: '/current-session-list', path: '/current-session-list',
component: currentSessionList component: currentSessionList
}, {
path: '/current-session-detail',
component: currentSessionDetail
}, { }, {
path: '/chain-message', path: '/chain-message',
component: chainMessage component: chainMessage
......
src/style/common.scss
浏览文件 @ c834c252
...@@ -260,4 +260,8 @@ html,body{ ...@@ -260,4 +260,8 @@ html,body{
.link-form .el-form-item { .link-form .el-form-item {
margin-bottom: 15px; margin-bottom: 15px;
} }
}
.viewer-button.viewer-close {
display: none;
} }
\ No newline at end of file
src/utils/directive.js
浏览文件 @ c834c252
...@@ -7,7 +7,7 @@ Vue.directive('loadmore', { ...@@ -7,7 +7,7 @@ Vue.directive('loadmore', {
console.log(SELECTWRAP_DOM); console.log(SELECTWRAP_DOM);
let flag = true; let flag = true;
SELECTWRAP_DOM.addEventListener('scroll', function () { SELECTWRAP_DOM.addEventListener('scroll', function () {
console.log(this.scrollHeight, this.scrollTop, this.clientHeight); // console.log(this.scrollHeight, this.scrollTop, this.clientHeight);
const CONDITION = this.scrollTop <= 20; const CONDITION = this.scrollTop <= 20;
if (CONDITION) { if (CONDITION) {
if(flag) { if(flag) {
......
src/views/IM/current-session/index copy.scss 已删除 100644 → 0
浏览文件 @ 5c4cd9a0
.current-session-wrap {
.component-content {
display: flex;
flex-direction: row;
min-height: 600px;
min-width: 1200px;
font-size: 14px;
.left {
width: 270px;
// padding: 0 25px 15px;
border-right: 2px solid #f5f5f5;
.l-header {
display: flex;
flex-direction: row;
height: 52px;
justify-content: space-between;
align-items: center;
padding: 0 25px;
& > span:first-child {
font-size: 16px;
}
& > span:last-child {
color: #0d9078;
cursor: pointer;
}
}
.c-num {
padding: 0 25px;
height: 40px;
line-height: 40px;
background: #fffbe6;
}
.session-list {
width: 100%;
height: 100%;
overflow: scroll;
& > .item {
width: 100%;
display: flex;
height: 72px;
flex-direction: row;
align-items: center;
padding: 0 25px;
cursor: pointer;
.img-wrapper {
// position: relative;
// top: 0;
// left: 0;
width: 40px;
height: 40px;
margin-right: 10px;
img {
width: 100%;
height: 100%;
border-radius: 20px;
}
}
& > .desc {
flex: 1;
.top {
display: flex;
flex-direction: row;
justify-content: space-between;
.name {
}
}
.bottom {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
font-size: 12px;
color: #999999;
.num {
display: inline-block;
min-width: 16px;
padding: 2px 4px;
border-radius: 8px;
text-align: center;
color: #ffffff;
background: #ff4d4f;
}
& > img {
display: block;
width: 15px;
height: 15px;
padding: 2px 0 2px 4px;
}
}
}
&.current {
background: #f8f9fa;
}
}
}
}
.center {
flex: 1;
.c-header {
padding: 0 25px;
height: 56px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
border-bottom: 2px solid #f5f5f5;
& > .c-header-l {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
& > img {
display: inline-block;
width: 24px;
height: 24px;
border-radius: 12px;
margin-right: 8px;
}
& > .name {
margin-right: 25px;
color: #333333;
}
& > .time-tip {
font-size: 12px;
color: #999999;
}
}
.close-btn {
width: 100px;
color: #c7c8c9;
cursor: pointer;
}
}
.msg-content {
// width: 100%;
// height: 650px;
overflow: scroll;
display: flex;
flex-direction: column;
margin: 10px 20px;
.msg-item {
display: flex;
flex-direction: row;
margin: 12px 0;
.msg-item-img {
width: 44px;
height: 44px;
margin-right: 8px;
& > img {
width: 100%;
height: 100%;
border-radius: 22px;
}
}
.msg-item-detail {
display: flex;
flex-direction: column;
text-align: left;
font-size: 13px;
& > :first-child {
color: #999999;
margin-bottom: 8px;
}
.mid-text-wrapper {
display: flex;
flex-direction: row;
align-items: center;
& > img {
width: 18px;
height: 18px;
margin-right: 8px;
cursor: pointer;
}
}
.mid-text {
padding: 12px 24px;
display: inline-block;
max-width: 520px;
border-radius: 8px;
background: #ebf5fc;
text-align: justify;
color: #333333;
&.no-support {
display: flex;
align-items: center;
& > img {
width: 14px;
height: 14px;
margin-right: 3px;
}
}
}
.link {
color: #2f86f6;
}
& > .mid-pdf {
width: 260px;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: left;
padding: 10px 15px;
background: #f0f1f2;
border-radius: 8px;
min-height: 80px;
cursor: pointer;
.midp-left {
display: flex;
flex-direction: column;
justify-content: space-around;
margin-right: 10px;
.name {
font-size: 13px;
color: #333333;
word-break: break-word;
}
.size {
font-size: 12px;
color: #999999;
}
}
.midp-icon {
width: 36px;
height: 44px;
& > img {
width: 36px;
height: 100%;
border-radius: 3px;
}
}
}
& > .mid-img {
width: 170px;
height: 108px;
cursor: pointer;
& > img {
width: 100%;
height: 100%;
border-radius: 8px;
}
}
}
&.cr {
flex-direction: row-reverse;
.msg-item-img {
margin-right: 0;
margin-left: 8px;
}
.msg-item-detail {
text-align: right;
& > .mid-text {
background: #f0f1f2;
}
}
}
}
.split-line {
width: 100%;
display: flex;
flex-direction: row;
align-items: center;
margin: 15px 0;
font-size: 14px;
color: #999999;
&::before {
flex: 1;
content: '';
height: 1px;
margin-right: 18px;
background: #f0f1f2;
}
&::after {
flex: 1;
content: '';
height: 1px;
margin-left: 18px;
background: #f0f1f2;
}
}
.error-mg {
display: inline-block;
max-width: 520px;
// height: 24px;
max-width: 520px;
line-height: 16px;
text-align: left;
border-radius: 20px;
opacity: 0.45;
margin: -2px 0 10px;
padding: 4px 12px;
color: #FFFFFF;
background: #000000;
margin-left: 50px;
&.mr {
margin-left: 0;
margin-right: 50px;
}
}
}
.c-bottom {
position: relative;
top: 0;
left: 0;
display: flex;
flex-direction: row;
margin: 16px 12px 16px 25px;
.cb-icon-wrapper {
position: absolute;
top: 0;
right: 70px;
display: flex;
align-items: center;
height: 44px;
img {
width: 20px;
height: 20px;
margin-right: 16px;
cursor: pointer;
}
}
.send-btn {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
width: 60px;
height: 44px;
background: #f3f6f7;
margin-left: 12px;
border-radius: 8px;
cursor: pointer;
& > img {
width: 24px;
height: 24px;
}
&.active {
background: #0d9078;
}
}
}
}
.right {
width: 240px;
border-left: 2px solid #f5f5f5;
}
background: #fff;
.time {
color: #999999;
}
.small {
font-size: 12px;
}
}
}
\ No newline at end of file
src/views/IM/current-session/index copy.vue 已删除 100644 → 0
浏览文件 @ 5c4cd9a0
此差异已折叠。
src/views/IM/current-session/index.vue
浏览文件 @ c834c252
...@@ -41,7 +41,7 @@ ...@@ -41,7 +41,7 @@
</li> </li>
</ul> </ul>
</article> </article>
<article class="center"> <article class="center" v-loadmore="getOldMSGHistory">
<section class="c-header"> <section class="c-header">
<div class="c-header-l"> <div class="c-header-l">
<img :src="currentSession.avatarImageUrl" alt /> <img :src="currentSession.avatarImageUrl" alt />
...@@ -282,69 +282,69 @@ export default { ...@@ -282,69 +282,69 @@ export default {
}, },
mounted: function() { mounted: function() {
(function(window) { // (function(window) {
var _element = document.querySelector(".scroll-box"), // var _element = document.querySelector(".scroll-box"),
_refreshText = document.querySelector(".refreshText"), // _refreshText = document.querySelector(".refreshText"),
_startPos = 0, // _startPos = 0,
_transitionHeight = 0, // _transitionHeight = 0,
_isMousedown = false, // _isMousedown = false,
_canRefresh = false; // _canRefresh = false;
_element.addEventListener( // _element.addEventListener(
"mousedown", // "mousedown",
function(e) { // function(e) {
var event = e || window.event; // var event = e || window.event;
_isMousedown = true; // _isMousedown = true;
_canRefresh = false; // _canRefresh = false;
console.log("##########", event); // console.log("##########", event);
console.log("初始位置：", event.pageX); // console.log("初始位置：", event.pageX);
_startPos = event.pageX; // _startPos = event.pageX;
_element.style.position = "relative"; // _element.style.position = "relative";
_element.style.transition = "transform 0s"; // _element.style.transition = "transform 0s";
}, // },
false // false
); // );
_element.addEventListener( // _element.addEventListener(
"mousemove", // "mousemove",
function(e) { // function(e) {
if (!_isMousedown) return; // if (!_isMousedown) return;
var event = e || window.event; // var event = e || window.event;
console.log("##########", event); // console.log("##########", event);
console.log("当前位置：", event.pageX); // console.log("当前位置：", event.pageX);
_transitionHeight = event.pageX - _startPos; // _transitionHeight = event.pageX - _startPos;
if (_transitionHeight > 0 && _transitionHeight < 40) { // if (_transitionHeight > 0 && _transitionHeight < 40) {
_canRefresh = true; // _canRefresh = true;
// _refreshText.innerText = "下拉刷新"; // // _refreshText.innerText = "下拉刷新";
_refreshText.innerText = ""; // _refreshText.innerText = "";
_element.style.transform = // _element.style.transform =
"translateY(" + _transitionHeight + "px)"; // "translateY(" + _transitionHeight + "px)";
if (_transitionHeight > 20) { // if (_transitionHeight > 20) {
// _refreshText.innerText = "释放更新"; // // _refreshText.innerText = "释放更新";
_refreshText.innerText = ""; // _refreshText.innerText = "";
} // }
} // }
}, // },
false // false
); // );
_element.addEventListener( // _element.addEventListener(
"mouseup", // "mouseup",
function(e) { // function(e) {
_isMousedown = false; // _isMousedown = false;
_element.style.transition = "transform 0.5s ease 1s"; // _element.style.transition = "transform 0.5s ease 1s";
_element.style.transform = "translateY(0px)"; // _element.style.transform = "translateY(0px)";
// _refreshText.innerText = "更新中"; // // _refreshText.innerText = "更新中";
_refreshText.innerText = ""; // _refreshText.innerText = "";
// if (_canRefresh) { // // if (_canRefresh) {
// _canRefresh = false; // // _canRefresh = false;
_this.getOldMSGHistory(); // // _this.getOldMSGHistory();
// } // // }
}, // },
false // false
); // );
})(window); // })(window);
}, },
methods: { methods: {
......
src/views/IM/current-session/test.html
浏览文件 @ c834c252
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head>
<meta charset="utf-8"> <head>
<title></title> <meta charset="utf-8">
<style type="text/css"> <title></title>
<style type="text/css">
html,body{ html,
height:100%; body {
} height: 100%;
body,ul,li,a,p,div{padding:0px; margin:0px; font-size:14px;} }
#wrap{
overflow: hidden; body,
width:100%; ul,
} li,
#main{ a,
height:2944px; p,
top:0; div {
position: relative; padding: 0px;
} margin: 0px;
.page{ font-size: 14px;
width:100%; }
margin:0;
} #wrap {
#page1{ overflow: hidden;
background:#E4E6CE; width: 100%;
} }
#page2{
background:#6CE26C; #main {
} height: 2944px;
#page3{ top: 0;
background:#BF4938; position: relative;
} }
#page4{
background:#2932E1; .page {
} width: 100%;
</style> margin: 0;
<!-- <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> --> }
</head>
<body> #page1 {
<div id="wrap"> background: #E4E6CE;
<div id="main"> }
<div id="page1" class="page"></div>
<div id="page2" class="page"></div> #page2 {
<div id="page3" class="page"></div> background: #6CE26C;
<div id="page4" class="page"></div> }
</div>
#page3 {
background: #BF4938;
}
#page4 {
background: #2932E1;
}
</style>
<!-- <script src="js/jquery-1.8.3.js" type="text/javascript" charset="utf-8"></script> -->
</head>
<body>
<div id="wrap">
<div id="main">
<div id="page1" class="page"></div>
<div id="page2" class="page"></div>
<div id="page3" class="page"></div>
<div id="page4" class="page"></div>
</div> </div>
<script type="text/javascript"> </div>
var wrap = document.getElementById("wrap"); <script type="text/javascript">
var main = document.getElementById("main"); var wrap = document.getElementById("wrap");
var hei = document.body.clientHeight; var main = document.getElementById("main");
wrap.style.height = hei + "px"; var hei = document.body.clientHeight;
var obj = document.getElementsByTagName("div"); wrap.style.height = hei + "px";
for(var i=0;i<obj.length;i++){ var obj = document.getElementsByTagName("div");
if(obj[i].className == 'page'){ for (var i = 0; i < obj.length; i++) {
obj[i].style.height = hei + "px"; if (obj[i].className == 'page') {
} obj[i].style.height = hei + "px";
} }
//如果不加时间控制，滚动会过度灵敏，一次翻好几屏 }
var startTime = 0, //翻屏起始时间 //如果不加时间控制，滚动会过度灵敏，一次翻好几屏
endTime = 0, var startTime = 0, //翻屏起始时间
now = 0; endTime = 0,
//浏览器兼容 now = 0;
if ((navigator.userAgent.toLowerCase().indexOf("firefox")!=-1)){ //浏览器兼容
document.addEventListener("DOMMouseScroll",scrollFun,false); if ((navigator.userAgent.toLowerCase().indexOf("firefox") != -1)) {
} document.addEventListener("DOMMouseScroll", scrollFun, false);
else if (document.addEventListener) { }
document.addEventListener("mousewheel",scrollFun,false); else if (document.addEventListener) {
} document.addEventListener("mousewheel", scrollFun, false);
else if (document.attachEvent) { }
document.attachEvent("onmousewheel",scrollFun); else if (document.attachEvent) {
} document.attachEvent("onmousewheel", scrollFun);
else{ }
document.onmousewheel = scrollFun; else {
} document.onmousewheel = scrollFun;
}
//滚动事件处理函数 //滚动事件处理函数
function scrollFun(event){ function scrollFun(event) {
startTime = new Date().getTime(); startTime = new Date().getTime();
var delta = event.detail || (-event.wheelDelta); var delta = event.detail || (-event.wheelDelta);
//mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动 //mousewheel事件中的 “event.wheelDelta” 属性值：返回的如果是正值说明滚轮是向上滚动
//DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动 //DOMMouseScroll事件中的 “event.detail” 属性值：返回的如果是负值说明滚轮是向上滚动
if ((endTime - startTime) < -1000){ if ((endTime - startTime) < -1000) {
if(delta>0 && parseInt(main.offsetTop) > -(hei*3)){ if (delta > 0 && parseInt(main.offsetTop) > -(hei * 3)) {
//向下滚动 //向下滚动
now = now - hei; now = now - hei;
toPage(now); toPage(now);
}
if(delta<0 && parseInt(main.offsetTop) < 0){
//向上滚动
now = now + hei;
toPage(now);
}
endTime = new Date().getTime();
} }
else{ if (delta < 0 && parseInt(main.offsetTop) < 0) {
event.preventDefault(); //向上滚动
} now = now + hei;
toPage(now);
}
endTime = new Date().getTime();
}
else {
event.preventDefault();
} }
function toPage(now){ }
// $("#main").animate({top:(now+'px')},1000); //jquery实现动画效果 function toPage(now) {
setTimeout("main.style.top = now + 'px'",1000); //javascript 实现动画效果 // $("#main").animate({top:(now+'px')},1000); //jquery实现动画效果
} setTimeout("main.style.top = now + 'px'", 1000); //javascript 实现动画效果
</script> }
</body> </script>
</body>
</html>
</html>
\ No newline at end of file
Markdown 格式
0% or
您添加了 0 人 到此讨论。请谨慎行事。
先完成此消息的编辑！
想要评论请 注册 或