280 lines
13 KiB
HTML
280 lines
13 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>Admin Console</title>
|
|
<link rel="icon" href="/assets/favicon.ico" type="image/x-icon"/>
|
|
<link rel="bookmark" href="/assets/favicon.ico" type="image/x-icon"/>
|
|
<link href="/assets/vuetify-v2.6.9/vuetify-v2.6.9.min.css" rel="stylesheet"/>
|
|
<link href="/assets/vuetify-v2.6.9/materialdesignicons.min.css" rel="stylesheet">
|
|
|
|
<script src="/assets/vue/vue.min.js"></script>
|
|
<script src="/assets/vuetify-v2.6.9/vuetify-v2.6.9.min.js"></script>
|
|
<script src="/assets/axios/axios.min.js"></script>
|
|
<script src="/assets/moment/moment.js"></script>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
|
|
</head>
|
|
<body>
|
|
<div id="app"></div>
|
|
</body>
|
|
<script type="text/x-template" id="app-template">
|
|
<v-app id="inspire">
|
|
|
|
<v-dialog v-model="dialog.show" width="500" v-if="dialog.obj">
|
|
<v-card>
|
|
<v-card-title class="text-h5 grey lighten-2">{{dialog.title}}</v-card-title>
|
|
<v-card-text>{{dialog.context}}</v-card-text>
|
|
<v-divider></v-divider>
|
|
<v-card-actions>
|
|
<v-btn text @click="dialog.show = false">取消</v-btn>
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" text @click="confirm">确认</v-btn>
|
|
</v-card-actions>
|
|
</v-card>
|
|
</v-dialog>
|
|
|
|
#{render "common/bar-admin.html" .}
|
|
<v-main class="grey lighten-3">
|
|
<v-container style="height: 100%">
|
|
<v-row style="height: 100%" class="justify-center">
|
|
<v-col cols="12" sm="12" md="3">
|
|
<v-sheet min-height="100%">
|
|
<v-card>
|
|
<v-card-title>写点什么吧
|
|
<v-spacer></v-spacer>
|
|
<v-btn color="primary" @click="send" :loading="sending">发送</v-btn>
|
|
</v-card-title>
|
|
|
|
<v-card-text>
|
|
<v-textarea outlined rows="8" v-model="content"></v-textarea>
|
|
<input id="i-files" type="file" multiple style="display: none" accept=".jpg,.jpeg,.png,.bmp,.gif"/>
|
|
<v-container style="height: 100%">
|
|
<v-row>
|
|
<v-col cols="4" v-for="(img,index) in images">
|
|
<div style="position: relative;padding: 0px">
|
|
<v-icon style="position: absolute;right: -20px;top: -20px;"
|
|
@click="removeImg(index)">mdi-close-thick
|
|
</v-icon>
|
|
<v-img :src="img" style="max-width: 150px;min-width: 100%"/>
|
|
</div>
|
|
|
|
</v-col>
|
|
<v-col cols="4">
|
|
<v-img src="/assets/images/addBtn.png" style="width: 100%"
|
|
@click="addImage"/>
|
|
<!-- <v-icon @click="addImage" style="width: 100%">mdi-plus-thick</v-icon>
|
|
<v-img src="/static/images/yage.jpg" @click="addImage"/> -->
|
|
</v-col>
|
|
<!-- <v-col cols="4">
|
|
<v-img src="/assets/images/yage.jpg"/>
|
|
</v-col>
|
|
<v-col cols="4">
|
|
<v-img src="/assets/images/yage.jpg"/>
|
|
</v-col> -->
|
|
</v-row>
|
|
</v-container>
|
|
</v-card-text>
|
|
|
|
<v-card-text v-if="error">
|
|
<p>发送失败,原因:</p>
|
|
<p>{{error.message}}</p>
|
|
</v-card-text>
|
|
</v-card>
|
|
|
|
</v-sheet>
|
|
</v-col>
|
|
|
|
<v-col cols="12" xs="12" sm="12" md="6">
|
|
<v-sheet min-height="100%">
|
|
|
|
<v-list three-line class="pt-0 pb-0">
|
|
<template v-for="(item, index) in diaryList">
|
|
<!-- <v-subheader v-if="item.header" :key="item.header" v-text="item.header"></v-subheader> -->
|
|
<v-list-item>
|
|
<!-- <v-list-item-avatar>
|
|
<v-img src="/assets/images/yage.jpg"></v-img>
|
|
</v-list-item-avatar> -->
|
|
|
|
<v-list-item-content style="display: block;">
|
|
<v-list-item-title>
|
|
<div>{{moment(item.publishTime).format('YYYY/MM/DD')}}</div>
|
|
<div style="white-space: break-spaces;">{{item.content}}</div>
|
|
</v-list-item-title>
|
|
<v-list-item-subtitle>
|
|
<v-row>
|
|
<template v-if="item.images.length===1">
|
|
<v-col v-for="id in item.images" :key="id" class="d-flex child-flex" cols="6">
|
|
<v-img :src="`/file/${id}`" aspect-ratio="1" class="grey lighten-2">
|
|
<template v-slot:placeholder>
|
|
<v-row class="fill-height ma-0" align="center" justify="center">
|
|
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
|
</v-row>
|
|
</template>
|
|
</v-img>
|
|
</v-col>
|
|
</template>
|
|
<template v-if="item.images.length>1">
|
|
<v-col v-for="id in item.images" :key="id" class="d-flex child-flex" cols="4">
|
|
<v-img :src="`/file/${id}`" aspect-ratio="1" class="grey lighten-2">
|
|
<template v-slot:placeholder>
|
|
<v-row class="fill-height ma-0" align="center" justify="center">
|
|
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
|
</v-row>
|
|
</template>
|
|
</v-img>
|
|
</v-col>
|
|
</template>
|
|
|
|
<!-- <v-col v-for="id in item.images" :key="id" class="d-flex child-flex" cols="4">
|
|
<v-img :src="`/file/${r'${id}'}`" aspect-ratio="1" class="grey lighten-2" @click="zoomImg(id)">
|
|
<template v-slot:placeholder>
|
|
<v-row class="fill-height ma-0" align="center" justify="center">
|
|
<v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
|
|
</v-row>
|
|
</template>
|
|
</v-img>
|
|
</v-col> -->
|
|
</v-row>
|
|
</v-list-item-subtitle>
|
|
</v-list-item-content>
|
|
</v-list-item>
|
|
<v-btn color="error" plain @click="delDiary(item)"><v-icon>mdi-delete</v-icon> 删除 </v-btn>
|
|
<v-divider></v-divider>
|
|
</template>
|
|
</v-list>
|
|
</v-sheet>
|
|
</v-col>
|
|
</v-row>
|
|
</v-container>
|
|
</v-main>
|
|
</v-app>
|
|
</script>
|
|
<style type="text/css">
|
|
.v-responsive__sizer {
|
|
padding-bottom: 100% !important;
|
|
}
|
|
</style>
|
|
<script>
|
|
new Vue({
|
|
el: '#app',
|
|
template: '#app-template',
|
|
data: {
|
|
sending: false,
|
|
content: '',
|
|
files: [],
|
|
images: [],
|
|
error: null,
|
|
|
|
dialog: {
|
|
show: false,
|
|
title: '',
|
|
context: '',
|
|
obj: null
|
|
},
|
|
|
|
diaryList: [],
|
|
},
|
|
methods: {
|
|
send() {
|
|
let formData = new FormData();
|
|
this.files.forEach((file) => {
|
|
formData.append("file", file);
|
|
});
|
|
formData.append('content', this.content)
|
|
this.sending = true
|
|
let ths = this
|
|
console.log(formData);
|
|
axios.post('/admin/diary/submit', formData, {headers: {"Content-Type": "multipart/form-data"}}).then(res => {
|
|
let data = res.data
|
|
console.log(data)
|
|
this.sending = false
|
|
location.reload()
|
|
}).catch(err => {
|
|
ths.error = err
|
|
console.error(err)
|
|
this.sending = false
|
|
});
|
|
|
|
},
|
|
|
|
addImage() {
|
|
let ths = this
|
|
let files = document.getElementById('i-files')
|
|
files.click()
|
|
|
|
files.onchange = () => {
|
|
let URL = window.URL || window.webkitURL
|
|
ths.files.push(...files.files)
|
|
|
|
for (let i = 0; i < files.files.length; i++) {
|
|
let file = files.files[i]
|
|
let src = URL.createObjectURL(file)
|
|
ths.images.push(src)
|
|
}
|
|
}
|
|
},
|
|
|
|
removeImg(index) {
|
|
this.images.splice(index, 1)
|
|
this.files.splice(index, 1)
|
|
},
|
|
|
|
delDiary(item){
|
|
|
|
let ths = this;
|
|
let id = item.id
|
|
this.dialog.obj = item
|
|
this.dialog.title = '删除文件'
|
|
this.dialog.context = `确认要删除该日记吗?`
|
|
this.dialog.show = true;
|
|
|
|
this.confirm = () => {
|
|
ths.dialog.show = false;
|
|
axios.delete(`/admin/diary/del/${id}`).then(res => {
|
|
let data = res.data
|
|
if (data.code === 200) {
|
|
ths.latestDiary()
|
|
return
|
|
}
|
|
}).catch(err => {
|
|
|
|
});
|
|
}
|
|
|
|
},
|
|
|
|
|
|
latestDiary() {
|
|
let ths = this
|
|
|
|
axios.get("/diary/latest").then(rsp => {
|
|
let data = rsp.data.data
|
|
return data
|
|
}).then((data) => {
|
|
data.forEach(item => {
|
|
let imgList = []
|
|
let images = item.images.split(",")
|
|
images.forEach(img => {
|
|
if(img){
|
|
imgList.push(img)
|
|
}
|
|
})
|
|
item.images = imgList
|
|
// console.log(imgList);
|
|
});
|
|
// console.log(data);
|
|
ths.diaryList = data
|
|
}).catch(err => {
|
|
})
|
|
|
|
},
|
|
},
|
|
mounted() {
|
|
this.latestDiary();
|
|
|
|
},
|
|
vuetify: new Vuetify(),
|
|
})
|
|
|
|
</script>
|
|
</html> |