1.1

static/src/list.vue

@@ -3,12 +3,13 @@ import { LazyImg, Waterfall } from 'vue-waterfall-plugin-next'
 import Loading from 'vue-loading-overlay';
 import 'vue-loading-overlay/dist/css/index.css';
 import 'vue-waterfall-plugin-next/style.css'
+import 'https://cdn.bootcdn.net/ajax/libs/viewerjs/1.11.1/viewer.min.js'
 export default{
  data(){
  return{
  list:[],
- status:false,
- start:true,
+ auth:true,
+ pass:'',
  breakpoints: {
  1200: { //当屏幕宽度小于等于1200
  rowPerView: 4,
@@ -22,22 +23,33 @@ export default{
 }
  }
  },
- mounted(){
+ methods:{
+ query(){
  this.start=false
- fetch('/query',{
+ fetch(`/query/${this.pass}`,{
  method:'GET'
  }).then((response)=>{
+ if (response.ok) {
  return response.json()
+ }
+ throw response
  }).then((succ)=>{
  for (let i = 0; i < succ.keys.length; i++) {
  this.list.push(succ.keys[i])
  }
  this.list.sort((a,b)=>{
+ this.auth=false
  return b.metadata.date-a.metadata.date
  })
+ 
+ }).catch((err)=>{
+ alert('密码错误')
  })
  },
- methods:{
+ dis(e){
+ const gallery = new Viewer(document.getElementById('images'));
+ gallery.show()
+ },
  remove(i){
  this.file_info=this.file_info.filter((t)=>t!=i)
  },
@@ -59,16 +71,17 @@ export default{
 </script>
 <template>
  <Transition name="loading">
- <div v-if="status" class="loading">
- <h4>上传中...</h4>
- </div>
+ <div class="mdui-textfield mdui-textfield-floating-label center" style="top:30%" v-if="auth">
+ <label class="mdui-textfield-label">PASSWORD</label>
+ <input class="mdui-textfield-input" v-model="pass" type="password" @keyup.enter="query"/>
+ <button class="mdui-btn mdui-btn-raised mdui-color-indigo mdui-text-color-white" style="margin-top: 10px;" @click="query">生成</button>
+</div>
  </Transition>
- <Loading :active="this.start" loader="bars" width="50" height="50" color="rgb(0,123,255)"></Loading>
-<Waterfall :list="this.list" :breakpoints="breakpoints">
+<Waterfall :list="this.list" :breakpoints="breakpoints" id="images" v-if="!auth">
  <template #item="{ item, url, index }">
  <div class="mdui-card">
  <div class="mdui-card-media">
- <LazyImg :url="'/api/img/'+item.name" />
+ <LazyImg :url="'/api/img/'+item.name" @click="dis($event.target)"/>
  <div class="mdui-card-media-covered">
  <div class="mdui-card-primary">
  <div class="mdui-card-primary-title">{{item.name}}</div>
@@ -83,6 +96,7 @@ export default{
 </Waterfall>
 </template>
 <style>
+@import 'https://cdn.bootcdn.net/ajax/libs/viewerjs/1.11.1/viewer.min.css';
 .lazy__img[lazy=loading] {
  padding: 5em 0;
  width: 48px;