pqyt64hnf
/
delicious-food
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

ADD file via upload

Browse Source
master
pqu3f57g4 2 years ago
parent 5f91356473
commit 0cbf7159c6
1 changed files with 319 additions and 0 deletions
Show Stats Download Patch File Download Diff File

319
src/main/resources/static/front/notesInfoDetail.html
Unescape View File

@ -0,0 +1,319 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<meta http-equiv="pragma" content="no-cache"/>
<meta http-equiv="content-type" content="no-cache, must-revalidate"/>
<meta http-equiv="expires" content="Wed, 26 Feb 1997 08:21:57 GMT"/>
<title>笔记详情</title>
<link href="css/bootstrap.min.css" rel="stylesheet"/>
<link href="css/my.css" rel="stylesheet"/>
<link href="css/nav.css" rel="stylesheet">
<link href="/end/css/quill.snow.css" rel="stylesheet">
<link href="css/element/index.css" rel="stylesheet"/>
<style>
[v-cloak] {
display: none;
}
.ql-editor img {
width: 600px;
}
</style>
</head>
<body>
<div id="wrapper" v-cloak>
<div class="container">
<!-- 头部开始 -->
<div class="nx-header">
<div style="display: flex;width: 100%; height: 30px; line-height: 30px; background-color: #eee;">
<div style="flex: 5; text-align: right">
<span v-if="user.name">
欢迎您，{{user.name}}
<a style="margin-right: 50px; color: blue" href="javascript:void(0)" @click="logout">退出</a>
</span>
<a v-if="!(user.name)" href="/end/page/login.html" target="_blank" style="margin-right: 10px; color: #666666">登录</a>
<a href="/end/page/register.html" target="_blank" style="margin-right: 30px; color: #666666">注册</a>
</div>
</div>
<div>
<ul style="display: flex; background-color: orange; height: 30px">
<li class="nav-item"><a href="index.html">首页</a></li>
<li class="nav-item"><a href="advertiserInfo.html">系统公告</a></li>
<li class="nav-item"><a href="foodsMenuInfo.html">菜谱</a></li>
<!-- <li class="nav-item"><a href="foodsMaterialInfo.html">食材</a></li>-->
<li class="nav-item"><a href="collectInfo.html">收藏</a></li>
<li class="nav-item"><a class="active" href="notesInfo.html">笔记</a></li>
<li class="nav-item"><a href="newsInfo.html">饮食资讯</a></li>
<li class="nav-item"><a href="messageInfo.html">趣味答题</a></li>
<li v-if="isShow" class="nav-item"><a href="/end/page/index.html" target="_blank">进入后台系统</a></li>
</ul>
</div>
</div>
<!-- 头部结束 -->
</div>
<div class="container" style="margin-top: 10px">
<div class="info">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="panel-body bg-gray">
<div class="row p-10" style="margin-bottom: 10px">
<div class="col-md-2">名称：</div>
<div class="col-md-10">{{ obj.name }}</div>
</div>
<div class="row p-10" style="margin-bottom: 10px">
<div class="col-md-2">上传时间：</div>
<div class="col-md-10">{{ obj.time }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-8 col-md-offset-2">
<div class="panel panel-default">
<div class="ql-editor panel-body" id="view-notice-body">
</div>
</div>
</div>
</div>
<!-- 点赞和收藏-->
<div style="text-align: center">
<button class="btn btn-sm" style="background-color: red; color: white" @click="praise()">
点赞({{obj.praiseCount}})
</button>
<button class="btn btn-sm" style="background-color: darkorange; color: white" @click="collect()">
收藏({{obj.collectCount}})
</button>
</div>
<!-- /. 表单数据 -->
<div class="comment" v-if="isComment">
<div class="row">
<div class="col-md-8 col-md-offset-2">
<h2>评论</h2>
</div>
</div>
<div class="comment-item">
<!-- <div class="row mt-10">-->
<!-- <div class="col-md-8 col-md-offset-2" style="font-size: 20px; font-weight: bold">admin</div>-->
<!-- </div>-->
<div class="row mt-10">
<div class="col-md-8 col-md-offset-2" style="text-align: justify">
<textarea style="resize:none; width: 100%; padding: 10px" rows="3" v-model="comment.content"></textarea>
</div>
</div>
<div class="row mt-10">
<div class="col-md-8 col-md-offset-2" style="text-align: right;">
<button class="btn btn-primary f-r" @click="add()">发送</button>
<hr>
</div>
</div>
</div>
<div class="comment-item" v-for="item in comments">
<div class="row mt-10">
<div class="col-md-8 col-md-offset-2" style="font-size: 20px; font-weight: bold">{{ item.name }}
</div>
</div>
<div class="row mt-10">
<div class="col-md-8 col-md-offset-2" style="text-align: justify">
{{ item.content }}
</div>
</div>
<div class="row mt-10">
<div class="col-md-8 col-md-offset-2" style="text-align: right;">
<span style="color: #888888">{{ item.time }}</span>
<hr>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/vue2.6.11/vue.min.js"></script>
<script src="js/vue2.6.11/axios.js"></script>
<script src="/end/js/quill.js"></script>
<script src="js/element/index.js"></script>
<script>
function msg(type, msg) {
Vue.prototype.$message({
type: type, // success（成功）、warning（警告）, error(错误)
message: msg,
duration: 2000,
offset: 100,
center: true,
})
}
new Vue({
el: '#wrapper',
data: {
imgWidth: '0px',
comments: [],
content: '',
obj: {},
isComment: true,
comment: {
content: '',
foreignId: 0
},
fileSrc: '',
user: {},
isShow: false
},
created() {
axios.get('/auth').then(res => {
if (res.data.code === '0') {
this.user = res.data.data;
if (this.user.level !== 3) {
this.isShow = true;
}
}
});
this.load();
},
methods: {
load() {
let id = this.getQueryVariable('id');
this.comment.foreignId = id;
if (id !== 0) {
axios.get('/notesInfo/' + id).then(res => {
if (res.data.code === '0') {
let obj = res.data.data;
this.obj = obj;
if (obj.fileName) {
if (/\.(png|jpg|gif|jpeg|webp)$/.test(obj.fileName)) {
this.obj.fileType = 'image';
} else if (/\.mp4$/.test(obj.fileName)) {
this.obj.fileType = 'video';
} else {
this.obj.fileType = 'other';
}
this.fileSrc = '/files/download/' + obj.fileId;
let img = new Image();
img.src = this.fileSrc;
let _this = this;
img.onload = function(){
if (img.width > 590) {
_this.imgWidth = "100%";
} else {
_this.imgWidth = img.width + "px";
}
};
}
$('#view-notice-body').html(obj.content);
} else {
alert(res.data.msg)
}
});
this.loadComments(id);
}
},
add() {
if (this.comment.content === '') {
return;
}
axios.post('/notesInfoComment', this.comment).then(res => {
if (res.data.code === '0') {
this.comment.content = '';
this.loadComments(this.comment.foreignId);
} else {
alert(res.data.msg);
}
})
},
loadComments(id) {
axios.get('/notesInfoComment/findByForeignId/' + id).then(res => {
if (res.data.code === '0') {
this.comments = res.data.data;
} else {
alert(res.data.msg)
}
})
},
getQueryVariable(key) {
let query = window.location.search.substring(1);
let vars = query.split("&");
for (let i = 0; i < vars.length; i++) {
let pair = vars[i].split("=");
if (pair[0] === key) {
return pair[1];
}
}
return '';
},
logout() {
axios.get("/logout").then(res => {
if(res.data.code === '0') {
location.href = '/front/index.html';
} else {
msg('error', res.data.msg);
}
})
},
praise() {
if(!this.user || !this.user.name) {
location.href = '/end/page/login.html';
return;
}
const data = {notesId: this.obj.id, name: this.obj.name};
axios.post("/praiseInfo", data).then(res => {
if(res.data.code === '0') {
if(res.data.data.id) {
msg("success", '点赞成功');
this.load();
}
} else {
msg('error', res.data.msg);
}
})
},
collect() {
if(!this.user || !this.user.name) {
location.href = '/end/page/login.html';
return;
}
const data = {notesId: this.obj.id, name: this.obj.name};
axios.post("/collectInfo", data).then(res => {
if(res.data.code === '0') {
if(res.data.data.id) {
msg("success", '收藏成功');
this.load();
}
} else {
msg('error', res.data.msg);
}
})
}
}
})
</script>
</body>
</html>
Write Preview
Loading…
Cancel
Save