init
This commit is contained in:
commit
d99f323ab1
2
.browserslistrc
Normal file
2
.browserslistrc
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
> 1%
|
||||||
|
last 2 versions
|
||||||
21
.gitignore
vendored
Normal file
21
.gitignore
vendored
Normal file
@ -0,0 +1,21 @@
|
|||||||
|
.DS_Store
|
||||||
|
node_modules
|
||||||
|
/dist
|
||||||
|
|
||||||
|
# local env files
|
||||||
|
.env.local
|
||||||
|
.env.*.local
|
||||||
|
|
||||||
|
# Log files
|
||||||
|
npm-debug.log*
|
||||||
|
yarn-debug.log*
|
||||||
|
yarn-error.log*
|
||||||
|
|
||||||
|
# Editor directories and files
|
||||||
|
.idea
|
||||||
|
.vscode
|
||||||
|
*.suo
|
||||||
|
*.ntvs*
|
||||||
|
*.njsproj
|
||||||
|
*.sln
|
||||||
|
*.sw?
|
||||||
201
LICENSE
Normal file
201
LICENSE
Normal file
@ -0,0 +1,201 @@
|
|||||||
|
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 2019 diaogroup
|
||||||
|
|
||||||
|
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.
|
||||||
20
README.md
Normal file
20
README.md
Normal file
@ -0,0 +1,20 @@
|
|||||||
|
# 曳光控制台
|
||||||
|
|
||||||
|
|
||||||
|
## Project setup
|
||||||
|
```
|
||||||
|
npm install
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and hot-reloads for development
|
||||||
|
```
|
||||||
|
npm run serve
|
||||||
|
```
|
||||||
|
|
||||||
|
### Compiles and minifies for production
|
||||||
|
```
|
||||||
|
npm run build
|
||||||
|
```
|
||||||
|
|
||||||
|
### Customize configuration
|
||||||
|
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||||
5
babel.config.js
Normal file
5
babel.config.js
Normal file
@ -0,0 +1,5 @@
|
|||||||
|
module.exports = {
|
||||||
|
presets: [
|
||||||
|
'@vue/cli-plugin-babel/preset'
|
||||||
|
]
|
||||||
|
}
|
||||||
12007
package-lock.json
generated
Normal file
12007
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
38
package.json
Normal file
38
package.json
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
{
|
||||||
|
"name": "ygadmin",
|
||||||
|
"version": "0.1.0",
|
||||||
|
"private": true,
|
||||||
|
"scripts": {
|
||||||
|
"serve": "vue-cli-service serve",
|
||||||
|
"build": "vue-cli-service build",
|
||||||
|
"buildsuper": "vue-cli-service build --modern"
|
||||||
|
},
|
||||||
|
"dependencies": {
|
||||||
|
"axios": "^0.19.2",
|
||||||
|
"core-js": "^3.6.4",
|
||||||
|
"crc-32": "^1.2.0",
|
||||||
|
"crypto-js": "^4.0.0",
|
||||||
|
"lrz": "^4.9.40",
|
||||||
|
"material-design-icons": "^3.0.1",
|
||||||
|
"register-service-worker": "^1.6.2",
|
||||||
|
"roboto-fontface": "^0.6.0",
|
||||||
|
"vconsole": "^3.3.4",
|
||||||
|
"vue": "^2.6.11",
|
||||||
|
"vue-clipboard2": "^0.3.1",
|
||||||
|
"vue-material": "^1.0.0-beta-11",
|
||||||
|
"vue-router": "^3.1.5",
|
||||||
|
"vue-svg-icon": "^1.2.9",
|
||||||
|
"vue-touch": "^2.0.0-beta.4",
|
||||||
|
"vuex": "^3.1.2"
|
||||||
|
},
|
||||||
|
"devDependencies": {
|
||||||
|
"@vue/cli-plugin-babel": "^4.2.0",
|
||||||
|
"@vue/cli-plugin-pwa": "^4.2.0",
|
||||||
|
"@vue/cli-plugin-router": "^4.2.0",
|
||||||
|
"@vue/cli-plugin-vuex": "^4.2.0",
|
||||||
|
"@vue/cli-service": "^4.2.0",
|
||||||
|
"node-sass": "^4.12.0",
|
||||||
|
"sass-loader": "^8.0.2",
|
||||||
|
"vue-template-compiler": "^2.6.11"
|
||||||
|
}
|
||||||
|
}
|
||||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
BIN
public/img/icons/android-chrome-192x192.png
Normal file
BIN
public/img/icons/android-chrome-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.8 KiB |
BIN
public/img/icons/android-chrome-512x512.png
Normal file
BIN
public/img/icons/android-chrome-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
BIN
public/img/icons/apple-touch-icon-120x120.png
Normal file
BIN
public/img/icons/apple-touch-icon-120x120.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 KiB |
BIN
public/img/icons/apple-touch-icon-152x152.png
Normal file
BIN
public/img/icons/apple-touch-icon-152x152.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.9 KiB |
BIN
public/img/icons/apple-touch-icon-180x180.png
Normal file
BIN
public/img/icons/apple-touch-icon-180x180.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
public/img/icons/apple-touch-icon-60x60.png
Normal file
BIN
public/img/icons/apple-touch-icon-60x60.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.2 KiB |
BIN
public/img/icons/apple-touch-icon-76x76.png
Normal file
BIN
public/img/icons/apple-touch-icon-76x76.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.5 KiB |
BIN
public/img/icons/apple-touch-icon.png
Normal file
BIN
public/img/icons/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 3.4 KiB |
BIN
public/img/icons/favicon-16x16.png
Normal file
BIN
public/img/icons/favicon-16x16.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 387 B |
BIN
public/img/icons/favicon-32x32.png
Normal file
BIN
public/img/icons/favicon-32x32.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 726 B |
BIN
public/img/icons/msapplication-icon-144x144.png
Normal file
BIN
public/img/icons/msapplication-icon-144x144.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.6 KiB |
BIN
public/img/icons/mstile-150x150.png
Normal file
BIN
public/img/icons/mstile-150x150.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 2.8 KiB |
1
public/img/icons/safari-pinned-tab.svg
Normal file
1
public/img/icons/safari-pinned-tab.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1582191167349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3270" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" p-id="3271" fill="#bbdefb"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
38
public/index.html
Normal file
38
public/index.html
Normal file
@ -0,0 +1,38 @@
|
|||||||
|
<!DOCTYPE html>
|
||||||
|
<html lang="en">
|
||||||
|
|
||||||
|
<head>
|
||||||
|
<meta charset="utf-8">
|
||||||
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
|
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
||||||
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<title>曳光</title>
|
||||||
|
<meta name="apple-mobile-web-app-capable" content="yes">
|
||||||
|
<meta name="apple-mobile-web-app-status-bar-style" content="black">
|
||||||
|
<link rel="apple-touch-icon-precomposed" href="<%= BASE_URL %>favicon.ico">
|
||||||
|
<!-- 标题 -->
|
||||||
|
<meta itemprop="name" content="曳光控制台" />
|
||||||
|
<!-- 描述 -->
|
||||||
|
<meta itemprop="description" content="负责进行曳光内容审核" />
|
||||||
|
<!-- 图片 -->
|
||||||
|
<meta itemprop="image" content="http://canary.moe/img/canary.png" />
|
||||||
|
<script>
|
||||||
|
try {
|
||||||
|
console.log('%cRainSun Copyright \xa9 2019-%s',
|
||||||
|
'font-size:12px;color:#999999;', (new Date).getFullYear());
|
||||||
|
}
|
||||||
|
catch (e) {
|
||||||
|
}
|
||||||
|
</script>
|
||||||
|
</head>
|
||||||
|
|
||||||
|
<body>
|
||||||
|
<noscript>
|
||||||
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||||
|
Please enable it to continue.</strong>
|
||||||
|
</noscript>
|
||||||
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
2
public/robots.txt
Normal file
2
public/robots.txt
Normal file
@ -0,0 +1,2 @@
|
|||||||
|
User-agent: *
|
||||||
|
Disallow:
|
||||||
205
src/App.vue
Normal file
205
src/App.vue
Normal file
@ -0,0 +1,205 @@
|
|||||||
|
<template>
|
||||||
|
<div id="app">
|
||||||
|
<icon class="bg" name="canary"></icon>
|
||||||
|
<!-- 缓存 -->
|
||||||
|
<keep-alive>
|
||||||
|
<router-view v-if="this.$route.meta.keepAlive"></router-view>
|
||||||
|
</keep-alive>
|
||||||
|
<!-- 非缓存 -->
|
||||||
|
<router-view v-if="!this.$route.meta.keepAlive"></router-view>
|
||||||
|
<md-bottom-bar
|
||||||
|
style="position: fixed; bottom: 0; left: 0; width: 100%;"
|
||||||
|
md-sync-route
|
||||||
|
v-if="bar_state"
|
||||||
|
>
|
||||||
|
<md-bottom-bar-item
|
||||||
|
id="bottom-bar-item-home"
|
||||||
|
md-icon="home"
|
||||||
|
md-label="主页"
|
||||||
|
to="/home"
|
||||||
|
></md-bottom-bar-item>
|
||||||
|
<md-bottom-bar-item
|
||||||
|
id="bottom-bar-item-create"
|
||||||
|
md-icon="near_me"
|
||||||
|
md-label="创建"
|
||||||
|
to="/create"
|
||||||
|
></md-bottom-bar-item>
|
||||||
|
<md-bottom-bar-item
|
||||||
|
id="bottom-bar-item-mine"
|
||||||
|
md-icon="person"
|
||||||
|
md-label="我的"
|
||||||
|
to="/account"
|
||||||
|
></md-bottom-bar-item>
|
||||||
|
</md-bottom-bar>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script>
|
||||||
|
import { mapState } from 'vuex';
|
||||||
|
export default {
|
||||||
|
name: 'App',
|
||||||
|
computed: {
|
||||||
|
...mapState(["bar_state"])
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="scss">
|
||||||
|
@import "./style/main";
|
||||||
|
@import "./style/font";
|
||||||
|
@import "~vue-material/dist/theme/engine";
|
||||||
|
@import "~vue-material/dist/theme/all";
|
||||||
|
body,
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6,
|
||||||
|
hr,
|
||||||
|
p,
|
||||||
|
blockquote,
|
||||||
|
dl,
|
||||||
|
dt,
|
||||||
|
dd,
|
||||||
|
ul,
|
||||||
|
ol,
|
||||||
|
li,
|
||||||
|
pre,
|
||||||
|
form,
|
||||||
|
fieldset,
|
||||||
|
legend,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
textarea,
|
||||||
|
th,
|
||||||
|
td {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
}
|
||||||
|
body,
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font: 12px/1.5tahoma, arial, \5b8b\4f53;
|
||||||
|
}
|
||||||
|
h1,
|
||||||
|
h2,
|
||||||
|
h3,
|
||||||
|
h4,
|
||||||
|
h5,
|
||||||
|
h6 {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
address,
|
||||||
|
cite,
|
||||||
|
dfn,
|
||||||
|
em,
|
||||||
|
var {
|
||||||
|
font-style: normal;
|
||||||
|
}
|
||||||
|
code,
|
||||||
|
kbd,
|
||||||
|
pre,
|
||||||
|
samp {
|
||||||
|
font-family: couriernew, courier, monospace;
|
||||||
|
}
|
||||||
|
small {
|
||||||
|
font-size: 12px;
|
||||||
|
}
|
||||||
|
ul,
|
||||||
|
ol {
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
a {
|
||||||
|
text-decoration: none;
|
||||||
|
}
|
||||||
|
a:hover {
|
||||||
|
text-decoration: underline;
|
||||||
|
}
|
||||||
|
sup {
|
||||||
|
vertical-align: text-top;
|
||||||
|
}
|
||||||
|
sub {
|
||||||
|
vertical-align: text-bottom;
|
||||||
|
}
|
||||||
|
legend {
|
||||||
|
color: #000;
|
||||||
|
}
|
||||||
|
fieldset,
|
||||||
|
img {
|
||||||
|
border: 0;
|
||||||
|
}
|
||||||
|
button,
|
||||||
|
input,
|
||||||
|
select,
|
||||||
|
textarea {
|
||||||
|
font-size: 100%;
|
||||||
|
}
|
||||||
|
table {
|
||||||
|
border-collapse: collapse;
|
||||||
|
border-spacing: 0;
|
||||||
|
}
|
||||||
|
button {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
background: none;
|
||||||
|
border: none;
|
||||||
|
outline: none;
|
||||||
|
}
|
||||||
|
html[data-theme="dark"] {
|
||||||
|
@include set-theme-dark();
|
||||||
|
@import "~vue-material/dist/theme/all";
|
||||||
|
.md-caption {
|
||||||
|
color: rgba(255, 255, 255, 0.7);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
html[data-theme="light"] {
|
||||||
|
@include set-theme-light();
|
||||||
|
@import "~vue-material/dist/theme/all";
|
||||||
|
}
|
||||||
|
#app {
|
||||||
|
font-family: "Roboto", "Helvetica Neue", Helvetica, "PingFang SC",
|
||||||
|
"Hiragino Sans GB", "Microsoft YaHei", "微软雅黑", Arial, sans-serif;
|
||||||
|
-webkit-font-smoothing: antialiased;
|
||||||
|
-moz-osx-font-smoothing: grayscale;
|
||||||
|
/* text-align: center; */
|
||||||
|
// color: #2c3e50;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
|
-moz-user-select: none;
|
||||||
|
-webkit-user-select: none;
|
||||||
|
-ms-user-select: none;
|
||||||
|
-khtml-user-select: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
.bg {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
z-index: -100;
|
||||||
|
height: 5rem;
|
||||||
|
width: 5rem;
|
||||||
|
margin-top: -2.5rem;
|
||||||
|
margin-left: -2.5rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
@media screen and (max-width: 500px) {
|
||||||
|
.md-autocomplete-box-content {
|
||||||
|
left: 0.2rem !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
#__vconsole {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.vconsole-show {
|
||||||
|
display: block !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||||||
|
max-width: 1000px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
BIN
src/assets/KFOmCnqEu92Fr1Mu4WxKOzY.woff2
Normal file
BIN
src/assets/KFOmCnqEu92Fr1Mu4WxKOzY.woff2
Normal file
Binary file not shown.
BIN
src/assets/MaterialIcons-Regular.eot
Normal file
BIN
src/assets/MaterialIcons-Regular.eot
Normal file
Binary file not shown.
BIN
src/assets/MaterialIcons-Regular.ttf
Normal file
BIN
src/assets/MaterialIcons-Regular.ttf
Normal file
Binary file not shown.
BIN
src/assets/MaterialIcons-Regular.woff
Normal file
BIN
src/assets/MaterialIcons-Regular.woff
Normal file
Binary file not shown.
BIN
src/assets/MaterialIcons-Regular.woff2
Normal file
BIN
src/assets/MaterialIcons-Regular.woff2
Normal file
Binary file not shown.
BIN
src/assets/canary.png
Normal file
BIN
src/assets/canary.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.9 KiB |
BIN
src/assets/logo.png
Normal file
BIN
src/assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.7 KiB |
23
src/axios/fetch.js
Normal file
23
src/axios/fetch.js
Normal file
@ -0,0 +1,23 @@
|
|||||||
|
import axios from 'axios'
|
||||||
|
|
||||||
|
export const api = axios.create({
|
||||||
|
baseURL: 'https://yg.canary.moe/v1/user/',
|
||||||
|
// baseURL: window.location.origin + '/api/',
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'application/json',
|
||||||
|
'Accept': 'application/json',
|
||||||
|
'Access-Control-Allow-Origin': '*'
|
||||||
|
},
|
||||||
|
timeout: 30 * 1000
|
||||||
|
})
|
||||||
|
|
||||||
|
//设置拦截器
|
||||||
|
api.interceptors.response.use(
|
||||||
|
(response) => {
|
||||||
|
// console.log('拦截器:请求成功', response)
|
||||||
|
return response
|
||||||
|
}, (error) => {
|
||||||
|
// console.log('拦截器:发生错误', error.response)
|
||||||
|
return Promise.reject(error)
|
||||||
|
}
|
||||||
|
)
|
||||||
40
src/main.js
Normal file
40
src/main.js
Normal file
@ -0,0 +1,40 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import App from './App.vue'
|
||||||
|
import './registerServiceWorker'
|
||||||
|
import router from './router'
|
||||||
|
import store from './store'
|
||||||
|
import { setHtmlFontSize } from './utils/px2rem.js'
|
||||||
|
// icon-loader
|
||||||
|
import Icon from 'vue-svg-icon/Icon.vue'
|
||||||
|
Vue.component('icon', Icon);
|
||||||
|
|
||||||
|
// material
|
||||||
|
import VueMaterial from 'vue-material'
|
||||||
|
import 'vue-material/dist/vue-material.min.css'
|
||||||
|
import 'vue-material/dist/theme/default.css'
|
||||||
|
// import 'vue-material/dist/theme/default-dark.css'
|
||||||
|
import 'material-design-icons/iconfont/material-icons.css'
|
||||||
|
Vue.use(VueMaterial)
|
||||||
|
|
||||||
|
//px2rem
|
||||||
|
setHtmlFontSize();
|
||||||
|
|
||||||
|
// 剪切板
|
||||||
|
import VueClipboard from "vue-clipboard2";
|
||||||
|
Vue.use(VueClipboard);
|
||||||
|
|
||||||
|
// 手势控件
|
||||||
|
var VueTouch = require('vue-touch')
|
||||||
|
Vue.use(VueTouch, {name: 'v-touch'})
|
||||||
|
|
||||||
|
// vconsole
|
||||||
|
import Vconsole from 'vconsole';
|
||||||
|
new Vconsole();
|
||||||
|
|
||||||
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
|
new Vue({
|
||||||
|
router,
|
||||||
|
store,
|
||||||
|
render: h => h(App)
|
||||||
|
}).$mount('#app')
|
||||||
33
src/registerServiceWorker.js
Normal file
33
src/registerServiceWorker.js
Normal file
@ -0,0 +1,33 @@
|
|||||||
|
/* eslint-disable no-console */
|
||||||
|
|
||||||
|
import { register } from 'register-service-worker'
|
||||||
|
|
||||||
|
if (process.env.NODE_ENV === 'production') {
|
||||||
|
register(`${process.env.BASE_URL}service-worker.js`, {
|
||||||
|
ready () {
|
||||||
|
console.log(
|
||||||
|
'App is being served from cache by a service worker.\n' +
|
||||||
|
'For more details, visit https://goo.gl/AFskqB'
|
||||||
|
)
|
||||||
|
},
|
||||||
|
registered () {
|
||||||
|
console.log('Service worker has been registered.')
|
||||||
|
},
|
||||||
|
cached () {
|
||||||
|
console.log('Content has been cached for offline use.')
|
||||||
|
},
|
||||||
|
updatefound () {
|
||||||
|
console.log('New content is downloading.')
|
||||||
|
},
|
||||||
|
updated () {
|
||||||
|
console.log('New content is available; please refresh.')
|
||||||
|
window.location.reload(true)
|
||||||
|
},
|
||||||
|
offline () {
|
||||||
|
console.log('No internet connection found. App is running in offline mode.')
|
||||||
|
},
|
||||||
|
error (error) {
|
||||||
|
console.error('Error during service worker registration:', error)
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
||||||
53
src/router/index.js
Normal file
53
src/router/index.js
Normal file
@ -0,0 +1,53 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import VueRouter from 'vue-router'
|
||||||
|
|
||||||
|
Vue.use(VueRouter)
|
||||||
|
|
||||||
|
const routes = [
|
||||||
|
{
|
||||||
|
path: '/home',
|
||||||
|
name: 'Home',
|
||||||
|
component: () => import(/* webpackChunkName: "verify" */ '../views/Home/Home.vue'),
|
||||||
|
meta: {
|
||||||
|
keepAlive: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/create',
|
||||||
|
name: 'Create',
|
||||||
|
component: () => import(/* webpackChunkName: "create" */ '../views/Create/Create.vue'),
|
||||||
|
meta: {
|
||||||
|
keepAlive: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/account',
|
||||||
|
name: 'Account',
|
||||||
|
component: () => import(/* webpackChunkName: "account" */ '../views/Account/Account.vue'),
|
||||||
|
meta: {
|
||||||
|
keepAlive: true
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '/detail',
|
||||||
|
name: 'Detail',
|
||||||
|
component: () => import(/* webpackChunkName: "detail" */ '../views/Detail/Detail.vue'),
|
||||||
|
meta: {
|
||||||
|
keepAlive: false
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
path: '*', // 页面不存在的情况下会跳到home
|
||||||
|
redirect: '/home',
|
||||||
|
name: 'notFound',
|
||||||
|
hidden: true
|
||||||
|
}
|
||||||
|
]
|
||||||
|
|
||||||
|
const router = new VueRouter({
|
||||||
|
mode: 'history',
|
||||||
|
base: process.env.BASE_URL,
|
||||||
|
routes,
|
||||||
|
})
|
||||||
|
|
||||||
|
export default router
|
||||||
69
src/store/index.js
Normal file
69
src/store/index.js
Normal file
@ -0,0 +1,69 @@
|
|||||||
|
import Vue from 'vue'
|
||||||
|
import Vuex from 'vuex'
|
||||||
|
|
||||||
|
Vue.use(Vuex)
|
||||||
|
|
||||||
|
export default new Vuex.Store({
|
||||||
|
state: {
|
||||||
|
// 用户信息
|
||||||
|
user_info: {},
|
||||||
|
// 配置信息
|
||||||
|
settings: {
|
||||||
|
open_vconsole: false,
|
||||||
|
is_dark_mode: false,
|
||||||
|
},
|
||||||
|
// 失物招领信息
|
||||||
|
laf: [],
|
||||||
|
// bottomBar显示状态
|
||||||
|
bar_state: true
|
||||||
|
},
|
||||||
|
mutations: {
|
||||||
|
// 设置用户信息
|
||||||
|
SET_USERINFO(state, user_info) {
|
||||||
|
state.user_info = user_info;
|
||||||
|
},
|
||||||
|
// 设置配置信息
|
||||||
|
SET_SETTINGS(state, settings) {
|
||||||
|
state.settings = settings;
|
||||||
|
},
|
||||||
|
// 设置失物招领信息
|
||||||
|
SET_LAF(state, laf) {
|
||||||
|
state.laf = laf;
|
||||||
|
},
|
||||||
|
// 设置bottomBar显示状态
|
||||||
|
SET_BARSTATE(state, bar_state) {
|
||||||
|
state.bar_state = bar_state;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
actions: {
|
||||||
|
// 设置用户信息
|
||||||
|
setUserInfo({
|
||||||
|
commit
|
||||||
|
}, arg) {
|
||||||
|
commit('SET_USERINFO', arg[0]);
|
||||||
|
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||||
|
},
|
||||||
|
// 设置配置信息
|
||||||
|
setSettings({
|
||||||
|
commit
|
||||||
|
}, arg) {
|
||||||
|
commit('SET_SETTINGS', arg[0]);
|
||||||
|
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||||
|
},
|
||||||
|
// 设置失物招领信息
|
||||||
|
setLaf({
|
||||||
|
commit
|
||||||
|
}, arg) {
|
||||||
|
commit('SET_LAF', arg[0]);
|
||||||
|
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||||
|
},
|
||||||
|
// 设置bottomBar显示状态
|
||||||
|
setBarState({
|
||||||
|
commit
|
||||||
|
}, arg) {
|
||||||
|
commit('SET_BARSTATE', arg[0]);
|
||||||
|
localStorage.setItem("storeState", JSON.stringify(arg[1].$store.state));
|
||||||
|
},
|
||||||
|
},
|
||||||
|
modules: {}
|
||||||
|
})
|
||||||
99
src/style/font.scss
Normal file
99
src/style/font.scss
Normal file
@ -0,0 +1,99 @@
|
|||||||
|
/* cyrillic-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu72xKOzY.woff2) format('woff2');
|
||||||
|
unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
|
||||||
|
}
|
||||||
|
/* cyrillic */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu5mxKOzY.woff2) format('woff2');
|
||||||
|
unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
|
||||||
|
}
|
||||||
|
/* greek-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7mxKOzY.woff2) format('woff2');
|
||||||
|
unicode-range: U+1F00-1FFF;
|
||||||
|
}
|
||||||
|
/* greek */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4WxKOzY.woff2) format('woff2');
|
||||||
|
unicode-range: U+0370-03FF;
|
||||||
|
}
|
||||||
|
/* vietnamese */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7WxKOzY.woff2) format('woff2');
|
||||||
|
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+1EA0-1EF9, U+20AB;
|
||||||
|
}
|
||||||
|
/* latin-ext */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu7GxKOzY.woff2) format('woff2');
|
||||||
|
unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
|
||||||
|
}
|
||||||
|
/* latin */
|
||||||
|
@font-face {
|
||||||
|
font-family: 'Roboto';
|
||||||
|
font-style: normal;
|
||||||
|
font-weight: 400;
|
||||||
|
font-display: swap;
|
||||||
|
src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v20/KFOmCnqEu92Fr1Mu4mxK.woff2) format('woff2');
|
||||||
|
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
|
||||||
|
}
|
||||||
|
// @font-face {
|
||||||
|
// font-family: 'Material Icons';
|
||||||
|
// font-style: normal;
|
||||||
|
// font-weight: 400;
|
||||||
|
// src: url(/assets/MaterialIcons-Regular.eot); /* For IE6-8 */
|
||||||
|
// src: local('Material Icons'),
|
||||||
|
// local('MaterialIcons-Regular'),
|
||||||
|
// url(/assets/MaterialIcons-Regular.woff2) format('woff2'),
|
||||||
|
// url(/assets/MaterialIcons-Regular.woff) format('woff'),
|
||||||
|
// url(/assets/MaterialIcons-Regular.ttf) format('truetype');
|
||||||
|
// }
|
||||||
|
|
||||||
|
// .material-icons {
|
||||||
|
// font-family: 'Material Icons';
|
||||||
|
// font-weight: normal;
|
||||||
|
// font-style: normal;
|
||||||
|
// font-size: 24px; /* Preferred icon size */
|
||||||
|
// display: inline-block;
|
||||||
|
// line-height: 1;
|
||||||
|
// text-transform: none;
|
||||||
|
// letter-spacing: normal;
|
||||||
|
// word-wrap: normal;
|
||||||
|
// white-space: nowrap;
|
||||||
|
// direction: ltr;
|
||||||
|
|
||||||
|
// /* Support for all WebKit browsers. */
|
||||||
|
// -webkit-font-smoothing: antialiased;
|
||||||
|
// /* Support for Safari and Chrome. */
|
||||||
|
// text-rendering: optimizeLegibility;
|
||||||
|
|
||||||
|
// /* Support for Firefox. */
|
||||||
|
// -moz-osx-font-smoothing: grayscale;
|
||||||
|
|
||||||
|
// /* Support for IE. */
|
||||||
|
// font-feature-settings: 'liga';
|
||||||
|
// }
|
||||||
36
src/style/main.scss
Normal file
36
src/style/main.scss
Normal file
@ -0,0 +1,36 @@
|
|||||||
|
$main-color: #448aff;
|
||||||
|
|
||||||
|
@import '~vue-material/dist/theme/engine'; // Import the theme engine
|
||||||
|
|
||||||
|
@mixin set-theme-light() {
|
||||||
|
@include md-register-theme(
|
||||||
|
'default',
|
||||||
|
(
|
||||||
|
primary: md-get-palette-color(blue, A200),
|
||||||
|
// The primary color of your application
|
||||||
|
|
||||||
|
accent: md-get-palette-color(red, A200),
|
||||||
|
// The accent or secondary color
|
||||||
|
|
||||||
|
theme: light// This can be dark or light
|
||||||
|
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
@mixin set-theme-dark() {
|
||||||
|
@include md-register-theme(
|
||||||
|
'default',
|
||||||
|
(
|
||||||
|
primary: md-get-palette-color(blue, A200),
|
||||||
|
// The primary color of your application
|
||||||
|
|
||||||
|
accent: md-get-palette-color(red, A200),
|
||||||
|
// The accent or secondary color
|
||||||
|
|
||||||
|
theme: dark// This can be dark or light
|
||||||
|
|
||||||
|
)
|
||||||
|
);
|
||||||
|
}
|
||||||
|
@import '~vue-material/dist/theme/all'; // Apply the theme
|
||||||
1
src/svg/canary-white.svg
Normal file
1
src/svg/canary-white.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg class="icon" width="200px" height="200.00px" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"><path fill="#ffffff" d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" /></svg>
|
||||||
|
After Width: | Height: | Size: 1.0 KiB |
1
src/svg/canary.svg
Normal file
1
src/svg/canary.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1582191167349" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="3270" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M921.6 716.75904L415.46752 210.66752a136.25344 136.25344 0 0 0-96.54272-39.99744c-70.93248 0-128.53248 54.272-135.19872 123.43296L102.4 375.43936h86.12864C210.59584 506.39872 294.57408 616.09984 409.6 673.49504v179.84512h68.27008V700.34432a405.18656 405.18656 0 0 0 68.25984 13.70112v139.30496H614.4V716.75904h307.2zM448.93184 340.6336L620.2368 511.95904h-39.95648c-75.27424 0-136.54016-61.22496-136.54016-136.52992-0.01024-12.12416 2.12992-23.63392 5.19168-34.79552z m-198.26688-33.46432a68.32128 68.32128 0 0 1 68.25984-68.22912c18.19648 0 35.36896 7.09632 48.27136 19.99872l28.4672 28.4672a202.37312 202.37312 0 0 0-20.20352 88.03328c0 112.92672 91.86304 204.8 204.8 204.8h108.22656l68.27008 68.25984H592.00512c-188.20096 0-341.34016-153.1392-341.34016-341.32992z" p-id="3271" fill="#bbdefb"></path></svg>
|
||||||
|
After Width: | Height: | Size: 1.2 KiB |
1
src/svg/file_copy.svg
Normal file
1
src/svg/file_copy.svg
Normal file
@ -0,0 +1 @@
|
|||||||
|
<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M16 1H4c-1.1 0-2 .9-2 2v14h2V3h12V1zm-1 4l6 6v10c0 1.1-.9 2-2 2H7.99C6.89 23 6 22.1 6 21l.01-14c0-1.1.89-2 1.99-2h7zm-1 7h5.5L14 6.5V12z"/></svg>
|
||||||
|
After Width: | Height: | Size: 274 B |
19
src/utils/aes.js
Normal file
19
src/utils/aes.js
Normal file
@ -0,0 +1,19 @@
|
|||||||
|
import CryptoJS from 'crypto-js'
|
||||||
|
|
||||||
|
// aes加密用户密码
|
||||||
|
export function encryptMainCode(code) {
|
||||||
|
let default_key = 'e08b44a351a3'
|
||||||
|
return CryptoJS.AES.encrypt(code, CryptoJS.enc.Utf8.parse(default_key), {
|
||||||
|
mode: CryptoJS.mode.ECB,
|
||||||
|
padding: CryptoJS.pad.Pkcs7
|
||||||
|
}).toString();
|
||||||
|
}
|
||||||
|
|
||||||
|
// aes解密用户密码
|
||||||
|
export function decryptMainCode(row_code) {
|
||||||
|
let default_key = 'e08b44a351a3'
|
||||||
|
return CryptoJS.AES.decrypt(row_code, CryptoJS.enc.Utf8.parse(default_key), {
|
||||||
|
mode: CryptoJS.mode.ECB,
|
||||||
|
padding: CryptoJS.pad.Pkcs7
|
||||||
|
}).toString(CryptoJS.enc.Utf8);
|
||||||
|
}
|
||||||
15
src/utils/formatTime.js
Normal file
15
src/utils/formatTime.js
Normal file
@ -0,0 +1,15 @@
|
|||||||
|
export function formatDateTime(inputTime) {
|
||||||
|
var date = new Date(inputTime);
|
||||||
|
var y = date.getFullYear();
|
||||||
|
var m = date.getMonth() + 1;
|
||||||
|
m = m < 10 ? "0" + m : m;
|
||||||
|
var d = date.getDate();
|
||||||
|
d = d < 10 ? "0" + d : d;
|
||||||
|
var h = date.getHours();
|
||||||
|
h = h < 10 ? "0" + h : h;
|
||||||
|
var minute = date.getMinutes();
|
||||||
|
var second = date.getSeconds();
|
||||||
|
minute = minute < 10 ? "0" + minute : minute;
|
||||||
|
second = second < 10 ? "0" + second : second;
|
||||||
|
return y + "-" + m + "-" + d + " " + h + ":" + minute + ":" + second;
|
||||||
|
}
|
||||||
7
src/utils/px2rem.js
Normal file
7
src/utils/px2rem.js
Normal file
@ -0,0 +1,7 @@
|
|||||||
|
//px2rem
|
||||||
|
export function setHtmlFontSize() {
|
||||||
|
const htmlWidth = document.documentElement.clientWidth || document.body.clientWidth
|
||||||
|
const htmlDom = document.getElementsByTagName('html')[0]
|
||||||
|
if (htmlWidth >= 500) htmlDom.style.fontSize = 500 / 10 + 'px'
|
||||||
|
else htmlDom.style.fontSize = htmlWidth / 10 + 'px'
|
||||||
|
}
|
||||||
477
src/views/Account/Account.vue
Normal file
477
src/views/Account/Account.vue
Normal file
@ -0,0 +1,477 @@
|
|||||||
|
<template>
|
||||||
|
<div class="account" ref="account">
|
||||||
|
<md-app md-waterfall md-mode="fixed">
|
||||||
|
<md-app-toolbar class="md-primary">
|
||||||
|
<div class="md-toolbar-section-start">
|
||||||
|
<span class="md-title page-title">曳光</span>
|
||||||
|
</div>
|
||||||
|
<div class="md-toolbar-section-end">
|
||||||
|
<div class="sroll-top-area"></div>
|
||||||
|
<md-button class="md-icon-button" @click="refresh" v-if="Object.keys(this.user_info).length != 0">
|
||||||
|
<md-icon>refresh</md-icon>
|
||||||
|
</md-button>
|
||||||
|
</div>
|
||||||
|
</md-app-toolbar>
|
||||||
|
<md-app-content>
|
||||||
|
<div ref="list_placeholder" :style="`height:40px`"></div>
|
||||||
|
<md-progress-bar
|
||||||
|
v-if="loading_switch"
|
||||||
|
md-mode="indeterminate"
|
||||||
|
style="position: absolute; top: 56px; left: 0; width: 100%;"
|
||||||
|
></md-progress-bar>
|
||||||
|
<template v-if="Object.keys(this.user_info).length == 0">
|
||||||
|
<md-field style="margin-top: 30px;">
|
||||||
|
<label>教务账号</label>
|
||||||
|
<md-input
|
||||||
|
v-model="cid"
|
||||||
|
placeholder="请输入您的教务账号"
|
||||||
|
type="number"
|
||||||
|
maxlength="10"
|
||||||
|
@focus="focus_list_1 = 1;focusOrBlur()"
|
||||||
|
@blur="focus_list_1 = 0;focusOrBlur()"
|
||||||
|
></md-input>
|
||||||
|
</md-field>
|
||||||
|
<md-field style="margin-top: 30px;">
|
||||||
|
<label>教务密码</label>
|
||||||
|
<md-input
|
||||||
|
v-model="pwd"
|
||||||
|
placeholder="请输入您的教务密码"
|
||||||
|
@focus="focus_list_2 = 1;focusOrBlur()"
|
||||||
|
@blur="focus_list_2 = 0;focusOrBlur()"
|
||||||
|
></md-input>
|
||||||
|
</md-field>
|
||||||
|
<md-button class="md-raised md-primary expand login-submit" @click="login()" :disabled="loading_switch">登录</md-button>
|
||||||
|
</template>
|
||||||
|
<template v-else>
|
||||||
|
<md-list>
|
||||||
|
<md-subheader class="md-primary">用户信息</md-subheader>
|
||||||
|
<md-list-item>
|
||||||
|
<span class="md-list-item-text">学号：{{user_info.id}}</span>
|
||||||
|
</md-list-item>
|
||||||
|
<md-list-item>
|
||||||
|
<span class="md-list-item-text">姓名：{{user_info.name}}</span>
|
||||||
|
</md-list-item>
|
||||||
|
<md-list-item>
|
||||||
|
<span class="md-list-item-text">一卡通号：{{user_info.cid}}</span>
|
||||||
|
</md-list-item>
|
||||||
|
<md-list-item>
|
||||||
|
<span class="md-list-item-text">昵称：{{user_info.nick}}</span>
|
||||||
|
<md-button class="md-icon-button md-list-action" @click="nick_dialog_switch = true">
|
||||||
|
<md-icon>edit</md-icon>
|
||||||
|
</md-button>
|
||||||
|
</md-list-item>
|
||||||
|
<md-list-item>
|
||||||
|
<span class="md-list-item-text">消息：{{user_info.msg.length}}条</span>
|
||||||
|
<md-button class="md-icon-button md-list-action">
|
||||||
|
<span>查看</span>
|
||||||
|
</md-button>
|
||||||
|
</md-list-item>
|
||||||
|
<md-list-item>
|
||||||
|
<span class="md-list-item-text">已发布：{{user_info.created.length}}条</span>
|
||||||
|
<md-button class="md-icon-button md-list-action">
|
||||||
|
<span>查看</span>
|
||||||
|
</md-button>
|
||||||
|
</md-list-item>
|
||||||
|
<md-subheader class="md-primary">应用设置</md-subheader>
|
||||||
|
<md-list-item>
|
||||||
|
<md-icon>brightness_6</md-icon>
|
||||||
|
<span class="md-list-item-text">黑暗模式</span>
|
||||||
|
<md-switch v-model="is_dark_mode" class="md-primary"></md-switch>
|
||||||
|
</md-list-item>
|
||||||
|
<md-list-item>
|
||||||
|
<md-icon>code</md-icon>
|
||||||
|
<span class="md-list-item-text">VConsole</span>
|
||||||
|
<md-switch v-model="open_vconsole" class="md-primary"></md-switch>
|
||||||
|
</md-list-item>
|
||||||
|
<md-button
|
||||||
|
class=" md-raised md-primary expand"
|
||||||
|
@click="logout_confirm_switch = true"
|
||||||
|
>退出登录</md-button>
|
||||||
|
</md-list>
|
||||||
|
</template>
|
||||||
|
<md-dialog-confirm
|
||||||
|
:md-active.sync="logout_confirm_switch"
|
||||||
|
md-title="警告"
|
||||||
|
md-content="您将退出登录，该操作将清空本地信息"
|
||||||
|
md-confirm-text="继续"
|
||||||
|
md-cancel-text="取消"
|
||||||
|
@md-confirm="logout"
|
||||||
|
:md-click-outside-to-close="false"
|
||||||
|
/>
|
||||||
|
<md-dialog-prompt
|
||||||
|
:md-active.sync="nick_dialog_switch"
|
||||||
|
v-model="nick"
|
||||||
|
md-title="修改昵称"
|
||||||
|
md-input-maxlength="10"
|
||||||
|
md-input-placeholder="新的昵称..."
|
||||||
|
md-confirm-text="提交"
|
||||||
|
md-cancel-text="取消"
|
||||||
|
@md-confirm="modifyNick"
|
||||||
|
/>
|
||||||
|
<md-snackbar
|
||||||
|
md-position="center"
|
||||||
|
:md-active.sync="show_snackbar"
|
||||||
|
md-persistent
|
||||||
|
:md-duration="1500"
|
||||||
|
>
|
||||||
|
<span>{{ snakebar_msg }}</span>
|
||||||
|
</md-snackbar>
|
||||||
|
|
||||||
|
<div :style="`height:60px`"></div>
|
||||||
|
</md-app-content>
|
||||||
|
</md-app>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import { mapState, mapActions } from "vuex";
|
||||||
|
import { setHtmlFontSize } from "@/utils/px2rem.js";
|
||||||
|
import { api } from "@/axios/fetch.js";
|
||||||
|
import { encryptMainCode, decryptMainCode } from "@/utils/aes.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Account",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
|
||||||
|
clientHeight: "",
|
||||||
|
// snackbar控制
|
||||||
|
show_snackbar: false,
|
||||||
|
snakebar_msg: "",
|
||||||
|
// 登录cid
|
||||||
|
cid: "",
|
||||||
|
// 登录pwd
|
||||||
|
pwd: "",
|
||||||
|
// 加载控制
|
||||||
|
loading_switch: false,
|
||||||
|
// 黑暗模式
|
||||||
|
is_dark_mode: false,
|
||||||
|
// vconsole
|
||||||
|
open_vconsole: false,
|
||||||
|
// 初始化完成状态
|
||||||
|
has_init: false,
|
||||||
|
// 退出登录confirm
|
||||||
|
logout_confirm_switch: false,
|
||||||
|
// 监听输入事件
|
||||||
|
focus_list_1: 0,
|
||||||
|
focus_list_2: 0,
|
||||||
|
// 昵称输入弹窗
|
||||||
|
nick_dialog_switch: false,
|
||||||
|
// 新输入的昵称
|
||||||
|
nick: '',
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(["user_info", "settings"])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(["setUserInfo", "setSettings", "setBarState"]),
|
||||||
|
// 修改md-app的最小高度
|
||||||
|
changeFixed(clientHeight) {
|
||||||
|
//动态修改样式
|
||||||
|
this.$refs.account.children[0].style.minHeight = clientHeight + "px";
|
||||||
|
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
|
||||||
|
clientHeight + "px";
|
||||||
|
this.$refs.list_placeholder.parentNode.style.minHeight =
|
||||||
|
clientHeight - 32 + "px";
|
||||||
|
window.document.documentElement.setAttribute(
|
||||||
|
"data-theme",
|
||||||
|
this.settings.is_dark_mode ? "dark" : "light"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
init() {
|
||||||
|
// 刷新vuex
|
||||||
|
this.$store.replaceState(
|
||||||
|
Object.assign(
|
||||||
|
this.$store.state,
|
||||||
|
JSON.parse(localStorage.getItem("storeState"))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
// 底部状态栏状态设置
|
||||||
|
this.setBarState([true, this])
|
||||||
|
// 初始化本页信息
|
||||||
|
this.open_vconsole = this.settings.open_vconsole;
|
||||||
|
this.is_dark_mode = this.settings.is_dark_mode;
|
||||||
|
// 设置flag
|
||||||
|
setTimeout(
|
||||||
|
function() {
|
||||||
|
this.has_init = true;
|
||||||
|
console.log("本页信息覆写完成");
|
||||||
|
}.bind(this),
|
||||||
|
10
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 管理员登录
|
||||||
|
login(is_refresh = false) {
|
||||||
|
// 格式校验
|
||||||
|
if (!/\d+/.test(this.cid)) {
|
||||||
|
console.log("数据格式校验失败");
|
||||||
|
this.message("请输入正确的教务账号");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
if (!(this.pwd = this.pwd.trim())) {
|
||||||
|
console.log("数据格式校验失败");
|
||||||
|
this.message("请输入的教务密码");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.loading_switch = true;
|
||||||
|
let data = {
|
||||||
|
cid: this.cid,
|
||||||
|
pwd: this.pwd
|
||||||
|
};
|
||||||
|
console.log(`上传信息准备完成`);
|
||||||
|
console.log(data);
|
||||||
|
api
|
||||||
|
.post("/login", data)
|
||||||
|
.then(res => {
|
||||||
|
let user_info = res.data.user_info;
|
||||||
|
user_info.pwd = encryptMainCode(this.pwd);
|
||||||
|
this.setUserInfo([user_info, this]);
|
||||||
|
console.log("登录成功，用户信息覆写完成");
|
||||||
|
let msg = is_refresh ? "刷新成功" : "登录成功";
|
||||||
|
this.message(msg);
|
||||||
|
this.loading_switch = false;
|
||||||
|
this.cid = "";
|
||||||
|
this.pwd = "";
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
this.loading_switch = false;
|
||||||
|
if (err.response && err.response.status != 500) {
|
||||||
|
this.message(`${err.response.status}: ${err.response.data}`);
|
||||||
|
} else {
|
||||||
|
this.message("网络错误,请稍候重试");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 刷新用户信息
|
||||||
|
refresh() {
|
||||||
|
if (Object.keys(this.user_info).length == 0) return;
|
||||||
|
this.cid = this.user_info.cid;
|
||||||
|
this.pwd = decryptMainCode(this.user_info.pwd);
|
||||||
|
this.login(true);
|
||||||
|
},
|
||||||
|
|
||||||
|
//覆写个性化设置
|
||||||
|
resetSettings() {
|
||||||
|
let settings = {
|
||||||
|
open_vconsole: this.open_vconsole,
|
||||||
|
is_dark_mode: this.is_dark_mode
|
||||||
|
};
|
||||||
|
this.setSettings([settings, this]);
|
||||||
|
console.log("个性化设置覆写完成");
|
||||||
|
// 设置黑暗模式
|
||||||
|
window.document.documentElement.setAttribute(
|
||||||
|
"data-theme",
|
||||||
|
this.settings.is_dark_mode ? "dark" : "light"
|
||||||
|
);
|
||||||
|
// 设置vconsole
|
||||||
|
this.toggleVcon();
|
||||||
|
if(this.has_init)
|
||||||
|
this.message("设置成功");
|
||||||
|
},
|
||||||
|
// 调用snackBar
|
||||||
|
message(msg) {
|
||||||
|
this.snakebar_msg = msg;
|
||||||
|
this.show_snackbar = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 判断是否有class
|
||||||
|
hasClass(obj, cls) {
|
||||||
|
return obj.className.match(new RegExp("(\\s|^)" + cls + "(\\s|$)"));
|
||||||
|
},
|
||||||
|
// 增加class
|
||||||
|
addClass(obj, cls) {
|
||||||
|
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
|
||||||
|
},
|
||||||
|
// 移除class
|
||||||
|
removeClass(obj, cls) {
|
||||||
|
if (this.hasClass(obj, cls)) {
|
||||||
|
var reg = new RegExp("(\\s|^)" + cls + "(\\s|$)");
|
||||||
|
obj.className = obj.className.replace(reg, " ");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 改变class
|
||||||
|
toggleVcon() {
|
||||||
|
let vcon_dom = document.getElementById("__vconsole");
|
||||||
|
let class_name = "vconsole-show";
|
||||||
|
if (this.hasClass(vcon_dom, class_name)) {
|
||||||
|
// 当前显示
|
||||||
|
if (!this.settings.open_vconsole) {
|
||||||
|
// 设置不显示
|
||||||
|
this.removeClass(vcon_dom, class_name);
|
||||||
|
}
|
||||||
|
} else {
|
||||||
|
// 当前不显示
|
||||||
|
if (this.settings.open_vconsole) {
|
||||||
|
// 设置显示
|
||||||
|
this.addClass(vcon_dom, class_name);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 退出登录
|
||||||
|
logout() {
|
||||||
|
this.setUserInfo([{}, this]);
|
||||||
|
this.cid = "";
|
||||||
|
this.pwd = "";
|
||||||
|
console.log("用户信息覆写完成");
|
||||||
|
this.message("本地信息清空完成");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 监听聚焦和脱焦事件控制bottomBar的显示和隐藏
|
||||||
|
focusOrBlur() {
|
||||||
|
let focus_list = [
|
||||||
|
this.focus_list_1,
|
||||||
|
this.focus_list_2,
|
||||||
|
this.focus_list_3,
|
||||||
|
this.focus_list_4
|
||||||
|
];
|
||||||
|
if (focus_list.indexOf(1) != -1) {
|
||||||
|
this.setBarState([false, this]);
|
||||||
|
} else {
|
||||||
|
setTimeout(() => {
|
||||||
|
let focus_list = [
|
||||||
|
this.focus_list_1,
|
||||||
|
this.focus_list_2,
|
||||||
|
this.focus_list_3,
|
||||||
|
this.focus_list_4
|
||||||
|
];
|
||||||
|
if (focus_list.indexOf(1) == -1) {
|
||||||
|
this.setBarState([true, this]);
|
||||||
|
}
|
||||||
|
}, 150);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 修改昵称
|
||||||
|
modifyNick() {
|
||||||
|
this.nick_dialog_switch = false
|
||||||
|
this.loading_switch = true
|
||||||
|
let data = {
|
||||||
|
openid: this.user_info.openid,
|
||||||
|
nick: this.nick
|
||||||
|
}
|
||||||
|
api
|
||||||
|
.put("/nick", data)
|
||||||
|
.then(res => {
|
||||||
|
this.loading_switch = false;
|
||||||
|
let user_info = this.user_info
|
||||||
|
user_info.nick = this.nick
|
||||||
|
this.setUserInfo([user_info, this]);
|
||||||
|
console.log("用户信息覆写成功");
|
||||||
|
this.message('修改成功')
|
||||||
|
this.nick = ""
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
this.loading_switch = false;
|
||||||
|
if (err.response && err.response.status != 500) {
|
||||||
|
this.message(`${err.response.status}: ${err.response.data}`);
|
||||||
|
} else {
|
||||||
|
this.message("网络错误,请稍候重试");
|
||||||
|
}
|
||||||
|
this.nick = ""
|
||||||
|
});
|
||||||
|
},
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 获取浏览器可视区域高度
|
||||||
|
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||||
|
//document.body.clientWidth;
|
||||||
|
window.onresize = function temp() {
|
||||||
|
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||||
|
setHtmlFontSize();
|
||||||
|
}.bind(this);
|
||||||
|
this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
|
||||||
|
"scroll",
|
||||||
|
this.scroll
|
||||||
|
);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||||
|
clientHeight: function() {
|
||||||
|
this.changeFixed(this.clientHeight);
|
||||||
|
},
|
||||||
|
// 如果 `is_dark_mode` 发生改变，就会执行设置函数
|
||||||
|
is_dark_mode: function() {
|
||||||
|
this.resetSettings();
|
||||||
|
},
|
||||||
|
// 如果 `open_vconsole` 发生改变，就会执行设置函数
|
||||||
|
open_vconsole: function() {
|
||||||
|
this.resetSettings();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {},
|
||||||
|
components: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss" type="text/scss">
|
||||||
|
@import "../../style/main";
|
||||||
|
.account {
|
||||||
|
width: 100%;
|
||||||
|
// max-width: 500px;
|
||||||
|
min-height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
// margin: 0 auto;
|
||||||
|
.expand {
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 0.8rem !important;
|
||||||
|
margin: 0.5rem 16px !important;
|
||||||
|
}
|
||||||
|
.login-submit {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0.5rem 0 !important;
|
||||||
|
}
|
||||||
|
.md-toolbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.md-toolbar-row {
|
||||||
|
order: 12;
|
||||||
|
// margin-bottom: .3rem !important;
|
||||||
|
}
|
||||||
|
.md-toolbar-section-start,
|
||||||
|
.md-toolbar-section-end,
|
||||||
|
.md-toolbar-row {
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
.md-toolbar-row {
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
.md-speed-dial.md-bottom-right {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Demo purposes only
|
||||||
|
.md-drawer {
|
||||||
|
width: 240px;
|
||||||
|
max-width: calc(100vw - 125px);
|
||||||
|
}
|
||||||
|
.md-app-scroller > div {
|
||||||
|
overflow-y: scroll !important;
|
||||||
|
}
|
||||||
|
.face {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.page-title {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
}
|
||||||
|
.sroll-top-area {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||||||
|
max-width: 1000px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
410
src/views/Create/Create.vue
Normal file
410
src/views/Create/Create.vue
Normal file
@ -0,0 +1,410 @@
|
|||||||
|
<template>
|
||||||
|
<div class="create" ref="create">
|
||||||
|
<md-app md-waterfall md-mode="fixed">
|
||||||
|
<md-app-toolbar class="md-primary">
|
||||||
|
<div class="md-toolbar-section-start">
|
||||||
|
<span class="md-title page-title">创建失物招领</span>
|
||||||
|
</div>
|
||||||
|
<div class="md-toolbar-section-end">
|
||||||
|
<div class="sroll-top-area"></div>
|
||||||
|
</div>
|
||||||
|
</md-app-toolbar>
|
||||||
|
<md-app-content>
|
||||||
|
<div ref="list_placeholder" :style="`height:56px`"></div>
|
||||||
|
<md-progress-bar
|
||||||
|
v-if="loading_switch"
|
||||||
|
md-mode="indeterminate"
|
||||||
|
style="position: absolute; top: 56px; left: 0; width: 100%;"
|
||||||
|
></md-progress-bar>
|
||||||
|
|
||||||
|
<md-content>
|
||||||
|
<md-radio class="md-primary" v-model="type" value="lost">丢了东西</md-radio>
|
||||||
|
<md-radio class="md-primary" v-model="type" value="found">捡到东西</md-radio>
|
||||||
|
</md-content>
|
||||||
|
<md-field style="margin-top: -10px;">
|
||||||
|
<label>标题*</label>
|
||||||
|
<md-input
|
||||||
|
v-model="title"
|
||||||
|
maxlength="15"
|
||||||
|
id="title"
|
||||||
|
@focus="focus_list_1 = 1;focusOrBlur()"
|
||||||
|
@blur="focus_list_1 = 0;focusOrBlur()"
|
||||||
|
></md-input>
|
||||||
|
<span class="md-helper-text">譬如：水杯、手机等易于搜索的~</span>
|
||||||
|
</md-field>
|
||||||
|
<md-field style="margin-top:40px;">
|
||||||
|
<label>描述</label>
|
||||||
|
<md-textarea
|
||||||
|
v-model="content"
|
||||||
|
maxlength="100"
|
||||||
|
@focus="focus_list_2 = 1;focusOrBlur()"
|
||||||
|
@blur="focus_list_2 = 0;focusOrBlur()"
|
||||||
|
></md-textarea>
|
||||||
|
<span class="md-helper-text">描述一下它的特征之类的</span>
|
||||||
|
</md-field>
|
||||||
|
<md-field style="margin-top:40px;">
|
||||||
|
<label for="total_addr">地区*</label>
|
||||||
|
<md-select v-model="total_addr" name="total_addr" id="total_addr">
|
||||||
|
<md-option value="长理东区">长理东区</md-option>
|
||||||
|
<md-option value="长理南区">长理南区</md-option>
|
||||||
|
<md-option value="长理西区">长理西区</md-option>
|
||||||
|
</md-select>
|
||||||
|
</md-field>
|
||||||
|
<md-field style="margin-top: -10px;">
|
||||||
|
<label>具体位置*</label>
|
||||||
|
<md-input
|
||||||
|
v-model="detail_addr"
|
||||||
|
maxlength="30"
|
||||||
|
@focus="focus_list_3 = 1;focusOrBlur()"
|
||||||
|
@blur="focus_list_3 = 0;focusOrBlur()"
|
||||||
|
></md-input>
|
||||||
|
<span class="md-helper-text">譬如：南研楼1201阶梯教室第四排~</span>
|
||||||
|
</md-field>
|
||||||
|
<md-field>
|
||||||
|
<label>联系方式</label>
|
||||||
|
<md-input
|
||||||
|
v-model="contact"
|
||||||
|
maxlength="20"
|
||||||
|
@focus="focus_list_4 = 1;focusOrBlur()"
|
||||||
|
@blur="focus_list_4 = 0;focusOrBlur()"
|
||||||
|
></md-input>
|
||||||
|
<span class="md-helper-text">譬如：手机号，微信号，qq号（非必填项</span>
|
||||||
|
</md-field>
|
||||||
|
<md-field style="margin-top:40px;">
|
||||||
|
<label>图片上传</label>
|
||||||
|
<md-file v-model="upload_file" accept="image/*" @md-change="processFile"/>
|
||||||
|
</md-field>
|
||||||
|
<md-button
|
||||||
|
class="md-dense md-raised md-primary expand"
|
||||||
|
@click="judge()"
|
||||||
|
:disable="!loading_switch"
|
||||||
|
>确认提交</md-button>
|
||||||
|
<md-dialog-confirm
|
||||||
|
:md-active.sync="submit_confirm_switch"
|
||||||
|
md-title="提示"
|
||||||
|
md-content="该信息即将提交审核，是否继续"
|
||||||
|
md-confirm-text="继续"
|
||||||
|
md-cancel-text="取消"
|
||||||
|
@md-confirm="uploadPhoto"
|
||||||
|
:md-click-outside-to-close="false"
|
||||||
|
/>
|
||||||
|
<md-dialog-alert
|
||||||
|
:md-active.sync="error_alert_switch"
|
||||||
|
md-title="警告"
|
||||||
|
md-content="请检查您所填写的内容</br>除了联系方式以及图片皆为<strong>必填项</strong></br>还请注意<strong>输入长度</strong>"
|
||||||
|
md-confirm-text="我知道了"/>
|
||||||
|
|
||||||
|
<md-snackbar
|
||||||
|
md-position="center"
|
||||||
|
:md-active.sync="show_snackbar"
|
||||||
|
md-persistent
|
||||||
|
:md-duration="1500"
|
||||||
|
>
|
||||||
|
<span>{{ snakebar_msg }}</span>
|
||||||
|
</md-snackbar>
|
||||||
|
<div :style="`height:86px`"></div>
|
||||||
|
</md-app-content>
|
||||||
|
</md-app>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import { mapState, mapActions } from "vuex";
|
||||||
|
import { setHtmlFontSize } from "@/utils/px2rem.js";
|
||||||
|
import { api } from "@/axios/fetch.js";
|
||||||
|
import "lrz";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Create",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
|
||||||
|
clientHeight: "",
|
||||||
|
// snackbar控制
|
||||||
|
show_snackbar: false,
|
||||||
|
snakebar_msg: "",
|
||||||
|
// 类型
|
||||||
|
type: "lost",
|
||||||
|
// 标题
|
||||||
|
title: "",
|
||||||
|
// 内容
|
||||||
|
content: "",
|
||||||
|
// 地区
|
||||||
|
total_addr: "长理东区",
|
||||||
|
// 详细地址
|
||||||
|
detail_addr: "",
|
||||||
|
// 联系方式
|
||||||
|
contact: "",
|
||||||
|
// 图片
|
||||||
|
upload_file: null,
|
||||||
|
// 压缩后图片
|
||||||
|
lrz_file: null,
|
||||||
|
// 加载控制
|
||||||
|
loading_switch: false,
|
||||||
|
// 监听输入事件
|
||||||
|
focus_list_1: 0,
|
||||||
|
focus_list_2: 0,
|
||||||
|
focus_list_3: 0,
|
||||||
|
focus_list_4: 0,
|
||||||
|
// 确认提交框
|
||||||
|
submit_confirm_switch: false,
|
||||||
|
// 错误提醒框
|
||||||
|
error_alert_switch: false
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(["user_info", "settings"])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(["setUserInfo", "setSettings", "setBarState"]),
|
||||||
|
|
||||||
|
// 修改md-app的最小高度
|
||||||
|
changeFixed(clientHeight) {
|
||||||
|
//动态修改样式
|
||||||
|
this.$refs.create.children[0].style.minHeight = clientHeight + "px";
|
||||||
|
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
|
||||||
|
clientHeight + "px";
|
||||||
|
this.$refs.list_placeholder.parentNode.style.minHeight =
|
||||||
|
clientHeight - 32 + "px";
|
||||||
|
window.document.documentElement.setAttribute(
|
||||||
|
"data-theme",
|
||||||
|
this.settings.is_dark_mode ? "dark" : "light"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
init() {
|
||||||
|
// 刷新vuex
|
||||||
|
this.$store.replaceState(
|
||||||
|
Object.assign(
|
||||||
|
this.$store.state,
|
||||||
|
JSON.parse(localStorage.getItem("storeState"))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
// 底部状态栏状态设置
|
||||||
|
this.setBarState([true, this])
|
||||||
|
},
|
||||||
|
|
||||||
|
// 调用snackBar
|
||||||
|
message(msg) {
|
||||||
|
this.snakebar_msg = msg;
|
||||||
|
this.show_snackbar = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 监听聚焦和脱焦事件控制bottomBar的显示和隐藏
|
||||||
|
focusOrBlur() {
|
||||||
|
let focus_list = [this.focus_list_1, this.focus_list_2, this.focus_list_3, this.focus_list_4]
|
||||||
|
if (focus_list.indexOf(1) != -1) {
|
||||||
|
this.setBarState([false, this]);
|
||||||
|
} else {
|
||||||
|
setTimeout(() => {
|
||||||
|
let focus_list = [this.focus_list_1, this.focus_list_2, this.focus_list_3, this.focus_list_4]
|
||||||
|
if (focus_list.indexOf(1) == -1) {
|
||||||
|
this.setBarState([true, this]);
|
||||||
|
}
|
||||||
|
}, 150);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 用户点击上传校验输入信息
|
||||||
|
judge() {
|
||||||
|
if(Object.keys(this.user_info).length == 0) {
|
||||||
|
this.message('请先登录')
|
||||||
|
return
|
||||||
|
}
|
||||||
|
let flag = true
|
||||||
|
this.title = this.title.trim()
|
||||||
|
if(!this.title || this.title.length > 15) flag = false
|
||||||
|
this.content = this.content.trim()
|
||||||
|
if(!this.content || this.content.length > 100) flag = false
|
||||||
|
this.detail_addr = this.detail_addr.trim()
|
||||||
|
if(!this.detail_addr || this.detail_addr.length > 30) flag = false
|
||||||
|
this.contact = this.contact.trim()
|
||||||
|
flag ? this.submit_confirm_switch = true : this.error_alert_switch = true
|
||||||
|
},
|
||||||
|
|
||||||
|
// 准备图片上传
|
||||||
|
uploadPhoto() {
|
||||||
|
this.loading_switch = true;
|
||||||
|
if(!this.lrz_file) this.uploadData('default.jpg')
|
||||||
|
let param = new FormData();
|
||||||
|
param.append('photo', this.lrz_file);
|
||||||
|
api.put('/upload', param, {
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'multipart/form-data',
|
||||||
|
}
|
||||||
|
}).then(res => {
|
||||||
|
this.uploadData(res.data.file_name)
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
this.loading_switch = false;
|
||||||
|
if(err.response && err.response.status != 500) {
|
||||||
|
this.message(`${err.response.status}: ${err.response.data}`)
|
||||||
|
} else {
|
||||||
|
this.message('网络错误,请稍候重试')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传信息
|
||||||
|
uploadData(file_name) {
|
||||||
|
console.log('文件上传成功,文件名：', file_name)
|
||||||
|
// 组织信息
|
||||||
|
let data = {
|
||||||
|
title: this.title,
|
||||||
|
content: this.content,
|
||||||
|
create_time: new Date().getTime(),
|
||||||
|
img_url: file_name,
|
||||||
|
total_addr: this.total_addr,
|
||||||
|
detail_addr: this.detail_addr,
|
||||||
|
contact: this.contact,
|
||||||
|
type: this.type,
|
||||||
|
user_info: {
|
||||||
|
openid: this.user_info.openid,
|
||||||
|
nick: this.user_info.nick
|
||||||
|
}
|
||||||
|
}
|
||||||
|
api.post('/add', data).then(res => {
|
||||||
|
console.log('上传成功')
|
||||||
|
this.loading_switch = false;
|
||||||
|
this.message('上传成功，请等待审核')
|
||||||
|
this.initData()
|
||||||
|
}).catch(err => {
|
||||||
|
console.log(err)
|
||||||
|
this.loading_switch = false;
|
||||||
|
if(err.response && err.response.status != 500) {
|
||||||
|
this.message(`${err.response.status}: ${err.response.data}`)
|
||||||
|
} else {
|
||||||
|
this.message('网络错误,请稍候重试')
|
||||||
|
}
|
||||||
|
})
|
||||||
|
},
|
||||||
|
|
||||||
|
// 上传成功初始化本页信息
|
||||||
|
initData() {
|
||||||
|
this.type = "lost";
|
||||||
|
this.title = '';
|
||||||
|
this.content = '';
|
||||||
|
this.total_addr = "长理东区";
|
||||||
|
this.detail_addr = ""
|
||||||
|
this.contact = ""
|
||||||
|
this.upload_file = null
|
||||||
|
this.lrz_file = null
|
||||||
|
console.log('创建信息初始化完成')
|
||||||
|
},
|
||||||
|
|
||||||
|
// 处理图片文件
|
||||||
|
processFile: async function(e) {
|
||||||
|
let file = e[0]
|
||||||
|
if (file) {
|
||||||
|
let name = file.name
|
||||||
|
console.log('文件压缩开始')
|
||||||
|
file = await lrz(file);
|
||||||
|
file = file.file;
|
||||||
|
file = new File([file], name);
|
||||||
|
this.lrz_file = file;
|
||||||
|
console.log('文件压缩完成', this.lrz_file)
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 获取浏览器可视区域高度
|
||||||
|
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||||
|
//document.body.clientWidth;
|
||||||
|
window.onresize = function temp() {
|
||||||
|
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||||
|
setHtmlFontSize();
|
||||||
|
}.bind(this);
|
||||||
|
this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
|
||||||
|
"scroll",
|
||||||
|
this.scroll
|
||||||
|
);
|
||||||
|
// document.getElementById("title")
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||||
|
clientHeight: function() {
|
||||||
|
this.changeFixed(this.clientHeight);
|
||||||
|
},
|
||||||
|
// upload_file: async function() {
|
||||||
|
// if(typeof(this.upload_file) == 'object') return
|
||||||
|
// console.log(this.upload_file)
|
||||||
|
// let file = this.upload_file
|
||||||
|
// if (file) {
|
||||||
|
// let name = file.name
|
||||||
|
// console.log('文件压缩开始')
|
||||||
|
// file = await lrz(file);
|
||||||
|
// file = file.file;
|
||||||
|
// file = new File([file], name);
|
||||||
|
// this.lrz_file = file;
|
||||||
|
// console.log('文件压缩完成', this.lrz_file)
|
||||||
|
// }
|
||||||
|
// }
|
||||||
|
},
|
||||||
|
beforeDestroy() {},
|
||||||
|
components: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss" type="text/scss">
|
||||||
|
@import "../../style/main";
|
||||||
|
.create {
|
||||||
|
width: 100%;
|
||||||
|
// max-width: 500px;
|
||||||
|
min-height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
// margin: 0 auto;
|
||||||
|
.expand {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0 !important;
|
||||||
|
min-height: 0.8rem !important;
|
||||||
|
margin-top: 0.5rem !important;
|
||||||
|
}
|
||||||
|
.md-toolbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.md-toolbar-row {
|
||||||
|
order: 12;
|
||||||
|
// margin-bottom: .3rem !important;
|
||||||
|
}
|
||||||
|
.md-toolbar-section-start,
|
||||||
|
.md-toolbar-section-end,
|
||||||
|
.md-toolbar-row {
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
.md-toolbar-row {
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
.md-speed-dial.md-bottom-right {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Demo purposes only
|
||||||
|
.md-drawer {
|
||||||
|
width: 240px;
|
||||||
|
max-width: calc(100vw - 125px);
|
||||||
|
}
|
||||||
|
.md-app-scroller > div {
|
||||||
|
overflow-y: scroll !important;
|
||||||
|
}
|
||||||
|
.face {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.page-title {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
}
|
||||||
|
.sroll-top-area {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||||||
|
max-width: 1000px !important;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
483
src/views/Detail/Detail.vue
Normal file
483
src/views/Detail/Detail.vue
Normal file
@ -0,0 +1,483 @@
|
|||||||
|
<template>
|
||||||
|
<div class="detail" ref="detail">
|
||||||
|
<md-app md-waterfall md-mode="fixed">
|
||||||
|
<md-app-toolbar class="md-primary">
|
||||||
|
<div class="md-toolbar-section-start">
|
||||||
|
<md-button class="md-icon-button" @click="back">
|
||||||
|
<md-icon>arrow_back</md-icon>
|
||||||
|
</md-button>
|
||||||
|
<span class="md-title page-title">曳光 - 详情</span>
|
||||||
|
</div>
|
||||||
|
<div class="md-toolbar-section-end">
|
||||||
|
<md-button
|
||||||
|
class="md-icon-button"
|
||||||
|
@click="comment_dialog_switch = true; is_comment = true"
|
||||||
|
v-if="Object.keys(user_info).length != 0 && content && content.close == false"
|
||||||
|
>
|
||||||
|
<md-icon>rate_review</md-icon>
|
||||||
|
</md-button>
|
||||||
|
<md-button
|
||||||
|
class="md-icon-button"
|
||||||
|
v-if="Object.keys(user_info).length != 0 && content && user_info.openid == content.user_info.openid && content.close == false"
|
||||||
|
@click="delete_confirm_switch = true"
|
||||||
|
>
|
||||||
|
<md-icon>delete</md-icon>
|
||||||
|
</md-button>
|
||||||
|
</div>
|
||||||
|
</md-app-toolbar>
|
||||||
|
<md-app-content>
|
||||||
|
<v-touch
|
||||||
|
@swiperight="back"
|
||||||
|
:swipe-options="{ direction: 'horizontal' }"
|
||||||
|
>
|
||||||
|
<div ref="list_placeholder" :style="`height:56px`"></div>
|
||||||
|
<md-progress-bar
|
||||||
|
v-if="loading_switch"
|
||||||
|
md-mode="indeterminate"
|
||||||
|
style="position: absolute; top: 56px; left: 0; width: 100%;"
|
||||||
|
></md-progress-bar>
|
||||||
|
<icon class="loading" name="canary" v-if="!content"></icon>
|
||||||
|
<md-card class="md-card-example" v-else>
|
||||||
|
<md-card-area md-inset>
|
||||||
|
<md-card-media>
|
||||||
|
<img :src="`https://yg.canary.moe/photo/${content.img_url}`" />
|
||||||
|
</md-card-media>
|
||||||
|
|
||||||
|
<md-card-header>
|
||||||
|
<h2 class="md-title" style="margin-bottom: .3rem;">{{content.title}}</h2>
|
||||||
|
<div class="md-subhead">
|
||||||
|
<md-icon>access_time</md-icon>
|
||||||
|
<span>{{formatDateTime(content.create_time)}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="md-subhead">
|
||||||
|
<md-icon>location_on</md-icon>
|
||||||
|
<span>{{content.total_addr}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="md-subhead">
|
||||||
|
<md-icon>gps_fixed</md-icon>
|
||||||
|
<span>{{content.detail_addr}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="md-subhead" v-if="content.contact">
|
||||||
|
<md-icon>attach_file</md-icon>
|
||||||
|
<span>{{content.contact}}</span>
|
||||||
|
</div>
|
||||||
|
</md-card-header>
|
||||||
|
<md-card-content>{{content.content}}</md-card-content>
|
||||||
|
</md-card-area>
|
||||||
|
</md-card>
|
||||||
|
|
||||||
|
<md-list
|
||||||
|
class="md-double-line md-dense"
|
||||||
|
style="margin-top: .3rem;"
|
||||||
|
v-if="content && Object.keys(content.comment).length != 0"
|
||||||
|
>
|
||||||
|
<md-subheader class="md-primary">评论区</md-subheader>
|
||||||
|
<div v-for="(comment, index0) in content.comment" :key="index0">
|
||||||
|
<md-list-item>
|
||||||
|
<div class="md-list-item-text">
|
||||||
|
<span>{{comment.user_info.nick}}</span>
|
||||||
|
<p>{{comment.content}}</p>
|
||||||
|
<p>{{formatDateTime(comment.create_time)}}</p>
|
||||||
|
</div>
|
||||||
|
<md-button
|
||||||
|
class="md-icon-button md-list-action"
|
||||||
|
@click="targetReply(index0, comment.user_info.nick)"
|
||||||
|
v-if="Object.keys(user_info).length != 0 && content.close == false"
|
||||||
|
>
|
||||||
|
<md-icon>rate_review</md-icon>
|
||||||
|
</md-button>
|
||||||
|
</md-list-item>
|
||||||
|
<div v-for="(reply, index1) in comment.reply" :key="index1">
|
||||||
|
<md-list-item>
|
||||||
|
<md-icon class="md-primary">keyboard_arrow_right</md-icon>
|
||||||
|
<div class="md-list-item-text">
|
||||||
|
<span>{{reply.user_info.nick}}</span>
|
||||||
|
<p>{{reply.content}}</p>
|
||||||
|
<span>{{formatDateTime(reply.create_time)}}</span>
|
||||||
|
</div>
|
||||||
|
<md-button
|
||||||
|
class="md-icon-button md-list-action"
|
||||||
|
@click="targetReply(index0, reply.user_info.nick)"
|
||||||
|
v-if="Object.keys(user_info).length != 0 && content.close == false"
|
||||||
|
>
|
||||||
|
<md-icon>rate_review</md-icon>
|
||||||
|
</md-button>
|
||||||
|
</md-list-item>
|
||||||
|
</div>
|
||||||
|
<md-divider style="margin-top: .3rem;margin-bottom: .3rem;"></md-divider>
|
||||||
|
</div>
|
||||||
|
</md-list>
|
||||||
|
|
||||||
|
<md-dialog-confirm
|
||||||
|
:md-active.sync="delete_confirm_switch"
|
||||||
|
md-title="警告"
|
||||||
|
md-content="您将关闭该条记录</br>该操作不可复原，是否继续"
|
||||||
|
md-confirm-text="继续"
|
||||||
|
md-cancel-text="取消"
|
||||||
|
:md-click-outside-to-close="false"
|
||||||
|
@md-confirm="closeLaf"
|
||||||
|
/>
|
||||||
|
<md-dialog-prompt
|
||||||
|
:md-active.sync="comment_dialog_switch"
|
||||||
|
v-model="comment"
|
||||||
|
:md-title="is_comment ? '评论': '回复'"
|
||||||
|
md-input-maxlength="30"
|
||||||
|
:md-input-placeholder="`${is_comment ? '评论': '回复'}的内容...`"
|
||||||
|
md-confirm-text="提交"
|
||||||
|
md-cancel-text="取消"
|
||||||
|
@md-confirm="commentSubmit"
|
||||||
|
@md-cancel="commentCancel"
|
||||||
|
/>
|
||||||
|
<md-snackbar
|
||||||
|
md-position="center"
|
||||||
|
:md-active.sync="show_snackbar"
|
||||||
|
md-persistent
|
||||||
|
:md-duration="1500"
|
||||||
|
>
|
||||||
|
<span>{{ snakebar_msg }}</span>
|
||||||
|
</md-snackbar>
|
||||||
|
<div style="height: 40px;"></div>
|
||||||
|
</v-touch>
|
||||||
|
</md-app-content>
|
||||||
|
</md-app>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import { mapState, mapActions } from "vuex";
|
||||||
|
import { setHtmlFontSize } from "@/utils/px2rem.js";
|
||||||
|
import { api } from "@/axios/fetch.js";
|
||||||
|
import { encryptMainCode, decryptMainCode } from "@/utils/aes.js";
|
||||||
|
import { formatDateTime } from "@/utils/formatTime.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Detail",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
|
||||||
|
clientHeight: "",
|
||||||
|
// snackbar控制
|
||||||
|
show_snackbar: false,
|
||||||
|
snakebar_msg: "",
|
||||||
|
// 页面内容
|
||||||
|
content: null,
|
||||||
|
// 加载控制
|
||||||
|
loading_switch: false,
|
||||||
|
// 删除确认弹窗控制
|
||||||
|
delete_confirm_switch: false,
|
||||||
|
// 提交评论
|
||||||
|
comment_dialog_switch: false,
|
||||||
|
comment: "",
|
||||||
|
is_comment: true, // 'reply' => false
|
||||||
|
// 回复数据暂存
|
||||||
|
reply_cache: null
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(["user_info", "settings",'bar_state'])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(["setUserInfo", "setSettings", "setBarState"]),
|
||||||
|
formatDateTime,
|
||||||
|
// 修改md-app的最小高度
|
||||||
|
changeFixed(clientHeight) {
|
||||||
|
//动态修改样式
|
||||||
|
this.$refs.detail.children[0].style.minHeight = clientHeight + "px";
|
||||||
|
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
|
||||||
|
clientHeight + "px";
|
||||||
|
this.$refs.list_placeholder.parentNode.style.minHeight =
|
||||||
|
clientHeight - 32 + "px";
|
||||||
|
window.document.documentElement.setAttribute(
|
||||||
|
"data-theme",
|
||||||
|
this.settings.is_dark_mode ? "dark" : "light"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
init() {
|
||||||
|
// 刷新vuex
|
||||||
|
this.$store.replaceState(
|
||||||
|
Object.assign(
|
||||||
|
this.$store.state,
|
||||||
|
JSON.parse(localStorage.getItem("storeState"))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
// 底部状态栏状态设置
|
||||||
|
this.setBarState([false, this]);
|
||||||
|
// 获取id
|
||||||
|
let id = this.$route.query.id;
|
||||||
|
// 格式校验
|
||||||
|
if (/\d{16}/.test(id)) {
|
||||||
|
this.getDetail(id);
|
||||||
|
} else {
|
||||||
|
this.back();
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
// 返回到主页
|
||||||
|
back() {
|
||||||
|
this.$router.replace("/home");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取详细信息
|
||||||
|
getDetail(id) {
|
||||||
|
let url = `/detail?id=${id}`;
|
||||||
|
this.loading_switch = true;
|
||||||
|
api
|
||||||
|
.get(url)
|
||||||
|
.then(res => {
|
||||||
|
this.loading_switch = false;
|
||||||
|
this.content = res.data.content;
|
||||||
|
console.log(this.content);
|
||||||
|
console.log("信息获取成功，详情覆写成功");
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
this.loading_switch = false;
|
||||||
|
if (err.response && err.response.status != 500) {
|
||||||
|
this.message(`${err.response.status}: ${err.response.data}`);
|
||||||
|
} else {
|
||||||
|
this.message("网络错误,请稍候重试");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 调用snackBar
|
||||||
|
message(msg) {
|
||||||
|
this.snakebar_msg = msg;
|
||||||
|
this.show_snackbar = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
targetReply(commentid, reply_nick) {
|
||||||
|
this.reply_cache = {
|
||||||
|
commentid,
|
||||||
|
reply_nick
|
||||||
|
};
|
||||||
|
this.is_comment = false;
|
||||||
|
this.comment_dialog_switch = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 评论
|
||||||
|
commentSubmit() {
|
||||||
|
this.loading_switch = true;
|
||||||
|
this.comment = this.comment.trim();
|
||||||
|
if (!this.comment || this.comment.length > 30) {
|
||||||
|
console.log("内容校验失败");
|
||||||
|
this.message("请确保字数在1到30之间");
|
||||||
|
this.comment = "";
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let data;
|
||||||
|
if (this.is_comment) {
|
||||||
|
data = {
|
||||||
|
content: {
|
||||||
|
user_info: {
|
||||||
|
openid: this.user_info.openid,
|
||||||
|
nick: this.user_info.nick
|
||||||
|
},
|
||||||
|
content: this.comment,
|
||||||
|
create_time: new Date().getTime()
|
||||||
|
},
|
||||||
|
position: {
|
||||||
|
is_comment: true,
|
||||||
|
lafid: this.content.id,
|
||||||
|
openid: this.content.user_info.openid
|
||||||
|
}
|
||||||
|
};
|
||||||
|
} else {
|
||||||
|
data = {
|
||||||
|
content: {
|
||||||
|
user_info: {
|
||||||
|
openid: this.user_info.openid,
|
||||||
|
nick: this.user_info.nick
|
||||||
|
},
|
||||||
|
content: `@${this.reply_cache.reply_nick}: ${this.comment}`,
|
||||||
|
create_time: new Date().getTime()
|
||||||
|
},
|
||||||
|
position: {
|
||||||
|
is_comment: false,
|
||||||
|
lafid: this.content.id,
|
||||||
|
openid: this.content.user_info.openid,
|
||||||
|
commentid: this.reply_cache.commentid
|
||||||
|
}
|
||||||
|
};
|
||||||
|
}
|
||||||
|
console.log("上传信息准备完成");
|
||||||
|
console.log(data);
|
||||||
|
api
|
||||||
|
.post("/comment", data)
|
||||||
|
.then(res => {
|
||||||
|
let msg = this.is_comment ? "评论成功" : "回复成功";
|
||||||
|
console.log(msg);
|
||||||
|
this.loading_switch = false;
|
||||||
|
this.reply_cache = null;
|
||||||
|
this.is_comment = true;
|
||||||
|
this.comment = "";
|
||||||
|
this.message(msg);
|
||||||
|
this.getDetail(this.content.id);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
this.loading_switch = false;
|
||||||
|
if (err.response && err.response.status != 500) {
|
||||||
|
this.message(`${err.response.status}: ${err.response.data}`);
|
||||||
|
} else {
|
||||||
|
this.message("网络错误,请稍候重试");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
// 取消输入
|
||||||
|
commentCancel() {
|
||||||
|
this.reply_cache = null;
|
||||||
|
this.is_comment = true;
|
||||||
|
this.comment = "";
|
||||||
|
},
|
||||||
|
// 关闭失物招领
|
||||||
|
closeLaf() {
|
||||||
|
let data = {
|
||||||
|
openid: this.user_info.openid,
|
||||||
|
id: this.content.id
|
||||||
|
};
|
||||||
|
console.log("上传信息准备完成");
|
||||||
|
console.log(data);
|
||||||
|
api
|
||||||
|
.delete("/close", { data })
|
||||||
|
.then(res => {
|
||||||
|
this.message("关闭成功");
|
||||||
|
this.getDetail(this.content.id);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
this.loading_switch = false;
|
||||||
|
if (err.response && err.response.status != 500) {
|
||||||
|
this.message(`${err.response.status}: ${err.response.data}`);
|
||||||
|
} else {
|
||||||
|
this.message("网络错误,请稍候重试");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 获取浏览器可视区域高度
|
||||||
|
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||||
|
//document.body.clientWidth;
|
||||||
|
window.onresize = function temp() {
|
||||||
|
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||||
|
setHtmlFontSize();
|
||||||
|
}.bind(this);
|
||||||
|
this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
|
||||||
|
"scroll",
|
||||||
|
this.scroll
|
||||||
|
);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||||
|
clientHeight: function() {
|
||||||
|
this.changeFixed(this.clientHeight);
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {},
|
||||||
|
components: {}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss" type="text/scss">
|
||||||
|
@import "../../style/main";
|
||||||
|
.detail {
|
||||||
|
width: 100%;
|
||||||
|
// max-width: 500px;
|
||||||
|
min-height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
// margin: 0 auto;
|
||||||
|
.expand {
|
||||||
|
box-sizing: border-box;
|
||||||
|
min-height: 0.8rem !important;
|
||||||
|
margin: 0.5rem 16px !important;
|
||||||
|
}
|
||||||
|
.login-submit {
|
||||||
|
width: 100%;
|
||||||
|
margin: 0.5rem 0 !important;
|
||||||
|
}
|
||||||
|
.md-toolbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.md-toolbar-row {
|
||||||
|
order: 12;
|
||||||
|
// margin-bottom: .3rem !important;
|
||||||
|
}
|
||||||
|
.md-toolbar-section-start,
|
||||||
|
.md-toolbar-section-end,
|
||||||
|
.md-toolbar-row {
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
.md-toolbar-row {
|
||||||
|
margin-top: -10px;
|
||||||
|
}
|
||||||
|
.md-speed-dial.md-bottom-right {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Demo purposes only
|
||||||
|
.md-drawer {
|
||||||
|
width: 240px;
|
||||||
|
max-width: calc(100vw - 125px);
|
||||||
|
}
|
||||||
|
.md-app-scroller > div {
|
||||||
|
overflow-y: scroll !important;
|
||||||
|
}
|
||||||
|
.face {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.page-title {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
}
|
||||||
|
.sroll-top-area {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||||||
|
max-width: 1000px !important;
|
||||||
|
}
|
||||||
|
.md-card-example {
|
||||||
|
.md-subhead {
|
||||||
|
margin-top: 0.1rem;
|
||||||
|
.md-icon {
|
||||||
|
$size: 16px;
|
||||||
|
width: $size;
|
||||||
|
min-width: $size;
|
||||||
|
height: $size;
|
||||||
|
font-size: $size !important;
|
||||||
|
margin-right: 0.3rem;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-app-content .md-card {
|
||||||
|
margin: 0 !important;
|
||||||
|
}
|
||||||
|
.loading {
|
||||||
|
position: absolute;
|
||||||
|
top: 50%;
|
||||||
|
left: 50%;
|
||||||
|
height: 5rem;
|
||||||
|
width: 5rem;
|
||||||
|
margin-top: -2.5rem;
|
||||||
|
margin-left: -2.5rem;
|
||||||
|
}
|
||||||
|
.md-list-item-text p {
|
||||||
|
word-wrap: break-word !important;
|
||||||
|
overflow: visible !important;
|
||||||
|
white-space: normal !important;
|
||||||
|
margin-top: 0.2rem;
|
||||||
|
}
|
||||||
|
</style>
|
||||||
481
src/views/Home/Home.vue
Normal file
481
src/views/Home/Home.vue
Normal file
@ -0,0 +1,481 @@
|
|||||||
|
<template>
|
||||||
|
<div class="home" ref="home">
|
||||||
|
<md-app md-mode="fixed">
|
||||||
|
<md-app-toolbar class="md-primary">
|
||||||
|
<div class="md-toolbar-section-start">
|
||||||
|
<span class="md-title page-title">曳光</span>
|
||||||
|
</div>
|
||||||
|
<md-tabs
|
||||||
|
class="md-primary"
|
||||||
|
style="flex: 1"
|
||||||
|
md-alignment="centered"
|
||||||
|
:md-active-tab="page_type"
|
||||||
|
>
|
||||||
|
<md-tab id="lost" md-label="失物" @click="page_type = 'lost'"></md-tab>
|
||||||
|
<md-tab id="found" md-label="招领" @click="page_type = 'found'"></md-tab>
|
||||||
|
</md-tabs>
|
||||||
|
<div class="md-toolbar-section-end">
|
||||||
|
<div class="sroll-top-area"></div>
|
||||||
|
<md-button class="md-icon-button" @click="switchSearch()">
|
||||||
|
<md-icon>search</md-icon>
|
||||||
|
</md-button>
|
||||||
|
</div>
|
||||||
|
<div class="md-toolbar-row" v-if="search_start">
|
||||||
|
<md-autocomplete
|
||||||
|
class="search"
|
||||||
|
v-model="search_content"
|
||||||
|
:md-options="current_title"
|
||||||
|
md-layout="box"
|
||||||
|
>
|
||||||
|
<label>检索标题</label>
|
||||||
|
</md-autocomplete>
|
||||||
|
</div>
|
||||||
|
</md-app-toolbar>
|
||||||
|
<md-app-content>
|
||||||
|
<v-touch
|
||||||
|
@swiperight="page_type = 'lost'"
|
||||||
|
@swipeleft="page_type = 'found'"
|
||||||
|
:swipe-options="{ direction: 'horizontal' }"
|
||||||
|
>
|
||||||
|
<div ref="list_placeholder" :style="`height:${search_start ? '102' : '56'}px`"></div>
|
||||||
|
|
||||||
|
<md-progress-bar
|
||||||
|
v-if="loading_switch"
|
||||||
|
md-mode="indeterminate"
|
||||||
|
:style="`position: absolute; top: ${search_start ? '102' : '56'}px; left: 0; width: 100%;`"
|
||||||
|
></md-progress-bar>
|
||||||
|
<template v-if="page_type == 'lost'">
|
||||||
|
<!-- 空内容 -->
|
||||||
|
<md-empty-state
|
||||||
|
v-if="show_list.length == 0"
|
||||||
|
class="md-primary"
|
||||||
|
md-icon="done"
|
||||||
|
md-label="暂无内容"
|
||||||
|
md-description="当前并没有失物内容，或许你可以刷新一下"
|
||||||
|
></md-empty-state>
|
||||||
|
<template v-else>
|
||||||
|
<md-content
|
||||||
|
v-for="(item, index) in show_list"
|
||||||
|
:key="index"
|
||||||
|
@click="turnToDetail(item.id)"
|
||||||
|
>
|
||||||
|
<md-card class="md-card-example">
|
||||||
|
<md-card-area md-inset>
|
||||||
|
<md-card-media md-ratio="16:9">
|
||||||
|
<img :src="`https://yg.canary.moe/photo/${item.img_url}`" />
|
||||||
|
</md-card-media>
|
||||||
|
|
||||||
|
<md-card-header>
|
||||||
|
<h2 class="md-subheading">{{item.title}}</h2>
|
||||||
|
<div class="md-subhead">
|
||||||
|
<md-icon>access_time</md-icon>
|
||||||
|
<span>{{formatDateTime(item.create_time)}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="md-subhead">
|
||||||
|
<md-icon>location_on</md-icon>
|
||||||
|
<span>{{item.total_addr}}</span>
|
||||||
|
</div>
|
||||||
|
</md-card-header>
|
||||||
|
</md-card-area>
|
||||||
|
</md-card>
|
||||||
|
</md-content>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<template v-if="page_type == 'found'">
|
||||||
|
<!-- 空内容 -->
|
||||||
|
<md-empty-state
|
||||||
|
v-if="show_list.length == 0"
|
||||||
|
class="md-primary"
|
||||||
|
md-icon="done"
|
||||||
|
md-label="暂无内容"
|
||||||
|
md-description="当前并没有招领内容，或许你可以刷新一下"
|
||||||
|
></md-empty-state>
|
||||||
|
<template v-else>
|
||||||
|
<md-content
|
||||||
|
v-for="(item, index) in show_list"
|
||||||
|
:key="index"
|
||||||
|
@click="turnToDetail(item.id)"
|
||||||
|
>
|
||||||
|
<md-card class="md-card-example">
|
||||||
|
<md-card-area md-inset>
|
||||||
|
<md-card-media md-ratio="16:9">
|
||||||
|
<img :src="`https://yg.canary.moe/photo/${item.img_url}`" />
|
||||||
|
</md-card-media>
|
||||||
|
|
||||||
|
<md-card-header>
|
||||||
|
<h2 class="md-subheading">{{item.title}}</h2>
|
||||||
|
<div class="md-subhead">
|
||||||
|
<md-icon>access_time</md-icon>
|
||||||
|
<span>{{formatDateTime(item.create_time)}}</span>
|
||||||
|
</div>
|
||||||
|
<div class="md-subhead">
|
||||||
|
<md-icon>location_on</md-icon>
|
||||||
|
<span>{{item.total_addr}}</span>
|
||||||
|
</div>
|
||||||
|
</md-card-header>
|
||||||
|
</md-card-area>
|
||||||
|
</md-card>
|
||||||
|
</md-content>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
<md-speed-dial class="md-bottom-right" style="margin-bottom: 56px; z-index:1000;">
|
||||||
|
<md-speed-dial-target class="md-primary" @click="getLostAndFount(true)">
|
||||||
|
<md-icon>cached</md-icon>
|
||||||
|
</md-speed-dial-target>
|
||||||
|
</md-speed-dial>
|
||||||
|
<md-snackbar
|
||||||
|
md-position="center"
|
||||||
|
:md-active.sync="show_snackbar"
|
||||||
|
:md-duration="1500"
|
||||||
|
md-persistent
|
||||||
|
>
|
||||||
|
<span>{{ snakebar_msg }}</span>
|
||||||
|
</md-snackbar>
|
||||||
|
<div :style="`height:56px`"></div>
|
||||||
|
</v-touch>
|
||||||
|
</md-app-content>
|
||||||
|
</md-app>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
// @ is an alias to /src
|
||||||
|
import { mapState, mapActions } from "vuex";
|
||||||
|
import { setHtmlFontSize } from "@/utils/px2rem.js";
|
||||||
|
import { api } from "@/axios/fetch.js";
|
||||||
|
import { formatDateTime } from "@/utils/formatTime.js";
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: "Home",
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
// 显示高度，控制md-app的最小高度，防止抽屉高度塌陷
|
||||||
|
clientHeight: "",
|
||||||
|
// snackbar控制
|
||||||
|
show_snackbar: false,
|
||||||
|
snakebar_msg: "",
|
||||||
|
// 加载控制
|
||||||
|
loading_switch: false,
|
||||||
|
// 搜索框当前检索列表
|
||||||
|
current_title: [],
|
||||||
|
// 搜索输入内容
|
||||||
|
search_content: "",
|
||||||
|
// 搜索开始
|
||||||
|
search_start: false,
|
||||||
|
// 显示的密码列表
|
||||||
|
show_list: [],
|
||||||
|
// 页面类型
|
||||||
|
page_type: "lost",
|
||||||
|
// 失物标题
|
||||||
|
lost_title: [],
|
||||||
|
// 招领标题
|
||||||
|
found_title: [],
|
||||||
|
// 失物列表
|
||||||
|
const_lost_list: [],
|
||||||
|
// 招领列表
|
||||||
|
const_found_list: []
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {
|
||||||
|
...mapState(["user_info", "settings", "laf"])
|
||||||
|
},
|
||||||
|
methods: {
|
||||||
|
...mapActions(["setUserInfo", "setSettings", "setLaf", "setBarState"]),
|
||||||
|
// 格式化时间
|
||||||
|
formatDateTime,
|
||||||
|
// 修改md-app的最小高度
|
||||||
|
changeFixed(clientHeight) {
|
||||||
|
//动态修改样式
|
||||||
|
this.$refs.home.children[0].style.minHeight = clientHeight + "px";
|
||||||
|
this.$refs.list_placeholder.parentNode.parentNode.style.maxHeight =
|
||||||
|
clientHeight + "px";
|
||||||
|
this.$refs.list_placeholder.parentNode.style.minHeight =
|
||||||
|
clientHeight - 32 + "px";
|
||||||
|
window.document.documentElement.setAttribute(
|
||||||
|
"data-theme",
|
||||||
|
this.settings.is_dark_mode ? "dark" : "light"
|
||||||
|
);
|
||||||
|
},
|
||||||
|
|
||||||
|
// 初始化
|
||||||
|
init(from_created = true) {
|
||||||
|
// 刷新vuex
|
||||||
|
this.$store.replaceState(
|
||||||
|
Object.assign(
|
||||||
|
this.$store.state,
|
||||||
|
JSON.parse(localStorage.getItem("storeState"))
|
||||||
|
)
|
||||||
|
);
|
||||||
|
// 底部状态栏状态设置
|
||||||
|
this.setBarState([true, this]);
|
||||||
|
// 获取失物招领信true息
|
||||||
|
if(from_created)
|
||||||
|
this.getLostAndFount();
|
||||||
|
},
|
||||||
|
|
||||||
|
// 获取失物招领信息
|
||||||
|
getLostAndFount(force = false) {
|
||||||
|
let now = new Date().getTime();
|
||||||
|
if (!force && this.laf && now - this.laf.time < 1000 * 60) {
|
||||||
|
console.log("当前信息未失效拦截");
|
||||||
|
this.separateData(this.laf.list, true);
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.loading_switch = true;
|
||||||
|
api
|
||||||
|
.get("/get")
|
||||||
|
.then(res => {
|
||||||
|
let laf = {
|
||||||
|
list: res.data.list,
|
||||||
|
time: new Date().getTime()
|
||||||
|
};
|
||||||
|
this.setLaf([laf, this]);
|
||||||
|
console.log("列表获取成功，缓存覆写成功");
|
||||||
|
this.separateData(res.data.list);
|
||||||
|
})
|
||||||
|
.catch(err => {
|
||||||
|
console.log(err);
|
||||||
|
this.loading_switch = false;
|
||||||
|
if (err.response && err.response.status != 500) {
|
||||||
|
this.message(`${err.response.status}: ${err.response.data}`);
|
||||||
|
} else {
|
||||||
|
this.message("网络错误,请稍候重试");
|
||||||
|
}
|
||||||
|
});
|
||||||
|
},
|
||||||
|
|
||||||
|
// 分离数据
|
||||||
|
separateData(list, from_intercept = false) {
|
||||||
|
// 失物列表
|
||||||
|
let lost_list = [];
|
||||||
|
// 招领列表
|
||||||
|
let found_list = [];
|
||||||
|
// 失物标题
|
||||||
|
let lost_title = [];
|
||||||
|
// 招领标题
|
||||||
|
let found_title = [];
|
||||||
|
// 遍历列表
|
||||||
|
for (let item of list) {
|
||||||
|
if (item.type == "lost") {
|
||||||
|
lost_list.push(item);
|
||||||
|
lost_title.push(item.title);
|
||||||
|
} else {
|
||||||
|
found_list.push(item);
|
||||||
|
found_title.push(item.title);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.page_type = "lost";
|
||||||
|
this.show_list = lost_list;
|
||||||
|
this.lost_title = lost_title;
|
||||||
|
this.found_title = found_title;
|
||||||
|
this.const_lost_list = lost_list;
|
||||||
|
this.const_found_list = found_list;
|
||||||
|
this.loading_switch = false;
|
||||||
|
console.log("数据分离完成");
|
||||||
|
if (!from_intercept) this.message("刷新成功");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 调用snackBar
|
||||||
|
message(msg) {
|
||||||
|
this.snakebar_msg = msg;
|
||||||
|
this.show_snackbar = true;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 切换搜索状态
|
||||||
|
switchSearch() {
|
||||||
|
// 没有内容拦截器
|
||||||
|
if (this.show_list.length == 0) {
|
||||||
|
console.log("点击搜索无内容拦截");
|
||||||
|
this.message("没有内容呀~");
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
this.search_start = !this.search_start;
|
||||||
|
},
|
||||||
|
|
||||||
|
// 模糊搜索
|
||||||
|
fuzzySearch(list) {
|
||||||
|
// 空内容拦截器
|
||||||
|
let search_content = this.search_content.trim();
|
||||||
|
if (!search_content) {
|
||||||
|
this.show_list = list;
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
let search_res = [];
|
||||||
|
for (let item of list) {
|
||||||
|
if (this.generReg(search_content).test(item.title)) {
|
||||||
|
search_res.push(item);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
this.show_list = search_res;
|
||||||
|
console.log("模糊搜索完成");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 模糊搜索辅助轮
|
||||||
|
generReg(val) {
|
||||||
|
let head = "(.*)(";
|
||||||
|
let tail = ")(.*)";
|
||||||
|
let body = val.split("").join(")(.*)(");
|
||||||
|
return new RegExp(head + body + tail, "i");
|
||||||
|
},
|
||||||
|
|
||||||
|
// 跳转详情
|
||||||
|
turnToDetail(id) {
|
||||||
|
console.log(id);
|
||||||
|
this.$router.push({ path: "/detail", query: { id: id } });
|
||||||
|
}
|
||||||
|
},
|
||||||
|
created() {
|
||||||
|
this.init();
|
||||||
|
},
|
||||||
|
mounted() {
|
||||||
|
// 获取浏览器可视区域高度
|
||||||
|
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||||
|
//document.body.clientWidth;
|
||||||
|
window.onresize = function temp() {
|
||||||
|
this.clientHeight = `${document.documentElement.clientHeight}`;
|
||||||
|
setHtmlFontSize();
|
||||||
|
}.bind(this);
|
||||||
|
this.$refs.list_placeholder.parentNode.parentNode.addEventListener(
|
||||||
|
"scroll",
|
||||||
|
this.scroll
|
||||||
|
);
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
// 如果 `clientHeight` 发生改变，这个函数就会运行
|
||||||
|
clientHeight: function() {
|
||||||
|
this.changeFixed(this.clientHeight);
|
||||||
|
},
|
||||||
|
// 如果 `search_start` 发生改变，这个函数就会运行
|
||||||
|
search_start: function() {
|
||||||
|
if (this.search_start) {
|
||||||
|
if (this.page_type == "lost") {
|
||||||
|
this.current_title = JSON.parse(JSON.stringify(this.lost_title));
|
||||||
|
} else {
|
||||||
|
this.current_title = JSON.parse(JSON.stringify(this.found_title));
|
||||||
|
}
|
||||||
|
console.log("搜索阵列展开, 检索列表覆写完成");
|
||||||
|
} else {
|
||||||
|
this.search_content = "";
|
||||||
|
if (this.page_type == "lost") {
|
||||||
|
this.show_list = JSON.parse(JSON.stringify(this.const_lost_list));
|
||||||
|
} else {
|
||||||
|
this.show_list = JSON.parse(JSON.stringify(this.const_found_list));
|
||||||
|
}
|
||||||
|
console.log("搜索阵列关闭，显示列表覆写完成");
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 如果 `search_content` 发生改变，这个函数就会运行
|
||||||
|
search_content: function() {
|
||||||
|
// 确保只有在搜索阵列展开后才会进行搜索
|
||||||
|
if (this.search_start) {
|
||||||
|
if (this.page_type == "lost") {
|
||||||
|
this.fuzzySearch(JSON.parse(JSON.stringify(this.const_lost_list)));
|
||||||
|
} else {
|
||||||
|
this.fuzzySearch(JSON.parse(JSON.stringify(this.const_found_list)));
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// 如果 `page_type` 发生改变，这个函数就会运行
|
||||||
|
page_type: function() {
|
||||||
|
if (this.page_type == "lost") {
|
||||||
|
this.show_list = JSON.parse(JSON.stringify(this.const_lost_list));
|
||||||
|
this.current_title = JSON.parse(JSON.stringify(this.lost_title));
|
||||||
|
console.log(`显示列表覆写完成,当前页面性质：${this.page_type}`);
|
||||||
|
} else {
|
||||||
|
this.show_list = JSON.parse(JSON.stringify(this.const_found_list));
|
||||||
|
this.current_title = JSON.parse(JSON.stringify(this.found_title));
|
||||||
|
console.log(`显示列表覆写完成,当前页面性质：${this.page_type}`);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
beforeDestroy() {},
|
||||||
|
components: {},
|
||||||
|
activated() {
|
||||||
|
this.init(false)
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped lang="scss" type="text/scss">
|
||||||
|
@import "../../style/main";
|
||||||
|
.home {
|
||||||
|
width: 100%;
|
||||||
|
// max-width: 500px;
|
||||||
|
min-height: 100%;
|
||||||
|
background: #fff;
|
||||||
|
// margin: 0 auto;
|
||||||
|
.drawer-banner {
|
||||||
|
padding: 1rem 0.3rem 0.3rem 0.3rem;
|
||||||
|
box-sizing: border-box;
|
||||||
|
background: $main-color;
|
||||||
|
color: #fff;
|
||||||
|
position: relative;
|
||||||
|
.default-avatar {
|
||||||
|
color: #fff;
|
||||||
|
margin-bottom: 0.3rem;
|
||||||
|
}
|
||||||
|
.md-caption {
|
||||||
|
color: #fbfbfb;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.md-toolbar {
|
||||||
|
position: fixed;
|
||||||
|
top: 0;
|
||||||
|
}
|
||||||
|
.md-toolbar-row {
|
||||||
|
order: 12;
|
||||||
|
}
|
||||||
|
.md-speed-dial.md-bottom-right {
|
||||||
|
position: fixed !important;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Demo purposes only
|
||||||
|
.md-drawer {
|
||||||
|
width: 240px;
|
||||||
|
max-width: calc(100vw - 125px);
|
||||||
|
}
|
||||||
|
.md-app-scroller > div {
|
||||||
|
overflow-y: scroll !important;
|
||||||
|
}
|
||||||
|
.face {
|
||||||
|
color: #fff !important;
|
||||||
|
}
|
||||||
|
.page-title {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 56px;
|
||||||
|
line-height: 56px;
|
||||||
|
}
|
||||||
|
.sroll-top-area {
|
||||||
|
flex: 1;
|
||||||
|
min-height: 56px;
|
||||||
|
}
|
||||||
|
.md-bottom-bar.md-type-fixed .md-bottom-bar-item {
|
||||||
|
max-width: 1000px !important;
|
||||||
|
}
|
||||||
|
.md-app-content .md-card {
|
||||||
|
margin: 0;
|
||||||
|
margin-bottom: 16px;
|
||||||
|
}
|
||||||
|
.md-toolbar .md-toolbar-offset {
|
||||||
|
margin-left: 0 !important;
|
||||||
|
}
|
||||||
|
.md-toolbar .md-tabs {
|
||||||
|
padding-left: 0 !important;
|
||||||
|
}
|
||||||
|
.md-card-example {
|
||||||
|
.md-subhead {
|
||||||
|
.md-icon {
|
||||||
|
$size: 16px;
|
||||||
|
|
||||||
|
width: $size;
|
||||||
|
min-width: $size;
|
||||||
|
height: $size;
|
||||||
|
font-size: $size !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
span {
|
||||||
|
vertical-align: middle;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
18
vue.config.js
Normal file
18
vue.config.js
Normal file
@ -0,0 +1,18 @@
|
|||||||
|
module.exports = {
|
||||||
|
productionSourceMap: false,
|
||||||
|
// publicPath: process.env.NODE_ENV === 'production' ? '/verify/' : '/',
|
||||||
|
pwa: {
|
||||||
|
name: '曳光控制台',
|
||||||
|
themeColor: '#448aff',
|
||||||
|
workboxOptions: {
|
||||||
|
skipWaiting: true
|
||||||
|
},
|
||||||
|
iconPaths: {
|
||||||
|
favicon32: 'favicon.ico',
|
||||||
|
favicon16: 'favicon.ico',
|
||||||
|
appleTouchIcon: 'favicon.ico',
|
||||||
|
maskIcon: 'favicon.ico',
|
||||||
|
msTileImage: 'favicon.ico'
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
Loading…
x
Reference in New Issue
Block a user