Compare commits
No commits in common. 'main' and 'master' have entirely different histories.
@ -0,0 +1,4 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
|
not dead
|
||||||
|
|
||||||
@ -0,0 +1,6 @@
|
|||||||
|
[*.{js,jsx,ts,tsx,vue}]
|
||||||
|
indent_style = space
|
||||||
|
indent_size = 2
|
||||||
|
trim_trailing_whitespace = true
|
||||||
|
insert_final_newline = true
|
||||||
|
|
||||||
@ -0,0 +1,17 @@
|
|||||||
|
module.exports = {
|
||||||
|
root: true,
|
||||||
|
env: {
|
||||||
|
node: true
|
||||||
|
},
|
||||||
|
extends: [
|
||||||
|
'plugin:vue/essential'
|
||||||
|
],
|
||||||
|
parserOptions: {
|
||||||
|
parser: 'babel-eslint'
|
||||||
|
},
|
||||||
|
rules: {
|
||||||
|
'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
|
||||||
|
'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,24 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
pnpm-debug.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
|
|
||||||
@ -0,0 +1,202 @@
|
|||||||
|
Apache License
|
||||||
|
Version 2.0, January 2004
|
||||||
|
http://www.apache.org/licenses/
|
||||||
|
|
||||||
|
TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
|
||||||
|
|
||||||
|
1. Definitions.
|
||||||
|
|
||||||
|
"License" shall mean the terms and conditions for use, reproduction,
|
||||||
|
and distribution as defined by Sections 1 through 9 of this document.
|
||||||
|
|
||||||
|
"Licensor" shall mean the copyright owner or entity authorized by
|
||||||
|
the copyright owner that is granting the License.
|
||||||
|
|
||||||
|
"Legal Entity" shall mean the union of the acting entity and all
|
||||||
|
other entities that control, are controlled by, or are under common
|
||||||
|
control with that entity. For the purposes of this definition,
|
||||||
|
"control" means (i) the power, direct or indirect, to cause the
|
||||||
|
direction or management of such entity, whether by contract or
|
||||||
|
otherwise, or (ii) ownership of fifty percent (50%) or more of the
|
||||||
|
outstanding shares, or (iii) beneficial ownership of such entity.
|
||||||
|
|
||||||
|
"You" (or "Your") shall mean an individual or Legal Entity
|
||||||
|
exercising permissions granted by this License.
|
||||||
|
|
||||||
|
"Source" form shall mean the preferred form for making modifications,
|
||||||
|
including but not limited to software source code, documentation
|
||||||
|
source, and configuration files.
|
||||||
|
|
||||||
|
"Object" form shall mean any form resulting from mechanical
|
||||||
|
transformation or translation of a Source form, including but
|
||||||
|
not limited to compiled object code, generated documentation,
|
||||||
|
and conversions to other media types.
|
||||||
|
|
||||||
|
"Work" shall mean the work of authorship, whether in Source or
|
||||||
|
Object form, made available under the License, as indicated by a
|
||||||
|
copyright notice that is included in or attached to the work
|
||||||
|
(an example is provided in the Appendix below).
|
||||||
|
|
||||||
|
"Derivative Works" shall mean any work, whether in Source or Object
|
||||||
|
form, that is based on (or derived from) the Work and for which the
|
||||||
|
editorial revisions, annotations, elaborations, or other modifications
|
||||||
|
represent, as a whole, an original work of authorship. For the purposes
|
||||||
|
of this License, Derivative Works shall not include works that remain
|
||||||
|
separable from, or merely link (or bind by name) to the interfaces of,
|
||||||
|
the Work and Derivative Works thereof.
|
||||||
|
|
||||||
|
"Contribution" shall mean any work of authorship, including
|
||||||
|
the original version of the Work and any modifications or additions
|
||||||
|
to that Work or Derivative Works thereof, that is intentionally
|
||||||
|
submitted to Licensor for inclusion in the Work by the copyright owner
|
||||||
|
or by an individual or Legal Entity authorized to submit on behalf of
|
||||||
|
the copyright owner. For the purposes of this definition, "submitted"
|
||||||
|
means any form of electronic, verbal, or written communication sent
|
||||||
|
to the Licensor or its representatives, including but not limited to
|
||||||
|
communication on electronic mailing lists, source code control systems,
|
||||||
|
and issue tracking systems that are managed by, or on behalf of, the
|
||||||
|
Licensor for the purpose of discussing and improving the Work, but
|
||||||
|
excluding communication that is conspicuously marked or otherwise
|
||||||
|
designated in writing by the copyright owner as "Not a Contribution."
|
||||||
|
|
||||||
|
"Contributor" shall mean Licensor and any individual or Legal Entity
|
||||||
|
on behalf of whom a Contribution has been received by Licensor and
|
||||||
|
subsequently incorporated within the Work.
|
||||||
|
|
||||||
|
2. Grant of Copyright License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
copyright license to reproduce, prepare Derivative Works of,
|
||||||
|
publicly display, publicly perform, sublicense, and distribute the
|
||||||
|
Work and such Derivative Works in Source or Object form.
|
||||||
|
|
||||||
|
3. Grant of Patent License. Subject to the terms and conditions of
|
||||||
|
this License, each Contributor hereby grants to You a perpetual,
|
||||||
|
worldwide, non-exclusive, no-charge, royalty-free, irrevocable
|
||||||
|
(except as stated in this section) patent license to make, have made,
|
||||||
|
use, offer to sell, sell, import, and otherwise transfer the Work,
|
||||||
|
where such license applies only to those patent claims licensable
|
||||||
|
by such Contributor that are necessarily infringed by their
|
||||||
|
Contribution(s) alone or by combination of their Contribution(s)
|
||||||
|
with the Work to which such Contribution(s) was submitted. If You
|
||||||
|
institute patent litigation against any entity (including a
|
||||||
|
cross-claim or counterclaim in a lawsuit) alleging that the Work
|
||||||
|
or a Contribution incorporated within the Work constitutes direct
|
||||||
|
or contributory patent infringement, then any patent licenses
|
||||||
|
granted to You under this License for that Work shall terminate
|
||||||
|
as of the date such litigation is filed.
|
||||||
|
|
||||||
|
4. Redistribution. You may reproduce and distribute copies of the
|
||||||
|
Work or Derivative Works thereof in any medium, with or without
|
||||||
|
modifications, and in Source or Object form, provided that You
|
||||||
|
meet the following conditions:
|
||||||
|
|
||||||
|
(a) You must give any other recipients of the Work or
|
||||||
|
Derivative Works a copy of this License; and
|
||||||
|
|
||||||
|
(b) You must cause any modified files to carry prominent notices
|
||||||
|
stating that You changed the files; and
|
||||||
|
|
||||||
|
(c) You must retain, in the Source form of any Derivative Works
|
||||||
|
that You distribute, all copyright, patent, trademark, and
|
||||||
|
attribution notices from the Source form of the Work,
|
||||||
|
excluding those notices that do not pertain to any part of
|
||||||
|
the Derivative Works; and
|
||||||
|
|
||||||
|
(d) If the Work includes a "NOTICE" text file as part of its
|
||||||
|
distribution, then any Derivative Works that You distribute must
|
||||||
|
include a readable copy of the attribution notices contained
|
||||||
|
within such NOTICE file, excluding those notices that do not
|
||||||
|
pertain to any part of the Derivative Works, in at least one
|
||||||
|
of the following places: within a NOTICE text file distributed
|
||||||
|
as part of the Derivative Works; within the Source form or
|
||||||
|
documentation, if provided along with the Derivative Works; or,
|
||||||
|
within a display generated by the Derivative Works, if and
|
||||||
|
wherever such third-party notices normally appear. The contents
|
||||||
|
of the NOTICE file are for informational purposes only and
|
||||||
|
do not modify the License. You may add Your own attribution
|
||||||
|
notices within Derivative Works that You distribute, alongside
|
||||||
|
or as an addendum to the NOTICE text from the Work, provided
|
||||||
|
that such additional attribution notices cannot be construed
|
||||||
|
as modifying the License.
|
||||||
|
|
||||||
|
You may add Your own copyright statement to Your modifications and
|
||||||
|
may provide additional or different license terms and conditions
|
||||||
|
for use, reproduction, or distribution of Your modifications, or
|
||||||
|
for any such Derivative Works as a whole, provided Your use,
|
||||||
|
reproduction, and distribution of the Work otherwise complies with
|
||||||
|
the conditions stated in this License.
|
||||||
|
|
||||||
|
5. Submission of Contributions. Unless You explicitly state otherwise,
|
||||||
|
any Contribution intentionally submitted for inclusion in the Work
|
||||||
|
by You to the Licensor shall be under the terms and conditions of
|
||||||
|
this License, without any additional terms or conditions.
|
||||||
|
Notwithstanding the above, nothing herein shall supersede or modify
|
||||||
|
the terms of any separate license agreement you may have executed
|
||||||
|
with Licensor regarding such Contributions.
|
||||||
|
|
||||||
|
6. Trademarks. This License does not grant permission to use the trade
|
||||||
|
names, trademarks, service marks, or product names of the Licensor,
|
||||||
|
except as required for reasonable and customary use in describing the
|
||||||
|
origin of the Work and reproducing the content of the NOTICE file.
|
||||||
|
|
||||||
|
7. Disclaimer of Warranty. Unless required by applicable law or
|
||||||
|
agreed to in writing, Licensor provides the Work (and each
|
||||||
|
Contributor provides its Contributions) on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
|
||||||
|
implied, including, without limitation, any warranties or conditions
|
||||||
|
of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
|
||||||
|
PARTICULAR PURPOSE. You are solely responsible for determining the
|
||||||
|
appropriateness of using or redistributing the Work and assume any
|
||||||
|
risks associated with Your exercise of permissions under this License.
|
||||||
|
|
||||||
|
8. Limitation of Liability. In no event and under no legal theory,
|
||||||
|
whether in tort (including negligence), contract, or otherwise,
|
||||||
|
unless required by applicable law (such as deliberate and grossly
|
||||||
|
negligent acts) or agreed to in writing, shall any Contributor be
|
||||||
|
liable to You for damages, including any direct, indirect, special,
|
||||||
|
incidental, or consequential damages of any character arising as a
|
||||||
|
result of this License or out of the use or inability to use the
|
||||||
|
Work (including but not limited to damages for loss of goodwill,
|
||||||
|
work stoppage, computer failure or malfunction, or any and all
|
||||||
|
other commercial damages or losses), even if such Contributor
|
||||||
|
has been advised of the possibility of such damages.
|
||||||
|
|
||||||
|
9. Accepting Warranty or Additional Liability. While redistributing
|
||||||
|
the Work or Derivative Works thereof, You may choose to offer,
|
||||||
|
and charge a fee for, acceptance of support, warranty, indemnity,
|
||||||
|
or other liability obligations and/or rights consistent with this
|
||||||
|
License. However, in accepting such obligations, You may act only
|
||||||
|
on Your own behalf and on Your sole responsibility, not on behalf
|
||||||
|
of any other Contributor, and only if You agree to indemnify,
|
||||||
|
defend, and hold each Contributor harmless for any liability
|
||||||
|
incurred by, or claims asserted against, such Contributor by reason
|
||||||
|
of your accepting any such warranty or additional liability.
|
||||||
|
|
||||||
|
END OF TERMS AND CONDITIONS
|
||||||
|
|
||||||
|
APPENDIX: How to apply the Apache License to your work.
|
||||||
|
|
||||||
|
To apply the Apache License to your work, attach the following
|
||||||
|
boilerplate notice, with the fields enclosed by brackets "[]"
|
||||||
|
replaced with your own identifying information. (Don't include
|
||||||
|
the brackets!) The text should be enclosed in the appropriate
|
||||||
|
comment syntax for the file format. We also recommend that a
|
||||||
|
file or class name and description of purpose be included on the
|
||||||
|
same "printed page" as the copyright notice for easier
|
||||||
|
identification within third-party archives.
|
||||||
|
|
||||||
|
Copyright [yyyy] [name of copyright owner]
|
||||||
|
|
||||||
|
Licensed under the Apache License, Version 2.0 (the "License");
|
||||||
|
you may not use this file except in compliance with the License.
|
||||||
|
You may obtain a copy of the License at
|
||||||
|
|
||||||
|
http://www.apache.org/licenses/LICENSE-2.0
|
||||||
|
|
||||||
|
Unless required by applicable law or agreed to in writing, software
|
||||||
|
distributed under the License is distributed on an "AS IS" BASIS,
|
||||||
|
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||||
|
See the License for the specific language governing permissions and
|
||||||
|
limitations under the License.
|
||||||
|
|
||||||
@ -0,0 +1,15 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
],
|
||||||
|
plugins: [
|
||||||
|
[
|
||||||
|
'component',
|
||||||
|
{
|
||||||
|
libraryName: 'element-ui',
|
||||||
|
styleLibraryName: 'theme-chalk'
|
||||||
|
}
|
||||||
|
]
|
||||||
|
]
|
||||||
|
}
|
||||||
|
|
||||||
@ -0,0 +1,43 @@
|
|||||||
|
{
|
||||||
|
"name": "poetry-ui",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "set NODE_OPTIONS=--openssl-legacy-provider & vue-cli-service build",
|
||||||
|
"lint": "vue-cli-service lint"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"@achrinza/node-ipc": "^10.1.10",
|
||||||
|
"axios": "^0.21.1",
|
||||||
|
"core-js": "^3.6.5",
|
||||||
|
"crypto-js": "^4.1.1",
|
||||||
|
"element-ui": "^2.4.5",
|
||||||
|
"markdown-it": "^12.2.0",
|
||||||
|
"mavon-editor": "^2.9.1",
|
||||||
|
"qs": "^6.10.3",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-baberrage": "^3.2.4",
|
||||||
|
"vue-router": "^3.2.0",
|
||||||
|
"vue-seamless-scroll": "^1.1.23",
|
||||||
|
"vuex": "^3.4.0"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-eslint": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-router": "~4.5.0",
|
||||||
|
"@vue/cli-plugin-vuex": "~4.5.0",
|
||||||
|
"@vue/cli-service": "~4.5.0",
|
||||||
|
"@vue/eslint-config-standard": "^5.1.2",
|
||||||
|
"babel-eslint": "^10.1.0",
|
||||||
|
"babel-plugin-component": "^1.1.1",
|
||||||
|
"eslint": "^6.7.2",
|
||||||
|
"eslint-plugin-import": "^2.20.2",
|
||||||
|
"eslint-plugin-node": "^11.1.0",
|
||||||
|
"eslint-plugin-promise": "^4.2.1",
|
||||||
|
"eslint-plugin-standard": "^4.0.0",
|
||||||
|
"eslint-plugin-vue": "^6.2.2",
|
||||||
|
"vue-cli-plugin-element": "^1.0.1",
|
||||||
|
"vue-template-compiler": "^2.6.11"
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,29 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<link rel="icon" href="./poetize.jpg" sizes="16x16">
|
||||||
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<title>药药相互</title>
|
||||||
|
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcss.com/animejs/2.2.0/anime.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/highlight.js/11.2.0/highlight.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/wow/1.1.2/wow.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/highlightjs-line-numbers.js/2.8.0/highlightjs-line-numbers.min.js"></script>
|
||||||
|
<script src="https://cdn.bootcdn.net/ajax/libs/clipboard.js/2.0.8/clipboard.js"></script>
|
||||||
|
<script src="https://cdnjs.cloudflare.com/ajax/libs/qiniu-js/3.4.0/qiniu.min.js"></script>
|
||||||
|
<style>
|
||||||
|
body {
|
||||||
|
margin: 0;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="app"></div>
|
||||||
|
</body>
|
||||||
|
<script>
|
||||||
|
new WOW().init();
|
||||||
|
</script>
|
||||||
|
</html>
|
||||||
|
After Width: | Height: | Size: 39 KiB |
@ -0,0 +1,32 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<router-view/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
|
|
||||||
@ -0,0 +1,211 @@
|
|||||||
|
/* 以my-animation-开头的class */
|
||||||
|
[class*=my-animation-] {
|
||||||
|
animation-duration: 1s;
|
||||||
|
animation-timing-function: ease-out;
|
||||||
|
animation-fill-mode: both;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.my-animation-slide-top {
|
||||||
|
animation-name: slide-top
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-animation-slide-bottom {
|
||||||
|
animation-name: slide-bottom
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-animation-hideToShow {
|
||||||
|
animation-name: hideToShow
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 上移 */
|
||||||
|
@keyframes slide-top {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-20%)
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下移 */
|
||||||
|
@keyframes slide-bottom {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(20%)
|
||||||
|
}
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 首图动画：下移 */
|
||||||
|
@keyframes header-effect {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translateY(-50px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 旋转 */
|
||||||
|
@keyframes rotate {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(0deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 显示 */
|
||||||
|
@keyframes hideToShow {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 下移 */
|
||||||
|
@keyframes my-shake {
|
||||||
|
0% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
|
||||||
|
30% {
|
||||||
|
opacity: 0.5;
|
||||||
|
transform: translateY(25px);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translateY(0px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 上移 */
|
||||||
|
@keyframes scatter {
|
||||||
|
0% {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
top: -15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 放大 */
|
||||||
|
@keyframes scale {
|
||||||
|
0% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 放大 */
|
||||||
|
@keyframes imgScale {
|
||||||
|
0% {
|
||||||
|
transform: scale(0.8, 0.8);
|
||||||
|
}
|
||||||
|
|
||||||
|
70% {
|
||||||
|
transform: scale(1.3, 1.3);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: scale(0.8, 0.8);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 渐变 */
|
||||||
|
@keyframes jianBian {
|
||||||
|
to {
|
||||||
|
background-position: -2000rem;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景位置移动 */
|
||||||
|
@keyframes gradientBG {
|
||||||
|
0% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
background-position: 100% 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
background-position: 0 50%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 阴影变化 */
|
||||||
|
@keyframes weiYanShadowFlashing {
|
||||||
|
0% {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
box-shadow: 0 0 15px var(--red);
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
box-shadow: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 有小变大 */
|
||||||
|
@keyframes zoomIn {
|
||||||
|
0% {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale3d(.3, .3, .3);
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 由左开向右 */
|
||||||
|
@keyframes passing {
|
||||||
|
0% {
|
||||||
|
transform: translateX(-150%);
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
|
||||||
|
50% {
|
||||||
|
transform: translateX(0);
|
||||||
|
opacity: 1
|
||||||
|
}
|
||||||
|
|
||||||
|
100% {
|
||||||
|
transform: translateX(150%);
|
||||||
|
opacity: 0
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,88 @@
|
|||||||
|
:root {
|
||||||
|
/* 背景 */
|
||||||
|
--background: white;
|
||||||
|
--gradualBackground: linear-gradient(to right bottom, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||||
|
--favoriteBg: #f7f9fe;
|
||||||
|
|
||||||
|
/* 字体 */
|
||||||
|
--fontColor: black;
|
||||||
|
/* 边框 */
|
||||||
|
--borderColor: rgba(0, 0, 0, 0.5);
|
||||||
|
/* 边框 */
|
||||||
|
--borderHoverColor: rgba(110, 110, 110, 0.4);
|
||||||
|
/* 文章字体 */
|
||||||
|
--articleFontColor: #1f1f1f;
|
||||||
|
/* 文章灰色字体 */
|
||||||
|
--articleGreyFontColor: #616161;
|
||||||
|
/* 评论背景颜色 */
|
||||||
|
--commentContent: #F7F9FE;
|
||||||
|
|
||||||
|
|
||||||
|
/* 主题背景 */
|
||||||
|
--themeBackground: orange;
|
||||||
|
/* 主题悬停背景 */
|
||||||
|
--gradualRed: linear-gradient(to right, #ff4b2b, #ff416c);
|
||||||
|
|
||||||
|
/* 导航栏字体 */
|
||||||
|
--toolbarFont: #333333;
|
||||||
|
/* 导航栏背景 */
|
||||||
|
--toolbarBackground: rgba(255, 255, 255, 1);
|
||||||
|
/* 灰色字体 */
|
||||||
|
--greyFont: #797979;
|
||||||
|
--maxGreyFont: #595A5A;
|
||||||
|
/* footer背景 */
|
||||||
|
--gradientBG: linear-gradient(-90deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
|
||||||
|
|
||||||
|
|
||||||
|
/* 白色遮罩 */
|
||||||
|
--whiteMask: rgba(255, 255, 255, 0.3);
|
||||||
|
/* max白色遮罩 */
|
||||||
|
--maxWhiteMask: rgba(255, 255, 255, 0.5);
|
||||||
|
--maxMaxWhiteMask: rgba(255, 255, 255, 0.7);
|
||||||
|
/* mini白色遮罩 */
|
||||||
|
--miniWhiteMask: rgba(255, 255, 255, 0.15);
|
||||||
|
/* 透明 */
|
||||||
|
--transparent: rgba(0, 0, 0, 0);
|
||||||
|
/* mini黑色遮罩 */
|
||||||
|
--miniMask: rgba(0, 0, 0, 0.15);
|
||||||
|
/* 黑色遮罩 */
|
||||||
|
--mask: rgba(0, 0, 0, 0.3);
|
||||||
|
/* 半透明 */
|
||||||
|
--translucent: rgba(0, 0, 0, 0.5);
|
||||||
|
/* 深黑遮罩 */
|
||||||
|
--maxMask: rgba(0, 0, 0, 0.7);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
--white: white;
|
||||||
|
|
||||||
|
--red: red;
|
||||||
|
--lightRed: #ff4b2b;
|
||||||
|
--maxLightRed: #ff416c;
|
||||||
|
--orangeRed: #EF794F;
|
||||||
|
|
||||||
|
--azure: #ECF7FE;
|
||||||
|
--blue: rgb(3, 169, 244);
|
||||||
|
|
||||||
|
--lightGray: #DDDDDD;
|
||||||
|
--maxLightGray: #EEEEEE;
|
||||||
|
--maxMaxLightGray: rgba(242, 242, 242, 0.5);
|
||||||
|
|
||||||
|
--lightGreen: #39c5bb;
|
||||||
|
|
||||||
|
--green: #67C23A;
|
||||||
|
--black: black;
|
||||||
|
--lightYellow: #F4E1C0;
|
||||||
|
|
||||||
|
--globalFont: SmileySans;
|
||||||
|
|
||||||
|
--commentURL: url(../file/comment.jpg);
|
||||||
|
--springBg: url(../file/bg1.jpg);
|
||||||
|
--admireImage: url(../file/bg2.jpg);
|
||||||
|
--toTop: url(../file/top.jpg);
|
||||||
|
--bannerWave1: url(../file/bannerwave1.png) repeat-x;
|
||||||
|
--bannerWave2: url(../file/bannerwave2.png) repeat-x;
|
||||||
|
--verifyImage: url(../file/bg1.jpg);
|
||||||
|
--toolbar: url(../file/bg.jpg);
|
||||||
|
--love: url(../file/bg.jpg);
|
||||||
|
}
|
||||||
File diff suppressed because one or more lines are too long
@ -0,0 +1,334 @@
|
|||||||
|
/* 通用css */
|
||||||
|
* {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
body {
|
||||||
|
color: var(--fontColor);
|
||||||
|
font-family: var(--globalFont), serif;
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
@font-face {
|
||||||
|
font-family: SmileySans;
|
||||||
|
src: url(../fonts/SmileySans.otf);
|
||||||
|
font-display: swap;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图片 */
|
||||||
|
.background-image {
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
/* 固定位置，不随滚动条滚动 */
|
||||||
|
position: fixed;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-image::before {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: rgba(0, 0, 0, .2);
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.background-image-error {
|
||||||
|
background-color: var(--lightGreen);
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
/* 固定位置，不随滚动条滚动 */
|
||||||
|
position: fixed;
|
||||||
|
z-index: -1;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 模块化背景色及透明度 */
|
||||||
|
.background-opacity {
|
||||||
|
background-color: var(--background);
|
||||||
|
opacity: 0.88;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-el-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-el-image .image-slot {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 遮罩 */
|
||||||
|
.poem-image::before {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--translucent);
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar {
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.3s;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.user-avatar:hover {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 滚动条 */
|
||||||
|
::-webkit-scrollbar {
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-track {
|
||||||
|
background-color: rgba(73, 177, 245, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
::-webkit-scrollbar-thumb {
|
||||||
|
background-color: #49b1f5;
|
||||||
|
background-image: linear-gradient(
|
||||||
|
45deg,
|
||||||
|
rgba(255, 255, 255, 0.4) 25%,
|
||||||
|
transparent 25%,
|
||||||
|
transparent 50%,
|
||||||
|
rgba(255, 255, 255, 0.4) 50%,
|
||||||
|
rgba(255, 255, 255, 0.4) 75%,
|
||||||
|
transparent 75%,
|
||||||
|
transparent
|
||||||
|
);
|
||||||
|
border-radius: 1em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-select-dropdown.el-popper ::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 选中样式 */
|
||||||
|
::selection {
|
||||||
|
background: var(--lightYellow);
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 居中 */
|
||||||
|
.myCenter {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.transformCenter {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 50%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 两边 */
|
||||||
|
.myBetween {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 阴影 */
|
||||||
|
.shadow-box-mini {
|
||||||
|
box-shadow: 1px 1px 3px var(--mask);
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-box {
|
||||||
|
box-shadow: 0 1px 20px -6px var(--borderColor);
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.shadow-box:hover {
|
||||||
|
box-shadow: 0 5px 10px 5px var(--borderHoverColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* el弹出框样式 */
|
||||||
|
.el-message {
|
||||||
|
top: 80px !important;
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message * {
|
||||||
|
color: var(--white) !important;
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message--success {
|
||||||
|
background: var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message--warning {
|
||||||
|
background: var(--gradientBG);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-message--error {
|
||||||
|
background: var(--gradualRed);
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 看板娘 */
|
||||||
|
#waifu-toggle, #waifu {
|
||||||
|
z-index: 100;
|
||||||
|
}
|
||||||
|
|
||||||
|
#waifu-tips {
|
||||||
|
border: unset;
|
||||||
|
animation: unset;
|
||||||
|
width: 200px;
|
||||||
|
min-height: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#waifu-tool {
|
||||||
|
right: -10px;
|
||||||
|
bottom: 20px;
|
||||||
|
top: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
#waifu #live2d {
|
||||||
|
height: 250px;
|
||||||
|
width: 250px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 图标旋转 */
|
||||||
|
.iconRotate {
|
||||||
|
animation: rotate 2s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 树洞留言 */
|
||||||
|
.baberrage-item .baberrage-msg {
|
||||||
|
padding-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.baberrage-item .normal .baberrage-avatar img {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
.el-upload.el-upload--picture, .el-upload.el-upload--text {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-upload-dragger {
|
||||||
|
width: 100% !important;
|
||||||
|
height: 100px !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 导航栏 */
|
||||||
|
.toolbarDrawer {
|
||||||
|
position: relative;
|
||||||
|
background: var(--toolbar) center center / cover no-repeat;
|
||||||
|
letter-spacing: 3px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbarDrawer .el-drawer__header {
|
||||||
|
font-size: 22px;
|
||||||
|
color: var(--white);
|
||||||
|
text-align: center;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toolbarDrawer::before {
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--maxMask);
|
||||||
|
content: "";
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-menu {
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 20px;
|
||||||
|
user-select: none;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.small-menu > li {
|
||||||
|
list-style: none;
|
||||||
|
height: 50px;
|
||||||
|
line-height: 50px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tooltip__popper.is-light {
|
||||||
|
background: var(--lightGreen);
|
||||||
|
border-radius: 10px;
|
||||||
|
color: var(--white);
|
||||||
|
padding: 12px 20px;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-weight: 600;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 1.2rem;
|
||||||
|
border: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tooltip__popper .popper__arrow {
|
||||||
|
border-style: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 800px) {
|
||||||
|
.el-dialog {
|
||||||
|
width: 70% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.el-dialog {
|
||||||
|
width: 80% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.el-dialog {
|
||||||
|
width: 90% !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 背景*/
|
||||||
|
.dark-mode-sky,
|
||||||
|
.dark-mode-sky::before{
|
||||||
|
content: "";
|
||||||
|
position: fixed;
|
||||||
|
width: 100vw;
|
||||||
|
height: 100vh;
|
||||||
|
/* 固定位置，不随滚动条滚动 */
|
||||||
|
position: fixed;
|
||||||
|
z-index: -1;
|
||||||
|
transition: 2s ease all;
|
||||||
|
}
|
||||||
|
.dark-mode-sky{
|
||||||
|
background: linear-gradient(#fcd5ce,#f8edeb);
|
||||||
|
}
|
||||||
|
.dark-mode-sky::before{
|
||||||
|
opacity: 0;
|
||||||
|
background: linear-gradient(#001233,#002855,#0466c8);
|
||||||
|
}
|
||||||
|
.dark-mode .dark-mode-sky::before{
|
||||||
|
opacity: 1;
|
||||||
|
}
|
||||||
|
/*日月*/
|
||||||
|
.dark-mode-planet {
|
||||||
|
z-index: 19999999999;
|
||||||
|
position: fixed;
|
||||||
|
left: -50%;
|
||||||
|
top: -50%;
|
||||||
|
width: 200%;
|
||||||
|
height: 200%;
|
||||||
|
transition: 2s cubic-bezier(.7,0,0,1) all;
|
||||||
|
transform-origin: center bottom;
|
||||||
|
}
|
||||||
|
.dark-mode-planet::after{
|
||||||
|
position: absolute;
|
||||||
|
left: 35%;
|
||||||
|
top: 40%;
|
||||||
|
width: 150px;
|
||||||
|
height: 150px;
|
||||||
|
border-radius: 50%;
|
||||||
|
content: "";
|
||||||
|
background: linear-gradient(#ffffff,#f1f3b7);
|
||||||
|
}
|
||||||
@ -0,0 +1,380 @@
|
|||||||
|
/* markdown样式 */
|
||||||
|
.entry-content {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content blockquote {
|
||||||
|
margin: 0;
|
||||||
|
padding: 15px 50px;
|
||||||
|
position: relative;
|
||||||
|
word-break: break-word;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content blockquote:before {
|
||||||
|
content: "\f10d";
|
||||||
|
font-size: 1.5rem;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
color: orange;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content blockquote:after {
|
||||||
|
content: '\f10e';
|
||||||
|
font-size: 1.5rem;
|
||||||
|
position: absolute;
|
||||||
|
bottom: 0;
|
||||||
|
right: 0;
|
||||||
|
color: orange;
|
||||||
|
font-family: FontAwesome;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content code:not(.hljs) {
|
||||||
|
background: #fefac7;
|
||||||
|
color: #e67474;
|
||||||
|
word-break: break-word;
|
||||||
|
padding: 4px 6px;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content ul {
|
||||||
|
list-style: disc;
|
||||||
|
padding: 0 10px 0 35px;
|
||||||
|
color: var(--articleGreyFontColor);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content ol {
|
||||||
|
list-style: decimal;
|
||||||
|
padding: 0 10px 0 35px;
|
||||||
|
color: var(--articleGreyFontColor);
|
||||||
|
border-radius: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content ol li,
|
||||||
|
.entry-content ul li {
|
||||||
|
padding: 8px 0;
|
||||||
|
Letter-spacing: 1px;
|
||||||
|
line-height: 24px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h3 {
|
||||||
|
padding-bottom: 8px;
|
||||||
|
border-bottom: 1px dashed #ddd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h1,
|
||||||
|
.entry-content h2,
|
||||||
|
.entry-content h2,
|
||||||
|
.entry-content h3,
|
||||||
|
.entry-content h4 {
|
||||||
|
margin-top: 30px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h2 {
|
||||||
|
padding-left: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h3 {
|
||||||
|
padding-left: 20px;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h4 {
|
||||||
|
padding-left: 20px;
|
||||||
|
font-size: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h5 {
|
||||||
|
font-size: 18px;
|
||||||
|
padding-left: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h2:before {
|
||||||
|
content: "🌺";
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
font-size: 1.03em;
|
||||||
|
margin-top: -2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h3:before {
|
||||||
|
content: "#";
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
margin-top: 2px;
|
||||||
|
color: #ff6d6d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h4:before {
|
||||||
|
content: "▌";
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
color: #ff6d6d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content h5:before {
|
||||||
|
content: "🌷";
|
||||||
|
left: 0;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content a {
|
||||||
|
color: #e67474;
|
||||||
|
position: relative;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content a:hover {
|
||||||
|
color: orange;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content a:after {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
transform: scaleX(0);
|
||||||
|
height: 1.5px;
|
||||||
|
bottom: -2px;
|
||||||
|
left: 0;
|
||||||
|
background-color: orange;
|
||||||
|
transform-origin: bottom right;
|
||||||
|
transition: transform 0.25s ease-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content a:hover:after {
|
||||||
|
transform: scaleX(1);
|
||||||
|
transform-origin: bottom left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content p {
|
||||||
|
color: var(--articleFontColor);
|
||||||
|
line-height: 35px;
|
||||||
|
word-break: break-word;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content hr {
|
||||||
|
margin-top: 20px;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
border: 0.5px dashed #fc625d;
|
||||||
|
}
|
||||||
|
|
||||||
|
.entry-content img {
|
||||||
|
max-width: 100%;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 高亮代码块 */
|
||||||
|
.highlight-wrap {
|
||||||
|
position: relative;
|
||||||
|
background: #21252b;
|
||||||
|
border-radius: 5px;
|
||||||
|
font: 15px/22px "Microsoft YaHei", "Arial";
|
||||||
|
line-height: 1.6;
|
||||||
|
margin-bottom: 1.6em;
|
||||||
|
width: 100%;
|
||||||
|
padding-top: 30px;
|
||||||
|
box-shadow: 0 10px 30px 0 rgba(0, 0, 0, 0.4);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap:before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
border-radius: 50%;
|
||||||
|
background: #fc625d;
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
left: 12px;
|
||||||
|
margin-top: -18px;
|
||||||
|
box-shadow: 20px 0 #fdbc40, 40px 0 #35cd4b;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap .copy-code {
|
||||||
|
color: #fff;
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: 5px;
|
||||||
|
font-size: 16px;
|
||||||
|
z-index: 2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap .copy-code:hover {
|
||||||
|
color: rgba(255, 255, 255, 0.5);
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap code::-webkit-scrollbar {
|
||||||
|
height: 6px;
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap code {
|
||||||
|
word-break: break-word;
|
||||||
|
border-radius: 0 0 5px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.highlight-wrap code[data-rel]:before {
|
||||||
|
color: #fff;
|
||||||
|
content: attr(data-rel);
|
||||||
|
height: 30px;
|
||||||
|
line-height: 23px;
|
||||||
|
background: #21252b;
|
||||||
|
font-size: 16px;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
margin-top: -30px;
|
||||||
|
width: 100%;
|
||||||
|
font-family: Ubuntu;
|
||||||
|
font-weight: 700;
|
||||||
|
text-align: center;
|
||||||
|
pointer-events: none;
|
||||||
|
z-index: 1;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs {
|
||||||
|
color: #a9b7c6;
|
||||||
|
background: #1d1f21;
|
||||||
|
display: block;
|
||||||
|
overflow-x: auto;
|
||||||
|
padding: 0.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln-line span::selection,
|
||||||
|
.hljs-ln-line::selection {
|
||||||
|
background: #fff;
|
||||||
|
color: #21252b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln {
|
||||||
|
margin: 6px 0 0;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln-line.hljs-ln-code {
|
||||||
|
padding-left: 25px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln-line.hljs-ln-code:hover {
|
||||||
|
background-color: rgba(255, 255, 255, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-ln-line.hljs-ln-numbers {
|
||||||
|
user-select: none;
|
||||||
|
text-align: center;
|
||||||
|
color: #888f96;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
width: 30px;
|
||||||
|
background: #1d1f21;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-comment,
|
||||||
|
.hljs-quote {
|
||||||
|
color: #888f96;
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-doctag,
|
||||||
|
.hljs-formula,
|
||||||
|
.hljs-keyword {
|
||||||
|
color: #c678dd;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-deletion,
|
||||||
|
.hljs-name,
|
||||||
|
.hljs-section,
|
||||||
|
.hljs-selector-tag,
|
||||||
|
.hljs-subst {
|
||||||
|
color: #e06c75;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-literal {
|
||||||
|
color: #56b6c2;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-addition,
|
||||||
|
.hljs-attribute,
|
||||||
|
.hljs-meta-string,
|
||||||
|
.hljs-regexp,
|
||||||
|
.hljs-string {
|
||||||
|
color: #98c379;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-built_in,
|
||||||
|
.hljs-class .hljs-title {
|
||||||
|
color: #e6c07b;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-attr,
|
||||||
|
.hljs-number,
|
||||||
|
.hljs-selector-attr,
|
||||||
|
.hljs-selector-class,
|
||||||
|
.hljs-selector-pseudo,
|
||||||
|
.hljs-template-variable,
|
||||||
|
.hljs-type,
|
||||||
|
.hljs-variable {
|
||||||
|
color: #d19a66;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-bullet,
|
||||||
|
.hljs-link,
|
||||||
|
.hljs-meta,
|
||||||
|
.hljs-selector-id,
|
||||||
|
.hljs-symbol,
|
||||||
|
.hljs-title {
|
||||||
|
color: #61aeee;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-emphasis {
|
||||||
|
font-style: italic;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-strong {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
|
||||||
|
.hljs-link {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
/* 表格 */
|
||||||
|
.table-wrapper::-webkit-scrollbar {
|
||||||
|
height: 6px;
|
||||||
|
width: 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table th {
|
||||||
|
background-color: rgba(0, 0, 0, 0.1);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table tr:nth-child(2n) {
|
||||||
|
background-color: #f8f8f8;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table td,
|
||||||
|
.table-wrapper > table th {
|
||||||
|
padding: 8px 16px;
|
||||||
|
border: 1px solid #dfe2e5;
|
||||||
|
line-height: 1.5;
|
||||||
|
font-size: 90%;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table tbody > tr {
|
||||||
|
transition: all 0.28s ease;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-wrapper > table tbody > tr:hover {
|
||||||
|
background-color: rgba(0, 0, 0, 0.2);
|
||||||
|
}
|
||||||
@ -0,0 +1,66 @@
|
|||||||
|
.toc {
|
||||||
|
overflow-y: auto;
|
||||||
|
width: 150px;
|
||||||
|
max-height: 300px;
|
||||||
|
position: fixed;
|
||||||
|
top: 50vh;
|
||||||
|
right: 50px;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 5px;
|
||||||
|
z-index: 100;
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc::-webkit-scrollbar {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc > .toc-list {
|
||||||
|
overflow: hidden;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc > .toc-list li {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .toc-list {
|
||||||
|
margin: 0;
|
||||||
|
padding: 4px 4px 4px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc a.toc-link {
|
||||||
|
color: currentColor;
|
||||||
|
height: 100%;
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .is-collapsible {
|
||||||
|
max-height: 1000px;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: all 300ms ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .is-collapsed {
|
||||||
|
max-height: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .is-active-link {
|
||||||
|
font-weight: 700;
|
||||||
|
color: var(--green) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .toc-link::before {
|
||||||
|
background-color: #EEE;
|
||||||
|
content: ' ';
|
||||||
|
display: inline-block;
|
||||||
|
height: inherit;
|
||||||
|
left: 0;
|
||||||
|
margin-top: -1px;
|
||||||
|
position: absolute;
|
||||||
|
width: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.toc .is-active-link::before {
|
||||||
|
background-color: var(--green);
|
||||||
|
}
|
||||||
|
After Width: | Height: | Size: 5.0 KiB |
|
After Width: | Height: | Size: 4.8 KiB |
|
After Width: | Height: | Size: 3.9 MiB |
|
After Width: | Height: | Size: 893 KiB |
|
After Width: | Height: | Size: 146 KiB |
|
After Width: | Height: | Size: 72 KiB |
|
After Width: | Height: | Size: 7.7 KiB |
|
After Width: | Height: | Size: 54 KiB |
|
After Width: | Height: | Size: 555 KiB |
|
After Width: | Height: | Size: 155 KiB |
|
After Width: | Height: | Size: 13 KiB |
|
After Width: | Height: | Size: 62 KiB |
|
After Width: | Height: | Size: 8.4 KiB |
|
After Width: | Height: | Size: 3.5 KiB |
|
After Width: | Height: | Size: 7.6 KiB |
|
After Width: | Height: | Size: 17 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
|
After Width: | Height: | Size: 434 KiB |
Binary file not shown.
Binary file not shown.
Binary file not shown.
@ -0,0 +1,61 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<myHeader></myHeader>
|
||||||
|
<sidebar></sidebar>
|
||||||
|
<div class="content-box">
|
||||||
|
<div class="content">
|
||||||
|
<router-view></router-view>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import myHeader from "./common/myHeader.vue";
|
||||||
|
import sidebar from "./common/sidebar.vue";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
myHeader,
|
||||||
|
sidebar
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.content-box {
|
||||||
|
position: absolute;
|
||||||
|
left: 200px;
|
||||||
|
right: 0;
|
||||||
|
top: 70px;
|
||||||
|
bottom: 0;
|
||||||
|
transition: left .3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.content {
|
||||||
|
width: auto;
|
||||||
|
height: 100%;
|
||||||
|
padding: 30px;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,159 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="margin-bottom: 20px">
|
||||||
|
<el-select v-if="isBoss" v-model="pagination.commentType" placeholder="评论来源类型" style="margin-right: 10px">
|
||||||
|
<el-option key="1" label="文章评论" value="article"></el-option>
|
||||||
|
<el-option key="2" label="树洞留言" value="message"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-input class="my-input" type="number" style="width: 140px;margin-right: 10px" v-model="pagination.source"
|
||||||
|
placeholder="评论来源标识"></el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="searchComments()">搜索</el-button>
|
||||||
|
<el-button type="danger" @click="clearSearch()">清除参数</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="comments" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="source" label="评论来源标识" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="type" label="评论来源类型" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="userId" label="发表用户ID" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="likeCount" label="点赞数" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="commentContent" label="评论内容" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="commentInfo" label="评论额外信息" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination background layout="total, prev, pager, next"
|
||||||
|
:current-page="pagination.current"
|
||||||
|
:page-size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
@current-change="handlePageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isBoss: this.$store.state.currentAdmin.isBoss,
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
source: null,
|
||||||
|
commentType: ""
|
||||||
|
},
|
||||||
|
comments: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getComments();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
clearSearch() {
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
source: null,
|
||||||
|
commentType: ""
|
||||||
|
}
|
||||||
|
this.getComments();
|
||||||
|
},
|
||||||
|
getComments() {
|
||||||
|
let url = "";
|
||||||
|
if (this.isBoss) {
|
||||||
|
url = "/admin/comment/boss/list";
|
||||||
|
} else {
|
||||||
|
url = "/admin/comment/user/list";
|
||||||
|
}
|
||||||
|
this.$http.post(this.$constant.baseURL + url, this.pagination, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.comments = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getComments();
|
||||||
|
},
|
||||||
|
searchComments() {
|
||||||
|
this.pagination.total = 0;
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getComments();
|
||||||
|
},
|
||||||
|
handleDelete(item) {
|
||||||
|
let url = "";
|
||||||
|
if (this.isBoss) {
|
||||||
|
url = "/admin/comment/boss/deleteComment";
|
||||||
|
} else {
|
||||||
|
url = "/admin/comment/user/deleteComment";
|
||||||
|
}
|
||||||
|
this.$confirm('删除评论后，所有该评论的回复均不可见。确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + url, {id: item.id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getComments();
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-input >>> input::-webkit-inner-spin-button {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,116 @@
|
|||||||
|
<template>
|
||||||
|
<div class="my-header myBetween">
|
||||||
|
<div class="logo">后台管理</div>
|
||||||
|
<div class="header-right">
|
||||||
|
<div class="admin-index" @click="$router.push({path: '/'})">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="25" height="25" style="vertical-align: -6px;">
|
||||||
|
<path d="M221.4 152.6h141.8V396h-141.8V152.6z" fill="#FAD996"></path>
|
||||||
|
<path
|
||||||
|
d="M363.4 152.6c-9-16.6-138.2-14.2-142 0-3 11.4-23.6 287 15.8 182.4 10.4-27.4 22.6-47.6 37.2-78.6 10.6-22.6 22-42.4 32.6-54.4 16.6-18.6 18 9.6 33.6 22.6 41.6 34.4 31.8-55.6 22.8-72z"
|
||||||
|
fill="#F9F8F7"></path>
|
||||||
|
<path
|
||||||
|
d="M834.2 851c0 24.8-20.2 45-45 45H234.8c-24.8 0-45-20.2-45-45v-370h1.2l321.2-270 321.2 270h0.6l0.2 370z"
|
||||||
|
fill="#FAD996"></path>
|
||||||
|
<path d="M833.4 481l-321.2-270-1.8 1.6V896h278.8c24.8 0 45-20.2 45-45l-0.2-370h-0.6z"
|
||||||
|
fill="#F7C872"></path>
|
||||||
|
<path
|
||||||
|
d="M62 548L432.6 166.2s81.2-90.6 171.8 0c79 79 343.6 400 343.6 400s-55.4 41-125.2 14.2c-37.8-14.4-118.2-68-133.4-150.8-11-60.2-45.8 29-60.8-38.2-9.4-42.2-67.2-96.6-67.2-96.6s-48.4-55.4-100.2 0c-13.8 14.8-11.4 134.6-44 128-26.4-5.2-20-105.6-27-81.2-9.6 33-25 61-54.4 47.2-33.2-15.6-42.4 79.6-64.8 112.8-17.2 25.4-23.8-45.8-40.4-29.2-21.2 21-2.4 94-39.4 108s-132.8-2-129.2-32.4z"
|
||||||
|
fill="#F9F8F7"></path>
|
||||||
|
<path
|
||||||
|
d="M512 126.2v144c28.8 1 49.4 24.6 49.4 24.6s57.8 54.4 67.2 96.6c15 67.2 49.8-22 60.8 38.2 15.2 82.8 95.6 136.4 133.4 150.8 69.8 26.8 125.2-14.2 125.2-14.2s-264.6-321-343.6-400c-33.2-33.2-65.2-42-92.4-40z"
|
||||||
|
fill="#EFEBE8"></path>
|
||||||
|
<path d="M405.2 495h99.8v99.8h-99.8v-99.8zM405.2 609.2h99.8v99.8h-99.8v-99.8z" fill="#FB8A5D"></path>
|
||||||
|
<path d="M519 495h99.8v99.8h-99.8v-99.8zM519 609.2h99.8v99.8h-99.8v-99.8z" fill="#EA6D4B"></path>
|
||||||
|
</svg>
|
||||||
|
<span> 首页</span>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--头像-->
|
||||||
|
<div class="header-user-con">
|
||||||
|
<el-dropdown placement="bottom">
|
||||||
|
<el-avatar class="user-avatar" :size="40"
|
||||||
|
:src="$store.state.currentAdmin.avatar">
|
||||||
|
</el-avatar>
|
||||||
|
<el-dropdown-menu slot="dropdown">
|
||||||
|
<el-dropdown-item @click.native="logout()">退出</el-dropdown-item>
|
||||||
|
</el-dropdown-menu>
|
||||||
|
</el-dropdown>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
logout() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/user/logout", {}, true)
|
||||||
|
.then((res) => {
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.$store.commit("loadCurrentAdmin", {});
|
||||||
|
localStorage.removeItem("adminToken");
|
||||||
|
this.$router.push({path: '/'});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.my-header {
|
||||||
|
position: relative;
|
||||||
|
width: 100%;
|
||||||
|
height: 70px;
|
||||||
|
color: black;
|
||||||
|
background-color: #ebf1f6;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-header .logo {
|
||||||
|
line-height: 70px;
|
||||||
|
margin-left: 70PX;
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-right {
|
||||||
|
display: flex;
|
||||||
|
justify-content: flex-end;
|
||||||
|
margin-right: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.admin-index {
|
||||||
|
height: 70px;
|
||||||
|
line-height: 70px;
|
||||||
|
font-size: 15px;
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.header-user-con {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,147 @@
|
|||||||
|
<template>
|
||||||
|
<div class="sidebar">
|
||||||
|
<el-menu class="sidebar-el-menu"
|
||||||
|
background-color="#ebf1f6"
|
||||||
|
text-color="#606266"
|
||||||
|
active-text-color="#20a0ff"
|
||||||
|
unique-opened
|
||||||
|
router>
|
||||||
|
<template v-for="item in items">
|
||||||
|
<template v-if="isBoss || !item.isBoss">
|
||||||
|
<template v-if="item.subs">
|
||||||
|
<el-submenu :index="item.index" :key="item.index">
|
||||||
|
<template slot="title">
|
||||||
|
<i :class="item.icon"></i>
|
||||||
|
<span>{{ item.title }}</span>
|
||||||
|
</template>
|
||||||
|
<template v-for="subItem in item.subs">
|
||||||
|
<el-submenu v-if="subItem.subs" :index="subItem.index" :key="subItem.index">
|
||||||
|
<template slot="title">
|
||||||
|
{{ subItem.title }}
|
||||||
|
</template>
|
||||||
|
<el-menu-item v-for="threeItem in subItem.subs" :key="threeItem.index" :index="threeItem.index">
|
||||||
|
{{ threeItem.title }}
|
||||||
|
</el-menu-item>
|
||||||
|
</el-submenu>
|
||||||
|
<el-menu-item v-else :index="subItem.index" :key="subItem.index">
|
||||||
|
{{ subItem.title }}
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</el-submenu>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<template v-else>
|
||||||
|
<el-menu-item :index="item.index" :key="item.index">
|
||||||
|
<i :class="item.icon"></i>
|
||||||
|
{{ item.title }}
|
||||||
|
</el-menu-item>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</el-menu>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isBoss: this.$store.state.currentAdmin.isBoss,
|
||||||
|
items: [{
|
||||||
|
icon: "el-icon-s-home",
|
||||||
|
index: "/main",
|
||||||
|
title: "系统首页",
|
||||||
|
isBoss: true
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-s-tools",
|
||||||
|
index: "/webEdit",
|
||||||
|
title: "网站设置",
|
||||||
|
isBoss: true
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-user-solid",
|
||||||
|
index: "/userList",
|
||||||
|
title: "用户管理",
|
||||||
|
isBoss: true
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-first-aid-kit",
|
||||||
|
index: "/drugReaction",
|
||||||
|
title: "药品管理",
|
||||||
|
isBoss: false
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-postcard",
|
||||||
|
index: "/postList",
|
||||||
|
title: "文章管理",
|
||||||
|
isBoss: false
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-notebook-2",
|
||||||
|
index: "/sortList",
|
||||||
|
title: "分类管理",
|
||||||
|
isBoss: true
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-edit-outline",
|
||||||
|
index: "/commentList",
|
||||||
|
title: "评论管理",
|
||||||
|
isBoss: false
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-s-comment",
|
||||||
|
index: "/treeHoleList",
|
||||||
|
title: "留言管理",
|
||||||
|
isBoss: true
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-paperclip",
|
||||||
|
index: "/resourceList",
|
||||||
|
title: "资源管理",
|
||||||
|
isBoss: true
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-bank-card",
|
||||||
|
index: "/resourcePathList",
|
||||||
|
title: "资源路径管理",
|
||||||
|
isBoss: true
|
||||||
|
}, {
|
||||||
|
icon: "el-icon-sugar",
|
||||||
|
index: "/loveList",
|
||||||
|
title: "科研项目管理",
|
||||||
|
isBoss: true
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.sidebar {
|
||||||
|
display: block;
|
||||||
|
position: absolute;
|
||||||
|
left: 0;
|
||||||
|
top: 70px;
|
||||||
|
bottom: 0;
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar::-webkit-scrollbar {
|
||||||
|
width: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar-el-menu {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.sidebar > ul {
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,324 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="handle-box">
|
||||||
|
<el-input v-model="queryParams.drug1" placeholder="药品A名称" class="handle-input mrb10"></el-input>
|
||||||
|
<el-input v-model="queryParams.drug2" placeholder="药品B名称" class="handle-input mrb10"></el-input>
|
||||||
|
<el-input v-model="queryParams.reaction" placeholder="相互作用效果" class="handle-input mrb10"></el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="handleQuery()">搜索</el-button>
|
||||||
|
<el-button type="danger" @click="clearSearch()">清除参数</el-button>
|
||||||
|
<el-button type="primary" icon="el-icon-plus" @click="addDrugs()">新增</el-button>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-table :data="table1List" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="drug1" label="药品A名称" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="drug2" label="药品B名称" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="reaction" label="相互作用效果" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-dialog title="新增药品作用" :visible.sync="dialogVisible">
|
||||||
|
<el-form :model="formData" :rules="rules" ref="drugForm" label-width="100px" class="demo-ruleForm">
|
||||||
|
<el-form-item label="药品A名称" prop="drug1">
|
||||||
|
<el-input v-model="formData.drug1"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="药品B名称" prop="drug2">
|
||||||
|
<el-input v-model="formData.drug2"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="相互作用效果" prop="reaction">
|
||||||
|
<el-input v-model="formData.reaction"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="dialogVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="submitForm('drugForm')">提 交</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog title="编辑药品作用" :visible.sync="editVisible">
|
||||||
|
<el-form :model="changeUser" :rules="editRules" ref="editForm" label-width="100px" class="demo-ruleForm">
|
||||||
|
<el-form-item label="药品A名称" prop="drug1">
|
||||||
|
<el-input v-model="changeUser.drug1"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="药品B名称" prop="drug2">
|
||||||
|
<el-input v-model="changeUser.drug2"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="相互作用效果" prop="reaction">
|
||||||
|
<el-input v-model="changeUser.reaction"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="editVisible = false">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="submitEditForm('editForm')">提 交</el-button>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="1"
|
||||||
|
:page-sizes="[10, 15, 20, 25]"
|
||||||
|
:page-size="10"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total=this.pagination.total>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
import {addTable1, listTable1, listTotal} from "../../utils/table1";
|
||||||
|
import axios from "axios";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
userStatus: null,
|
||||||
|
userType: null
|
||||||
|
},
|
||||||
|
users: [],
|
||||||
|
table1List: [
|
||||||
|
],
|
||||||
|
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
drug1: null,
|
||||||
|
drug2: null,
|
||||||
|
reaction: null
|
||||||
|
},
|
||||||
|
// 新增药品作用的数据
|
||||||
|
formData: {
|
||||||
|
drug1: "",
|
||||||
|
drug2: "",
|
||||||
|
reaction: ""
|
||||||
|
},
|
||||||
|
dialogVisible: false,
|
||||||
|
rules: {
|
||||||
|
drug1: [
|
||||||
|
{ required: true, message: "请输入药品A名称", trigger: "blur" }
|
||||||
|
],
|
||||||
|
drug2: [
|
||||||
|
{ required: true, message: "请输入药品B名称", trigger: "blur" }
|
||||||
|
],
|
||||||
|
reaction: [
|
||||||
|
{ required: true, message: "请输入相互作用效果", trigger: "blur" }
|
||||||
|
]
|
||||||
|
},
|
||||||
|
editVisible: false,
|
||||||
|
changeUser: {
|
||||||
|
id: null,
|
||||||
|
drug1: null,
|
||||||
|
drug2: null,
|
||||||
|
reaction: null
|
||||||
|
},
|
||||||
|
editRules: {
|
||||||
|
drug1: [
|
||||||
|
{ required: true, message: "请输入药品A名称", trigger: "blur" }
|
||||||
|
],
|
||||||
|
drug2: [
|
||||||
|
{ required: true, message: "请输入药品B名称", trigger: "blur" }
|
||||||
|
],
|
||||||
|
reaction: [
|
||||||
|
{ required: true, message: "请输入相互作用效果", trigger: "blur" }
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
// this.getUsers();
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
// 新增药品操作
|
||||||
|
addDrugs(){
|
||||||
|
this.dialogVisible = true;
|
||||||
|
},
|
||||||
|
/** 查询药品作用列表条数 */
|
||||||
|
getTotal() {
|
||||||
|
listTotal(this.queryParams).then(response => {
|
||||||
|
this.pagination.total = parseInt(response);
|
||||||
|
console.log(this.pagination.total);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.queryParams.pageSize = val; // 修改每页显示数量
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.queryParams.pageNum = val; // 修改每页显示数量
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
this.getTotal();
|
||||||
|
},
|
||||||
|
/** 查询药品作用管理列表 */
|
||||||
|
getList() {
|
||||||
|
// this.loading = true;
|
||||||
|
this.table1List = []; // 初始化为空数组
|
||||||
|
listTable1(this.queryParams).then(response => {
|
||||||
|
this.table1List = response;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
clearSearch() {
|
||||||
|
this.queryParams = {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
drug1: null,
|
||||||
|
drug2: null,
|
||||||
|
reaction: null
|
||||||
|
}
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getUsers();
|
||||||
|
},
|
||||||
|
// 提交新增药品作用表单
|
||||||
|
submitForm(formName) {
|
||||||
|
this.$refs[formName].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
addTable1(this.formData).then(() => {
|
||||||
|
this.dialogVisible = false;
|
||||||
|
this.getList();
|
||||||
|
this.getTotal();
|
||||||
|
this.$message({
|
||||||
|
message: "新增成功",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
}).catch((error) => {
|
||||||
|
this.$message.error(error);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
//编辑药品作用
|
||||||
|
handleEdit(row) {
|
||||||
|
this.changeUser.id = row.id;
|
||||||
|
this.changeUser.drug1 = row.drug1;
|
||||||
|
this.changeUser.drug2 = row.drug2;
|
||||||
|
this.changeUser.reaction = row.reaction;
|
||||||
|
this.editVisible = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
submitEditForm(formName) {
|
||||||
|
this.$refs[formName].validate(valid => {
|
||||||
|
if (valid) {
|
||||||
|
axios.put(`/system/table1/`, this.changeUser)
|
||||||
|
.then(() => {
|
||||||
|
this.editVisible = false; // 关闭对话框
|
||||||
|
this.getList(); // 刷新列表
|
||||||
|
this.getTotal(); // 刷新总数
|
||||||
|
this.$message({
|
||||||
|
message: "编辑成功",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
this.$message.error("编辑失败：" + error.message);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 删除药品作用
|
||||||
|
handleDelete(row) {
|
||||||
|
this.$confirm("此操作将永久删除该药品作用, 是否继续?", "提示", {
|
||||||
|
confirmButtonText: "确定",
|
||||||
|
cancelButtonText: "取消",
|
||||||
|
type: "warning"
|
||||||
|
}).then(() => {
|
||||||
|
axios.delete(`/system/table1/${row.id}`)
|
||||||
|
.then(() => {
|
||||||
|
this.getList();
|
||||||
|
this.getTotal();
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch(error => {
|
||||||
|
this.$message.error("删除失败：" + error.message);
|
||||||
|
});
|
||||||
|
}).catch(() => {});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.handle-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-select {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-input {
|
||||||
|
width: 160px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mrb10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-switch {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,212 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="handle-box">
|
||||||
|
<el-select clearable v-model="pagination.status" placeholder="状态" class="handle-select mrb10">
|
||||||
|
<el-option key="1" label="启用" :value="true"></el-option>
|
||||||
|
<el-option key="2" label="禁用" :value="false"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="search()">搜索</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="loves" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="userId" label="用户ID" align="center"></el-table-column>
|
||||||
|
|
||||||
|
<el-table-column prop="manName" label="科研人员" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="womanName" label="项目" align="center"></el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="背景封面" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-image lazy :preview-src-list="[scope.row.bgCover]" class="table-td-thumb" :src="scope.row.bgCover"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="男生头像" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-image lazy :preview-src-list="[scope.row.manCover]" class="table-td-thumb" :src="scope.row.manCover"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="女生头像" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-image lazy :preview-src-list="[scope.row.womanCover]" class="table-td-thumb" :src="scope.row.womanCover"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column label="状态" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.status === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{scope.row.status === false ? '禁用' : '启用'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch @click.native="changeStatus(scope.row)" v-model="scope.row.status"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
|
||||||
|
<el-table-column prop="timing" label="计时" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="countdownTitle" label="倒计时标题" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="countdownTime" label="倒计时时间" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="familyInfo" label="额外信息" align="center" show-overflow-tooltip></el-table-column>
|
||||||
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="updateTime" label="最终修改时间" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||||
|
@click="handleDelete(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination background layout="total, prev, pager, next"
|
||||||
|
:current-page="pagination.current"
|
||||||
|
:page-size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
@current-change="handlePageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
status: null
|
||||||
|
},
|
||||||
|
loves: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getLoves();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
handleDelete(item) {
|
||||||
|
this.$confirm('确认删除资源？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/family/deleteFamily", {id: item.id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getLoves();
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
search() {
|
||||||
|
this.pagination.total = 0;
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getLoves();
|
||||||
|
},
|
||||||
|
getLoves() {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/family/listFamily", this.pagination, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.loves = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeStatus(item) {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/family/changeLoveStatus", {
|
||||||
|
id: item.id,
|
||||||
|
flag: item.status
|
||||||
|
}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "修改成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getLoves();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.handle-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-select {
|
||||||
|
width: 200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mrb10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-switch {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,369 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||||
|
<path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
|
||||||
|
<path
|
||||||
|
d="M682.666667 204.8h238.933333a34.133333 34.133333 0 0 1 34.133333 34.133333v648.533334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V204.8z"
|
||||||
|
fill="#FFAA44"></path>
|
||||||
|
<path
|
||||||
|
d="M68.266667 921.6a34.133333 34.133333 0 0 0 34.133333 34.133333h785.066667a68.266667 68.266667 0 0 1-68.266667-68.266666V102.4a34.133333 34.133333 0 0 0-34.133333-34.133333H102.4a34.133333 34.133333 0 0 0-34.133333 34.133333v819.2z"
|
||||||
|
fill="#11AA66"></path>
|
||||||
|
<path
|
||||||
|
d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z"
|
||||||
|
fill="#FFFFFF"></path>
|
||||||
|
</svg>
|
||||||
|
文章信息
|
||||||
|
</el-tag>
|
||||||
|
<el-form :model="article" :rules="rules" ref="ruleForm" label-width="150px"
|
||||||
|
class="demo-ruleForm">
|
||||||
|
<el-form-item label="标题" prop="articleTitle">
|
||||||
|
<el-input maxlength="30" v-model="article.articleTitle"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="内容" prop="articleContent">
|
||||||
|
<mavon-editor ref="md" @imgAdd="imgAdd" v-model="article.articleContent"/>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="是否启用评论" prop="commentStatus">
|
||||||
|
<el-tag :type="article.commentStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{article.commentStatus === false ? '否' : '是'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch v-model="article.commentStatus"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="是否推荐" prop="recommendStatus">
|
||||||
|
<el-tag :type="article.recommendStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{article.recommendStatus === false ? '否' : '是'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch v-model="article.recommendStatus"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="是否可见" prop="viewStatus">
|
||||||
|
<el-tag :type="article.viewStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{article.viewStatus === false ? '否' : '是'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch v-model="article.viewStatus"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item v-if="article.viewStatus === false" label="不可见时的访问密码" prop="password">
|
||||||
|
<el-input maxlength="30" v-model="article.password"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item v-if="article.viewStatus === false" label="密码提示" prop="tips">
|
||||||
|
<el-input maxlength="60" v-model="article.tips"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="封面" prop="articleCover">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-input v-model="article.articleCover"></el-input>
|
||||||
|
<el-image class="table-td-thumb"
|
||||||
|
lazy
|
||||||
|
style="margin-left: 10px"
|
||||||
|
:preview-src-list="[article.articleCover]"
|
||||||
|
:src="article.articleCover"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="'articleCover'" style="margin-top: 10px" @addPicture="addArticleCover"
|
||||||
|
:maxSize="2"
|
||||||
|
:maxNumber="1"></uploadPicture>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="分类" prop="sortId">
|
||||||
|
<el-select v-model="article.sortId" placeholder="请选择分类">
|
||||||
|
<el-option
|
||||||
|
v-for="item in sorts"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.sortName"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
<el-form-item label="标签" prop="labelId">
|
||||||
|
<el-select v-model="article.labelId" placeholder="请选择标签">
|
||||||
|
<el-option
|
||||||
|
v-for="item in labelsTemp"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.labelName"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="myCenter" style="margin-bottom: 22px">
|
||||||
|
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
||||||
|
<el-button type="danger" @click="resetForm('ruleForm')">重置所有修改</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const uploadPicture = () => import( "../common/uploadPicture");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
uploadPicture
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
id: this.$route.query.id,
|
||||||
|
article: {
|
||||||
|
articleTitle: "",
|
||||||
|
articleContent: "",
|
||||||
|
commentStatus: true,
|
||||||
|
recommendStatus: false,
|
||||||
|
viewStatus: true,
|
||||||
|
password: "",
|
||||||
|
tips: "",
|
||||||
|
articleCover: "",
|
||||||
|
sortId: null,
|
||||||
|
labelId: null
|
||||||
|
},
|
||||||
|
sorts: [],
|
||||||
|
labels: [],
|
||||||
|
labelsTemp: [],
|
||||||
|
rules: {
|
||||||
|
articleTitle: [
|
||||||
|
{required: true, message: '请输入标题', trigger: 'change'}
|
||||||
|
],
|
||||||
|
articleContent: [
|
||||||
|
{required: true, message: '请输入内容', trigger: 'change'}
|
||||||
|
],
|
||||||
|
commentStatus: [
|
||||||
|
{required: true, message: '是否启用评论', trigger: 'change'}
|
||||||
|
],
|
||||||
|
recommendStatus: [
|
||||||
|
{required: true, message: '是否推荐', trigger: 'change'}
|
||||||
|
],
|
||||||
|
viewStatus: [
|
||||||
|
{required: true, message: '是否可见', trigger: 'change'}
|
||||||
|
],
|
||||||
|
articleCover: [
|
||||||
|
{required: true, message: '封面', trigger: 'change'}
|
||||||
|
],
|
||||||
|
sortId: [
|
||||||
|
{required: true, message: '分类', trigger: 'change'}
|
||||||
|
],
|
||||||
|
labelId: [
|
||||||
|
{required: true, message: '标签', trigger: 'blur'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
'article.sortId'(newVal, oldVal) {
|
||||||
|
if (oldVal !== null) {
|
||||||
|
this.article.labelId = null;
|
||||||
|
}
|
||||||
|
if (!this.$common.isEmpty(newVal) && !this.$common.isEmpty(this.labels)) {
|
||||||
|
this.labelsTemp = this.labels.filter(l => l.sortId === newVal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getSortAndLabel();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
imgAdd(pos, file) {
|
||||||
|
let suffix = "";
|
||||||
|
if (file.name.lastIndexOf('.') !== -1) {
|
||||||
|
suffix = file.name.substring(file.name.lastIndexOf('.'));
|
||||||
|
}
|
||||||
|
let key = "articlePicture" + "/" + this.$store.state.currentAdmin.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentAdmin.id + new Date().getTime() + Math.floor(Math.random() * 1000) + suffix;
|
||||||
|
|
||||||
|
let storeType = localStorage.getItem("defaultStoreType");
|
||||||
|
|
||||||
|
let fd = new FormData();
|
||||||
|
fd.append("file", file);
|
||||||
|
fd.append("key", key);
|
||||||
|
fd.append("relativePath", key);
|
||||||
|
fd.append("type", "articlePicture");
|
||||||
|
fd.append("storeType", storeType);
|
||||||
|
|
||||||
|
if (storeType === "local") {
|
||||||
|
this.saveLocal(pos, fd);
|
||||||
|
} else if (storeType === "qiniu") {
|
||||||
|
this.saveQiniu(pos, fd);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
saveLocal(pos, fd) {
|
||||||
|
this.$http.upload(this.$constant.baseURL + "/resource/upload", fd, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
let url = res.data;
|
||||||
|
this.$refs.md.$img2Url(pos, url);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveQiniu(pos, fd) {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/qiniu/getUpToken", {key: fd.get("key")}, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
fd.append("token", res.data);
|
||||||
|
|
||||||
|
this.$http.uploadQiniu(this.$constant.qiniuUrl, fd)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.key)) {
|
||||||
|
let url = this.$constant.qiniuDownload + res.key;
|
||||||
|
let file = fd.get("file");
|
||||||
|
this.$common.saveResource(this, "articlePicture", url, file.size, file.type, "qiniu", true);
|
||||||
|
this.$refs.md.$img2Url(pos, url);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addArticleCover(res) {
|
||||||
|
this.article.articleCover = res;
|
||||||
|
},
|
||||||
|
getSortAndLabel() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/listSortAndLabel")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.sorts = res.data.sorts;
|
||||||
|
this.labels = res.data.labels;
|
||||||
|
if (!this.$common.isEmpty(this.id)) {
|
||||||
|
this.getArticle();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getArticle() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/article/getArticleById", {id: this.id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.article = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submitForm(formName) {
|
||||||
|
if (this.article.viewStatus === false && this.$common.isEmpty(this.article.password)) {
|
||||||
|
this.$message({
|
||||||
|
message: "文章不可见时必须输入密码！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$refs[formName].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
if (this.$common.isEmpty(this.id)) {
|
||||||
|
this.saveArticle(this.article, "/article/saveArticle")
|
||||||
|
} else {
|
||||||
|
this.article.id = this.id;
|
||||||
|
this.saveArticle(this.article, "/article/updateArticle")
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
message: "请完善必填项！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetForm(formName) {
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
if (!this.$common.isEmpty(this.id)) {
|
||||||
|
this.getArticle();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
saveArticle(value, url) {
|
||||||
|
this.$confirm('确认保存？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.post(this.$constant.baseURL + url, value, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "保存成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
this.$router.push({path: '/postList'});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消保存!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.my-tag {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
background: var(--lightYellow);
|
||||||
|
border: none;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-switch {
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-form-item {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,304 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="handle-box">
|
||||||
|
<el-select v-model="pagination.recommendStatus" placeholder="是否推荐" style="width: 120px" class="mrb10">
|
||||||
|
<el-option key="1" label="是" :value="true"></el-option>
|
||||||
|
<el-option key="2" label="否" :value="false"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select style="width: 140px" class="mrb10" v-model="pagination.sortId" placeholder="请选择分类">
|
||||||
|
<el-option
|
||||||
|
v-for="item in sorts"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.sortName"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select style="width: 140px" class="mrb10" v-model="pagination.labelId" placeholder="请选择标签">
|
||||||
|
<el-option
|
||||||
|
v-for="item in labelsTemp"
|
||||||
|
:key="item.id"
|
||||||
|
:label="item.labelName"
|
||||||
|
:value="item.id">
|
||||||
|
</el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-input v-model="pagination.searchKey" placeholder="文章标题" class="handle-input mrb10"></el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="searchArticles()">搜索</el-button>
|
||||||
|
<el-button type="danger" @click="clearSearch()">清除参数</el-button>
|
||||||
|
<el-button type="primary" @click="$router.push({path: '/postEdit'})">新增文章</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="articles" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="username" label="作者" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="articleTitle" label="文章标题" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="sort.sortName" label="分类" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="label.labelName" label="标签" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="viewCount" label="浏览量" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="likeCount" label="点赞数" align="center"></el-table-column>
|
||||||
|
<el-table-column label="是否可见" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.viewStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{scope.row.viewStatus === false ? '不可见' : '可见'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch @click.native="changeStatus(scope.row, 1)" v-model="scope.row.viewStatus"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="封面" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-image lazy class="table-td-thumb" :src="scope.row.articleCover" fit="cover"></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="是否启用评论" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.commentStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{scope.row.commentStatus === false ? '否' : '是'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch @click.native="changeStatus(scope.row, 2)" v-model="scope.row.commentStatus"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="是否推荐" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.recommendStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{scope.row.recommendStatus === false ? '否' : '是'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch @click.native="changeStatus(scope.row, 3)" v-model="scope.row.recommendStatus"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="commentCount" label="评论数" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="updateTime" label="最终修改时间" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="handleEdit(scope.row)">编辑</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination background layout="total, prev, pager, next"
|
||||||
|
:current-page="pagination.current"
|
||||||
|
:page-size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
@current-change="handlePageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isBoss: this.$store.state.currentAdmin.isBoss,
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
recommendStatus: null,
|
||||||
|
sortId: null,
|
||||||
|
labelId: null
|
||||||
|
},
|
||||||
|
articles: [],
|
||||||
|
sorts: [],
|
||||||
|
labels: [],
|
||||||
|
labelsTemp: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
'pagination.sortId'(newVal) {
|
||||||
|
this.pagination.labelId = null;
|
||||||
|
if (!this.$common.isEmpty(newVal) && !this.$common.isEmpty(this.labels)) {
|
||||||
|
this.labelsTemp = this.labels.filter(l => l.sortId === newVal);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getArticles();
|
||||||
|
this.getSortAndLabel();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getSortAndLabel() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/listSortAndLabel")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.sorts = res.data.sorts;
|
||||||
|
this.labels = res.data.labels;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
clearSearch() {
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
recommendStatus: null,
|
||||||
|
sortId: null,
|
||||||
|
labelId: null
|
||||||
|
}
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
getArticles() {
|
||||||
|
let url = "";
|
||||||
|
if (this.isBoss) {
|
||||||
|
url = "/admin/article/boss/list";
|
||||||
|
} else {
|
||||||
|
url = "/admin/article/user/list";
|
||||||
|
}
|
||||||
|
this.$http.post(this.$constant.baseURL + url, this.pagination, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.articles = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
searchArticles() {
|
||||||
|
this.pagination.total = 0;
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
changeStatus(article, flag) {
|
||||||
|
let param;
|
||||||
|
if (flag === 1) {
|
||||||
|
param = {
|
||||||
|
articleId: article.id,
|
||||||
|
viewStatus: article.viewStatus
|
||||||
|
}
|
||||||
|
} else if (flag === 2) {
|
||||||
|
param = {
|
||||||
|
articleId: article.id,
|
||||||
|
commentStatus: article.commentStatus
|
||||||
|
}
|
||||||
|
} else if (flag === 3) {
|
||||||
|
param = {
|
||||||
|
articleId: article.id,
|
||||||
|
recommendStatus: article.recommendStatus
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/article/changeArticleStatus", param, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (flag === 1) {
|
||||||
|
this.$message({
|
||||||
|
duration: 0,
|
||||||
|
showClose: true,
|
||||||
|
message: "修改成功！注意，文章不可见时必须设置密码才能访问！",
|
||||||
|
type: "warning"
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
message: "修改成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleDelete(item) {
|
||||||
|
this.$confirm('确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/article/deleteArticle", {id: item.id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getArticles();
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleEdit(item) {
|
||||||
|
this.$router.push({path: '/postEdit', query: {id: item.id}});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.handle-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-input {
|
||||||
|
width: 160px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mrb10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-switch {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,323 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div style="margin-bottom: 20px">
|
||||||
|
<el-button type="primary" @click="sortDialog = true">新增分类</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="sortInfo" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="sortName" label="分类名称" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="sortDescription" label="分类描述" align="center"></el-table-column>
|
||||||
|
<el-table-column label="分类类型" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<span v-if="scope.row.sortType === 0">导航栏分类</span>
|
||||||
|
<span v-else-if="scope.row.sortType === 1">普通分类</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="priority" label="分类优先级" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="countOfSort" label="文章总数" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="380" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="editSort(scope.row)">
|
||||||
|
编辑分类
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="sayLabel(scope.row)">
|
||||||
|
查看标签
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="insertLabel(scope.row)">
|
||||||
|
新增标签
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||||
|
@click="deleteHandle(scope.row.id, 1)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-table v-if="!$common.isEmpty(sort)" :data="sort.labels" border class="table"
|
||||||
|
style="margin-top: 40px"
|
||||||
|
header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column label="分类名称" align="center">
|
||||||
|
<span>{{sort.sortName}}</span>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="labelName" label="标签名称" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="labelDescription" label="标签描述" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="countOfLabel" label="文章总数" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="320" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-edit" @click="editLabel(scope.row)">
|
||||||
|
编辑标签
|
||||||
|
</el-button>
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)"
|
||||||
|
@click="deleteHandle(scope.row.id, 2)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
|
||||||
|
<el-dialog title="分类"
|
||||||
|
:visible.sync="sortDialog"
|
||||||
|
width="30%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div class="my-dialog">
|
||||||
|
<div class="myCenter">
|
||||||
|
<el-radio-group v-model="sortForHttp.sortType">
|
||||||
|
<el-radio-button :label="0">导航栏分类</el-radio-button>
|
||||||
|
<el-radio-button :label="1">普通分类</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
<el-input placeholder="请输入分类名称" v-model="sortForHttp.sortName">
|
||||||
|
<template slot="prepend">分类名称</template>
|
||||||
|
</el-input>
|
||||||
|
<el-input placeholder="请输入分类描述" v-model="sortForHttp.sortDescription">
|
||||||
|
<template slot="prepend">分类描述</template>
|
||||||
|
</el-input>
|
||||||
|
<el-input type="number" placeholder="请输入整数，数字小的在前面"
|
||||||
|
v-model="sortForHttp.priority">
|
||||||
|
<template slot="prepend">分类优先级</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="handleClose()">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="saveSortEdit()">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
|
||||||
|
<el-dialog title="标签"
|
||||||
|
:visible.sync="labelDialog"
|
||||||
|
width="30%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div class="my-dialog">
|
||||||
|
<el-input placeholder="请输入标签名称" v-model="labelForHttp.labelName">
|
||||||
|
<template slot="prepend">标签名称</template>
|
||||||
|
</el-input>
|
||||||
|
<el-input placeholder="请输入标签描述" v-model="labelForHttp.labelDescription">
|
||||||
|
<template slot="prepend">标签描述</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="handleClose()">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="saveLabelEdit()">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sortDialog: false,
|
||||||
|
labelDialog: false,
|
||||||
|
sortInfo: [],
|
||||||
|
sort: {},
|
||||||
|
sortForHttp: {
|
||||||
|
id: null,
|
||||||
|
sortName: "",
|
||||||
|
sortDescription: "",
|
||||||
|
sortType: null,
|
||||||
|
priority: null
|
||||||
|
},
|
||||||
|
labelForHttp: {
|
||||||
|
id: null,
|
||||||
|
sortId: null,
|
||||||
|
labelName: "",
|
||||||
|
labelDescription: ""
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getSortInfo();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
deleteHandle(id, flag) {
|
||||||
|
let url;
|
||||||
|
if (flag === 1) {
|
||||||
|
url = "/webInfo/deleteSort";
|
||||||
|
} else if (flag === 2) {
|
||||||
|
url = "/webInfo/deleteLabel";
|
||||||
|
} else {
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$confirm('确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + url, {id: id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
this.getSortInfo();
|
||||||
|
this.sort = {};
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveSortEdit() {
|
||||||
|
if (this.$common.isEmpty(this.sortForHttp.sortType) ||
|
||||||
|
this.$common.isEmpty(this.sortForHttp.priority) ||
|
||||||
|
this.$common.isEmpty(this.sortForHttp.sortName) ||
|
||||||
|
this.$common.isEmpty(this.sortForHttp.sortDescription)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请完善所有分类信息！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let url;
|
||||||
|
if (this.$common.isEmpty(this.sortForHttp.id)) {
|
||||||
|
url = "/webInfo/saveSort";
|
||||||
|
} else {
|
||||||
|
url = "/webInfo/updateSort";
|
||||||
|
}
|
||||||
|
this.$http.post(this.$constant.baseURL + url, this.sortForHttp, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "保存成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
this.getSortInfo();
|
||||||
|
this.handleClose();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveLabelEdit() {
|
||||||
|
if (this.$common.isEmpty(this.labelForHttp.labelName) ||
|
||||||
|
this.$common.isEmpty(this.labelForHttp.labelDescription)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请完善所有标签信息！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let url;
|
||||||
|
if (this.$common.isEmpty(this.labelForHttp.id)) {
|
||||||
|
url = "/webInfo/saveLabel";
|
||||||
|
} else {
|
||||||
|
url = "/webInfo/updateLabel";
|
||||||
|
}
|
||||||
|
this.$http.post(this.$constant.baseURL + url, this.labelForHttp, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "保存成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
this.getSortInfo();
|
||||||
|
this.handleClose();
|
||||||
|
this.sort = {};
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
editSort(sort) {
|
||||||
|
this.sortDialog = true;
|
||||||
|
this.sortForHttp.id = sort.id;
|
||||||
|
this.sortForHttp.sortName = sort.sortName;
|
||||||
|
this.sortForHttp.sortDescription = sort.sortDescription;
|
||||||
|
this.sortForHttp.sortType = sort.sortType;
|
||||||
|
this.sortForHttp.priority = sort.priority;
|
||||||
|
},
|
||||||
|
editLabel(label) {
|
||||||
|
this.labelDialog = true;
|
||||||
|
this.labelForHttp.id = label.id;
|
||||||
|
this.labelForHttp.sortId = label.sortId;
|
||||||
|
this.labelForHttp.labelName = label.labelName;
|
||||||
|
this.labelForHttp.labelDescription = label.labelDescription;
|
||||||
|
},
|
||||||
|
insertLabel(sort) {
|
||||||
|
this.labelForHttp.sortId = sort.id;
|
||||||
|
this.labelDialog = true;
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.labelForHttp = {
|
||||||
|
id: null,
|
||||||
|
sortId: null,
|
||||||
|
labelName: "",
|
||||||
|
labelDescription: ""
|
||||||
|
};
|
||||||
|
this.sortForHttp = {
|
||||||
|
id: null,
|
||||||
|
sortName: "",
|
||||||
|
sortDescription: "",
|
||||||
|
sortType: null,
|
||||||
|
priority: null
|
||||||
|
};
|
||||||
|
this.sortDialog = false;
|
||||||
|
this.labelDialog = false;
|
||||||
|
},
|
||||||
|
sayLabel(sort) {
|
||||||
|
this.sort = sort;
|
||||||
|
},
|
||||||
|
getSortInfo() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/getSortInfo")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.sortInfo = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.my-dialog > div {
|
||||||
|
margin: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-dialog >>> input::-webkit-inner-spin-button {
|
||||||
|
appearance: none;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,137 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -3px;">
|
||||||
|
<path d="M0 0h1024v1024H0V0z" fill="#202425" opacity=".01"></path>
|
||||||
|
<path
|
||||||
|
d="M682.666667 204.8h238.933333a34.133333 34.133333 0 0 1 34.133333 34.133333v648.533334a68.266667 68.266667 0 0 1-68.266666 68.266666h-204.8V204.8z"
|
||||||
|
fill="#FFAA44"></path>
|
||||||
|
<path
|
||||||
|
d="M68.266667 921.6a34.133333 34.133333 0 0 0 34.133333 34.133333h785.066667a68.266667 68.266667 0 0 1-68.266667-68.266666V102.4a34.133333 34.133333 0 0 0-34.133333-34.133333H102.4a34.133333 34.133333 0 0 0-34.133333 34.133333v819.2z"
|
||||||
|
fill="#11AA66"></path>
|
||||||
|
<path
|
||||||
|
d="M238.933333 307.2a34.133333 34.133333 0 0 0 0 68.266667h136.533334a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h409.6a34.133333 34.133333 0 1 0 0-68.266667H238.933333z m0 204.8a34.133333 34.133333 0 1 0 0 68.266667h204.8a34.133333 34.133333 0 1 0 0-68.266667H238.933333z"
|
||||||
|
fill="#FFFFFF"></path>
|
||||||
|
</svg>
|
||||||
|
留言列表
|
||||||
|
</el-tag>
|
||||||
|
<el-table :data="treeHoles" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="message" label="留言内容" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="createTime" label="创建时间" align="center"></el-table-column>
|
||||||
|
<el-table-column label="操作" width="180" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-button type="text" icon="el-icon-delete" style="color: var(--orangeRed)" @click="handleDelete(scope.row)">
|
||||||
|
删除
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination background layout="total, prev, pager, next"
|
||||||
|
:current-page="pagination.current"
|
||||||
|
:page-size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
@current-change="handlePageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
treeHoles: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getTreeHoles()
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getTreeHoles() {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/admin/treeHole/boss/list", this.pagination, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.treeHoles = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getTreeHoles();
|
||||||
|
},
|
||||||
|
handleDelete(item) {
|
||||||
|
this.$confirm('确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/deleteTreeHole", {id: item.id}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getTreeHoles();
|
||||||
|
this.$message({
|
||||||
|
message: "删除成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.my-tag {
|
||||||
|
margin-bottom: 40px;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
background: var(--lightYellow);
|
||||||
|
border: none;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,319 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<div class="handle-box">
|
||||||
|
<el-select v-model="pagination.userType" placeholder="用户类型" class="handle-select mrb10">
|
||||||
|
<el-option key="1" label="Boss" :value="0"></el-option>
|
||||||
|
<el-option key="2" label="管理员" :value="1"></el-option>
|
||||||
|
<el-option key="3" label="普通用户" :value="2"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-select v-model="pagination.userStatus" placeholder="用户状态" class="handle-select mrb10">
|
||||||
|
<el-option key="1" label="启用" :value="true"></el-option>
|
||||||
|
<el-option key="2" label="禁用" :value="false"></el-option>
|
||||||
|
</el-select>
|
||||||
|
<el-input v-model="pagination.searchKey" placeholder="用户名/手机号" class="handle-input mrb10"></el-input>
|
||||||
|
<el-button type="primary" icon="el-icon-search" @click="searchUser()">搜索</el-button>
|
||||||
|
<el-button type="danger" @click="clearSearch()">清除参数</el-button>
|
||||||
|
</div>
|
||||||
|
<el-table :data="users" border class="table" header-cell-class-name="table-header">
|
||||||
|
<el-table-column prop="id" label="ID" width="55" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="username" label="用户名" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="phoneNumber" label="手机号" align="center"></el-table-column>
|
||||||
|
<el-table-column prop="email" label="邮箱" align="center"></el-table-column>
|
||||||
|
<el-table-column label="援助" width="100" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-input size="medium" maxlength="30" v-model="scope.row.admire"
|
||||||
|
@blur="changeUserAdmire(scope.row)"></el-input>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="用户状态" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag :type="scope.row.userStatus === false ? 'danger' : 'success'"
|
||||||
|
disable-transitions>
|
||||||
|
{{scope.row.userStatus === false ? '禁用' : '启用'}}
|
||||||
|
</el-tag>
|
||||||
|
<el-switch @click.native="changeUserStatus(scope.row)" v-model="scope.row.userStatus"></el-switch>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="头像" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-image lazy class="table-td-thumb" :src="scope.row.avatar" fit="cover"></el-image>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="性别" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag type="success"
|
||||||
|
v-if="scope.row.gender === 1"
|
||||||
|
disable-transitions>
|
||||||
|
男
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="success"
|
||||||
|
v-else-if="scope.row.gender === 2"
|
||||||
|
disable-transitions>
|
||||||
|
女
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="success"
|
||||||
|
v-else
|
||||||
|
disable-transitions>
|
||||||
|
保密
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="introduction" label="简介" align="center"></el-table-column>
|
||||||
|
<el-table-column label="用户类型" width="100" align="center">
|
||||||
|
<template slot-scope="scope">
|
||||||
|
<el-tag type="success"
|
||||||
|
v-if="scope.row.userType === 0"
|
||||||
|
style="cursor: pointer"
|
||||||
|
@click.native="editUser(scope.row)"
|
||||||
|
disable-transitions>
|
||||||
|
Boss
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="success"
|
||||||
|
v-else-if="scope.row.userType === 1"
|
||||||
|
style="cursor: pointer"
|
||||||
|
@click.native="editUser(scope.row)"
|
||||||
|
disable-transitions>
|
||||||
|
管理员
|
||||||
|
</el-tag>
|
||||||
|
<el-tag type="success"
|
||||||
|
v-else
|
||||||
|
style="cursor: pointer"
|
||||||
|
@click.native="editUser(scope.row)"
|
||||||
|
disable-transitions>
|
||||||
|
普通用户
|
||||||
|
</el-tag>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="createTime" label="注册时间" align="center"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
<div class="pagination">
|
||||||
|
<el-pagination background layout="total, prev, pager, next"
|
||||||
|
:current-page="pagination.current"
|
||||||
|
:page-size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
@current-change="handlePageChange">
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 编辑弹出框 -->
|
||||||
|
<el-dialog title="修改用户类型"
|
||||||
|
:visible.sync="editVisible"
|
||||||
|
width="30%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div class="myCenter">
|
||||||
|
<el-radio-group v-model="changeUser.userType">
|
||||||
|
<el-radio-button :label="0">Boss</el-radio-button>
|
||||||
|
<el-radio-button :label="1">管理员</el-radio-button>
|
||||||
|
<el-radio-button :label="2">普通用户</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span slot="footer" class="dialog-footer">
|
||||||
|
<el-button @click="handleClose()">取 消</el-button>
|
||||||
|
<el-button type="primary" @click="saveEdit()">确 定</el-button>
|
||||||
|
</span>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
export default {
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
userStatus: null,
|
||||||
|
userType: null
|
||||||
|
},
|
||||||
|
users: [],
|
||||||
|
changeUser: {
|
||||||
|
id: null,
|
||||||
|
userType: null
|
||||||
|
},
|
||||||
|
editVisible: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getUsers();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
clearSearch() {
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
userStatus: null,
|
||||||
|
userType: null
|
||||||
|
}
|
||||||
|
this.getUsers();
|
||||||
|
},
|
||||||
|
getUsers() {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/admin/user/list", this.pagination, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.users = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeUserStatus(user) {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/user/changeUserStatus", {
|
||||||
|
userId: user.id,
|
||||||
|
flag: user.userStatus
|
||||||
|
}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "修改成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changeUserAdmire(user) {
|
||||||
|
if (!this.$common.isEmpty(user.admire)) {
|
||||||
|
this.$confirm('确认保存？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/user/changeUserAdmire", {
|
||||||
|
userId: user.id,
|
||||||
|
admire: user.admire
|
||||||
|
}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
message: "修改成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消保存!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
editUser(user) {
|
||||||
|
this.changeUser.id = user.id;
|
||||||
|
this.changeUser.userType = user.userType;
|
||||||
|
this.editVisible = true;
|
||||||
|
},
|
||||||
|
handlePageChange(val) {
|
||||||
|
this.pagination.current = val;
|
||||||
|
this.getUsers();
|
||||||
|
},
|
||||||
|
searchUser() {
|
||||||
|
this.pagination.total = 0;
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getUsers();
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.changeUser = {
|
||||||
|
id: null,
|
||||||
|
userType: null
|
||||||
|
};
|
||||||
|
this.editVisible = false;
|
||||||
|
},
|
||||||
|
saveEdit() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/user/changeUserType", {
|
||||||
|
userId: this.changeUser.id,
|
||||||
|
userType: this.changeUser.userType
|
||||||
|
}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.handleClose();
|
||||||
|
this.getUsers();
|
||||||
|
this.$message({
|
||||||
|
message: "修改成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.handle-box {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-select {
|
||||||
|
width: 120px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.handle-input {
|
||||||
|
width: 160px;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table {
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.mrb10 {
|
||||||
|
margin-right: 10px;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
display: block;
|
||||||
|
margin: auto;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
margin: 20px 0;
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-switch {
|
||||||
|
margin: 5px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,111 @@
|
|||||||
|
<template>
|
||||||
|
<div class="myCenter verify-container">
|
||||||
|
<div class="verify-content">
|
||||||
|
<div>
|
||||||
|
<el-avatar :size="50" :src="$store.state.webInfo.avatar"></el-avatar>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-input v-model="account">
|
||||||
|
<template slot="prepend">账号</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<el-input v-model="password" type="password">
|
||||||
|
<template slot="prepend">密码</template>
|
||||||
|
</el-input>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<proButton :info="'提交'"
|
||||||
|
@click.native="login()"
|
||||||
|
:before="$constant.before_color_2"
|
||||||
|
:after="$constant.after_color_2">
|
||||||
|
</proButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const proButton = () => import( "../common/proButton");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
proButton
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
redirect: this.$route.query.redirect,
|
||||||
|
account: "",
|
||||||
|
password: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
login() {
|
||||||
|
if (this.$common.isEmpty(this.account) || this.$common.isEmpty(this.password)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请输入账号或密码！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let user = {
|
||||||
|
account: this.account.trim(),
|
||||||
|
password: this.$common.encrypt(this.password.trim()),
|
||||||
|
isAdmin: true
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$http.post(this.$constant.baseURL + "/user/login", user, true, false)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
localStorage.setItem("adminToken", res.data.accessToken);
|
||||||
|
this.$store.commit("loadCurrentAdmin", res.data);
|
||||||
|
this.account = "";
|
||||||
|
this.password = "";
|
||||||
|
this.$router.push({path: this.redirect});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.verify-container {
|
||||||
|
height: 100vh;
|
||||||
|
background: var(--verifyImage) center center / cover repeat;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verify-content {
|
||||||
|
background: var(--maxWhiteMask);
|
||||||
|
padding: 30px 40px 5px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verify-content > div:first-child {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
transform: translate(-50%);
|
||||||
|
top: -25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verify-content > div:not(:first-child) {
|
||||||
|
margin: 25px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.verify-content > div:last-child > div {
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,552 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||||
|
<path
|
||||||
|
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||||
|
fill="#8C7BFD"></path>
|
||||||
|
<path
|
||||||
|
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||||
|
fill="#FFE37B"></path>
|
||||||
|
</svg>
|
||||||
|
基础信息
|
||||||
|
</el-tag>
|
||||||
|
<el-form :model="webInfo" :rules="rules" ref="ruleForm" label-width="100px"
|
||||||
|
class="demo-ruleForm">
|
||||||
|
<el-form-item label="网站名称" prop="webName">
|
||||||
|
<el-input v-model="webInfo.webName"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="网站标题" prop="webTitle">
|
||||||
|
<el-input v-model="webInfo.webTitle"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="页脚" prop="footer">
|
||||||
|
<el-input v-model="webInfo.footer"></el-input>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="状态" prop="status">
|
||||||
|
<el-switch @click.native="changeWebStatus(webInfo)" v-model="webInfo.status"></el-switch>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="背景" prop="backgroundImage">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-input v-model="webInfo.backgroundImage"></el-input>
|
||||||
|
<el-image lazy class="table-td-thumb"
|
||||||
|
style="margin-left: 10px"
|
||||||
|
:preview-src-list="[webInfo.backgroundImage]"
|
||||||
|
:src="webInfo.backgroundImage"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="'webBackgroundImage'" style="margin-top: 15px"
|
||||||
|
@addPicture="addBackgroundImage"
|
||||||
|
:maxSize="5"
|
||||||
|
:maxNumber="1"></uploadPicture>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="头像" prop="avatar">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-input v-model="webInfo.avatar"></el-input>
|
||||||
|
<el-image lazy class="table-td-thumb"
|
||||||
|
style="margin-left: 10px"
|
||||||
|
:preview-src-list="[webInfo.avatar]"
|
||||||
|
:src="webInfo.avatar"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="'webAvatar'" style="margin-top: 15px" @addPicture="addAvatar"
|
||||||
|
:maxSize="5"
|
||||||
|
:maxNumber="1"></uploadPicture>
|
||||||
|
</el-form-item>
|
||||||
|
|
||||||
|
<el-form-item label="提示" prop="waifuJson">
|
||||||
|
<div style="display: flex">
|
||||||
|
<el-input :disabled="disabled" :rows="6" type="textarea" v-model="webInfo.waifuJson"></el-input>
|
||||||
|
<i class="el-icon-edit my-icon" @click="disabled = !disabled"></i>
|
||||||
|
</div>
|
||||||
|
</el-form-item>
|
||||||
|
</el-form>
|
||||||
|
<div class="myCenter" style="margin-bottom: 22px">
|
||||||
|
<el-button type="primary" @click="submitForm('ruleForm')">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||||
|
<path
|
||||||
|
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||||
|
fill="#8C7BFD"></path>
|
||||||
|
<path
|
||||||
|
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||||
|
fill="#FFE37B"></path>
|
||||||
|
</svg>
|
||||||
|
公告
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
:key="i"
|
||||||
|
v-for="(notice, i) in notices"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
@close="handleClose(notices, notice)">
|
||||||
|
{{notice}}
|
||||||
|
</el-tag>
|
||||||
|
<el-input
|
||||||
|
class="input-new-tag"
|
||||||
|
v-if="inputNoticeVisible"
|
||||||
|
v-model="inputNoticeValue"
|
||||||
|
ref="saveNoticeInput"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter.native="handleInputNoticeConfirm"
|
||||||
|
@blur="handleInputNoticeConfirm">
|
||||||
|
</el-input>
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showNoticeInput()">+ 公告</el-button>
|
||||||
|
<div class="myCenter" style="margin-bottom: 22px">
|
||||||
|
<el-button type="primary" @click="saveNotice()">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||||
|
<path
|
||||||
|
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||||
|
fill="#8C7BFD"></path>
|
||||||
|
<path
|
||||||
|
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||||
|
fill="#FFE37B"></path>
|
||||||
|
</svg>
|
||||||
|
随机名称
|
||||||
|
</el-tag>
|
||||||
|
<el-tag
|
||||||
|
:key="i"
|
||||||
|
effect="dark"
|
||||||
|
v-for="(name, i) in randomName"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
:type="types[Math.floor(Math.random() * 5)]"
|
||||||
|
@close="handleClose(randomName, name)">
|
||||||
|
{{name}}
|
||||||
|
</el-tag>
|
||||||
|
<el-input
|
||||||
|
class="input-new-tag"
|
||||||
|
v-if="inputRandomNameVisible"
|
||||||
|
v-model="inputRandomNameValue"
|
||||||
|
ref="saveRandomNameInput"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter.native="handleInputRandomNameConfirm"
|
||||||
|
@blur="handleInputRandomNameConfirm">
|
||||||
|
</el-input>
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showRandomNameInput">+ 随机名称</el-button>
|
||||||
|
<div class="myCenter" style="margin-bottom: 22px">
|
||||||
|
<el-button type="primary" @click="saveRandomName()">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||||
|
<path
|
||||||
|
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||||
|
fill="#8C7BFD"></path>
|
||||||
|
<path
|
||||||
|
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||||
|
fill="#FFE37B"></path>
|
||||||
|
</svg>
|
||||||
|
随机头像
|
||||||
|
</el-tag>
|
||||||
|
<div :key="i"
|
||||||
|
style="display: flex"
|
||||||
|
v-for="(avatar, i) in randomAvatar">
|
||||||
|
<el-tag
|
||||||
|
style="white-space: normal;height: unset"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
@close="handleClose(randomAvatar, avatar)">
|
||||||
|
{{avatar}}
|
||||||
|
</el-tag>
|
||||||
|
<div>
|
||||||
|
<el-image lazy class="table-td-thumb"
|
||||||
|
style="margin: 10px"
|
||||||
|
:preview-src-list="[avatar]"
|
||||||
|
:src="avatar"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
class="input-new-tag"
|
||||||
|
v-if="inputRandomAvatarVisible"
|
||||||
|
v-model="inputRandomAvatarValue"
|
||||||
|
ref="saveRandomAvatarInput"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter.native="handleInputRandomAvatarConfirm"
|
||||||
|
@blur="handleInputRandomAvatarConfirm">
|
||||||
|
</el-input>
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showRandomAvatarInput">+ 随机头像</el-button>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="'randomAvatar'" style="margin: 10px" @addPicture="addRandomAvatar"
|
||||||
|
:maxSize="1"
|
||||||
|
:maxNumber="5"></uploadPicture>
|
||||||
|
<div class="myCenter" style="margin-bottom: 22px">
|
||||||
|
<el-button type="primary" @click="saveRandomAvatar()">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-tag effect="dark" class="my-tag">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="20" height="20" style="vertical-align: -4px;">
|
||||||
|
<path
|
||||||
|
d="M767.1296 808.6528c16.8448 0 32.9728 2.816 48.0256 8.0384 20.6848 7.1168 43.52 1.0752 57.1904-15.9744a459.91936 459.91936 0 0 0 70.5024-122.88c7.8336-20.48 1.0752-43.264-15.9744-57.088-49.6128-40.192-65.0752-125.3888-31.3856-185.856a146.8928 146.8928 0 0 1 30.3104-37.9904c16.2304-14.5408 22.1696-37.376 13.9264-57.6a461.27104 461.27104 0 0 0-67.5328-114.9952c-13.6192-16.9984-36.4544-22.9376-57.0368-15.8208a146.3296 146.3296 0 0 1-48.0256 8.0384c-70.144 0-132.352-50.8928-145.2032-118.7328-4.096-21.6064-20.736-38.5536-42.4448-41.8304-22.0672-3.2768-44.6464-5.0176-67.6864-5.0176-21.4528 0-42.5472 1.536-63.232 4.4032-22.3232 3.1232-40.2432 20.48-43.52 42.752-6.912 46.6944-36.0448 118.016-145.7152 118.4256-17.3056 0.0512-33.8944-2.9696-49.3056-8.448-21.0432-7.4752-44.3904-1.4848-58.368 15.9232A462.14656 462.14656 0 0 0 80.4864 348.16c-7.6288 20.0192-2.7648 43.008 13.4656 56.9344 55.5008 47.8208 71.7824 122.88 37.0688 185.1392a146.72896 146.72896 0 0 1-31.6416 39.168c-16.8448 14.7456-23.0912 38.1952-14.5408 58.9312 16.896 41.0112 39.5776 79.0016 66.9696 113.0496 13.9264 17.3056 37.2736 23.1936 58.2144 15.7184 15.4112-5.4784 32-8.4992 49.3056-8.4992 71.2704 0 124.7744 49.408 142.1312 121.2928 4.9664 20.48 21.4016 36.0448 42.24 39.168 22.2208 3.328 44.9536 5.0688 68.096 5.0688 23.3984 0 46.4384-1.792 68.864-5.1712 21.3504-3.2256 38.144-19.456 42.7008-40.5504 14.8992-68.8128 73.1648-119.7568 143.7696-119.7568z"
|
||||||
|
fill="#8C7BFD"></path>
|
||||||
|
<path
|
||||||
|
d="M511.8464 696.3712c-101.3248 0-183.7568-82.432-183.7568-183.7568s82.432-183.7568 183.7568-183.7568 183.7568 82.432 183.7568 183.7568-82.432 183.7568-183.7568 183.7568z m0-265.1648c-44.8512 0-81.3568 36.5056-81.3568 81.3568S466.9952 593.92 511.8464 593.92s81.3568-36.5056 81.3568-81.3568-36.5056-81.3568-81.3568-81.3568z"
|
||||||
|
fill="#FFE37B"></path>
|
||||||
|
</svg>
|
||||||
|
随机封面
|
||||||
|
</el-tag>
|
||||||
|
<div :key="i"
|
||||||
|
style="display: flex"
|
||||||
|
v-for="(cover, i) in randomCover">
|
||||||
|
<el-tag
|
||||||
|
style="white-space: normal;height: unset"
|
||||||
|
closable
|
||||||
|
:disable-transitions="false"
|
||||||
|
@close="handleClose(randomCover, cover)">
|
||||||
|
{{cover}}
|
||||||
|
</el-tag>
|
||||||
|
<div>
|
||||||
|
<el-image lazy class="table-td-thumb"
|
||||||
|
style="margin: 10px"
|
||||||
|
:preview-src-list="[cover]"
|
||||||
|
:src="cover"
|
||||||
|
fit="cover"></el-image>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-input
|
||||||
|
class="input-new-tag"
|
||||||
|
v-if="inputRandomCoverVisible"
|
||||||
|
v-model="inputRandomCoverValue"
|
||||||
|
ref="saveRandomCoverInput"
|
||||||
|
size="small"
|
||||||
|
@keyup.enter.native="handleInputRandomCoverConfirm"
|
||||||
|
@blur="handleInputRandomCoverConfirm">
|
||||||
|
</el-input>
|
||||||
|
<el-button v-else class="button-new-tag" size="small" @click="showRandomCoverInput">+ 随机封面</el-button>
|
||||||
|
<uploadPicture :isAdmin="true" :prefix="'randomCover'" style="margin: 10px" @addPicture="addRandomCover"
|
||||||
|
:maxSize="5"
|
||||||
|
:maxNumber="5"></uploadPicture>
|
||||||
|
<div class="myCenter" style="margin-bottom: 40px">
|
||||||
|
<el-button type="primary" @click="saveRandomCover()">保存</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div>
|
||||||
|
<el-button type="danger" @click="resetForm('ruleForm')">重置所有修改</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const uploadPicture = () => import( "../common/uploadPicture");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
uploadPicture
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
disabled: true,
|
||||||
|
types: ['', 'success', 'info', 'danger', 'warning'],
|
||||||
|
inputNoticeVisible: false,
|
||||||
|
inputNoticeValue: "",
|
||||||
|
inputRandomNameVisible: false,
|
||||||
|
inputRandomNameValue: "",
|
||||||
|
inputRandomAvatarVisible: false,
|
||||||
|
inputRandomAvatarValue: "",
|
||||||
|
inputRandomCoverVisible: false,
|
||||||
|
inputRandomCoverValue: "",
|
||||||
|
webInfo: {
|
||||||
|
id: null,
|
||||||
|
webName: "",
|
||||||
|
webTitle: "",
|
||||||
|
footer: "",
|
||||||
|
backgroundImage: "",
|
||||||
|
avatar: "",
|
||||||
|
waifuJson: "",
|
||||||
|
status: false
|
||||||
|
},
|
||||||
|
notices: [],
|
||||||
|
randomAvatar: [],
|
||||||
|
randomName: [],
|
||||||
|
randomCover: [],
|
||||||
|
rules: {
|
||||||
|
webName: [
|
||||||
|
{required: true, message: '请输入网站名称', trigger: 'blur'},
|
||||||
|
{min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'change'}
|
||||||
|
],
|
||||||
|
webTitle: [
|
||||||
|
{required: true, message: '请输入网站标题', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
footer: [
|
||||||
|
{required: true, message: '请输入页脚', trigger: 'blur'}
|
||||||
|
],
|
||||||
|
backgroundImage: [
|
||||||
|
{required: true, message: '请输入背景', trigger: 'change'}
|
||||||
|
],
|
||||||
|
status: [
|
||||||
|
{required: true, message: '请设置网站状态', trigger: 'change'}
|
||||||
|
],
|
||||||
|
avatar: [
|
||||||
|
{required: true, message: '请上传头像', trigger: 'change'}
|
||||||
|
]
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getWebInfo();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
addBackgroundImage(res) {
|
||||||
|
this.webInfo.backgroundImage = res;
|
||||||
|
},
|
||||||
|
addAvatar(res) {
|
||||||
|
this.webInfo.avatar = res;
|
||||||
|
},
|
||||||
|
addRandomAvatar(res) {
|
||||||
|
this.randomAvatar.push(res);
|
||||||
|
},
|
||||||
|
addRandomCover(res) {
|
||||||
|
this.randomCover.push(res);
|
||||||
|
},
|
||||||
|
changeWebStatus(webInfo) {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/webInfo/updateWebInfo", {
|
||||||
|
id: webInfo.id,
|
||||||
|
status: webInfo.status
|
||||||
|
}, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.getWebInfo();
|
||||||
|
this.$message({
|
||||||
|
message: "保存成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getWebInfo() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/admin/webInfo/getAdminWebInfo", {}, true)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.webInfo.id = res.data.id;
|
||||||
|
this.webInfo.webName = res.data.webName;
|
||||||
|
this.webInfo.webTitle = res.data.webTitle;
|
||||||
|
this.webInfo.footer = res.data.footer;
|
||||||
|
this.webInfo.backgroundImage = res.data.backgroundImage;
|
||||||
|
this.webInfo.avatar = res.data.avatar;
|
||||||
|
this.webInfo.waifuJson = res.data.waifuJson;
|
||||||
|
this.webInfo.status = res.data.status;
|
||||||
|
this.notices = JSON.parse(res.data.notices);
|
||||||
|
this.randomAvatar = JSON.parse(res.data.randomAvatar);
|
||||||
|
this.randomName = JSON.parse(res.data.randomName);
|
||||||
|
this.randomCover = JSON.parse(res.data.randomCover);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submitForm(formName) {
|
||||||
|
this.$refs[formName].validate((valid) => {
|
||||||
|
if (valid) {
|
||||||
|
this.updateWebInfo(this.webInfo)
|
||||||
|
} else {
|
||||||
|
this.$message({
|
||||||
|
message: "请完善必填项！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
resetForm(formName) {
|
||||||
|
this.$refs[formName].resetFields();
|
||||||
|
this.getWebInfo();
|
||||||
|
},
|
||||||
|
handleClose(array, item) {
|
||||||
|
array.splice(array.indexOf(item), 1);
|
||||||
|
},
|
||||||
|
handleInputNoticeConfirm() {
|
||||||
|
if (this.inputNoticeValue) {
|
||||||
|
this.notices.push(this.inputNoticeValue);
|
||||||
|
}
|
||||||
|
this.inputNoticeVisible = false;
|
||||||
|
this.inputNoticeValue = '';
|
||||||
|
},
|
||||||
|
showNoticeInput() {
|
||||||
|
this.inputNoticeVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveNoticeInput.$refs.input.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveNotice() {
|
||||||
|
let param = {
|
||||||
|
id: this.webInfo.id,
|
||||||
|
notices: JSON.stringify(this.notices)
|
||||||
|
}
|
||||||
|
this.updateWebInfo(param);
|
||||||
|
},
|
||||||
|
handleInputRandomNameConfirm() {
|
||||||
|
if (this.inputRandomNameValue) {
|
||||||
|
this.randomName.push(this.inputRandomNameValue);
|
||||||
|
}
|
||||||
|
this.inputRandomNameVisible = false;
|
||||||
|
this.inputRandomNameValue = '';
|
||||||
|
},
|
||||||
|
showRandomNameInput() {
|
||||||
|
this.inputRandomNameVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveRandomNameInput.$refs.input.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveRandomName() {
|
||||||
|
let param = {
|
||||||
|
id: this.webInfo.id,
|
||||||
|
randomName: JSON.stringify(this.randomName)
|
||||||
|
}
|
||||||
|
this.updateWebInfo(param);
|
||||||
|
},
|
||||||
|
handleInputRandomAvatarConfirm() {
|
||||||
|
if (this.inputRandomAvatarValue) {
|
||||||
|
this.randomAvatar.push(this.inputRandomAvatarValue);
|
||||||
|
}
|
||||||
|
this.inputRandomAvatarVisible = false;
|
||||||
|
this.inputRandomAvatarValue = '';
|
||||||
|
},
|
||||||
|
showRandomAvatarInput() {
|
||||||
|
this.inputRandomAvatarVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveRandomAvatarInput.$refs.input.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveRandomAvatar() {
|
||||||
|
let param = {
|
||||||
|
id: this.webInfo.id,
|
||||||
|
randomAvatar: JSON.stringify(this.randomAvatar)
|
||||||
|
}
|
||||||
|
this.updateWebInfo(param);
|
||||||
|
},
|
||||||
|
handleInputRandomCoverConfirm() {
|
||||||
|
if (this.inputRandomCoverValue) {
|
||||||
|
this.randomCover.push(this.inputRandomCoverValue);
|
||||||
|
}
|
||||||
|
this.inputRandomCoverVisible = false;
|
||||||
|
this.inputRandomCoverValue = '';
|
||||||
|
},
|
||||||
|
showRandomCoverInput() {
|
||||||
|
this.inputRandomCoverVisible = true;
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.$refs.saveRandomCoverInput.$refs.input.focus();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveRandomCover() {
|
||||||
|
let param = {
|
||||||
|
id: this.webInfo.id,
|
||||||
|
randomCover: JSON.stringify(this.randomCover)
|
||||||
|
}
|
||||||
|
this.updateWebInfo(param);
|
||||||
|
},
|
||||||
|
updateWebInfo(value) {
|
||||||
|
this.$confirm('确认保存？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/webInfo/updateWebInfo", value, true)
|
||||||
|
.then((res) => {
|
||||||
|
this.getWebInfo();
|
||||||
|
this.$message({
|
||||||
|
message: "保存成功！",
|
||||||
|
type: "success"
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消保存!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.my-tag {
|
||||||
|
margin-bottom: 20px !important;
|
||||||
|
width: 100%;
|
||||||
|
text-align: left;
|
||||||
|
background: var(--lightYellow);
|
||||||
|
border: none;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 40px;
|
||||||
|
font-size: 16px;
|
||||||
|
color: var(--black);
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-tag {
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.button-new-tag {
|
||||||
|
margin: 10px;
|
||||||
|
height: 32px;
|
||||||
|
line-height: 32px;
|
||||||
|
padding-top: 0;
|
||||||
|
padding-bottom: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.input-new-tag {
|
||||||
|
width: 200px;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-icon {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-left: 10px;
|
||||||
|
font-size: 18px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--blue);
|
||||||
|
}
|
||||||
|
|
||||||
|
.table-td-thumb {
|
||||||
|
border-radius: 2px;
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,422 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 评论框 -->
|
||||||
|
<div style="margin-bottom: 40px">
|
||||||
|
<div class="comment-head">
|
||||||
|
<i class="el-icon-edit-outline" style="font-weight: bold;font-size: 22px;"></i> 留言
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<!-- 文字评论 -->
|
||||||
|
<div v-show="!isGraffiti">
|
||||||
|
<commentBox @showGraffiti="isGraffiti = !isGraffiti"
|
||||||
|
@submitComment="submitComment">
|
||||||
|
</commentBox>
|
||||||
|
</div>
|
||||||
|
<!-- 画笔 -->
|
||||||
|
<!-- <div v-show="isGraffiti">-->
|
||||||
|
<!-- <graffiti @showComment="isGraffiti = !isGraffiti"-->
|
||||||
|
<!-- @addGraffitiComment="addGraffitiComment">-->
|
||||||
|
<!-- </graffiti>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 评论内容 -->
|
||||||
|
<div v-if="comments.length > 0">
|
||||||
|
<!-- 评论数量 -->
|
||||||
|
<div class="commentInfo-title">
|
||||||
|
<span style="font-size: 1.15rem">Comments | </span>
|
||||||
|
<span>{{ total }} 条留言</span>
|
||||||
|
</div>
|
||||||
|
<!-- 评论详情 -->
|
||||||
|
<div id="comment-content" class="commentInfo-detail"
|
||||||
|
v-for="(item, index) in comments"
|
||||||
|
:key="index">
|
||||||
|
<!-- 头像 -->
|
||||||
|
<el-avatar shape="square" class="commentInfo-avatar" :size="35" :src="item.avatar"></el-avatar>
|
||||||
|
|
||||||
|
<div style="flex: 1;padding-left: 12px">
|
||||||
|
<!-- 评论信息 -->
|
||||||
|
<div style="display: flex;justify-content: space-between">
|
||||||
|
<div>
|
||||||
|
<span class="commentInfo-username">{{ item.username }}</span>
|
||||||
|
<span class="commentInfo-master" v-if="item.userId === userId">主人翁</span>
|
||||||
|
<span class="commentInfo-other">{{ $common.getDateDiff(item.createTime) }}</span>
|
||||||
|
</div>
|
||||||
|
<div class="commentInfo-reply" @click="replyDialog(item, item)">
|
||||||
|
<span v-if="item.childComments.total > 0">{{item.childComments.total}} </span><span>回复</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 评论内容 -->
|
||||||
|
<div class="commentInfo-content">
|
||||||
|
<span v-html="item.commentContent"></span>
|
||||||
|
</div>
|
||||||
|
<!-- 回复模块 -->
|
||||||
|
<div v-if="!$common.isEmpty(item.childComments) && !$common.isEmpty(item.childComments.records)">
|
||||||
|
<div class="commentInfo-detail" v-for="(childItem, i) in item.childComments.records" :key="i">
|
||||||
|
<!-- 头像 -->
|
||||||
|
<el-avatar shape="square" class="commentInfo-avatar" :size="30" :src="childItem.avatar"></el-avatar>
|
||||||
|
|
||||||
|
<div style="flex: 1;padding-left: 12px">
|
||||||
|
<!-- 评论信息 -->
|
||||||
|
<div style="display: flex;justify-content: space-between">
|
||||||
|
<div>
|
||||||
|
<span class="commentInfo-username-small">{{ childItem.username }}</span>
|
||||||
|
<span class="commentInfo-master" v-if="childItem.userId === userId">主人翁</span>
|
||||||
|
<span class="commentInfo-other">{{ $common.getDateDiff(childItem.createTime) }}</span>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<span class="commentInfo-reply" @click="replyDialog(childItem, item)">回复</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 评论内容 -->
|
||||||
|
<div class="commentInfo-content">
|
||||||
|
<template v-if="childItem.parentCommentId !== item.id &&
|
||||||
|
childItem.parentUserId !== childItem.userId">
|
||||||
|
<span style="color: var(--blue)">@{{ childItem.parentUsername }} </span>:
|
||||||
|
</template>
|
||||||
|
<span v-html="childItem.commentContent"></span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<div class="pagination-wrap" v-if="item.childComments.records.length < item.childComments.total">
|
||||||
|
<div class="pagination"
|
||||||
|
@click="toChildPage(item)">
|
||||||
|
展开
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 分页 -->
|
||||||
|
<proPage :current="pagination.current"
|
||||||
|
:size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
:buttonSize="6"
|
||||||
|
:color="$constant.commentPageColor"
|
||||||
|
@toPage="toPage">
|
||||||
|
</proPage>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div v-else class="myCenter" style="color: var(--greyFont)">
|
||||||
|
<i>来发第一个留言啦~</i>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog title="留言"
|
||||||
|
:visible.sync="replyDialogVisible"
|
||||||
|
width="30%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div>
|
||||||
|
<commentBox :disableGraffiti="true"
|
||||||
|
@submitComment="submitReply">
|
||||||
|
</commentBox>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// const graffiti = () => import( "./graffiti");
|
||||||
|
const commentBox = () => import( "./commentBox");
|
||||||
|
const proPage = () => import( "../common/proPage");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
// graffiti,
|
||||||
|
commentBox,
|
||||||
|
proPage
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
source: {
|
||||||
|
type: Number
|
||||||
|
},
|
||||||
|
type: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
userId: {
|
||||||
|
type: Number
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
isGraffiti: false,
|
||||||
|
total: 0,
|
||||||
|
replyDialogVisible: false,
|
||||||
|
floorComment: {},
|
||||||
|
replyComment: {},
|
||||||
|
comments: [],
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
source: this.source,
|
||||||
|
commentType: this.type,
|
||||||
|
floorCommentId: null
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getComments(this.pagination);
|
||||||
|
this.getTotal();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
toPage(page) {
|
||||||
|
this.pagination.current = page;
|
||||||
|
window.scrollTo({
|
||||||
|
top: document.getElementById('comment-content').offsetTop
|
||||||
|
});
|
||||||
|
this.getComments(this.pagination);
|
||||||
|
},
|
||||||
|
getTotal() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/comment/getCommentCount", {source: this.source, type: this.type})
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.total = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
toChildPage(floorComment) {
|
||||||
|
floorComment.childComments.current += 1;
|
||||||
|
let pagination = {
|
||||||
|
current: floorComment.childComments.current,
|
||||||
|
size: 5,
|
||||||
|
total: 0,
|
||||||
|
source: this.source,
|
||||||
|
commentType: this.type,
|
||||||
|
floorCommentId: floorComment.id
|
||||||
|
}
|
||||||
|
this.getComments(pagination, floorComment, true);
|
||||||
|
},
|
||||||
|
emoji(comments, flag) {
|
||||||
|
comments.forEach(c => {
|
||||||
|
c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
|
||||||
|
c.commentContent = this.$common.faceReg(c.commentContent);
|
||||||
|
c.commentContent = this.$common.pictureReg(c.commentContent);
|
||||||
|
if (flag) {
|
||||||
|
if (!this.$common.isEmpty(c.childComments) && !this.$common.isEmpty(c.childComments.records)) {
|
||||||
|
c.childComments.records.forEach(cc => {
|
||||||
|
c.commentContent = c.commentContent.replace(/\n/g, '<br/>');
|
||||||
|
cc.commentContent = this.$common.faceReg(cc.commentContent);
|
||||||
|
cc.commentContent = this.$common.pictureReg(cc.commentContent);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getComments(pagination, floorComment = {}, isToPage = false) {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/comment/listComment", pagination)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data) && !this.$common.isEmpty(res.data.records)) {
|
||||||
|
if (this.$common.isEmpty(floorComment)) {
|
||||||
|
this.comments = res.data.records;
|
||||||
|
pagination.total = res.data.total;
|
||||||
|
this.emoji(this.comments, true);
|
||||||
|
} else {
|
||||||
|
if (isToPage === false) {
|
||||||
|
floorComment.childComments = res.data;
|
||||||
|
} else {
|
||||||
|
floorComment.childComments.total = res.data.total;
|
||||||
|
floorComment.childComments.records = floorComment.childComments.records.concat(res.data.records);
|
||||||
|
}
|
||||||
|
this.emoji(floorComment.childComments.records, false);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addGraffitiComment(graffitiComment) {
|
||||||
|
this.submitComment(graffitiComment);
|
||||||
|
},
|
||||||
|
submitComment(commentContent) {
|
||||||
|
let comment = {
|
||||||
|
source: this.source,
|
||||||
|
type: this.type,
|
||||||
|
commentContent: commentContent
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$http.post(this.$constant.baseURL + "/comment/saveComment", comment)
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '保存成功！'
|
||||||
|
});
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
source: this.source,
|
||||||
|
commentType: this.type,
|
||||||
|
floorCommentId: null
|
||||||
|
}
|
||||||
|
this.getComments(this.pagination);
|
||||||
|
this.getTotal();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submitReply(commentContent) {
|
||||||
|
let comment = {
|
||||||
|
source: this.source,
|
||||||
|
type: this.type,
|
||||||
|
floorCommentId: this.floorComment.id,
|
||||||
|
commentContent: commentContent,
|
||||||
|
parentCommentId: this.replyComment.id,
|
||||||
|
parentUserId: this.replyComment.userId
|
||||||
|
};
|
||||||
|
|
||||||
|
let floorComment = this.floorComment;
|
||||||
|
|
||||||
|
this.$http.post(this.$constant.baseURL + "/comment/saveComment", comment)
|
||||||
|
.then((res) => {
|
||||||
|
let pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 5,
|
||||||
|
total: 0,
|
||||||
|
source: this.source,
|
||||||
|
commentType: this.type,
|
||||||
|
floorCommentId: floorComment.id
|
||||||
|
}
|
||||||
|
this.getComments(pagination, floorComment);
|
||||||
|
this.getTotal();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.handleClose();
|
||||||
|
},
|
||||||
|
replyDialog(comment, floorComment) {
|
||||||
|
this.replyComment = comment;
|
||||||
|
this.floorComment = floorComment;
|
||||||
|
this.replyDialogVisible = true;
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.replyDialogVisible = false;
|
||||||
|
this.floorComment = {};
|
||||||
|
this.replyComment = {};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.comment-head {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
font-size: 20px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin: 40px 0 20px 0;
|
||||||
|
user-select: none;
|
||||||
|
color: var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-title {
|
||||||
|
margin-bottom: 20px;
|
||||||
|
color: var(--greyFont);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-detail {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-avatar {
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-username {
|
||||||
|
color: var(--orangeRed);
|
||||||
|
font-size: 16px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-username-small {
|
||||||
|
color: var(--orangeRed);
|
||||||
|
font-size: 14px;
|
||||||
|
font-weight: 600;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-master {
|
||||||
|
color: var(--green);
|
||||||
|
border: 1px solid var(--green);
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
font-size: 12px;
|
||||||
|
padding: 2px 4px;
|
||||||
|
margin-right: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-other {
|
||||||
|
font-size: 12px;
|
||||||
|
color: var(--greyFont);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-reply {
|
||||||
|
font-size: 12px;
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
color: var(--white);
|
||||||
|
background: var(--themeBackground);
|
||||||
|
border-radius: 0.2rem;
|
||||||
|
padding: 3px 6px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.commentInfo-content {
|
||||||
|
margin: 15px 0 25px;
|
||||||
|
padding: 18px 20px;
|
||||||
|
background: var(--commentContent);
|
||||||
|
border-radius: 12px;
|
||||||
|
color: var(--black);
|
||||||
|
word-break: break-word;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
padding: 6px 20px;
|
||||||
|
border: 1px solid var(--lightGray);
|
||||||
|
border-radius: 3rem;
|
||||||
|
color: var(--greyFont);
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination:hover {
|
||||||
|
border: 1px solid var(--themeBackground);
|
||||||
|
color: var(--themeBackground);
|
||||||
|
box-shadow: 0 0 5px var(--themeBackground);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,185 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 框 -->
|
||||||
|
<textarea
|
||||||
|
class="comment-textarea"
|
||||||
|
v-model="commentContent"
|
||||||
|
placeholder="写下点什么..."
|
||||||
|
maxlength="1000"/>
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<div class="myBetween" style="margin-bottom: 10px">
|
||||||
|
<div style="display: flex">
|
||||||
|
<div :class="{'emoji-active':showEmoji}"
|
||||||
|
@click="showEmoji = !showEmoji">
|
||||||
|
<i class="el-icon-orange myEmoji"></i>
|
||||||
|
</div>
|
||||||
|
<div @click="openPicture()">
|
||||||
|
<i class="el-icon-picture myPicture"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="display: flex">
|
||||||
|
<!-- <proButton :info="'涂鸦'"-->
|
||||||
|
<!-- v-show="!$common.mobile() && !disableGraffiti"-->
|
||||||
|
<!-- @click.native="showGraffiti()"-->
|
||||||
|
<!-- :before="$constant.before_color_1"-->
|
||||||
|
<!-- :after="$constant.after_color_1"-->
|
||||||
|
<!-- style="margin-right: 6px">-->
|
||||||
|
<!-- </proButton>-->
|
||||||
|
<proButton :info="'提交'"
|
||||||
|
@click.native="submitComment()"
|
||||||
|
:before="$constant.before_color_2"
|
||||||
|
:after="$constant.after_color_2">
|
||||||
|
</proButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 表情 -->
|
||||||
|
<emoji @addEmoji="addEmoji" :showEmoji="showEmoji"></emoji>
|
||||||
|
|
||||||
|
<el-dialog title="图片"
|
||||||
|
:visible.sync="showPicture"
|
||||||
|
width="25%"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div>
|
||||||
|
<uploadPicture :prefix="'commentPicture'" @addPicture="addPicture" :maxSize="5"
|
||||||
|
:maxNumber="1"></uploadPicture>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const emoji = () => import( "../common/emoji");
|
||||||
|
const proButton = () => import( "../common/proButton");
|
||||||
|
const uploadPicture = () => import( "../common/uploadPicture");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
emoji,
|
||||||
|
proButton,
|
||||||
|
uploadPicture
|
||||||
|
},
|
||||||
|
props: {
|
||||||
|
disableGraffiti: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
commentContent: "",
|
||||||
|
showEmoji: false,
|
||||||
|
showPicture: false,
|
||||||
|
picture: {
|
||||||
|
name: this.$store.state.currentUser.username,
|
||||||
|
url: ""
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
openPicture() {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showPicture = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
addPicture(res) {
|
||||||
|
this.picture.url = res;
|
||||||
|
this.savePicture();
|
||||||
|
},
|
||||||
|
savePicture() {
|
||||||
|
let img = "<" + this.picture.name + "," + this.picture.url + ">";
|
||||||
|
this.commentContent += img;
|
||||||
|
this.picture.url = "";
|
||||||
|
this.showPicture = false;
|
||||||
|
},
|
||||||
|
addEmoji(key) {
|
||||||
|
this.commentContent += key;
|
||||||
|
},
|
||||||
|
showGraffiti() {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.commentContent = "";
|
||||||
|
this.$emit("showGraffiti");
|
||||||
|
},
|
||||||
|
submitComment() {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.commentContent.trim() === "") {
|
||||||
|
this.$message({
|
||||||
|
message: "你还没写呢~",
|
||||||
|
type: "warning"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.$emit("submitComment", this.commentContent.trim());
|
||||||
|
this.commentContent = "";
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.comment-textarea {
|
||||||
|
border: 1px solid var(--lightGray);
|
||||||
|
width: 100%;
|
||||||
|
font-size: 14px;
|
||||||
|
padding: 15px;
|
||||||
|
min-height: 180px;
|
||||||
|
/* 不改变大小 */
|
||||||
|
resize: none;
|
||||||
|
/* 不改变边框 */
|
||||||
|
outline: none;
|
||||||
|
border-radius: 4px;
|
||||||
|
background-image: var(--commentURL);
|
||||||
|
background-size: contain;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-position: 100%;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-textarea:focus {
|
||||||
|
border-color: var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.myEmoji {
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.5s;
|
||||||
|
margin-right: 12px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myEmoji:hover {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
font-size: 22px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myPicture {
|
||||||
|
font-size: 18px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-active {
|
||||||
|
color: var(--red);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,408 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 画布 -->
|
||||||
|
<div style="padding: 5px" @mousemove="canvasOutMove($event)" @touchmove="canvasOutMove($event)">
|
||||||
|
<div class="graffiti-container">
|
||||||
|
<canvas id="canvas"
|
||||||
|
width="766"
|
||||||
|
height="400"
|
||||||
|
@mousedown="canvasDown($event)"
|
||||||
|
@mouseup="canvasUp($event)"
|
||||||
|
@mousemove="canvasMove($event)"
|
||||||
|
@touchstart="canvasDown($event)"
|
||||||
|
@touchend="canvasUp($event)"
|
||||||
|
@touchmove="canvasMove($event)">
|
||||||
|
</canvas>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="padding: 10px 0 0 5px;">
|
||||||
|
<!-- 颜色 -->
|
||||||
|
<div class="graffiti-tools">
|
||||||
|
<span class="graffiti-title">画笔颜色</span>
|
||||||
|
<div class="myCenter" style="margin-left: 2rem">
|
||||||
|
<div v-for="(color, index) in colors"
|
||||||
|
:class="{ activeColor: config.lineColor === color }"
|
||||||
|
:style="{ background: color }"
|
||||||
|
@click="setColor(color)"
|
||||||
|
class="graffiti-color"
|
||||||
|
:key="index">
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 大小 -->
|
||||||
|
<div class="graffiti-tools">
|
||||||
|
<span class="graffiti-title">画笔大小</span>
|
||||||
|
<div class="myCenter" style="margin-left: 2rem">
|
||||||
|
<i v-for="(pen, index) in brushSize"
|
||||||
|
:key="index"
|
||||||
|
class="graffiti-size"
|
||||||
|
:class="[pen.className, { activeSize: config.lineWidth === pen.lineWidth }]"
|
||||||
|
@click="setBrush(pen.lineWidth)">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 操作 -->
|
||||||
|
<div class="graffiti-tools">
|
||||||
|
<span class="graffiti-title">操作</span>
|
||||||
|
<div class="myCenter" style="margin-left: 3.7rem">
|
||||||
|
<i v-for="(control, index) in controls"
|
||||||
|
:title="control.title"
|
||||||
|
:class="control.className"
|
||||||
|
class="graffiti-operate"
|
||||||
|
@click="controlCanvas(control.action)"
|
||||||
|
:key="index">
|
||||||
|
</i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 按钮 -->
|
||||||
|
<div class="graffiti-tools" style="justify-content: center">
|
||||||
|
<proButton :info="'文字'"
|
||||||
|
@click.native="showComment()"
|
||||||
|
:before="$constant.before_color_1"
|
||||||
|
:after="$constant.after_color_1"
|
||||||
|
style="margin-right: 6px">
|
||||||
|
</proButton>
|
||||||
|
<proButton :info="'提交'"
|
||||||
|
@click.native="getImage()"
|
||||||
|
:before="$constant.before_color_2"
|
||||||
|
:after="$constant.after_color_2">
|
||||||
|
</proButton>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const proButton = () => import( "../common/proButton");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
proButton
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
context: {},
|
||||||
|
canvasMoveUse: false,
|
||||||
|
// 存储当前表面状态数组-上一步
|
||||||
|
preDrawAry: [],
|
||||||
|
// 存储当前表面状态数组-下一步
|
||||||
|
nextDrawAry: [],
|
||||||
|
// 中间数组
|
||||||
|
middleAry: [],
|
||||||
|
// 配置参数
|
||||||
|
config: {
|
||||||
|
lineWidth: 5,
|
||||||
|
lineColor: "#8154A3",
|
||||||
|
shadowBlur: 2,
|
||||||
|
},
|
||||||
|
colors: ["#8154A3", "#fef4ac", "#0018ba", "#ffc200", "#f32f15", "#cccccc", "#5ab639"],
|
||||||
|
brushSize: [{
|
||||||
|
className: "small el-icon-edit",
|
||||||
|
lineWidth: 5,
|
||||||
|
}, {
|
||||||
|
className: "middle el-icon-edit",
|
||||||
|
lineWidth: 10,
|
||||||
|
}, {
|
||||||
|
className: "big el-icon-edit",
|
||||||
|
lineWidth: 15,
|
||||||
|
}]
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
controls() {
|
||||||
|
return [{
|
||||||
|
title: "上一步",
|
||||||
|
action: "prev",
|
||||||
|
className: this.preDrawAry.length
|
||||||
|
? "active el-icon-arrow-left"
|
||||||
|
: "ban el-icon-arrow-left",
|
||||||
|
}, {
|
||||||
|
title: "下一步",
|
||||||
|
action: "next",
|
||||||
|
className: this.nextDrawAry.length
|
||||||
|
? "active el-icon-arrow-right"
|
||||||
|
: "ban el-icon-arrow-right",
|
||||||
|
}, {
|
||||||
|
title: "清除",
|
||||||
|
action: "clear",
|
||||||
|
className:
|
||||||
|
this.preDrawAry.length || this.nextDrawAry.length
|
||||||
|
? "active el-icon-refresh"
|
||||||
|
: "ban el-icon-refresh",
|
||||||
|
}];
|
||||||
|
}
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
const canvas = document.querySelector("#canvas");
|
||||||
|
this.context = canvas.getContext("2d", {willReadFrequently: true});
|
||||||
|
this.initDraw();
|
||||||
|
this.setCanvasStyle();
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
canvasOutMove(e) {
|
||||||
|
const canvas = document.querySelector("#canvas");
|
||||||
|
if (e.target !== canvas) {
|
||||||
|
this.canvasMoveUse = false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
initDraw() {
|
||||||
|
const preData = this.context.getImageData(0, 0, 1200, 600);
|
||||||
|
// 空绘图表面进栈
|
||||||
|
this.middleAry.push(preData);
|
||||||
|
},
|
||||||
|
canvasUp(e) {
|
||||||
|
const preData = this.context.getImageData(0, 0, 1200, 600);
|
||||||
|
if (!this.nextDrawAry.length) {
|
||||||
|
// 当前绘图表面进栈
|
||||||
|
this.middleAry.push(preData);
|
||||||
|
} else {
|
||||||
|
this.middleAry = [];
|
||||||
|
this.middleAry = this.middleAry.concat(this.preDrawAry);
|
||||||
|
this.middleAry.push(preData);
|
||||||
|
this.nextDrawAry = [];
|
||||||
|
}
|
||||||
|
this.canvasMoveUse = false;
|
||||||
|
this.context.beginPath();
|
||||||
|
},
|
||||||
|
canvasDown(e) {
|
||||||
|
this.canvasMoveUse = true;
|
||||||
|
// client是基于整个页面的坐标
|
||||||
|
// offset是canvas距离顶部以及左边的距离
|
||||||
|
this.setCanvasStyle();
|
||||||
|
// 清除子路径
|
||||||
|
this.context.beginPath();
|
||||||
|
this.context.moveTo(e.layerX, e.layerY);
|
||||||
|
// 当前绘图表面状态
|
||||||
|
const preData = this.context.getImageData(0, 0, 1200, 600);
|
||||||
|
// 当前绘图表面进栈
|
||||||
|
this.preDrawAry.push(preData);
|
||||||
|
},
|
||||||
|
canvasMove(e) {
|
||||||
|
if (this.canvasMoveUse) {
|
||||||
|
this.context.lineTo(e.layerX, e.layerY);
|
||||||
|
this.context.stroke();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 设置绘画配置
|
||||||
|
setCanvasStyle() {
|
||||||
|
this.context.lineWidth = this.config.lineWidth;
|
||||||
|
this.context.shadowBlur = this.config.shadowBlur;
|
||||||
|
this.context.shadowColor = this.config.lineColor;
|
||||||
|
this.context.strokeStyle = this.config.lineColor;
|
||||||
|
},
|
||||||
|
// 设置颜色
|
||||||
|
setColor(color) {
|
||||||
|
this.config.lineColor = color;
|
||||||
|
},
|
||||||
|
// 设置笔刷大小
|
||||||
|
setBrush(size) {
|
||||||
|
this.config.lineWidth = size;
|
||||||
|
},
|
||||||
|
controlCanvas(action) {
|
||||||
|
switch (action) {
|
||||||
|
case "prev":
|
||||||
|
if (this.preDrawAry.length) {
|
||||||
|
const popData = this.preDrawAry.pop();
|
||||||
|
const midData = this.middleAry[this.preDrawAry.length + 1];
|
||||||
|
this.nextDrawAry.push(midData);
|
||||||
|
this.context.putImageData(popData, 0, 0);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "next":
|
||||||
|
if (this.nextDrawAry.length) {
|
||||||
|
const popData = this.nextDrawAry.pop();
|
||||||
|
const midData = this.middleAry[this.middleAry.length - this.nextDrawAry.length - 2];
|
||||||
|
this.preDrawAry.push(midData);
|
||||||
|
this.context.putImageData(popData, 0, 0);
|
||||||
|
}
|
||||||
|
break;
|
||||||
|
case "clear":
|
||||||
|
this.clearContext();
|
||||||
|
this.middleAry = [this.middleAry[0]];
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
clearContext() {
|
||||||
|
this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height);
|
||||||
|
this.preDrawAry = [];
|
||||||
|
this.nextDrawAry = [];
|
||||||
|
},
|
||||||
|
showComment() {
|
||||||
|
this.clearContext();
|
||||||
|
this.$emit("showComment");
|
||||||
|
},
|
||||||
|
getImage() {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (this.preDrawAry.length < 1) {
|
||||||
|
this.$message({
|
||||||
|
message: "你还没画呢~",
|
||||||
|
type: "warning"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const canvas = document.querySelector("#canvas");
|
||||||
|
const dataURL = canvas.toDataURL("image/png");
|
||||||
|
let arr = dataURL.split(","),
|
||||||
|
mine = arr[0].match(/:(.*?);/)[1],
|
||||||
|
str = atob(arr[1]),
|
||||||
|
n = str.length,
|
||||||
|
u8arr = new Uint8Array(n);
|
||||||
|
while (n--) {
|
||||||
|
u8arr[n] = str.charCodeAt(n);
|
||||||
|
}
|
||||||
|
let obj = new Blob([u8arr], {type: mine});
|
||||||
|
let key = "graffiti" + "/" + this.$store.state.currentUser.username.replace(/[^a-zA-Z]/g, '') + this.$store.state.currentUser.id + new Date().getTime() + Math.floor(Math.random() * 1000) + ".png";
|
||||||
|
|
||||||
|
let storeType = localStorage.getItem("defaultStoreType");
|
||||||
|
|
||||||
|
let fd = new FormData();
|
||||||
|
fd.append("file", obj);
|
||||||
|
fd.append("key", key);
|
||||||
|
fd.append("relativePath", key);
|
||||||
|
fd.append("type", "graffiti");
|
||||||
|
fd.append("storeType", storeType);
|
||||||
|
|
||||||
|
if (storeType === "local") {
|
||||||
|
this.saveLocal(fd);
|
||||||
|
} else if (storeType === "qiniu") {
|
||||||
|
this.saveQiniu(fd);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
saveLocal(fd) {
|
||||||
|
this.$http.upload(this.$constant.baseURL + "/resource/upload", fd)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.clearContext();
|
||||||
|
let url = res.data;
|
||||||
|
let img = "<你画我猜," + url + ">";
|
||||||
|
this.$emit("addGraffitiComment", img);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
saveQiniu(fd) {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/qiniu/getUpToken", {key: fd.get("key")})
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
fd.append("token", res.data);
|
||||||
|
|
||||||
|
this.$http.uploadQiniu(this.$constant.qiniuUrl, fd)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.key)) {
|
||||||
|
this.clearContext();
|
||||||
|
let url = this.$constant.qiniuDownload + res.key;
|
||||||
|
let file = fd.get("file");
|
||||||
|
this.$common.saveResource(this, "graffiti", url, file.size, file.type, "qiniu");
|
||||||
|
let img = "<你画我猜," + url + ">";
|
||||||
|
this.$emit("addGraffitiComment", img);
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.graffiti-container {
|
||||||
|
overflow: hidden;
|
||||||
|
border: 2px var(--lightGray) solid;
|
||||||
|
border-radius: 4px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-tools {
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-title {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-color {
|
||||||
|
width: 1rem;
|
||||||
|
height: 1rem;
|
||||||
|
border-radius: 50%;
|
||||||
|
float: left;
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-color:hover {
|
||||||
|
width: 1.3rem;
|
||||||
|
height: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeColor {
|
||||||
|
width: 1.3rem;
|
||||||
|
height: 1.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-size {
|
||||||
|
cursor: pointer;
|
||||||
|
margin-right: 20px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-size.small {
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-size.middle {
|
||||||
|
font-size: 16px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-size.big {
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.activeSize {
|
||||||
|
background-color: var(--themeBackground);
|
||||||
|
color: var(--white);
|
||||||
|
border-radius: 50%;
|
||||||
|
padding: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-operate {
|
||||||
|
margin-right: 20px;
|
||||||
|
cursor: pointer;
|
||||||
|
font-size: 18px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.graffiti-operate.ban {
|
||||||
|
cursor: not-allowed
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,79 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<transition name="body">
|
||||||
|
<div v-show="showEmoji">
|
||||||
|
<span class="emoji-item"
|
||||||
|
v-for="(value, key, index) in emojiListURL"
|
||||||
|
:key="index"
|
||||||
|
@click="addEmoji(key)">
|
||||||
|
<img class="emoji" :src="value" :title="key" width="24px" height="24px"/>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
</transition>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
showEmoji: {
|
||||||
|
type: Boolean
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
emojiList: this.$constant.emojiList,
|
||||||
|
emojiListURL: {}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.emojiListURL = this.getEmojiList(this.emojiList);
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
addEmoji(key) {
|
||||||
|
this.$emit("addEmoji", key);
|
||||||
|
},
|
||||||
|
getEmojiList(emojiList) {
|
||||||
|
let emojiName;
|
||||||
|
let url;
|
||||||
|
let result = {}
|
||||||
|
for (let i = 0; i < emojiList.length; i++) {
|
||||||
|
emojiName = "[" + emojiList[i] + "]";
|
||||||
|
let j = i + 1;
|
||||||
|
url = this.$constant.qiniuDownload + "emoji/q" + j + ".gif";
|
||||||
|
result[emojiName] = url;
|
||||||
|
}
|
||||||
|
return result;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.emoji-item {
|
||||||
|
cursor: pointer;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji-item:hover {
|
||||||
|
transition: all 0.2s;
|
||||||
|
border-radius: 0.25rem;
|
||||||
|
background: var(--lightGray);
|
||||||
|
}
|
||||||
|
|
||||||
|
.emoji {
|
||||||
|
margin: 0.25rem;
|
||||||
|
/* 把此元素放置在父元素的中部 */
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-enter-active, .body-leave-active {
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.body-enter, .body-leave-to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: scale(0.5);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,155 @@
|
|||||||
|
<template>
|
||||||
|
<div class="card-container" v-if="!$common.isEmpty(resourcePathList)">
|
||||||
|
<div v-for="(resourcePath, index) in resourcePathList"
|
||||||
|
:key="index"
|
||||||
|
class="card-item wow shadow-box-mini">
|
||||||
|
<div class="card-image">
|
||||||
|
<el-image class="my-el-image"
|
||||||
|
v-once
|
||||||
|
lazy
|
||||||
|
:preview-src-list="[resourcePath.cover]"
|
||||||
|
:src="resourcePath.cover"
|
||||||
|
fit="cover">
|
||||||
|
<div slot="error" class="image-slot"></div>
|
||||||
|
</el-image>
|
||||||
|
</div>
|
||||||
|
<div class="card-body">
|
||||||
|
<el-tooltip placement="bottom-start" effect="light">
|
||||||
|
<div slot="content">{{resourcePath.title}}</div>
|
||||||
|
<div class="card-desc">
|
||||||
|
{{resourcePath.title}}
|
||||||
|
</div>
|
||||||
|
</el-tooltip>
|
||||||
|
<div class="card-time">
|
||||||
|
Date: {{$common.getDateDiff(resourcePath.createTime)}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
resourcePathList: {
|
||||||
|
type: Array
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-item {
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 15px;
|
||||||
|
height: 550px;
|
||||||
|
flex-shrink: 0;
|
||||||
|
width: calc(100% / 3 - 30px);
|
||||||
|
cursor: pointer;
|
||||||
|
animation: zoomIn 0.8s ease-in-out;
|
||||||
|
padding: 1.3rem 1.3rem 1.5rem;
|
||||||
|
background: var(--background);
|
||||||
|
border-radius: 1.5rem;
|
||||||
|
transition: all 0.2s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image {
|
||||||
|
width: 100%;
|
||||||
|
height: 400px;
|
||||||
|
border-radius: 1rem;
|
||||||
|
overflow: hidden;
|
||||||
|
box-shadow: 0 2px 10px rgba(147, 147, 147, 0.61);
|
||||||
|
margin-bottom: 1rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image >>> .el-image__inner {
|
||||||
|
transition: all 1s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image >>> .el-image__inner:hover {
|
||||||
|
transform: scale(1.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-body {
|
||||||
|
padding: 10px 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-desc {
|
||||||
|
font-weight: 600;
|
||||||
|
font-size: 1.05rem;
|
||||||
|
color: var(--fontColor);
|
||||||
|
letter-spacing: 1px;
|
||||||
|
line-height: 1.5;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-time {
|
||||||
|
position: absolute;
|
||||||
|
bottom: 15px;
|
||||||
|
color: #999999;
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1300px) {
|
||||||
|
.card-item {
|
||||||
|
width: calc(100% / 2 - 30px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
.card-item {
|
||||||
|
height: 450px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 750px) {
|
||||||
|
.card-item {
|
||||||
|
width: 100%;
|
||||||
|
margin: 15px 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 450px) {
|
||||||
|
.card-item {
|
||||||
|
height: 400px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-image {
|
||||||
|
height: 250px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,72 @@
|
|||||||
|
<template>
|
||||||
|
<div class="myButton">
|
||||||
|
<div :style="beforeColor">{{info}}</div>
|
||||||
|
<div :style="afterColor">{{info}}</div>
|
||||||
|
<div :style="afterColor">{{info}}</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
info: {
|
||||||
|
type: String,
|
||||||
|
default: "确定"
|
||||||
|
},
|
||||||
|
before: {
|
||||||
|
type: String
|
||||||
|
},
|
||||||
|
after: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
beforeColor: {"background": this.before},
|
||||||
|
afterColor: {"background": this.after}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
.myButton {
|
||||||
|
cursor: pointer;
|
||||||
|
user-select: none;
|
||||||
|
position: relative;
|
||||||
|
width: 66px;
|
||||||
|
height: 33px;
|
||||||
|
border-radius: 4px;
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 14px;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton div {
|
||||||
|
width: 66px;
|
||||||
|
height: 33px;
|
||||||
|
line-height: 33px;
|
||||||
|
border-radius: 4px;
|
||||||
|
text-align: center;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton div:nth-child(2) {
|
||||||
|
width: 100px;
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
transform: translateX(-120px) skewX(-30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton div:nth-child(3) {
|
||||||
|
transition: all 0.3s ease;
|
||||||
|
transform: translateX(-120px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton:hover div:nth-child(2) {
|
||||||
|
transform: translateX(20px) skewX(-30deg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.myButton:hover div:nth-child(3) {
|
||||||
|
transform: translateX(0px);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,131 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="total > size" class="myCenter">
|
||||||
|
<ul class="page-content">
|
||||||
|
<li class="page-item" v-if="current !== 1" @click="toPage(-1)">
|
||||||
|
👈
|
||||||
|
</li>
|
||||||
|
<template v-if="current === 1">
|
||||||
|
<li class="page-item"
|
||||||
|
:style="{background: index === 1 ? color : '', color: index === 1 ? 'var(--white)' : ''}"
|
||||||
|
v-for="index of realButtonSize"
|
||||||
|
:key="index"
|
||||||
|
@click="toPage(index)">
|
||||||
|
{{index}}
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
<template v-else-if="current === totalSize">
|
||||||
|
<li class="page-item"
|
||||||
|
:style="{background: index === realButtonSize ? color : '', color: index === realButtonSize ? 'var(--white)' : ''}"
|
||||||
|
v-for="index of realButtonSize"
|
||||||
|
:key="index"
|
||||||
|
@click="toPage(current - (realButtonSize - index))">
|
||||||
|
{{current - (realButtonSize - index)}}
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<li class="page-item"
|
||||||
|
:style="{background: Math.ceil(realButtonSize/2) - index === 0 ? color : '', color: Math.ceil(realButtonSize/2) - index === 0 ? 'var(--white)' : ''}"
|
||||||
|
v-for="index of realButtonSize"
|
||||||
|
:key="index"
|
||||||
|
@click="toPage(current - (Math.ceil(realButtonSize/2) - index))">
|
||||||
|
{{current - (Math.ceil(realButtonSize/2) - index)}}
|
||||||
|
</li>
|
||||||
|
</template>
|
||||||
|
<li class="page-item" v-if="current !== totalSize" @click="toPage(-2)">
|
||||||
|
👉
|
||||||
|
</li>
|
||||||
|
</ul>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
current: {
|
||||||
|
type: Number,
|
||||||
|
default: 1
|
||||||
|
},
|
||||||
|
size: {
|
||||||
|
type: Number,
|
||||||
|
default: 10
|
||||||
|
},
|
||||||
|
total: {
|
||||||
|
type: Number,
|
||||||
|
default: 0
|
||||||
|
},
|
||||||
|
buttonSize: {
|
||||||
|
type: Number,
|
||||||
|
default: 3
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String,
|
||||||
|
default: ""
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
totalSize: 0,
|
||||||
|
realButtonSize: 0
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
total(newVal) {
|
||||||
|
this.totalSize = Math.ceil(this.total / this.size);
|
||||||
|
this.realButtonSize = this.buttonSize < this.totalSize ? this.buttonSize : this.totalSize;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.totalSize = Math.ceil(this.total / this.size);
|
||||||
|
this.realButtonSize = this.buttonSize < this.totalSize ? this.buttonSize : this.totalSize;
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
toPage(flag) {
|
||||||
|
if (flag === -1) {
|
||||||
|
this.$emit("toPage", this.current - 1);
|
||||||
|
} else if (flag === -2) {
|
||||||
|
this.$emit("toPage", this.current + 1);
|
||||||
|
} else {
|
||||||
|
this.$emit("toPage", flag);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.page-content {
|
||||||
|
display: flex;
|
||||||
|
padding: 0;
|
||||||
|
margin: 30px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item {
|
||||||
|
margin: 0 10px;
|
||||||
|
list-style: none;
|
||||||
|
border: 1px solid var(--lightGray);
|
||||||
|
width: 40px;
|
||||||
|
height: 40px;
|
||||||
|
line-height: 38px;
|
||||||
|
text-align: center;
|
||||||
|
border-radius: 50%;
|
||||||
|
color: var(--black);
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-item:hover {
|
||||||
|
border: 1px solid var(--themeBackground);
|
||||||
|
box-shadow: 0 0 5px var(--themeBackground);
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
<template>
|
||||||
|
<div class="myTag" :style="bg">
|
||||||
|
<span class="name">🔖 {{info}}</span>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
info: {
|
||||||
|
type: String,
|
||||||
|
default: "一只小毛驴"
|
||||||
|
},
|
||||||
|
color: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
bg: {"background": this.color}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.myTag {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--white);
|
||||||
|
border-radius: 5px;
|
||||||
|
padding: 8px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.myTag:hover {
|
||||||
|
background: var(--gradualRed) !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,112 @@
|
|||||||
|
<template>
|
||||||
|
<div v-if="!$common.isEmpty(treeHoleList)">
|
||||||
|
<div class="process-line">
|
||||||
|
<div class="process-item"
|
||||||
|
v-for="(treeHole, index) in treeHoleList"
|
||||||
|
:key="index">
|
||||||
|
<div class="timeline-item-time">
|
||||||
|
<span>
|
||||||
|
{{$common.getDateDiff(treeHole.createTime)}}
|
||||||
|
</span>
|
||||||
|
<span @click="deleteTreeHole(treeHole.id)"
|
||||||
|
class="process-delete"
|
||||||
|
v-if="!$common.isEmpty($store.state.currentUser) && $store.state.currentUser.id === treeHole.userId">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="16" height="16" style="vertical-align: -3px">
|
||||||
|
<path
|
||||||
|
d="M921.1392 155.392h-270.592v-48.2816c0-22.7328-18.432-41.1648-41.1648-41.1648H426.3424a41.1648 41.1648 0 0 0-41.1648 41.1648v48.2816H110.6432c-14.1312 0-25.6 11.4688-25.6 25.6s11.4688 25.6 25.6 25.6h810.496c14.1312 0 25.6-11.4688 25.6-25.6s-11.4688-25.6-25.6-25.6zM170.8032 260.0448v592.8448c0 50.8928 41.2672 92.16 92.16 92.16h500.6848c50.8928 0 92.16-41.2672 92.16-92.16V260.0448H170.8032z m249.1392 462.7968c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z m243.1488 0c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z"
|
||||||
|
fill="#FF623E"></path>
|
||||||
|
</svg>
|
||||||
|
</span>
|
||||||
|
</div>
|
||||||
|
<div class="timeline-item-content" v-html="treeHole.content"></div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
treeHoleList: {
|
||||||
|
type: Array
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
deleteTreeHole(id) {
|
||||||
|
this.$emit("deleteTreeHole", id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.process-line {
|
||||||
|
border-left: 2px solid var(--lightGreen);
|
||||||
|
padding: 50px 20px 10px;
|
||||||
|
margin-left: 20px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-line:before {
|
||||||
|
content: '';
|
||||||
|
width: 8px;
|
||||||
|
height: 8px;
|
||||||
|
border: 4px solid var(--maxLightRed);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 15px;
|
||||||
|
left: -1px;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background-color: var(--white);
|
||||||
|
animation: weiYanShadowFlashing 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-item {
|
||||||
|
position: relative;
|
||||||
|
margin: 10px;
|
||||||
|
color: var(--fontColor);
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item-time::before {
|
||||||
|
position: absolute;
|
||||||
|
top: 5px;
|
||||||
|
left: -37px;
|
||||||
|
width: 6px;
|
||||||
|
height: 6px;
|
||||||
|
border: 3px solid var(--blue);
|
||||||
|
border-radius: 50%;
|
||||||
|
background: var(--white);
|
||||||
|
content: '';
|
||||||
|
}
|
||||||
|
|
||||||
|
.timeline-item-content {
|
||||||
|
padding: 12px 15px;
|
||||||
|
margin: 10px 0 15px;
|
||||||
|
border-radius: 10px;
|
||||||
|
background: rgba(66, 139, 202, 0.2);
|
||||||
|
}
|
||||||
|
|
||||||
|
.process-delete {
|
||||||
|
margin-left: 10px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,274 @@
|
|||||||
|
<template>
|
||||||
|
<div class="tree-hole-container">
|
||||||
|
<ol class="tree-hole-list" v-if="!$common.isEmpty(treeHoleList)">
|
||||||
|
<li class="tree-hole-li"
|
||||||
|
v-for="(treeHole, index) in treeHoleList"
|
||||||
|
:key="index">
|
||||||
|
<div class="tree-hole-content"
|
||||||
|
:class="{ leftTreeHole: index % 2 === 0 && !$common.mobile(), rightTreeHole: index % 2 !== 0 || $common.mobile() }">
|
||||||
|
<el-avatar shape="circle" class="avatar-img" :size="36" :src="currentUser.avatar"></el-avatar>
|
||||||
|
<div class="tree-hole-box"
|
||||||
|
:style="{background: $constant.tree_hole_color[index % $constant.tree_hole_color.length]}">
|
||||||
|
<div class="box-tag" v-if="index % 2 === 0 && !$common.mobile()"
|
||||||
|
:style="{'border-color': 'transparent transparent transparent '+$constant.tree_hole_color[index % $constant.tree_hole_color.length]}"></div>
|
||||||
|
<div class="box-tag" v-if="index % 2 !== 0 || $common.mobile()"
|
||||||
|
:style="{'border-color': 'transparent '+$constant.tree_hole_color[index % $constant.tree_hole_color.length]+' transparent transparent'}"></div>
|
||||||
|
<div class="my-content" v-html="treeHole.content"></div>
|
||||||
|
<div style="display: flex;justify-content: space-between">
|
||||||
|
<div>😃 {{treeHole.createTime}}</div>
|
||||||
|
<div @click="deleteTreeHole(treeHole.id)"
|
||||||
|
class="tree-hole-delete"
|
||||||
|
v-if="!$common.isEmpty($store.state.currentUser) && $store.state.currentUser.id === treeHole.userId">
|
||||||
|
<svg viewBox="0 0 1024 1024" width="18" height="18" style="vertical-align: -2px;">
|
||||||
|
<path
|
||||||
|
d="M921.1392 155.392h-270.592v-48.2816c0-22.7328-18.432-41.1648-41.1648-41.1648H426.3424a41.1648 41.1648 0 0 0-41.1648 41.1648v48.2816H110.6432c-14.1312 0-25.6 11.4688-25.6 25.6s11.4688 25.6 25.6 25.6h810.496c14.1312 0 25.6-11.4688 25.6-25.6s-11.4688-25.6-25.6-25.6zM170.8032 260.0448v592.8448c0 50.8928 41.2672 92.16 92.16 92.16h500.6848c50.8928 0 92.16-41.2672 92.16-92.16V260.0448H170.8032z m249.1392 462.7968c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z m243.1488 0c0 14.1312-11.4688 25.6-25.6 25.6s-25.6-11.4688-25.6-25.6V443.0848c0-14.1312 11.4688-25.6 25.6-25.6s25.6 11.4688 25.6 25.6v279.7568z"
|
||||||
|
fill="#FF623E"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</li>
|
||||||
|
</ol>
|
||||||
|
<div class="tree-hole-go">
|
||||||
|
<i class="fa fa-paper-plane" @click="launch()"></i>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
treeHoleList: {
|
||||||
|
type: Array
|
||||||
|
},
|
||||||
|
avatar: {
|
||||||
|
type: String
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentUser: this.$store.state.currentUser,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
launch() {
|
||||||
|
this.$emit("launch");
|
||||||
|
},
|
||||||
|
deleteTreeHole(id) {
|
||||||
|
this.$emit("deleteTreeHole", id);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.tree-hole-container {
|
||||||
|
padding: 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-list {
|
||||||
|
padding: 100px 0 20px;
|
||||||
|
margin: 0;
|
||||||
|
position: relative;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-list:before {
|
||||||
|
content: '';
|
||||||
|
width: 4px;
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
bottom: 0;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background-color: var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-list:after {
|
||||||
|
content: '';
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border: 4px solid var(--maxLightRed);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
left: 50%;
|
||||||
|
transform: translateX(-50%);
|
||||||
|
background-color: var(--white);
|
||||||
|
animation: weiYanShadowFlashing 1.5s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-li {
|
||||||
|
margin: 5px auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-content {
|
||||||
|
position: relative;
|
||||||
|
width: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftTreeHole {
|
||||||
|
text-align: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole {
|
||||||
|
margin-left: 50%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-content:before {
|
||||||
|
content: '';
|
||||||
|
width: 12px;
|
||||||
|
height: 12px;
|
||||||
|
border: 4px solid var(--blue);
|
||||||
|
border-radius: 50%;
|
||||||
|
position: absolute;
|
||||||
|
top: 10px;
|
||||||
|
background-color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftTreeHole:before {
|
||||||
|
right: 0;
|
||||||
|
transform: translateX(10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole:before {
|
||||||
|
left: 0;
|
||||||
|
transform: translateX(-10px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.avatar-img {
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftTreeHole .avatar-img {
|
||||||
|
right: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole .avatar-img {
|
||||||
|
left: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-box {
|
||||||
|
font-size: 16px;
|
||||||
|
padding: 10px;
|
||||||
|
width: 360px;
|
||||||
|
border-radius: 5px;
|
||||||
|
position: relative;
|
||||||
|
letter-spacing: 0.1em;
|
||||||
|
font-weight: 400;
|
||||||
|
transition: all 0.3s ease-in-out;
|
||||||
|
color: var(--black);
|
||||||
|
text-align: left;
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftTreeHole .tree-hole-box {
|
||||||
|
margin-right: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole .tree-hole-box {
|
||||||
|
margin-left: 90px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-box:hover, .avatar-img:hover {
|
||||||
|
transform: translateY(-5px);
|
||||||
|
box-shadow: 0 0 16px 3px var(--miniMask);
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-tag {
|
||||||
|
content: '';
|
||||||
|
position: absolute;
|
||||||
|
border-style: solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.leftTreeHole .box-tag {
|
||||||
|
right: -10px;
|
||||||
|
border-width: 15px 0 5px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole .box-tag {
|
||||||
|
left: -10px;
|
||||||
|
border-width: 15px 10px 5px 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.my-content {
|
||||||
|
margin: 0 10px 10px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-box > div:last-child {
|
||||||
|
color: var(--greyFont);
|
||||||
|
padding: 10px 10px 0;
|
||||||
|
border-top: 1px dashed var(--white);
|
||||||
|
font-size: 14px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-go {
|
||||||
|
color: var(--blue);
|
||||||
|
font-weight: 700;
|
||||||
|
font-size: 25px;
|
||||||
|
margin: 20px auto;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-go i {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-go i:hover {
|
||||||
|
animation: scale 1s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-delete {
|
||||||
|
font-size: 14px;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
.tree-hole-box {
|
||||||
|
width: calc(100% - 90px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 600px) {
|
||||||
|
.tree-hole-content {
|
||||||
|
margin-bottom: 50px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-list:after {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-list:before {
|
||||||
|
left: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.rightTreeHole {
|
||||||
|
margin-left: unset;
|
||||||
|
}
|
||||||
|
|
||||||
|
.tree-hole-content {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,141 @@
|
|||||||
|
<template>
|
||||||
|
<div class="poem-container myCenter my-animation-hideToShow"
|
||||||
|
v-if="!$common.isEmpty(guShi.origin) || !$common.isEmpty(hitokoto.hitokoto)">
|
||||||
|
<!-- 背景图片 -->
|
||||||
|
<el-image class="my-el-image poem-image"
|
||||||
|
style="position: absolute;margin-top: -50px"
|
||||||
|
v-once
|
||||||
|
lazy
|
||||||
|
:src="$constant.two_poem_image[Math.floor(Math.random() * $constant.two_poem_image.length)]"
|
||||||
|
fit="cover">
|
||||||
|
<div slot="error" class="image-slot"></div>
|
||||||
|
</el-image>
|
||||||
|
<div class="poem-wrap">
|
||||||
|
<div v-if="isShehui"><span>鬼畜全明星</span></div>
|
||||||
|
<div v-else><span>{{isHitokoto?hitokoto.from:guShi.origin}}</span></div>
|
||||||
|
<p class="poem">{{isHitokoto?hitokoto.hitokoto:guShi.content}}</p>
|
||||||
|
<p class="info" v-if="!isShehui && (!isHitokoto || (isHitokoto && !$common.isEmpty(hitokoto.from_who)))">
|
||||||
|
{{isHitokoto?hitokoto.from_who:guShi.author}}
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
isHitokoto: {
|
||||||
|
type: Boolean,
|
||||||
|
default: true
|
||||||
|
},
|
||||||
|
isShehui: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
guShi: {
|
||||||
|
"content": "...",
|
||||||
|
"origin": "...",
|
||||||
|
"author": "...",
|
||||||
|
"category": "..."
|
||||||
|
},
|
||||||
|
hitokoto: {
|
||||||
|
"hitokoto": "...",
|
||||||
|
"from": "...",
|
||||||
|
"from_who": "..."
|
||||||
|
}
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
if (!this.isShehui) {
|
||||||
|
if (this.isHitokoto) {
|
||||||
|
this.getHitokoto();
|
||||||
|
} else {
|
||||||
|
this.getGuShi();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
this.hitokoto.from = "";
|
||||||
|
this.hitokoto.from_who = "";
|
||||||
|
this.sendShehui();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
sendShehui() {
|
||||||
|
let that = this;
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('get', this.$constant.shehui);
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
let shehui = xhr.responseText;
|
||||||
|
that.hitokoto.hitokoto = shehui.substring(1, shehui.length - 1);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
},
|
||||||
|
getGuShi() {
|
||||||
|
let that = this;
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('get', this.$constant.jinrishici);
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
that.guShi = JSON.parse(xhr.responseText);
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
},
|
||||||
|
getHitokoto() {
|
||||||
|
let that = this;
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('get', this.$constant.hitokoto);
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
that.hitokoto = JSON.parse(xhr.responseText);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.poem-container {
|
||||||
|
padding: 90px 0 40px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poem-wrap {
|
||||||
|
border-radius: 10px;
|
||||||
|
z-index: 10;
|
||||||
|
text-align: center;
|
||||||
|
letter-spacing: 4px;
|
||||||
|
font-weight: 300;
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poem-wrap div span {
|
||||||
|
padding: 5px 10px;
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 2em;
|
||||||
|
border-radius: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poem-wrap p {
|
||||||
|
width: 100%;
|
||||||
|
max-width: 800px;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.poem-wrap p.poem {
|
||||||
|
margin: 40px auto;
|
||||||
|
font-size: 1.5em;
|
||||||
|
}
|
||||||
|
|
||||||
|
.poem-wrap p.info {
|
||||||
|
margin: 20px auto 40px;
|
||||||
|
font-size: 1.1em;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,307 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="favorite-container">
|
||||||
|
<!-- 封面 -->
|
||||||
|
<div class="favorite-header my-animation-slide-top">
|
||||||
|
<!-- 背景图片 -->
|
||||||
|
<video class="index-video" autoplay="autoplay" muted="muted" loop="loop"
|
||||||
|
:src="$constant.favoriteVideo">
|
||||||
|
</video>
|
||||||
|
<div style="position: absolute;left: 0;top: 0;padding: 20px">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div style="color: var(--white);margin: 10px">
|
||||||
|
<!-- <div>-->
|
||||||
|
<!-- 记录-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<div style="font-size: 36px;font-weight: bold;line-height: 2">
|
||||||
|
医院推荐
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="card-container">
|
||||||
|
<!-- 收藏夹 -->
|
||||||
|
<!-- <div @click="changeFavorite(1)"-->
|
||||||
|
<!-- class="card-item">-->
|
||||||
|
<!-- <div class="favorite-image"></div>-->
|
||||||
|
<!-- <div style="position: absolute;left: 0;top: 0;padding: 20px 25px 15px">-->
|
||||||
|
<!-- <div class="card-name">-->
|
||||||
|
<!-- 收藏夹-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- <div class="card-desc">-->
|
||||||
|
<!-- 将 poetize.cn 添加到您的收藏夹吧-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
<!-- </div>-->
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 内容 -->
|
||||||
|
<div class="favorite-content my-animation-slide-bottom">
|
||||||
|
<!-- 收藏夹 -->
|
||||||
|
<div v-show="card === 1 && !$common.isEmpty(collects)">
|
||||||
|
<div v-for="(value, key) in collects" :key="key" style="margin-top: 20px">
|
||||||
|
<div class="collect-classify">
|
||||||
|
{{key}}
|
||||||
|
</div>
|
||||||
|
<div class="favorite-item-wrap">
|
||||||
|
<div v-for="(item, index) in value" :key="index" @click="toUrl(item.url)" class="favorite-item">
|
||||||
|
<div>
|
||||||
|
<el-avatar class="favorite-item-image" :size="60"
|
||||||
|
:src="item.cover">
|
||||||
|
</el-avatar>
|
||||||
|
</div>
|
||||||
|
<div style="width: calc(100% - 80px)">
|
||||||
|
<div class="favorite-item-title">
|
||||||
|
{{item.title}}
|
||||||
|
</div>
|
||||||
|
<div class="favorite-item-introduction">
|
||||||
|
{{item.introduction}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<div style="background: var(--favoriteBg)">
|
||||||
|
<myFooter></myFooter>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
myFooter
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
card: null,
|
||||||
|
collects: {}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.card = 1;
|
||||||
|
this.getCollect();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
toUrl(url) {
|
||||||
|
window.open(url);
|
||||||
|
},
|
||||||
|
changeFavorite(card) {
|
||||||
|
this.card = card;
|
||||||
|
if (card === 1) {
|
||||||
|
if (this.$common.isEmpty(this.collects)) {
|
||||||
|
this.getCollect();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
getCollect() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/listCollect")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.collects = res.data;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.favorite-container {
|
||||||
|
padding: 25px;
|
||||||
|
background: var(--favoriteBg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-header {
|
||||||
|
margin: 60px auto 30px;
|
||||||
|
height: 410px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 20px;
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-image::before {
|
||||||
|
content: "";
|
||||||
|
position: absolute;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
background-color: var(--translucent);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-container {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-top: 60px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-item {
|
||||||
|
transition: all 0.3s;
|
||||||
|
position: relative;
|
||||||
|
width: 250px;
|
||||||
|
height: 120px;
|
||||||
|
border-radius: 20px;
|
||||||
|
animation: hideToShow 1s ease-in-out;
|
||||||
|
cursor: pointer;
|
||||||
|
overflow: hidden;
|
||||||
|
margin: 10px;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-item:hover {
|
||||||
|
transform: translateY(-6px);
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-name {
|
||||||
|
font-weight: bold;
|
||||||
|
font-size: 25px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-name:after {
|
||||||
|
top: 50px;
|
||||||
|
width: 22px;
|
||||||
|
left: 26px;
|
||||||
|
height: 2px;
|
||||||
|
background: var(--white);
|
||||||
|
content: "";
|
||||||
|
border-radius: 1px;
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.card-desc {
|
||||||
|
font-weight: bold;
|
||||||
|
margin-top: 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-content {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.collect-classify {
|
||||||
|
font-size: 28px;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-item-wrap {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
margin-left: -10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-item {
|
||||||
|
transition: all 0.3s;
|
||||||
|
border-radius: 12px;
|
||||||
|
box-shadow: 0 8px 16px -4px #2c2d300c;
|
||||||
|
background: var(--background);
|
||||||
|
display: flex;
|
||||||
|
width: calc(100% / 4 - 20px);
|
||||||
|
max-width: 320px;
|
||||||
|
height: 90px;
|
||||||
|
overflow: hidden;
|
||||||
|
padding: 15px;
|
||||||
|
cursor: pointer;
|
||||||
|
margin: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-item:hover {
|
||||||
|
background: #425AEF;
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-item:hover .favorite-item-image {
|
||||||
|
transition: all 0.6s;
|
||||||
|
width: 0 !important;
|
||||||
|
height: 0 !important;
|
||||||
|
opacity: 0;
|
||||||
|
margin-right: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-item:hover div:nth-child(2) {
|
||||||
|
width: 100% !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-item-image {
|
||||||
|
margin-right: 20px;
|
||||||
|
transition: all 0.3s;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-item-title {
|
||||||
|
font-size: 19px;
|
||||||
|
font-weight: bold;
|
||||||
|
white-space: nowrap;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
overflow: hidden;
|
||||||
|
margin-bottom: 5px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.favorite-item-introduction {
|
||||||
|
opacity: 0.7;
|
||||||
|
font-weight: bold;
|
||||||
|
letter-spacing: 1px;
|
||||||
|
font-size: 14px;
|
||||||
|
line-height: 1.2;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 620px) {
|
||||||
|
.card-container {
|
||||||
|
margin-top: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
.favorite-item {
|
||||||
|
width: calc(100% / 3 - 20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 700px) {
|
||||||
|
.favorite-item {
|
||||||
|
width: calc(100% / 2 - 20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 400px) {
|
||||||
|
.favorite-item {
|
||||||
|
width: calc(100% - 20px);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,573 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<loader :loading="loading">
|
||||||
|
<!-- 加载页面 -->
|
||||||
|
<template slot="loader">
|
||||||
|
<div>
|
||||||
|
<zombie></zombie>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<!-- 内容页面 -->
|
||||||
|
<template slot="body">
|
||||||
|
<!-- 首页图片 -->
|
||||||
|
<!--<el-image style="animation: header-effect 2s"
|
||||||
|
class="background-image"
|
||||||
|
v-once
|
||||||
|
lazy
|
||||||
|
:src="!$common.isEmpty($store.state.webInfo.backgroundImage)?$store.state.webInfo.backgroundImage:$constant.random_image+new Date()+Math.floor(Math.random()*10)"
|
||||||
|
fit="cover">
|
||||||
|
<div slot="error" class="image-slot background-image-error"></div>
|
||||||
|
</el-image>-->
|
||||||
|
<div class="dark-mode-sky">
|
||||||
|
<div class="dark-mode-planet"></div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 首页文字 -->
|
||||||
|
<div class="signature-wall myCenter my-animation-hideToShow">
|
||||||
|
<h1 class="playful">
|
||||||
|
<span v-for="(a, index) in $store.state.webInfo.webTitle" :key="index">{{a}}</span>
|
||||||
|
</h1>
|
||||||
|
|
||||||
|
<!-- 搜索 -->
|
||||||
|
<div style="padding: 15px;border-radius: 10px;margin-top: 30px;animation: hideToShow 1s ease-in-out"
|
||||||
|
class="shadow-box background-opacity wow">
|
||||||
|
<div style="color: var(--lightGreen);font-size: 20px;font-weight: bold;margin-bottom: 10px">
|
||||||
|
查询DDI
|
||||||
|
</div>
|
||||||
|
<div style="display: flex">
|
||||||
|
<input class="ais-SearchBox-input" type="text"
|
||||||
|
v-model="queryParams.drug1"
|
||||||
|
placeholder="请输入药品A名称" maxlength="32">
|
||||||
|
<div style="width: 10px"></div>
|
||||||
|
<input class="ais-SearchBox-input" type="text"
|
||||||
|
v-model="queryParams.drug2"
|
||||||
|
placeholder="请输入药品B名称" maxlength="32">
|
||||||
|
<div style="width: 10px"></div>
|
||||||
|
<input class="ais-SearchBox-input" type="text"
|
||||||
|
v-model="queryParams.reaction"
|
||||||
|
placeholder="请输入相互作用效果" maxlength="32">
|
||||||
|
<div class="ais-SearchBox-submit" @click="handleQuery()">
|
||||||
|
<svg style="margin-top: 3.5px;margin-left: 18px" viewBox="0 0 1024 1024" width="20" height="20">
|
||||||
|
<path
|
||||||
|
d="M51.2 508.8c0 256.8 208 464.8 464.8 464.8s464.8-208 464.8-464.8-208-464.8-464.8-464.8-464.8 208-464.8 464.8z"
|
||||||
|
fill="#51C492"></path>
|
||||||
|
<path
|
||||||
|
d="M772.8 718.4c48-58.4 76.8-132.8 76.8-213.6 0-186.4-151.2-337.6-337.6-337.6-186.4 0-337.6 151.2-337.6 337.6 0 186.4 151.2 337.6 337.6 337.6 81.6 0 156-28.8 213.6-76.8L856 896l47.2-47.2-130.4-130.4zM512 776c-149.6 0-270.4-121.6-270.4-271.2S363.2 233.6 512 233.6c149.6 0 271.2 121.6 271.2 271.2C782.4 654.4 660.8 776 512 776z"
|
||||||
|
fill="#FFFFFF"></path>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="printer" @click="getGuShi()">
|
||||||
|
<printer :printerInfo="printerInfo">
|
||||||
|
<template slot="paper" slot-scope="scope">
|
||||||
|
<h3>
|
||||||
|
{{ scope.content }}<span class="cursor">|</span>
|
||||||
|
</h3>
|
||||||
|
</template>
|
||||||
|
</printer>
|
||||||
|
</div>
|
||||||
|
<div id="bannerWave1"></div>
|
||||||
|
<div id="bannerWave2"></div>
|
||||||
|
<i class="el-icon-arrow-down" @click="navigation('.page-container-wrap')"></i>
|
||||||
|
</div>
|
||||||
|
<!-- 首页内容 -->
|
||||||
|
<div class="page-container-wrap">
|
||||||
|
<div class="page-container">
|
||||||
|
<div class="aside-content" v-if="showAside">
|
||||||
|
<myAside ref="myAsideRef" @selectSort="selectSort" @selectArticle="selectArticle"></myAside>
|
||||||
|
</div>
|
||||||
|
<div class="recent-posts">
|
||||||
|
<div class="announcement background-opacity">
|
||||||
|
<i class="fa fa-volume-up" aria-hidden="true"></i>
|
||||||
|
<div>
|
||||||
|
<div v-for="(notice, index) in $store.state.webInfo.notices" :key="index">
|
||||||
|
{{ notice }}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="shadow-box pagination-wrap background-opacity">
|
||||||
|
<el-table :data="table1List">
|
||||||
|
<el-table-column label="药品A">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<span @click="selectDrugDetails(row.drug1)">{{ row.drug1 }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column label="药品B">
|
||||||
|
<template slot-scope="{ row }">
|
||||||
|
<span @click="selectDrugDetails(row.drug2)">{{ row.drug2 }}</span>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column prop="reaction" label="相互作用效果"></el-table-column>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--分页组件-->
|
||||||
|
<div class="block background-opacity">
|
||||||
|
<el-pagination
|
||||||
|
@size-change="handleSizeChange"
|
||||||
|
@current-change="handleCurrentChange"
|
||||||
|
:current-page="currentPage1"
|
||||||
|
:page-sizes="[10, 15, 20, 25]"
|
||||||
|
:page-size="10"
|
||||||
|
layout="total, sizes, prev, pager, next, jumper"
|
||||||
|
:total=this.pagination.total>
|
||||||
|
</el-pagination>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<articleList :articleList="articles"></articleList>
|
||||||
|
|
||||||
|
<div class="pagination-wrap">
|
||||||
|
<div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
|
||||||
|
下一页
|
||||||
|
</div>
|
||||||
|
<div v-else style="user-select: none">
|
||||||
|
~~到底啦~~
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<div style="background: var(--background)">
|
||||||
|
<myFooter></myFooter>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</loader>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import {listTable1, listTotal, selectDetails} from "@/utils/table1";
|
||||||
|
|
||||||
|
const loader = () => import( "./common/loader");
|
||||||
|
const zombie = () => import( "./common/zombie");
|
||||||
|
const printer = () => import( "./common/printer");
|
||||||
|
const articleList = () => import( "./articleList");
|
||||||
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
const myAside = () => import( "./myAside");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
loader,
|
||||||
|
zombie,
|
||||||
|
printer,
|
||||||
|
articleList,
|
||||||
|
myFooter,
|
||||||
|
myAside
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
currentPage1: 1,
|
||||||
|
loading: false,
|
||||||
|
showAside: true,
|
||||||
|
printerInfo: "你看对面的青山多漂亮",
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
sortId: null,
|
||||||
|
articleSearch: ""
|
||||||
|
},
|
||||||
|
guShi: {
|
||||||
|
"content": "",
|
||||||
|
"origin": "",
|
||||||
|
"author": "",
|
||||||
|
"category": ""
|
||||||
|
},
|
||||||
|
articles: [],
|
||||||
|
table1List: [],
|
||||||
|
// 查询参数
|
||||||
|
queryParams: {
|
||||||
|
pageNum: 1,
|
||||||
|
pageSize: 10,
|
||||||
|
drug1: null,
|
||||||
|
drug2: null,
|
||||||
|
reaction: null
|
||||||
|
},
|
||||||
|
};
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getGuShi();
|
||||||
|
this.getArticles();
|
||||||
|
this.handleQuery();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
selectDrugDetails(drugName) {
|
||||||
|
this.$refs.myAsideRef.updateDrugName(drugName);
|
||||||
|
},
|
||||||
|
/** 查询药品作用列表条数 */
|
||||||
|
getTotal() {
|
||||||
|
listTotal(this.queryParams).then(response => {
|
||||||
|
this.pagination.total = parseInt(response);
|
||||||
|
console.log(this.pagination.total);
|
||||||
|
});
|
||||||
|
},
|
||||||
|
handleSizeChange(val) {
|
||||||
|
this.queryParams.pageSize = val; // 修改每页显示数量
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
handleCurrentChange(val) {
|
||||||
|
this.queryParams.pageNum = val; // 修改每页显示数量
|
||||||
|
this.getList();
|
||||||
|
},
|
||||||
|
/** 搜索按钮操作 */
|
||||||
|
handleQuery() {
|
||||||
|
this.queryParams.pageNum = 1;
|
||||||
|
this.getList();
|
||||||
|
this.getTotal();
|
||||||
|
// 页面自动下滑效果
|
||||||
|
const targetElement = document.querySelector('.recent-posts');
|
||||||
|
if (targetElement) {
|
||||||
|
targetElement.scrollIntoView({ behavior: "smooth", block: "start" });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
/** 查询药品作用管理列表 */
|
||||||
|
getList() {
|
||||||
|
// this.loading = true;
|
||||||
|
this.table1List = []; // 初始化为空数组
|
||||||
|
listTable1(this.queryParams).then(response => {
|
||||||
|
this.table1List = response;
|
||||||
|
});
|
||||||
|
},
|
||||||
|
async selectSort(sort) {
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
sortId: sort.id,
|
||||||
|
articleSearch: ""
|
||||||
|
};
|
||||||
|
this.articles = [];
|
||||||
|
await this.getArticles();
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// document.querySelector('.recent-posts').scrollIntoView({
|
||||||
|
// behavior: "smooth",
|
||||||
|
// block: "start",
|
||||||
|
// inline: "nearest"
|
||||||
|
// });
|
||||||
|
// });
|
||||||
|
},
|
||||||
|
async selectArticle(articleSearch) {
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
sortId: null,
|
||||||
|
articleSearch: articleSearch
|
||||||
|
};
|
||||||
|
this.articles = [];
|
||||||
|
await this.getArticles();
|
||||||
|
this.$nextTick(() => {
|
||||||
|
document.querySelector('.recent-posts').scrollIntoView({
|
||||||
|
behavior: "smooth",
|
||||||
|
block: "start",
|
||||||
|
inline: "nearest"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
pageArticles() {
|
||||||
|
this.pagination.current = this.pagination.current + 1;
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
|
||||||
|
async getArticles() {
|
||||||
|
await this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||||
|
// await this.$http.post("http://localhost:81" + "/system/table1/list", this.pagination)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.articles = this.articles.concat(res.data.records);
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
navigation(selector) {
|
||||||
|
let pageId = document.querySelector(selector);
|
||||||
|
window.scrollTo({
|
||||||
|
top: pageId.offsetTop,
|
||||||
|
behavior: "smooth"
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getGuShi() {
|
||||||
|
let that = this;
|
||||||
|
let xhr = new XMLHttpRequest();
|
||||||
|
xhr.open('get', this.$constant.jinrishici);
|
||||||
|
xhr.onreadystatechange = function () {
|
||||||
|
if (xhr.readyState === 4) {
|
||||||
|
that.guShi = JSON.parse(xhr.responseText);
|
||||||
|
that.printerInfo = that.guShi.content;
|
||||||
|
}
|
||||||
|
};
|
||||||
|
xhr.send();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.signature-wall {
|
||||||
|
/* 向下排列 */
|
||||||
|
display: flex;
|
||||||
|
flex-direction: column;
|
||||||
|
position: relative;
|
||||||
|
user-select: none;
|
||||||
|
height: 100vh;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.playful {
|
||||||
|
color: var(--white);
|
||||||
|
font-size: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
/*.playful span {*/
|
||||||
|
/* position: relative;*/
|
||||||
|
/* color: #5362f6;*/
|
||||||
|
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
||||||
|
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
||||||
|
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
||||||
|
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
||||||
|
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
||||||
|
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
||||||
|
/* 6px 6px #e485f8;*/
|
||||||
|
/* animation: scatter 1.75s infinite;*/
|
||||||
|
/* font-weight: normal;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*.playful span:nth-child(2n) {*/
|
||||||
|
/* color: #ed625c;*/
|
||||||
|
/* text-shadow: 0.25px 0.25px #f2a063, 0.5px 0.5px #f2a063, 0.75px 0.75px #f2a063,*/
|
||||||
|
/* 1px 1px #f2a063, 1.25px 1.25px #f2a063, 1.5px 1.5px #f2a063, 1.75px 1.75px #f2a063,*/
|
||||||
|
/* 2px 2px #f2a063, 2.25px 2.25px #f2a063, 2.5px 2.5px #f2a063, 2.75px 2.75px #f2a063,*/
|
||||||
|
/* 3px 3px #f2a063, 3.25px 3.25px #f2a063, 3.5px 3.5px #f2a063, 3.75px 3.75px #f2a063,*/
|
||||||
|
/* 4px 4px #f2a063, 4.25px 4.25px #f2a063, 4.5px 4.5px #f2a063, 4.75px 4.75px #f2a063,*/
|
||||||
|
/* 5px 5px #f2a063, 5.25px 5.25px #f2a063, 5.5px 5.5px #f2a063, 5.75px 5.75px #f2a063,*/
|
||||||
|
/* 6px 6px #f2a063;*/
|
||||||
|
/* animation-delay: 0.3s;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*.playful span:nth-child(3n) {*/
|
||||||
|
/* color: #ffd913;*/
|
||||||
|
/* text-shadow: 0.25px 0.25px #6ec0a9, 0.5px 0.5px #6ec0a9, 0.75px 0.75px #6ec0a9,*/
|
||||||
|
/* 1px 1px #6ec0a9, 1.25px 1.25px #6ec0a9, 1.5px 1.5px #6ec0a9, 1.75px 1.75px #6ec0a9,*/
|
||||||
|
/* 2px 2px #6ec0a9, 2.25px 2.25px #6ec0a9, 2.5px 2.5px #6ec0a9, 2.75px 2.75px #6ec0a9,*/
|
||||||
|
/* 3px 3px #6ec0a9, 3.25px 3.25px #6ec0a9, 3.5px 3.5px #6ec0a9, 3.75px 3.75px #6ec0a9,*/
|
||||||
|
/* 4px 4px #6ec0a9, 4.25px 4.25px #6ec0a9, 4.5px 4.5px #6ec0a9, 4.75px 4.75px #6ec0a9,*/
|
||||||
|
/* 5px 5px #6ec0a9, 5.25px 5.25px #6ec0a9, 5.5px 5.5px #6ec0a9, 5.75px 5.75px #6ec0a9,*/
|
||||||
|
/* 6px 6px #6ec0a9;*/
|
||||||
|
/* animation-delay: 0.15s;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*.playful span:nth-child(5n) {*/
|
||||||
|
/* color: #555bff;*/
|
||||||
|
/* text-shadow: 0.25px 0.25px #e485f8, 0.5px 0.5px #e485f8, 0.75px 0.75px #e485f8,*/
|
||||||
|
/* 1px 1px #e485f8, 1.25px 1.25px #e485f8, 1.5px 1.5px #e485f8, 1.75px 1.75px #e485f8,*/
|
||||||
|
/* 2px 2px #e485f8, 2.25px 2.25px #e485f8, 2.5px 2.5px #e485f8, 2.75px 2.75px #e485f8,*/
|
||||||
|
/* 3px 3px #e485f8, 3.25px 3.25px #e485f8, 3.5px 3.5px #e485f8, 3.75px 3.75px #e485f8,*/
|
||||||
|
/* 4px 4px #e485f8, 4.25px 4.25px #e485f8, 4.5px 4.5px #e485f8, 4.75px 4.75px #e485f8,*/
|
||||||
|
/* 5px 5px #e485f8, 5.25px 5.25px #e485f8, 5.5px 5.5px #e485f8, 5.75px 5.75px #e485f8,*/
|
||||||
|
/* 6px 6px #e485f8;*/
|
||||||
|
/* animation-delay: 0.4s;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
/*.playful span:nth-child(7n) {*/
|
||||||
|
/* color: #ff9c55;*/
|
||||||
|
/* text-shadow: 0.25px 0.25px #ff5555, 0.5px 0.5px #ff5555, 0.75px 0.75px #ff5555,*/
|
||||||
|
/* 1px 1px #ff5555, 1.25px 1.25px #ff5555, 1.5px 1.5px #ff5555, 1.75px 1.75px #ff5555,*/
|
||||||
|
/* 2px 2px #ff5555, 2.25px 2.25px #ff5555, 2.5px 2.5px #ff5555, 2.75px 2.75px #ff5555,*/
|
||||||
|
/* 3px 3px #ff5555, 3.25px 3.25px #ff5555, 3.5px 3.5px #ff5555, 3.75px 3.75px #ff5555,*/
|
||||||
|
/* 4px 4px #ff5555, 4.25px 4.25px #ff5555, 4.5px 4.5px #ff5555, 4.75px 4.75px #ff5555,*/
|
||||||
|
/* 5px 5px #ff5555, 5.25px 5.25px #ff5555, 5.5px 5.5px #ff5555, 5.75px 5.75px #ff5555,*/
|
||||||
|
/* 6px 6px #ff5555;*/
|
||||||
|
/* animation-delay: 0.25s;*/
|
||||||
|
/*}*/
|
||||||
|
|
||||||
|
.printer {
|
||||||
|
cursor: pointer;
|
||||||
|
color: var(--white);
|
||||||
|
background: var(--translucent);
|
||||||
|
border-radius: 10px;
|
||||||
|
padding-left: 10px;
|
||||||
|
padding-right: 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bannerWave1 {
|
||||||
|
height: 84px;
|
||||||
|
background: var(--bannerWave1);
|
||||||
|
position: absolute;
|
||||||
|
width: 200%;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 10;
|
||||||
|
animation: gradientBG 120s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
#bannerWave2 {
|
||||||
|
height: 100px;
|
||||||
|
background: var(--bannerWave2);
|
||||||
|
position: absolute;
|
||||||
|
width: 400%;
|
||||||
|
bottom: 0;
|
||||||
|
z-index: 5;
|
||||||
|
animation: gradientBG 120s linear infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 光标 */
|
||||||
|
.cursor {
|
||||||
|
margin-left: 1px;
|
||||||
|
animation: hideToShow 0.7s infinite;
|
||||||
|
font-weight: 200;
|
||||||
|
}
|
||||||
|
|
||||||
|
.el-icon-arrow-down {
|
||||||
|
font-size: 40px;
|
||||||
|
font-weight: bold;
|
||||||
|
color: var(--white);
|
||||||
|
position: absolute;
|
||||||
|
bottom: 60px;
|
||||||
|
animation: my-shake 1.5s ease-out infinite;
|
||||||
|
z-index: 15;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-container-wrap {
|
||||||
|
background: var(--background);
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
width: 90%;
|
||||||
|
padding: 0 20px 40px 20px;
|
||||||
|
margin: 0 auto;
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
|
||||||
|
.recent-posts {
|
||||||
|
width: 70%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcement {
|
||||||
|
padding: 22px;
|
||||||
|
border: 1px dashed var(--lightGray);
|
||||||
|
color: var(--greyFont);
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
max-width: 780px;
|
||||||
|
margin: 40px auto 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcement i {
|
||||||
|
color: var(--themeBackground);
|
||||||
|
font-size: 22px;
|
||||||
|
margin: auto 0;
|
||||||
|
animation: scale 0.8s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.announcement div div {
|
||||||
|
margin-left: 20px;
|
||||||
|
line-height: 30px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-content {
|
||||||
|
width: calc(30% - 40px);
|
||||||
|
user-select: none;
|
||||||
|
margin-top: 40px;
|
||||||
|
margin-right: 40px;
|
||||||
|
max-width: 300px;
|
||||||
|
float: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
padding: 13px 15px;
|
||||||
|
border: 1px solid var(--lightGray);
|
||||||
|
border-radius: 3rem;
|
||||||
|
color: var(--greyFont);
|
||||||
|
width: 100px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination:hover {
|
||||||
|
border: 1px solid var(--themeBackground);
|
||||||
|
color: var(--themeBackground);
|
||||||
|
box-shadow: 0 0 5px var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
.ais-SearchBox-input {
|
||||||
|
padding: 0 14px;
|
||||||
|
height: 30px;
|
||||||
|
width: calc(100% - 50px);
|
||||||
|
outline: 0;
|
||||||
|
border: 2px solid var(--lightGreen);
|
||||||
|
border-right: 0;
|
||||||
|
border-radius: 40px;
|
||||||
|
color: var(--maxGreyFont);
|
||||||
|
background: var(--white);
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1100px) {
|
||||||
|
.recent-posts {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1000px) {
|
||||||
|
|
||||||
|
.page-container {
|
||||||
|
/* 文章栏与侧标栏垂直排列 */
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.aside-content {
|
||||||
|
width: 100%;
|
||||||
|
max-width: unset;
|
||||||
|
float: unset;
|
||||||
|
margin: 40px auto 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 768px) {
|
||||||
|
|
||||||
|
h1 {
|
||||||
|
font-size: 35px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,183 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div>
|
||||||
|
<el-image style="animation: header-effect 2s"
|
||||||
|
class="background-image"
|
||||||
|
v-once
|
||||||
|
lazy
|
||||||
|
:src="$constant.random_image+new Date()+Math.floor(Math.random()*10)"
|
||||||
|
fit="cover">
|
||||||
|
<div slot="error" class="image-slot background-image-error"></div>
|
||||||
|
</el-image>
|
||||||
|
<!-- 输入框 -->
|
||||||
|
<div class="message-in" style="text-align: center">
|
||||||
|
<h2 class="message-title">树洞</h2>
|
||||||
|
<div>
|
||||||
|
<input class="message-input"
|
||||||
|
type="text"
|
||||||
|
style="outline: none;width: 70%"
|
||||||
|
placeholder="留下点什么啦~"
|
||||||
|
v-model="messageContent"
|
||||||
|
@click="show = true"
|
||||||
|
maxlength="60"/>
|
||||||
|
<button v-show="show"
|
||||||
|
style="margin-left: 12px;cursor: pointer;width: 20%"
|
||||||
|
@click="submitMessage"
|
||||||
|
class="message-input">发射
|
||||||
|
</button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 弹幕 -->
|
||||||
|
<div class="barrage-container">
|
||||||
|
<vue-baberrage :barrageList="barrageList" :loop="true"></vue-baberrage>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div class="comment-wrap">
|
||||||
|
<div class="comment-content">
|
||||||
|
<comment :source="$constant.source" :type="'message'" :userId="$constant.userId"></comment>
|
||||||
|
</div>
|
||||||
|
<myFooter></myFooter>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const comment = () => import( "./comment/comment");
|
||||||
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
comment,
|
||||||
|
myFooter
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
show: false,
|
||||||
|
messageContent: "",
|
||||||
|
// background: {"background": "url(" + this.$store.state.webInfo.backgroundImage + ") center center / cover no-repeat"},
|
||||||
|
barrageList: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.getTreeHole();
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
getTreeHole() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/listTreeHole")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
res.data.forEach(m => {
|
||||||
|
this.barrageList.push({
|
||||||
|
id: m.id,
|
||||||
|
avatar: m.avatar,
|
||||||
|
msg: m.message,
|
||||||
|
time: Math.floor(Math.random() * 10 + 5)
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
submitMessage() {
|
||||||
|
if (this.messageContent.trim() === "") {
|
||||||
|
this.$message({
|
||||||
|
message: "你还没写呢~",
|
||||||
|
type: "warning"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
let treeHole = {
|
||||||
|
message: this.messageContent.trim()
|
||||||
|
};
|
||||||
|
|
||||||
|
if (!this.$common.isEmpty(this.$store.state.currentUser) && !this.$common.isEmpty(this.$store.state.currentUser.avatar)) {
|
||||||
|
treeHole.avatar = this.$store.state.currentUser.avatar;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
this.$http.post(this.$constant.baseURL + "/webInfo/saveTreeHole", treeHole)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.barrageList.push({
|
||||||
|
id: res.data.id,
|
||||||
|
avatar: res.data.avatar,
|
||||||
|
msg: res.data.message,
|
||||||
|
time: Math.floor(Math.random() * 10 + 5)
|
||||||
|
});
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
|
||||||
|
this.messageContent = "";
|
||||||
|
this.show = false;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.message-in {
|
||||||
|
position: absolute;
|
||||||
|
left: 50%;
|
||||||
|
top: 40%;
|
||||||
|
transform: translate(-50%, -50%);
|
||||||
|
color: var(--white);
|
||||||
|
animation: hideToShow 2.5s;
|
||||||
|
width: 360px;
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-title {
|
||||||
|
user-select: none;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-input {
|
||||||
|
border-radius: 1.2rem;
|
||||||
|
border: var(--white) 1px solid;
|
||||||
|
color: var(--white);
|
||||||
|
background: var(--transparent);
|
||||||
|
padding: 10px 10px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.message-input::-webkit-input-placeholder {
|
||||||
|
color: var(--white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.barrage-container {
|
||||||
|
position: absolute;
|
||||||
|
top: 50px;
|
||||||
|
left: 0;
|
||||||
|
right: 0;
|
||||||
|
bottom: 0;
|
||||||
|
height: calc(100% - 50px);
|
||||||
|
width: 100%;
|
||||||
|
user-select: none;
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-wrap {
|
||||||
|
background: var(--background);
|
||||||
|
position: absolute;
|
||||||
|
top: 100vh;
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.comment-content {
|
||||||
|
max-width: 800px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 40px 20px;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,204 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 两句诗 -->
|
||||||
|
<div class="my-animation-slide-top">
|
||||||
|
<twoPoem></twoPoem>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background: var(--background);padding-top: 40px;" class="my-animation-slide-bottom">
|
||||||
|
<!-- 标签 -->
|
||||||
|
<div class="sort-warp shadow-box" v-if="!$common.isEmpty(sort) && !$common.isEmpty(sort.labels)">
|
||||||
|
<div v-for="(label, index) in sort.labels" :key="index"
|
||||||
|
:class="{isActive: !$common.isEmpty(labelId) && parseInt(labelId) === label.id}"
|
||||||
|
@click="listArticle(label)">
|
||||||
|
<proTag :info="label.labelName+' '+label.countOfLabel"
|
||||||
|
:color="$constant.before_color_list[Math.floor(Math.random() * 6)]"
|
||||||
|
style="margin: 12px">
|
||||||
|
</proTag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 文章 -->
|
||||||
|
<div class="article-wrap">
|
||||||
|
<articleList :articleList="articles"></articleList>
|
||||||
|
<div class="pagination-wrap">
|
||||||
|
<div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
|
||||||
|
下一页
|
||||||
|
</div>
|
||||||
|
<div v-else style="user-select: none">
|
||||||
|
~~到底啦~~
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<myFooter></myFooter>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const twoPoem = () => import( "./common/twoPoem");
|
||||||
|
const proTag = () => import( "./common/proTag");
|
||||||
|
const articleList = () => import( "./articleList");
|
||||||
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
twoPoem,
|
||||||
|
proTag,
|
||||||
|
articleList,
|
||||||
|
myFooter
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
sortId: this.$route.query.sortId,
|
||||||
|
labelId: this.$route.query.labelId,
|
||||||
|
sort: null,
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
sortId: this.$route.query.sortId,
|
||||||
|
labelId: this.$route.query.labelId
|
||||||
|
},
|
||||||
|
articles: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
$route() {
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
sortId: this.$route.query.sortId,
|
||||||
|
labelId: this.$route.query.labelId
|
||||||
|
};
|
||||||
|
this.articles.splice(0, this.articles.length);
|
||||||
|
this.sortId = this.$route.query.sortId;
|
||||||
|
this.labelId = this.$route.query.labelId;
|
||||||
|
this.getSort();
|
||||||
|
this.getArticles();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getSort();
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
pageArticles() {
|
||||||
|
this.pagination.current = this.pagination.current + 1;
|
||||||
|
this.getArticles();
|
||||||
|
},
|
||||||
|
|
||||||
|
getSort() {
|
||||||
|
let sortInfo = this.$store.state.sortInfo;
|
||||||
|
if (!this.$common.isEmpty(sortInfo)) {
|
||||||
|
let sortArray = sortInfo.filter(f => {
|
||||||
|
return f.id === parseInt(this.sortId);
|
||||||
|
});
|
||||||
|
if (!this.$common.isEmpty(sortArray)) {
|
||||||
|
this.sort = sortArray[0];
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
listArticle(label) {
|
||||||
|
this.labelId = label.id;
|
||||||
|
this.pagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
searchKey: "",
|
||||||
|
sortId: this.$route.query.sortId,
|
||||||
|
labelId: label.id
|
||||||
|
};
|
||||||
|
this.articles.splice(0, this.articles.length);
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.getArticles();
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getArticles() {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.articles = this.articles.concat(res.data.records);
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.sort-warp {
|
||||||
|
width: 70%;
|
||||||
|
max-width: 780px;
|
||||||
|
margin: 0 auto;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-wrap {
|
||||||
|
width: 70%;
|
||||||
|
margin: 40px auto;
|
||||||
|
min-height: 600px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isActive {
|
||||||
|
animation: scale 1.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
padding: 13px 15px;
|
||||||
|
border: 1px solid var(--lightGray);
|
||||||
|
border-radius: 3rem;
|
||||||
|
color: var(--greyFont);
|
||||||
|
width: 100px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination:hover {
|
||||||
|
border: 1px solid var(--themeBackground);
|
||||||
|
color: var(--themeBackground);
|
||||||
|
box-shadow: 0 0 5px var(--themeBackground);
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
|
@media screen and (max-width: 900px) {
|
||||||
|
.sort-warp {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.article-wrap {
|
||||||
|
width: 90%;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
@ -0,0 +1,232 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<div class="travel-container">
|
||||||
|
<!-- 封面 -->
|
||||||
|
<div class="travel-header my-animation-slide-top">
|
||||||
|
<!-- 背景图片 -->
|
||||||
|
<video class="index-video" autoplay="autoplay" muted="muted" loop="loop"
|
||||||
|
:src="$constant.favoriteVideo2">
|
||||||
|
</video>
|
||||||
|
<div style="position: absolute;left: 20px;top: 20px">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<div style="margin: 10px">
|
||||||
|
<div style="font-size: 36px;font-weight: bold;line-height: 1.5;margin-top: 20px">
|
||||||
|
健康、亲情和爱要比成功、名利更重要
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="travel-content my-animation-slide-bottom">
|
||||||
|
<!-- 标签 -->
|
||||||
|
<div class="photo-title-warp" v-if="!$common.isEmpty(photoTitleList)">
|
||||||
|
<div v-for="(item, index) in photoTitleList" :key="index"
|
||||||
|
:class="{isActive: photoPagination.classify === item.classify}"
|
||||||
|
@click="changePhotoTitle(item.classify)">
|
||||||
|
<proTag :info="item.classify+' '+item.count"
|
||||||
|
:color="$constant.before_color_list[Math.floor(Math.random() * 6)]"
|
||||||
|
style="margin: 12px">
|
||||||
|
</proTag>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div class="photo-title">
|
||||||
|
{{photoPagination.classify}}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<photo :resourcePathList="photoList"></photo>
|
||||||
|
<div class="pagination-wrap">
|
||||||
|
<div @click="pagePhotos()" class="pagination" v-if="photoPagination.total !== photoList.length">
|
||||||
|
下一页
|
||||||
|
</div>
|
||||||
|
<div v-else style="user-select: none">
|
||||||
|
~~到底啦~~
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<div style="background: var(--favoriteBg)">
|
||||||
|
<myFooter></myFooter>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
|
||||||
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
const photo = () => import( "./common/photo");
|
||||||
|
const proTag = () => import( "./common/proTag");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
photo,
|
||||||
|
proTag,
|
||||||
|
myFooter
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
photoPagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
resourceType: "lovePhoto",
|
||||||
|
classify: ""
|
||||||
|
},
|
||||||
|
photoTitleList: [
|
||||||
|
{ classify: "公益计划", count: 6 },
|
||||||
|
{ classify: "科研项目", count: 2 },
|
||||||
|
],
|
||||||
|
photoList: []
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getPhotoTitles();
|
||||||
|
this.changePhotoTitle("公益计划");
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
getPhotoTitles() {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/webInfo/listAdminLovePhoto")
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.photoTitleList = res.data;
|
||||||
|
this.photoPagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
resourceType: "lovePhoto",
|
||||||
|
classify: this.photoTitleList[0].classify
|
||||||
|
};
|
||||||
|
this.changePhoto();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
changePhotoTitle(classify) {
|
||||||
|
if (classify !== this.photoPagination.classify) {
|
||||||
|
this.photoPagination = {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0,
|
||||||
|
resourceType: "lovePhoto",
|
||||||
|
classify: classify
|
||||||
|
};
|
||||||
|
this.photoList = [];
|
||||||
|
this.changePhoto();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
pagePhotos() {
|
||||||
|
this.photoPagination.current = this.photoPagination.current + 1;
|
||||||
|
this.changePhoto();
|
||||||
|
},
|
||||||
|
changePhoto() {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/webInfo/listResourcePath", this.photoPagination)
|
||||||
|
.then((res) => {
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
this.photoList = this.photoList.concat(res.data.records);
|
||||||
|
this.photoPagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
.travel-container {
|
||||||
|
padding: 25px;
|
||||||
|
background: var(--favoriteBg);
|
||||||
|
}
|
||||||
|
|
||||||
|
.travel-header {
|
||||||
|
margin: 60px auto 30px;
|
||||||
|
height: 400px;
|
||||||
|
position: relative;
|
||||||
|
overflow: hidden;
|
||||||
|
border-radius: 20px;
|
||||||
|
max-width: 1200px;
|
||||||
|
color: var(--white);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.index-video {
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
object-fit: cover;
|
||||||
|
background: var(--lightGreen);
|
||||||
|
}
|
||||||
|
|
||||||
|
.travel-content {
|
||||||
|
margin: 0 auto;
|
||||||
|
max-width: 1200px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-title-warp {
|
||||||
|
max-width: 1150px;
|
||||||
|
margin: 50px auto;
|
||||||
|
padding: 20px;
|
||||||
|
border-radius: 10px;
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.isActive {
|
||||||
|
animation: scale 2.5s ease-in-out infinite;
|
||||||
|
}
|
||||||
|
|
||||||
|
.photo-title {
|
||||||
|
text-align: center;
|
||||||
|
font-size: 30px;
|
||||||
|
font-weight: 700;
|
||||||
|
line-height: 80px;
|
||||||
|
letter-spacing: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination-wrap {
|
||||||
|
display: flex;
|
||||||
|
justify-content: center;
|
||||||
|
margin-top: 40px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.pagination {
|
||||||
|
padding: 13px 15px;
|
||||||
|
border: 1px solid var(--lightGray);
|
||||||
|
border-radius: 3rem;
|
||||||
|
color: var(--greyFont);
|
||||||
|
width: 100px;
|
||||||
|
user-select: none;
|
||||||
|
cursor: pointer;
|
||||||
|
text-align: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 1150px) {
|
||||||
|
.photo-title-warp {
|
||||||
|
max-width: 780px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,201 @@
|
|||||||
|
<template>
|
||||||
|
<div>
|
||||||
|
<!-- 两句诗 -->
|
||||||
|
<div class="my-animation-slide-top">
|
||||||
|
<twoPoem :isHitokoto="false"></twoPoem>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div style="background: var(--background);animation: hideToShow 2.5s">
|
||||||
|
<div>
|
||||||
|
<treeHole :treeHoleList="treeHoleList"
|
||||||
|
:avatar="!$common.isEmpty($store.state.currentUser)?$store.state.currentUser.avatar:$store.state.webInfo.avatar"
|
||||||
|
@launch="launch"
|
||||||
|
@deleteTreeHole="deleteTreeHole">
|
||||||
|
</treeHole>
|
||||||
|
<proPage :current="pagination.current"
|
||||||
|
:size="pagination.size"
|
||||||
|
:total="pagination.total"
|
||||||
|
:buttonSize="3"
|
||||||
|
:color="$constant.pageColor"
|
||||||
|
@toPage="toPage">
|
||||||
|
</proPage>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!-- 页脚 -->
|
||||||
|
<myFooter :showFooter="showFooter"></myFooter>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<el-dialog title="微言"
|
||||||
|
:visible.sync="weiYanDialogVisible"
|
||||||
|
width="40%"
|
||||||
|
:before-close="handleClose"
|
||||||
|
:append-to-body="true"
|
||||||
|
destroy-on-close
|
||||||
|
center>
|
||||||
|
<div>
|
||||||
|
<div class="myCenter" style="padding-bottom: 20px">
|
||||||
|
<el-radio-group v-model="isPublic">
|
||||||
|
<el-radio-button :label="true">公开</el-radio-button>
|
||||||
|
<el-radio-button :label="false">私密</el-radio-button>
|
||||||
|
</el-radio-group>
|
||||||
|
</div>
|
||||||
|
<commentBox :disableGraffiti="true"
|
||||||
|
@submitComment="submitWeiYan">
|
||||||
|
</commentBox>
|
||||||
|
</div>
|
||||||
|
</el-dialog>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
const twoPoem = () => import( "./common/twoPoem");
|
||||||
|
const myFooter = () => import( "./common/myFooter");
|
||||||
|
const treeHole = () => import( "./common/treeHole");
|
||||||
|
const proPage = () => import( "./common/proPage");
|
||||||
|
const commentBox = () => import( "./comment/commentBox");
|
||||||
|
|
||||||
|
export default {
|
||||||
|
components: {
|
||||||
|
twoPoem,
|
||||||
|
myFooter,
|
||||||
|
treeHole,
|
||||||
|
proPage,
|
||||||
|
commentBox
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
treeHoleList: [],
|
||||||
|
pagination: {
|
||||||
|
current: 1,
|
||||||
|
size: 10,
|
||||||
|
total: 0
|
||||||
|
},
|
||||||
|
weiYanDialogVisible: false,
|
||||||
|
isPublic: true,
|
||||||
|
showFooter: false
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {},
|
||||||
|
|
||||||
|
watch: {},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.getWeiYan();
|
||||||
|
},
|
||||||
|
|
||||||
|
mounted() {
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
toPage(page) {
|
||||||
|
this.pagination.current = page;
|
||||||
|
window.scrollTo({
|
||||||
|
top: 240,
|
||||||
|
behavior: "smooth"
|
||||||
|
});
|
||||||
|
this.getWeiYan();
|
||||||
|
},
|
||||||
|
launch() {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.weiYanDialogVisible = true;
|
||||||
|
},
|
||||||
|
handleClose() {
|
||||||
|
this.weiYanDialogVisible = false;
|
||||||
|
},
|
||||||
|
submitWeiYan(content) {
|
||||||
|
let weiYan = {
|
||||||
|
content: content,
|
||||||
|
isPublic: this.isPublic
|
||||||
|
};
|
||||||
|
|
||||||
|
this.$http.post(this.$constant.baseURL + "/weiYan/saveWeiYan", weiYan)
|
||||||
|
.then((res) => {
|
||||||
|
this.getWeiYan();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
this.handleClose();
|
||||||
|
},
|
||||||
|
deleteTreeHole(id) {
|
||||||
|
if (this.$common.isEmpty(this.$store.state.currentUser)) {
|
||||||
|
this.$message({
|
||||||
|
message: "请先登录！",
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
this.$confirm('确认删除？', '提示', {
|
||||||
|
confirmButtonText: '确定',
|
||||||
|
cancelButtonText: '取消',
|
||||||
|
type: 'success',
|
||||||
|
center: true
|
||||||
|
}).then(() => {
|
||||||
|
this.$http.get(this.$constant.baseURL + "/weiYan/deleteWeiYan", {id: id})
|
||||||
|
.then((res) => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '删除成功!'
|
||||||
|
});
|
||||||
|
this.pagination.current = 1;
|
||||||
|
this.getWeiYan();
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}).catch(() => {
|
||||||
|
this.$message({
|
||||||
|
type: 'success',
|
||||||
|
message: '已取消删除!'
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getWeiYan() {
|
||||||
|
this.$http.post(this.$constant.baseURL + "/weiYan/listWeiYan", this.pagination)
|
||||||
|
.then((res) => {
|
||||||
|
this.showFooter = false;
|
||||||
|
if (!this.$common.isEmpty(res.data)) {
|
||||||
|
res.data.records.forEach(c => {
|
||||||
|
c.content = c.content.replace(/\n{2,}/g, '<div style="height: 12px"></div>');
|
||||||
|
c.content = c.content.replace(/\n/g, '<br/>');
|
||||||
|
c.content = this.$common.faceReg(c.content);
|
||||||
|
c.content = this.$common.pictureReg(c.content);
|
||||||
|
});
|
||||||
|
this.treeHoleList = res.data.records;
|
||||||
|
this.pagination.total = res.data.total;
|
||||||
|
}
|
||||||
|
this.$nextTick(() => {
|
||||||
|
this.showFooter = true;
|
||||||
|
});
|
||||||
|
})
|
||||||
|
.catch((error) => {
|
||||||
|
this.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped>
|
||||||
|
|
||||||
|
</style>
|
||||||
@ -0,0 +1,39 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import ElementUI from 'element-ui'
|
||||||
|
import http from './utils/request'
|
||||||
|
import common from './utils/common'
|
||||||
|
import constant from './utils/constant'
|
||||||
|
import mavonEditor from 'mavon-editor'
|
||||||
|
//引入js
|
||||||
|
//注释掉下面一行就取消了看板娘
|
||||||
|
// import './utils/live2d'
|
||||||
|
import './utils/title'
|
||||||
|
//引入css
|
||||||
|
import './assets/css/animation.css'
|
||||||
|
import './assets/css/index.css'
|
||||||
|
import './assets/css/tocbot.css'
|
||||||
|
import './assets/css/color.css'
|
||||||
|
import './assets/css/markdown-highlight.css'
|
||||||
|
import './assets/css/font-awesome.min.css'
|
||||||
|
import 'mavon-editor/dist/css/index.css'
|
||||||
|
|
||||||
|
import {vueBaberrage} from 'vue-baberrage'
|
||||||
|
|
||||||
|
Vue.use(ElementUI)
|
||||||
|
Vue.use(vueBaberrage)
|
||||||
|
Vue.use(mavonEditor)
|
||||||
|
|
||||||
|
Vue.prototype.$http = http
|
||||||
|
Vue.prototype.$common = common
|
||||||
|
Vue.prototype.$constant = constant
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
@ -0,0 +1,164 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
|
const originalPush = VueRouter.prototype.push;
|
||||||
|
VueRouter.prototype.push = function push(location) {
|
||||||
|
return originalPush.call(this, location).catch(err => err);
|
||||||
|
}
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/',
|
||||||
|
component: () => import('../components/home'),
|
||||||
|
children: [{
|
||||||
|
path: "/",
|
||||||
|
name: "index",
|
||||||
|
component: () => import('../components/index')
|
||||||
|
}, {
|
||||||
|
path: "/sort",
|
||||||
|
name: "sort",
|
||||||
|
component: () => import('../components/sort')
|
||||||
|
}, {
|
||||||
|
path: "/article",
|
||||||
|
name: "article",
|
||||||
|
component: () => import('../components/article')
|
||||||
|
}, {
|
||||||
|
path: "/weiYan",
|
||||||
|
name: "weiYan",
|
||||||
|
component: () => import('../components/weiYan')
|
||||||
|
}, {
|
||||||
|
path: "/love",
|
||||||
|
name: "love",
|
||||||
|
component: () => import('../components/love')
|
||||||
|
}, {
|
||||||
|
path: "/blog",
|
||||||
|
name: "blog",
|
||||||
|
component: () => import('../components/blog')
|
||||||
|
}, {
|
||||||
|
path: "/favorite",
|
||||||
|
name: "favorite",
|
||||||
|
component: () => import('../components/favorite')
|
||||||
|
}, {
|
||||||
|
path: "/travel",
|
||||||
|
name: "travel",
|
||||||
|
component: () => import('../components/travel')
|
||||||
|
}, {
|
||||||
|
path: "/message",
|
||||||
|
name: "message",
|
||||||
|
component: () => import('../components/message')
|
||||||
|
}, {
|
||||||
|
path: "/friend",
|
||||||
|
name: "friend",
|
||||||
|
component: () => import('../components/friend')
|
||||||
|
}, {
|
||||||
|
path: "/funny",
|
||||||
|
name: "funny",
|
||||||
|
component: () => import('../components/funny')
|
||||||
|
}, {
|
||||||
|
path: "/about",
|
||||||
|
name: "about",
|
||||||
|
component: () => import('../components/about')
|
||||||
|
}, {
|
||||||
|
path: "/user",
|
||||||
|
name: "user",
|
||||||
|
component: () => import('../components/user')
|
||||||
|
}, {
|
||||||
|
path: "/letter",
|
||||||
|
name: "letter",
|
||||||
|
component: () => import('../components/letter')
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/admin',
|
||||||
|
redirect: '/welcome',
|
||||||
|
meta: {requiresAuth: true},
|
||||||
|
component: () => import('../components/admin/admin'),
|
||||||
|
children: [{
|
||||||
|
path: '/welcome',
|
||||||
|
name: 'welcome',
|
||||||
|
component: () => import('../components/admin/welcome')
|
||||||
|
}, {
|
||||||
|
path: '/main',
|
||||||
|
name: 'main',
|
||||||
|
component: () => import('../components/admin/main')
|
||||||
|
}, {
|
||||||
|
path: '/webEdit',
|
||||||
|
name: 'webEdit',
|
||||||
|
component: () => import('../components/admin/webEdit')
|
||||||
|
}, {
|
||||||
|
path: '/userList',
|
||||||
|
name: 'userList',
|
||||||
|
component: () => import('../components/admin/userList')
|
||||||
|
}, {
|
||||||
|
path: '/postList',
|
||||||
|
name: 'postList',
|
||||||
|
component: () => import('../components/admin/postList')
|
||||||
|
}, {
|
||||||
|
path: '/postEdit',
|
||||||
|
name: 'postEdit',
|
||||||
|
component: () => import('../components/admin/postEdit')
|
||||||
|
}, {
|
||||||
|
path: '/sortList',
|
||||||
|
name: 'sortList',
|
||||||
|
component: () => import('../components/admin/sortList')
|
||||||
|
}, {
|
||||||
|
path: '/commentList',
|
||||||
|
name: 'commentList',
|
||||||
|
component: () => import('../components/admin/commentList')
|
||||||
|
}, {
|
||||||
|
path: '/treeHoleList',
|
||||||
|
name: 'treeHoleList',
|
||||||
|
component: () => import('../components/admin/treeHoleList')
|
||||||
|
}, {
|
||||||
|
path: '/resourceList',
|
||||||
|
name: 'resourceList',
|
||||||
|
component: () => import('../components/admin/resourceList')
|
||||||
|
}, {
|
||||||
|
path: '/loveList',
|
||||||
|
name: 'loveList',
|
||||||
|
component: () => import('../components/admin/loveList')
|
||||||
|
}, {
|
||||||
|
path: '/resourcePathList',
|
||||||
|
name: 'resourcePathList',
|
||||||
|
component: () => import('../components/admin/resourcePathList')
|
||||||
|
},
|
||||||
|
, {
|
||||||
|
path: '/drugReaction',
|
||||||
|
name: 'drugReaction',
|
||||||
|
component: () => import('../components/admin/drugReaction')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/verify',
|
||||||
|
name: 'verify',
|
||||||
|
component: () => import('../components/admin/verify')
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: "history",
|
||||||
|
routes: routes,
|
||||||
|
scrollBehavior(to, from, savedPosition) {
|
||||||
|
return {x: 0, y: 0}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
router.beforeEach((to, from, next) => {
|
||||||
|
if (to.matched.some(record => record.meta.requiresAuth)) {
|
||||||
|
if (!Boolean(localStorage.getItem("adminToken"))) {
|
||||||
|
next({
|
||||||
|
path: '/verify',
|
||||||
|
query: {redirect: to.fullPath}
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
next();
|
||||||
|
}
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
@ -0,0 +1,77 @@
|
|||||||
|
function getError(action, option, xhr) {
|
||||||
|
let msg;
|
||||||
|
if (xhr.response) {
|
||||||
|
msg = `${xhr.response.error || xhr.response}`;
|
||||||
|
} else if (xhr.responseText) {
|
||||||
|
msg = `${xhr.responseText}`;
|
||||||
|
} else {
|
||||||
|
msg = `fail to ${action} ${xhr.status}`;
|
||||||
|
}
|
||||||
|
|
||||||
|
return new Error(msg);
|
||||||
|
}
|
||||||
|
|
||||||
|
function getBody(xhr) {
|
||||||
|
const text = xhr.responseText || xhr.response;
|
||||||
|
if (!text) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
|
||||||
|
try {
|
||||||
|
return JSON.parse(text);
|
||||||
|
} catch (e) {
|
||||||
|
return text;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
export default function upload(option) {
|
||||||
|
const xhr = new XMLHttpRequest();
|
||||||
|
const action = option.action;
|
||||||
|
|
||||||
|
if (xhr.upload) {
|
||||||
|
xhr.upload.onprogress = function progress(e) {
|
||||||
|
if (e.total > 0) {
|
||||||
|
e.percent = e.loaded / e.total * 100;
|
||||||
|
}
|
||||||
|
option.onProgress(e);
|
||||||
|
};
|
||||||
|
}
|
||||||
|
|
||||||
|
const formData = new FormData();
|
||||||
|
|
||||||
|
if (option.data) {
|
||||||
|
Object.keys(option.data).forEach(key => {
|
||||||
|
formData.append(key, option.data[key]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
formData.append(option.filename, option.file, option.file.name);
|
||||||
|
|
||||||
|
xhr.onerror = function error(e) {
|
||||||
|
option.onError(e);
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.onload = function onload() {
|
||||||
|
if (xhr.status < 200 || xhr.status >= 300) {
|
||||||
|
return option.onError(getError(action, option, xhr));
|
||||||
|
}
|
||||||
|
|
||||||
|
option.onSuccess(getBody(xhr));
|
||||||
|
};
|
||||||
|
|
||||||
|
xhr.open('post', action, true);
|
||||||
|
|
||||||
|
if (option.withCredentials && 'withCredentials' in xhr) {
|
||||||
|
xhr.withCredentials = true;
|
||||||
|
}
|
||||||
|
|
||||||
|
const headers = option.headers || {};
|
||||||
|
|
||||||
|
for (let item in headers) {
|
||||||
|
if (headers.hasOwnProperty(item) && headers[item] !== null) {
|
||||||
|
xhr.setRequestHeader(item, headers[item]);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
xhr.send(formData);
|
||||||
|
return xhr;
|
||||||
|
}
|
||||||
@ -0,0 +1,98 @@
|
|||||||
|
if (document.querySelector(".author-content.author-content-item.single")) {
|
||||||
|
const canvas = document.createElement("canvas");
|
||||||
|
canvas.id = "header_canvas";
|
||||||
|
canvas.style.position = "absolute";
|
||||||
|
canvas.style.bottom = "0";
|
||||||
|
canvas.width = 844;
|
||||||
|
canvas.height = 346;
|
||||||
|
document.querySelector(".author-content.author-content-item.single").appendChild(canvas);
|
||||||
|
const parent = document.querySelector(".author-content.author-content-item.single").parentNode;
|
||||||
|
parent.className = "thumbnail_canvas";
|
||||||
|
(function () {
|
||||||
|
var canvas,
|
||||||
|
ctx,
|
||||||
|
width,
|
||||||
|
height,
|
||||||
|
bubbles,
|
||||||
|
animateHeader = true;
|
||||||
|
initHeader();
|
||||||
|
|
||||||
|
function initHeader() {
|
||||||
|
canvas = document.getElementById("header_canvas");
|
||||||
|
window_resize();
|
||||||
|
if (canvas) {
|
||||||
|
ctx = canvas.getContext("2d");
|
||||||
|
//建立泡泡
|
||||||
|
bubbles = [];
|
||||||
|
var num = width * 0.04; //气泡数量
|
||||||
|
for (var i = 0; i < num; i++) {
|
||||||
|
var c = new Bubble();
|
||||||
|
bubbles.push(c);
|
||||||
|
}
|
||||||
|
animate();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
function animate() {
|
||||||
|
if (animateHeader) {
|
||||||
|
ctx.clearRect(0, 0, width, height);
|
||||||
|
for (var i in bubbles) {
|
||||||
|
bubbles[i].draw();
|
||||||
|
}
|
||||||
|
}
|
||||||
|
requestAnimationFrame(animate);
|
||||||
|
}
|
||||||
|
|
||||||
|
function window_resize() {
|
||||||
|
//canvas铺满窗口
|
||||||
|
//width = window.innerWidth;
|
||||||
|
//height = window.innerHeight;
|
||||||
|
|
||||||
|
//如果需要铺满内容可以换下面这个
|
||||||
|
const panel = document.querySelector(".thumbnail_canvas");
|
||||||
|
if (panel) {
|
||||||
|
width = panel.offsetWidth;
|
||||||
|
height = panel.offsetHeight;
|
||||||
|
|
||||||
|
canvas.width = width;
|
||||||
|
canvas.height = height;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
window.onresize = function () {
|
||||||
|
window_resize();
|
||||||
|
};
|
||||||
|
|
||||||
|
function Bubble() {
|
||||||
|
var _this = this;
|
||||||
|
(function () {
|
||||||
|
_this.pos = {};
|
||||||
|
init();
|
||||||
|
})();
|
||||||
|
|
||||||
|
function init() {
|
||||||
|
_this.pos.x = Math.random() * width;
|
||||||
|
_this.pos.y = height + Math.random() * 100;
|
||||||
|
_this.alpha = 0.1 + Math.random() * 0.5; //气泡透明度
|
||||||
|
_this.alpha_change = 0.0002 + Math.random() * 0.0005; //气泡透明度变化速度
|
||||||
|
_this.scale = 0.2 + Math.random() * 0.8; //气泡大小
|
||||||
|
_this.scale_change = Math.random() * 0.002; //气泡大小变化速度
|
||||||
|
_this.speed = 0.1 + Math.random() * 0.4; //气泡上升速度
|
||||||
|
}
|
||||||
|
|
||||||
|
//气泡
|
||||||
|
this.draw = function () {
|
||||||
|
if (_this.alpha <= 0) {
|
||||||
|
init();
|
||||||
|
}
|
||||||
|
_this.pos.y -= _this.speed;
|
||||||
|
_this.alpha -= _this.alpha_change;
|
||||||
|
_this.scale += _this.scale_change;
|
||||||
|
ctx.beginPath();
|
||||||
|
ctx.arc(_this.pos.x, _this.pos.y, _this.scale * 10, 0, 2 * Math.PI, false);
|
||||||
|
ctx.fillStyle = "rgba(255,255,255," + _this.alpha + ")";
|
||||||
|
ctx.fill();
|
||||||
|
};
|
||||||
|
}
|
||||||
|
})();
|
||||||
|
}
|
||||||
@ -0,0 +1,305 @@
|
|||||||
|
import constant from "./constant";
|
||||||
|
import CryptoJS from 'crypto-js';
|
||||||
|
|
||||||
|
export default {
|
||||||
|
mobile() {
|
||||||
|
let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i);
|
||||||
|
return flag && flag.length && flag.length > 0;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 判断是否为空
|
||||||
|
*/
|
||||||
|
isEmpty(value) {
|
||||||
|
if (typeof value === "undefined" || value === null || (typeof value === "string" && value.trim() === "") || (Array.prototype.isPrototypeOf(value) && value.length === 0) || (Object.prototype.isPrototypeOf(value) && Object.keys(value).length === 0)) {
|
||||||
|
return true;
|
||||||
|
} else {
|
||||||
|
return false;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 加密
|
||||||
|
*/
|
||||||
|
encrypt(plaintText) {
|
||||||
|
let options = {
|
||||||
|
mode: CryptoJS.mode.ECB,
|
||||||
|
padding: CryptoJS.pad.Pkcs7
|
||||||
|
};
|
||||||
|
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
||||||
|
let encryptedData = CryptoJS.AES.encrypt(plaintText, key, options);
|
||||||
|
return encryptedData.toString().replace(/\//g, "_").replace(/\+/g, "-");
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 解密
|
||||||
|
*/
|
||||||
|
decrypt(encryptedBase64Str) {
|
||||||
|
let val = encryptedBase64Str.replace(/\-/g, '+').replace(/_/g, '/');
|
||||||
|
let options = {
|
||||||
|
mode: CryptoJS.mode.ECB,
|
||||||
|
padding: CryptoJS.pad.Pkcs7
|
||||||
|
};
|
||||||
|
let key = CryptoJS.enc.Utf8.parse(constant.cryptojs_key);
|
||||||
|
let decryptedData = CryptoJS.AES.decrypt(val, key, options);
|
||||||
|
return CryptoJS.enc.Utf8.stringify(decryptedData);
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表情包转换
|
||||||
|
*/
|
||||||
|
faceReg(content) {
|
||||||
|
content = content.replace(/\[[^\[^\]]+\]/g, (word) => {
|
||||||
|
let index = constant.emojiList.indexOf(word.replace("[", "").replace("]", ""));
|
||||||
|
if (index > -1) {
|
||||||
|
let url = constant.qiniuDownload + "emoji/q" + (index + 1) + ".gif";
|
||||||
|
return '<img style="vertical-align: middle;width: 32px;height: 32px" src="' + url + '" title="' + word + '"/>';
|
||||||
|
} else {
|
||||||
|
return word;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return content;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 图片转换
|
||||||
|
*/
|
||||||
|
pictureReg(content) {
|
||||||
|
content = content.replace(/\<[^\<^\>]+\>/g, (word) => {
|
||||||
|
let index = word.indexOf(",");
|
||||||
|
if (index > -1) {
|
||||||
|
let arr = word.replace("<", "").replace(">", "").split(",");
|
||||||
|
return '<img style="border-radius: 5px;width: 100%;max-width: 250px;display: block" src="' + arr[1] + '" title="' + arr[0] + '"/>';
|
||||||
|
} else {
|
||||||
|
return word;
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return content;
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 字符串转换为时间戳
|
||||||
|
*/
|
||||||
|
getDateTimeStamp(dateStr) {
|
||||||
|
return Date.parse(dateStr.replace(/-/gi, "/"));
|
||||||
|
},
|
||||||
|
|
||||||
|
getDateDiff(dateStr) {
|
||||||
|
let publishTime = isNaN(Date.parse(dateStr.replace(/-/gi, "/")) / 1000) ? Date.parse(dateStr) / 1000 : Date.parse(dateStr.replace(/-/gi, "/")) / 1000;
|
||||||
|
let d_seconds,
|
||||||
|
d_minutes,
|
||||||
|
d_hours,
|
||||||
|
d_days,
|
||||||
|
timeNow = Math.floor(new Date().getTime() / 1000),
|
||||||
|
d,
|
||||||
|
date = new Date(publishTime * 1000),
|
||||||
|
Y = date.getFullYear(),
|
||||||
|
M = date.getMonth() + 1,
|
||||||
|
D = date.getDate(),
|
||||||
|
H = date.getHours(),
|
||||||
|
m = date.getMinutes(),
|
||||||
|
s = date.getSeconds();
|
||||||
|
//小于10的在前面补0
|
||||||
|
if (M < 10) {
|
||||||
|
M = '0' + M;
|
||||||
|
}
|
||||||
|
if (D < 10) {
|
||||||
|
D = '0' + D;
|
||||||
|
}
|
||||||
|
if (H < 10) {
|
||||||
|
H = '0' + H;
|
||||||
|
}
|
||||||
|
if (m < 10) {
|
||||||
|
m = '0' + m;
|
||||||
|
}
|
||||||
|
if (s < 10) {
|
||||||
|
s = '0' + s;
|
||||||
|
}
|
||||||
|
d = timeNow - publishTime;
|
||||||
|
d_days = Math.floor(d / 86400);
|
||||||
|
d_hours = Math.floor(d / 3600);
|
||||||
|
d_minutes = Math.floor(d / 60);
|
||||||
|
d_seconds = Math.floor(d);
|
||||||
|
if (d_days > 0 && d_days < 3) {
|
||||||
|
return d_days + '天前';
|
||||||
|
} else if (d_days <= 0 && d_hours > 0) {
|
||||||
|
return d_hours + '小时前';
|
||||||
|
} else if (d_hours <= 0 && d_minutes > 0) {
|
||||||
|
return d_minutes + '分钟前';
|
||||||
|
} else if (d_seconds < 60) {
|
||||||
|
if (d_seconds <= 0) {
|
||||||
|
return '刚刚发表';
|
||||||
|
} else {
|
||||||
|
return d_seconds + '秒前';
|
||||||
|
}
|
||||||
|
} else if (d_days >= 3) {
|
||||||
|
return Y + '-' + M + '-' + D + ' ' + H + ':' + m;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 保存资源
|
||||||
|
*/
|
||||||
|
saveResource(that, type, path, size, mimeType, storeType, isAdmin = false) {
|
||||||
|
let resource = {
|
||||||
|
type: type,
|
||||||
|
path: path,
|
||||||
|
size: size,
|
||||||
|
mimeType: mimeType,
|
||||||
|
storeType: storeType
|
||||||
|
};
|
||||||
|
|
||||||
|
that.$http.post(that.$constant.baseURL + "/resource/saveResource", resource, isAdmin)
|
||||||
|
.catch((error) => {
|
||||||
|
that.$message({
|
||||||
|
message: error.message,
|
||||||
|
type: "error"
|
||||||
|
});
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 计算两个时间相差的年、月、日、时、分、秒
|
||||||
|
*
|
||||||
|
* https://juejin.cn/post/7153816601156911118
|
||||||
|
*/
|
||||||
|
timeDiff(oldTime, newTime) {
|
||||||
|
oldTime = oldTime.replace(new RegExp("-", "gm"), "/");
|
||||||
|
if (newTime) {
|
||||||
|
newTime = newTime.replace(new RegExp("-", "gm"), "/");
|
||||||
|
} else {
|
||||||
|
newTime = new Date();
|
||||||
|
}
|
||||||
|
|
||||||
|
// 计算比较日期
|
||||||
|
const getMaxMinDate = (time, twoTime, type) => {
|
||||||
|
let minTime = new Date(time).getTime() - new Date(twoTime).getTime() > 0 ? twoTime : time;
|
||||||
|
let maxTime = new Date(time).getTime() - new Date(twoTime).getTime() > 0 ? time : twoTime;
|
||||||
|
let maxDateDay = new Date(new Date(maxTime).getFullYear(), new Date(maxTime).getMonth() + 1, 0).getDate();
|
||||||
|
let maxMinDate = new Date(minTime).getDate() > maxDateDay ? maxDateDay : new Date(minTime).getDate();
|
||||||
|
let maxMinTong;
|
||||||
|
if (type === 'month') {
|
||||||
|
maxMinTong = new Date(maxTime).getFullYear() + '/' + (new Date(minTime).getMonth() + 1) + '/' + maxMinDate + ' ' + new Date(minTime).toLocaleTimeString('chinese', {hour12: false});
|
||||||
|
} else {
|
||||||
|
maxMinTong = new Date(maxTime).getFullYear() + '/' + (new Date(maxTime).getMonth() + 1) + '/' + maxMinDate + ' ' + new Date(minTime).toLocaleTimeString('chinese', {hour12: false});
|
||||||
|
}
|
||||||
|
return {
|
||||||
|
minTime,
|
||||||
|
maxTime,
|
||||||
|
maxMinTong
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 相差年份
|
||||||
|
const getYear = (time, twoTime) => {
|
||||||
|
let oneYear = new Date(time).getFullYear();
|
||||||
|
let twoYear = new Date(twoTime).getFullYear();
|
||||||
|
const {minTime, maxTime, maxMinTong} = getMaxMinDate(time, twoTime, 'month');
|
||||||
|
let chaYear = Math.abs(oneYear - twoYear);
|
||||||
|
if (new Date(maxMinTong).getTime() > new Date(maxTime).getTime()) {
|
||||||
|
chaYear--;
|
||||||
|
}
|
||||||
|
return chaYear;
|
||||||
|
}
|
||||||
|
|
||||||
|
// 相差月份
|
||||||
|
const getMonth = (time, twoTime, value) => {
|
||||||
|
let oneMonth = new Date(time).getFullYear() * 12 + (new Date(time).getMonth() + 1);
|
||||||
|
let twoMonth = new Date(twoTime).getFullYear() * 12 + (new Date(twoTime).getMonth() + 1);
|
||||||
|
const {minTime, maxTime, maxMinTong} = getMaxMinDate(time, twoTime, 'day');
|
||||||
|
let chaMonth = Math.abs(oneMonth - twoMonth);
|
||||||
|
if (new Date(maxMinTong).getTime() > new Date(maxTime).getTime()) {
|
||||||
|
chaMonth--;
|
||||||
|
}
|
||||||
|
if (value) {
|
||||||
|
return chaMonth - value;
|
||||||
|
} else {
|
||||||
|
return chaMonth;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 相差天数
|
||||||
|
const getDay = (time, twoTime, value) => {
|
||||||
|
let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
|
||||||
|
if (value) {
|
||||||
|
return parseInt(chaTime / 86400000) - value;
|
||||||
|
} else {
|
||||||
|
return parseInt(chaTime / 86400000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 相差小时
|
||||||
|
const getHour = (time, twoTime, value) => {
|
||||||
|
let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
|
||||||
|
if (value) {
|
||||||
|
return parseInt(chaTime / 3600000) - value;
|
||||||
|
} else {
|
||||||
|
return parseInt(chaTime / 3600000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 相差分钟
|
||||||
|
const getMinute = (time, twoTime, value) => {
|
||||||
|
let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
|
||||||
|
if (value) {
|
||||||
|
return parseInt(chaTime / 60000) - value;
|
||||||
|
} else {
|
||||||
|
return parseInt(chaTime / 60000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 相差秒
|
||||||
|
const getSecond = (time, twoTime, value) => {
|
||||||
|
let chaTime = Math.abs(new Date(time).getTime() - new Date(twoTime).getTime());
|
||||||
|
if (value) {
|
||||||
|
return parseInt(chaTime / 1000) - value;
|
||||||
|
} else {
|
||||||
|
return parseInt(chaTime / 1000);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
// 相差年月日时分秒
|
||||||
|
const getDiffYMDHMS = (time, twoTime) => {
|
||||||
|
const {minTime, maxTime, maxMinTong} = getMaxMinDate(time, twoTime, 'day');
|
||||||
|
let diffDay1 = getDay(minTime, maxMinTong);
|
||||||
|
if (new Date(maxMinTong).getTime() > new Date(maxTime).getTime()) {
|
||||||
|
let prevMonth = new Date(maxMinTong).getMonth() - 1;
|
||||||
|
let lastTime = new Date(maxMinTong).setMonth(prevMonth);
|
||||||
|
diffDay1 = diffDay1 - getDay((new Date(lastTime).getFullYear() + '/' + (new Date(lastTime).getMonth() + 1) + '/' + new Date(lastTime).getDate()), maxMinTong);
|
||||||
|
}
|
||||||
|
let diffYear = getYear(time, twoTime);
|
||||||
|
let diffMonth = getMonth(time, twoTime, diffYear * 12);
|
||||||
|
let diffDay = getDay(time, twoTime, diffDay1);
|
||||||
|
let diffHour = getHour(time, twoTime, getDay(time, twoTime) * 24);
|
||||||
|
let diffMinute = getMinute(time, twoTime, (getDay(time, twoTime) * 24 * 60 + diffHour * 60));
|
||||||
|
let diffSecond = getSecond(time, twoTime, (getDay(time, twoTime) * 24 * 60 * 60 + diffHour * 60 * 60 + diffMinute * 60));
|
||||||
|
return {
|
||||||
|
diffYear,
|
||||||
|
diffMonth,
|
||||||
|
diffDay,
|
||||||
|
diffHour,
|
||||||
|
diffMinute,
|
||||||
|
diffSecond
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return getDiffYMDHMS(oldTime, newTime);
|
||||||
|
},
|
||||||
|
|
||||||
|
countdown(time) {
|
||||||
|
time = new Date(time.replace(new RegExp("-", "gm"), "/"));
|
||||||
|
let nowTime = new Date();
|
||||||
|
//两个时间点的时间差(秒)
|
||||||
|
let seconds = parseInt((time.getTime() - nowTime.getTime()) / 1000);
|
||||||
|
let d = parseInt(seconds / 3600 / 24);
|
||||||
|
let h = parseInt(seconds / 3600 % 24);
|
||||||
|
let m = parseInt(seconds / 60 % 60);
|
||||||
|
let s = parseInt(seconds % 60);
|
||||||
|
return {
|
||||||
|
d,
|
||||||
|
h,
|
||||||
|
m,
|
||||||
|
s
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in new issue