finish add
This commit is contained in:
parent
c2e5a50553
commit
e2539cd300
@ -1,188 +1,246 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="home" ref="home">
|
<div class="add">
|
||||||
<md-app md-waterfall md-mode="fixed">
|
<md-app md-waterfall md-mode="fixed">
|
||||||
<md-app-toolbar class="md-primary">
|
<md-app-toolbar class="md-primary toolbar">
|
||||||
<div class="md-toolbar-section-start">
|
<div class="md-toolbar-section-start">
|
||||||
<md-button class="md-icon-button" @click="menuVisible = !menuVisible">
|
<md-button class="md-icon-button" @click="back()"><md-icon>arrow_back</md-icon></md-button>
|
||||||
<md-icon>menu</md-icon>
|
<h3 class="md-title" style="flex: 1">{{id_cache?'Edit':'Add New Code'}}</h3>
|
||||||
</md-button>
|
</div>
|
||||||
<span class="md-title">Codebook</span>
|
</md-app-toolbar>
|
||||||
</div>
|
|
||||||
<div class="md-toolbar-section-end">
|
|
||||||
<md-button class="md-icon-button">
|
|
||||||
<md-icon>search</md-icon>
|
|
||||||
</md-button>
|
|
||||||
<md-menu md-align-trigger>
|
|
||||||
<md-button md-menu-trigger class="md-icon-button">
|
|
||||||
<md-icon>more_vert</md-icon>
|
|
||||||
</md-button>
|
|
||||||
<md-menu-content>
|
|
||||||
<md-menu-item>Alphabetically</md-menu-item>
|
|
||||||
<md-menu-item>Recently Used</md-menu-item>
|
|
||||||
</md-menu-content>
|
|
||||||
</md-menu>
|
|
||||||
</div>
|
|
||||||
</md-app-toolbar>
|
|
||||||
|
|
||||||
<md-app-drawer :md-active.sync="menuVisible">
|
<md-app-content>
|
||||||
<div class="drawer-banner">
|
<md-field :class="title_verify? '':'md-invalid'">
|
||||||
<md-icon class="default-avatar md-size-2x">face</md-icon>
|
<label>Code Title</label>
|
||||||
<p class="md-title">Canary Codebook</p>
|
<md-input v-model="title" required></md-input>
|
||||||
<p class="md-caption">zhaoyingbo@live.cn</p>
|
<span class="md-error">Title can not be none.</span>
|
||||||
</div>
|
</md-field>
|
||||||
|
|
||||||
<md-list>
|
<md-field :class="user_name_verify? '':'md-invalid'">
|
||||||
<md-list-item>
|
<label>Username</label>
|
||||||
<md-icon>person</md-icon>
|
<md-input v-model="user_name" required></md-input>
|
||||||
<span class="md-list-item-text">Account</span>
|
<span class="md-error">Username can not be none.</span>
|
||||||
</md-list-item>
|
</md-field>
|
||||||
|
|
||||||
<md-list-item>
|
<md-field :class="password_verify? '':'md-invalid'">
|
||||||
<md-icon>help</md-icon>
|
<label>Password</label>
|
||||||
<span class="md-list-item-text">FAQ</span>
|
<md-input v-model="password" required></md-input>
|
||||||
</md-list-item>
|
<span class="md-error">Password can not be none.</span>
|
||||||
|
</md-field>
|
||||||
|
|
||||||
<md-list-item>
|
<md-field>
|
||||||
<md-icon>question_answer</md-icon>
|
<label>Web address</label>
|
||||||
<span class="md-list-item-text">Provide Feedback</span>
|
<md-input v-model="web_address"></md-input>
|
||||||
</md-list-item>
|
</md-field>
|
||||||
|
|
||||||
<md-list-item>
|
<md-field>
|
||||||
<md-icon>settings</md-icon>
|
<label>Node</label>
|
||||||
<span class="md-list-item-text">Settings</span>
|
<md-textarea v-model="node"></md-textarea>
|
||||||
</md-list-item>
|
</md-field>
|
||||||
<md-list-item>
|
|
||||||
<md-icon>reply</md-icon>
|
|
||||||
<span class="md-list-item-text">Share</span>
|
|
||||||
</md-list-item>
|
|
||||||
</md-list>
|
|
||||||
</md-app-drawer>
|
|
||||||
|
|
||||||
<md-app-content>
|
<md-button class="md-raised md-primary expand" @click="judgeContent()">Enter</md-button>
|
||||||
<md-empty-state
|
</md-app-content>
|
||||||
md-icon="devices_other"
|
</md-app>
|
||||||
md-label="Create your first code"
|
</div>
|
||||||
md-description="Creating code, you'll be able to upload your information to the server and save it."
|
|
||||||
v-if="test_data.length == 0"
|
|
||||||
>
|
|
||||||
<md-button class="md-primary md-raised">Create first code</md-button>
|
|
||||||
</md-empty-state>
|
|
||||||
|
|
||||||
<div class="code-card" v-for="(code, index) in test_data" :key="index">
|
|
||||||
<p class="md-title">{{code.title}}</p>
|
|
||||||
<p class="md-caption">{{code.user_name}}</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<md-speed-dial class="md-bottom-right" v-if="test_data.length != 0">
|
|
||||||
<md-speed-dial-target>
|
|
||||||
<md-icon>add</md-icon>
|
|
||||||
</md-speed-dial-target>
|
|
||||||
</md-speed-dial>
|
|
||||||
</md-app-content>
|
|
||||||
</md-app>
|
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
// @ is an alias to /src
|
// @ is an alias to /src
|
||||||
import { mapState, mapActions } from "vuex";
|
import { mapState, mapActions } from 'vuex';
|
||||||
|
import { encrypt, decrypt, encryptMainCode, decryptMainCode } from '@/utils/aes.js';
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: "Home",
|
name: 'Add',
|
||||||
data() {
|
data() {
|
||||||
return {
|
return {
|
||||||
menuVisible: false,
|
title: '',
|
||||||
has_data: false,
|
user_name: '',
|
||||||
clientHeight: "",
|
password: '',
|
||||||
test_data: [
|
node: '',
|
||||||
{
|
web_address: '',
|
||||||
open_count:0,
|
id_cache: '',
|
||||||
title:'QQ',
|
open_count_cache:'',
|
||||||
user_name:'1144131090',
|
title_verify: true,
|
||||||
password:'test',
|
user_name_verify: true,
|
||||||
node:'测试用',
|
password_verify: true
|
||||||
},{
|
};
|
||||||
open_count:0,
|
},
|
||||||
title:'微信',
|
computed: {
|
||||||
user_name:'15143211127',
|
...mapState(['row_data', 'row_pwd'])
|
||||||
password:'test',
|
},
|
||||||
node:'测试用',
|
methods: {
|
||||||
},{
|
...mapActions(['setRowData', 'setRowPwd']),
|
||||||
open_count:0,
|
|
||||||
title:'QQ',
|
// 初始化
|
||||||
user_name:'1144131090',
|
init() {
|
||||||
password:'test',
|
// 刷新vuex
|
||||||
node:'测试用',
|
this.$store.replaceState(Object.assign(this.$store.state, JSON.parse(localStorage.getItem('storeState'))));
|
||||||
},{
|
// 判断有无用户密码
|
||||||
open_count:0,
|
if (Object.keys(this.row_pwd).length != 0) {
|
||||||
title:'QQ',
|
// 有密码，已经输入过了
|
||||||
user_name:'1144131090',
|
let now = new Date().getTime();
|
||||||
password:'test',
|
if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
|
||||||
node:'测试用',
|
// 上次写入时间距离现在在五分钟之内
|
||||||
},
|
// 判断是否是更新
|
||||||
]
|
if (this.$route.params.modify_content) {
|
||||||
};
|
// 刷新重置数据
|
||||||
},
|
let content = this.$route.params.modify_content
|
||||||
computed: {
|
this.title = content.title
|
||||||
...mapState([])
|
this.user_name = content.user_name
|
||||||
},
|
this.password = content.password
|
||||||
methods: {
|
this.node = content.node
|
||||||
...mapActions([]),
|
this.web_address = content.web_address
|
||||||
changeFixed(clientHeight) {
|
this.id_cache = content.id
|
||||||
//动态修改样式
|
this.open_count_cache = content.open_count
|
||||||
// console.log(clientHeight);
|
}
|
||||||
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
return
|
||||||
}
|
} else {
|
||||||
},
|
// 密码超时
|
||||||
created() {},
|
this.turnToHome('密码超时');
|
||||||
mounted() {
|
}
|
||||||
// 获取浏览器可视区域高度
|
} else {
|
||||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
// 没有密码
|
||||||
//document.body.clientWidth;
|
this.turnToHome('无密码');
|
||||||
window.onresize = function temp() {
|
}
|
||||||
this.clientHeight = `${document.documentElement.clientHeight}`;
|
},
|
||||||
};
|
|
||||||
},
|
// 对输入框里边的内容进行判断
|
||||||
watch: {
|
judgeContent() {
|
||||||
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
// 设置flag
|
||||||
clientHeight: function() {
|
let can_continue = true
|
||||||
this.changeFixed(this.clientHeight);
|
// 处理title
|
||||||
}
|
if(!(this.title = this.title.trim())) {
|
||||||
},
|
can_continue = false
|
||||||
beforeDestroy() {},
|
this.title_verify = false
|
||||||
components: {}
|
}
|
||||||
|
// 处理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)
|
||||||
|
},
|
||||||
|
|
||||||
|
// 强制返回Home
|
||||||
|
turnToHome(msg) {
|
||||||
|
console.log(msg)
|
||||||
|
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
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.init()
|
||||||
|
},
|
||||||
|
mounted() {},
|
||||||
|
watch: {},
|
||||||
|
beforeDestroy() {},
|
||||||
|
components: {}
|
||||||
};
|
};
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang="scss" type="text/scss">
|
<style scoped lang="scss" type="text/scss">
|
||||||
@import "../../style/main";
|
@import '../../style/main';
|
||||||
.home {
|
.add {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
// max-width: 500px;
|
min-height: 100%;
|
||||||
min-height: 100%;
|
background: #fff;
|
||||||
background: #fff;
|
.expand {
|
||||||
// margin: 0 auto;
|
width: 100%;
|
||||||
.drawer-banner {
|
margin: 0 !important;
|
||||||
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
min-height: 1.2rem !important;
|
||||||
box-sizing: border-box;
|
}
|
||||||
background: $main-color;
|
|
||||||
color: #fff;
|
|
||||||
.default-avatar {
|
|
||||||
color: #fff;
|
|
||||||
margin-bottom: 0.3rem;
|
|
||||||
}
|
|
||||||
.md-caption {
|
|
||||||
color: #fbfbfb;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
.code-card {
|
|
||||||
padding: .3rem 0;
|
|
||||||
border-bottom: 1px #eee solid;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
// Demo purposes only
|
</style>
|
||||||
.md-drawer {
|
|
||||||
width: 240px;
|
|
||||||
max-width: calc(100vw - 125px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|||||||
@ -16,8 +16,11 @@
|
|||||||
</md-menu-content>
|
</md-menu-content>
|
||||||
</md-menu>
|
</md-menu>
|
||||||
</div>
|
</div>
|
||||||
|
<div class="md-toolbar-row" v-if="search_start">
|
||||||
|
<md-autocomplete class="search" v-model="selectedEmployee" :md-options="employees" md-layout="box"><label>Search...</label></md-autocomplete>
|
||||||
|
</div>
|
||||||
</md-app-toolbar>
|
</md-app-toolbar>
|
||||||
|
|
||||||
<md-app-drawer :md-active.sync="menuVisible">
|
<md-app-drawer :md-active.sync="menuVisible">
|
||||||
<div class="drawer-banner">
|
<div class="drawer-banner">
|
||||||
<md-icon class="default-avatar md-size-2x">face</md-icon>
|
<md-icon class="default-avatar md-size-2x">face</md-icon>
|
||||||
@ -45,12 +48,12 @@
|
|||||||
<md-icon>settings</md-icon>
|
<md-icon>settings</md-icon>
|
||||||
<span class="md-list-item-text">Settings</span>
|
<span class="md-list-item-text">Settings</span>
|
||||||
</md-list-item>
|
</md-list-item>
|
||||||
|
|
||||||
<md-list-item v-clipboard:copy="web_addr" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
|
<md-list-item v-clipboard:copy="web_addr" v-clipboard:success="onCopyUrl" v-clipboard:error="onErrorUrl">
|
||||||
<md-icon>reply</md-icon>
|
<md-icon>reply</md-icon>
|
||||||
<span class="md-list-item-text">Share</span>
|
<span class="md-list-item-text">Share</span>
|
||||||
</md-list-item>
|
</md-list-item>
|
||||||
|
|
||||||
<md-list-item @click="turnToUnlock('用户点击锁定')">
|
<md-list-item @click="turnToUnlock('用户点击锁定')">
|
||||||
<md-icon>beenhere</md-icon>
|
<md-icon>beenhere</md-icon>
|
||||||
<span class="md-list-item-text">Lock Now</span>
|
<span class="md-list-item-text">Lock Now</span>
|
||||||
@ -59,6 +62,7 @@
|
|||||||
</md-app-drawer>
|
</md-app-drawer>
|
||||||
|
|
||||||
<md-app-content>
|
<md-app-content>
|
||||||
|
<div :style="`height:${search_start? '102':'56'}px`"></div>
|
||||||
<md-empty-state
|
<md-empty-state
|
||||||
md-icon="devices_other"
|
md-icon="devices_other"
|
||||||
md-label="Create your first code"
|
md-label="Create your first code"
|
||||||
@ -74,7 +78,7 @@
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0">
|
<md-speed-dial class="md-bottom-right" v-if="show_list.length != 0">
|
||||||
<md-speed-dial-target><md-icon>add</md-icon></md-speed-dial-target>
|
<md-speed-dial-target @click="turnToAdd()"><md-icon>add</md-icon></md-speed-dial-target>
|
||||||
</md-speed-dial>
|
</md-speed-dial>
|
||||||
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
<md-snackbar md-position="center" :md-active.sync="show_snackbar" md-persistent>
|
||||||
<span>{{ snakebar_msg }}</span>
|
<span>{{ snakebar_msg }}</span>
|
||||||
@ -101,7 +105,10 @@ export default {
|
|||||||
unlock: false,
|
unlock: false,
|
||||||
show_snackbar: false,
|
show_snackbar: false,
|
||||||
snakebar_msg: '',
|
snakebar_msg: '',
|
||||||
web_addr: 'https://codebook.canary.moe'
|
web_addr: 'https://codebook.canary.moe',
|
||||||
|
employees: [],
|
||||||
|
selectedEmployee: null,
|
||||||
|
search_start: false
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@ -127,7 +134,7 @@ export default {
|
|||||||
if (Object.keys(this.row_pwd).length != 0) {
|
if (Object.keys(this.row_pwd).length != 0) {
|
||||||
// 有密码，已经输入过了
|
// 有密码，已经输入过了
|
||||||
let now = new Date().getTime();
|
let now = new Date().getTime();
|
||||||
if (now - this.row_pwd.create_time < 1000) {
|
if (now - this.row_pwd.create_time < 1000 * 60 * 5) {
|
||||||
// 上次写入时间距离现在在五分钟之内
|
// 上次写入时间距离现在在五分钟之内
|
||||||
this.unlock = true;
|
this.unlock = true;
|
||||||
// 判断有无密码本
|
// 判断有无密码本
|
||||||
@ -152,7 +159,6 @@ export default {
|
|||||||
}
|
}
|
||||||
console.log(this.show_list.length != 0 ? '密码本存在' : '空密码本');
|
console.log(this.show_list.length != 0 ? '密码本存在' : '空密码本');
|
||||||
console.log(this.unlock ? '已解锁' : '未解锁');
|
console.log(this.unlock ? '已解锁' : '未解锁');
|
||||||
|
|
||||||
},
|
},
|
||||||
|
|
||||||
// 初始化用户信息
|
// 初始化用户信息
|
||||||
@ -199,8 +205,8 @@ export default {
|
|||||||
// this.setRowPwd([row_pwd, this]);
|
// this.setRowPwd([row_pwd, this]);
|
||||||
// console.log('主密码设置完成，返回init');
|
// console.log('主密码设置完成，返回init');
|
||||||
// this.init();
|
// this.init();
|
||||||
if(type == '密码超时') this.$router.push({ name: "Unlock", params: { msg: 'Password validity period has expired, please re-enter.' } })
|
if (type == '密码超时') this.$router.push({ name: 'Unlock', params: { msg: 'Password validity period has expired, please re-enter.' } });
|
||||||
else this.$router.push('/unlock')
|
else this.$router.push('/unlock');
|
||||||
},
|
},
|
||||||
|
|
||||||
// 跳转到搜索界面
|
// 跳转到搜索界面
|
||||||
@ -210,7 +216,7 @@ export default {
|
|||||||
console.log('点击搜索无内容拦截');
|
console.log('点击搜索无内容拦截');
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
this.$router.push({ name: 'Search', params: { list: this.show_list } });
|
this.search_start = !this.search_start
|
||||||
},
|
},
|
||||||
|
|
||||||
// 跳转到添加界面
|
// 跳转到添加界面
|
||||||
@ -290,6 +296,25 @@ export default {
|
|||||||
padding: 0.3rem 0;
|
padding: 0.3rem 0;
|
||||||
border-bottom: 1px #eee solid;
|
border-bottom: 1px #eee solid;
|
||||||
}
|
}
|
||||||
|
.md-toolbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.md-toolbar-row {
|
||||||
|
order: 12;
|
||||||
|
// margin-bottom: .3rem !important;
|
||||||
|
}
|
||||||
|
.md-toolbar-section-start,
|
||||||
|
.md-toolbar-section-end,
|
||||||
|
.md-toolbar-row {
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
.md-toolbar-row {
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
.md-speed-dial.md-bottom-right {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
// Demo purposes only
|
// Demo purposes only
|
||||||
.md-drawer {
|
.md-drawer {
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user