-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
171 lines (165 loc) · 5.56 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, user-scalable=0,initial-scale=1.0" />
<title>依依相册</title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link
rel="stylesheet"
href="//at.alicdn.com/t/font_2536416_erbvf2u9vtv.css"
/>
<link rel="stylesheet" href="./css/style.css">
</head>
<body>
<div class="tab-view view-box">
<h2 class="intro">小依的成长画册</h2>
<ul class="image-container">
</ul>
</div>
<div class="tab-view record-box">
<h2 class="intro">记录精彩瞬间</h2>
<div class="file-info-box">
<p>
选择要保存的照片
</p>
<input class="file-input" onchange="getBs64(this)" type="file" accept="image/*" />
<p>
一句话描述这个瞬间
</p>
<textarea name="" id="description" cols="40" rows="2"></textarea>
<p>
<button class="reocord-btn" onclick="sendRequest()">确定记录</button>
</p>
</div>
</div>
<div class="bottom-tab-box">
<div class="item active" data-target="view-box">
<span class="iconfont iconliulan"></span>
<div class="word-box">
<span> 浏览 </span>
</div>
</div>
<div class="divider-line">
</div>
<div class="item" data-target="record-box">
<span class="iconfont iconjilu"></span>
<div class="word-box">
<span> 记录 </span>
</div>
</div>
</div>
<div class="identify-modal">
<div class="form-box">
<input type="text" placeholder="请输入您的身份信息">
<br>
<button onclick="cacheIdentifier()">确定</button>
</div>
</div>
<div class="loading-modal">
<div class="icon-box">
<span class="iconfont iconloading1"></span>
<div class="tip-text">文件上传中...</div>
</div>
</div>
<script src="./js/utils.js"></script>
<script src="http://wechatfe.github.io/lib/vconsole/3.4.1/vconsole.min.js"></script>
<script>
var clickCount = 0;
document.querySelector('h2.intro').onclick = function(){
clickCount++;
if(clickCount >= 5){
new VConsole();
}
}
//记录本地转化的base64数据,以发送到github服务器
var bs64 = "";
listenBottomTabChange(function(currentTab){
var tabItems = document.querySelectorAll('[data-target]');
var tabViews = document.querySelectorAll('.tab-view');
Array.prototype.forEach.call(tabItems,function(tabItem){
tabItem.classList.remove('active')
})
Array.prototype.forEach.call(tabViews,function(tabView){
tabView.style.display = "none";
})
document.querySelector('[data-target='+ currentTab +']').classList.add('active');
document.querySelector('.'+currentTab).style.display = 'block'
});
// 增量添加图片
function increaseNewImage(fileName){
Gallery.fetchImageData(fileName).then(res=>{
document.querySelector('.image-container').innerHTML += `
<li><img src="${res}"/></li>
`;
})
}
//获取图片数据
Gallery.fetchImageNames().then(res=>{
res.forEach(fileName=>{
increaseNewImage(fileName)
})
})
function cacheIdentifier(){
var identifier = document.querySelector('.identify-modal input').value.trim();
if(identifier){
toggleIdentifyModal(false);
localStorage.setItem('identifier',identifier);
}
}
function toggleIdentifyModal(visible){
document.querySelector('.identify-modal').style.display = visible ? 'block':'none';
document.querySelector('.identify-modal input').value = "";
}
function toggleLoadingModal(visible){
document.querySelector('.loading-modal').style.display = visible ? 'block':'none';
}
function sendRequest() {
var desc = document.querySelector('#description').value.trim();
if(!bs64){
alert('请添加图片');
return;
}
if(!desc){
alert('请追加图片的描述');
return;
}
//验证
var validIdentifiers = ["依依妈妈","依依爸爸","依依爷爷","依依奶奶"];
var localIdentifier = localStorage.getItem('identifier');
if(!(localIdentifier && validIdentifiers.indexOf(localIdentifier) > -1)){
//打开弹框要求核验身份
toggleIdentifyModal(true);
return
}
//over
//打开loading
toggleLoadingModal(true);
//将毫秒数和描述作为文件名,从base64里获取文件后缀名
var fileName = Date.now() + "_" + desc +"." + bs64.match(/data:image\/(\w+)/)[1];
var message = desc;
Gallery.recordImage({
fileName:fileName,
message:message,
base64:bs64
}).then(res=>{
increaseNewImage(fileName);
toggleLoadingModal(false);
alert('记录成功!')
}).catch(err=>{
toggleLoadingModal(false);
alert('记录失败!')
})
}
function getBs64(target) {
//最大限制到600k
var maxKB = 600;
var file = target.files[0];
fileToBase64(file,maxKB,function(resultBase64){
bs64 = resultBase64;
})
}
</script>
</body>
</html>