finish detail
This commit is contained in:
parent
bf8438e6bf
commit
0ab66cb815
1
src/svg/file_copy.svg
Normal file
1
src/svg/file_copy.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
|
||||
|
After Width: | Height: | Size: 274 B |
@ -208,7 +208,7 @@ export default {
|
||||
this.$router.replace('/')
|
||||
},
|
||||
|
||||
// 创建唯一失败码
|
||||
// 创建唯一识别码
|
||||
createId() {
|
||||
// 获取时间戳
|
||||
let time = new Date().getTime()
|
||||
|
||||
@ -1,46 +1,60 @@
|
||||
<template>
|
||||
<div class="add">
|
||||
<div class="detail">
|
||||
<md-app md-waterfall md-mode="fixed">
|
||||
<md-app-toolbar class="md-primary toolbar">
|
||||
<div class="md-toolbar-section-start">
|
||||
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
|
||||
<h3 class="md-title" style="flex: 1">Detail</h3>
|
||||
<h3 class="md-title" style="flex: 1">{{content.title}}</h3>
|
||||
</div>
|
||||
<div class="md-toolbar-section-end">
|
||||
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
|
||||
<md-button class="md-icon-button" @click="turnToEdit()"><md-icon>edit</md-icon></md-button>
|
||||
<md-button class="md-icon-button" @click="openDelDialog()"><md-icon>delete</md-icon></md-button>
|
||||
</div>
|
||||
</md-app-toolbar>
|
||||
|
||||
<md-app-content>
|
||||
<md-field :class="title_verify? '':'md-invalid'">
|
||||
<label>Code Title</label>
|
||||
<md-input v-model="title" required></md-input>
|
||||
<span class="md-error">Title can not be none.</span>
|
||||
</md-field>
|
||||
|
||||
<md-field :class="user_name_verify? '':'md-invalid'">
|
||||
<label>Username</label>
|
||||
<md-input v-model="user_name" required></md-input>
|
||||
<span class="md-error">Username can not be none.</span>
|
||||
</md-field>
|
||||
|
||||
<md-field :class="password_verify? '':'md-invalid'">
|
||||
<label>Password</label>
|
||||
<md-input v-model="password" required></md-input>
|
||||
<span class="md-error">Password can not be none.</span>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>Web address</label>
|
||||
<md-input v-model="web_address"></md-input>
|
||||
</md-field>
|
||||
|
||||
<md-field>
|
||||
<label>Node</label>
|
||||
<md-textarea v-model="node"></md-textarea>
|
||||
</md-field>
|
||||
|
||||
<md-button class="md-raised md-primary expand" @click="judgeContent()">Enter</md-button>
|
||||
<md-list class="md-double-line">
|
||||
<md-list-item>
|
||||
<label class="md-caption">Username</label>
|
||||
<div class="msg-box">
|
||||
<p>{{content.user_name}}</p>
|
||||
<md-button class="md-icon-button" v-clipboard:copy="content.user_name" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy"></icon></md-button>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<label class="md-caption">Password</label>
|
||||
<div class="msg-box">
|
||||
<p class="password">{{show_password? content.password : doitPassword}}</p>
|
||||
<md-button class="md-icon-button" @click="show_password = !show_password"><md-icon>remove_red_eye</md-icon></md-button>
|
||||
<md-button class="md-icon-button" v-clipboard:copy="content.password" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl"><icon class="icon" name="file_copy"></icon></md-button>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<label class="md-caption">Web address</label>
|
||||
<div class="msg-box">
|
||||
<p>{{content.web_address? content.web_address : 'Empty'}}</p>
|
||||
<md-button class="md-icon-button" @click="openUrl()"><md-icon>open_in_new</md-icon></md-button>
|
||||
</div>
|
||||
</md-list-item>
|
||||
<md-list-item>
|
||||
<label class="md-caption">Node</label>
|
||||
<div class="msg-box">
|
||||
<p class="node">{{content.node ? content.node : 'Empty'}}</p>
|
||||
</div>
|
||||
</md-list-item>
|
||||
</md-list>
|
||||
<md-dialog-confirm
|
||||
:md-active.sync="show_dialog"
|
||||
md-title="Delete this password?"
|
||||
md-content="This operation cannot be resumed. Are you sure to continue?"
|
||||
md-confirm-text="Continue"
|
||||
md-cancel-text="Cancel"
|
||||
@md-cancel="onCancel"
|
||||
@md-confirm="delCode"
|
||||
/>
|
||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||
<span>{{ snakebar_msg }}</span>
|
||||
</md-snackbar>
|
||||
</md-app-content>
|
||||
</md-app>
|
||||
</div>
|
||||
@ -55,20 +69,24 @@ export default {
|
||||
name: 'Add',
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
user_name: '',
|
||||
password: '',
|
||||
node: '',
|
||||
web_address: '',
|
||||
id_cache: '',
|
||||
open_count_cache:'',
|
||||
title_verify: true,
|
||||
user_name_verify: true,
|
||||
password_verify: true
|
||||
show_snackbar: false,
|
||||
snakebar_msg: '',
|
||||
content: {},
|
||||
show_password: false,
|
||||
show_dialog: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(['row_data', 'row_pwd'])
|
||||
...mapState(['row_data', 'row_pwd']),
|
||||
doitPassword() {
|
||||
if(this.content.password) {
|
||||
let doit = ''
|
||||
for(let i = 0;i < this.content.password.length ; i++) {
|
||||
doit += '*'
|
||||
}
|
||||
return doit
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
...mapActions(['setRowData', 'setRowPwd']),
|
||||
@ -77,129 +95,32 @@ export default {
|
||||
init() {
|
||||
// 刷新vuex
|
||||
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
|
||||
// 判断有无用户密码
|
||||
if (Object.keys(this.row_pwd).length != 0) {
|
||||
// 有密码，已经输入过了
|
||||
let now = new Date().getTime();
|
||||
if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
|
||||
// 上次写入时间距离现在在五分钟之内
|
||||
// 判断是否是更新
|
||||
if (this.$route.params.modify_content) {
|
||||
// 判断是否有参数
|
||||
if (this.$route.params.code_content) {
|
||||
// 判断有无用户密码
|
||||
if (Object.keys(this.row_pwd).length != 0) {
|
||||
// 有密码，已经输入过了
|
||||
let now = new Date().getTime();
|
||||
if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
|
||||
// 上次写入时间距离现在在五分钟之内
|
||||
// 刷新重置数据
|
||||
let content = this.$route.params.modify_content
|
||||
this.title = content.title
|
||||
this.user_name = content.user_name
|
||||
this.password = content.password
|
||||
this.node = content.node
|
||||
this.web_address = content.web_address
|
||||
this.id_cache = content.id
|
||||
this.open_count_cache = content.open_count
|
||||
this.content = this.$route.params.code_content
|
||||
this.addCount()
|
||||
} else {
|
||||
// 密码超时
|
||||
this.turnToHome('密码超时');
|
||||
}
|
||||
return
|
||||
} else {
|
||||
// 密码超时
|
||||
this.turnToHome('密码超时');
|
||||
// 没有密码
|
||||
this.turnToHome('无密码');
|
||||
}
|
||||
} else {
|
||||
// 没有密码
|
||||
this.turnToHome('无密码');
|
||||
// 无参跳转
|
||||
this.turnToHome('无参跳转');
|
||||
}
|
||||
},
|
||||
|
||||
// 对输入框里边的内容进行判断
|
||||
judgeContent() {
|
||||
// 设置flag
|
||||
let can_continue = true
|
||||
// 处理title
|
||||
if(!(this.title = this.title.trim())) {
|
||||
can_continue = false
|
||||
this.title_verify = false
|
||||
}
|
||||
// 处理user_name
|
||||
if(!(this.user_name = this.user_name.trim())) {
|
||||
can_continue = false
|
||||
this.user_name_verify = false
|
||||
}
|
||||
// 处理password
|
||||
if(!(this.password = this.password.trim())) {
|
||||
can_continue = false
|
||||
this.password_verify = false
|
||||
}
|
||||
// 根据flag判断是否提交
|
||||
if(can_continue) this.submit()
|
||||
},
|
||||
|
||||
// 校验通过进行提交
|
||||
submit() {
|
||||
// 覆写拦截器
|
||||
if(this.id_cache) {
|
||||
console.log('覆写拦截器生效')
|
||||
this.reWrite()
|
||||
return
|
||||
}
|
||||
// 正常提交
|
||||
let data_list
|
||||
// 组织内容
|
||||
let code = {
|
||||
id: this.createId(),
|
||||
open_count:0,
|
||||
title:this.title,
|
||||
user_name:this.user_name,
|
||||
password:this.password,
|
||||
node:this.node,
|
||||
web_address: this.web_address
|
||||
}
|
||||
// 解密主密码
|
||||
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
||||
// 判断是不是第一个
|
||||
if(this.row_data) {
|
||||
// 不是第一个需要进行加解密
|
||||
// 解密密码本
|
||||
let data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
// json化
|
||||
data_list = JSON.parse(data_decrypt);
|
||||
data_list.push(code)
|
||||
} else {
|
||||
// 是第一个
|
||||
data_list = [code]
|
||||
}
|
||||
let data_list_aes = encrypt(main_code_decrpt, data_list)
|
||||
this.setRowData([data_list_aes, this])
|
||||
console.log('新加密信息保存成功,返回Home');
|
||||
this.back()
|
||||
},
|
||||
|
||||
reWrite() {
|
||||
let data_list
|
||||
// 组织内容
|
||||
let code = {
|
||||
id: this.id_cache,
|
||||
open_count:this.open_count_cache,
|
||||
title:this.title,
|
||||
user_name:this.user_name,
|
||||
password:this.password,
|
||||
node:this.node,
|
||||
web_address: this.web_address
|
||||
}
|
||||
// 解密主密码
|
||||
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
||||
// 解密密码本
|
||||
let data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
// json化
|
||||
data_list = JSON.parse(data_decrypt);
|
||||
// 遍历所有密码
|
||||
for(let i in data_list) {
|
||||
// 找到该密码
|
||||
if(data_list[i].id == code.id) {
|
||||
// 覆写
|
||||
data_list[i] = code
|
||||
}
|
||||
}
|
||||
let data_list_aes = encrypt(main_code_decrpt, data_list)
|
||||
this.setRowData([data_list_aes, this])
|
||||
console.log('新加密信息覆写成功,返回详情');
|
||||
this.back()
|
||||
},
|
||||
//返回上一页
|
||||
back() {
|
||||
this.$router.go(-1)
|
||||
@ -211,17 +132,84 @@ export default {
|
||||
this.$router.replace('/')
|
||||
},
|
||||
|
||||
// 创建唯一失败码
|
||||
createId() {
|
||||
// 获取时间戳
|
||||
let time = new Date().getTime()
|
||||
// 获取随机数
|
||||
let random = Math.floor(Math.random()*100);
|
||||
// 小于10填0
|
||||
random < 10 ? random = '0' + random.toString() : random = random.toString()
|
||||
// 拼接
|
||||
let id = time.toString() + random
|
||||
return id
|
||||
// 跳转至编辑
|
||||
turnToEdit() {
|
||||
this.$router.push({name: 'Add', params:{modify_content: this.content}})
|
||||
},
|
||||
|
||||
// 复制成功
|
||||
onCopyUrl(e) {
|
||||
this.snakebar_msg = 'Copy successful';
|
||||
this.show_snackbar = true;
|
||||
},
|
||||
|
||||
// 复制失败
|
||||
onErrorUrl(e) {
|
||||
this.snakebar_msg = 'Failed to copy, but failed in some cases. Try to paste';
|
||||
this.show_snackbar = true;
|
||||
},
|
||||
|
||||
// 打开链接
|
||||
openUrl() {
|
||||
if(this.content.web_address) {
|
||||
window.open(this.content.web_address)
|
||||
} else {
|
||||
this.snakebar_msg = 'Web address is empty.';
|
||||
this.show_snackbar = true;
|
||||
}
|
||||
},
|
||||
// 增加点击
|
||||
addCount() {
|
||||
// 解密主密码
|
||||
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
||||
// 解密密码本
|
||||
let data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
// json化
|
||||
let data_list = JSON.parse(data_decrypt);
|
||||
// 遍历所有密码
|
||||
for(let i in data_list) {
|
||||
// 找到该密码
|
||||
if(data_list[i].id == this.content.id) {
|
||||
// 覆写
|
||||
data_list[i].open_count++
|
||||
}
|
||||
}
|
||||
let data_list_aes = encrypt(main_code_decrpt, data_list)
|
||||
this.setRowData([data_list_aes, this])
|
||||
console.log('新加密信息覆写成功,增加点击完成');
|
||||
},
|
||||
|
||||
// 点击取消
|
||||
onCancel() {
|
||||
|
||||
},
|
||||
|
||||
// 打开删除模态框
|
||||
openDelDialog() {
|
||||
this.show_dialog = true
|
||||
},
|
||||
// 删除该密码
|
||||
delCode() {
|
||||
// 解密主密码
|
||||
let main_code_decrpt = decryptMainCode(this.row_pwd.main_code);
|
||||
// 解密密码本
|
||||
let data_decrypt = decrypt(main_code_decrpt, this.row_data);
|
||||
// json化
|
||||
let data_list = JSON.parse(data_decrypt);
|
||||
// 暂存表
|
||||
let data_cache = []
|
||||
// 遍历所有密码
|
||||
for(let i in data_list) {
|
||||
// 找到该密码
|
||||
if(data_list[i].id != this.content.id) {
|
||||
// 覆写
|
||||
data_cache.push(data_list[i])
|
||||
}
|
||||
}
|
||||
let data_list_aes = encrypt(main_code_decrpt, data_cache)
|
||||
this.setRowData([data_list_aes, this])
|
||||
console.log('新加密信息覆写成功,密码删除完成');
|
||||
this.back()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
@ -236,14 +224,43 @@ export default {
|
||||
|
||||
<style scoped lang="scss" type="text/scss">
|
||||
@import '../../style/main';
|
||||
.add {
|
||||
.detail {
|
||||
width: 100%;
|
||||
min-height: 100%;
|
||||
background: #fff;
|
||||
.expand {
|
||||
width: 100%;
|
||||
margin: 0 !important;
|
||||
min-height: 1.2rem !important;
|
||||
.md-list-item-content {
|
||||
position: relative;
|
||||
label {
|
||||
position: absolute;
|
||||
top:.2rem;
|
||||
left: 16px;
|
||||
}
|
||||
.msg-box {
|
||||
margin-top: .5rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
border-bottom: 1px #eee solid;
|
||||
p {
|
||||
word-wrap: break-word;
|
||||
word-break: normal;
|
||||
white-space: normal;
|
||||
width: 80%;
|
||||
margin: .2rem 0;
|
||||
}
|
||||
.icon {
|
||||
height: 24px;
|
||||
width: 24px;
|
||||
color: grey;
|
||||
}
|
||||
.node {
|
||||
width: 100%;
|
||||
}
|
||||
.password {
|
||||
width: 70%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -72,7 +72,7 @@
|
||||
<md-button class="md-primary md-raised" @click="turnToAdd()">Create first code</md-button>
|
||||
</md-empty-state>
|
||||
|
||||
<div class="code-card" v-for="(code, index) in show_list" :key="index">
|
||||
<div class="code-card" v-for="(code, index) in show_list" :key="index" @click="turnToDetail(code)">
|
||||
<p class="md-title">{{ code.title }}</p>
|
||||
<p class="md-caption">{{ code.user_name }}</p>
|
||||
</div>
|
||||
@ -193,7 +193,7 @@ export default {
|
||||
this.show_list = this.show_list.sort((a, b) => a['title'].localeCompare(b['title']));
|
||||
} else {
|
||||
// 按使用频率排序
|
||||
this.show_list = this.show_list.sort((a, b) => a['open_count'] - b['open_count']);
|
||||
this.show_list = this.show_list.sort((a, b) => b['open_count'] - a['open_count']);
|
||||
}
|
||||
},
|
||||
|
||||
@ -233,7 +233,11 @@ export default {
|
||||
}
|
||||
this.$router.push('/add');
|
||||
},
|
||||
|
||||
|
||||
turnToDetail(content) {
|
||||
this.$router.push({name: 'Detail', params:{code_content: content}})
|
||||
},
|
||||
|
||||
// 跳转到某页面
|
||||
turnToPage(url) {
|
||||
this.$router.push(url);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user