hcj
9 months ago
parent
a6f3e31e71
commit
c228536503
Binary file not shown.
|
After Width: | Height: | Size: 26 KiB |
|
After Width: | Height: | Size: 33 KiB |
|
After Width: | Height: | Size: 28 KiB |
@ -0,0 +1,51 @@ |
||||
<template> |
||||
<div class="emptyWrapper"> |
||||
<img :src="imgSrc" alt=""> |
||||
<p> |
||||
<slot></slot> |
||||
</p> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
props: { |
||||
imgSrc: { |
||||
type: String |
||||
} |
||||
}, |
||||
created() { |
||||
console.log(this.imgSrc); |
||||
}, |
||||
data() { |
||||
return { |
||||
|
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.emptyWrapper { |
||||
width: 100%; |
||||
height: 100%; |
||||
height: calc(100vh - 100px); |
||||
text-align: center; |
||||
position: relative; |
||||
|
||||
img { |
||||
position: absolute; |
||||
left: 50%; |
||||
transform: translate(-50%); |
||||
height: 273px; |
||||
top: 20%; |
||||
} |
||||
|
||||
p { |
||||
position: absolute; |
||||
left: 50%; |
||||
transform: translate(-50%); |
||||
top: calc(20% + 193px); |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,29 @@ |
||||
<template> |
||||
<div class="envMessage"> |
||||
<label for="xx">请在电脑浏览器打开 http://bjkeyware.com</label> |
||||
<button style="" click="copyUrl">一键复制</button> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
methods:{ |
||||
copyUrl(){ |
||||
console.log('1'); |
||||
document.execCommand('xxxxx') |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.envMessage{ |
||||
position: fixed; |
||||
z-index: 100; |
||||
width: 200px; |
||||
background-color: aqua; |
||||
left: 50vw; |
||||
transform: translateX(-50%); |
||||
top: 0; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,60 @@ |
||||
<template> |
||||
<el-upload class="upload-demo myupload" :action="action" :headers="headers" :on-preview="handlePreview" |
||||
:on-remove="handleRemove" :before-remove="beforeRemove" :on-success="successUpload" :limit="3" |
||||
:on-exceed="handleExceed" :before-upload="beforeAvatarUpload"> |
||||
<slot></slot> |
||||
</el-upload> |
||||
</template> |
||||
|
||||
<script> |
||||
import { mapGetters } from "vuex"; |
||||
export default { |
||||
data() { |
||||
return { |
||||
action: process.env.VUE_APP_BASE_API + '/upload', |
||||
name: '' |
||||
}; |
||||
}, |
||||
computed: { |
||||
...mapGetters(['token']), |
||||
headers() { |
||||
return { Authorization: "Bearer " + this.token }; |
||||
}, |
||||
}, |
||||
methods: { |
||||
handleRemove(file, fileList) { |
||||
console.log(file, fileList); |
||||
}, |
||||
handlePreview(file) { |
||||
console.log(file); |
||||
}, |
||||
handleExceed(files, fileList) { |
||||
|
||||
}, |
||||
beforeRemove(file, fileList) { |
||||
// return this.$confirm(`确定移除 ${file.name}？`); |
||||
}, |
||||
successUpload(response) { |
||||
console.log(response); |
||||
this.$emit('upload', response, this.name) |
||||
}, |
||||
beforeAvatarUpload(file, fileList) { |
||||
this.name = file.name |
||||
const filetype = file.name.slice(file.name.lastIndexOf('.', file.name.length)) |
||||
console.log(filetype); |
||||
const isType = ['.doc', '.docx'].some(item => { return item == filetype }) |
||||
console.log(isType); |
||||
if (!isType) { |
||||
this.$message.error('只能上传doc、docx格式文件!'); |
||||
return false |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss"> |
||||
.myupload .el-upload-list { |
||||
display: none; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,65 @@ |
||||
<template> |
||||
<div class="mobileWrap"> |
||||
<div class="tipText"> |
||||
<p>关键测试宝pc端</p> |
||||
<p>请使用电脑浏览器访问</p> |
||||
</div> |
||||
<div class="urlCopy"> |
||||
<div>https://www.bjkeyware.com/</div> |
||||
<div class="copyBtn" @click="copyUrl">复制</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import copyText from '../../util/cpoyText'; |
||||
export default { |
||||
methods: { |
||||
copyUrl() { |
||||
const url = 'https://www.bjkeyware.com' |
||||
const result = copyText(url) |
||||
this.$message.success(result) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style lang="scss" scoped> |
||||
.mobileWrap { |
||||
width: 100vw; |
||||
height: 100vh; |
||||
text-align: center; |
||||
overflow: hidden; |
||||
display: flex; |
||||
flex-direction: column; |
||||
align-items: center; |
||||
justify-content: center; |
||||
background: linear-gradient(0deg, #88B6FB, #FFFFFF); |
||||
|
||||
.tipText { |
||||
width: 296px; |
||||
height: 85px; |
||||
font-family: PingFang SC; |
||||
font-weight: 500; |
||||
font-size: 18px; |
||||
color: #1A1A1A; |
||||
line-height: 14px; |
||||
} |
||||
|
||||
.urlCopy { |
||||
width: 75vw; |
||||
line-height: 35px; |
||||
background: #C6D9F7; |
||||
text-align: center; |
||||
border-radius: 4px; |
||||
padding: 0 25px; |
||||
display: flex; |
||||
justify-content: center; |
||||
|
||||
.copyBtn { |
||||
margin-left: 25px; |
||||
color: #227BF4; |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,292 @@ |
||||
<template> |
||||
<div> |
||||
<div v-clickoutside="hideReplyBtn" @click="inputFocus" class="my-reply"> |
||||
<el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar> |
||||
<div class="reply-info" > |
||||
<div |
||||
tabindex="0" |
||||
contenteditable="true" |
||||
id="replyInput" |
||||
spellcheck="false" |
||||
placeholder="输入评论..." |
||||
class="reply-input" |
||||
@focus="showReplyBtn" |
||||
@input="onDivInput($event)" |
||||
> |
||||
</div> |
||||
</div> |
||||
<div class="reply-btn-box" v-show="btnShow"> |
||||
<el-button class="reply-btn" size="medium" @click="sendComment" type="primary">发表评论</el-button> |
||||
</div> |
||||
</div> |
||||
<div v-for="(item,i) in comments" :key="i" class="author-title reply-father"> |
||||
<el-avatar class="header-img" :size="40" :src="item.headImg"></el-avatar> |
||||
<div class="author-info"> |
||||
<span class="author-name">{{item.name}}</span> |
||||
<span class="author-time">{{item.time}}</span> |
||||
</div> |
||||
<div class="icon-btn"> |
||||
<span @click="showReplyInput(i,item.name,item.id)"><i class="iconfont el-icon-s-comment"></i>{{item.commentNum}}</span> |
||||
<i class="iconfont el-icon-caret-top"></i>{{item.like}} |
||||
</div> |
||||
<div class="talk-box"> |
||||
<p> |
||||
<span class="reply">{{item.comment}}</span> |
||||
</p> |
||||
</div> |
||||
<div class="reply-box"> |
||||
<div v-for="(reply,j) in item.reply" :key="j" class="author-title"> |
||||
<el-avatar class="header-img" :size="40" :src="reply.fromHeadImg"></el-avatar> |
||||
<div class="author-info"> |
||||
<span class="author-name">{{reply.from}}</span> |
||||
<span class="author-time">{{reply.time}}</span> |
||||
</div> |
||||
<div class="icon-btn"> |
||||
<span @click="showReplyInput(i,reply.from,reply.id)"><i class="iconfont el-icon-s-comment"></i>{{reply.commentNum}}</span> |
||||
<i class="iconfont el-icon-caret-top"></i>{{reply.like}} |
||||
</div> |
||||
<div class="talk-box"> |
||||
<p> |
||||
<span>回复 {{reply.to}}:</span> |
||||
<span class="reply">{{reply.comment}}</span> |
||||
</p> |
||||
</div> |
||||
<div class="reply-box"> |
||||
|
||||
</div> |
||||
</div> |
||||
</div> |
||||
<div v-show="_inputShow(i)" class="my-reply my-comment-reply"> |
||||
<el-avatar class="header-img" :size="40" :src="myHeader"></el-avatar> |
||||
<div class="reply-info" > |
||||
<div tabindex="0" contenteditable="true" spellcheck="false" placeholder="输入评论..." @input="onDivInput($event)" class="reply-input reply-comment-input"></div> |
||||
</div> |
||||
<div class=" reply-btn-box"> |
||||
<el-button class="reply-btn" size="medium" @click="sendCommentReply(i,j)" type="primary">发表评论</el-button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
const clickoutside = { |
||||
// 初始化指令 |
||||
bind(el, binding, vnode) { |
||||
function documentHandler(e) { |
||||
// 这里判断点击的元素是否是本身，是本身，则返回 |
||||
if (el.contains(e.target)) { |
||||
return false; |
||||
} |
||||
// 判断指令中是否绑定了函数 |
||||
if (binding.expression) { |
||||
// 如果绑定了函数 则调用那个函数，此处binding.value就是handleClose方法 |
||||
binding.value(e); |
||||
} |
||||
} |
||||
// 给当前元素绑定个私有变量，方便在unbind中可以解除事件监听 |
||||
el.vueClickOutside = documentHandler; |
||||
document.addEventListener('click', documentHandler); |
||||
}, |
||||
update() {}, |
||||
unbind(el, binding) { |
||||
// 解除事件监听 |
||||
document.removeEventListener('click', el.vueClickOutside); |
||||
delete el.vueClickOutside; |
||||
}, |
||||
}; |
||||
export default { |
||||
name:'ArticleComment', |
||||
data(){ |
||||
return{ |
||||
btnShow: false, |
||||
index:'0', |
||||
replyComment:'', |
||||
myName:'Lana Del Rey', |
||||
myHeader:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg', |
||||
myId:19870621, |
||||
to:'', |
||||
toId:-1, |
||||
comments:[ |
||||
{ |
||||
name:'Lana Del Rey', |
||||
id:19870621, |
||||
headImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg', |
||||
comment:'我发布一张新专辑Norman Fucking Rockwell,大家快来听啊', |
||||
time:'2019年9月16日 18:43', |
||||
commentNum:2, |
||||
like:15, |
||||
inputShow:false, |
||||
reply:[ |
||||
{ |
||||
from:'Taylor Swift', |
||||
fromId:19891221, |
||||
fromHeadImg:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg', |
||||
to:'Lana Del Rey', |
||||
toId:19870621, |
||||
comment:'我很喜欢你的新专辑！！', |
||||
time:'2019年9月16日 18:43', |
||||
commentNum:1, |
||||
like:15, |
||||
inputShow:false |
||||
}, |
||||
{ |
||||
from:'Ariana Grande', |
||||
fromId:1123, |
||||
fromHeadImg:'https://ae01.alicdn.com/kf/Hf6c0b4a7428b4edf866a9fbab75568e6U.jpg', |
||||
to:'Lana Del Rey', |
||||
toId:19870621, |
||||
comment:'别忘记宣传我们的合作单曲啊', |
||||
time:'2019年9月16日 18:43', |
||||
commentNum:0, |
||||
like:5, |
||||
inputShow:false |
||||
|
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
name:'Taylor Swift', |
||||
id:19891221, |
||||
headImg:'https://ae01.alicdn.com/kf/H94c78935ffa64e7e977544d19ecebf06L.jpg', |
||||
comment:'我发行了我的新专辑Lover', |
||||
time:'2019年9月16日 18:43', |
||||
commentNum:1, |
||||
like:5, |
||||
inputShow:false, |
||||
reply:[ |
||||
{ |
||||
from:'Lana Del Rey', |
||||
fromId:19870621, |
||||
fromHeadImg:'https://ae01.alicdn.com/kf/Hd60a3f7c06fd47ae85624badd32ce54dv.jpg', |
||||
to:'Taylor Swift', |
||||
toId:19891221, |
||||
comment:'新专辑和speak now 一样棒！', |
||||
time:'2019年9月16日 18:43', |
||||
commentNum:25, |
||||
like:5, |
||||
inputShow:false |
||||
|
||||
} |
||||
] |
||||
}, |
||||
{ |
||||
name:'Norman Fucking Rockwell', |
||||
id:20190830, |
||||
headImg:'https://ae01.alicdn.com/kf/Hdd856ae4c81545d2b51fa0c209f7aa28Z.jpg', |
||||
comment:'Plz buy Norman Fucking Rockwell on everywhere', |
||||
time:'2019年9月16日 18:43', |
||||
commentNum:0, |
||||
like:5, |
||||
inputShow:false, |
||||
reply:[] |
||||
}, |
||||
] |
||||
} |
||||
}, |
||||
directives: {clickoutside}, |
||||
methods: { |
||||
inputFocus(){ |
||||
var replyInput = document.getElementById('replyInput'); |
||||
replyInput.style.padding= "8px 8px" |
||||
replyInput.style.border ="2px solid blue" |
||||
replyInput.focus() |
||||
}, |
||||
showReplyBtn(){ |
||||
this.btnShow = true |
||||
}, |
||||
hideReplyBtn(){ |
||||
this.btnShow = false |
||||
replyInput.style.padding= "10px" |
||||
replyInput.style.border ="none" |
||||
}, |
||||
showReplyInput(i,name,id){ |
||||
this.comments[this.index].inputShow = false |
||||
this.index =i |
||||
this.comments[i].inputShow = true |
||||
this.to = name |
||||
this.toId = id |
||||
}, |
||||
_inputShow(i){ |
||||
return this.comments[i].inputShow |
||||
}, |
||||
sendComment(){ |
||||
if(!this.replyComment){ |
||||
this.$message({ |
||||
showClose: true, |
||||
type:'warning', |
||||
message:'评论不能为空' |
||||
}) |
||||
}else{ |
||||
let a ={} |
||||
let input = document.getElementById('replyInput') |
||||
let timeNow = new Date().getTime(); |
||||
let time= this.dateStr(timeNow); |
||||
a.name= this.myName |
||||
a.comment =this.replyComment |
||||
a.headImg = this.myHeader |
||||
a.time = time |
||||
a.commentNum = 0 |
||||
a.like = 0 |
||||
this.comments.push(a) |
||||
this.replyComment = '' |
||||
input.innerHTML = ''; |
||||
|
||||
} |
||||
}, |
||||
sendCommentReply(i,j){ |
||||
if(!this.replyComment){ |
||||
this.$message({ |
||||
showClose: true, |
||||
type:'warning', |
||||
message:'评论不能为空' |
||||
}) |
||||
}else{ |
||||
let a ={} |
||||
let timeNow = new Date().getTime(); |
||||
let time= this.dateStr(timeNow); |
||||
a.from= this.myName |
||||
a.to = this.to |
||||
a.fromHeadImg = this.myHeader |
||||
a.comment =this.replyComment |
||||
a.time = time |
||||
a.commentNum = 0 |
||||
a.like = 0 |
||||
this.comments[i].reply.push(a) |
||||
this.replyComment = '' |
||||
document.getElementsByClassName("reply-comment-input")[i].innerHTML = "" |
||||
} |
||||
}, |
||||
onDivInput: function(e) { |
||||
this.replyComment = e.target.innerHTML; |
||||
}, |
||||
dateStr(date){ |
||||
//获取js 时间戳 |
||||
var time=new Date().getTime(); |
||||
//去掉 js 时间戳后三位，与php 时间戳保持一致 |
||||
time=parseInt((time-date)/1000); |
||||
//存储转换值 |
||||
var s; |
||||
if(time<60*10){//十分钟内 |
||||
return '刚刚'; |
||||
}else if((time<60*60)&&(time>=60*10)){ |
||||
//超过十分钟少于1小时 |
||||
s = Math.floor(time/60); |
||||
return s+"分钟前"; |
||||
}else if((time<60*60*24)&&(time>=60*60)){ |
||||
//超过1小时少于24小时 |
||||
s = Math.floor(time/60/60); |
||||
return s+"小时前"; |
||||
}else if((time<60*60*24*30)&&(time>=60*60*24)){ |
||||
//超过1天少于30天内 |
||||
s = Math.floor(time/60/60/24); |
||||
return s+"天前"; |
||||
}else{ |
||||
//超过30天ddd |
||||
var date= new Date(parseInt(date)); |
||||
return date.getFullYear()+"/"+(date.getMonth()+1)+"/"+date.getDate(); |
||||
} |
||||
} |
||||
}, |
||||
} |
||||
</script> |
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1 @@ |
||||
@import './variable.scss' |
||||
@ -0,0 +1 @@ |
||||
$bg-color: #0066eb |
||||
@ -0,0 +1,39 @@ |
||||
function copyText(text) { |
||||
const textString = text.toString() // 数字没有 .length 不能执行selectText 需要转化成字符串
|
||||
let input = document.querySelector('#copy-input') |
||||
if (!input) { |
||||
input = document.createElement('input') |
||||
input.id = 'copy-input' |
||||
input.readOnly = 'readOnly' // 防止ios聚焦触发键盘事件
|
||||
input.style.position = 'absolute' |
||||
input.style.left = '-2000px' |
||||
input.style.zIndex = '-2000' |
||||
document.body.appendChild(input) |
||||
} |
||||
|
||||
input.value = textString |
||||
// ios必须先选中文字且不支持 input.select();
|
||||
selectText(input, 0, textString.length) |
||||
if (document.execCommand('copy')) { |
||||
document.execCommand('copy') |
||||
return '复制成功！' |
||||
} else { |
||||
return '复制失败！' |
||||
} |
||||
} |
||||
|
||||
function selectText(textbox, startIndex, stopIndex) { |
||||
if (textbox.createTextRange) { |
||||
// ie
|
||||
const range = textbox.createTextRange() |
||||
range.collapse(true) |
||||
range.moveStart('character', startIndex) // 起始光标
|
||||
range.moveEnd('character', stopIndex - startIndex) // 结束光标
|
||||
range.select() // 不兼容苹果
|
||||
} else { |
||||
// firefox/chrome
|
||||
textbox.setSelectionRange(startIndex, stopIndex) |
||||
textbox.focus() |
||||
} |
||||
} |
||||
export default copyText |
||||
@ -0,0 +1,12 @@ |
||||
function runEnv() { |
||||
const info = navigator.userAgent.toLowerCase(); |
||||
var isPhone = /mobile/i.test(info); |
||||
if (isPhone) { |
||||
return true |
||||
} |
||||
return false |
||||
} |
||||
|
||||
|
||||
|
||||
export default runEnv |
||||
Loading…
Reference in new issue