mirror of
https://gitee.com/myxzgzs/boyue-kfcode-hasfj.git
synced 2025-06-21 06:09:38 +08:00
Initial commit
This commit is contained in:
luoyu
commit
18389b9aa4
8
.idea/.gitignore
generated
vendored
Normal file
8
.idea/.gitignore
generated
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
# 默认忽略的文件
|
||||
/shelf/
|
||||
/workspace.xml
|
||||
# 基于编辑器的 HTTP 客户端请求
|
||||
/httpRequests/
|
||||
# Datasource local storage ignored files
|
||||
/dataSources/
|
||||
/dataSources.local.xml
|
||||
15
.idea/CopilotChatHistory.xml
generated
Normal file
15
.idea/CopilotChatHistory.xml
generated
Normal file
@ -0,0 +1,15 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="CopilotChatHistory">
|
||||
<option name="conversations">
|
||||
<list>
|
||||
<Conversation>
|
||||
<option name="createTime" value="1748440978278" />
|
||||
<option name="id" value="0197173413667840adeca6a3c4e1fb12" />
|
||||
<option name="title" value="新对话 2025年5月28日 22:02:58" />
|
||||
<option name="updateTime" value="1748440978278" />
|
||||
</Conversation>
|
||||
</list>
|
||||
</option>
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/boyue-kfcode.iml
generated
Normal file
8
.idea/boyue-kfcode.iml
generated
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<module type="PYTHON_MODULE" version="4">
|
||||
<component name="NewModuleRootManager">
|
||||
<content url="file://$MODULE_DIR$" />
|
||||
<orderEntry type="jdk" jdkName="Python 3.13" jdkType="Python SDK" />
|
||||
<orderEntry type="sourceFolder" forTests="false" />
|
||||
</component>
|
||||
</module>
|
||||
6
.idea/inspectionProfiles/profiles_settings.xml
generated
Normal file
6
.idea/inspectionProfiles/profiles_settings.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<component name="InspectionProjectProfileManager">
|
||||
<settings>
|
||||
<option name="USE_PROJECT_PROFILE" value="false" />
|
||||
<version value="1.0" />
|
||||
</settings>
|
||||
</component>
|
||||
7
.idea/misc.xml
generated
Normal file
7
.idea/misc.xml
generated
Normal file
@ -0,0 +1,7 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="Black">
|
||||
<option name="sdkName" value="Python 3.13" />
|
||||
</component>
|
||||
<component name="ProjectRootManager" version="2" project-jdk-name="Python 3.13" project-jdk-type="Python SDK" />
|
||||
</project>
|
||||
8
.idea/modules.xml
generated
Normal file
8
.idea/modules.xml
generated
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="ProjectModuleManager">
|
||||
<modules>
|
||||
<module fileurl="file://$PROJECT_DIR$/.idea/boyue-kfcode.iml" filepath="$PROJECT_DIR$/.idea/boyue-kfcode.iml" />
|
||||
</modules>
|
||||
</component>
|
||||
</project>
|
||||
6
.idea/prettier.xml
generated
Normal file
6
.idea/prettier.xml
generated
Normal file
@ -0,0 +1,6 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="PrettierConfiguration">
|
||||
<option name="myConfigurationMode" value="AUTOMATIC" />
|
||||
</component>
|
||||
</project>
|
||||
8
.idea/vcs.xml
generated
Normal file
8
.idea/vcs.xml
generated
Normal file
@ -0,0 +1,8 @@
|
||||
<?xml version="1.0" encoding="UTF-8"?>
|
||||
<project version="4">
|
||||
<component name="VcsDirectoryMappings">
|
||||
<mapping directory="$PROJECT_DIR$/boyue-app" vcs="Git" />
|
||||
<mapping directory="$PROJECT_DIR$/boyue-java" vcs="Git" />
|
||||
<mapping directory="$PROJECT_DIR$/boyue-vue3" vcs="Git" />
|
||||
</component>
|
||||
</project>
|
||||
4
.vscode/settings.json
vendored
Normal file
4
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,4 @@
|
||||
{
|
||||
"java.configuration.updateBuildConfiguration": "interactive",
|
||||
"java.compile.nullAnalysis.mode": "automatic"
|
||||
}
|
||||
48
boyue-app/.gitignore
vendored
Normal file
48
boyue-app/.gitignore
vendored
Normal file
@ -0,0 +1,48 @@
|
||||
# 忽略生成的文件
|
||||
build/
|
||||
dist/
|
||||
unpackage/
|
||||
*.class
|
||||
*.jar
|
||||
*.war
|
||||
*.ear
|
||||
|
||||
# 忽略编辑器/IDE生成的文件和目录
|
||||
.idea/
|
||||
.hbuilderx
|
||||
*.swp
|
||||
*.swo
|
||||
*~
|
||||
|
||||
# 忽略依赖管理工具生成的目录
|
||||
node_modules/
|
||||
bower_components/
|
||||
vendor/
|
||||
|
||||
# 忽略操作系统文件
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
|
||||
# 忽略日志文件
|
||||
*.log
|
||||
|
||||
# 忽略敏感或包含个人信息的文件（根据需要添加更多）
|
||||
credentials.json
|
||||
config.ini
|
||||
secrets.txt
|
||||
|
||||
# 忽略其他自定义的文件或目录
|
||||
/custom_directory/
|
||||
|
||||
# 排除特定扩展名的文件（根据需要添加更多）
|
||||
*.bak
|
||||
*.tmp
|
||||
|
||||
# 排除特定文件名（根据需要添加更多）
|
||||
debug.log
|
||||
|
||||
# 不排除下列扩展名的文件
|
||||
!*.allowed_extension
|
||||
|
||||
# 不排除下列文件名
|
||||
!important_file.txt
|
||||
288
boyue-app/.vscode/launch.json
vendored
Normal file
288
boyue-app/.vscode/launch.json
vendored
Normal file
@ -0,0 +1,288 @@
|
||||
{
|
||||
// 使用 IntelliSense 了解相关属性。
|
||||
// 悬停以查看现有属性的描述。
|
||||
// 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
|
||||
"version": "0.2.0",
|
||||
"configurations": [
|
||||
|
||||
{
|
||||
"name": "Debug Edge",
|
||||
"request": "launch",
|
||||
"type": "msedge",
|
||||
"url": "http://localhost:80",
|
||||
"webRoot": "${workspaceFolder}",
|
||||
},
|
||||
{
|
||||
"name": "dev:h5",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:h5"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:app",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:app"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:app-android",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:app-android"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:app-ios",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:app-ios"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:custom",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:custom"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:h5:ssr",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:h5:ssr"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:mp-alipay",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:mp-alipay"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:mp-baidu",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:mp-baidu"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:mp-jd",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:mp-jd"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:mp-kuaishou",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:mp-kuaishou"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:mp-lark",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:mp-lark"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:mp-qq",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:mp-qq"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:mp-toutiao",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:mp-toutiao"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:mp-weixin",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:mp-weixin"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:quickapp-webview",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:quickapp-webview"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:quickapp-webview-huawei",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:quickapp-webview-huawei"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "dev:quickapp-webview-union",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "dev:quickapp-webview-union"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:app",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:app"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:app-android",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:app-android"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:app-ios",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:app-ios"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:custom",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:custom"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:h5",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:h5"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:h5:ssr",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:h5:ssr"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:mp-alipay",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:mp-alipay"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:mp-baidu",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:mp-baidu"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:mp-jd",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:mp-jd"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:mp-kuaishou",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:mp-kuaishou"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:mp-lark",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:mp-lark"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:mp-qq",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:mp-qq"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:mp-toutiao",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:mp-toutiao"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:mp-weixin",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:mp-weixin"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:quickapp-webview",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:quickapp-webview"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:quickapp-webview-huawei",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:quickapp-webview-huawei"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
},
|
||||
{
|
||||
"name": "build:quickapp-webview-union",
|
||||
"request": "launch",
|
||||
"runtimeArgs": ["run", "build:quickapp-webview-union"],
|
||||
"runtimeExecutable": "npm",
|
||||
"skipFiles": ["<node_internals>/**"],
|
||||
"type": "node"
|
||||
}
|
||||
]
|
||||
}
|
||||
21
boyue-app/LICENSE
Normal file
21
boyue-app/LICENSE
Normal file
@ -0,0 +1,21 @@
|
||||
MIT License
|
||||
|
||||
Copyright (c) 2023 哦NO
|
||||
|
||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||
of this software and associated documentation files (the "Software"), to deal
|
||||
in the Software without restriction, including without limitation the rights
|
||||
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
|
||||
copies of the Software, and to permit persons to whom the Software is
|
||||
furnished to do so, subject to the following conditions:
|
||||
|
||||
The above copyright notice and this permission notice shall be included in all
|
||||
copies or substantial portions of the Software.
|
||||
|
||||
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
|
||||
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
|
||||
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
||||
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
|
||||
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
|
||||
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
|
||||
SOFTWARE.
|
||||
269
boyue-app/README.md
Normal file
269
boyue-app/README.md
Normal file
@ -0,0 +1,269 @@
|
||||
# boyue-App-Geek
|
||||
|
||||
<p align="center">
|
||||
<span>
|
||||
<img alt="logo" src="https://oscimg.oschina.net/oscnet/up-d3d0a9303e11d522a06cd263f3079027715.png">
|
||||
</span>
|
||||
<span>+</span>
|
||||
<span>
|
||||
<img alt="logo" src="./doc/image/logo.png">
|
||||
</span>
|
||||
</p>
|
||||
<h1 align="center" style="margin: 30px 0 30px; font-weight: bold;">boyue-Geek v3.8.7.3.2</h1>
|
||||
<h4 align="center">基于SpringBoot3+Vue3前后端分离的Java快速开发框架</h4>
|
||||
<p align="center">
|
||||
<img src="https://img.shields.io/github/license/mashape/apistatus.svg">
|
||||
</p>
|
||||
|
||||
# 引言
|
||||
|
||||
boyue-Vue 与 boyue-App 是基于 SpringBoot2+Vue2 打造的企业级开发框架，得到了广大开发者的喜爱和积极反馈。随着技术的迭代进步，SpringBoot3 与 Vue3 逐渐进入开发者的视野。为了满足开发者对于新技术的追求，boyue 官方文档提供了 SpringBoot2 至 SpringBoot3 的升级方法。与此同时，社区也涌现出了 boyue-Vue3、boyue-App-Vue3 的版本，展现了开发者社区对于技术升级的热情与努力。
|
||||
|
||||
然而，在升级的过程中，官方的方法为了兼顾 Java1.8 的特性与一些老旧的方法，未完全拥抱**SpringBoot3 与 Java17**的全部特性。而社区的 boyue-Vue3、boyue-App-Vue3 版本由于出自不同的团队之手，**兼容性及整合性**上存在些许**不足**。更为关键的是，尽管这些版本**支持 TypeScript**，但**缺乏与之相匹配的 tsconfig.json 配置文件**，这使得在主流编辑器如 VSCode 中，TypeScript 的语法提示环境并未达到最佳状态。
|
||||
|
||||
鉴于此，**boyue-Geek 生态**应运而生。它旨在为广大开发者提供一个既保留原版本核心特性，又整合社区版优点的全新解决方案。在**boyue-Geek**中，我们深入调研了企业开发中常用的 boyue 扩展，并直接在框架中集成，确保开发者能够快速上手，高效开发。同时，我们采用了最新的**SpringBoot3+Vue3**技术栈，彻底移除了为了兼容 Java1.8 而保留的老旧方法。更为重要的是，我们为 TypeScript 开发环境加入了常用的 tsconfig.json 配置，使得开发者在 VSCode 等编辑器中能够获得更为舒适、便捷的语法提示体验。
|
||||
|
||||
**boyue-Geek**不仅仅是一个简单的升级版本，更是对于 boyue 生态的一次全面优化与整合。我们相信，通过**boyue-Geek 生态**，开发者将能够更为高效、愉悦地开发出优秀的企业级应用。
|
||||
|
||||
本项目为**boyue-Geek 生态**的 boyue-App 部分。
|
||||
**注意：**
|
||||
本人的其他两个推荐搭配的项目
|
||||
|
||||
1. [boyue-SpringBoot3-Geek: 这是若依极客生态的后端 Springboot3 版本 (gitee.com)](https://gitee.com/geek-xd/boyue-spring-boot3-geek)
|
||||
2. [boyue-Vue3-Geek: 这是若依极客生态的 Vue3 版本 (gitee.com)](https://gitee.com/geek-xd/ruo-yi-vue3-geek)
|
||||
|
||||
**与 boyue-App 相比较**
|
||||
|
||||
1. 使用 UniApp+Vue3 的最新框架
|
||||
2. 支持 TS、SCSS、LESS 等对 js 和 css 的扩充语言
|
||||
3. 使用 Pinia 代替 Vuex，更加轻巧简单
|
||||
4. 使用 uView-Plus（好看的 ui） 代替 uView-ui 的 ui 组件库
|
||||
5. 使用 uCharts（方便的图表）画图工具
|
||||
6. 已经完成了分包操作
|
||||
7. 提供了颜色选择器、二维码等常用组件
|
||||
8. 将原有内置工具进行类型标定
|
||||
9. 分别提供了 uview-plus 和 ucharts 的模板（可以直接使用或者用于学习）
|
||||
|
||||
# 快速开始
|
||||
|
||||
**注意：** node 版本需要 16+
|
||||
|
||||
## 迁移到Hbuilder（不依赖Hbuilder的项目不需要迁移）
|
||||
|
||||
1. src路径作为项目根路径
|
||||
2. 将index.html、package.json、vite.config.js、tsconfig.json、.gitignore粘贴到src目录下
|
||||
3. 在src目录下运行npm install
|
||||
4. 修改index.html中的./src/main.js为./main.js
|
||||
5. 在HBuilderX中运行时注意观察是否使用的是Vue3的编译器（若不是请自行查找方法解决，本人对HbuilderX使用不多）
|
||||
|
||||
|
||||
## 安装
|
||||
|
||||
一下三种方式均可，感觉速度 pnpm > yarn > cnpm > npm
|
||||
|
||||
**_Vue3/Vite 版要求 node 版本^14.18.0 || >=16.0.0_**
|
||||
|
||||
```shell
|
||||
npm install
|
||||
cnpm install
|
||||
yarn
|
||||
pnpm install
|
||||
```
|
||||
|
||||
# 启动
|
||||
|
||||
1. 将项目下载到本地
|
||||
2. 初始化项目---进入项目根路径运行指令初始化项目
|
||||
`npm install`
|
||||
3. 运行项目---进入项目根路径运行指令（在 package.json 能找到所有指令）：
|
||||
以微信小程序为例：`npm run dev:mp-weixin`
|
||||
以 H5 为例 ` npm run dev:h5`
|
||||
4. 查看项目 以微信小程序为例：
|
||||
打开微信开发者工具，导入项目路径 dist\dev\mp-weixin
|
||||
以 H5 为例：打开浏览器，输入控制台输出的地址
|
||||
注：公众号属于 H5，以微信公众号为例，打开微信开发者工具，输入控制台输出的地址
|
||||
5. 打包项目---进入项目根路径运行指令（在 package.json 能找到所有指令）：
|
||||
以微信小程序为例：`npm run build:mp-weixin`
|
||||
以 H5 为例： `npm run build:h5`
|
||||
|
||||
### 代码压缩
|
||||
|
||||
默认是启动代码压缩的，
|
||||
|
||||
如果需要关闭代码压缩，可以将 vite.config.js 中的 build.minify 赋值为 false。
|
||||
|
||||
如果需要打开代码压缩，可以将 vite.config.js 中的 build.minify 赋值为 true。
|
||||
|
||||
# 内置组件(geek-xd)
|
||||
|
||||
1. 颜色选择器组件
|
||||
2. 二维码组件
|
||||
3. 圆形菜单组件
|
||||
4. 常用的订单组件
|
||||
5. 信息展示组件
|
||||
|
||||
# 插件的使用
|
||||
|
||||
#### tab - 页面插件
|
||||
|
||||
可以通过设置参数中的 config.data 来实现页面传参
|
||||
|
||||
| 方法 | 作用 | 参数 |
|
||||
| ------------ | ------------------------------------------------ | ----------- |
|
||||
| getData | 可以拿到上个页面通过 tab 传递的参数 | 无 |
|
||||
| reLaunch | 关闭所有页面，打开到应用内的某个页面 | url、config |
|
||||
| switchTab | 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 | url、config |
|
||||
| redirectTo | 关闭当前页面，跳转到应用内的某个页面 | url、config |
|
||||
| navigateTo | 保留当前页面，跳转到应用内的某个页面 | url、config |
|
||||
| navigateBack | 关闭当前页面，返回上一页面或多级页面 | config |
|
||||
|
||||
#### auth - 鉴权插件
|
||||
|
||||
下面所有方法返回值都是布尔值，permission 代表权限字符串，role 代表角色字符串，复数形式代表数组。
|
||||
|
||||
| 方法 | 作用 | 参数 |
|
||||
| ----------- | ------------------------------------------ | ----------- |
|
||||
| hasPermi | 验证用户是否具备某权限 | permission |
|
||||
| hasPermiOr | 验证用户是否含有指定权限，只需包含其中一个 | permissions |
|
||||
| hasPermiAnd | 验证用户是否含有指定权限，必须全部拥有 | permissions |
|
||||
| hasRole | 验证用户是否具备某角色 | role |
|
||||
| hasRoleOr | 验证用户是否含有指定角色，只需包含其中一个 | roles |
|
||||
| hasRoleAnd | roles | roles |
|
||||
|
||||
#### modal - 弹窗插件
|
||||
|
||||
content 是消息内容，option 是详细配置。
|
||||
|
||||
| 方法 | 作用 | 参数 |
|
||||
| ------------ | ------------------------------ | ------- |
|
||||
| msg | 消息提示 | content |
|
||||
| msgError | 错误消息 | content |
|
||||
| msgSuccess | 成功消息 | content |
|
||||
| hideMsg | 隐藏消息 | 无 |
|
||||
| alert | 弹出提示 | content |
|
||||
| confirm | 确认窗体 | content |
|
||||
| showToast | 提示信息 | option |
|
||||
| loading | 打开遮罩层，需要手动关闭遮罩层 | content |
|
||||
| closeLoading | 关闭遮罩层 | 无 |
|
||||
|
||||
#### bus - 事件插件
|
||||
|
||||
eventName 是事件名称，eventFun 是事件处理函数，请尽量避免事件插件的使用，请在组件销毁是解绑素有该组件有关的事件，避免产生 bug。
|
||||
|
||||
| 方法 | 作用 | 参数 |
|
||||
| ----- | ------------ | ------------------- |
|
||||
| $on | 绑定一个事件 | eventName、eventFun |
|
||||
| $off | 解绑一个事件 | eventName |
|
||||
| $emit | 触发一个事件 | eventName、...args |
|
||||
|
||||
#### socket
|
||||
|
||||
设置项 enableUUID，是否启用基于 uuid 的消息处理机制，要求当发送的消息携带 uuid 字段时，返回的消息也要携带 uuid 字段。
|
||||
|
||||
设置项 enableEvent，是否启用基于事件的消息处理机制，要求当希望被事件处理函数处理的消息需要携带 event 字段。
|
||||
|
||||
| 方法 | 作用 | 参数 |
|
||||
| --------- | ----------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| connect | 连接 websocke，当连接成功后触发回调函数 | 最简单的用法就是传入{url:"ws://demo"} |
|
||||
| send | 发送信息，当 uuid 不为空且不为 false 时，当收到携带相同 uuid 的消息时触发回调函数，只触发一次。否则由默认处理函数处理。 | msg 消息内容，会被处理成 json 字符串 uuid 唯一标识符，可以手动传入，也可以设置为 true 当为 true 时会自动生成一个 uuid 并添加到 msg 中。 |
|
||||
| close | 关闭连接，会触发回调函数的内容，不会触发默认关闭事件的处理函数，也不会修改默认关闭事件的处理函数。 | 无 |
|
||||
| on | 监听事件，当收到携带 event 的消息时会调用回调函数。 | event 事件的名称 |
|
||||
| off | 取消监听事件 | |
|
||||
| onMessage | 定义默认监听事件 | callback 默认监听事件的处理函数 |
|
||||
| onError | 定义异常事件 | callback 默认异常事件的处理函数 |
|
||||
| onClose | 定义关闭事件 | callback 默认关闭事件的处理函数 |
|
||||
|
||||
# 作者建议
|
||||
|
||||
### 对于选项式
|
||||
|
||||
```js
|
||||
this.$tab; // 建议使用this.$tab进行页面跳转，理由：便于在跳转前处理其他事务
|
||||
this.$auth; // 建议使用this.$auth进行鉴权操作
|
||||
this.$modal; // 建议使用this.$modal打开弹窗，理由：便于以后想要使用自定义弹窗
|
||||
```
|
||||
|
||||
### 对于组合式
|
||||
|
||||
```js
|
||||
import tab from "@/plugins/tab"; // 建议使用tab进行页面跳转，理由：便于在跳转前处理其他事务
|
||||
import auth from "@/plugins/auth"; // 建议使用auth进行鉴权操作
|
||||
import modal from "@/plugins/modal"; // 建议使用modal打开弹窗，理由：便于以后想要使用自定义弹窗
|
||||
|
||||
// 也可以使用下面的方式
|
||||
import { tab, auth, modal } from "@/plugins";
|
||||
```
|
||||
|
||||
### 对于 ucharts
|
||||
|
||||
建议即便暂时不使用图表也不要删除它，以后可能会用到。
|
||||
|
||||
# 压缩内存
|
||||
|
||||
(主包最低 809kb 左右)
|
||||
|
||||
### 删除 geek 组件
|
||||
|
||||
1. 删除 pages_geek 和 components/geek-xd 文件夹
|
||||
2. 删除 pages.json 中 subPackages 的 root 值为“pages_geek/pages”的配置
|
||||
3. 删除 pages/template.config.js 中 geek 组件
|
||||
|
||||
### 去除模板
|
||||
|
||||
（占用主包 582kb 左右）
|
||||
|
||||
1. 删除 pages_template、pages_qiun 两个文件夹
|
||||
2. 删除 pages.json 中 subPackages 的 root 值为“pages_qiun/pages”、“pages_template/pages”的两个配置
|
||||
3. 删除 pages/template.config.js 和 pages/template.vue
|
||||
4. 删除 pages.json 中 subPackages 的“tabBar”中的模板一项和“pages”中模板的一项
|
||||
5. 删除 static 中的 uview，里面都是示例图片。
|
||||
6. 删除 plugins 中的 config.js 和 common.js，并在 plugins/index.js 中删除相关配置
|
||||
|
||||
### 删除 uchart
|
||||
|
||||
（占用主包 175kb 左右，不建议删除，以防以后会用）
|
||||
|
||||
1. 删除 components/qiun-data-charts 文件夹
|
||||
2. 删除 pages.json 中的 easycom 下的 custom 中的"qiun-(.\*)"的那一行
|
||||
3. 删除 pages/index 中使用 “qiun-data-charts” 的部分
|
||||
|
||||
### 删除 uview
|
||||
|
||||
（按需引入，没必要删除）
|
||||
|
||||
1. main.js 或者 main.ts 中删除
|
||||
|
||||
```js
|
||||
import uviewPlus from "uview-plus";
|
||||
// ......
|
||||
app.use(uviewPlus);
|
||||
```
|
||||
|
||||
2. uni.scss 中删除 @import 'uview-plus/theme.scss';
|
||||
3. App.vue 中删除 @import '@/static/scss/index.scss';
|
||||
4. package.json 中删除 "clipboard": "^2.0.11","dayjs": "^1.11.9","uview-plus": "^3.1.36",
|
||||
|
||||
# 功能演示
|
||||
|
||||
<table>
|
||||
<tr>
|
||||
<td><img src="./doc/image/template1.png" /></td>
|
||||
<td><img src="./doc/image/template2.png" /></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td><img src="./doc/image/index.png" /></td>
|
||||
<td><img src="./doc/image/mallMenu.png"/></td>
|
||||
</tr>
|
||||
</table>
|
||||
|
||||
# 附录
|
||||
|
||||
[Vue3 官网](https://cn.vuejs.org/)；
|
||||
[uniapp 官网](https://uniapp.dcloud.net.cn/)；
|
||||
[uView-plus 官网](https://uiadmin.net/uview-plus/)；
|
||||
[uCharts 官网](https://www.ucharts.cn/v2/#/)；
|
||||
[boyue 官网](http://boyue.vip/)；
|
||||
|
||||
# 联系我们：
|
||||
|
||||
QQ 交流群：744785891
|
||||
BIN
boyue-app/doc/image/index.png
Normal file
BIN
boyue-app/doc/image/index.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 43 KiB |
BIN
boyue-app/doc/image/logo.png
Normal file
BIN
boyue-app/doc/image/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.8 KiB |
BIN
boyue-app/doc/image/mallMenu.png
Normal file
BIN
boyue-app/doc/image/mallMenu.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 127 KiB |
BIN
boyue-app/doc/image/template1.png
Normal file
BIN
boyue-app/doc/image/template1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 41 KiB |
BIN
boyue-app/doc/image/template2.png
Normal file
BIN
boyue-app/doc/image/template2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 42 KiB |
21
boyue-app/index.html
Normal file
21
boyue-app/index.html
Normal file
@ -0,0 +1,21 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<title>boyue</title>
|
||||
<meta charset="UTF-8" name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script>
|
||||
var coverSupport = 'CSS' in window && typeof CSS.supports === 'function' && (CSS.supports('top: env(a)') ||
|
||||
CSS.supports('top: constant(a)'))
|
||||
document.write(
|
||||
'<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0' +
|
||||
(coverSupport ? ', viewport-fit=cover' : '') + '" />')
|
||||
</script>
|
||||
<title></title>
|
||||
<!--preload-links-->
|
||||
<!--app-context-->
|
||||
</head>
|
||||
<body>
|
||||
<div id="app"><!--app-html--></div>
|
||||
<script type="module" src="./src/main.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
13030
boyue-app/package-lock.json
generated
Normal file
13030
boyue-app/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
99
boyue-app/package.json
Normal file
99
boyue-app/package.json
Normal file
@ -0,0 +1,99 @@
|
||||
{
|
||||
"name": "ruoyi-geek-app",
|
||||
"version": "1.0.0",
|
||||
"description": "若依Geek管理系统",
|
||||
"author": "Geek-XD",
|
||||
"license": "MIT",
|
||||
"homepage": "https://gitee.com/geek-xd",
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://gitee.com/geek-xd/ruoyi-geek-app.git"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18.0.0 || >=20.0.0"
|
||||
},
|
||||
"scripts": {
|
||||
"dev:app": "uni -p app",
|
||||
"dev:app-android": "uni -p app-android",
|
||||
"dev:app-ios": "uni -p app-ios",
|
||||
"dev:custom": "uni -p",
|
||||
"dev:h5": "uni",
|
||||
"dev:h5:ssr": "uni --ssr",
|
||||
"dev:mp-alipay": "uni -p mp-alipay",
|
||||
"dev:mp-baidu": "uni -p mp-baidu",
|
||||
"dev:mp-jd": "uni -p mp-jd",
|
||||
"dev:mp-kuaishou": "uni -p mp-kuaishou",
|
||||
"dev:mp-lark": "uni -p mp-lark",
|
||||
"dev:mp-qq": "uni -p mp-qq",
|
||||
"dev:mp-toutiao": "uni -p mp-toutiao",
|
||||
"dev:mp-weixin": "uni -p mp-weixin",
|
||||
"dev:quickapp-webview": "uni -p quickapp-webview",
|
||||
"dev:quickapp-webview-huawei": "uni -p quickapp-webview-huawei",
|
||||
"dev:quickapp-webview-union": "uni -p quickapp-webview-union",
|
||||
"build:app": "uni build -p app",
|
||||
"build:app-android": "uni build -p app-android",
|
||||
"build:app-ios": "uni build -p app-ios",
|
||||
"build:custom": "uni build -p",
|
||||
"build:h5": "uni build",
|
||||
"build:h5:ssr": "uni build --ssr",
|
||||
"build:mp-alipay": "uni build -p mp-alipay",
|
||||
"build:mp-baidu": "uni build -p mp-baidu",
|
||||
"build:mp-jd": "uni build -p mp-jd",
|
||||
"build:mp-kuaishou": "uni build -p mp-kuaishou",
|
||||
"build:mp-lark": "uni build -p mp-lark",
|
||||
"build:mp-qq": "uni build -p mp-qq",
|
||||
"build:mp-toutiao": "uni build -p mp-toutiao",
|
||||
"build:mp-weixin": "uni build -p mp-weixin",
|
||||
"build:quickapp-webview": "uni build -p quickapp-webview",
|
||||
"build:quickapp-webview-huawei": "uni build -p quickapp-webview-huawei",
|
||||
"build:quickapp-webview-union": "uni build -p quickapp-webview-union",
|
||||
"type-check": "vue-tsc --noEmit",
|
||||
"clean:linux": "rm -rf dist || rm -rf node_modules",
|
||||
"clean:windows": "rd /s /q dist || rd /s /q node_modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dcloudio/uni-app": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-app-harmony": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-app-plus": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-components": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-h5": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-mp-alipay": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-mp-baidu": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-mp-harmony": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-mp-jd": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-mp-kuaishou": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-mp-lark": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-mp-qq": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-mp-toutiao": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-mp-weixin": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-mp-xhs": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-quickapp-webview": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uvm": "^0.3.1",
|
||||
"@jridgewell/sourcemap-codec": "^1.5.0",
|
||||
"@qiun/wx-ucharts": "2.5.0-20230101",
|
||||
"@uview-plus/types": "^3.2.5",
|
||||
"clipboard": "^2.0.11",
|
||||
"dayjs": "^1.11.13",
|
||||
"mqtt": "4.1.0",
|
||||
"pinia": "2.2.2",
|
||||
"tslib": "^2.7.0",
|
||||
"uview-plus": "^3.3.32",
|
||||
"vue": "3.4.21",
|
||||
"vue-i18n": "^9.14.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@dcloudio/types": "^3.4.14",
|
||||
"@dcloudio/uni-automator": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-cli-shared": "3.0.0-4060420250429001",
|
||||
"@dcloudio/uni-stacktracey": "3.0.0-4060420250429001",
|
||||
"@dcloudio/vite-plugin-uni": "3.0.0-4060420250429001",
|
||||
"@vue/runtime-core": "^3.5.12",
|
||||
"@vue/tsconfig": "^0.5.1",
|
||||
"less": "^4.2.0",
|
||||
"sass": "^1.78.0",
|
||||
"sass-loader": "^16.0.1",
|
||||
"typescript": "^5.6.2",
|
||||
"vite": "5.2.8",
|
||||
"vue-tsc": "2.1.6"
|
||||
}
|
||||
}
|
||||
9075
boyue-app/pnpm-lock.yaml
generated
Normal file
9075
boyue-app/pnpm-lock.yaml
generated
Normal file
File diff suppressed because it is too large
Load Diff
19
boyue-app/src/App.vue
Normal file
19
boyue-app/src/App.vue
Normal file
@ -0,0 +1,19 @@
|
||||
<script>
|
||||
|
||||
export default {
|
||||
onLaunch: function () {
|
||||
console.log('App Launch')
|
||||
},
|
||||
onShow: function () {
|
||||
console.log('App Show')
|
||||
},
|
||||
onHide: function () {
|
||||
console.log('App Hide')
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
@import "uview-plus/index.scss";
|
||||
@import '@/static/scss/index.scss';
|
||||
</style>
|
||||
59
boyue-app/src/api/login.js
Normal file
59
boyue-app/src/api/login.js
Normal file
@ -0,0 +1,59 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 登录方法
|
||||
export function login(username, password, code, uuid) {
|
||||
const data = {
|
||||
username,
|
||||
password,
|
||||
code,
|
||||
uuid
|
||||
}
|
||||
return request({
|
||||
url: '/login',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 注册方法
|
||||
export function register(data) {
|
||||
return request({
|
||||
url: '/register',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 获取用户详细信息
|
||||
export function getInfo() {
|
||||
return request({
|
||||
url: '/getInfo',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 退出方法
|
||||
export function logout() {
|
||||
return request({
|
||||
url: '/logout',
|
||||
method: 'post'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取验证码
|
||||
export function getCodeImg() {
|
||||
return request({
|
||||
url: '/captchaImage',
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'get',
|
||||
timeout: 20000
|
||||
})
|
||||
}
|
||||
31
boyue-app/src/api/oauth.js
Normal file
31
boyue-app/src/api/oauth.js
Normal file
@ -0,0 +1,31 @@
|
||||
import request from '@/utils/request'
|
||||
/**
|
||||
* 微信登录
|
||||
* @param {*} source pub miniapp
|
||||
* @param {*} code
|
||||
* @returns
|
||||
*/
|
||||
export function wxLogin(source,code) {
|
||||
return request({
|
||||
url: `/oauth/wx/login/${source}/${code}`,
|
||||
headers: {
|
||||
isToken: false
|
||||
},
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
/**
|
||||
* 微信绑定
|
||||
* @param {*} source 微信绑定
|
||||
* @param {*} code
|
||||
* @returns
|
||||
*/
|
||||
export function wxRegister(source,code) {
|
||||
return request({
|
||||
url: `/oauth/wx/register/${source}/${code}`,
|
||||
headers: {
|
||||
isToken: true
|
||||
},
|
||||
method: 'post',
|
||||
})
|
||||
}
|
||||
52
boyue-app/src/api/system/dict/data.js
Normal file
52
boyue-app/src/api/system/dict/data.js
Normal file
@ -0,0 +1,52 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询字典数据列表
|
||||
export function listData(query) {
|
||||
return request({
|
||||
url: '/system/dict/data/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询字典数据详细
|
||||
export function getData(dictCode) {
|
||||
return request({
|
||||
url: '/system/dict/data/' + dictCode,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 根据字典类型查询字典数据信息
|
||||
export function getDicts(dictType) {
|
||||
return request({
|
||||
url: '/system/dict/data/type/' + dictType,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增字典数据
|
||||
export function addData(data) {
|
||||
return request({
|
||||
url: '/system/dict/data',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改字典数据
|
||||
export function updateData(data) {
|
||||
return request({
|
||||
url: '/system/dict/data',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除字典数据
|
||||
export function delData(dictCode) {
|
||||
return request({
|
||||
url: '/system/dict/data/' + dictCode,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
60
boyue-app/src/api/system/dict/type.js
Normal file
60
boyue-app/src/api/system/dict/type.js
Normal file
@ -0,0 +1,60 @@
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 查询字典类型列表
|
||||
export function listType(query) {
|
||||
return request({
|
||||
url: '/system/dict/type/list',
|
||||
method: 'get',
|
||||
params: query
|
||||
})
|
||||
}
|
||||
|
||||
// 查询字典类型详细
|
||||
export function getType(dictId) {
|
||||
return request({
|
||||
url: '/system/dict/type/' + dictId,
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 新增字典类型
|
||||
export function addType(data) {
|
||||
return request({
|
||||
url: '/system/dict/type',
|
||||
method: 'post',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 修改字典类型
|
||||
export function updateType(data) {
|
||||
return request({
|
||||
url: '/system/dict/type',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 删除字典类型
|
||||
export function delType(dictId) {
|
||||
return request({
|
||||
url: '/system/dict/type/' + dictId,
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 刷新字典缓存
|
||||
export function refreshCache() {
|
||||
return request({
|
||||
url: '/system/dict/type/refreshCache',
|
||||
method: 'delete'
|
||||
})
|
||||
}
|
||||
|
||||
// 获取字典选择框列表
|
||||
export function optionselect() {
|
||||
return request({
|
||||
url: '/system/dict/type/optionselect',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
41
boyue-app/src/api/system/user.js
Normal file
41
boyue-app/src/api/system/user.js
Normal file
@ -0,0 +1,41 @@
|
||||
import upload from '@/utils/upload'
|
||||
import request from '@/utils/request'
|
||||
|
||||
// 用户密码重置
|
||||
export function updateUserPwd(oldPassword, newPassword) {
|
||||
const data = {
|
||||
oldPassword,
|
||||
newPassword
|
||||
}
|
||||
return request({
|
||||
url: '/system/user/profile/updatePwd',
|
||||
method: 'put',
|
||||
params: data
|
||||
})
|
||||
}
|
||||
|
||||
// 查询用户个人信息
|
||||
export function getUserProfile() {
|
||||
return request({
|
||||
url: '/system/user/profile',
|
||||
method: 'get'
|
||||
})
|
||||
}
|
||||
|
||||
// 修改用户个人信息
|
||||
export function updateUserProfile(data) {
|
||||
return request({
|
||||
url: '/system/user/profile',
|
||||
method: 'put',
|
||||
data: data
|
||||
})
|
||||
}
|
||||
|
||||
// 用户头像上传
|
||||
export function uploadAvatar(data) {
|
||||
return upload({
|
||||
url: '/system/user/profile/avatar',
|
||||
name: data.name,
|
||||
filePath: data.filePath
|
||||
})
|
||||
}
|
||||
54
boyue-app/src/components/boyue/DictTag/index.vue
Normal file
54
boyue-app/src/components/boyue/DictTag/index.vue
Normal file
@ -0,0 +1,54 @@
|
||||
<template>
|
||||
<div>
|
||||
<template v-for="(item, index) in options">
|
||||
<template v-if="values.includes(item.value)">
|
||||
<span
|
||||
v-if="item.elTagType == 'default' || item.elTagType == ''"
|
||||
:key="item.value"
|
||||
:index="index"
|
||||
:class="item.elTagClass"
|
||||
>{{ item.label }}</span>
|
||||
<uni-tag
|
||||
v-else
|
||||
:key="item.value + ''"
|
||||
:index="index"
|
||||
:type="elTagType(item.elTagType)"
|
||||
:class="item.elTagClass"
|
||||
:text="item.label"
|
||||
/>
|
||||
</template>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
// 数据
|
||||
options: {
|
||||
type: Array,
|
||||
default: null,
|
||||
},
|
||||
// 当前的值
|
||||
value: [Number, String, Array],
|
||||
})
|
||||
|
||||
const values = computed(() => {
|
||||
if (props.value !== null && typeof props.value !== 'undefined') {
|
||||
return Array.isArray(props.value) ? props.value : [String(props.value)];
|
||||
} else {
|
||||
return [];
|
||||
}
|
||||
})
|
||||
|
||||
const elTagType = (tagType) =>{
|
||||
tagType === 'danger' ? 'error' : tagType
|
||||
tagType === 'info' ? 'default' : tagType
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.uni-tag + .uni-tag {
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
<template>
|
||||
<view class="upload">
|
||||
<view class="imagebox">
|
||||
<view class="imageborder">
|
||||
<view class="main">
|
||||
<slot></slot>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="text">
|
||||
<text>{{ text }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue';
|
||||
|
||||
const text = ref("")
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.upload {
|
||||
height: 400rpx;
|
||||
width: 90%;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.imagebox {
|
||||
height: 80%;
|
||||
background-color: #eff8ff;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
display: flex;
|
||||
|
||||
.imageborder {
|
||||
border: 5px #319fea solid;
|
||||
position: relative;
|
||||
width: 70%;
|
||||
height: 80%;
|
||||
border-radius: 30rpx;
|
||||
|
||||
&::after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
background-color: #eff8ff;
|
||||
height: 80%;
|
||||
width: 120%;
|
||||
top: 10%;
|
||||
left: -10%;
|
||||
}
|
||||
|
||||
&::before {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
background-color: #eff8ff;
|
||||
top: -10%;
|
||||
left: 10%;
|
||||
height: 120%;
|
||||
width: 80%;
|
||||
}
|
||||
|
||||
.main {
|
||||
position: absolute;
|
||||
background-color: #eff8ff;
|
||||
top: 5%;
|
||||
left: 5%;
|
||||
height: 90%;
|
||||
width: 90%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 2;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.text {
|
||||
height: 20%;
|
||||
background-color: #319fea;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
|
||||
text {
|
||||
color: #ffffff;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,747 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive, watch, nextTick, getCurrentInstance } from 'vue';
|
||||
|
||||
// 类型定义
|
||||
interface RGBAColor {
|
||||
r: number;
|
||||
g: number;
|
||||
b: number;
|
||||
a: number;
|
||||
}
|
||||
|
||||
interface HSBColor {
|
||||
h: number;
|
||||
s: number;
|
||||
b: number;
|
||||
}
|
||||
|
||||
interface SitePosition {
|
||||
top: number;
|
||||
left: number;
|
||||
}
|
||||
|
||||
interface ElementPosition {
|
||||
top: number;
|
||||
left: number;
|
||||
width: number;
|
||||
height: number;
|
||||
}
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'confirm', data: { rgba: RGBAColor; hex: string }): void;
|
||||
}>();
|
||||
|
||||
const instance = getCurrentInstance();
|
||||
|
||||
const props = defineProps({
|
||||
color: {
|
||||
type: Object as () => RGBAColor,
|
||||
default() {
|
||||
return { r: 0, g: 0, b: 0, a: 0 }
|
||||
}
|
||||
},
|
||||
spareColor: {
|
||||
type: Array as () => RGBAColor[],
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
// 响应式数据
|
||||
const show = ref<boolean>(false);
|
||||
const active = ref<boolean>(false);
|
||||
const rgba = reactive<RGBAColor>({ r: 0, g: 0, b: 0, a: 1 });
|
||||
const hsb = reactive<HSBColor>({ h: 0, s: 0, b: 0 });
|
||||
const site = reactive<SitePosition[]>([{ top: 0, left: 0 }, { left: 0, top: 0 }, { left: 0, top: 0 }]);
|
||||
const index = ref<number>(0);
|
||||
const bgcolor = reactive<RGBAColor>({ r: 255, g: 0, b: 0, a: 1 });
|
||||
const hex = ref<string>('#000000');
|
||||
const mode = ref<boolean>(true);
|
||||
const position = ref<ElementPosition[] | null>(null);
|
||||
const colorList = ref<RGBAColor[]>([
|
||||
{ r: 244, g: 67, b: 54, a: 1 },
|
||||
{ r: 233, g: 30, b: 99, a: 1 },
|
||||
{ r: 156, g: 39, b: 176, a: 1 },
|
||||
{ r: 103, g: 58, b: 183, a: 1 },
|
||||
{ r: 63, g: 81, b: 181, a: 1 },
|
||||
{ r: 33, g: 150, b: 243, a: 1 },
|
||||
{ r: 3, g: 169, b: 244, a: 1 },
|
||||
{ r: 0, g: 188, b: 212, a: 1 },
|
||||
{ r: 0, g: 150, b: 136, a: 1 },
|
||||
{ r: 76, g: 175, b: 80, a: 1 },
|
||||
{ r: 139, g: 195, b: 74, a: 1 },
|
||||
{ r: 205, g: 220, b: 57, a: 1 },
|
||||
{ r: 255, g: 235, b: 59, a: 1 },
|
||||
{ r: 255, g: 193, b: 7, a: 1 },
|
||||
{ r: 255, g: 152, b: 0, a: 1 },
|
||||
{ r: 255, g: 87, b: 34, a: 1 },
|
||||
{ r: 121, g: 85, b: 72, a: 1 },
|
||||
{ r: 158, g: 158, b: 158, a: 1 },
|
||||
{ r: 0, g: 0, b: 0, a: 0.5 },
|
||||
{ r: 0, g: 0, b: 0, a: 0 },
|
||||
]);
|
||||
|
||||
// 初始化（替代 created 钩子）
|
||||
Object.assign(rgba, props.color);
|
||||
if (props.spareColor.length !== 0) {
|
||||
colorList.value = props.spareColor;
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
const init = (): void => {
|
||||
// hsb 颜色
|
||||
Object.assign(hsb, rgbToHsb(rgba));
|
||||
setValue(rgba);
|
||||
};
|
||||
|
||||
const moveHandle = (): void => { };
|
||||
|
||||
const open = (): void => {
|
||||
show.value = true;
|
||||
nextTick(() => {
|
||||
init();
|
||||
setTimeout(() => {
|
||||
active.value = true;
|
||||
setTimeout(() => {
|
||||
getSelectorQuery();
|
||||
}, 350)
|
||||
}, 50)
|
||||
})
|
||||
};
|
||||
|
||||
const close = (): void => {
|
||||
active.value = false;
|
||||
nextTick(() => {
|
||||
setTimeout(() => {
|
||||
show.value = false;
|
||||
}, 500)
|
||||
})
|
||||
};
|
||||
|
||||
const confirm = (): void => {
|
||||
close();
|
||||
emit('confirm', {
|
||||
rgba: rgba,
|
||||
hex: hex.value
|
||||
})
|
||||
};
|
||||
|
||||
// 选择模式
|
||||
const select = (): void => {
|
||||
mode.value = !mode.value
|
||||
};
|
||||
|
||||
// 常用颜色选择
|
||||
const selectColor = (item: RGBAColor): void => {
|
||||
setColorBySelect(item)
|
||||
};
|
||||
|
||||
const touchstart = (e: TouchEvent, idx: number): void => {
|
||||
const { pageX, pageY, clientX, clientY } = e.touches[0];
|
||||
setPosition(clientX, clientY, idx);
|
||||
};
|
||||
|
||||
const touchmove = (e: TouchEvent, idx: number): void => {
|
||||
const { pageX, pageY, clientX, clientY } = e.touches[0];
|
||||
setPosition(clientX, clientY, idx);
|
||||
};
|
||||
|
||||
const touchend = (e: TouchEvent, idx: number): void => {
|
||||
// 原代码为空实现
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置位置
|
||||
*/
|
||||
const setPosition = (x: number, y: number, idx: number): void => {
|
||||
index.value = idx;
|
||||
if (!position.value || !position.value[idx]) return;
|
||||
|
||||
const {
|
||||
top,
|
||||
left,
|
||||
width,
|
||||
height
|
||||
} = position.value[idx];
|
||||
// 设置最大最小值
|
||||
|
||||
site[idx].left = Math.max(0, Math.min(parseInt(String(x - left)), width));
|
||||
if (idx === 0) {
|
||||
site[idx].top = Math.max(0, Math.min(parseInt(String(y - top)), height));
|
||||
// 设置颜色
|
||||
hsb.s = parseInt(String((100 * site[idx].left) / width));
|
||||
hsb.b = parseInt(String(100 - (100 * (site[idx].top as number)) / height));
|
||||
setColor();
|
||||
setValue(rgba);
|
||||
} else {
|
||||
setControl(idx, site[idx].left);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置 rgb 颜色
|
||||
*/
|
||||
const setColor = (): void => {
|
||||
const rgb = HSBToRGB(hsb);
|
||||
rgba.r = rgb.r;
|
||||
rgba.g = rgb.g;
|
||||
rgba.b = rgb.b;
|
||||
};
|
||||
|
||||
/**
|
||||
* 设置二进制颜色
|
||||
* @param {RGBAColor} rgb
|
||||
*/
|
||||
const setValue = (rgb: RGBAColor): void => {
|
||||
hex.value = '#' + rgbToHex(rgb);
|
||||
};
|
||||
|
||||
const setControl = (idx: number, x: number): void => {
|
||||
if (!position.value || !position.value[idx]) return;
|
||||
|
||||
const {
|
||||
width
|
||||
} = position.value[idx];
|
||||
|
||||
if (idx === 1) {
|
||||
hsb.h = parseInt(String((360 * x) / width));
|
||||
const newRgb = HSBToRGB({
|
||||
h: hsb.h,
|
||||
s: 100,
|
||||
b: 100
|
||||
});
|
||||
bgcolor.r = newRgb.r;
|
||||
bgcolor.g = newRgb.g;
|
||||
bgcolor.b = newRgb.b;
|
||||
setColor();
|
||||
} else {
|
||||
rgba.a = parseFloat((x / width).toFixed(1));
|
||||
}
|
||||
setValue(rgba);
|
||||
};
|
||||
|
||||
/**
|
||||
* rgb 转 二进制 hex
|
||||
* @param {RGBAColor} rgb
|
||||
* @returns {string} 十六进制颜色字符串（不含#）
|
||||
*/
|
||||
const rgbToHex = (rgb: RGBAColor): string => {
|
||||
let hex = [rgb.r.toString(16), rgb.g.toString(16), rgb.b.toString(16)];
|
||||
hex.map(function (str, i) {
|
||||
if (str.length == 1) {
|
||||
hex[i] = '0' + str;
|
||||
}
|
||||
});
|
||||
return hex.join('');
|
||||
};
|
||||
|
||||
const setColorBySelect = (getrgb: RGBAColor): void => {
|
||||
const {
|
||||
r,
|
||||
g,
|
||||
b,
|
||||
a
|
||||
} = getrgb;
|
||||
|
||||
rgba.r = r ? parseInt(String(r)) : 0;
|
||||
rgba.g = g ? parseInt(String(g)) : 0;
|
||||
rgba.b = b ? parseInt(String(b)) : 0;
|
||||
rgba.a = a ? a : 0;
|
||||
|
||||
Object.assign(hsb, rgbToHsb(rgba));
|
||||
changeViewByHsb();
|
||||
};
|
||||
|
||||
const changeViewByHsb = (): void => {
|
||||
if (!position.value || position.value.length < 3) return;
|
||||
|
||||
const [a, b, c] = position.value;
|
||||
site[0].left = parseInt(String(hsb.s * a.width / 100));
|
||||
site[0].top = parseInt(String((100 - hsb.b) * a.height / 100));
|
||||
setColor();
|
||||
setValue(rgba);
|
||||
|
||||
const newRgb = HSBToRGB({
|
||||
h: hsb.h,
|
||||
s: 100,
|
||||
b: 100
|
||||
});
|
||||
bgcolor.r = newRgb.r;
|
||||
bgcolor.g = newRgb.g;
|
||||
bgcolor.b = newRgb.b;
|
||||
|
||||
site[1].left = hsb.h / 360 * b.width;
|
||||
site[2].left = rgba.a * c.width;
|
||||
};
|
||||
|
||||
/**
|
||||
* hsb 转 rgb
|
||||
* @param {HSBColor} hsb 颜色模式 H(hues)表示色相，S(saturation)表示饱和度，B（brightness）表示亮度
|
||||
* @returns {RGBAColor} RGB颜色对象
|
||||
*/
|
||||
const HSBToRGB = (hsb: HSBColor): RGBAColor => {
|
||||
let rgb: { r: number; g: number; b: number } = { r: 0, g: 0, b: 0 };
|
||||
let h = Math.round(hsb.h);
|
||||
let s = Math.round((hsb.s * 255) / 100);
|
||||
let v = Math.round((hsb.b * 255) / 100);
|
||||
if (s == 0) {
|
||||
rgb.r = rgb.g = rgb.b = v;
|
||||
} else {
|
||||
let t1 = v;
|
||||
let t2 = ((255 - s) * v) / 255;
|
||||
let t3 = ((t1 - t2) * (h % 60)) / 60;
|
||||
if (h == 360) h = 0;
|
||||
if (h < 60) {
|
||||
rgb.r = t1;
|
||||
rgb.b = t2;
|
||||
rgb.g = t2 + t3;
|
||||
} else if (h < 120) {
|
||||
rgb.g = t1;
|
||||
rgb.b = t2;
|
||||
rgb.r = t1 - t3;
|
||||
} else if (h < 180) {
|
||||
rgb.g = t1;
|
||||
rgb.r = t2;
|
||||
rgb.b = t2 + t3;
|
||||
} else if (h < 240) {
|
||||
rgb.b = t1;
|
||||
rgb.r = t2;
|
||||
rgb.g = t1 - t3;
|
||||
} else if (h < 300) {
|
||||
rgb.b = t1;
|
||||
rgb.g = t2;
|
||||
rgb.r = t2 + t3;
|
||||
} else if (h < 360) {
|
||||
rgb.r = t1;
|
||||
rgb.g = t2;
|
||||
rgb.b = t1 - t3;
|
||||
} else {
|
||||
rgb.r = 0;
|
||||
rgb.g = 0;
|
||||
rgb.b = 0;
|
||||
}
|
||||
}
|
||||
return {
|
||||
r: Math.round(rgb.r),
|
||||
g: Math.round(rgb.g),
|
||||
b: Math.round(rgb.b),
|
||||
a: 1
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* rgb转hsb
|
||||
* @param {RGBAColor} rgb RGB颜色对象
|
||||
* @returns {HSBColor} HSB颜色对象
|
||||
*/
|
||||
const rgbToHsb = (rgb: RGBAColor): HSBColor => {
|
||||
let hsb = {
|
||||
h: 0,
|
||||
s: 0,
|
||||
b: 0
|
||||
};
|
||||
let min = Math.min(rgb.r, rgb.g, rgb.b);
|
||||
let max = Math.max(rgb.r, rgb.g, rgb.b);
|
||||
let delta = max - min;
|
||||
hsb.b = max;
|
||||
hsb.s = max != 0 ? 255 * delta / max : 0;
|
||||
if (hsb.s != 0) {
|
||||
if (rgb.r == max) hsb.h = (rgb.g - rgb.b) / delta;
|
||||
else if (rgb.g == max) hsb.h = 2 + (rgb.b - rgb.r) / delta;
|
||||
else hsb.h = 4 + (rgb.r - rgb.g) / delta;
|
||||
} else hsb.h = -1;
|
||||
hsb.h *= 60;
|
||||
if (hsb.h < 0) hsb.h = 0;
|
||||
hsb.s *= 100 / 255;
|
||||
hsb.b *= 100 / 255;
|
||||
return hsb;
|
||||
};
|
||||
|
||||
const getSelectorQuery = (): void => {
|
||||
const views = uni.createSelectorQuery().in(instance!.proxy);
|
||||
views.selectAll('.boxs')
|
||||
.boundingClientRect(data => {
|
||||
if (Array.isArray(data) ? data.length === 0 : !data) {
|
||||
setTimeout(() => getSelectorQuery(), 20)
|
||||
return
|
||||
}
|
||||
position.value = data as unknown as ElementPosition[];
|
||||
setColorBySelect(rgba);
|
||||
})
|
||||
.exec();
|
||||
};
|
||||
|
||||
// 监听 props
|
||||
watch(() => props.spareColor, (newVal) => {
|
||||
colorList.value = newVal;
|
||||
});
|
||||
|
||||
// 暴露组件方法供父组件调用
|
||||
defineExpose({
|
||||
open,
|
||||
close,
|
||||
confirm
|
||||
});
|
||||
</script>
|
||||
<template>
|
||||
<view v-show="show" class="t-wrapper" @touchmove.stop.prevent="moveHandle">
|
||||
<view class="t-mask" :class="{ active: active }" @click.stop="close"></view>
|
||||
<view class="t-box" :class="{ active: active }">
|
||||
<view class="t-header">
|
||||
<view class="t-header-button" @click="close">取消</view>
|
||||
<view class="t-header-button confrim" @click="confirm">确认</view>
|
||||
</view>
|
||||
<view class="t-color__box"
|
||||
:style="{ background: 'rgb(' + bgcolor.r + ',' + bgcolor.g + ',' + bgcolor.b + ')' }">
|
||||
<view class="t-background boxs" @touchstart="touchstart($event, 0)" @touchmove="touchmove($event, 0)"
|
||||
@touchend="touchend($event, 0)">
|
||||
<view class="t-color-mask"></view>
|
||||
<view class="t-pointer" :style="{
|
||||
top: site[0].top - 8 + 'px',
|
||||
left: site[0].left - 8 + 'px'
|
||||
}">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-control__box">
|
||||
<view class="t-control__color">
|
||||
<view class="t-control__color-content"
|
||||
:style="{ background: 'rgba(' + rgba.r + ',' + rgba.g + ',' + rgba.b + ',' + rgba.a + ')' }">
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-control-box__item">
|
||||
<view class="t-controller boxs" @touchstart="touchstart($event, 1)"
|
||||
@touchmove="touchmove($event, 1)" @touchend="touchend($event, 1)">
|
||||
<view class="t-hue">
|
||||
<view class="t-circle" :style="{ left: site[1].left - 12 + 'px' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-controller boxs" @touchstart="touchstart($event, 2)"
|
||||
@touchmove="touchmove($event, 2)" @touchend="touchend($event, 2)">
|
||||
<view class="t-transparency">
|
||||
<view class="t-circle" :style="{ left: site[2].left - 12 + 'px' }"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-result__box">
|
||||
<view v-if="mode" class="t-result__item">
|
||||
<view class="t-result__box-input">{{ hex }}</view>
|
||||
<view class="t-result__box-text">HEX</view>
|
||||
</view>
|
||||
<template v-else>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{ rgba.r }}</view>
|
||||
<view class="t-result__box-text">R</view>
|
||||
</view>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{ rgba.g }}</view>
|
||||
<view class="t-result__box-text">G</view>
|
||||
</view>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{ rgba.b }}</view>
|
||||
<view class="t-result__box-text">B</view>
|
||||
</view>
|
||||
<view class="t-result__item">
|
||||
<view class="t-result__box-input">{{ rgba.a }}</view>
|
||||
<view class="t-result__box-text">A</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<view class="t-result__item t-select" @click="select">
|
||||
<view class="t-result__box-input">
|
||||
<view>切换</view>
|
||||
<view>模式</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="t-alternative">
|
||||
<view class="t-alternative__item" v-for="(item, index) in colorList" :key="index">
|
||||
<view class="t-alternative__item-content"
|
||||
:style="{ background: 'rgba(' + item.r + ',' + item.g + ',' + item.b + ',' + item.a + ')' }"
|
||||
@click="selectColor(item)">
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.t-wrapper {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
z-index: 9999;
|
||||
}
|
||||
|
||||
.t-box {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
padding: 30upx 0;
|
||||
padding-top: 0;
|
||||
background: #fff;
|
||||
transition: all 0.3s;
|
||||
transform: translateY(100%);
|
||||
|
||||
&.active {
|
||||
transform: translateY(0%);
|
||||
}
|
||||
}
|
||||
|
||||
.t-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
height: 100upx;
|
||||
border-bottom: 1px #eee solid;
|
||||
box-shadow: 1px 0 2px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-header-button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: 150upx;
|
||||
height: 100upx;
|
||||
font-size: 30upx;
|
||||
color: #666;
|
||||
padding-left: 20upx;
|
||||
|
||||
&:last-child {
|
||||
justify-content: flex-end;
|
||||
padding-right: 20upx;
|
||||
}
|
||||
|
||||
&.confrim {
|
||||
color: #007AFF;
|
||||
}
|
||||
}
|
||||
|
||||
.t-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: -1;
|
||||
transition: all 0.3s;
|
||||
opacity: 0;
|
||||
|
||||
&.active {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 避免使用 &__box 写法，改为完整类名
|
||||
.t-color__box {
|
||||
position: relative;
|
||||
height: 400upx;
|
||||
background: rgb(255, 0, 0);
|
||||
overflow: hidden;
|
||||
box-sizing: border-box;
|
||||
margin: 0 20upx;
|
||||
margin-top: 20upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-color-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
width: 100%;
|
||||
height: 400upx;
|
||||
background: linear-gradient(to top, #000, rgba(0, 0, 0, 0));
|
||||
}
|
||||
|
||||
.t-background {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
|
||||
}
|
||||
|
||||
.t-pointer {
|
||||
position: absolute;
|
||||
bottom: -8px;
|
||||
left: -8px;
|
||||
z-index: 2;
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
border: 1px #fff solid;
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.t-show-color {
|
||||
width: 100upx;
|
||||
height: 50upx;
|
||||
}
|
||||
|
||||
// 避免使用嵌套方式，使用完整类名
|
||||
.t-control__box {
|
||||
margin-top: 50upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
padding-left: 20upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-control__color {
|
||||
flex-shrink: 0;
|
||||
width: 100upx;
|
||||
height: 100upx;
|
||||
border-radius: 50%;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
||||
background-size: 36upx 36upx;
|
||||
background-position: 0 0, 18upx 18upx;
|
||||
border: 1px #eee solid;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.t-control__color-content {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.t-control-box__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
padding: 0 30upx;
|
||||
}
|
||||
|
||||
.t-controller {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 16px;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
||||
background-size: 32upx 32upx;
|
||||
background-position: 0 0, 16upx 16upx;
|
||||
}
|
||||
|
||||
.t-hue {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, #f00 0%, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, #f00 100%);
|
||||
}
|
||||
|
||||
.t-transparency {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgb(0, 0, 0));
|
||||
}
|
||||
|
||||
.t-circle {
|
||||
position: absolute;
|
||||
top: -2px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
box-sizing: border-box;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
box-shadow: 0 0 2px 1px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
// 使用完整的类名而不是嵌套
|
||||
.t-result__box {
|
||||
margin-top: 20upx;
|
||||
padding: 10upx;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-result__item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 10upx;
|
||||
width: 100%;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-result__box-input {
|
||||
padding: 10upx 0;
|
||||
width: 100%;
|
||||
font-size: 28upx;
|
||||
box-shadow: 0 0 1px 1px rgba(0, 0, 0, 0.1);
|
||||
color: #999;
|
||||
text-align: center;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.t-result__box-text {
|
||||
margin-top: 10upx;
|
||||
font-size: 28upx;
|
||||
line-height: 2;
|
||||
}
|
||||
|
||||
.t-select {
|
||||
flex-shrink: 0;
|
||||
width: 150upx;
|
||||
padding: 0 30upx;
|
||||
|
||||
.t-result__box-input {
|
||||
border-radius: 10upx;
|
||||
border: none;
|
||||
color: #999;
|
||||
box-shadow: 1px 1px 2px 1px rgba(0, 0, 0, 0.1);
|
||||
background: #fff;
|
||||
|
||||
&:active {
|
||||
box-shadow: 0px 0px 1px 0px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.t-alternative {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
padding-right: 10upx;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.t-alternative__item {
|
||||
margin-left: 12upx;
|
||||
margin-top: 10upx;
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
border-radius: 10upx;
|
||||
background-color: #fff;
|
||||
background-image: linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee),
|
||||
linear-gradient(45deg, #eee 25%, transparent 25%, transparent 75%, #eee 75%, #eee);
|
||||
background-size: 36upx 36upx;
|
||||
background-position: 0 0, 18upx 18upx;
|
||||
border: 1px #eee solid;
|
||||
overflow: hidden;
|
||||
|
||||
&:active {
|
||||
transition: all 0.3s;
|
||||
transform: scale(1.1);
|
||||
}
|
||||
}
|
||||
|
||||
.t-alternative__item-content {
|
||||
width: 50upx;
|
||||
height: 50upx;
|
||||
background: rgba(255, 0, 0, 0.5);
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,125 @@
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
img: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
price: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line' // line, rect
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<view class="card" :class="type" @click="$emit('click')">
|
||||
<image class="img" :src="img" />
|
||||
<view class="content">
|
||||
<view class="title">{{ title }}</view>
|
||||
<view class="subTitle">{{ subTitle }}</view>
|
||||
<view class="price">￥{{ price }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.card {
|
||||
padding: 0;
|
||||
border-radius: 10px;
|
||||
background-color: #ffffff;
|
||||
width: 700rpx;
|
||||
padding: 20rpx;
|
||||
margin: 10rpx;
|
||||
position: relative;
|
||||
|
||||
.img {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.line {
|
||||
display: flex;
|
||||
|
||||
.content {
|
||||
height: 200rpx;
|
||||
padding-left: 20rpx;
|
||||
|
||||
.title {
|
||||
width: 400rpx;
|
||||
font-size: 35rpx;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
width: 400rpx;
|
||||
height: 90rpx;
|
||||
margin-top: 10rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgb(87, 87, 87);
|
||||
line-height: 30rpx;
|
||||
display: -webkit-box;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-line-clamp: 3;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 40rpx;
|
||||
color: red;
|
||||
width: 400rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rect {
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
width: 350rpx;
|
||||
padding: 0;
|
||||
margin: 10rpx;
|
||||
display: inline-block;
|
||||
|
||||
.img {
|
||||
border-radius: 10px 10px 0 0;
|
||||
height: 350rpx;
|
||||
width: 350rpx;
|
||||
}
|
||||
|
||||
.content {
|
||||
padding: 0 20rpx;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
|
||||
.title {
|
||||
width: 330rpx;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
width: 330rpx;
|
||||
font-size: 20rpx;
|
||||
color: rgb(87, 87, 87);
|
||||
}
|
||||
|
||||
.price {
|
||||
font-size: 30rpx;
|
||||
color: red;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,74 @@
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 80
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: "菜单"
|
||||
},
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: '#515151'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'circle'
|
||||
}
|
||||
})
|
||||
const menuStyle = computed(() => {
|
||||
return {
|
||||
width: `${props.size + 40}rpx`,
|
||||
height: `${props.size + 40}rpx`
|
||||
}
|
||||
})
|
||||
const titleStype = computed(() => {
|
||||
return {
|
||||
width: `${props.size + 40}rpx`,
|
||||
color: props.labelColor
|
||||
}
|
||||
})
|
||||
</script>
|
||||
<template>
|
||||
<view>
|
||||
<view class="menu" :class="type" :style="menuStyle" @click="$emit('click')">
|
||||
<image :src="icon" style="width: 100%;height: 100%"></image>
|
||||
</view>
|
||||
<view class="title" :style="titleStype">{{ label }}</view>
|
||||
</view>
|
||||
</template>
|
||||
<style lang="scss" scoped>
|
||||
.menu {
|
||||
padding: 20rpx;
|
||||
}
|
||||
|
||||
.circle {
|
||||
padding: 20rpx;
|
||||
border-radius: 100%;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
|
||||
&:active {
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
|
||||
.rect {
|
||||
padding: 15rpx;
|
||||
margin-bottom: -15rpx;
|
||||
|
||||
&:active {
|
||||
opacity: 0.5;
|
||||
}
|
||||
}
|
||||
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,220 @@
|
||||
<template>
|
||||
<view class="geek-card" @click="$emit('click')">
|
||||
<view class="geek-header">
|
||||
<view class="geek-shop">{{ shop }} > </view>
|
||||
<view class="geek-status">{{ status }}</view>
|
||||
</view>
|
||||
<view class="geek-content">
|
||||
<image class="geek-img" :src="img"></image>
|
||||
<view class="geek-label">{{ label }}</view>
|
||||
<view class="geek-sum">
|
||||
<view class="geek-price">
|
||||
<view class="geek-sum-1">￥{{ number.integerPart }}</view>
|
||||
<view class="geek-sum-2">. {{ number.decimalPart }}</view>
|
||||
</view>
|
||||
<view class="geek-sum-3">共 {{ num }} 件</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="geek-footer">
|
||||
<view class="geek-more" @click="$emit('more')">更多</view>
|
||||
<view class="geek-buttonGroup">
|
||||
<view class="geek-btn" @click="$emit('sell')">卖了换钱</view>
|
||||
<view class="geek-btn" @click="$emit('return')">退换/售后</view>
|
||||
<view class="geek-buy" @click="$emit('again')">再次购买</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
shop: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
status: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
img: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
label: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
price: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
num: {
|
||||
type: Number,
|
||||
default: 0
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'line'
|
||||
}
|
||||
})
|
||||
|
||||
const number = computed(() => {
|
||||
return formatNumber(props.price, 2)
|
||||
})
|
||||
|
||||
function formatNumber(num, place) {
|
||||
|
||||
let fixedNum = Number(num).toFixed(place); // 将数字保留两位小数
|
||||
let parts = fixedNum.split('.'); // 拆分整数部分和小数部分
|
||||
let integerPart = parts[0]; // 整数部分
|
||||
let decimalPart = parts[1]; // 小数部分
|
||||
|
||||
// 使用padStart方法补0到小数部分
|
||||
decimalPart = decimalPart.padStart(place, '0');
|
||||
|
||||
return {
|
||||
integerPart, decimalPart
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.geek-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
position: relative;
|
||||
padding: 20rpx;
|
||||
background-color: white;
|
||||
border-radius: 20rpx;
|
||||
height: 360rpx;
|
||||
width: 700rpx;
|
||||
margin: 25rpx;
|
||||
|
||||
.geek-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 60rpx;
|
||||
width: 100%;
|
||||
margin-bottom: 6rpx;
|
||||
|
||||
.geek-shop {
|
||||
font-size: 28rpx;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.geek-status {
|
||||
width: 100rpx;
|
||||
text-align: center;
|
||||
opacity: 0.5;
|
||||
font-size: 25rpx;
|
||||
text-align: end;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.geek-content {
|
||||
position: relative;
|
||||
height: auto;
|
||||
width: 664rpx;
|
||||
|
||||
.geek-img {
|
||||
border-radius: 30rpx;
|
||||
height: 170rpx;
|
||||
width: 170rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.geek-label {
|
||||
position: absolute;
|
||||
top: 40rpx;
|
||||
left: 178rpx;
|
||||
|
||||
width: 350rpx;
|
||||
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.geek-sum {
|
||||
position: absolute;
|
||||
top: 44rpx;
|
||||
right: 20rpx;
|
||||
|
||||
width: 150rpx;
|
||||
height: 84rpx;
|
||||
|
||||
.geek-price {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-weight: bold;
|
||||
|
||||
.geek-sum-1 {
|
||||
font-size: 32rpx;
|
||||
}
|
||||
|
||||
.geek-sum-2 {
|
||||
padding-top: 20rpx;
|
||||
font-size: 20rpx;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
.geek-sum-3 {
|
||||
font-size: 20rpx;
|
||||
text-align: end;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.geek-footer {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
height: 60rpx;
|
||||
width: 100%;
|
||||
font-size: 25rpx;
|
||||
|
||||
.geek-more {
|
||||
height: 60rpx;
|
||||
margin-right: 110rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
|
||||
.geek-buttonGroup {
|
||||
height: 60rpx;
|
||||
display: inline-block;
|
||||
|
||||
.geek-btn {
|
||||
border: 1rpx solid #E9E9E9;
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 80rpx;
|
||||
opacity: 0.8;
|
||||
padding: 10rpx;
|
||||
margin-right: 10rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
|
||||
}
|
||||
|
||||
.geek-buy {
|
||||
width: 140rpx;
|
||||
height: 60rpx;
|
||||
border-radius: 80rpx;
|
||||
opacity: 0.8;
|
||||
padding: 10rpx;
|
||||
text-align: center;
|
||||
display: inline-block;
|
||||
color: #F25E53;
|
||||
border: 1rpx solid #F4DADA;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,90 @@
|
||||
# uni-app 二维码生成器
|
||||
|
||||
改自作者诗小柒的tki-qrcode二维码生成器
|
||||
|
||||
### 作者：董玉可
|
||||
|
||||
1. H5、微信小程序、支付宝小程序、APP，其它平台的小程序没有测试
|
||||
2. 使用canvas生成
|
||||
3. 可设置二维码背景色，前景色，角标色
|
||||
4. 可设置二维码logo
|
||||
|
||||
## 重要的事情说3遍 重要的事情说3遍 重要的事情说3遍
|
||||
|
||||
1. IOS、Android真机都可以正常生成二维码
|
||||
2. 使用的时候出现无法生成二维码或空白的请先github直接打包下载，问题依旧，请github上直接提出问题并配图
|
||||
3. 有问题请说明问题原因，这样我才好定位，否则我也无法解决
|
||||
4. 如果此插件有帮助到你请打5分或赞赏我，你的支持是我更新的动力
|
||||
|
||||
+ 图片1 是微信小程序真机实测
|
||||
+ 图片2 是微信小程序模拟实测
|
||||
+ 图片3 是支付宝小程序模拟器实测
|
||||
+ 图片4 是安卓真机实测
|
||||
+ 图片5 H5
|
||||
|
||||
### 使用方法
|
||||
|
||||
在 `template` 中使用
|
||||
|
||||
```javascript
|
||||
<view class="qrimg">
|
||||
<geek-qrcode
|
||||
ref="qrcode"
|
||||
:cid="cid"
|
||||
:val="val"
|
||||
:size="size"
|
||||
:unit="unit"
|
||||
:background="background"
|
||||
:foreground="foreground"
|
||||
:pdground="pdground"
|
||||
:icon="icon"
|
||||
:iconSize="iconsize"
|
||||
:lv="lv"
|
||||
:onval="onval"
|
||||
:loadMake="loadMake"
|
||||
:usingComponents="usingComponents"
|
||||
:showLoading="showLoading"
|
||||
:loadingText="loadingText"
|
||||
@result="qrR" />
|
||||
</view>
|
||||
```
|
||||
|
||||
### 属性
|
||||
|
||||
| 属性名 | 类型 | 默认值 | 可选值 | 说明 |
|
||||
| :-------------- | :-----: | :---------------: | :----: | :-------------------------------------------------------------------------------------------------- |
|
||||
| cid | String | tki-qrcode-canvas | | canvasId，页面存在多个二维码组件时需设置不同的ID |
|
||||
| size | Number | 200 | | 生成的二维码大小 |
|
||||
| unit | String | upx | px | 大小单位尺寸 |
|
||||
| show | Boolean | true | | 默认使用组件中的image标签显示二维码 |
|
||||
| val | String | 二维码 | | 要生成的内容 |
|
||||
| background | String | #000000 | | 二维码背景色 |
|
||||
| foreground | String | #ffffff | | 二维码前景色 |
|
||||
| pdground | String | #ffffff | | 二维码角标色 |
|
||||
| icon | String | | | 二维码图标URL（必须是本地图片，网络图需要先下载至本地） |
|
||||
| iconSize | Number | 40 | | 二维码图标大小（注意此大小不会跟随二维码size 动态变化，设置时需要注意大小，不要太大，以免无法识别） |
|
||||
| lv | Number | 3 | | 容错级别（一般不用设置） |
|
||||
| onval | Boolean | false | | 监听val值变化自动重新生成二维码 |
|
||||
| loadMake | Boolean | false | | 组件初始化完成后自动生成二维码，val需要有值 |
|
||||
| usingComponents | Boolean | true | false | 是否使用了自定义组件模式（主要是为了修复非自定义组件模式时 v-if 无法生成二维码的问题） |
|
||||
| showLoading | Boolean | true | false | 是否显示loading |
|
||||
| loadingText | String | 二维码生成中 | | loading文字 |
|
||||
|
||||
### 方法
|
||||
|
||||
| 方法名 | 参数 | 默认值 | 说明 |
|
||||
| :----------- | :--: | :----: | :-------------------------------------------------- |
|
||||
| _makeCode() | | | 生成二维码 |
|
||||
| _clearCode() | | | 清空二维码（清空二维码会触发result回调 返回值为空） |
|
||||
| _saveCode() | | | 保存二维码到图库 |
|
||||
|
||||
### 事件
|
||||
|
||||
| 事件名 | 返回值 | 说明 |
|
||||
| :----- | :----------------------------: | --------------------------------------: |
|
||||
| result | 生成的图片base64或图片临时地址 | 返回二维码路径 注：_clearCode()后返回空 |
|
||||
|
||||
### 感谢
|
||||
|
||||
[uni-app](https://uniapp.dcloud.io/ "uni-app")
|
||||
[qrcode](https://github.com/aralejs/qrcode "qrcode")
|
||||
@ -0,0 +1,205 @@
|
||||
<template xlang="wxml" minapp="mpvue">
|
||||
<view class="geek-qrcode">
|
||||
<canvas class="geek-qrcode-canvas" :canvas-id="cid" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
<image v-show="show" :src="result" :style="{width:cpSize+'px',height:cpSize+'px'}" />
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import QRCode from "./qrcode.js"
|
||||
let qrcode
|
||||
export default {
|
||||
name: "geek-qrcode",
|
||||
props: {
|
||||
cid: {
|
||||
type: String,
|
||||
default: 'geek-qrcode-canvas'
|
||||
},
|
||||
size: {
|
||||
type: Number,
|
||||
default: 200
|
||||
},
|
||||
unit: {
|
||||
type: String,
|
||||
default: 'upx'
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
val: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
background: {
|
||||
type: String,
|
||||
default: '#ffffff'
|
||||
},
|
||||
foreground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
pdground: {
|
||||
type: String,
|
||||
default: '#000000'
|
||||
},
|
||||
icon: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
iconSize: {
|
||||
type: Number,
|
||||
default: 40
|
||||
},
|
||||
lv: {
|
||||
type: Number,
|
||||
default: 3
|
||||
},
|
||||
onval: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
loadMake: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
usingComponents: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
showLoading: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
loadingText: {
|
||||
type: String,
|
||||
default: '二维码生成中'
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
result: '',
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
_makeCode() {
|
||||
let that = this
|
||||
if (!this._empty(this.val)) {
|
||||
qrcode = new QRCode({
|
||||
context: that, // 上下文环境
|
||||
canvasId:that.cid, // canvas-id
|
||||
usingComponents: that.usingComponents, // 是否是自定义组件
|
||||
showLoading: that.showLoading, // 是否显示loading
|
||||
loadingText: that.loadingText, // loading文字
|
||||
text: that.val, // 生成内容
|
||||
size: that.cpSize, // 二维码大小
|
||||
background: that.background, // 背景色
|
||||
foreground: that.foreground, // 前景色
|
||||
pdground: that.pdground, // 定位角点颜色
|
||||
correctLevel: that.lv, // 容错级别
|
||||
image: that.icon, // 二维码图标
|
||||
imageSize: that.iconSize,// 二维码图标大小
|
||||
cbResult: function (res) { // 生成二维码的回调
|
||||
that._result(res)
|
||||
},
|
||||
});
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '二维码内容不能为空',
|
||||
icon: 'none',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
},
|
||||
_clearCode() {
|
||||
this._result('')
|
||||
qrcode.clear()
|
||||
},
|
||||
_saveCode() {
|
||||
let that = this;
|
||||
if (this.result != "") {
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: that.result,
|
||||
success: function () {
|
||||
uni.showToast({
|
||||
title: '二维码保存成功',
|
||||
icon: 'success',
|
||||
duration: 2000
|
||||
});
|
||||
}
|
||||
});
|
||||
}
|
||||
},
|
||||
_result(res) {
|
||||
this.result = res;
|
||||
this.$emit('result', res)
|
||||
},
|
||||
_empty(v) {
|
||||
let tp = typeof v,
|
||||
rt = false;
|
||||
if (tp == "number" && String(v) == "") {
|
||||
rt = true
|
||||
} else if (tp == "undefined") {
|
||||
rt = true
|
||||
} else if (tp == "object") {
|
||||
if (JSON.stringify(v) == "{}" || JSON.stringify(v) == "[]" || v == null) rt = true
|
||||
} else if (tp == "string") {
|
||||
if (v == "" || v == "undefined" || v == "null" || v == "{}" || v == "[]") rt = true
|
||||
} else if (tp == "function") {
|
||||
rt = false
|
||||
}
|
||||
return rt
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
size: function (n, o) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
this.cSize = n
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 100);
|
||||
}
|
||||
}
|
||||
},
|
||||
val: function (n, o) {
|
||||
if (this.onval) {
|
||||
if (n != o && !this._empty(n)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
cpSize() {
|
||||
if(this.unit == "upx"){
|
||||
return uni.upx2px(this.size)
|
||||
}else{
|
||||
return this.size
|
||||
}
|
||||
}
|
||||
},
|
||||
mounted: function () {
|
||||
if (this.loadMake) {
|
||||
if (!this._empty(this.val)) {
|
||||
setTimeout(() => {
|
||||
this._makeCode()
|
||||
}, 0);
|
||||
}
|
||||
}
|
||||
},
|
||||
}
|
||||
</script>
|
||||
<style>
|
||||
.geek-qrcode {
|
||||
position: relative;
|
||||
}
|
||||
.geek-qrcode-canvas {
|
||||
position: fixed;
|
||||
top: -99999upx;
|
||||
left: -99999upx;
|
||||
z-index: -99999;
|
||||
}
|
||||
</style>
|
||||
1206
boyue-app/src/components/geek-xd/components/geek-qrcode/qrcode.js
Normal file
1206
boyue-app/src/components/geek-xd/components/geek-qrcode/qrcode.js
Normal file
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,84 @@
|
||||
<template>
|
||||
<view :style="labelStyle" class="title">{{ label }}</view>
|
||||
<view :style="numberStyle" class="number">{{ formatNumber(number,props.place) }}</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
label: {
|
||||
type: String,
|
||||
default: "订单数量"
|
||||
},
|
||||
width: {
|
||||
type: Number,
|
||||
default: 300
|
||||
},
|
||||
labelColor: {
|
||||
type: String,
|
||||
default: '#white'
|
||||
},
|
||||
labelSize: {
|
||||
type: Number,
|
||||
default: 16
|
||||
},
|
||||
number: {
|
||||
type: Number,
|
||||
default: 80
|
||||
},
|
||||
numberColor: {
|
||||
type: String,
|
||||
default: 'red'
|
||||
},
|
||||
numberSize: {
|
||||
type: Number,
|
||||
default: 20
|
||||
},
|
||||
place: {
|
||||
type: Number,
|
||||
default: 2
|
||||
}
|
||||
})
|
||||
const labelStyle = computed(() => {
|
||||
return {
|
||||
width: `${props.width}rpx`,
|
||||
color: props.labelColor,
|
||||
fontSize: `${props.labelSize}px`
|
||||
}
|
||||
})
|
||||
|
||||
const numberStyle = computed(() => {
|
||||
return {
|
||||
width: `${props.width}rpx`,
|
||||
color: props.numberColor,
|
||||
fontSize: `${props.numberSize}px`
|
||||
}
|
||||
})
|
||||
|
||||
function formatNumber(num,place) {
|
||||
|
||||
let fixedNum = Number(num).toFixed(place); // 将数字保留两位小数
|
||||
let parts = fixedNum.split('.'); // 拆分整数部分和小数部分
|
||||
let integerPart = parts[0]; // 整数部分
|
||||
let decimalPart = parts[1]; // 小数部分
|
||||
|
||||
// 使用padStart方法补0到小数部分
|
||||
decimalPart = decimalPart.padStart(place, '0');
|
||||
|
||||
return integerPart + '.' + decimalPart;
|
||||
}
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.title {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.number {
|
||||
text-align: center;
|
||||
}
|
||||
</style>
|
||||
|
||||
18
boyue-app/src/components/geek-xd/types/index.ts
Normal file
18
boyue-app/src/components/geek-xd/types/index.ts
Normal file
@ -0,0 +1,18 @@
|
||||
export interface Menu {
|
||||
icon: string,
|
||||
label: string
|
||||
}
|
||||
|
||||
export interface Commodity {
|
||||
img: string,
|
||||
title: string,
|
||||
subTitle?: string,
|
||||
price: number
|
||||
}
|
||||
|
||||
export interface CommodityOrder extends Commodity {
|
||||
shop: string,
|
||||
status: string,
|
||||
num: number,
|
||||
label?:string
|
||||
}
|
||||
320
boyue-app/src/components/qiun-data-charts/changelog.md
Normal file
320
boyue-app/src/components/qiun-data-charts/changelog.md
Normal file
@ -0,0 +1,320 @@
|
||||
## 2.5.0-20230101（2023-01-01）
|
||||
- 秋云图表组件 修改条件编译顺序，确保uniapp的cli方式的项目依赖不完整时可以正常显示
|
||||
- 秋云图表组件 恢复props属性directory的使用，以修复vue3项目中，开启echarts后，echarts目录识别错误的bug
|
||||
- uCharts.js 修复区域图、混合图只有一个数据时图表显示不正确的bug
|
||||
- uCharts.js 修复折线图、区域图中时间轴类别图表tooltip指示点显示不正确的bug
|
||||
- uCharts.js 修复x轴使用labelCount时，并且boundaryGap = 'justify' 并且关闭Y轴显示的时候，最后一个坐标值不显示的bug
|
||||
- uCharts.js 修复折线图只有一组数据时 ios16 渲染颜色不正确的bug
|
||||
- uCharts.js 修复玫瑰图半径显示不正确的bug
|
||||
- uCharts.js 柱状图、山峰图增加正负图功能，y轴网格如果需要显示0轴则由 min max 及 splitNumber 确定，后续版本优化自动显示0轴
|
||||
- uCharts.js 柱状图column增加 opts.extra.column.labelPosition，数据标签位置，有效值为 outside外部, insideTop内顶部, center内中间, bottom内底部
|
||||
- uCharts.js 雷达图radar增加 opts.extra.radar.labelShow，否显示各项标识文案是，默认true
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.boxPadding，提示窗边框填充距离，默认3px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.fontSize，提示窗字体大小配置，默认13px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.lineHeight，提示窗文字行高，默认20px
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShow，是否显示左侧图例，默认true
|
||||
- uCharts.js 提示窗tooltip增加 opts.extra.tooltip.legendShape，图例形状，图例标识样式，有效值为 auto自动跟随图例, diamond◆, circle●, triangle▲, square■, rect▬, line-
|
||||
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelFontSize，字体大小配置，默认13px
|
||||
- uCharts.js 标记线markLine增加 opts.extra.markLine.labelPadding，标签边框内填充距离，默认6px
|
||||
- uCharts.js 折线图line增加 opts.extra.line.linearType，渐变色类型，可选值 none关闭渐变色，custom 自定义渐变色。使用自定义渐变色时请赋值serie.linearColor作为颜色值
|
||||
- uCharts.js 折线图line增加 serie.linearColor，渐变色数组，格式为2维数组[起始位置，颜色值]，例如[[0,'#0EE2F8'],[0.3,'#2BDCA8'],[0.6,'#1890FF'],[1,'#9A60B4']]
|
||||
- uCharts.js 折线图line增加 opts.extra.line.onShadow，是否开启折线阴影，开启后请赋值serie.setShadow阴影设置
|
||||
- uCharts.js 折线图line增加 serie.setShadow，阴影配置，格式为4位数组：[offsetX,offsetY,blur,color]
|
||||
- uCharts.js 折线图line增加 opts.extra.line.animation，动画效果方向，可选值为vertical 垂直动画效果，horizontal 水平动画效果
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.lineHeight，X轴字体行高，默认20px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.marginTop，X轴文字距离轴线的距离，默认0px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.title，当前X轴标题
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontSize，标题字体大小，默认13px
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetY，标题纵向偏移距离，负数为向上偏移，正数向下偏移
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleOffsetX，标题横向偏移距离，负数为向左偏移，正数向右偏移
|
||||
- uCharts.js X轴xAxis增加 opts.xAxis.titleFontColor，标题字体颜色，默认#666666
|
||||
|
||||
## 报错TypeError: Cannot read properties of undefined (reading 'length')
|
||||
- 如果是uni-modules版本组件，请先登录HBuilderX账号；
|
||||
- 在HBuilderX中的manifest.json，点击重新获取uniapp的appid，或者删除appid重新粘贴，重新运行；
|
||||
- 如果是cli项目请使用码云上的非uniCloud版本组件；
|
||||
- 或者添加uniCloud的依赖；
|
||||
- 或者使用原生uCharts；
|
||||
## 2.4.5-20221130（2022-11-30）
|
||||
- uCharts.js 优化tooltip当文字很多变为左侧显示时，如果画布仍显显示不下，提示框错位置变为以左侧0位置起画
|
||||
- uCharts.js 折线图修复特殊情况下只有单点数据，并改变线宽后点变为圆形的bug
|
||||
- uCharts.js 修复Y轴disabled启用后无效并报错的bug
|
||||
- uCharts.js 修复仪表盘起始结束角度特殊情况下显示不正确的bug
|
||||
- uCharts.js 雷达图新增参数 opts.extra.radar.radius , 自定义雷达图半径
|
||||
- uCharts.js 折线图、区域图增加tooltip指示点，opts.extra.line.activeType/opts.extra.area.activeType，可选值"none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
|
||||
## 2.4.4-20221102（2022-11-02）
|
||||
- 秋云图表组件 修复使用echarts时reload、reshow无法调用重新渲染的bug，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/40)
|
||||
- 秋云图表组件 修复使用echarts时，初始化时宽高不正确的bug，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/42)
|
||||
- 秋云图表组件 修复uniapp的h5使用history模式时，无法加载echarts的bug
|
||||
- 秋云图表组件 小程序端@complete、@scrollLeft、@scrollRight、@getTouchStart、@getTouchMove、@getTouchEnd事件增加opts参数传出，方便一些特殊需求的交互获取数据。
|
||||
|
||||
- uCharts.js 修复calTooltipYAxisData方法内formatter格式化方法未与y轴方法同步的问题，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/43)
|
||||
- uCharts.js 地图新增参数opts.series[i].fillOpacity，以透明度方式来设置颜色过度效果，[详见码云PR](https://gitee.com/uCharts/uCharts/pulls/38)
|
||||
- uCharts.js 地图新增参数opts.extra.map.active，是否启用点击激活变色
|
||||
- uCharts.js 地图新增参数opts.extra.map.activeTextColor，是否启用点击激活变色
|
||||
- uCharts.js 地图新增渲染完成事件renderComplete
|
||||
- uCharts.js 漏斗图修复当部分数据相同时tooltip提示窗点击错误的bug
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerText 居中标签文案
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerTextSize 居中标签文案字体大小，默认opts.fontSize
|
||||
- uCharts.js 漏斗图新增参数series.data[i].centerTextColor 居中标签文案字体颜色，默认#FFFFFF
|
||||
- uCharts.js 漏斗图新增参数opts.extra.funnel.minSize 最小值的最小宽度，默认0
|
||||
- uCharts.js 进度条新增参数opts.extra.arcbar.direction，动画方向，可选值为cw顺时针、ccw逆时针
|
||||
- uCharts.js 混合图新增参数opts.extra.mix.line.width，折线的宽度，默认2
|
||||
- uCharts.js 修复tooltip开启horizentalLine水平横线标注时，图表显示错位的bug
|
||||
- uCharts.js 优化tooltip当文字很多变为左侧显示时，如果画布仍显显示不下，提示框错位置变为以左侧0位置起画
|
||||
- uCharts.js 修复开启滚动条后X轴文字超出绘图区域后的隐藏逻辑
|
||||
- uCharts.js 柱状图、条状图修复堆叠模式不能通过{value,color}赋值单个柱子颜色的问题
|
||||
- uCharts.js 气泡图修复不识别series.textSize和series.textColor的bug
|
||||
|
||||
## 报错TypeError: Cannot read properties of undefined (reading 'length')
|
||||
1. 如果是uni-modules版本组件，请先登录HBuilderX账号；
|
||||
2. 在HBuilderX中的manifest.json，点击重新获取uniapp的appid，或者删除appid重新粘贴，重新运行；
|
||||
3. 如果是cli项目请使用码云上的非uniCloud版本组件；
|
||||
4. 或者添加uniCloud的依赖；
|
||||
5. 或者使用原生uCharts；
|
||||
## 2.4.3-20220505（2022-05-05）
|
||||
- 秋云图表组件 修复开启canvas2d后将series赋值为空数组显示加载图标时，再次赋值后画布闪动的bug
|
||||
- 秋云图表组件 修复升级hbx最新版后ECharts的highlight方法报错的bug
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.gridEval，数据点位网格抽希，默认1
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabel， 是否显示刻度点值，默认false
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.axisLabelTofix，刻度点值小数位数，默认0
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointShow，是否显示末端刻度圆点，默认false
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointRadius，刻度圆点的半径，默认3
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.labelPointColor，刻度圆点的颜色，默认#cccccc
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.linearType，渐变色类型，可选值"none"关闭渐变,"custom"开启渐变
|
||||
- uCharts.js 雷达图新增参数opts.extra.radar.customColor，自定义渐变颜色，数组类型对应series的数组长度以匹配不同series颜色的不同配色方案，例如["#FA7D8D", "#EB88E2"]
|
||||
- uCharts.js 雷达图优化支持series.textColor、series.textSize属性
|
||||
- uCharts.js 柱状图中温度计式图标，优化支持全圆角类型，修复边框有缝隙的bug，详见官网【演示】中的温度计图表
|
||||
- uCharts.js 柱状图新增参数opts.extra.column.activeWidth，当前点击柱状图的背景宽度，默认一个单元格单位
|
||||
- uCharts.js 混合图增加opts.extra.mix.area.gradient 区域图是否开启渐变色
|
||||
- uCharts.js 混合图增加opts.extra.mix.area.opacity 区域图透明度，默认0.2
|
||||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图，增加opts.series[0].data[i].labelText，自定义标签文字，避免formatter格式化的繁琐，详见官网【演示】中的饼图
|
||||
- uCharts.js 饼图、圆环图、玫瑰图、漏斗图，增加opts.series[0].data[i].labelShow，自定义是否显示某一个指示标签，避免因饼图类别太多导致标签重复或者居多导致图形变形的问题，详见官网【演示】中的饼图
|
||||
- uCharts.js 增加opts.series[i].legendText/opts.series[0].data[i].legendText（与series.name同级）自定义图例显示文字的方法
|
||||
- uCharts.js 优化X轴、Y轴formatter格式化方法增加形参，统一为fromatter:function(value,index,opts){}
|
||||
- uCharts.js 修复横屏模式下无法使用双指缩放方法的bug
|
||||
- uCharts.js 修复当只有一条数据或者多条数据值相等的时候Y轴自动计算的最大值错误的bug
|
||||
- 【官网模板】增加外部自定义图例与图表交互的例子，[点击跳转](https://www.ucharts.cn/v2/#/layout/info?id=2)
|
||||
|
||||
## 注意：非unimodules 版本如因更新 hbx 至 3.4.7 导致报错如下，请到码云更新非 unimodules 版本组件，[点击跳转](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)
|
||||
> Error in callback for immediate watcher "uchartsOpts": "SyntaxError: Unexpected token u in JSON at position 0"
|
||||
## 2.4.2-20220421（2022-04-21）
|
||||
- 秋云图表组件 修复HBX升级3.4.6.20220420版本后echarts报错的问题
|
||||
## 2.4.2-20220420（2022-04-20）
|
||||
## 重要！此版本uCharts新增了很多功能，修复了诸多已知问题
|
||||
- 秋云图表组件 新增onzoom开启双指缩放功能（仅uCharts），前提需要直角坐标系类图表类型，并且ontouch为true、opts.enableScroll为true，详见实例项目K线图
|
||||
- 秋云图表组件 新增optsWatch是否监听opts变化，关闭optsWatch后，动态修改opts不会触发图表重绘
|
||||
- 秋云图表组件 修复开启canvas2d功能后，动态更新数据后画布闪动的bug
|
||||
- 秋云图表组件 去除directory属性，改为自动获取echarts.min.js路径（升级不受影响）
|
||||
- 秋云图表组件 增加getImage()方法及@getImage事件，通过ref调用getImage()方法获，触发@getImage事件获取当前画布的base64图片文件流。
|
||||
- 秋云图表组件 支付宝、字节跳动、飞书、快手小程序支持开启canvas2d同层渲染设置。
|
||||
- 秋云图表组件 新增加【非uniCloud】版本组件，避免有些不需要uniCloud的使用组件发布至小程序需要提交隐私声明问题，请到码云[【非uniCloud版本】](https://gitee.com/uCharts/uCharts/tree/master/uni-app/uCharts-%E7%BB%84%E4%BB%B6)，或npm[【非uniCloud版本】](https://www.npmjs.com/package/@qiun/uni-ucharts)下载使用。
|
||||
- uCharts.js 新增dobuleZoom双指缩放功能
|
||||
- uCharts.js 新增山峰图type="mount"，数据格式为饼图类格式，不需要传入categories，具体详见新版官网在线演示
|
||||
- uCharts.js 修复折线图当数据中存在null时tooltip报错的bug
|
||||
- uCharts.js 修复饼图类当画布比较小时自动计算的半径是负数报错的bug
|
||||
- uCharts.js 统一各图表类型的series.formatter格式化方法的形参为(val, index, series, opts)，方便格式化时有更多参数可用
|
||||
- uCharts.js 标记线功能增加labelText自定义显示文字，增加labelAlign标签显示位置（左侧或右侧），增加标签显示位置微调labelOffsetX、labelOffsetY
|
||||
- uCharts.js 修复条状图当数值很小时开启圆角后样式错误的bug
|
||||
- uCharts.js 修复X轴开启disabled后，X轴仍占用空间的bug
|
||||
- uCharts.js 修复X轴开启滚动条并且开启rotateLabel后，X轴文字与滚动条重叠的bug
|
||||
- uCharts.js 增加X轴rotateAngle文字旋转自定义角度，取值范围(-90至90)
|
||||
- uCharts.js 修复地图文字标签层级显示不正确的bug
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图当数据全部为0的时候不显示数据标签的bug
|
||||
- uCharts.js 修复当opts.padding上边距为0时，Y轴顶部刻度标签位置不正确的bug
|
||||
|
||||
## 另外我们还开发了各大原生小程序组件，已发布至码云和npm
|
||||
[https://gitee.com/uCharts/uCharts](https://gitee.com/uCharts/uCharts)
|
||||
[https://www.npmjs.com/~qiun](https://www.npmjs.com/~qiun)
|
||||
|
||||
## 对于原生uCharts文档我们已上线新版官方网站，详情点击下面链接进入官网
|
||||
[https://www.uCharts.cn/v2/](https://www.ucharts.cn/v2/)
|
||||
## 2.3.7-20220122（2022-01-22）
|
||||
## 重要！使用vue3编译，请使用cli模式并升级至最新依赖，HbuilderX编译需要使用3.3.8以上版本
|
||||
- uCharts.js 修复uni-app平台组件模式使用vue3编译到小程序报错的bug。
|
||||
## 2.3.7-20220118（2022-01-18）
|
||||
## 注意，使用vue3的前提是需要3.3.8.20220114-alpha版本的HBuilder！
|
||||
## 2.3.67-20220118（2022-01-18）
|
||||
- 秋云图表组件 组件初步支持vue3，全端编译会有些问题，具体详见下面修改：
|
||||
1. 小程序端运行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new uni_modules_qiunDataCharts_js_sdk_uCharts_uCharts.uCharts，将.uCharts去掉。
|
||||
2. 小程序端发行时，在uni_modules文件夹的qiun-data-charts.js中搜索 new e.uCharts，将.uCharts去掉，变为 new e。
|
||||
3. 如果觉得上述步骤比较麻烦，如果您的项目只编译到小程序端，可以修改u-charts.js最后一行导出方式，将 export default uCharts;变更为 export default { uCharts: uCharts }; 这样变更后，H5和App端的renderjs会有问题，请开发者自行选择。（此问题非组件问题，请等待DC官方修复Vue3的小程序端）
|
||||
## 2.3.6-20220111（2022-01-11）
|
||||
- 秋云图表组件 修改组件 props 属性中的 background 默认值为 rgba(0,0,0,0)
|
||||
## 2.3.6-20211201（2021-12-01）
|
||||
- uCharts.js 修复bar条状图开启圆角模式时，值很小时圆角渲染错误的bug
|
||||
## 2.3.5-20211014（2021-10-15）
|
||||
- uCharts.js 增加vue3的编译支持（仅原生uCharts，qiun-data-charts组件后续会支持，请关注更新）
|
||||
## 2.3.4-20211012（2021-10-12）
|
||||
- 秋云图表组件 修复 mac os x 系统 mouseover 事件丢失的 bug
|
||||
## 2.3.3-20210706（2021-07-06）
|
||||
- uCharts.js 增加雷达图开启数据点值（opts.dataLabel）的显示
|
||||
## 2.3.2-20210627（2021-06-27）
|
||||
- 秋云图表组件 修复tooltipCustom个别情况下传值不正确报错TypeError: Cannot read property 'name' of undefined的bug
|
||||
## 2.3.1-20210616（2021-06-16）
|
||||
- uCharts.js 修复圆角柱状图使用4角圆角时，当数值过大时不正确的bug
|
||||
## 2.3.0-20210612（2021-06-12）
|
||||
- uCharts.js 【重要】uCharts增加nvue兼容，可在nvue项目中使用gcanvas组件渲染uCharts，[详见码云uCharts-demo-nvue](https://gitee.com/uCharts/uCharts)
|
||||
- 秋云图表组件 增加tapLegend属性，是否开启图例点击交互事件
|
||||
- 秋云图表组件 getIndex事件中增加返回uCharts实例中的opts参数，以便在页面中调用参数
|
||||
- 示例项目 pages/other/other.vue增加app端自定义tooltip的方法，详见showOptsTooltip方法
|
||||
## 2.2.1-20210603（2021-06-03）
|
||||
- uCharts.js 修复饼图、圆环图、玫瑰图，当起始角度不为0时，tooltip位置不准确的bug
|
||||
- uCharts.js 增加温度计式柱状图开启顶部半圆形的配置
|
||||
## 2.2.0-20210529（2021-05-29）
|
||||
- uCharts.js 增加条状图type="bar"
|
||||
- 示例项目 pages/ucharts/ucharts.vue增加条状图的demo
|
||||
## 2.1.7-20210524（2021-05-24）
|
||||
- uCharts.js 修复大数据量模式下曲线图不平滑的bug
|
||||
## 2.1.6-20210523（2021-05-23）
|
||||
- 秋云图表组件 修复小程序端开启滚动条更新数据后滚动条位置不符合预期的bug
|
||||
## 2.1.5-2021051702（2021-05-17）
|
||||
- uCharts.js 修复自定义Y轴min和max值为0时不能正确显示的bug
|
||||
## 2.1.5-20210517（2021-05-17）
|
||||
- uCharts.js 修复Y轴自定义min和max时，未按指定的最大值最小值显示坐标轴刻度的bug
|
||||
## 2.1.4-20210516（2021-05-16）
|
||||
- 秋云图表组件 优化onWindowResize防抖方法
|
||||
- 秋云图表组件 修复APP端uCharts更新数据时，清空series显示loading图标后再显示图表，图表抖动的bug
|
||||
- uCharts.js 修复开启canvas2d后，x轴、y轴、series自定义字体大小未按比例缩放的bug
|
||||
- 示例项目 修复format-e.vue拼写错误导致app端使用uCharts渲染图表
|
||||
## 2.1.3-20210513（2021-05-13）
|
||||
- 秋云图表组件 修改uCharts变更chartData数据为updateData方法，支持带滚动条的数据动态打点
|
||||
- 秋云图表组件 增加onWindowResize防抖方法 fix by ど誓言，如尘般染指流年づ
|
||||
- 秋云图表组件 H5或者APP变更chartData数据显示loading图表时，原数据闪现的bug
|
||||
- 秋云图表组件 props增加errorReload禁用错误点击重新加载的方法
|
||||
- uCharts.js 增加tooltip显示category（x轴对应点位）标题的功能，opts.extra.tooltip.showCategory，默认为false
|
||||
- uCharts.js 修复mix混合图只有柱状图时，tooltip的分割线显示位置不正确的bug
|
||||
- uCharts.js 修复开启滚动条，图表在拖动中动态打点，滚动条位置不正确的bug
|
||||
- uCharts.js 修复饼图类数据格式为echarts数据格式，series为空数组报错的bug
|
||||
- 示例项目 修改uCharts.js更新到v2.1.2版本后，@getIndex方法获取索引值变更为e.currentIndex.index
|
||||
- 示例项目 pages/updata/updata.vue增加滚动条拖动更新（数据动态打点）的demo
|
||||
- 示例项目 pages/other/other.vue增加errorReload禁用错误点击重新加载的demo
|
||||
## 2.1.2-20210509（2021-05-09）
|
||||
秋云图表组件 修复APP端初始化时就传入chartData或lacaldata不显示图表的bug
|
||||
## 2.1.1-20210509（2021-05-09）
|
||||
- 秋云图表组件 变更ECharts的eopts配置在renderjs内执行，支持在config-echarts.js配置文件内写function配置。
|
||||
- 秋云图表组件 修复APP端报错Prop being mutated: "onmouse"错误的bug。
|
||||
- 秋云图表组件 修复APP端报错Error: Not Found：Page[6][-1,27] at view.umd.min.js:1的bug。
|
||||
## 2.1.0-20210507（2021-05-07）
|
||||
- 秋云图表组件 修复初始化时就有数据或者数据更新的时候loading加载动画闪动的bug
|
||||
- uCharts.js 修复x轴format方法categories为字符串类型时返回NaN的bug
|
||||
- uCharts.js 修复series.textColor、legend.fontColor未执行全局默认颜色的bug
|
||||
## 2.1.0-20210506（2021-05-06）
|
||||
- 秋云图表组件 修复极个别情况下报错item.properties undefined的bug
|
||||
- 秋云图表组件 修复极个别情况下关闭加载动画reshow不起作用，无法显示图表的bug
|
||||
- 示例项目 pages/ucharts/ucharts.vue 增加时间轴折线图（type="tline"）、时间轴区域图（type="tarea"）、散点图（type="scatter"）、气泡图demo（type="bubble"）、倒三角形漏斗图（opts.extra.funnel.type="triangle"）、金字塔形漏斗图（opts.extra.funnel.type="pyramid"）
|
||||
- 示例项目 pages/format-u/format-u.vue 增加X轴format格式化示例
|
||||
- uCharts.js 升级至v2.1.0版本
|
||||
- uCharts.js 修复 玫瑰图面积模式点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 玫瑰图点击图例，只剩一个类别显示空白的bug
|
||||
- uCharts.js 修复 饼图类图点击图例，其他图表tooltip位置某些情况下不准的bug
|
||||
- uCharts.js 修复 x轴为矢量轴（时间轴）情况下，点击tooltip位置不正确的bug
|
||||
- uCharts.js 修复 词云图获取点击索引偶尔不准的bug
|
||||
- uCharts.js 增加 直角坐标系图表X轴format格式化方法（原生uCharts.js用法请使用formatter）
|
||||
- uCharts.js 增加 漏斗图扩展配置，倒三角形（opts.extra.funnel.type="triangle"），金字塔形（opts.extra.funnel.type="pyramid"）
|
||||
- uCharts.js 增加 散点图（opts.type="scatter"）、气泡图（opts.type="bubble"）
|
||||
- 后期计划 完善散点图、气泡图，增加markPoints标记点，增加横向条状图。
|
||||
## 2.0.0-20210502（2021-05-02）
|
||||
- uCharts.js 修复词云图获取点击索引不正确的bug
|
||||
## 2.0.0-20210501（2021-05-01）
|
||||
- 秋云图表组件 修复QQ小程序、百度小程序在关闭动画效果情况下，v-for循环使用图表，显示不正确的bug
|
||||
## 2.0.0-20210426（2021-04-26）
|
||||
- 秋云图表组件 修复QQ小程序不支持canvas2d的bug
|
||||
- 秋云图表组件 修复钉钉小程序某些情况点击坐标计算错误的bug
|
||||
- uCharts.js 增加 extra.column.categoryGap 参数，柱状图类每个category点位（X轴点）柱子组之间的间距
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetY 参数，标题纵向偏移距离，负数为向上偏移，正数向下偏移
|
||||
- uCharts.js 增加 yAxis.data[i].titleOffsetX 参数，标题横向偏移距离，负数为向左偏移，正数向右偏移
|
||||
- uCharts.js 增加 extra.gauge.labelOffset 参数，仪表盘标签文字径向便宜距离，默认13px
|
||||
## 2.0.0-20210422-2（2021-04-22）
|
||||
秋云图表组件 修复 formatterAssign 未判断 args[key] == null 的情况导致栈溢出的 bug
|
||||
## 2.0.0-20210422（2021-04-22）
|
||||
- 秋云图表组件 修复H5、APP、支付宝小程序、微信小程序canvas2d模式下横屏模式的bug
|
||||
## 2.0.0-20210421（2021-04-21）
|
||||
- uCharts.js 修复多行图例的情况下，图例在上方或者下方时，图例float为左侧或者右侧时，第二行及以后的图例对齐方式不正确的bug
|
||||
## 2.0.0-20210420（2021-04-20）
|
||||
- 秋云图表组件 修复微信小程序开启canvas2d模式后，windows版微信小程序不支持canvas2d模式的bug
|
||||
- 秋云图表组件 修改非uni_modules版本为v2.0版本qiun-data-charts组件
|
||||
## 2.0.0-20210419（2021-04-19）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复混合图中柱状图单独设置颜色不生效的bug
|
||||
- uCharts.js 修复多Y轴单独设置fontSize时，开启canvas2d后，未对应放大字体的bug
|
||||
## 2.0.0-20210418（2021-04-18）
|
||||
- 秋云图表组件 增加directory配置，修复H5端history模式下如果发布到二级目录无法正确加载echarts.min.js的bug
|
||||
## 2.0.0-20210416（2021-04-16）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复APP端某些情况下报错`Not Found Page`的bug，fix by 高级bug开发技术员
|
||||
- 示例项目 修复APP端v-for循环某些情况下报错`Not Found Page`的bug，fix by 高级bug开发技术员
|
||||
- uCharts.js 修复非直角坐标系tooltip提示窗右侧超出未变换方向显示的bug
|
||||
## 2.0.0-20210415（2021-04-15）
|
||||
- 秋云图表组件 修复H5端发布到二级目录下echarts无法加载的bug
|
||||
- 秋云图表组件 修复某些情况下echarts.off('finished')移除监听事件报错的bug
|
||||
## 2.0.0-20210414（2021-04-14）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，如仍不好用，请重启电脑；
|
||||
## 如果是cli项目，请尝试清理node_modules，重新install，还不行就删除项目，再重新install。
|
||||
## 此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## 其他图表不显示问题详见[常见问题选项卡](https://demo.ucharts.cn)
|
||||
## <font color=#FF0000> 新手请先完整阅读帮助文档及常见问题3遍，右侧蓝色按钮示例项目请看2遍！ </font>
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在项目中的应用参见 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复H5端在cli项目下ECharts引用地址错误的bug
|
||||
- 示例项目 增加ECharts的formatter用法的示例(详见示例项目format-e.vue)
|
||||
- uCharts.js 增加圆环图中心背景色的配置extra.ring.centerColor
|
||||
- uCharts.js 修复微信小程序安卓端柱状图开启透明色后显示不正确的bug
|
||||
## 2.0.0-20210413（2021-04-13）
|
||||
- 秋云图表组件 修复百度小程序多个图表真机未能正确获取根元素dom尺寸的bug
|
||||
- 秋云图表组件 修复百度小程序横屏模式方向不正确的bug
|
||||
- 秋云图表组件 修改ontouch时，@getTouchStart@getTouchMove@getTouchEnd的触发条件
|
||||
- uCharts.js 修复饼图类数据格式series属性不生效的bug
|
||||
- uCharts.js 增加时序区域图 详见示例项目中ucharts.vue
|
||||
## 2.0.0-20210412-2（2021-04-12）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX。如仍不好用，请重启电脑，此问题已于DCloud官方确认，HBuilderX下个版本会修复。
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- 秋云图表组件 修复uCharts在APP端横屏模式下不能正确渲染的bug
|
||||
- 示例项目 增加ECharts柱状图渐变色、圆角柱状图、横向柱状图（条状图）的示例
|
||||
## 2.0.0-20210412（2021-04-12）
|
||||
- 秋云图表组件 修复created中判断echarts导致APP端无法识别，改回mounted中判断echarts初始化
|
||||
- uCharts.js 修复2d模式下series.textOffset未乘像素比的bug
|
||||
## 2.0.0-20210411（2021-04-11）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧绿色【使用HBuilderX导入插件】即可使用，示例项目请点击右侧蓝色按钮【使用HBuilderX导入示例项目】。
|
||||
## 初次使用如果提示未注册<qiun-data-charts>组件，请重启HBuilderX，并清空小程序开发者工具缓存。
|
||||
## [DEMO演示及在线生成工具（v2.0文档）https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## [图表组件在uniCloudAdmin中的应用 UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 折线图区域图增加connectNulls断点续连的功能，详见示例项目中ucharts.vue
|
||||
- 秋云图表组件 变更初始化方法为created，变更type2d默认值为true，优化2d模式下组件初始化后dom获取不到的bug
|
||||
- 秋云图表组件 修复左右布局时，右侧图表点击坐标错误的bug，修复tooltip柱状图自定义颜色显示object的bug
|
||||
## 2.0.0-20210410（2021-04-10）
|
||||
- 修复左右布局时，右侧图表点击坐标错误的bug，修复柱状图自定义颜色tooltip显示object的bug
|
||||
- 增加标记线及柱状图自定义颜色的demo
|
||||
## 2.0.0-20210409（2021-04-08）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧【使用HBuilderX导入插件】即可体验，DEMO演示及在线生成工具（v2.0文档）[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
- uCharts.js 修复钉钉小程序百度小程序measureText不准确的bug，修复2d模式下饼图类activeRadius为按比例放大的bug
|
||||
- 修复组件在支付宝小程序端点击位置不准确的bug
|
||||
## 2.0.0-20210408（2021-04-07）
|
||||
- 修复组件在支付宝小程序端不能显示的bug（目前支付宝小程不能点击交互，后续修复）
|
||||
- uCharts.js 修复高分屏下柱状图类，圆弧进度条 自定义宽度不能按比例放大的bug
|
||||
## 2.0.0-20210407（2021-04-06）
|
||||
## v1.0版本已停更，建议转uni_modules版本组件方式调用，点击右侧【使用HBuilderX导入插件】即可体验，DEMO演示及在线生成工具（v2.0文档）[https://demo.ucharts.cn](https://demo.ucharts.cn)
|
||||
## 增加 通过tofix和unit快速格式化y轴的demo add by `howcode`
|
||||
## 增加 图表组件在uniCloudAdmin中的应用 [UReport数据报表](https://ext.dcloud.net.cn/plugin?id=4651)
|
||||
## 2.0.0-20210406（2021-04-05）
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线，使用方法详见https://demo.ucharts.cn帮助页
|
||||
## 2.0.0（2021-04-05）
|
||||
# 秋云图表组件+uCharts v2.0版本同步上线，使用方法详见https://demo.ucharts.cn帮助页
|
||||
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<view class="container loading1">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading1',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
.container.loading1 {
|
||||
-webkit-transform: rotate(45deg);
|
||||
transform: rotate(45deg);
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading1 .shape1 {
|
||||
-webkit-animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, 16px);
|
||||
transform: translate(16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape2 {
|
||||
-webkit-animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, 16px);
|
||||
transform: translate(-16px, 16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape3 {
|
||||
-webkit-animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(16px, -16px);
|
||||
transform: translate(16px, -16px);
|
||||
}
|
||||
}
|
||||
.loading1 .shape4 {
|
||||
-webkit-animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation1shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation1shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-16px, -16px);
|
||||
transform: translate(-16px, -16px);
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<view class="container loading2">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading2',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading2 {
|
||||
-webkit-transform: rotate(10deg);
|
||||
transform: rotate(10deg);
|
||||
}
|
||||
.container.loading2 .shape {
|
||||
border-radius: 5px;
|
||||
}
|
||||
.container.loading2{
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading2 .shape1 {
|
||||
-webkit-animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, 20px);
|
||||
transform: translate(20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape2 {
|
||||
-webkit-animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, 20px);
|
||||
transform: translate(-20px, 20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape3 {
|
||||
-webkit-animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(20px, -20px);
|
||||
transform: translate(20px, -20px);
|
||||
}
|
||||
}
|
||||
.loading2 .shape4 {
|
||||
-webkit-animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation2shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation2shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-20px, -20px);
|
||||
transform: translate(-20px, -20px);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,173 @@
|
||||
<template>
|
||||
<view class="container loading3">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading3',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading3 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading3 .shape1 {
|
||||
border-top-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape2 {
|
||||
border-top-right-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape3 {
|
||||
border-bottom-left-radius: 10px;
|
||||
}
|
||||
.container.loading3 .shape4 {
|
||||
border-bottom-right-radius: 10px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading3 .shape1 {
|
||||
-webkit-animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape1 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape1 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, 5px);
|
||||
transform: translate(5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape2 {
|
||||
-webkit-animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape2 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape2 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, 5px);
|
||||
transform: translate(-5px, 5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape3 {
|
||||
-webkit-animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape3 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape3 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(5px, -5px);
|
||||
transform: translate(5px, -5px);
|
||||
}
|
||||
}
|
||||
.loading3 .shape4 {
|
||||
-webkit-animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
animation: animation3shape4 0.5s ease 0s infinite alternate;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation3shape4 {
|
||||
from {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
to {
|
||||
-webkit-transform: translate(-5px, -5px);
|
||||
transform: translate(-5px, -5px);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,222 @@
|
||||
<template>
|
||||
<view class="container loading5">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading5',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading5 .shape {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
}
|
||||
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
.loading5 .shape1 {
|
||||
animation: animation5shape1 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, 15px);
|
||||
transform: translate(15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
}
|
||||
.loading5 .shape2 {
|
||||
animation: animation5shape2 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, 15px);
|
||||
transform: translate(-15px, 15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 15px);
|
||||
transform: translate(0, 15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape3 {
|
||||
animation: animation5shape3 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(15px, 0);
|
||||
transform: translate(15px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(15px, -15px);
|
||||
transform: translate(15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
}
|
||||
.loading5 .shape4 {
|
||||
animation: animation5shape4 2s ease 0s infinite reverse;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation5shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -15px);
|
||||
transform: translate(0, -15px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-15px, -15px);
|
||||
transform: translate(-15px, -15px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-15px, 0);
|
||||
transform: translate(-15px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,229 @@
|
||||
<template>
|
||||
<view class="container loading6">
|
||||
<view class="shape shape1"></view>
|
||||
<view class="shape shape2"></view>
|
||||
<view class="shape shape3"></view>
|
||||
<view class="shape shape4"></view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'loading6',
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped="true">
|
||||
.container {
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.container.loading6 {
|
||||
-webkit-animation: rotation 1s infinite;
|
||||
animation: rotation 1s infinite;
|
||||
}
|
||||
.container.loading6 .shape {
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
border-radius: 2px;
|
||||
}
|
||||
.container .shape {
|
||||
position: absolute;
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
border-radius: 1px;
|
||||
}
|
||||
.container .shape.shape1 {
|
||||
left: 0;
|
||||
background-color: #1890FF;
|
||||
}
|
||||
.container .shape.shape2 {
|
||||
right: 0;
|
||||
background-color: #91CB74;
|
||||
}
|
||||
.container .shape.shape3 {
|
||||
bottom: 0;
|
||||
background-color: #FAC858;
|
||||
}
|
||||
.container .shape.shape4 {
|
||||
bottom: 0;
|
||||
right: 0;
|
||||
background-color: #EE6666;
|
||||
}
|
||||
|
||||
|
||||
.loading6 .shape1 {
|
||||
-webkit-animation: animation6shape1 2s linear 0s infinite normal;
|
||||
animation: animation6shape1 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape1 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, 18px);
|
||||
transform: translate(18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
}
|
||||
.loading6 .shape2 {
|
||||
-webkit-animation: animation6shape2 2s linear 0s infinite normal;
|
||||
animation: animation6shape2 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape2 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, 18px);
|
||||
transform: translate(-18px, 18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, 18px);
|
||||
transform: translate(0, 18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape3 {
|
||||
-webkit-animation: animation6shape3 2s linear 0s infinite normal;
|
||||
animation: animation6shape3 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape3 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(18px, 0);
|
||||
transform: translate(18px, 0);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(18px, -18px);
|
||||
transform: translate(18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
}
|
||||
.loading6 .shape4 {
|
||||
-webkit-animation: animation6shape4 2s linear 0s infinite normal;
|
||||
animation: animation6shape4 2s linear 0s infinite normal;
|
||||
}
|
||||
|
||||
@-webkit-keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes animation6shape4 {
|
||||
0% {
|
||||
-webkit-transform: translate(0, 0);
|
||||
transform: translate(0, 0);
|
||||
}
|
||||
25% {
|
||||
-webkit-transform: translate(0, -18px);
|
||||
transform: translate(0, -18px);
|
||||
}
|
||||
50% {
|
||||
-webkit-transform: translate(-18px, -18px);
|
||||
transform: translate(-18px, -18px);
|
||||
}
|
||||
75% {
|
||||
-webkit-transform: translate(-18px, 0);
|
||||
transform: translate(-18px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<view>
|
||||
<Loading1 v-if="loadingType==1"/>
|
||||
<Loading2 v-if="loadingType==2"/>
|
||||
<Loading3 v-if="loadingType==3"/>
|
||||
<Loading4 v-if="loadingType==4"/>
|
||||
<Loading5 v-if="loadingType==5"/>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Loading1 from "./loading1.vue";
|
||||
import Loading2 from "./loading2.vue";
|
||||
import Loading3 from "./loading3.vue";
|
||||
import Loading4 from "./loading4.vue";
|
||||
import Loading5 from "./loading5.vue";
|
||||
export default {
|
||||
components:{Loading1,Loading2,Loading3,Loading4,Loading5},
|
||||
name: 'qiun-loading',
|
||||
props: {
|
||||
loadingType: {
|
||||
type: Number,
|
||||
default: 2
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
|
||||
};
|
||||
},
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,422 @@
|
||||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释，感谢支持开源！
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址：
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 通用配置项
|
||||
|
||||
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
|
||||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||
|
||||
const cfe = {
|
||||
//demotype为自定义图表类型
|
||||
"type": ["pie", "ring", "rose", "funnel", "line", "column", "area", "radar", "gauge","candle","demotype"],
|
||||
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型例如最后的"demotype"
|
||||
"categories": ["line", "column", "area", "radar", "gauge", "candle","demotype"],
|
||||
//instance为实例变量承载属性，option为eopts承载属性，不要删除
|
||||
"instance": {},
|
||||
"option": {},
|
||||
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||||
"formatter":{
|
||||
"tooltipDemo1":function(res){
|
||||
let result = ''
|
||||
for (let i in res) {
|
||||
if (i == 0) {
|
||||
result += res[i].axisValueLabel + '年销售额'
|
||||
}
|
||||
let value = '--'
|
||||
if (res[i].data !== null) {
|
||||
value = res[i].data
|
||||
}
|
||||
// #ifdef H5
|
||||
result += '\n' + res[i].seriesName + '：' + value + ' 万元'
|
||||
// #endif
|
||||
|
||||
// #ifdef APP-PLUS
|
||||
result += '<br/>' + res[i].marker + res[i].seriesName + '：' + value + ' 万元'
|
||||
// #endif
|
||||
}
|
||||
return result;
|
||||
},
|
||||
legendFormat:function(name){
|
||||
return "自定义图例+"+name;
|
||||
},
|
||||
yAxisFormatDemo:function (value, index) {
|
||||
return value + '元';
|
||||
},
|
||||
seriesFormatDemo:function(res){
|
||||
return res.name + '年' + res.value + '元';
|
||||
}
|
||||
},
|
||||
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在eopts参数，会将demotype与eopts中option合并后渲染图表。
|
||||
"demotype":{
|
||||
"color": color,
|
||||
//在这里填写echarts的option即可
|
||||
|
||||
},
|
||||
//下面是自定义配置，请添加项目所需的通用配置
|
||||
"column": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'bar',
|
||||
"data": [],
|
||||
"barwidth": 20,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"line": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'line',
|
||||
"data": [],
|
||||
"barwidth": 20,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"area": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'axis'
|
||||
},
|
||||
"grid": {
|
||||
"top": 30,
|
||||
"bottom": 50,
|
||||
"right": 15,
|
||||
"left": 40
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"toolbox": {
|
||||
"show": false,
|
||||
},
|
||||
"xAxis": {
|
||||
"type": 'category',
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
"boundaryGap": true,
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {
|
||||
"type": 'value',
|
||||
"axisTick": {
|
||||
"show": false,
|
||||
},
|
||||
"axisLabel": {
|
||||
"color": '#666666'
|
||||
},
|
||||
"axisLine": {
|
||||
"lineStyle": {
|
||||
"color": '#CCCCCC'
|
||||
}
|
||||
},
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'line',
|
||||
"data": [],
|
||||
"areaStyle": {},
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"pie": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"grid": {
|
||||
"top": 40,
|
||||
"bottom": 30,
|
||||
"right": 15,
|
||||
"left": 15
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": '50%',
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
},
|
||||
},
|
||||
"ring": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"grid": {
|
||||
"top": 40,
|
||||
"bottom": 30,
|
||||
"right": 15,
|
||||
"left": 15
|
||||
},
|
||||
"legend": {
|
||||
"bottom": 'left',
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": ['40%', '70%'],
|
||||
"avoidLabelOverlap": false,
|
||||
"label": {
|
||||
"show": true,
|
||||
"color": "#666666",
|
||||
"position": 'top',
|
||||
},
|
||||
"labelLine": {
|
||||
"show": true
|
||||
},
|
||||
},
|
||||
},
|
||||
"rose": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item'
|
||||
},
|
||||
"legend": {
|
||||
"top": 'bottom'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'pie',
|
||||
"data": [],
|
||||
"radius": "55%",
|
||||
"center": ['50%', '50%'],
|
||||
"roseType": 'area',
|
||||
},
|
||||
},
|
||||
"funnel": {
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"tooltip": {
|
||||
"trigger": 'item',
|
||||
"formatter": "{b} : {c}%"
|
||||
},
|
||||
"legend": {
|
||||
"top": 'bottom'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'funnel',
|
||||
"left": '10%',
|
||||
"top": 60,
|
||||
"bottom": 60,
|
||||
"width": '80%',
|
||||
"min": 0,
|
||||
"max": 100,
|
||||
"minSize": '0%',
|
||||
"maxSize": '100%',
|
||||
"sort": 'descending',
|
||||
"gap": 2,
|
||||
"label": {
|
||||
"show": true,
|
||||
"position": 'inside'
|
||||
},
|
||||
"labelLine": {
|
||||
"length": 10,
|
||||
"lineStyle": {
|
||||
"width": 1,
|
||||
"type": 'solid'
|
||||
}
|
||||
},
|
||||
"itemStyle": {
|
||||
"bordercolor": '#fff',
|
||||
"borderwidth": 1
|
||||
},
|
||||
"emphasis": {
|
||||
"label": {
|
||||
"fontSize": 20
|
||||
}
|
||||
},
|
||||
"data": [],
|
||||
},
|
||||
},
|
||||
"gauge": {
|
||||
"color": color,
|
||||
"tooltip": {
|
||||
"formatter": '{a} <br/>{b} : {c}%'
|
||||
},
|
||||
"seriesTemplate": {
|
||||
"name": '业务指标',
|
||||
"type": 'gauge',
|
||||
"detail": {"formatter": '{value}%'},
|
||||
"data": [{"value": 50, "name": '完成率'}]
|
||||
},
|
||||
},
|
||||
"candle": {
|
||||
"xAxis": {
|
||||
"data": []
|
||||
},
|
||||
"yAxis": {},
|
||||
"color": color,
|
||||
"title": {
|
||||
"text": ''
|
||||
},
|
||||
"dataZoom": [{
|
||||
"type": 'inside',
|
||||
"xAxisIndex": [0, 1],
|
||||
"start": 10,
|
||||
"end": 100
|
||||
},
|
||||
{
|
||||
"show": true,
|
||||
"xAxisIndex": [0, 1],
|
||||
"type": 'slider',
|
||||
"bottom": 10,
|
||||
"start": 10,
|
||||
"end": 100
|
||||
}
|
||||
],
|
||||
"seriesTemplate": {
|
||||
"name": '',
|
||||
"type": 'k',
|
||||
"data": [],
|
||||
},
|
||||
}
|
||||
}
|
||||
|
||||
export default cfe;
|
||||
@ -0,0 +1,606 @@
|
||||
/*
|
||||
* uCharts®
|
||||
* 高性能跨平台图表库，支持H5、APP、小程序（微信/支付宝/百度/头条/QQ/360）、Vue、Taro等支持canvas的框架平台
|
||||
* Copyright (c) 2021 QIUN®秋云 https://www.ucharts.cn All rights reserved.
|
||||
* Licensed ( http://www.apache.org/licenses/LICENSE-2.0 )
|
||||
* 复制使用请保留本段注释，感谢支持开源！
|
||||
*
|
||||
* uCharts®官方网站
|
||||
* https://www.uCharts.cn
|
||||
*
|
||||
* 开源地址:
|
||||
* https://gitee.com/uCharts/uCharts
|
||||
*
|
||||
* uni-app插件市场地址：
|
||||
* http://ext.dcloud.net.cn/plugin?id=271
|
||||
*
|
||||
*/
|
||||
|
||||
// 主题颜色配置：如每个图表类型需要不同主题，请在对应图表类型上更改color属性
|
||||
const color = ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc'];
|
||||
|
||||
//事件转换函数，主要用作格式化x轴为时间轴，根据需求自行修改
|
||||
const formatDateTime = (timeStamp, returnType)=>{
|
||||
var date = new Date();
|
||||
date.setTime(timeStamp * 1000);
|
||||
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;
|
||||
if(returnType == 'full'){return y + '-' + m + '-' + d + ' '+ h +':' + minute + ':' + second;}
|
||||
if(returnType == 'y-m-d'){return y + '-' + m + '-' + d;}
|
||||
if(returnType == 'h:m'){return h +':' + minute;}
|
||||
if(returnType == 'h:m:s'){return h +':' + minute +':' + second;}
|
||||
return [y, m, d, h, minute, second];
|
||||
}
|
||||
|
||||
const cfu = {
|
||||
//demotype为自定义图表类型，一般不需要自定义图表类型，只需要改根节点上对应的类型即可
|
||||
"type":["pie","ring","rose","word","funnel","map","arcbar","line","column","mount","bar","area","radar","gauge","candle","mix","tline","tarea","scatter","bubble","demotype"],
|
||||
"range":["饼状图","圆环图","玫瑰图","词云图","漏斗图","地图","圆弧进度条","折线图","柱状图","山峰图","条状图","区域图","雷达图","仪表盘","K线图","混合图","时间轴折线","时间轴区域","散点图","气泡图","自定义类型"],
|
||||
//增加自定义图表类型，如果需要categories，请在这里加入您的图表类型，例如最后的"demotype"
|
||||
//自定义类型时需要注意"tline","tarea","scatter","bubble"等时间轴（矢量x轴）类图表，没有categories，不需要加入categories
|
||||
"categories":["line","column","mount","bar","area","radar","gauge","candle","mix","demotype"],
|
||||
//instance为实例变量承载属性，不要删除
|
||||
"instance":{},
|
||||
//option为opts及eopts承载属性，不要删除
|
||||
"option":{},
|
||||
//下面是自定义format配置，因除H5端外的其他端无法通过props传递函数，只能通过此属性对应下标的方式来替换
|
||||
"formatter":{
|
||||
"yAxisDemo1":function(val, index, opts){return val+'元'},
|
||||
"yAxisDemo2":function(val, index, opts){return val.toFixed(2)},
|
||||
"xAxisDemo1":function(val, index, opts){return val+'年';},
|
||||
"xAxisDemo2":function(val, index, opts){return formatDateTime(val,'h:m')},
|
||||
"seriesDemo1":function(val, index, series, opts){return val+'元'},
|
||||
"tooltipDemo1":function(item, category, index, opts){
|
||||
if(index==0){
|
||||
return '随便用'+item.data+'年'
|
||||
}else{
|
||||
return '其他我没改'+item.data+'天'
|
||||
}
|
||||
},
|
||||
"pieDemo":function(val, index, series, opts){
|
||||
if(index !== undefined){
|
||||
return series[index].name+'：'+series[index].data+'元'
|
||||
}
|
||||
},
|
||||
},
|
||||
//这里演示了自定义您的图表类型的option，可以随意命名，之后在组件上 type="demotype" 后，组件会调用这个花括号里的option，如果组件上还存在opts参数，会将demotype与opts中option合并后渲染图表。
|
||||
"demotype":{
|
||||
//我这里把曲线图当做了自定义图表类型，您可以根据需要随意指定类型或配置
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "curve",
|
||||
"width": 2
|
||||
},
|
||||
}
|
||||
},
|
||||
//下面是自定义配置，请添加项目所需的通用配置
|
||||
"pie":{
|
||||
"type": "pie",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"extra": {
|
||||
"pie": {
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
}
|
||||
},
|
||||
"ring":{
|
||||
"type": "ring",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"rotate": false,
|
||||
"dataLabel": true,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"title": {
|
||||
"name": "收益率",
|
||||
"fontSize": 15,
|
||||
"color": "#666666"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "70%",
|
||||
"fontSize": 25,
|
||||
"color": "#7cb5ec"
|
||||
},
|
||||
"extra": {
|
||||
"ring": {
|
||||
"ringWidth":30,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": true,
|
||||
"borderWidth": 3,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
},
|
||||
},
|
||||
"rose":{
|
||||
"type": "rose",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "left",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"extra": {
|
||||
"rose": {
|
||||
"type": "area",
|
||||
"minRadius": 50,
|
||||
"activeOpacity": 0.5,
|
||||
"activeRadius": 10,
|
||||
"offsetAngle": 0,
|
||||
"labelWidth": 15,
|
||||
"border": false,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF"
|
||||
},
|
||||
}
|
||||
},
|
||||
"word":{
|
||||
"type": "word",
|
||||
"color": color,
|
||||
"extra": {
|
||||
"word": {
|
||||
"type": "normal",
|
||||
"autoColors": false
|
||||
}
|
||||
}
|
||||
},
|
||||
"funnel":{
|
||||
"type": "funnel",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"extra": {
|
||||
"funnel": {
|
||||
"activeOpacity": 0.3,
|
||||
"activeWidth": 10,
|
||||
"border": true,
|
||||
"borderWidth": 2,
|
||||
"borderColor": "#FFFFFF",
|
||||
"fillOpacity": 1,
|
||||
"labelAlign": "right"
|
||||
},
|
||||
}
|
||||
},
|
||||
"map":{
|
||||
"type": "map",
|
||||
"color": color,
|
||||
"padding": [0,0,0,0],
|
||||
"dataLabel": true,
|
||||
"extra": {
|
||||
"map": {
|
||||
"border": true,
|
||||
"borderWidth": 1,
|
||||
"borderColor": "#666666",
|
||||
"fillOpacity": 0.6,
|
||||
"activeBorderColor": "#F04864",
|
||||
"activeFillColor": "#FACC14",
|
||||
"activeFillOpacity": 1
|
||||
},
|
||||
}
|
||||
},
|
||||
"arcbar":{
|
||||
"type": "arcbar",
|
||||
"color": color,
|
||||
"title": {
|
||||
"name": "百分比",
|
||||
"fontSize": 25,
|
||||
"color": "#00FF00"
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "默认标题",
|
||||
"fontSize": 15,
|
||||
"color": "#666666"
|
||||
},
|
||||
"extra": {
|
||||
"arcbar": {
|
||||
"type": "default",
|
||||
"width": 12,
|
||||
"backgroundColor": "#E9E9E9",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
"gap": 2
|
||||
}
|
||||
}
|
||||
},
|
||||
"line":{
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "straight",
|
||||
"width": 2,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"tline":{
|
||||
"type": "line",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"boundaryGap":"justify",
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"data":[
|
||||
{
|
||||
"min":0,
|
||||
"max":80
|
||||
}
|
||||
]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"line": {
|
||||
"type": "curve",
|
||||
"width": 2,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"tarea":{
|
||||
"type": "area",
|
||||
"color": color,
|
||||
"padding": [15,10,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
"boundaryGap":"justify",
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
"data":[
|
||||
{
|
||||
"min":0,
|
||||
"max":80
|
||||
}
|
||||
]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"area": {
|
||||
"type": "curve",
|
||||
"opacity": 0.2,
|
||||
"addLine": true,
|
||||
"width": 2,
|
||||
"gradient": true,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"column":{
|
||||
"type": "column",
|
||||
"color": color,
|
||||
"padding": [15,15,0,5],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"data":[{"min":0}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"column": {
|
||||
"type": "group",
|
||||
"width": 30,
|
||||
"activeBgColor": "#000000",
|
||||
"activeBgOpacity": 0.08
|
||||
},
|
||||
}
|
||||
},
|
||||
"mount":{
|
||||
"type": "mount",
|
||||
"color": color,
|
||||
"padding": [15,15,0,5],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"data":[{"min":0}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"mount": {
|
||||
"type": "mount",
|
||||
"widthRatio": 1.5,
|
||||
},
|
||||
}
|
||||
},
|
||||
"bar":{
|
||||
"type": "bar",
|
||||
"color": color,
|
||||
"padding": [15,30,0,5],
|
||||
"xAxis": {
|
||||
"boundaryGap":"justify",
|
||||
"disableGrid":false,
|
||||
"min":0,
|
||||
"axisLine":false
|
||||
},
|
||||
"yAxis": {
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"bar": {
|
||||
"type": "group",
|
||||
"width": 30,
|
||||
"meterBorde": 1,
|
||||
"meterFillColor": "#FFFFFF",
|
||||
"activeBgColor": "#000000",
|
||||
"activeBgOpacity": 0.08
|
||||
},
|
||||
}
|
||||
},
|
||||
"area":{
|
||||
"type": "area",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"gridType": "dash",
|
||||
"dashLength": 2,
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"area": {
|
||||
"type": "straight",
|
||||
"opacity": 0.2,
|
||||
"addLine": true,
|
||||
"width": 2,
|
||||
"gradient": false,
|
||||
"activeType": "hollow"
|
||||
},
|
||||
}
|
||||
},
|
||||
"radar":{
|
||||
"type": "radar",
|
||||
"color": color,
|
||||
"padding": [5,5,5,5],
|
||||
"dataLabel": false,
|
||||
"legend": {
|
||||
"show": true,
|
||||
"position": "right",
|
||||
"lineHeight": 25,
|
||||
},
|
||||
"extra": {
|
||||
"radar": {
|
||||
"gridType": "radar",
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridCount": 3,
|
||||
"opacity": 0.2,
|
||||
"max": 200,
|
||||
"labelShow": true
|
||||
},
|
||||
}
|
||||
},
|
||||
"gauge":{
|
||||
"type": "gauge",
|
||||
"color": color,
|
||||
"title": {
|
||||
"name": "66Km/H",
|
||||
"fontSize": 25,
|
||||
"color": "#2fc25b",
|
||||
"offsetY": 50
|
||||
},
|
||||
"subtitle": {
|
||||
"name": "实时速度",
|
||||
"fontSize": 15,
|
||||
"color": "#1890ff",
|
||||
"offsetY": -50
|
||||
},
|
||||
"extra": {
|
||||
"gauge": {
|
||||
"type": "default",
|
||||
"width": 30,
|
||||
"labelColor": "#666666",
|
||||
"startAngle": 0.75,
|
||||
"endAngle": 0.25,
|
||||
"startNumber": 0,
|
||||
"endNumber": 100,
|
||||
"labelFormat": "",
|
||||
"splitLine": {
|
||||
"fixRadius": 0,
|
||||
"splitNumber": 10,
|
||||
"width": 30,
|
||||
"color": "#FFFFFF",
|
||||
"childNumber": 5,
|
||||
"childWidth": 12
|
||||
},
|
||||
"pointer": {
|
||||
"width": 24,
|
||||
"color": "auto"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
"candle":{
|
||||
"type": "candle",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"enableScroll": true,
|
||||
"enableMarkLine": true,
|
||||
"dataLabel": false,
|
||||
"xAxis": {
|
||||
"labelCount": 4,
|
||||
"itemCount": 40,
|
||||
"disableGrid": true,
|
||||
"gridColor": "#CCCCCC",
|
||||
"gridType": "solid",
|
||||
"dashLength": 4,
|
||||
"scrollShow": true,
|
||||
"scrollAlign": "left",
|
||||
"scrollColor": "#A6A6A6",
|
||||
"scrollBackgroundColor": "#EFEBEF"
|
||||
},
|
||||
"yAxis": {
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"candle": {
|
||||
"color": {
|
||||
"upLine": "#f04864",
|
||||
"upFill": "#f04864",
|
||||
"downLine": "#2fc25b",
|
||||
"downFill": "#2fc25b"
|
||||
},
|
||||
"average": {
|
||||
"show": true,
|
||||
"name": ["MA5","MA10","MA30"],
|
||||
"day": [5,10,20],
|
||||
"color": ["#1890ff","#2fc25b","#facc14"]
|
||||
}
|
||||
},
|
||||
"markLine": {
|
||||
"type": "dash",
|
||||
"dashLength": 5,
|
||||
"data": [
|
||||
{
|
||||
"value": 2150,
|
||||
"lineColor": "#f04864",
|
||||
"showLabel": true
|
||||
},
|
||||
{
|
||||
"value": 2350,
|
||||
"lineColor": "#f04864",
|
||||
"showLabel": true
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
"mix":{
|
||||
"type": "mix",
|
||||
"color": color,
|
||||
"padding": [15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": true,
|
||||
},
|
||||
"yAxis": {
|
||||
"disabled": false,
|
||||
"disableGrid": false,
|
||||
"splitNumber": 5,
|
||||
"gridType": "dash",
|
||||
"dashLength": 4,
|
||||
"gridColor": "#CCCCCC",
|
||||
"padding": 10,
|
||||
"showTitle": true,
|
||||
"data": []
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"mix": {
|
||||
"column": {
|
||||
"width": 20
|
||||
}
|
||||
},
|
||||
}
|
||||
},
|
||||
"scatter":{
|
||||
"type": "scatter",
|
||||
"color":color,
|
||||
"padding":[15,15,0,15],
|
||||
"dataLabel":false,
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"splitNumber":5,
|
||||
"boundaryGap":"justify",
|
||||
"min":0
|
||||
},
|
||||
"yAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"scatter": {
|
||||
},
|
||||
}
|
||||
},
|
||||
"bubble":{
|
||||
"type": "bubble",
|
||||
"color":color,
|
||||
"padding":[15,15,0,15],
|
||||
"xAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"splitNumber":5,
|
||||
"boundaryGap":"justify",
|
||||
"min":0,
|
||||
"max":250
|
||||
},
|
||||
"yAxis": {
|
||||
"disableGrid": false,
|
||||
"gridType":"dash",
|
||||
"data":[{
|
||||
"min":0,
|
||||
"max":150
|
||||
}]
|
||||
},
|
||||
"legend": {
|
||||
},
|
||||
"extra": {
|
||||
"bubble": {
|
||||
"border":2,
|
||||
"opacity": 0.5,
|
||||
},
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default cfu;
|
||||
@ -0,0 +1,5 @@
|
||||
# uCharts JSSDK说明
|
||||
1、如不使用uCharts组件，可直接引用u-charts.js，打包编译后会`自动压缩`，压缩后体积约为`120kb`。
|
||||
2、如果120kb的体积仍需压缩，请手到uCharts官网通过在线定制选择您需要的图表。
|
||||
3、config-ucharts.js为uCharts组件的用户配置文件，升级前请`自行备份config-ucharts.js`文件，以免被强制覆盖。
|
||||
4、config-echarts.js为ECharts组件的用户配置文件，升级前请`自行备份config-echarts.js`文件，以免被强制覆盖。
|
||||
File diff suppressed because it is too large
Load Diff
18
boyue-app/src/components/qiun-data-charts/js_sdk/u-charts/u-charts.min.js
vendored
Normal file
18
boyue-app/src/components/qiun-data-charts/js_sdk/u-charts/u-charts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
201
boyue-app/src/components/qiun-data-charts/license.md
Normal file
201
boyue-app/src/components/qiun-data-charts/license.md
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 [yyyy] [name of copyright owner]
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
80
boyue-app/src/components/qiun-data-charts/package.json
Normal file
80
boyue-app/src/components/qiun-data-charts/package.json
Normal file
@ -0,0 +1,80 @@
|
||||
{
|
||||
"id": "qiun-data-charts",
|
||||
"displayName": "秋云 ucharts echarts 高性能跨全端图表组件",
|
||||
"version": "2.5.0-20230101",
|
||||
"description": "uCharts 新增正负柱状图！支持H5及APP用 ucharts echarts 渲染图表，uniapp可视化首选组件",
|
||||
"keywords": [
|
||||
"ucharts",
|
||||
"echarts",
|
||||
"f2",
|
||||
"图表",
|
||||
"可视化"
|
||||
],
|
||||
"repository": "https://gitee.com/uCharts/uCharts",
|
||||
"engines": {
|
||||
},
|
||||
"dcloudext": {
|
||||
"sale": {
|
||||
"regular": {
|
||||
"price": "0.00"
|
||||
},
|
||||
"sourcecode": {
|
||||
"price": "0.00"
|
||||
}
|
||||
},
|
||||
"contact": {
|
||||
"qq": "474119"
|
||||
},
|
||||
"declaration": {
|
||||
"ads": "无",
|
||||
"data": "插件不采集任何数据",
|
||||
"permissions": "无"
|
||||
},
|
||||
"npmurl": "https://www.npmjs.com/~qiun",
|
||||
"type": "component-vue"
|
||||
},
|
||||
"uni_modules": {
|
||||
"dependencies": [],
|
||||
"encrypt": [],
|
||||
"platforms": {
|
||||
"cloud": {
|
||||
"tcb": "y",
|
||||
"aliyun": "y"
|
||||
},
|
||||
"client": {
|
||||
"App": {
|
||||
"app-vue": "y",
|
||||
"app-nvue": "y"
|
||||
},
|
||||
"H5-mobile": {
|
||||
"Safari": "y",
|
||||
"Android Browser": "y",
|
||||
"微信浏览器(Android)": "y",
|
||||
"QQ浏览器(Android)": "y"
|
||||
},
|
||||
"H5-pc": {
|
||||
"Chrome": "y",
|
||||
"IE": "y",
|
||||
"Edge": "y",
|
||||
"Firefox": "y",
|
||||
"Safari": "y"
|
||||
},
|
||||
"小程序": {
|
||||
"微信": "y",
|
||||
"阿里": "y",
|
||||
"百度": "y",
|
||||
"字节跳动": "y",
|
||||
"QQ": "y"
|
||||
},
|
||||
"快应用": {
|
||||
"华为": "y",
|
||||
"联盟": "y"
|
||||
},
|
||||
"Vue": {
|
||||
"vue2": "y",
|
||||
"vue3": "y"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
84
boyue-app/src/components/qiun-data-charts/readme.md
Normal file
84
boyue-app/src/components/qiun-data-charts/readme.md
Normal file
@ -0,0 +1,84 @@
|
||||
|
||||
|
||||
|
||||
[](https://gitee.com/uCharts/uCharts/stargazers)
|
||||
[](https://gitee.com/uCharts/uCharts/members)
|
||||
[](https://www.apache.org/licenses/LICENSE-2.0.html)
|
||||
[](https://www.npmjs.com/~qiun)
|
||||
|
||||
|
||||
## uCharts简介
|
||||
|
||||
`uCharts`是一款基于`canvas API`开发的适用于所有前端应用的图表库，开发者编写一套代码，可运行到 Web、iOS、Android（基于 uni-app / taro ）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等更多支持 canvas API 的平台。
|
||||
|
||||
## 官方网站
|
||||
|
||||
## [https://www.ucharts.cn](https://www.ucharts.cn)
|
||||
|
||||
## 快速体验
|
||||
|
||||
一套代码编到多个平台，依次扫描二维码，亲自体验uCharts图表跨平台效果！其他平台请自行编译。
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
## 致开发者
|
||||
|
||||
感谢各位开发者`五年`来对秋云及uCharts的支持，uCharts的进步离不开各位开发者的鼓励与贡献。为更好的帮助各位开发者使用图表工具，我们推出了新版官网，增加了在线定制、问答社区、在线配置等一些增值服务，为确保您能更好的应用图表组件，建议您先`仔细阅读官网指南`以及`常见问题`，而不是下载下来`直接使用`。如仍然不能解决，请到`官网社区`或开通会员后加入`专属VIP会员群`提问将会很快得到回答。
|
||||
|
||||
## 视频教程
|
||||
|
||||
## [uCharts新手入门教程](https://www.bilibili.com/video/BV1qA411Q7se/?share_source=copy_web&vd_source=42a1242f9aaade6427736af69eb2e1d9)
|
||||
|
||||
|
||||
## 社群支持
|
||||
|
||||
uCharts官方拥有5个2000人的QQ群及专属VIP会员群支持，庞大的用户量证明我们一直在努力，请各位放心使用！uCharts的开源图表组件的开发，团队付出了大量的时间与精力，经过四来的考验，不会有比较明显的bug，请各位放心使用。如果您有更好的想法，可以在`码云提交Pull Requests`以帮助更多开发者完成需求，再次感谢各位对uCharts的鼓励与支持！
|
||||
|
||||
#### 官方交流群
|
||||
- 交流群1：371774600（已满）
|
||||
- 交流群2：619841586（已满）
|
||||
- 交流群3：955340127（已满）
|
||||
- 交流群4：641669795（已满）
|
||||
- 交流群5：236294809（只能扫码加入）
|
||||
|
||||
|
||||
|
||||
- 口令`uniapp`
|
||||
|
||||
#### 专属VIP会员群
|
||||
- 开通会员后详见【账号详情】页面中顶部的滚动通知
|
||||
- 口令`您的用户ID`
|
||||
|
||||
## 版权信息
|
||||
|
||||
uCharts始终坚持开源，遵循 [Apache Licence 2.0](https://www.apache.org/licenses/LICENSE-2.0.html) 开源协议，意味着您无需支付任何费用，即可将uCharts应用到您的产品中。
|
||||
|
||||
注意：这并不意味着您可以将uCharts应用到非法的领域，比如涉及赌博，暴力等方面。如因此产生纠纷或法律问题，uCharts相关方及秋云科技不承担任何责任。
|
||||
|
||||
## 合作伙伴
|
||||
|
||||
[](https://www.diygw.com/)
|
||||
[](https://gitee.com/howcode/has-chat)
|
||||
[](https://www.uviewui.com/)
|
||||
[](https://ext.dcloud.net.cn/plugin?id=7088)
|
||||
[](https://ext.dcloud.net.cn/publisher?id=202)
|
||||
[](https://www.firstui.cn/)
|
||||
[](https://ext.dcloud.net.cn/plugin?id=5169)
|
||||
[](https://www.graceui.com/)
|
||||
|
||||
|
||||
## 更新记录
|
||||
|
||||
详见官网指南中说明，[点击此处查看](https://www.ucharts.cn/v2/#/guide/index?id=100)
|
||||
|
||||
|
||||
## 相关链接
|
||||
- [uCharts官网](https://www.ucharts.cn)
|
||||
- [DCloud插件市场地址](https://ext.dcloud.net.cn/plugin?id=271)
|
||||
- [uCharts码云开源托管地址](https://gitee.com/uCharts/uCharts) [](https://gitee.com/uCharts/uCharts/stargazers)
|
||||
- [uCharts npm开源地址](https://www.ucharts.cn)
|
||||
- [ECharts官网](https://echarts.apache.org/zh/index.html)
|
||||
- [ECharts配置手册](https://echarts.apache.org/zh/option.html)
|
||||
- [图表组件在项目中的应用 ReportPlus数据报表](https://www.ucharts.cn/v2/#/layout/info?id=1)
|
||||
23
boyue-app/src/components/qiun-data-charts/static/app-plus/echarts.min.js
vendored
Normal file
23
boyue-app/src/components/qiun-data-charts/static/app-plus/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
23
boyue-app/src/components/qiun-data-charts/static/h5/echarts.min.js
vendored
Normal file
23
boyue-app/src/components/qiun-data-charts/static/h5/echarts.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
1
boyue-app/src/components/u-city-select/area.js
Normal file
1
boyue-app/src/components/u-city-select/area.js
Normal file
File diff suppressed because one or more lines are too long
1
boyue-app/src/components/u-city-select/city.js
Normal file
1
boyue-app/src/components/u-city-select/city.js
Normal file
File diff suppressed because one or more lines are too long
1
boyue-app/src/components/u-city-select/province.js
Normal file
1
boyue-app/src/components/u-city-select/province.js
Normal file
@ -0,0 +1 @@
|
||||
var provinceData=[{"label":"北京市","value":"11"},{"label":"天津市","value":"12"},{"label":"河北省","value":"13"},{"label":"山西省","value":"14"},{"label":"内蒙古自治区","value":"15"},{"label":"辽宁省","value":"21"},{"label":"吉林省","value":"22"},{"label":"黑龙江省","value":"23"},{"label":"上海市","value":"31"},{"label":"江苏省","value":"32"},{"label":"浙江省","value":"33"},{"label":"安徽省","value":"34"},{"label":"福建省","value":"35"},{"label":"江西省","value":"36"},{"label":"山东省","value":"37"},{"label":"河南省","value":"41"},{"label":"湖北省","value":"42"},{"label":"湖南省","value":"43"},{"label":"广东省","value":"44"},{"label":"广西壮族自治区","value":"45"},{"label":"海南省","value":"46"},{"label":"重庆市","value":"50"},{"label":"四川省","value":"51"},{"label":"贵州省","value":"52"},{"label":"云南省","value":"53"},{"label":"西藏自治区","value":"54"},{"label":"陕西省","value":"61"},{"label":"甘肃省","value":"62"},{"label":"青海省","value":"63"},{"label":"宁夏回族自治区","value":"64"},{"label":"新疆维吾尔自治区","value":"65"},{"label":"台湾","value":"66"},{"label":"香港","value":"67"},{"label":"澳门","value":"68"}];export default provinceData;
|
||||
265
boyue-app/src/components/u-city-select/u-city-select.vue
Normal file
265
boyue-app/src/components/u-city-select/u-city-select.vue
Normal file
@ -0,0 +1,265 @@
|
||||
<template>
|
||||
<u-popup :show="modelValue" mode="bottom" :popup="false" :mask="true" :closeable="true"
|
||||
:safe-area-inset-bottom="true" close-icon-color="#ffffff" :z-index="uZIndex" :maskCloseAble="maskCloseAble"
|
||||
@close="close">
|
||||
<u-tabs v-if="modelValue" :list="genTabsList" :scrollable="true" :current="tabsIndex" @change="tabsChange"
|
||||
ref="tabs" />
|
||||
<view class="area-box">
|
||||
<view class="u-flex" :class="{ 'change': isChange }">
|
||||
<view class="area-item">
|
||||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||||
<scroll-view :scroll-y="true" style="height: 100%">
|
||||
<u-cell-group>
|
||||
<u-cell v-for="(item, index) in provinces" :title="item.label" :arrow="false"
|
||||
:index="index" :key="index" @click="provinceChange(index)">
|
||||
<template v-slot:right-icon>
|
||||
<u-icon v-if="isChooseP && province === index" size="17"
|
||||
name="checkbox-mark"></u-icon>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="area-item">
|
||||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||||
<scroll-view :scroll-y="true" style="height: 100%">
|
||||
<u-cell-group v-if="isChooseP">
|
||||
<u-cell v-for="(item, index) in citys" :title="item.label" :arrow="false" :index="index"
|
||||
:key="index" @click="cityChange(index)">
|
||||
<template v-slot:right-icon>
|
||||
<u-icon v-if="isChooseC && city === index" size="17"
|
||||
name="checkbox-mark"></u-icon>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="area-item">
|
||||
<view class="u-padding-10 u-bg-gray" style="height: 100%;">
|
||||
<scroll-view :scroll-y="true" style="height: 100%">
|
||||
<u-cell-group v-if="isChooseC">
|
||||
<u-cell v-for="(item, index) in areas" :title="item.label" :arrow="false" :index="index"
|
||||
:key="index" @click="areaChange(index)">
|
||||
<template v-slot:right-icon>
|
||||
<u-icon v-if="isChooseA && area === index" size="17"
|
||||
name="checkbox-mark"></u-icon>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</u-popup>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, computed, onMounted, PropType } from 'vue';
|
||||
import provincesSource from "./province.js";
|
||||
import citysSource from "./city.js";
|
||||
import areasSource from "./area.js";
|
||||
|
||||
// 定义接口
|
||||
interface Region {
|
||||
label: string;
|
||||
value: string;
|
||||
}
|
||||
|
||||
interface CitySelectResult {
|
||||
province: Region;
|
||||
city: Region;
|
||||
area: Region;
|
||||
}
|
||||
|
||||
interface TabItem {
|
||||
name: string;
|
||||
}
|
||||
|
||||
// Props 定义
|
||||
const props = defineProps({
|
||||
// 通过双向绑定控制组件的弹出与收起
|
||||
modelValue: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
// 默认显示的地区，可传类似["河北省", "秦皇岛市", "北戴河区"]
|
||||
defaultRegion: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => []
|
||||
},
|
||||
// 默认显示地区的编码，defaultRegion和areaCode同时存在，areaCode优先，可传类似["13", "1303", "130304"]
|
||||
areaCode: {
|
||||
type: Array as PropType<string[]>,
|
||||
default: () => []
|
||||
},
|
||||
// 是否允许通过点击遮罩关闭Picker
|
||||
maskCloseAble: {
|
||||
type: Boolean,
|
||||
default: true
|
||||
},
|
||||
// 弹出的z-index值
|
||||
zIndex: {
|
||||
type: [String, Number],
|
||||
default: 0
|
||||
}
|
||||
});
|
||||
|
||||
// 事件定义
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', value: boolean): void;
|
||||
(e: 'close'): void;
|
||||
(e: 'city-change', result: CitySelectResult): void;
|
||||
}>();
|
||||
|
||||
const cityValue = ref("");
|
||||
const isChooseP = ref(false); // 是否已经选择了省
|
||||
const province = ref(0); // 省级下标
|
||||
const provinces = ref<Region[]>(provincesSource);
|
||||
const isChooseC = ref(false); // 是否已经选择了市
|
||||
const city = ref(0); // 市级下标
|
||||
const citys = ref<Region[]>(citysSource[0]);
|
||||
const isChooseA = ref(false); // 是否已经选择了区
|
||||
const area = ref(0); // 区级下标
|
||||
const areas = ref<Region[]>(areasSource[0][0]);
|
||||
const tabsIndex = ref(0);
|
||||
const tabs = ref();
|
||||
|
||||
// 计算属性
|
||||
const isChange = computed(() => {
|
||||
return tabsIndex.value > 1;
|
||||
});
|
||||
|
||||
const genTabsList = computed((): TabItem[] => {
|
||||
let tabsList: TabItem[] = [{
|
||||
name: "请选择"
|
||||
}];
|
||||
|
||||
if (isChooseP.value) {
|
||||
tabsList[0].name = provinces.value[province.value].label;
|
||||
tabsList[1] = {
|
||||
name: "请选择"
|
||||
};
|
||||
}
|
||||
|
||||
if (isChooseC.value) {
|
||||
tabsList[1].name = citys.value[city.value].label;
|
||||
tabsList[2] = {
|
||||
name: "请选择"
|
||||
};
|
||||
}
|
||||
|
||||
if (isChooseA.value) {
|
||||
tabsList[2].name = areas.value[area.value].label;
|
||||
}
|
||||
|
||||
return tabsList;
|
||||
});
|
||||
|
||||
const uZIndex = computed(() => {
|
||||
// 如果用户有传递z-index值，优先使用
|
||||
return props.zIndex ? props.zIndex : 1075; // 假设$u.zIndex.popup为1075
|
||||
});
|
||||
|
||||
// 方法
|
||||
const setProvince = (label = "", value = "") => {
|
||||
provinces.value.map((v, k) => {
|
||||
if (value ? v.value == value : v.label == label) {
|
||||
provinceChange(k);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const setCity = (label = "", value = "") => {
|
||||
citys.value.map((v, k) => {
|
||||
if (value ? v.value == value : v.label == label) {
|
||||
cityChange(k);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const setArea = (label = "", value = "") => {
|
||||
areas.value.map((v, k) => {
|
||||
if (value ? v.value == value : v.label == label) {
|
||||
isChooseA.value = true;
|
||||
area.value = k;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
emit('update:modelValue', false);
|
||||
emit('close');
|
||||
};
|
||||
|
||||
const tabsChange = (value: { index: number }) => {
|
||||
tabsIndex.value = value.index;
|
||||
};
|
||||
|
||||
const provinceChange = (index: number) => {
|
||||
isChooseP.value = true;
|
||||
isChooseC.value = false;
|
||||
isChooseA.value = false;
|
||||
province.value = index;
|
||||
citys.value = citysSource[index];
|
||||
tabsIndex.value = 1;
|
||||
};
|
||||
|
||||
const cityChange = (index: number) => {
|
||||
isChooseC.value = true;
|
||||
isChooseA.value = false;
|
||||
city.value = index;
|
||||
areas.value = areasSource[province.value][index];
|
||||
tabsIndex.value = 2;
|
||||
};
|
||||
|
||||
const areaChange = (index: number) => {
|
||||
isChooseA.value = true;
|
||||
area.value = index;
|
||||
const result: CitySelectResult = {
|
||||
province: provinces.value[province.value],
|
||||
city: citys.value[city.value],
|
||||
area: areas.value[area.value]
|
||||
};
|
||||
emit('city-change', result);
|
||||
close();
|
||||
};
|
||||
|
||||
// 生命周期钩子
|
||||
onMounted(() => {
|
||||
if (props.areaCode.length == 3) {
|
||||
setProvince("", props.areaCode[0]);
|
||||
setCity("", props.areaCode[1]);
|
||||
setArea("", props.areaCode[2]);
|
||||
} else if (props.defaultRegion.length == 3) {
|
||||
setProvince(props.defaultRegion[0], "");
|
||||
setCity(props.defaultRegion[1], "");
|
||||
setArea(props.defaultRegion[2], "");
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.area-box {
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
height: 800rpx;
|
||||
|
||||
>view {
|
||||
width: 150%;
|
||||
transition: transform 0.3s ease-in-out 0s;
|
||||
transform: translateX(0);
|
||||
|
||||
&.change {
|
||||
transform: translateX(-33.3333333%);
|
||||
}
|
||||
}
|
||||
|
||||
.area-item {
|
||||
width: 33.3333333%;
|
||||
height: 800rpx;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
167
boyue-app/src/components/uni-section/uni-section.vue
Normal file
167
boyue-app/src/components/uni-section/uni-section.vue
Normal file
@ -0,0 +1,167 @@
|
||||
<template>
|
||||
<view class="uni-section">
|
||||
<view class="uni-section-header" @click="onClick">
|
||||
<view class="uni-section-header__decoration" v-if="type" :class="type" />
|
||||
<slot v-else name="decoration"></slot>
|
||||
|
||||
<view class="uni-section-header__content">
|
||||
<text :style="{'font-size':titleFontSize,'color':titleColor}" class="uni-section__content-title" :class="{'distraction':!subTitle}">{{ title }}</text>
|
||||
<text v-if="subTitle" :style="{'font-size':subTitleFontSize,'color':subTitleColor}" class="uni-section-header__content-sub">{{ subTitle }}</text>
|
||||
</view>
|
||||
|
||||
<view class="uni-section-header__slot-right">
|
||||
<slot name="right"></slot>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="uni-section-content" :style="{padding: _padding}">
|
||||
<slot />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
||||
/**
|
||||
* Section 标题栏
|
||||
* @description 标题栏
|
||||
* @property {String} type = [line|circle|square] 标题装饰类型
|
||||
* @value line 竖线
|
||||
* @value circle 圆形
|
||||
* @value square 正方形
|
||||
* @property {String} title 主标题
|
||||
* @property {String} titleFontSize 主标题字体大小
|
||||
* @property {String} titleColor 主标题字体颜色
|
||||
* @property {String} subTitle 副标题
|
||||
* @property {String} subTitleFontSize 副标题字体大小
|
||||
* @property {String} subTitleColor 副标题字体颜色
|
||||
* @property {String} padding 默认插槽 padding
|
||||
*/
|
||||
|
||||
export default {
|
||||
name: 'UniSection',
|
||||
emits:['click'],
|
||||
props: {
|
||||
type: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
required: true,
|
||||
default: ''
|
||||
},
|
||||
titleFontSize: {
|
||||
type: String,
|
||||
default: '14px'
|
||||
},
|
||||
titleColor:{
|
||||
type: String,
|
||||
default: '#333'
|
||||
},
|
||||
subTitle: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
subTitleFontSize: {
|
||||
type: String,
|
||||
default: '12px'
|
||||
},
|
||||
subTitleColor: {
|
||||
type: String,
|
||||
default: '#999'
|
||||
},
|
||||
padding: {
|
||||
type: [Boolean, String],
|
||||
default: false
|
||||
}
|
||||
},
|
||||
computed:{
|
||||
_padding(){
|
||||
if(typeof this.padding === 'string'){
|
||||
return this.padding
|
||||
}
|
||||
|
||||
return this.padding?'10px':''
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
title(newVal) {
|
||||
if (uni.report && newVal !== '') {
|
||||
uni.report('title', newVal)
|
||||
}
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
onClick() {
|
||||
this.$emit('click')
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" >
|
||||
$uni-primary: #2979ff !default;
|
||||
|
||||
.uni-section {
|
||||
background-color: #fff;
|
||||
.uni-section-header {
|
||||
position: relative;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
padding: 12px 10px;
|
||||
font-weight: normal;
|
||||
|
||||
&__decoration{
|
||||
margin-right: 6px;
|
||||
background-color: $uni-primary;
|
||||
&.line {
|
||||
width: 4px;
|
||||
height: 12px;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
&.circle {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
border-top-right-radius: 50px;
|
||||
border-top-left-radius: 50px;
|
||||
border-bottom-left-radius: 50px;
|
||||
border-bottom-right-radius: 50px;
|
||||
}
|
||||
|
||||
&.square {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
flex: 1;
|
||||
color: #333;
|
||||
|
||||
.distraction {
|
||||
flex-direction: row;
|
||||
align-items: center;
|
||||
}
|
||||
&-sub {
|
||||
margin-top: 2px;
|
||||
}
|
||||
}
|
||||
|
||||
&__slot-right{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
|
||||
.uni-section-content{
|
||||
font-size: 14px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
31
boyue-app/src/config.js
Normal file
31
boyue-app/src/config.js
Normal file
@ -0,0 +1,31 @@
|
||||
// 应用全局配置
|
||||
const config = {
|
||||
// baseUrl: 'https://vue.boyue.vip/prod-api',
|
||||
// baseUrl: 'http://localhost/prod-api',
|
||||
baseUrl: 'http://localhost:9277',
|
||||
//cloud后台网关地址
|
||||
// baseUrl: 'http://192.168.10.3:8080',
|
||||
// 应用信息
|
||||
appInfo: {
|
||||
// 应用名称
|
||||
name: "boyue-app-vue3",
|
||||
// 应用版本
|
||||
version: "1.1.0",
|
||||
// 应用logo
|
||||
logo: "/static/logo.png",
|
||||
// 官方网站
|
||||
site_url: "http://boyue.vip",
|
||||
// 政策协议
|
||||
agreements: [{
|
||||
title: "隐私政策",
|
||||
url: "https://boyue.vip/protocol.html"
|
||||
},
|
||||
{
|
||||
title: "用户服务协议",
|
||||
url: "https://boyue.vip/protocol.html"
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
export default config
|
||||
79
boyue-app/src/directive/common/copyText.ts
Normal file
79
boyue-app/src/directive/common/copyText.ts
Normal file
@ -0,0 +1,79 @@
|
||||
// #ifdef APP-VUE || H5
|
||||
/**
|
||||
* v-copyText 复制文本内容
|
||||
* Copyright (c) 2022 boyue
|
||||
* v-copyText="要复制的文本内容"
|
||||
* v-copyText:callback="复制成功后的回调函数"
|
||||
* 点击被标注的元素即可复制文本内容
|
||||
*/
|
||||
|
||||
import type { Directive, DirectiveBinding } from "vue";
|
||||
interface ElType extends HTMLElement {
|
||||
$copyValue: string;
|
||||
$copyCallback: Function;
|
||||
$destroyCopy:Function;
|
||||
}
|
||||
const vCopyText:Directive = {
|
||||
beforeMount(el:ElType , binding:DirectiveBinding) {
|
||||
if (binding.arg === "callback") {
|
||||
el.$copyCallback = binding.value;
|
||||
} else {
|
||||
el.$copyValue = binding.value;
|
||||
const handler = () => {
|
||||
copyTextToClipboard(el.$copyValue);
|
||||
if (el.$copyCallback) {
|
||||
el.$copyCallback(el.$copyValue);
|
||||
}
|
||||
};
|
||||
el.addEventListener("click", handler);
|
||||
el.$destroyCopy = () => el.removeEventListener("click", handler);
|
||||
}
|
||||
}
|
||||
}
|
||||
export default vCopyText;
|
||||
|
||||
function copyTextToClipboard(input:string, { target = document.body } = {}) {
|
||||
const element = document.createElement('textarea');
|
||||
const previouslyFocusedElement = document.activeElement as HTMLElement;
|
||||
|
||||
element.value = input;
|
||||
|
||||
// Prevent keyboard from showing on mobile
|
||||
element.setAttribute('readonly', '');
|
||||
|
||||
element.style.contain = 'strict';
|
||||
element.style.position = 'absolute';
|
||||
element.style.left = '-9999px';
|
||||
element.style.fontSize = '12pt'; // Prevent zooming on iOS
|
||||
|
||||
const selection = document.getSelection();
|
||||
if(!selection)return
|
||||
const originalRange = selection.rangeCount > 0 && selection.getRangeAt(0);
|
||||
|
||||
target.append(element);
|
||||
element.select();
|
||||
|
||||
// Explicit selection workaround for iOS
|
||||
element.selectionStart = 0;
|
||||
element.selectionEnd = input.length;
|
||||
|
||||
let isSuccess = false;
|
||||
try {
|
||||
isSuccess = document.execCommand('copy');
|
||||
} catch { }
|
||||
|
||||
element.remove();
|
||||
|
||||
if (originalRange) {
|
||||
selection.removeAllRanges();
|
||||
selection.addRange(originalRange);
|
||||
}
|
||||
|
||||
// Get the focus back on the previously focused element, if any
|
||||
if (previouslyFocusedElement) {
|
||||
previouslyFocusedElement.focus();
|
||||
}
|
||||
|
||||
return isSuccess;
|
||||
}
|
||||
// #endif
|
||||
7
boyue-app/src/directive/common/focus.ts
Normal file
7
boyue-app/src/directive/common/focus.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import type { Directive } from "vue";
|
||||
const vFocus: Directive = {
|
||||
mounted: (el) => el.focus()
|
||||
}
|
||||
export default vFocus
|
||||
|
||||
|
||||
50
boyue-app/src/directive/common/full.ts
Normal file
50
boyue-app/src/directive/common/full.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import type { Directive } from "vue";
|
||||
interface ElType extends HTMLElement {
|
||||
$oldStyle: CSSStyleDeclaration;
|
||||
$fullStyle: CSSStyleDeclaration;
|
||||
}
|
||||
const vFull: Directive = {
|
||||
mounted: (el: ElType, binding) => {
|
||||
el.$oldStyle = { ...el.style }
|
||||
if (binding.arg === 'screen') {
|
||||
el.$fullStyle = {
|
||||
...el.style,
|
||||
left: '0',
|
||||
top: '0',
|
||||
zIndex: '8',
|
||||
position: 'fixed',
|
||||
height: '100vh',
|
||||
width: '100vw',
|
||||
}
|
||||
} else {
|
||||
el.$fullStyle = {
|
||||
...el.style,
|
||||
left: '0',
|
||||
top: '0',
|
||||
zIndex: '8',
|
||||
position: 'absolute',
|
||||
height: '100%',
|
||||
width: '100%',
|
||||
}
|
||||
}
|
||||
|
||||
},
|
||||
updated: (el: ElType, binding) => {
|
||||
function setStyle(el: CSSStyleDeclaration, style: CSSStyleDeclaration) {
|
||||
el.position = style.position
|
||||
el.left = style.left
|
||||
el.top = style.top
|
||||
el.zIndex = style.zIndex
|
||||
el.height = style.height
|
||||
el.width = style.width
|
||||
}
|
||||
if (binding.value) {
|
||||
setStyle(el.style, el.$fullStyle)
|
||||
} else {
|
||||
setStyle(el.style, el.$oldStyle)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default vFull
|
||||
|
||||
|
||||
18
boyue-app/src/directive/index.ts
Normal file
18
boyue-app/src/directive/index.ts
Normal file
@ -0,0 +1,18 @@
|
||||
// #ifdef APP-VUE || H5
|
||||
import copyText from './common/copyText'
|
||||
// #endif
|
||||
import hasRole from './permission/hasRole'
|
||||
import hasPermi from './permission/hasPermi'
|
||||
import focus from './common/focus'
|
||||
import full from './common/full'
|
||||
import { App } from 'vue'
|
||||
|
||||
export default function directive(app: App) {
|
||||
// #ifdef APP-VUE || H5
|
||||
app.directive('copyText', copyText)
|
||||
// #endif
|
||||
app.directive('hasRole', hasRole)
|
||||
app.directive('hasPermi', hasPermi)
|
||||
app.directive('focus', focus)
|
||||
app.directive('full', full)
|
||||
}
|
||||
30
boyue-app/src/directive/permission/hasPermi.ts
Normal file
30
boyue-app/src/directive/permission/hasPermi.ts
Normal file
@ -0,0 +1,30 @@
|
||||
/**
|
||||
* v-hasPermi 操作权限处理
|
||||
* Copyright (c) 2019 boyue
|
||||
*/
|
||||
|
||||
import useUserStore from '@/store/modules/user'
|
||||
|
||||
import type { Directive } from "vue";
|
||||
const vHasPermi: Directive = {
|
||||
mounted(el, binding, vnode) {
|
||||
const { value } = binding
|
||||
const all_permission = "*:*:*";
|
||||
const permissions = useUserStore().permissions
|
||||
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
const permissionFlag = value
|
||||
|
||||
const hasPermissions = permissions.some(permission => {
|
||||
return all_permission === permission || permissionFlag.includes(permission)
|
||||
})
|
||||
|
||||
if (!hasPermissions) {
|
||||
el.parentNode && el.parentNode.removeChild(el)
|
||||
}
|
||||
} else {
|
||||
throw new Error(`请设置操作权限标签值`)
|
||||
}
|
||||
}
|
||||
}
|
||||
export default vHasPermi
|
||||
30
boyue-app/src/directive/permission/hasRole.ts
Normal file
30
boyue-app/src/directive/permission/hasRole.ts
Normal file
@ -0,0 +1,30 @@
|
||||
/**
|
||||
* v-hasRole 角色权限处理
|
||||
* Copyright (c) 2019 boyue
|
||||
*/
|
||||
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import type { Directive } from "vue";
|
||||
const vHasRole: Directive = {
|
||||
mounted(el, binding, vnode) {
|
||||
const { value } = binding
|
||||
const super_admin = "admin";
|
||||
const roles = useUserStore().roles
|
||||
|
||||
if (value && value instanceof Array && value.length > 0) {
|
||||
const roleFlag = value
|
||||
|
||||
const hasRole = roles.some(role => {
|
||||
return super_admin === role || roleFlag.includes(role)
|
||||
})
|
||||
|
||||
if (!hasRole) {
|
||||
el.parentNode && el.parentNode.removeChild(el)
|
||||
}
|
||||
} else {
|
||||
throw new Error(`请设置角色权限标签值`)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
export default vHasRole;
|
||||
11
boyue-app/src/env.d.ts
vendored
Normal file
11
boyue-app/src/env.d.ts
vendored
Normal file
@ -0,0 +1,11 @@
|
||||
/// <reference types="vite/client" />
|
||||
/// <reference types="@dcloudio/types" />
|
||||
|
||||
declare module '*.vue' {
|
||||
import { DefineComponent } from 'vue'
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any, @typescript-eslint/ban-types
|
||||
const component: DefineComponent<{}, {}, any>
|
||||
export default component
|
||||
}
|
||||
declare module "uview-plus";
|
||||
declare module 'mqtt/dist/mqtt';
|
||||
38
boyue-app/src/main.js
Normal file
38
boyue-app/src/main.js
Normal file
@ -0,0 +1,38 @@
|
||||
import App from './App.vue'
|
||||
import plugins from './plugins'
|
||||
import store from './store'
|
||||
import uviewPlus from 'uview-plus'
|
||||
|
||||
|
||||
import { createSSRApp } from 'vue'
|
||||
import directive from './directive' // directive
|
||||
|
||||
import { useDict } from '@/utils/dict'
|
||||
import { parseTime, resetForm, addDateRange, handleTree, selectDictLabel, selectDictLabels } from '@/utils/boyue'
|
||||
|
||||
|
||||
|
||||
export function createApp() {
|
||||
const app = createSSRApp(App)
|
||||
app.use(store)
|
||||
app.use(uviewPlus)
|
||||
app.use(plugins)
|
||||
|
||||
// #ifndef MP-WEIXIN
|
||||
// 微信小程序中不支持自定义指令
|
||||
directive(app)
|
||||
// #endif
|
||||
|
||||
// 全局方法挂载
|
||||
app.config.globalProperties.useDict = useDict
|
||||
app.config.globalProperties.parseTime = parseTime
|
||||
app.config.globalProperties.resetForm = resetForm
|
||||
app.config.globalProperties.handleTree = handleTree
|
||||
app.config.globalProperties.addDateRange = addDateRange
|
||||
app.config.globalProperties.selectDictLabel = selectDictLabel
|
||||
app.config.globalProperties.selectDictLabels = selectDictLabels
|
||||
|
||||
return {
|
||||
app
|
||||
}
|
||||
}
|
||||
72
boyue-app/src/manifest.json
Normal file
72
boyue-app/src/manifest.json
Normal file
@ -0,0 +1,72 @@
|
||||
{
|
||||
"name" : "boyue-vue3",
|
||||
"appid" : "__UNI__3DD118D",
|
||||
"description" : "",
|
||||
"versionName" : "1.0.0",
|
||||
"versionCode" : "100",
|
||||
"transformPx" : false,
|
||||
/* 5+App特有相关 */
|
||||
"app-plus" : {
|
||||
"usingComponents" : true,
|
||||
"nvueStyleCompiler" : "uni-app",
|
||||
"compilerVersion" : 3,
|
||||
"splashscreen" : {
|
||||
"alwaysShowBeforeRender" : true,
|
||||
"waiting" : true,
|
||||
"autoclose" : true,
|
||||
"delay" : 0
|
||||
},
|
||||
/* 模块配置 */
|
||||
"modules" : {},
|
||||
/* 应用发布信息 */
|
||||
"distribute" : {
|
||||
/* android打包配置 */
|
||||
"android" : {
|
||||
"permissions" : [
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.MOUNT_UNMOUNT_FILESYSTEMS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.VIBRATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_LOGS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_WIFI_STATE\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera.autofocus\"/>",
|
||||
"<uses-permission android:name=\"android.permission.ACCESS_NETWORK_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CAMERA\"/>",
|
||||
"<uses-permission android:name=\"android.permission.GET_ACCOUNTS\"/>",
|
||||
"<uses-permission android:name=\"android.permission.READ_PHONE_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.CHANGE_WIFI_STATE\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WAKE_LOCK\"/>",
|
||||
"<uses-permission android:name=\"android.permission.FLASHLIGHT\"/>",
|
||||
"<uses-feature android:name=\"android.hardware.camera\"/>",
|
||||
"<uses-permission android:name=\"android.permission.WRITE_SETTINGS\"/>"
|
||||
]
|
||||
},
|
||||
/* ios打包配置 */
|
||||
"ios" : {},
|
||||
/* SDK配置 */
|
||||
"sdkConfigs" : {}
|
||||
}
|
||||
},
|
||||
/* 快应用特有相关 */
|
||||
"quickapp" : {},
|
||||
/* 小程序特有相关 */
|
||||
"mp-weixin" : {
|
||||
"appid" : "wxb872021f510c8752",
|
||||
"setting" : {
|
||||
"urlCheck" : false
|
||||
},
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-alipay" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-baidu" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"mp-toutiao" : {
|
||||
"usingComponents" : true
|
||||
},
|
||||
"uniStatistics" : {
|
||||
"enable" : false
|
||||
},
|
||||
"vueVersion" : "3"
|
||||
}
|
||||
280
boyue-app/src/pages.json
Normal file
280
boyue-app/src/pages.json
Normal file
@ -0,0 +1,280 @@
|
||||
{
|
||||
"easycom": {
|
||||
"custom": {
|
||||
"u-city-select": "@/components/u-city-select/u-city-select.vue",
|
||||
"geek-(.*)": "@/components/geek-xd/components/geek-$1/geek-$1.vue",
|
||||
"gx-(.*)": "@/components/geek-xd/components/geek-$1/geek-$1.vue",
|
||||
"^u--(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
||||
"^up-(.*)": "uview-plus/components/u-$1/u-$1.vue",
|
||||
"^u-([^-].*)": "uview-plus/components/u-$1/u-$1.vue",
|
||||
"qiun-(.*)": "@/components/qiun-data-charts/components/qiun-$1/qiun-$1.vue"
|
||||
}
|
||||
},
|
||||
"pages": [
|
||||
{
|
||||
"path": "pages/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "若依移动端框架",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/login",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/work",
|
||||
"style": {
|
||||
"navigationBarTitleText": "工作台"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/template",
|
||||
"style": {
|
||||
"navigationBarTitleText": "模板"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/mine",
|
||||
"style": {
|
||||
"navigationBarTitleText": "我的"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/webview/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "浏览网页"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pages/common/textview/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "浏览文本"
|
||||
}
|
||||
}
|
||||
],
|
||||
"subPackages": [
|
||||
{
|
||||
"root": "pages_mine/pages",
|
||||
"pages": [
|
||||
{
|
||||
"path": "avatar/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改头像"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "info/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "个人信息"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "info/edit",
|
||||
"style": {
|
||||
"navigationBarTitleText": "编辑资料"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "pwd/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "修改密码"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "setting/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "应用设置"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "help/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "常见问题"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "about/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "关于我们"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages_template/pages",
|
||||
"pages": [
|
||||
{
|
||||
"path": "wxCenter/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "wxCenter 仿微信个人中心",
|
||||
"navigationStyle": "custom"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "keyboardPay/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "keyboardPay 自定义键盘支付"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mallMenu/index2",
|
||||
"style": {
|
||||
"navigationBarTitleText": "mallMenu-商城分类"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "mallMenu/index1",
|
||||
"style": {
|
||||
"navigationBarTitleText": "mallMenu-商城分类"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "coupon/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "coupon-优惠券"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "login/index1",
|
||||
"style": {
|
||||
"navigationBarTitleText": "美团登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "login/index2",
|
||||
"style": {
|
||||
"navigationBarTitleText": "水滴登录"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "citySelect/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "城市选择"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "submitBar/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "提交订单栏"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "comment/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "评论"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "comment/reply",
|
||||
"style": {
|
||||
"navigationBarTitleText": "评论详情"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "order/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "订单"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "login/code",
|
||||
"style": {
|
||||
"navigationBarTitleText": "登录获取验证码"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "address/index",
|
||||
"style": {
|
||||
"navigationBarTitleText": "用户地址"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "address/addSite",
|
||||
"style": {
|
||||
"navigationBarTitleText": "添加用户地址"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages_qiun/pages",
|
||||
"pages": [
|
||||
{
|
||||
"path": "sport/index",
|
||||
"style": {
|
||||
"pageOrientation": "auto"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "school/index",
|
||||
"style": {
|
||||
"pageOrientation": "auto"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "finance/index",
|
||||
"style": {
|
||||
"pageOrientation": "auto"
|
||||
}
|
||||
},
|
||||
{
|
||||
"path": "main/index",
|
||||
"style": {
|
||||
"pageOrientation": "auto"
|
||||
}
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
"root": "pages_geek/pages",
|
||||
"pages": [
|
||||
{
|
||||
"path": "index/index"
|
||||
},
|
||||
{
|
||||
"path": "code/index"
|
||||
}
|
||||
]
|
||||
}
|
||||
],
|
||||
"tabBar": {
|
||||
"color": "#000000",
|
||||
"selectedColor": "#000000",
|
||||
"borderStyle": "white",
|
||||
"backgroundColor": "#ffffff",
|
||||
"list": [
|
||||
{
|
||||
"pagePath": "pages/index",
|
||||
"iconPath": "static/images/tabbar/home.png",
|
||||
"selectedIconPath": "static/images/tabbar/home_.png",
|
||||
"text": "首页"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/work",
|
||||
"iconPath": "static/images/tabbar/work.png",
|
||||
"selectedIconPath": "static/images/tabbar/work_.png",
|
||||
"text": "工作台"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/template",
|
||||
"iconPath": "static/images/tabbar/work.png",
|
||||
"selectedIconPath": "static/images/tabbar/work_.png",
|
||||
"text": "模板"
|
||||
},
|
||||
{
|
||||
"pagePath": "pages/mine",
|
||||
"iconPath": "static/images/tabbar/mine.png",
|
||||
"selectedIconPath": "static/images/tabbar/mine_.png",
|
||||
"text": "我的"
|
||||
}
|
||||
]
|
||||
},
|
||||
"globalStyle": {
|
||||
"navigationBarTextStyle": "black",
|
||||
"navigationBarTitleText": "boyue",
|
||||
"navigationBarBackgroundColor": "#FFFFFF"
|
||||
}
|
||||
}
|
||||
43
boyue-app/src/pages/common/textview/index.vue
Normal file
43
boyue-app/src/pages/common/textview/index.vue
Normal file
@ -0,0 +1,43 @@
|
||||
<template>
|
||||
<view>
|
||||
<uni-card class="view-title" :title="title">
|
||||
<text class="uni-body view-content">{{ content }}</text>
|
||||
</uni-card>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
title: '',
|
||||
content: ''
|
||||
}
|
||||
},
|
||||
onLoad(options) {
|
||||
this.title = options.title
|
||||
this.content = options.content
|
||||
uni.setNavigationBarTitle({
|
||||
title: options.title
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.view-title {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.view-content {
|
||||
font-size: 26rpx;
|
||||
padding: 12px 5px 0;
|
||||
color: #333;
|
||||
line-height: 24px;
|
||||
font-weight: normal;
|
||||
}
|
||||
</style>
|
||||
34
boyue-app/src/pages/common/webview/index.vue
Normal file
34
boyue-app/src/pages/common/webview/index.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<view v-if="params.url">
|
||||
<web-view :webview-styles="webviewStyles" :src="`${params.url}`"></web-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
params: {},
|
||||
webviewStyles: {
|
||||
progress: {
|
||||
color: "#FF3333"
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
props: {
|
||||
src: {
|
||||
type: [String],
|
||||
default: null
|
||||
}
|
||||
},
|
||||
onLoad(event) {
|
||||
this.params = event
|
||||
if (event.title) {
|
||||
uni.setNavigationBarTitle({
|
||||
title: event.title
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
75
boyue-app/src/pages/index.vue
Normal file
75
boyue-app/src/pages/index.vue
Normal file
@ -0,0 +1,75 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<image class="logo" src="@/static/logo.png"></image>
|
||||
<view class="text-area">
|
||||
<text class="title"> boyue-Geek-App</text>
|
||||
</view>
|
||||
<view class="text-area">
|
||||
<up-text type="primary" text="uview-plus"></up-text>
|
||||
</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="column" :chartData="chartData" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue';
|
||||
|
||||
const chartData = ref({});
|
||||
|
||||
onMounted(() => { getServerData() });
|
||||
|
||||
function getServerData() {
|
||||
// 模拟从服务器获取数据时的延时
|
||||
setTimeout(() => {
|
||||
let res = {
|
||||
categories: ['2016', '2017', '2018', '2019', '2020', '2021'],
|
||||
series: [
|
||||
{
|
||||
name: '目标值',
|
||||
data: [35, 36, 31, 33, 13, 34],
|
||||
},
|
||||
{
|
||||
name: '完成量',
|
||||
data: [18, 27, 21, 24, 6, 28],
|
||||
},
|
||||
],
|
||||
};
|
||||
chartData.value = JSON.parse(JSON.stringify(res));
|
||||
}, 500);
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.logo {
|
||||
height: 200rpx;
|
||||
width: 200rpx;
|
||||
margin-top: 200rpx;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
margin-bottom: 50rpx;
|
||||
}
|
||||
|
||||
.text-area {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 36rpx;
|
||||
color: #8f8f94;
|
||||
}
|
||||
|
||||
.charts-box {
|
||||
width: 100%;
|
||||
height: 300px;
|
||||
}
|
||||
</style>
|
||||
208
boyue-app/src/pages/login.vue
Normal file
208
boyue-app/src/pages/login.vue
Normal file
@ -0,0 +1,208 @@
|
||||
<template>
|
||||
<view class="normal-login-container">
|
||||
<view class="logo-content align-center justify-center flex">
|
||||
<image style="width: 100rpx;height: 100rpx;" :src="globalConfig.appInfo.logo" mode="widthFix">
|
||||
</image>
|
||||
<text class="title">BoYue移动端登录</text>
|
||||
</view>
|
||||
<view class="login-form-content">
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-user icon"></view>
|
||||
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
|
||||
</view>
|
||||
<view class="input-item flex align-center">
|
||||
<view class="iconfont icon-password icon"></view>
|
||||
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" />
|
||||
</view>
|
||||
<view class="input-item flex align-center" style="width: 60%;margin: 0px;" v-if="captchaEnabled">
|
||||
<view class="iconfont icon-code icon"></view>
|
||||
<input v-model="loginForm.code" type="number" class="input" placeholder="请输入验证码" maxlength="4" />
|
||||
<view class="login-code">
|
||||
<image :src="codeUrl" @click="getCode" class="login-code-img"></image>
|
||||
</view>
|
||||
</view>
|
||||
<view class="action-btn">
|
||||
<button @click="handleLogin" class="login-btn cu-btn block bg-blue lg round">登录</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="xieyi text-center">
|
||||
<text class="text-grey1">登录即代表同意</text>
|
||||
<text @click="handleUserAgrement" class="text-blue">《用户协议》</text>
|
||||
<text @click="handlePrivacy" class="text-blue">《隐私协议》</text>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import modal from '@/plugins/modal'
|
||||
import { getCodeImg } from '@/api/login'
|
||||
import { ref } from "vue";
|
||||
import config from '@/config.js'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
import { getWxCode } from '@/utils/boyues';
|
||||
import { wxLogin } from '@/api/oauth';
|
||||
import { setToken } from '@/utils/auth';
|
||||
const userStore = useUserStore()
|
||||
const codeUrl = ref("");
|
||||
const captchaEnabled = ref(true); // 是否开启验证码
|
||||
const useWxLogin = ref(false); // 是否使用微信登录
|
||||
const globalConfig = ref(config);
|
||||
const loginForm = ref({
|
||||
username: "admin",
|
||||
password: "admin123",
|
||||
code: "",
|
||||
uuid: ''
|
||||
});
|
||||
|
||||
if (useWxLogin.value) {
|
||||
getWxCode().then(res => {
|
||||
console.log(res);
|
||||
wxLogin('miniapp',res).then(res => {
|
||||
if(res.token != null){
|
||||
setToken(res.token);
|
||||
loginSuccess()
|
||||
}
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
|
||||
// 获取图形验证码
|
||||
function getCode() {
|
||||
getCodeImg().then(res => {
|
||||
captchaEnabled.value = res.captchaEnabled === undefined ? true : res.captchaEnabled
|
||||
if (captchaEnabled.value) {
|
||||
codeUrl.value = 'data:image/gif;base64,' + res.img
|
||||
loginForm.value.uuid = res.uuid
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
async function handleLogin() {
|
||||
if (loginForm.value.username === "") {
|
||||
modal.msgError("请输入您的账号")
|
||||
} else if (loginForm.value.password === "") {
|
||||
modal.msgError("请输入您的密码")
|
||||
} else if (loginForm.value.code === "" && captchaEnabled.value) {
|
||||
modal.msgError("请输入验证码")
|
||||
} else {
|
||||
modal.loading("登录中，请耐心等待...")
|
||||
pwdLogin()
|
||||
}
|
||||
};
|
||||
// 密码登录
|
||||
async function pwdLogin() {
|
||||
userStore.login(loginForm.value).then(() => {
|
||||
modal.closeLoading()
|
||||
loginSuccess()
|
||||
}).catch(() => {
|
||||
if (captchaEnabled.value) {
|
||||
modal.closeLoading()
|
||||
getCode()
|
||||
}
|
||||
})
|
||||
};
|
||||
|
||||
function loginSuccess(result) {
|
||||
// 设置用户信息
|
||||
userStore.getInfo().then(res => {
|
||||
uni.switchTab({
|
||||
url: '/pages/index'
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
// 隐私协议
|
||||
function handlePrivacy() {
|
||||
let site = globalConfig.value.appInfo.agreements[0];
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
|
||||
});
|
||||
};
|
||||
// 用户协议
|
||||
function handleUserAgrement() {
|
||||
let site = globalConfig.value.appInfo.agreements[1]
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/webview/index?title=${site.title}&url=${site.url}`
|
||||
});
|
||||
};
|
||||
|
||||
getCode();
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.normal-login-container {
|
||||
width: 100%;
|
||||
|
||||
.logo-content {
|
||||
width: 100%;
|
||||
font-size: 21px;
|
||||
text-align: center;
|
||||
padding-top: 15%;
|
||||
|
||||
image {
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.title {
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
.login-form-content {
|
||||
text-align: center;
|
||||
margin: 20px auto;
|
||||
margin-top: 15%;
|
||||
width: 80%;
|
||||
|
||||
.input-item {
|
||||
margin: 20px auto;
|
||||
background-color: #f5f6f7;
|
||||
height: 45px;
|
||||
border-radius: 20px;
|
||||
|
||||
.icon {
|
||||
font-size: 38rpx;
|
||||
margin-left: 10px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.input {
|
||||
width: 100%;
|
||||
font-size: 14px;
|
||||
line-height: 20px;
|
||||
text-align: left;
|
||||
padding-left: 15px;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.login-btn {
|
||||
margin-top: 40px;
|
||||
height: 45px;
|
||||
}
|
||||
|
||||
.xieyi {
|
||||
color: #333;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.login-code {
|
||||
height: 38px;
|
||||
float: right;
|
||||
|
||||
.login-code-img {
|
||||
height: 38px;
|
||||
position: absolute;
|
||||
margin-left: 10px;
|
||||
width: 200rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
237
boyue-app/src/pages/mine.vue
Normal file
237
boyue-app/src/pages/mine.vue
Normal file
@ -0,0 +1,237 @@
|
||||
<template>
|
||||
<view class="mine-container" :style="{ height: `${windowHeight}px` }">
|
||||
<!--顶部个人信息栏-->
|
||||
<view class="header-section">
|
||||
<view class="flex padding justify-between">
|
||||
<view class="flex align-center">
|
||||
<view v-if="!avatar" class="cu-avatar xl round bg-white">
|
||||
<view class="iconfont icon-people text-gray icon"></view>
|
||||
</view>
|
||||
<image v-if="avatar" @click="handleToAvatar" :src="avatar" class="cu-avatar xl round" mode="widthFix">
|
||||
</image>
|
||||
<view v-if="!name" @click="handleToLogin" class="login-tip">
|
||||
点击登录
|
||||
</view>
|
||||
<view v-if="name" @click="handleToInfo" class="user-info">
|
||||
<view class="u_title">
|
||||
用户名：{{ name }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view @click="handleToInfo" class="flex align-center">
|
||||
<text>个人信息</text>
|
||||
<view class="iconfont icon-right"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="content-section">
|
||||
<view class="mine-actions grid col-4 text-center">
|
||||
<view class="action-item" @click="handleJiaoLiuQun">
|
||||
<view class="iconfont icon-friendfill text-pink icon"></view>
|
||||
<text class="text">交流群</text>
|
||||
</view>
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-service text-blue icon"></view>
|
||||
<text class="text">在线客服</text>
|
||||
</view>
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-community text-mauve icon"></view>
|
||||
<text class="text">反馈社区</text>
|
||||
</view>
|
||||
<view class="action-item" @click="handleBuilding">
|
||||
<view class="iconfont icon-dianzan text-green icon"></view>
|
||||
<text class="text">点赞我们</text>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow" @click="handleToEditInfo">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-user menu-icon"></view>
|
||||
<view>编辑资料</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleHelp">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-help menu-icon"></view>
|
||||
<view>常见问题</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleAbout">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-aixin menu-icon"></view>
|
||||
<view>关于我们</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleToSetting">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-setting menu-icon"></view>
|
||||
<view>应用设置</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
</view>
|
||||
</view>
|
||||
<!-- <view>
|
||||
<uni-popup ref="popup" type="dialog">
|
||||
<uni-popup-dialog type="info" cancelText="关闭" confirmText="退出"
|
||||
title="通知" content="确定注销并退出系统吗"
|
||||
@confirm="dialogConfirm"
|
||||
@close="dialogClose">
|
||||
</uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view> -->
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import config from '@/config.js'
|
||||
import useUserStore from '@/store/modules/user'
|
||||
const userStore = useUserStore()
|
||||
const name = userStore.name;
|
||||
const version = config.appInfo.version;
|
||||
|
||||
const avatar = ref(userStore.avatar);
|
||||
const windowHeight = ref(uni.getSystemInfoSync().windowHeight - 50);
|
||||
const popup = ref(null);
|
||||
|
||||
uni.$on('refresh', () => {
|
||||
avatar.value = userStore.avatar;
|
||||
})
|
||||
|
||||
console.log(avatar.value)
|
||||
|
||||
function handleToInfo() {
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/info/index'
|
||||
});
|
||||
};
|
||||
function handleToEditInfo() {
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/info/edit'
|
||||
});
|
||||
};
|
||||
function handleToSetting() {
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/setting/index'
|
||||
});
|
||||
};
|
||||
function handleToLogin() {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login'
|
||||
});
|
||||
};
|
||||
function handleToAvatar() {
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/avatar/index'
|
||||
});
|
||||
};
|
||||
function handleLogout() {
|
||||
popup.value.open();
|
||||
};
|
||||
function dialogConfirm() {
|
||||
//console.log('----------------点击确认------------')
|
||||
|
||||
userStore.logOut().then(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login'
|
||||
});
|
||||
})
|
||||
};
|
||||
function dialogClose() {
|
||||
//console.log('点击关闭')
|
||||
};
|
||||
function handleHelp() {
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/help/index'
|
||||
});
|
||||
};
|
||||
function handleAbout() {
|
||||
uni.navigateTo({
|
||||
url: '/pages_mine/pages/about/index'
|
||||
});
|
||||
};
|
||||
function handleJiaoLiuQun() {
|
||||
uni.showToast({
|
||||
title: 'QQ群：133713780',
|
||||
mask: false,
|
||||
icon: "none",
|
||||
duration: 1000
|
||||
});
|
||||
};
|
||||
function handleBuilding() {
|
||||
uni.showToast({
|
||||
title: '模块建设中~',
|
||||
mask: false,
|
||||
icon: "none",
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f5f6f7;
|
||||
}
|
||||
|
||||
.mine-container {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
|
||||
.header-section {
|
||||
padding: 15px 15px 45px 15px;
|
||||
background-color: #3c96f3;
|
||||
color: white;
|
||||
|
||||
.login-tip {
|
||||
font-size: 18px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.cu-avatar {
|
||||
border: 2px solid #eaeaea;
|
||||
|
||||
.icon {
|
||||
font-size: 40px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-info {
|
||||
margin-left: 15px;
|
||||
|
||||
.u_title {
|
||||
font-size: 18px;
|
||||
line-height: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.content-section {
|
||||
position: relative;
|
||||
top: -50px;
|
||||
|
||||
.mine-actions {
|
||||
margin: 15px 15px;
|
||||
padding: 20px 0px;
|
||||
border-radius: 8px;
|
||||
background-color: white;
|
||||
|
||||
.action-item {
|
||||
.icon {
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.text {
|
||||
display: block;
|
||||
font-size: 13px;
|
||||
margin: 8px 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
131
boyue-app/src/pages/template.config.js
Normal file
131
boyue-app/src/pages/template.config.js
Normal file
@ -0,0 +1,131 @@
|
||||
export default [
|
||||
{
|
||||
groupName: 'geek组件',
|
||||
groupName_en: 'Page',
|
||||
list: [
|
||||
{
|
||||
path: '/pages_geek/pages/index/index',
|
||||
icon: 'wxCenter',
|
||||
title: '组件展示',
|
||||
title_en: 'index',
|
||||
},
|
||||
{
|
||||
path: '/pages_geek/pages/code/index',
|
||||
icon: 'wxCenter',
|
||||
title: '二维码',
|
||||
title_en: 'index',
|
||||
}
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '部件',
|
||||
groupName_en: 'Parts',
|
||||
list: [
|
||||
{
|
||||
path: '/pages_template/pages/coupon/index',
|
||||
icon: 'coupon',
|
||||
title: 'Coupon 优惠券',
|
||||
title_en: 'Coupon',
|
||||
},
|
||||
{
|
||||
path: '/pages_template/pages/citySelect/index',
|
||||
icon: 'citySelect',
|
||||
title: 'CitySelect 城市选择',
|
||||
title_en: 'CitySelect',
|
||||
},
|
||||
{
|
||||
path: '/pages_template/pages/submitBar/index',
|
||||
icon: 'submitBar',
|
||||
title: 'SubmitBar 提交订单栏',
|
||||
title_en: 'SubmitBar',
|
||||
},
|
||||
{
|
||||
path: '/pages_template/pages/keyboardPay/index',
|
||||
icon: 'keyboardPay',
|
||||
title: 'KeyboardPay 自定义键盘支付模板',
|
||||
title_en: 'KeyboardPay',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '报表',
|
||||
groupName_en: 'Parts',
|
||||
list: [
|
||||
{
|
||||
path: '/pages_qiun/pages/finance/index',
|
||||
icon: 'coupon',
|
||||
title: '财务报告',
|
||||
title_en: 'finace',
|
||||
},
|
||||
{
|
||||
path: '/pages_qiun/pages/main/index',
|
||||
icon: 'coupon',
|
||||
title: '数据报表中心',
|
||||
title_en: 'main',
|
||||
},
|
||||
{
|
||||
path: '/pages_qiun/pages/school/index',
|
||||
icon: 'coupon',
|
||||
title: '智慧教育报表中心',
|
||||
title_en: 'school',
|
||||
},
|
||||
{
|
||||
path: '/pages_qiun/pages/sport/index',
|
||||
icon: 'coupon',
|
||||
title: '运动报告',
|
||||
title_en: 'sport',
|
||||
},
|
||||
]
|
||||
},
|
||||
{
|
||||
groupName: '页面',
|
||||
groupName_en: 'Page',
|
||||
list: [
|
||||
{
|
||||
path: '/pages_template/pages/wxCenter/index',
|
||||
icon: 'wxCenter',
|
||||
title: 'WxCenter 仿微信个人中心',
|
||||
title_en: 'WxCenter',
|
||||
},
|
||||
{
|
||||
path: '/pages_template/pages/mallMenu/index1',
|
||||
icon: 'mall_menu_1',
|
||||
title: 'MallMenu 垂直分类(左右独立)',
|
||||
title_en: 'MallMenu 1',
|
||||
}, {
|
||||
path: '/pages_template/pages/mallMenu/index2',
|
||||
icon: 'mall_menu_2',
|
||||
title: 'MallMenu 垂直分类(左右联动)',
|
||||
title_en: 'MallMenu 2',
|
||||
}, {
|
||||
path: '/pages_template/pages/comment/index',
|
||||
icon: 'comment',
|
||||
title: 'Comment 评论列表',
|
||||
title_en: 'Comment',
|
||||
}, {
|
||||
path: '/pages_template/pages/order/index',
|
||||
icon: 'order',
|
||||
title: 'Order 订单列表',
|
||||
title_en: 'Order',
|
||||
},
|
||||
{
|
||||
path: '/pages_template/pages/login/index1',
|
||||
icon: 'login',
|
||||
title: 'Login 登录界面',
|
||||
title_en: 'Login',
|
||||
},
|
||||
{
|
||||
path: '/pages_template/pages/login/index2',
|
||||
icon: 'login',
|
||||
title: 'Login 水滴登录',
|
||||
title_en: 'Login',
|
||||
},
|
||||
{
|
||||
path: '/pages_template/pages/address/index',
|
||||
icon: 'address',
|
||||
title: 'Address 收货地址',
|
||||
title_en: 'Address',
|
||||
},
|
||||
]
|
||||
},
|
||||
]
|
||||
65
boyue-app/src/pages/template.vue
Normal file
65
boyue-app/src/pages/template.vue
Normal file
@ -0,0 +1,65 @@
|
||||
<template>
|
||||
<view class="wrap">
|
||||
<view class="list-wrap">
|
||||
<u-cell-group title-bg-color="rgb(243, 244, 246)" :title="getGroupTitle(item)" v-for="(item, index) in list"
|
||||
:key="index">
|
||||
<u-cell :titleStyle="{ fontWeight: 500 }" @click="openPage(item1.path)" :title="getFieldTitle(item1)"
|
||||
v-for="(item1, index1) in item.list" :key="index1">
|
||||
<template v-slot:icon>
|
||||
<image class="u-cell-icon" :src="getIcon(item1.icon)" mode="widthFix"></image>
|
||||
</template>
|
||||
</u-cell>
|
||||
</u-cell-group>
|
||||
</view>
|
||||
<u-gap height="70"></u-gap>
|
||||
<!-- <u-tabbar :list="vuex_tabbar" :mid-button="true"></u-tabbar> -->
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import list from "./template.config.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
list: list,
|
||||
// desc: '收集众多的常用页面和布局，减少开发者的重复工作，让你专注逻辑，事半功倍'
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
getIcon() {
|
||||
return path => {
|
||||
return '../static/uview/demo/' + path + '.png';
|
||||
return 'https://cdn.uviewui.com/uview/example/' + path + '.png';
|
||||
}
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
openPage(path) {
|
||||
this.$u.route({
|
||||
url: path
|
||||
})
|
||||
},
|
||||
getGroupTitle(item) {
|
||||
return item.groupName
|
||||
},
|
||||
getFieldTitle(item) {
|
||||
return item.title
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* page {
|
||||
background-color: rgb(240, 242, 244);
|
||||
} */
|
||||
</style>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.u-cell-icon {
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
margin-right: 8rpx;
|
||||
}
|
||||
</style>
|
||||
|
||||
184
boyue-app/src/pages/work.vue
Normal file
184
boyue-app/src/pages/work.vue
Normal file
@ -0,0 +1,184 @@
|
||||
<template>
|
||||
<view class="work-container">
|
||||
<!-- 轮播图 -->
|
||||
<uni-swiper-dot class="uni-swiper-dot-box" :info="data" :current="current" field="content">
|
||||
<swiper class="swiper-box" :current="swiperDotIndex" @change="changeSwiper">
|
||||
<swiper-item v-for="(item, index) in data" :key="index">
|
||||
<view class="swiper-item" @click="clickBannerItem(item)">
|
||||
<image :src="item.image" mode="aspectFill" :draggable="false" />
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</uni-swiper-dot>
|
||||
|
||||
<!-- 宫格组件 -->
|
||||
<uni-section title="系统管理" type="line"></uni-section>
|
||||
<view class="grid-body">
|
||||
<uni-grid :column="4" :showBorder="false" @change="changeGrid">
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="person-filled" size="30"></uni-icons>
|
||||
<text class="text">用户管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="staff-filled" size="30"></uni-icons>
|
||||
<text class="text">角色管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="color" size="30"></uni-icons>
|
||||
<text class="text">菜单管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="settings-filled" size="30"></uni-icons>
|
||||
<text class="text">部门管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="heart-filled" size="30"></uni-icons>
|
||||
<text class="text">岗位管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="bars" size="30"></uni-icons>
|
||||
<text class="text">字典管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="gear-filled" size="30"></uni-icons>
|
||||
<text class="text">参数设置</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="chat-filled" size="30"></uni-icons>
|
||||
<text class="text">通知公告</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
<uni-grid-item>
|
||||
<view class="grid-item-box">
|
||||
<uni-icons type="wallet-filled" size="30"></uni-icons>
|
||||
<text class="text">日志管理</text>
|
||||
</view>
|
||||
</uni-grid-item>
|
||||
</uni-grid>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import modal from "@/plugins/modal"
|
||||
const current=ref(0);
|
||||
const swiperDotIndex=ref(0);
|
||||
const data=ref([{
|
||||
image: '/static/images/banner/banner01.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner02.jpg'
|
||||
},
|
||||
{
|
||||
image: '/static/images/banner/banner03.jpg'
|
||||
}
|
||||
]);
|
||||
|
||||
function clickBannerItem(item) {
|
||||
console.info(item)
|
||||
};
|
||||
function changeSwiper(e) {
|
||||
current.value = e.detail.current
|
||||
}
|
||||
function changeGrid(e) {
|
||||
modal.showToast({
|
||||
title: '模块建设中',
|
||||
mask: false,
|
||||
icon:'loading',
|
||||
duration: 1000
|
||||
});
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
/* #ifndef APP-NVUE */
|
||||
page {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
background-color: #fff;
|
||||
min-height: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
view {
|
||||
font-size: 14px;
|
||||
line-height: inherit;
|
||||
}
|
||||
|
||||
/* #endif */
|
||||
|
||||
.text {
|
||||
text-align: center;
|
||||
font-size: 26rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.grid-item-box {
|
||||
flex: 1;
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 15px 0;
|
||||
}
|
||||
|
||||
.uni-margin-wrap {
|
||||
width: 690rpx;
|
||||
width: 100%;
|
||||
;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 300rpx;
|
||||
}
|
||||
|
||||
.swiper-box {
|
||||
height: 150px;
|
||||
}
|
||||
|
||||
.swiper-item {
|
||||
/* #ifndef APP-NVUE */
|
||||
display: flex;
|
||||
/* #endif */
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
color: #fff;
|
||||
height: 300rpx;
|
||||
line-height: 300rpx;
|
||||
}
|
||||
|
||||
@media screen and (min-width: 500px) {
|
||||
.uni-swiper-dot-box {
|
||||
width: 400px;
|
||||
/* #ifndef APP-NVUE */
|
||||
margin: 0 auto;
|
||||
/* #endif */
|
||||
margin-top: 8px;
|
||||
}
|
||||
|
||||
.image {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
130
boyue-app/src/pages_geek/pages/code/index.vue
Normal file
130
boyue-app/src/pages_geek/pages/code/index.vue
Normal file
@ -0,0 +1,130 @@
|
||||
<template xlang="wxml">
|
||||
<view class="container">
|
||||
<view class="qrimg">
|
||||
<view class="qrimg-i">
|
||||
<geek-qrcode v-if="ifShow" cid="qrcode1" ref="qrcode" :val="val" :size="size" :unit="unit"
|
||||
:background="background" :foreground="foreground" :pdground="pdground" :icon="icon" :iconSize="iconsize"
|
||||
:lv="lv" :onval="onval" :loadMake="loadMake" :usingComponents="true" @result="qrR" />
|
||||
</view>
|
||||
<view class="qrimg-i">
|
||||
<geek-qrcode v-if="ifShow" cid="qrcode2" ref="qrcode2" val="第二个二维码" :size="size" :onval="onval"
|
||||
:loadMake="loadMake" :usingComponents="true" @result="qrR" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="uni-title">请输入要生成的二维码内容</view>
|
||||
</view>
|
||||
<view class="uni-list">
|
||||
<input class="uni-input" placeholder="请输入要生成的二维码内容" v-model="val" />
|
||||
</view>
|
||||
<view class="uni-padding-wrap uni-common-mt">
|
||||
<view class="uni-title">设置二维码大小</view>
|
||||
</view>
|
||||
<view class="body-view">
|
||||
<slider :value="size" @change="sliderchange" min="50" max="500" show-value />
|
||||
</view>
|
||||
<view class="uni-padding-wrap">
|
||||
<view class="btns">
|
||||
<button type="primary" @tap="selectIcon">选择二维码图标</button>
|
||||
<button type="primary" @tap="creatQrcode">生成二维码</button>
|
||||
<button type="primary" @tap="saveQrcode">保存到图库</button>
|
||||
<button type="warn" @tap="clearQrcode">清除二维码</button>
|
||||
<button type="warn" @tap="ifQrcode">显示隐藏二维码</button>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
ifShow: true,
|
||||
val: '二维码', // 要生成的二维码值
|
||||
size: 200, // 二维码大小
|
||||
unit: 'upx', // 单位
|
||||
background: '#b4e9e2', // 背景色
|
||||
foreground: '#309286', // 前景色
|
||||
pdground: '#32dbc6', // 角标色
|
||||
icon: '', // 二维码图标
|
||||
iconsize: 40, // 二维码图标大小
|
||||
lv: 3, // 二维码容错级别 ， 一般不用设置，默认就行
|
||||
onval: false, // val值变化时自动重新生成二维码
|
||||
loadMake: true, // 组件加载完成后自动生成二维码
|
||||
src: '' // 二维码生成后的图片地址或base64
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
sliderchange(e) {
|
||||
this.size = e.detail.value
|
||||
},
|
||||
creatQrcode() {
|
||||
this.$refs.qrcode._makeCode()
|
||||
},
|
||||
saveQrcode() {
|
||||
this.$refs.qrcode._saveCode()
|
||||
},
|
||||
qrR(res) {
|
||||
this.src = res
|
||||
},
|
||||
clearQrcode() {
|
||||
this.$refs.qrcode._clearCode()
|
||||
this.val = ''
|
||||
},
|
||||
ifQrcode() {
|
||||
this.ifShow = !this.ifShow
|
||||
},
|
||||
selectIcon() {
|
||||
let that = this
|
||||
uni.chooseImage({
|
||||
count: 1, //默认9
|
||||
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
|
||||
sourceType: ['album'], //从相册选择
|
||||
success: function (res) {
|
||||
that.icon = res.tempFilePaths[0]
|
||||
setTimeout(() => {
|
||||
that.creatQrcode()
|
||||
}, 100);
|
||||
// console.log(res.tempFilePaths);
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* @import "../../../common/icon.css"; */
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.qrimg {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.qrimg-i {
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
slider {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
input {
|
||||
width: 100%;
|
||||
margin-bottom: 20upx;
|
||||
}
|
||||
|
||||
.btns {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
margin-top: 10upx;
|
||||
}</style>
|
||||
131
boyue-app/src/pages_geek/pages/index/index.vue
Normal file
131
boyue-app/src/pages_geek/pages/index/index.vue
Normal file
@ -0,0 +1,131 @@
|
||||
<template>
|
||||
<view style="background-color: #f6f6f6;">
|
||||
<uni-section class="mb-10" title="数值板" sub-title="statistic" type="line"></uni-section>
|
||||
<u-row gutter="0">
|
||||
<u-col span="6">
|
||||
<geek-statistic label="订单数量(个)" labelColor="#1f1f1f" :number="0" numberColor="red" />
|
||||
</u-col>
|
||||
<u-col span="6">
|
||||
<geek-statistic label="交易金额(元)" labelColor="#1f1f1f" :number="0" numberColor="red" />
|
||||
</u-col>
|
||||
</u-row>
|
||||
|
||||
<uni-section class="mb-10" title="菜单" sub-title="menu" type="line"></uni-section>
|
||||
<view style="width: 100%; display: flex;justify-content:space-evenly;align-items: center;">
|
||||
<geek-menu v-for="menu, index in menus" :key="index" v-bind=menu :size="60" @click="modal.msg(menu.label)"
|
||||
type="circle" />
|
||||
</view>
|
||||
<view style="width: 100%; display: flex;justify-content:space-evenly;align-items: center;">
|
||||
<geek-menu v-for="menu, index in menus" :key="index" :icon="menu.icon" :label="menu.label" :size="60"
|
||||
@click="modal.msg(menu.label)" type="rect" />
|
||||
</view>
|
||||
|
||||
<uni-section class="mb-10" title="商品列表" sub-title="commodity" type="line"></uni-section>
|
||||
<view style="display: flex;flex-direction: column;justify-content: center;align-items: center;">
|
||||
<geek-commodity v-for="item, index in commodityList" :key="index" v-bind="item" type="line"
|
||||
@click="modal.msg(item.title)" />
|
||||
</view>
|
||||
<view style="display: flex;justify-content: center;">
|
||||
<view>
|
||||
<geek-commodity v-for="item, index in commodityList.slice(0, 2)" :key="index" v-bind="item" type="rect"
|
||||
@click="modal.msg(item.title)" />
|
||||
</view>
|
||||
<view>
|
||||
<geek-commodity v-for="item, index in commodityList.slice(1, 3)" :key="index" v-bind="item" type="rect"
|
||||
@click="modal.msg(item.title)" />
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<uni-section class="mb-10" title="订单列表" sub-title="order" type="line"></uni-section>
|
||||
<geek-order v-for="item, index in orderList" :key="index" v-bind="item" @more="modal.msg('更多')"
|
||||
@again="modal.msg('再次购买')" @return="modal.msg('退换')" @sell="modal.msg('卖了换钱')"></geek-order>
|
||||
|
||||
<uni-section class="mb-10" title="颜色选择器" sub-title="order" type="line"></uni-section>
|
||||
<geek-color-picker ref="gk" @confirm="getcolor"></geek-color-picker>
|
||||
<button @click="open()">打开颜色选择器</button>
|
||||
|
||||
|
||||
<uni-section class="mb-10" title="二维码" sub-title="order" type="line"></uni-section>
|
||||
<view style="display: flex;align-items: center;justify-content: center;">
|
||||
<geek-qrcode cid="qrcode2" ref="qrcode2" val="二维码" :loadMake="true" />
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from 'vue';
|
||||
import modal from '@/plugins/modal'
|
||||
import { Commodity, CommodityOrder, Menu } from "@/components/geek-xd/types"
|
||||
|
||||
const gk = ref(null)
|
||||
function open() {
|
||||
//@ts-ignore
|
||||
gk.value.open()
|
||||
}
|
||||
function getcolor(color: { hex: string, rgba: { r: number, g: number, b: number, a: number } }) {
|
||||
console.log(color)
|
||||
}
|
||||
|
||||
const menus: Array<Menu> = reactive([
|
||||
{ icon: "/static/images/icon/rocket.png", label: '抢单' },
|
||||
{ icon: "/static/images/icon/phone.png", label: '回访' },
|
||||
{ icon: "/static/images/icon/message.png", label: '消息' },
|
||||
{ icon: "/static/images/icon/dialogue.png", label: '公告' },
|
||||
{ icon: "/static/images/icon/knowledge.png", label: '知识库' }
|
||||
]);
|
||||
|
||||
const commodityList: Array<Commodity> = reactive([
|
||||
{
|
||||
img: '/static/images/banner/banner01.jpg',
|
||||
title: '商品1',
|
||||
subTitle: '商品1简介',
|
||||
price: 100,
|
||||
},
|
||||
{
|
||||
img: '/static/images/banner/banner02.jpg',
|
||||
title: '商品2',
|
||||
subTitle: '商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介商品2简介',
|
||||
price: 300,
|
||||
},
|
||||
{
|
||||
img: '/static/images/banner/banner03.jpg',
|
||||
title: '商品3',
|
||||
subTitle: '商品3简介',
|
||||
price: 200,
|
||||
}
|
||||
])
|
||||
|
||||
const orderList: Array<CommodityOrder> = [
|
||||
{
|
||||
shop: 'geek自营旗舰店',
|
||||
status: '完成',
|
||||
img: '/static/images/banner/banner01.jpg',
|
||||
title: '商品1',
|
||||
label: '商品1简介',
|
||||
price: 100.32,
|
||||
num: 10
|
||||
},
|
||||
{
|
||||
shop: 'geek自营旗舰店',
|
||||
status: '已取消',
|
||||
img: '/static/images/banner/banner03.jpg',
|
||||
title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
|
||||
label: '商品3简介',
|
||||
price: 2000.67,
|
||||
num: 10
|
||||
},
|
||||
{
|
||||
shop: 'geek自营旗舰店',
|
||||
status: '已取消',
|
||||
img: '/static/images/banner/banner03.jpg',
|
||||
title: '商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商商品3',
|
||||
label: '商品3简介',
|
||||
price: 10.67,
|
||||
num: 10
|
||||
}
|
||||
]
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
71
boyue-app/src/pages_mine/pages/about/index.vue
Normal file
71
boyue-app/src/pages_mine/pages/about/index.vue
Normal file
@ -0,0 +1,71 @@
|
||||
<template>
|
||||
<view class="about-container">
|
||||
<view class="header-section text-center">
|
||||
<image style="width: 150rpx;height: 150rpx;" src="/static/logo200.png" mode="widthFix">
|
||||
</image>
|
||||
<uni-title type="h2" title="若依移动端"></uni-title>
|
||||
</view>
|
||||
|
||||
<view class="content-section">
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>版本信息</view>
|
||||
<view class="text-right">v{{version}}</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>官方邮箱</view>
|
||||
<view class="text-right">boyue@xx.com</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>服务热线</view>
|
||||
<view class="text-right">400-999-9999</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow">
|
||||
<view class="menu-item-box">
|
||||
<view>公司网站</view>
|
||||
<view class="text-right">
|
||||
<uni-link :href="url" :text="url" showUnderLine="false"></uni-link>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="copyright">
|
||||
<view>Copyright © 2022 boyue.vip All Rights Reserved.</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import config from '@/config.js'
|
||||
const url=config.appInfo.site_url;
|
||||
const version=config.appInfo.version;
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.copyright {
|
||||
margin-top: 50rpx;
|
||||
text-align: center;
|
||||
line-height: 60rpx;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.header-section {
|
||||
display: flex;
|
||||
padding: 30rpx 0 0;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
</style>
|
||||
642
boyue-app/src/pages_mine/pages/avatar/index.vue
Normal file
642
boyue-app/src/pages_mine/pages/avatar/index.vue
Normal file
@ -0,0 +1,642 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="page-body uni-content-info">
|
||||
<view class='cropper-content'>
|
||||
<view v-if="isShowImg" class="uni-corpper"
|
||||
:style="'width:' + cropperInitW + 'px;height:' + cropperInitH + 'px;background:#000'">
|
||||
<view class="uni-corpper-content"
|
||||
:style="'width:' + cropperW + 'px;height:' + cropperH + 'px;left:' + cropperL + 'px;top:' + cropperT + 'px'">
|
||||
<image :src="imageSrc" :style="'width:' + cropperW + 'px;height:' + cropperH + 'px'"></image>
|
||||
<view class="uni-corpper-crop-box" @touchstart.stop="contentStartMove"
|
||||
@touchmove.stop="contentMoveing" @touchend.stop="contentTouchEnd"
|
||||
:style="'left:' + cutL + 'px;top:' + cutT + 'px;right:' + cutR + 'px;bottom:' + cutB + 'px'">
|
||||
<view class="uni-cropper-view-box">
|
||||
<view class="uni-cropper-dashed-h"></view>
|
||||
<view class="uni-cropper-dashed-v"></view>
|
||||
<view class="uni-cropper-line-t" data-drag="top" @touchstart.stop="dragStart"
|
||||
@touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-line-r" data-drag="right" @touchstart.stop="dragStart"
|
||||
@touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-line-b" data-drag="bottom" @touchstart.stop="dragStart"
|
||||
@touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-line-l" data-drag="left" @touchstart.stop="dragStart"
|
||||
@touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-t" data-drag="top" @touchstart.stop="dragStart"
|
||||
@touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-tr" data-drag="topTight"></view>
|
||||
<view class="uni-cropper-point point-r" data-drag="right" @touchstart.stop="dragStart"
|
||||
@touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-rb" data-drag="rightBottom"
|
||||
@touchstart.stop="dragStart" @touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-b" data-drag="bottom" @touchstart.stop="dragStart"
|
||||
@touchmove.stop="dragMove" @touchend.stop="dragEnd"></view>
|
||||
<view class="uni-cropper-point point-bl" data-drag="bottomLeft"></view>
|
||||
<view class="uni-cropper-point point-l" data-drag="left" @touchstart.stop="dragStart"
|
||||
@touchmove.stop="dragMove"></view>
|
||||
<view class="uni-cropper-point point-lt" data-drag="leftTop"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class='cropper-config'>
|
||||
<button type="primary reverse" @click="getImage" style='margin-top: 30rpx;'> 选择头像 </button>
|
||||
<button type="warn" @click="getImageInfo" style='margin-top: 30rpx;'> 提交 </button>
|
||||
</view>
|
||||
<canvas canvas-id="myCanvas"
|
||||
:style="'position:absolute;border: 1px solid red; width:' + imageW + 'px;height:' + imageH + 'px;top:-9999px;left:-9999px;'"></canvas>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import config from '@/config'
|
||||
import { uploadAvatar } from "@/api/system/user"
|
||||
import useUserStore from '@/store/modules/user'
|
||||
|
||||
const baseUrl = config.baseUrl
|
||||
let sysInfo = uni.getSystemInfoSync()
|
||||
let SCREEN_WIDTH = sysInfo.screenWidth
|
||||
let PAGE_X, // 手按下的x位置
|
||||
PAGE_Y, // 手按下y的位置
|
||||
PR = sysInfo.pixelRatio, // dpi
|
||||
T_PAGE_X, // 手移动的时候x的位置
|
||||
T_PAGE_Y, // 手移动的时候Y的位置
|
||||
CUT_L, // 初始化拖拽元素的left值
|
||||
CUT_T, // 初始化拖拽元素的top值
|
||||
CUT_R, // 初始化拖拽元素的
|
||||
CUT_B, // 初始化拖拽元素的
|
||||
CUT_W, // 初始化拖拽元素的宽度
|
||||
CUT_H, // 初始化拖拽元素的高度
|
||||
IMG_RATIO, // 图片比例
|
||||
IMG_REAL_W, // 图片实际的宽度
|
||||
IMG_REAL_H, // 图片实际的高度
|
||||
DRAFG_MOVE_RATIO = 1, //移动时候的比例,
|
||||
INIT_DRAG_POSITION = 100, // 初始化屏幕宽度和裁剪区域的宽度之差，用于设置初始化裁剪的宽度
|
||||
DRAW_IMAGE_W = sysInfo.screenWidth // 设置生成的图片宽度
|
||||
|
||||
export default {
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data() {
|
||||
return {
|
||||
imageSrc: useUserStore().avatar,
|
||||
isShowImg: false,
|
||||
// 初始化的宽高
|
||||
cropperInitW: SCREEN_WIDTH,
|
||||
cropperInitH: SCREEN_WIDTH,
|
||||
// 动态的宽高
|
||||
cropperW: SCREEN_WIDTH,
|
||||
cropperH: SCREEN_WIDTH,
|
||||
// 动态的left top值
|
||||
cropperL: 0,
|
||||
cropperT: 0,
|
||||
|
||||
transL: 0,
|
||||
transT: 0,
|
||||
|
||||
// 图片缩放值
|
||||
scaleP: 0,
|
||||
imageW: 0,
|
||||
imageH: 0,
|
||||
|
||||
// 裁剪框 宽高
|
||||
cutL: 0,
|
||||
cutT: 0,
|
||||
cutB: SCREEN_WIDTH,
|
||||
cutR: '100%',
|
||||
qualityWidth: DRAW_IMAGE_W,
|
||||
innerAspectRadio: DRAFG_MOVE_RATIO
|
||||
}
|
||||
},
|
||||
/**
|
||||
* 生命周期函数--监听页面初次渲染完成
|
||||
*/
|
||||
onReady: function () {
|
||||
this.loadImage()
|
||||
},
|
||||
methods: {
|
||||
setData: function (obj) {
|
||||
let that = this
|
||||
Object.keys(obj).forEach(function (key) {
|
||||
that.$set(that.$data, key, obj[key])
|
||||
})
|
||||
},
|
||||
getImage: function () {
|
||||
var _this = this
|
||||
uni.chooseImage({
|
||||
success: function (res) {
|
||||
_this.setData({
|
||||
imageSrc: res.tempFilePaths[0],
|
||||
})
|
||||
_this.loadImage()
|
||||
},
|
||||
})
|
||||
},
|
||||
loadImage: function () {
|
||||
var _this = this
|
||||
|
||||
uni.getImageInfo({
|
||||
src: _this.imageSrc,
|
||||
success: function success(res) {
|
||||
IMG_RATIO = 1 / 1
|
||||
if (IMG_RATIO >= 1) {
|
||||
IMG_REAL_W = SCREEN_WIDTH
|
||||
IMG_REAL_H = SCREEN_WIDTH / IMG_RATIO
|
||||
} else {
|
||||
IMG_REAL_W = SCREEN_WIDTH * IMG_RATIO
|
||||
IMG_REAL_H = SCREEN_WIDTH
|
||||
}
|
||||
let minRange = IMG_REAL_W > IMG_REAL_H ? IMG_REAL_W : IMG_REAL_H
|
||||
INIT_DRAG_POSITION = minRange > INIT_DRAG_POSITION ? INIT_DRAG_POSITION : minRange
|
||||
// 根据图片的宽高显示不同的效果 保证图片可以正常显示
|
||||
if (IMG_RATIO >= 1) {
|
||||
let cutT = Math.ceil((SCREEN_WIDTH / IMG_RATIO - (SCREEN_WIDTH / IMG_RATIO - INIT_DRAG_POSITION)) / 2)
|
||||
let cutB = cutT
|
||||
let cutL = Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH + INIT_DRAG_POSITION) / 2)
|
||||
let cutR = cutL
|
||||
_this.setData({
|
||||
cropperW: SCREEN_WIDTH,
|
||||
cropperH: SCREEN_WIDTH / IMG_RATIO,
|
||||
// 初始化left right
|
||||
cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
|
||||
cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH / IMG_RATIO) / 2),
|
||||
cutL: cutL,
|
||||
cutT: cutT,
|
||||
cutR: cutR,
|
||||
cutB: cutB,
|
||||
// 图片缩放值
|
||||
imageW: IMG_REAL_W,
|
||||
imageH: IMG_REAL_H,
|
||||
scaleP: IMG_REAL_W / SCREEN_WIDTH,
|
||||
qualityWidth: DRAW_IMAGE_W,
|
||||
innerAspectRadio: IMG_RATIO
|
||||
})
|
||||
} else {
|
||||
let cutL = Math.ceil((SCREEN_WIDTH * IMG_RATIO - (SCREEN_WIDTH * IMG_RATIO)) / 2)
|
||||
let cutR = cutL
|
||||
let cutT = Math.ceil((SCREEN_WIDTH - INIT_DRAG_POSITION) / 2)
|
||||
let cutB = cutT
|
||||
_this.setData({
|
||||
cropperW: SCREEN_WIDTH * IMG_RATIO,
|
||||
cropperH: SCREEN_WIDTH,
|
||||
// 初始化left right
|
||||
cropperL: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH * IMG_RATIO) / 2),
|
||||
cropperT: Math.ceil((SCREEN_WIDTH - SCREEN_WIDTH) / 2),
|
||||
|
||||
cutL: cutL,
|
||||
cutT: cutT,
|
||||
cutR: cutR,
|
||||
cutB: cutB,
|
||||
// 图片缩放值
|
||||
imageW: IMG_REAL_W,
|
||||
imageH: IMG_REAL_H,
|
||||
scaleP: IMG_REAL_W / SCREEN_WIDTH,
|
||||
qualityWidth: DRAW_IMAGE_W,
|
||||
innerAspectRadio: IMG_RATIO
|
||||
})
|
||||
}
|
||||
_this.setData({
|
||||
isShowImg: true
|
||||
})
|
||||
uni.hideLoading()
|
||||
}
|
||||
})
|
||||
},
|
||||
// 拖动时候触发的touchStart事件
|
||||
contentStartMove(e) {
|
||||
PAGE_X = e.touches[0].pageX
|
||||
PAGE_Y = e.touches[0].pageY
|
||||
},
|
||||
|
||||
// 拖动时候触发的touchMove事件
|
||||
contentMoveing(e) {
|
||||
var _this = this
|
||||
var dragLengthX = (PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
var dragLengthY = (PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
// 左移
|
||||
if (dragLengthX > 0) {
|
||||
if (this.cutL - dragLengthX < 0) dragLengthX = this.cutL
|
||||
} else {
|
||||
if (this.cutR + dragLengthX < 0) dragLengthX = -this.cutR
|
||||
}
|
||||
|
||||
if (dragLengthY > 0) {
|
||||
if (this.cutT - dragLengthY < 0) dragLengthY = this.cutT
|
||||
} else {
|
||||
if (this.cutB + dragLengthY < 0) dragLengthY = -this.cutB
|
||||
}
|
||||
this.setData({
|
||||
cutL: this.cutL - dragLengthX,
|
||||
cutT: this.cutT - dragLengthY,
|
||||
cutR: this.cutR + dragLengthX,
|
||||
cutB: this.cutB + dragLengthY
|
||||
})
|
||||
|
||||
PAGE_X = e.touches[0].pageX
|
||||
PAGE_Y = e.touches[0].pageY
|
||||
},
|
||||
|
||||
contentTouchEnd() {
|
||||
|
||||
},
|
||||
|
||||
// 获取图片
|
||||
getImageInfo() {
|
||||
var _this = this
|
||||
uni.showLoading({
|
||||
title: '图片生成中...',
|
||||
})
|
||||
// 将图片写入画布
|
||||
const ctx = uni.createCanvasContext('myCanvas')
|
||||
ctx.drawImage(_this.imageSrc, 0, 0, IMG_REAL_W, IMG_REAL_H)
|
||||
ctx.draw(true, () => {
|
||||
// 获取画布要裁剪的位置和宽度 均为百分比 * 画布中图片的宽度 保证了在微信小程序中裁剪的图片模糊 位置不对的问题 canvasT = (_this.cutT / _this.cropperH) * (_this.imageH / pixelRatio)
|
||||
var canvasW = ((_this.cropperW - _this.cutL - _this.cutR) / _this.cropperW) * IMG_REAL_W
|
||||
var canvasH = ((_this.cropperH - _this.cutT - _this.cutB) / _this.cropperH) * IMG_REAL_H
|
||||
var canvasL = (_this.cutL / _this.cropperW) * IMG_REAL_W
|
||||
var canvasT = (_this.cutT / _this.cropperH) * IMG_REAL_H
|
||||
uni.canvasToTempFilePath({
|
||||
x: canvasL,
|
||||
y: canvasT,
|
||||
width: canvasW,
|
||||
height: canvasH,
|
||||
destWidth: canvasW,
|
||||
destHeight: canvasH,
|
||||
quality: 0.5,
|
||||
canvasId: 'myCanvas',
|
||||
success: function (res) {
|
||||
uni.hideLoading()
|
||||
let data = { name: 'avatarfile', filePath: res.tempFilePath }
|
||||
uploadAvatar(data).then(response => {
|
||||
// userStore.avatar = response.imgUrl
|
||||
/*cloud*/
|
||||
useUserStore().avatar = baseUrl + response.imgUrl
|
||||
uni.showToast({ title: "修改成功", icon: 'success' })
|
||||
uni.$emit('refresh');
|
||||
uni.navigateBack();
|
||||
})
|
||||
}
|
||||
})
|
||||
})
|
||||
},
|
||||
// 设置大小的时候触发的touchStart事件
|
||||
dragStart(e) {
|
||||
T_PAGE_X = e.touches[0].pageX
|
||||
T_PAGE_Y = e.touches[0].pageY
|
||||
CUT_L = this.cutL
|
||||
CUT_R = this.cutR
|
||||
CUT_B = this.cutB
|
||||
CUT_T = this.cutT
|
||||
},
|
||||
|
||||
// 设置大小的时候触发的touchMove事件
|
||||
dragMove(e) {
|
||||
var _this = this
|
||||
var dragType = e.target.dataset.drag
|
||||
switch (dragType) {
|
||||
case 'right':
|
||||
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
if (CUT_R + dragLength < 0) dragLength = -CUT_R
|
||||
this.setData({
|
||||
cutR: CUT_R + dragLength
|
||||
})
|
||||
break
|
||||
case 'left':
|
||||
var dragLength = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
if (CUT_L - dragLength < 0) dragLength = CUT_L
|
||||
if ((CUT_L - dragLength) > (this.cropperW - this.cutR)) dragLength = CUT_L - (this.cropperW - this.cutR)
|
||||
this.setData({
|
||||
cutL: CUT_L - dragLength
|
||||
})
|
||||
break
|
||||
case 'top':
|
||||
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
if (CUT_T - dragLength < 0) dragLength = CUT_T
|
||||
if ((CUT_T - dragLength) > (this.cropperH - this.cutB)) dragLength = CUT_T - (this.cropperH - this.cutB)
|
||||
this.setData({
|
||||
cutT: CUT_T - dragLength
|
||||
})
|
||||
break
|
||||
case 'bottom':
|
||||
var dragLength = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
if (CUT_B + dragLength < 0) dragLength = -CUT_B
|
||||
this.setData({
|
||||
cutB: CUT_B + dragLength
|
||||
})
|
||||
break
|
||||
case 'rightBottom':
|
||||
var dragLengthX = (T_PAGE_X - e.touches[0].pageX) * DRAFG_MOVE_RATIO
|
||||
var dragLengthY = (T_PAGE_Y - e.touches[0].pageY) * DRAFG_MOVE_RATIO
|
||||
|
||||
if (CUT_B + dragLengthY < 0) dragLengthY = -CUT_B
|
||||
if (CUT_R + dragLengthX < 0) dragLengthX = -CUT_R
|
||||
let cutB = CUT_B + dragLengthY
|
||||
let cutR = CUT_R + dragLengthX
|
||||
|
||||
this.setData({
|
||||
cutB: cutB,
|
||||
cutR: cutR
|
||||
})
|
||||
break
|
||||
default:
|
||||
break
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* pages/uni-cropper/index.wxss */
|
||||
|
||||
.cropper-config {
|
||||
padding: 20rpx 40rpx;
|
||||
}
|
||||
|
||||
.cropper-content {
|
||||
min-height: 750rpx;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.uni-corpper {
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
user-select: none;
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
-webkit-touch-callout: none;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
.uni-corpper-content {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.uni-corpper-content image {
|
||||
display: block;
|
||||
width: 100%;
|
||||
min-width: 0 !important;
|
||||
max-width: none !important;
|
||||
height: 100%;
|
||||
min-height: 0 !important;
|
||||
max-height: none !important;
|
||||
image-orientation: 0deg !important;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
/* 移动图片效果 */
|
||||
|
||||
.uni-cropper-drag-box {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
cursor: move;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* 内部的信息 */
|
||||
|
||||
.uni-corpper-crop-box {
|
||||
position: absolute;
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
.uni-corpper-crop-box .uni-cropper-view-box {
|
||||
position: relative;
|
||||
display: block;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: visible;
|
||||
outline: 1rpx solid #69f;
|
||||
outline-color: rgba(102, 153, 255, .75)
|
||||
}
|
||||
|
||||
/* 横向虚线 */
|
||||
|
||||
.uni-cropper-dashed-h {
|
||||
position: absolute;
|
||||
top: 33.33333333%;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 33.33333333%;
|
||||
border-top: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
border-bottom: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 纵向虚线 */
|
||||
|
||||
.uni-cropper-dashed-v {
|
||||
position: absolute;
|
||||
left: 33.33333333%;
|
||||
top: 0;
|
||||
width: 33.33333333%;
|
||||
height: 100%;
|
||||
border-left: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
border-right: 1rpx dashed rgba(255, 255, 255, 0.5);
|
||||
}
|
||||
|
||||
/* 四个方向的线 为了之后的拖动事件*/
|
||||
|
||||
.uni-cropper-line-t {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #69f;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 1rpx;
|
||||
opacity: 0.1;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-t::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0rpx;
|
||||
width: 100%;
|
||||
-webkit-transform: translate3d(0, -50%, 0);
|
||||
transform: translate3d(0, -50%, 0);
|
||||
bottom: 0;
|
||||
height: 41rpx;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-line-r {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #69f;
|
||||
top: 0;
|
||||
right: 0rpx;
|
||||
width: 1rpx;
|
||||
opacity: 0.1;
|
||||
height: 100%;
|
||||
cursor: e-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-r::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 41rpx;
|
||||
-webkit-transform: translate3d(-50%, 0, 0);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-line-b {
|
||||
position: absolute;
|
||||
display: block;
|
||||
width: 100%;
|
||||
background-color: #69f;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
height: 1rpx;
|
||||
opacity: 0.1;
|
||||
cursor: s-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-b::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
right: 0rpx;
|
||||
width: 100%;
|
||||
-webkit-transform: translate3d(0, -50%, 0);
|
||||
transform: translate3d(0, -50%, 0);
|
||||
bottom: 0;
|
||||
height: 41rpx;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-line-l {
|
||||
position: absolute;
|
||||
display: block;
|
||||
background-color: #69f;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 1rpx;
|
||||
opacity: 0.1;
|
||||
height: 100%;
|
||||
cursor: w-resize;
|
||||
}
|
||||
|
||||
.uni-cropper-line-l::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 50%;
|
||||
width: 41rpx;
|
||||
-webkit-transform: translate3d(-50%, 0, 0);
|
||||
transform: translate3d(-50%, 0, 0);
|
||||
bottom: 0;
|
||||
height: 100%;
|
||||
background: transparent;
|
||||
z-index: 11;
|
||||
}
|
||||
|
||||
.uni-cropper-point {
|
||||
width: 5rpx;
|
||||
height: 5rpx;
|
||||
background-color: #69f;
|
||||
opacity: .75;
|
||||
position: absolute;
|
||||
z-index: 3;
|
||||
}
|
||||
|
||||
.point-t {
|
||||
top: -3rpx;
|
||||
left: 50%;
|
||||
margin-left: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-tr {
|
||||
top: -3rpx;
|
||||
left: 100%;
|
||||
margin-left: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-r {
|
||||
top: 50%;
|
||||
left: 100%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-rb {
|
||||
left: 100%;
|
||||
top: 100%;
|
||||
-webkit-transform: translate3d(-50%, -50%, 0);
|
||||
transform: translate3d(-50%, -50%, 0);
|
||||
cursor: n-resize;
|
||||
width: 36rpx;
|
||||
height: 36rpx;
|
||||
background-color: #69f;
|
||||
position: absolute;
|
||||
z-index: 1112;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.point-b {
|
||||
left: 50%;
|
||||
top: 100%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-bl {
|
||||
left: 0%;
|
||||
top: 100%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-l {
|
||||
left: 0%;
|
||||
top: 50%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
.point-lt {
|
||||
left: 0%;
|
||||
top: 0%;
|
||||
margin-left: -3rpx;
|
||||
margin-top: -3rpx;
|
||||
cursor: n-resize;
|
||||
}
|
||||
|
||||
/* 裁剪框预览内容 */
|
||||
|
||||
.uni-cropper-viewer {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.uni-cropper-viewer image {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
}
|
||||
</style>
|
||||
109
boyue-app/src/pages_mine/pages/help/index.vue
Normal file
109
boyue-app/src/pages_mine/pages/help/index.vue
Normal file
@ -0,0 +1,109 @@
|
||||
<template>
|
||||
<view class="help-container">
|
||||
<view v-for="(item, findex) in list" :key="findex" :title="item.title" class="list-title">
|
||||
<view class="text-title">
|
||||
<view :class="item.icon"></view>{{ item.title }}
|
||||
</view>
|
||||
<view class="childList">
|
||||
<view v-for="(child, zindex) in item.childList" :key="zindex" class="question" hover-class="hover"
|
||||
@click="handleText(child)">
|
||||
<view class="text-item">{{ child.title }}</view>
|
||||
<view class="line" v-if="zindex !== item.childList.length - 1"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
|
||||
const list =ref([{
|
||||
icon: 'iconfont icon-github',
|
||||
title: '若依问题',
|
||||
childList: [{
|
||||
title: '若依开源吗？',
|
||||
content: '开源'
|
||||
}, {
|
||||
title: '若依可以商用吗？',
|
||||
content: '可以'
|
||||
}, {
|
||||
title: '若依官网地址多少？',
|
||||
content: 'http://boyue.vip'
|
||||
}, {
|
||||
title: '若依文档地址多少？',
|
||||
content: 'http://doc.boyue.vip'
|
||||
}]
|
||||
},
|
||||
{
|
||||
icon: 'iconfont icon-help',
|
||||
title: '其他问题',
|
||||
childList: [{
|
||||
title: '如何退出登录？',
|
||||
content: '请点击[我的] - [应用设置] - [退出登录]即可退出登录',
|
||||
}, {
|
||||
title: '如何修改用户头像？',
|
||||
content: '请点击[我的] - [选择头像] - [点击提交]即可更换用户头像',
|
||||
}, {
|
||||
title: '如何修改登录密码？',
|
||||
content: '请点击[我的] - [应用设置] - [修改密码]即可修改登录密码',
|
||||
}]
|
||||
}
|
||||
])
|
||||
|
||||
function handleText(item) {
|
||||
uni.navigateTo({
|
||||
url: `/pages/common/textview/index?title=${item.title}&content=${item.content}`
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.help-container {
|
||||
margin-bottom: 100rpx;
|
||||
padding: 30rpx;
|
||||
}
|
||||
|
||||
.list-title {
|
||||
margin-bottom: 30rpx;
|
||||
}
|
||||
|
||||
.childList {
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 0px 10rpx rgba(193, 193, 193, 0.2);
|
||||
border-radius: 16rpx;
|
||||
margin-top: 10rpx;
|
||||
}
|
||||
|
||||
.line {
|
||||
width: 100%;
|
||||
height: 1rpx;
|
||||
background-color: #F5F5F5;
|
||||
}
|
||||
|
||||
.text-title {
|
||||
color: #303133;
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
margin-left: 10rpx;
|
||||
|
||||
.iconfont {
|
||||
font-size: 16px;
|
||||
margin-right: 10rpx;
|
||||
}
|
||||
}
|
||||
|
||||
.text-item {
|
||||
font-size: 28rpx;
|
||||
padding: 24rpx;
|
||||
}
|
||||
|
||||
.question {
|
||||
color: #606266;
|
||||
font-size: 28rpx;
|
||||
}
|
||||
</style>
|
||||
132
boyue-app/src/pages_mine/pages/info/edit.vue
Normal file
132
boyue-app/src/pages_mine/pages/info/edit.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<view class="example">
|
||||
<uni-forms ref="form" :model="user" labelWidth="80px">
|
||||
<uni-forms-item label="用户昵称" name="nickName">
|
||||
<uni-easyinput v-model="user.nickName" placeholder="请输入昵称" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="手机号码" name="phonenumber">
|
||||
<uni-easyinput v-model="user.phonenumber" placeholder="请输入手机号码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="邮箱" name="email">
|
||||
<uni-easyinput v-model="user.email" placeholder="请输入邮箱" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item label="性别" name="sex" required>
|
||||
<uni-data-checkbox v-model="user.sex" :localdata="sexs" />
|
||||
</uni-forms-item>
|
||||
</uni-forms>
|
||||
<button type="primary" @click="submit">提交</button>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { getUserProfile } from "@/api/system/user"
|
||||
import { updateUserProfile } from "@/api/system/user"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
nickName: "",
|
||||
phonenumber: "",
|
||||
email: "",
|
||||
sex: ""
|
||||
},
|
||||
sexs: [{
|
||||
text: '男',
|
||||
value: "0"
|
||||
}, {
|
||||
text: '女',
|
||||
value: "1"
|
||||
}],
|
||||
rules: {
|
||||
nickName: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '用户昵称不能为空'
|
||||
}]
|
||||
},
|
||||
phonenumber: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '手机号码不能为空'
|
||||
}, {
|
||||
pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
|
||||
errorMessage: '请输入正确的手机号码'
|
||||
}]
|
||||
},
|
||||
email: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '邮箱地址不能为空'
|
||||
}, {
|
||||
format: 'email',
|
||||
errorMessage: '请输入正确的邮箱地址'
|
||||
}]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
this.getUser()
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.form.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
getUser() {
|
||||
getUserProfile().then(response => {
|
||||
this.user = response.data
|
||||
})
|
||||
},
|
||||
submit(ref) {
|
||||
this.$refs.form.validate().then(res => {
|
||||
updateUserProfile(this.user).then(response => {
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
mask: false,
|
||||
duration: 1000
|
||||
});
|
||||
uni.navigateBack();
|
||||
})
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.example {
|
||||
padding: 15px;
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
.segmented-control {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
margin-top: 15px;
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
}
|
||||
|
||||
.form-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
height: 35px;
|
||||
line-height: 35px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
</style>
|
||||
53
boyue-app/src/pages_mine/pages/info/index.vue
Normal file
53
boyue-app/src/pages_mine/pages/info/index.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<view class="container">
|
||||
<uni-list>
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'person-filled' }" title="昵称" :rightText="user.nickName" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'phone-filled' }" title="手机号码"
|
||||
:rightText="user.phonenumber" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'email-filled' }" title="邮箱" :rightText="user.email" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'auth-filled' }" title="岗位" :rightText="postGroup" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'staff-filled' }" title="角色" :rightText="roleGroup" />
|
||||
<uni-list-item showExtraIcon="true" :extraIcon="{ type: 'calendar-filled' }" title="创建日期"
|
||||
:rightText="user.createTime" />
|
||||
</uni-list>
|
||||
|
||||
<u-button @click="register()">绑定微信</u-button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { getUserProfile } from "@/api/system/user"
|
||||
import { ref } from "vue";
|
||||
import modal from "@/plugins/modal"
|
||||
|
||||
const user = ref({})
|
||||
const roleGroup = ref("")
|
||||
const postGroup = ref("")
|
||||
function getUser() {
|
||||
getUserProfile().then(response => {
|
||||
user.value = response.data
|
||||
roleGroup.value = response.roleGroup
|
||||
postGroup.value = response.postGroup
|
||||
})
|
||||
}
|
||||
getUser()
|
||||
|
||||
import { wxRegister } from "@/api/oauth"
|
||||
import { getWxCode } from "@/utils/boyues"
|
||||
function register(){
|
||||
modal.loading('绑定微信中...')
|
||||
getWxCode().then(res=>{
|
||||
wxRegister('miniapp',res).then(res=>{
|
||||
modal.closeLoading()
|
||||
})
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
</style>
|
||||
91
boyue-app/src/pages_mine/pages/pwd/index.vue
Normal file
91
boyue-app/src/pages_mine/pages/pwd/index.vue
Normal file
@ -0,0 +1,91 @@
|
||||
<template>
|
||||
<view class="pwd-retrieve-container">
|
||||
<uni-forms ref="form" :value="user" labelWidth="80px">
|
||||
<uni-forms-item name="oldPassword" label="旧密码">
|
||||
<uni-easyinput type="password" v-model="user.oldPassword" placeholder="请输入旧密码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="newPassword" label="新密码">
|
||||
<uni-easyinput type="password" v-model="user.newPassword" placeholder="请输入新密码" />
|
||||
</uni-forms-item>
|
||||
<uni-forms-item name="confirmPassword" label="确认密码">
|
||||
<uni-easyinput type="password" v-model="user.confirmPassword" placeholder="请确认新密码" />
|
||||
</uni-forms-item>
|
||||
<button type="primary" @click="submit">提交</button>
|
||||
</uni-forms>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { updateUserPwd } from "@/api/system/user"
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
user: {
|
||||
oldPassword: undefined,
|
||||
newPassword: undefined,
|
||||
confirmPassword: undefined
|
||||
},
|
||||
rules: {
|
||||
oldPassword: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '旧密码不能为空'
|
||||
}]
|
||||
},
|
||||
newPassword: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '新密码不能为空',
|
||||
},
|
||||
{
|
||||
minLength: 6,
|
||||
maxLength: 20,
|
||||
errorMessage: '长度在 6 到 20 个字符'
|
||||
}
|
||||
]
|
||||
},
|
||||
confirmPassword: {
|
||||
rules: [{
|
||||
required: true,
|
||||
errorMessage: '确认密码不能为空'
|
||||
}, {
|
||||
validateFunction: (rule, value, data) => data.newPassword === value,
|
||||
errorMessage: '两次输入的密码不一致'
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
onReady() {
|
||||
this.$refs.form.setRules(this.rules)
|
||||
},
|
||||
methods: {
|
||||
submit() {
|
||||
this.$refs.form.validate().then(res => {
|
||||
updateUserPwd(this.user.oldPassword, this.user.newPassword).then(response => {
|
||||
uni.showToast({
|
||||
title: '修改成功',
|
||||
mask: false,
|
||||
duration: 1000
|
||||
});
|
||||
uni.navigateBack();
|
||||
})
|
||||
|
||||
})
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
page {
|
||||
background-color: #ffffff;
|
||||
}
|
||||
|
||||
.pwd-retrieve-container {
|
||||
padding-top: 36rpx;
|
||||
padding: 15px;
|
||||
}
|
||||
</style>
|
||||
104
boyue-app/src/pages_mine/pages/setting/index.vue
Normal file
104
boyue-app/src/pages_mine/pages/setting/index.vue
Normal file
@ -0,0 +1,104 @@
|
||||
<template>
|
||||
<view class="setting-container" :style="{ height: `${windowHeight}px` }">
|
||||
<view class="menu-list">
|
||||
<view class="list-cell list-cell-arrow" @click="handleToPwd">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-password menu-icon"></view>
|
||||
<view>修改密码</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleToUpgrade">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-refresh menu-icon"></view>
|
||||
<view>检查更新</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="list-cell list-cell-arrow" @click="handleCleanTmp">
|
||||
<view class="menu-item-box">
|
||||
<view class="iconfont icon-clean menu-icon"></view>
|
||||
<view>清理缓存</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="cu-list menu">
|
||||
<view class="cu-item item-box">
|
||||
<view class="content text-center" @click="handleLogout">
|
||||
<text class="text-black">退出登录</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view>
|
||||
<uni-popup ref="popup" type="dialog">
|
||||
<uni-popup-dialog type="info" cancelText="关闭" confirmText="退出" title="通知" content="确定注销并退出系统吗"
|
||||
@confirm="dialogConfirm" @close="dialogClose">
|
||||
</uni-popup-dialog>
|
||||
</uni-popup>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from "vue";
|
||||
import useUserStore from '@/store/modules/user'
|
||||
const userStore = useUserStore()
|
||||
|
||||
const windowHeight = ref(uni.getSystemInfoSync().windowHeight);
|
||||
const popup = ref(null);
|
||||
|
||||
function handleToPwd() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/mine/pwd/index'
|
||||
});
|
||||
};
|
||||
|
||||
function handleToUpgrade() {
|
||||
uni.showToast({
|
||||
title: '模块建设中~',
|
||||
mask: false,
|
||||
icon: "none",
|
||||
duration: 1000
|
||||
});
|
||||
};
|
||||
|
||||
function handleCleanTmp() {
|
||||
uni.showToast({
|
||||
title: '模块建设中~',
|
||||
mask: false,
|
||||
icon: "none",
|
||||
duration: 1000
|
||||
});
|
||||
};
|
||||
function handleLogout() {
|
||||
popup.value.open();
|
||||
};
|
||||
function dialogConfirm() {
|
||||
//console.log('----------------点击确认------------')
|
||||
userStore.logOut().then(() => {
|
||||
uni.reLaunch({
|
||||
url: '/pages/login'
|
||||
});
|
||||
})
|
||||
};
|
||||
function dialogClose() {
|
||||
//console.log('点击关闭')
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.page {
|
||||
background-color: #f8f8f8;
|
||||
}
|
||||
|
||||
.item-box {
|
||||
background-color: #FFFFFF;
|
||||
margin: 30rpx;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: 10rpx;
|
||||
border-radius: 8rpx;
|
||||
color: #303133;
|
||||
font-size: 32rpx;
|
||||
}
|
||||
</style>
|
||||
148
boyue-app/src/pages_qiun/components/card-swiper/card-swiper.vue
Normal file
148
boyue-app/src/pages_qiun/components/card-swiper/card-swiper.vue
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view>
|
||||
<view class="top-swiper">
|
||||
<view class="box">
|
||||
<view style="height: 44px;"></view>
|
||||
<swiper class="swiper" :previous-margin="swiper.margin" :next-margin='swiper.margin' :circular="true"
|
||||
@change="swiperChange">
|
||||
<swiper-item v-for="(item,index) in card_menu" :key="index" @click="toUrl(item.url)">
|
||||
<!-- <image class='le-img' :src='item' :class="{'le-active':swiper.index == index}"></image> -->
|
||||
<view class="le-img" :class="{'le-active':swiper.index == index}">
|
||||
<view class="img_box">
|
||||
<image class="card_img" :src="item.img" mode="aspectFill"></image>
|
||||
</view>
|
||||
<view class="detail_box">
|
||||
<view class="title_box">{{item.title}}</view>
|
||||
<view class="author_box">By:{{item.author}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</swiper-item>
|
||||
</swiper>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Common from '../../static/js/common'
|
||||
export default {
|
||||
props: {
|
||||
card_menu: {
|
||||
type: Array,
|
||||
default: []
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
swiper: {
|
||||
margin: "150rpx",
|
||||
index: 0,
|
||||
list: [
|
||||
"/static/images/douyin/0.jpg",
|
||||
"/static/images/douyin/4.jpg",
|
||||
"/static/images/douyin/7.jpg",
|
||||
]
|
||||
}
|
||||
}
|
||||
},
|
||||
components: {
|
||||
|
||||
},
|
||||
mounted() {
|
||||
|
||||
},
|
||||
methods: {
|
||||
//swiper滑动事件
|
||||
swiperChange: function(e) {
|
||||
this.swiper.index = e.detail.current;
|
||||
},
|
||||
toUrl(url){
|
||||
Common.navigateTo(url);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.top-swiper {
|
||||
margin-bottom: 30rpx;
|
||||
|
||||
.box {
|
||||
padding-top: var(--status-bar-height);
|
||||
box-sizing: content-box;
|
||||
position: absolute;
|
||||
z-index: 5;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
.swiper {
|
||||
height: 600rpx;
|
||||
margin: 0 20rpx;
|
||||
|
||||
.le-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: block;
|
||||
transform: scale(0.9);
|
||||
transition: transform 0.3s ease-in-out 0s;
|
||||
border-radius: 10px;
|
||||
background-color: #fff;
|
||||
overflow: hidden;
|
||||
|
||||
&.le-active {
|
||||
transform: scale(1);
|
||||
}
|
||||
|
||||
.img_box {
|
||||
width: 100%;
|
||||
height: 65%;
|
||||
overflow: hidden;
|
||||
|
||||
.card_img {
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.detail_box {
|
||||
width: 100%;
|
||||
height: 35%;
|
||||
overflow: hidden;
|
||||
|
||||
.title_box {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 40rpx;
|
||||
margin: 30rpx 0;
|
||||
}
|
||||
|
||||
|
||||
|
||||
.author_box {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
font-size: 30rpx;
|
||||
position: relative;
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
height: 1px;
|
||||
width: 150rpx;
|
||||
position: absolute;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
top: 0;
|
||||
background: #000;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</style>
|
||||
141
boyue-app/src/pages_qiun/components/data-center/user-healthy.vue
Normal file
141
boyue-app/src/pages_qiun/components/data-center/user-healthy.vue
Normal file
@ -0,0 +1,141 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<scroll-view v-if="true" scroll-y class="data_body" :style="{height:scrollHeight}">
|
||||
<!--数据进度条-->
|
||||
<view class="progress">
|
||||
<data-progress :progressList="userHealthyLineBar" :borderRadius="20" padMiddle="true"></data-progress>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 新增小程序会员趋势-->
|
||||
<view class="friend_operate">
|
||||
<text-block :content="baseData"></text-block>
|
||||
<view class="trend_title">新增小程序会员趋势</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="mix"
|
||||
canvasId="three_a"
|
||||
:canvas2d="isCanvas2d"
|
||||
:reshow="delayload"
|
||||
:opts="{yAxis:{data:[{position: 'left',title: '销售额/万',max:userTrand?userTrand.yAxis[0].max:0,min:userTrand?userTrand.yAxis[0].min:0},{position: 'right',title: '',max:userTrand?userTrand.yAxis[1].max:0,min:userTrand?userTrand.yAxis[1].min:0,unit:'%'}]}}"
|
||||
:chartData="userTrand"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 会员扫码率趋势-->
|
||||
<view class="friend_operate">
|
||||
<text-block :content="scanTrand"></text-block>
|
||||
<view class="trend_title">会员扫码率趋势</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="mix"
|
||||
canvasId="three_b"
|
||||
:canvas2d="isCanvas2d"
|
||||
:reshow="delayload"
|
||||
:opts="{yAxis:{data:[{position: 'left',title: '',max:scanTrandPrecent?scanTrandPrecent.yAxis[0].max:0,min:scanTrandPrecent?scanTrandPrecent.yAxis[0].min:0,unit:'%'}]}}"
|
||||
:chartData="scanTrandPrecent"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 小程序活跃会员占比-->
|
||||
<view class="friend_operate">
|
||||
<text-block :content="miniActive"></text-block>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="mix"
|
||||
canvasId="three_c"
|
||||
:canvas2d="isCanvas2d"
|
||||
:reshow="delayload"
|
||||
:opts="{yAxis:{data:[{position: 'left',title: '销售额/万',max:miniActivePrecent?miniActivePrecent.yAxis[0].max:0,min:miniActivePrecent?miniActivePrecent.yAxis[0].min:0},{position: 'right',title: '',max:miniActivePrecent?miniActivePrecent.yAxis[1].max:0,min:miniActivePrecent?miniActivePrecent.yAxis[1].min:0,unit:'%'}]}}"
|
||||
:chartData="miniActivePrecent"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-else class="container padding_stand-big normal_color">
|
||||
<li class="iconfont icon-cry cry"></li>暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataProgress from "../data-progress/data-progress.vue"
|
||||
|
||||
import userHealthyLineBar from '../../static/json/user-healthy/1.json';
|
||||
import baseData from '../../static/json/user-healthy/2.json';
|
||||
import userTrand from '../../static/json/user-healthy/3.json';
|
||||
|
||||
import scanTrand from '../../static/json/user-healthy/4.json';
|
||||
import scanTrandPrecent from '../../static/json/user-healthy/5.json';
|
||||
import miniActive from '../../static/json/user-healthy/6.json';
|
||||
import miniActivePrecent from '../../static/json/user-healthy/7.json';
|
||||
|
||||
import Config from '../../static/js/config'
|
||||
|
||||
var _self;
|
||||
export default {
|
||||
name:'user-healthy',
|
||||
props: {
|
||||
scrollHeight:{
|
||||
type:String,
|
||||
default:"600px"
|
||||
}
|
||||
},
|
||||
components:{
|
||||
DataProgress
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userHealthyLineBar,
|
||||
baseData,
|
||||
userTrand,
|
||||
scanTrand,
|
||||
scanTrandPrecent,
|
||||
miniActive,
|
||||
miniActivePrecent,
|
||||
delayload:false,
|
||||
isCanvas2d:Config.ISCANVAS2D,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods:{
|
||||
async getData(){
|
||||
uni.showLoading();
|
||||
await setTimeout(() => {
|
||||
this.delayload = true;
|
||||
uni.hideLoading();
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.content{
|
||||
padding-top: 10rpx;
|
||||
.progress,.firend_operate{
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.progress{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.friend_operate{
|
||||
padding: 30rpx 10rpx;
|
||||
.title{
|
||||
text-align:left;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.trend_title{
|
||||
text-align: right;
|
||||
font-size: 22rpx;
|
||||
color: #ff9900;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
200
boyue-app/src/pages_qiun/components/data-center/user-operate.vue
Normal file
200
boyue-app/src/pages_qiun/components/data-center/user-operate.vue
Normal file
@ -0,0 +1,200 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<scroll-view v-if="true" scroll-y class="data_body" :style="{height:scrollHeight}">
|
||||
<!--数据进度条-->
|
||||
<view class="progress">
|
||||
<data-progress :progressList="userOperateLineBar" :borderRadius="20" padMiddle="true"></data-progress>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 活跃会员-->
|
||||
<view class="friend_operate">
|
||||
<view class="title">活跃会员</view>
|
||||
<text-block :content="userActive"></text-block>
|
||||
</view>
|
||||
|
||||
<!-- 会员消费 -->
|
||||
<view class="friend_operate" style="padding-bottom: 30rpx;">
|
||||
<view class="title">会员消费</view>
|
||||
<text-block :content="userConsume"></text-block>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 会员ARPU -->
|
||||
<view class="friend_operate">
|
||||
<view class="title">会员ARPU
|
||||
<text class="font-small">(会员年度平均销售金额)</text>
|
||||
<text class="trend_title">目标增量{{userARPU.targetAdd}}</text>
|
||||
</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="mix"
|
||||
:chartData="userARPU"
|
||||
:reshow="delayload"
|
||||
:canvas2d="isCanvas2d"
|
||||
canvasId="two_a"
|
||||
:opts="{yAxis:{data:[{title: '',max:userARPU?userARPU.yAxis[0].max:0,min:userARPU?userARPU.yAxis[0].min:0},{title: '',unit:'%',max:userARPU?userARPU.yAxis[1].max:0,min:userARPU?userARPU.yAxis[1].min:0,position:'right'}]},extra:{markLine:{data:[{value:userARPU?userARPU.target:'',LineColor:'#ff9900',showLabel:true}]}}}"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 会员消费频次 -->
|
||||
<view class="friend_operate">
|
||||
<view class="title">会员消费频次
|
||||
<text class="font-middle">(年)</text>
|
||||
<text class="trend_title">目标增量{{userARPU.targetAdd}}</text>
|
||||
</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="mix"
|
||||
:chartData="userARPU"
|
||||
:reshow="delayload"
|
||||
:canvas2d="isCanvas2d"
|
||||
canvasId="two_b"
|
||||
:opts="{yAxis:{data:[{title: '',max:userARPU?userARPU.yAxis[0].max:0,min:userARPU?userARPU.yAxis[0].min:0},{title: '',unit:'%',max:userARPU?userARPU.yAxis[1].max:0,min:userARPU?userARPU.yAxis[1].min:0,position:'right'}]},extra:{markLine:{data:[{value:userARPU?userARPU.target:'',LineColor:'#ff9900',showLabel:true}]}}}"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 微客群运营-->
|
||||
<view class="friend_operate">
|
||||
<view class="title">活跃会员分布
|
||||
<text class="font-middle">(最近活跃时间)</text>
|
||||
</view>
|
||||
<senior-table :headers="dataTable.headers" :contents="dataTable.contents" :urlCol="dataTable.urlCol" :firstLineFixed="true" :sortCol="dataTable.sortCol" :computedCol="dataTable.computedCol" :formatCol="dataTable.formatCol"></senior-table>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- X商品脱落率-->
|
||||
<view class="friend_operate">
|
||||
<view class="title">
|
||||
X（慢病） 商品脱落率
|
||||
</view>
|
||||
<view style="display: flex;justify-content: space-between;">
|
||||
<view v-for="(item,index) in xProductDropPrecent" class="charts-box" style="height: 130px;width: 45%;">
|
||||
<qiun-data-charts
|
||||
type="arcbar"
|
||||
:chartData="item"
|
||||
:canvasId="'two_c_'+ index"
|
||||
:canvas2d="true"
|
||||
:reshow="delayload"
|
||||
:opts="{title:{name:item.series[0].data * 100 + '%',color:item.series[0].color,fontSize:25},subtitle:{name:item.series[0].name,color:'#666666',fontSize:12}}" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 慢病病种脱落率-->
|
||||
<view class="friend_operate">
|
||||
<view class="title">慢病病种脱落率
|
||||
</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="mix"
|
||||
:chartData="illnessDropPrecent"
|
||||
:reshow="delayload"
|
||||
:canvas2d="true"
|
||||
canvasId="two_d"
|
||||
:opts="{yAxis:{data:[{title: ''}]}}"/>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- W商品脱落率-->
|
||||
<view class="friend_operate">
|
||||
<view class="title">
|
||||
W（保健） 商品脱落率
|
||||
</view>
|
||||
<view style="display: flex;justify-content: space-between;">
|
||||
<view v-for="(item,index) in wProductDropPrecent" class="charts-box" style="height: 130px;width: 45%;">
|
||||
<qiun-data-charts
|
||||
type="arcbar"
|
||||
:chartData="item"
|
||||
:canvasId="'two_e_'+index"
|
||||
:canvas2d="true"
|
||||
:reshow="delayload"
|
||||
:opts="{title:{name:item.series[0].data * 100 + '%',color:item.series[0].color,fontSize:25},subtitle:{name:item.series[0].name,color:'#666666',fontSize:12}}" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-else class="container padding_stand-big normal_color">
|
||||
<li class="iconfont icon-cry cry"></li>暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataProgress from "../data-progress/data-progress.vue"
|
||||
import SeniorTable from "../data-table/senior-table.vue"
|
||||
|
||||
import userOperateLineBar from '../../static/json/user-operate/1.json';
|
||||
import userActive from '../../static/json/user-operate/2.json';
|
||||
import userConsume from '../../static/json/user-operate/3.json';
|
||||
import userARPU from '../../static/json/user-operate/4.json';
|
||||
import dataTable from "../../static/json/user-operate/6.json"
|
||||
import xProductDropPrecent from '../../static/json/user-operate/7.json';
|
||||
import wProductDropPrecent from '../../static/json/user-operate/9.json';
|
||||
import illnessDropPrecent from '../../static/json/user-operate/8.json';
|
||||
|
||||
|
||||
export default {
|
||||
name:'user-operate',
|
||||
props: {
|
||||
scrollHeight:{
|
||||
type:String,
|
||||
default:"600px"
|
||||
}
|
||||
},
|
||||
components:{
|
||||
DataProgress,SeniorTable
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
userOperateLineBar,
|
||||
userActive,
|
||||
userConsume,
|
||||
userARPU,
|
||||
xProductDropPrecent,
|
||||
wProductDropPrecent,
|
||||
illnessDropPrecent,
|
||||
dataTable,
|
||||
delayload:false,
|
||||
isCanvas2d:Config.ISCANVAS2D
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods:{
|
||||
async getData(){
|
||||
uni.showLoading();
|
||||
await setTimeout(() => {
|
||||
this.delayload = true;
|
||||
uni.hideLoading();
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.content{
|
||||
padding-top: 10rpx;
|
||||
.progress,.firend_operate{
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.progress{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.friend_operate{
|
||||
padding: 30rpx 20rpx;
|
||||
.title{
|
||||
text-align:left;
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.trend_title{
|
||||
float: right;
|
||||
font-size: 22rpx;
|
||||
color: #ff9900;
|
||||
margin-top: 20rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
385
boyue-app/src/pages_qiun/components/data-center/user-server.vue
Normal file
385
boyue-app/src/pages_qiun/components/data-center/user-server.vue
Normal file
@ -0,0 +1,385 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<scroll-view class="data_body" scroll-y :style="{height:scrollHeight}">
|
||||
<template v-if="true">
|
||||
<!-- 会员成长数据-->
|
||||
<view class="view_item">
|
||||
<view class="title">会员成长数据</view>
|
||||
<view class="progress_circle">
|
||||
<view v-for="(item,index) in CircleData" :key="index" :class="['progress_block','block_'+index]">
|
||||
<view class="name">{{item.series[0].name}}</view>
|
||||
<view class="value">{{item.series[0].value}}</view>
|
||||
<view class="charts-box arcbar" style="height: 180rpx;width: 60%;">
|
||||
<qiun-data-charts type="arcbar" :chartData="item" :canvasId="'four_a_'+index" :canvas2d="isCanvas2d"
|
||||
:resshow="delayload"
|
||||
:opts="{title:{name:item.series[0].precent,color:item.series[0].color,fontSize:15},subtitle:{name:'',color:'#666666',fontSize:12},extra:{arcbar:{backgroundColor:item.series[0].backgroundColor}}}" />
|
||||
</view>
|
||||
<view class="planet">
|
||||
<view class="planet_shadow"></view>
|
||||
<view class="crater1"></view>
|
||||
<view class="crater2"></view>
|
||||
<view class="crater3"></view>
|
||||
<view class="crater4"></view>
|
||||
</view>
|
||||
<view class="star" :class="['star'+index]"></view>
|
||||
<view class="star pink" :class="['star'+index]"></view>
|
||||
<view class="star blue" :class="['star'+index]"></view>
|
||||
<view class="star yellow" :class="['star'+index]"></view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 会员数据来源 -->
|
||||
<view class="friend_operate">
|
||||
<view class="title">会员数据来源
|
||||
<text class="font-small" style="color: #ff9900;">(Top5访问来源)</text>
|
||||
</view>
|
||||
<view v-if="delayload" class="charts-box">
|
||||
<qiun-data-charts
|
||||
type="ring"
|
||||
canvasId="four_b"
|
||||
:canvas2d="isCanvas2d"
|
||||
:resshow="delayload"
|
||||
:opts="{legend:{position: 'bottom'},title:{name: '',},subtitle: {name: ''}}"
|
||||
:chartData="ProductRateData"/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 服务评价概览-->
|
||||
<view class="friend_operate">
|
||||
<view class="title">服务评价概览</view>
|
||||
<text-block :content="ServiceComment"></text-block>
|
||||
</view>
|
||||
|
||||
<!-- 本周会员访问趋势图 -->
|
||||
<view class="friend_operate">
|
||||
<view class="title">本周会员访问趋势图</view>
|
||||
<view v-if="delayload" class="charts-box" style="height: 300px;">
|
||||
<qiun-data-charts
|
||||
type="mix"
|
||||
canvasId="four_c"
|
||||
:canvas2d="isCanvas2d"
|
||||
:resshow="delayload"
|
||||
:opts="{yAxis:{data:[{position: 'left',title: '',min:0,unit:'万'}]}}"
|
||||
:chartData="TrendData"
|
||||
/>
|
||||
</view>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 新增会员排行榜 -->
|
||||
<view class="friend_operate">
|
||||
<view class="title">新增会员排行榜</view>
|
||||
<progress-bar :isRank="isRank" :content="RankData" />
|
||||
</view>
|
||||
</template>
|
||||
<template v-else>
|
||||
<view class="container padding_stand-big normal_color">
|
||||
<li class="iconfont icon-cry cry"></li>暂无数据
|
||||
</view>
|
||||
</template>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ProgressBar from "../progress-bar/progress-bar.vue"
|
||||
|
||||
import CircleData from "../../static/json/user-server/1.json"
|
||||
import ProductRateData from '../../static/json/user-server/2.json';
|
||||
import TrendData from '../../static/json/user-server/3.json';
|
||||
import ServiceComment from '../../static/json/user-server/4.json';
|
||||
import RankData from '../../static/json/user-server/5.json';
|
||||
|
||||
import Config from '../../static/js/config'
|
||||
export default {
|
||||
name:"user-server",
|
||||
props:{
|
||||
scrollHeight:{
|
||||
type:String,
|
||||
default:"600px"
|
||||
}
|
||||
},
|
||||
components:{
|
||||
ProgressBar
|
||||
},
|
||||
data(){
|
||||
return {
|
||||
CircleData,
|
||||
TrendData,
|
||||
ProductRateData,
|
||||
ServiceComment,
|
||||
RankData,
|
||||
isRank:true,
|
||||
isCanvas2d:Config.ISCANVAS2D,
|
||||
delayload: false, //延时加载图表，否则会出现图表加载完后定位错乱
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
async getData(){
|
||||
uni.showLoading();
|
||||
await setTimeout(() => {
|
||||
this.delayload = true;
|
||||
uni.hideLoading();
|
||||
}, 1000)
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.content{
|
||||
padding-top: 10rpx;
|
||||
}
|
||||
.data_body{
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
color: #333333;
|
||||
background-repeat: repeat;
|
||||
background-color: #ffffff;
|
||||
.friend_operate{
|
||||
padding: 30rpx 20rpx;
|
||||
.title{
|
||||
text-align:left;
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
.view_item{
|
||||
padding: 30rpx 20rpx;
|
||||
.title{
|
||||
text-align:left;
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
}
|
||||
.progress_circle{
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
justify-content: space-around;
|
||||
align-items: center;
|
||||
height: 450rpx;
|
||||
|
||||
.progress_block{
|
||||
width: 45%;
|
||||
border-radius: 20rpx;
|
||||
height: 180rpx;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
|
||||
.name{
|
||||
color: #fff;
|
||||
font-size: 24rpx;
|
||||
position: absolute;
|
||||
top: 20rpx;
|
||||
left: 10rpx;
|
||||
max-width: 144rpx;
|
||||
}
|
||||
.value{
|
||||
color: #fff;
|
||||
font-size: 40rpx;
|
||||
position: absolute;
|
||||
top: 64rpx;
|
||||
left: 10rpx;
|
||||
max-width: 144rpx;
|
||||
}
|
||||
|
||||
.circle{
|
||||
position: absolute;
|
||||
right: 8rpx;
|
||||
top: 16rpx;
|
||||
}
|
||||
.arcbar{
|
||||
position: absolute;
|
||||
right: -4rpx;
|
||||
top: 8rpx;
|
||||
}
|
||||
}
|
||||
.block_0{
|
||||
background-color: #0FC3FF;
|
||||
}
|
||||
.block_1{
|
||||
background-color: #FF6B8B;
|
||||
}
|
||||
.block_2{
|
||||
background-color: #FFCB1D;
|
||||
}
|
||||
.block_3{
|
||||
background-color: #3BDCAA;
|
||||
}
|
||||
}
|
||||
}
|
||||
.planet {
|
||||
width: 60px;
|
||||
height: 60px;
|
||||
border-radius: 50%;
|
||||
background: #333;
|
||||
position: absolute;
|
||||
left: -13px;
|
||||
bottom: -26px;
|
||||
overflow: hidden;
|
||||
opacity: 0.5;
|
||||
z-index: 0;
|
||||
}
|
||||
|
||||
.planet_shadow {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
top: -40%;
|
||||
right: -10%;
|
||||
border: 35px solid rgba(0, 0, 0, .15);
|
||||
}
|
||||
|
||||
.crater1,
|
||||
.crater2,
|
||||
.crater3,
|
||||
.crater4 {
|
||||
position: absolute;
|
||||
border-radius: 50%;
|
||||
background: rgba(0, 0, 0, .3);
|
||||
box-shadow: inset 3px 3px 0 rgba(0, 0, 0, .2);
|
||||
}
|
||||
|
||||
.crater1 {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
left: 25%;
|
||||
top: 20%;
|
||||
}
|
||||
|
||||
.crater2 {
|
||||
width: 10px;
|
||||
height: 10px;
|
||||
left: 50%;
|
||||
top: 60%;
|
||||
}
|
||||
|
||||
.crater3 {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
left: 30%;
|
||||
top: 65%;
|
||||
}
|
||||
|
||||
.crater4 {
|
||||
width: 15px;
|
||||
height: 15px;
|
||||
left: 60%;
|
||||
top: 35%;
|
||||
}
|
||||
|
||||
.star {
|
||||
display: block;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background: #FFF;
|
||||
top: 10px;
|
||||
left: 50px;
|
||||
position: relative;
|
||||
transform-origin: 100% 0;
|
||||
box-shadow: 0 0 5px 5px rgba(255, 255, 255, .3);
|
||||
opacity: 0;
|
||||
z-index: 2;
|
||||
}
|
||||
.star0{
|
||||
animation: star-ani 4s infinite ease-out;
|
||||
}
|
||||
.star1{
|
||||
animation: star-ani 5s infinite ease-out;
|
||||
}
|
||||
.star2{
|
||||
animation: star-ani 6s infinite ease-out;
|
||||
}
|
||||
.star3{
|
||||
animation: star-ani 7s infinite ease-out;
|
||||
}
|
||||
|
||||
.star:after {
|
||||
content: '';
|
||||
display: block;
|
||||
top: 20px;
|
||||
left: 60px;
|
||||
border: 0px solid #fff;
|
||||
border-width: 0px 90px 2px 90px;
|
||||
border-color: transparent transparent transparent rgba(255, 255, 255, .3);
|
||||
transform: rotate(-45deg) translate3d(1px, 3px, 0);
|
||||
box-shadow: 0 0 1px 0 rgba(255, 255, 255, .1);
|
||||
transform-origin: 0% 100%;
|
||||
animation: shooting-ani 100s infinite ease-out;
|
||||
}
|
||||
|
||||
.pink {
|
||||
top: 10px;
|
||||
left: 60px;
|
||||
background: #ff5a99;
|
||||
animation-delay: 5s;
|
||||
-webkit-animation-delay: 5s;
|
||||
-moz-animation-delay: 5s;
|
||||
}
|
||||
|
||||
.pink:after {
|
||||
border-color: transparent transparent transparent #ff5a99;
|
||||
animation-delay: 5s;
|
||||
-webkit-animation-delay: 5s;
|
||||
-moz-animation-delay: 5s;
|
||||
}
|
||||
|
||||
.blue {
|
||||
top: 15px;
|
||||
left: 70px;
|
||||
background: cyan;
|
||||
animation-delay: 7s;
|
||||
-webkit-animation-delay: 7s;
|
||||
-moz-animation-delay: 7s;
|
||||
}
|
||||
|
||||
.blue:after {
|
||||
border-color: 'transpareanimation-delay: 12s';
|
||||
-webkit-animation-delay: 7s;
|
||||
-moz-animation-delay: 7s;
|
||||
animation-delay: 7s;
|
||||
}
|
||||
|
||||
.yellow {
|
||||
top: 0px;
|
||||
left: 80px;
|
||||
background: #ffcd5c;
|
||||
animation-delay: 5.8s;
|
||||
}
|
||||
|
||||
.yellow:after {
|
||||
border-color: transparent transparent transparent #ffcd5c;
|
||||
animation-delay: 5.8s;
|
||||
}
|
||||
|
||||
@keyframes star-ani {
|
||||
0% {
|
||||
opacity: 0;
|
||||
transform: scale(0) rotate(0) translate3d(0, 0, 0);
|
||||
-webkit-transform: scale(0) rotate(0) translate3d(0, 0, 0);
|
||||
-moz-transform: scale(0) rotate(0) translate3d(0, 0, 0);
|
||||
}
|
||||
|
||||
50% {
|
||||
opacity: 0.5;
|
||||
transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
|
||||
-webkit-transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
|
||||
-moz-transform: scale(1) rotate(0) translate3d(-20px, 20px, 0);
|
||||
}
|
||||
|
||||
100% {
|
||||
opacity: 0;
|
||||
transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
|
||||
-webkit-transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
|
||||
-moz-transform: scale(1) rotate(0) translate3d(-30px, 30px, 0);
|
||||
}
|
||||
}
|
||||
</style>
|
||||
132
boyue-app/src/pages_qiun/components/data-center/wechat.vue
Normal file
132
boyue-app/src/pages_qiun/components/data-center/wechat.vue
Normal file
@ -0,0 +1,132 @@
|
||||
<template>
|
||||
<view class="content">
|
||||
<scroll-view v-if="true" scroll-y class="data_body" :style="{height:scrollHeight}">
|
||||
<!--数据进度条-->
|
||||
<view class="progress">
|
||||
<data-progress :progressList="wechatLineBar" :borderRadius="20" padMiddle="true"></data-progress>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 微好友运营-->
|
||||
<view class="friend_operate">
|
||||
<view class="title">微好友运营</view>
|
||||
<text-block :content="friendTextBlock"></text-block>
|
||||
<view style="display: flex;justify-content: space-around;">
|
||||
<view v-for="(item,index) in panelData" :key="index" class="charts-box"
|
||||
style="width: 45%;height: 200px;">
|
||||
<qiun-data-charts type="gauge"
|
||||
:opts="{title:{name: item.series[0].data * 100 + '%',color: '#24ABFD',offsetY:30},subtitle: {name: item.series[0].name,color: '#666666',fontSize: 15,offsetY:70},extra:{gauge:{type:'progress',width:20,splitLine:{fixRadius:-10,width:15,},}}}"
|
||||
:chartData="item" :reshow="delayload" :canvas2d="isCanvas2d" :canvasId="'one_a_' + index" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="trend_title">新增微好友&小程序会员趋势</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="mix" :chartData="friendTrand" :reshow="delayload"
|
||||
:canvas2d="isCanvas2d" canvasId="one_b" :opts="{yAxis:{data:[{title: ''}]}}" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 微客群运营-->
|
||||
<view class="friend_operate">
|
||||
<view class="title">微客群运营</view>
|
||||
<text-block :content="friendTextBlock"></text-block>
|
||||
<view class="trend_title">新增人群&退群人数趋势</view>
|
||||
<view class="charts-box">
|
||||
<qiun-data-charts type="mix" :chartData="teamTrand" :reshow="delayload" :canvas2d="isCanvas2d"
|
||||
canvasId="one_c" :opts="{yAxis:{data:[{title: '',max:teamTrand?teamTrand.yAxis[0].max:0,min:teamTrand?teamTrand.yAxis[0].min:0}]}}" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="split_line"></view>
|
||||
|
||||
<!-- 客户联系-->
|
||||
<view class="friend_operate">
|
||||
<view class="title">【客户联系】1对1运营执行</view>
|
||||
<senior-table :headers="dataTable.headers" :contents="dataTable.contents" :urlCol="dataTable.urlCol" :firstLineFixed="true" :sortCol="dataTable.sortCol"></senior-table>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<view v-else class="container padding_stand-big normal_color">
|
||||
<li class="iconfont icon-cry cry"></li>暂无数据
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import DataProgress from "../data-progress/data-progress.vue"
|
||||
import SeniorTable from "../data-table/senior-table.vue"
|
||||
|
||||
import wechatLineBar from '../../static/json/wechat/1.json';
|
||||
import friendTextBlock from '../../static/json/wechat/2.json';
|
||||
import panelData from '../../static/json/wechat/3.json';
|
||||
import friendTrand from '../../static/json/wechat/4.json';
|
||||
import teamTrand from '../../static/json/wechat/5.json';
|
||||
import dataTable from "../../static/json/wechat/6.json"
|
||||
|
||||
import Config from '../../static/js/config'
|
||||
|
||||
export default {
|
||||
name:'wechat',
|
||||
props: {
|
||||
scrollHeight:{
|
||||
type:String,
|
||||
default:"600px"
|
||||
}
|
||||
},
|
||||
components:{
|
||||
DataProgress,
|
||||
SeniorTable,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
wechatLineBar,
|
||||
friendTextBlock,
|
||||
friendTrand,
|
||||
panelData,
|
||||
teamTrand,
|
||||
dataTable,
|
||||
scrollTop: 0,
|
||||
delayload: false,
|
||||
isCanvas2d: Config.ISCANVAS2D,
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.getData();
|
||||
},
|
||||
methods:{
|
||||
async getData() {
|
||||
uni.showLoading();
|
||||
await setTimeout(() => {
|
||||
this.delayload = true;
|
||||
uni.hideLoading();
|
||||
}, 1000)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.content{
|
||||
padding-top: 10rpx;
|
||||
.progress,.firend_operate{
|
||||
padding: 0 10rpx;
|
||||
}
|
||||
.progress{
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
.friend_operate{
|
||||
padding: 30rpx 20rpx;
|
||||
.title{
|
||||
text-align:left;
|
||||
margin-bottom: 30rpx;
|
||||
font-size: 40rpx;
|
||||
}
|
||||
.trend_title{
|
||||
text-align: right;
|
||||
font-size: 22rpx;
|
||||
color: #ff9900;
|
||||
margin-top: 50rpx;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
@ -0,0 +1,93 @@
|
||||
<template>
|
||||
<view class="column">
|
||||
<view v-for="(item,index) in progressList" :key="index" :class="['row','font-small','progress',padMiddle?'paddingMiddle':'']">
|
||||
<text class="title">{{item.name}}</text>
|
||||
<view class="body">
|
||||
<view class="number">{{item.now?item.now+"/":""}}{{item.expect}} [{{item.value}}%]</view>
|
||||
<progress :percent="item.value" backgroundColor="#C9C9C9"
|
||||
:border-radius="borderRadius?borderRadius+'rpx':'0px'"
|
||||
:color="time"
|
||||
stroke-width="16" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name:'data-progress',
|
||||
props: {
|
||||
progressList: {
|
||||
type: Array,
|
||||
default: ()=> {
|
||||
return []
|
||||
}
|
||||
},
|
||||
borderRadius:{
|
||||
type:Number,
|
||||
default:0
|
||||
},
|
||||
padMiddle:{
|
||||
type:String,
|
||||
default:"false"
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
time:0
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
"progressList":{
|
||||
deep: true,
|
||||
handler: function(newVal, oldVal) {
|
||||
this.time = newVal.filter(x=>x.name=="时间进度")[0].value;
|
||||
}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.time = this.progressList.filter(x=>x.name=="时间进度")[0].value;
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.paddingMiddle{
|
||||
padding: 18rpx 10rpx;
|
||||
}
|
||||
.progress{
|
||||
|
||||
.title{
|
||||
font-size: 28rpx;
|
||||
width: 170rpx;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
||||
}
|
||||
.body{
|
||||
position: relative;
|
||||
flex: 1;
|
||||
|
||||
.number{
|
||||
color: #fff;
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
left: 26rpx;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
height: 44rpx;
|
||||
}
|
||||
progress{
|
||||
padding: 6rpx 0;
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
1117
boyue-app/src/pages_qiun/components/data-table/senior-table.vue
Normal file
1117
boyue-app/src/pages_qiun/components/data-table/senior-table.vue
Normal file
File diff suppressed because it is too large
Load Diff
218
boyue-app/src/pages_qiun/components/drop-down/drop-down.vue
Normal file
218
boyue-app/src/pages_qiun/components/drop-down/drop-down.vue
Normal file
@ -0,0 +1,218 @@
|
||||
<template>
|
||||
<div class="dropdown-item">
|
||||
<!-- selected -->
|
||||
<view :class="['dropdown-item__selected',listWidth!='150rpx'?'dropdown-item__right':'dropdown-item__left']"
|
||||
@click="changePopup" :style="{maxWidth:selectWidth}">
|
||||
<view class="selected__name">{{selectItem.text}}</view>
|
||||
<view class="selected__icon"
|
||||
:class="showClass === 'show'? 'up' : 'down'"
|
||||
>
|
||||
<li class="iconfont icon-caretdown"></li>
|
||||
</view>
|
||||
</view>
|
||||
<view class="dropdown-item__content" :style="{top: contentTop + 'rpx'}" v-if="showList">
|
||||
<!-- dropdown -->
|
||||
<view :class="['list', showClass]" :style="{left: contentLeft>0?contentLeft + 'rpx':'auto',right: contentRight>0?contentRight + 'rpx':'auto',}">
|
||||
<view class="list__option"
|
||||
v-for="(item, index) in list" :key="index"
|
||||
@click="choose(item)">
|
||||
<view>{{item.text}}</view>
|
||||
<icon v-if="item.value === value" type="success_no_circle" size="20"/>
|
||||
</view>
|
||||
</view>
|
||||
<!-- dropdown-mask -->
|
||||
<view :class="['dropdown-mask', showClass]" v-if="showList" @click="closePopup"></view>
|
||||
</view>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
components: {
|
||||
},
|
||||
props: {
|
||||
value: [Number, String, Object],
|
||||
list: {
|
||||
type: Array,
|
||||
default: ()=> {
|
||||
return []
|
||||
}
|
||||
},
|
||||
contentTop:{
|
||||
type:String,
|
||||
default:"185"
|
||||
},
|
||||
contentLeft:{
|
||||
type:String,
|
||||
default:"0"
|
||||
},
|
||||
contentRight:{
|
||||
type:String,
|
||||
default:"0"
|
||||
},
|
||||
listWidth:{
|
||||
type:String,
|
||||
default:'150rpx'
|
||||
},
|
||||
selectWidth:{
|
||||
type:String,
|
||||
default:'150rpx'
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
showList: "",
|
||||
showClass: '',
|
||||
selectItem: {},
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
list(newVal,oldVal){
|
||||
this.selectItem = newVal[0];
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.showList = this.active;
|
||||
this.selectItem = this.list[0];
|
||||
},
|
||||
methods: {
|
||||
choose(item) {
|
||||
if(item.value != "auto"){
|
||||
this.selectItem = item
|
||||
}
|
||||
this.$emit('changeItem', item);
|
||||
this.closePopup();
|
||||
},
|
||||
selectAuto(){
|
||||
this.selectItem = {text: '指定日期',value: 'auto'};
|
||||
},
|
||||
changePopup() {
|
||||
if(this.showList) {
|
||||
this.closePopup()
|
||||
} else {
|
||||
this.openPopup()
|
||||
}
|
||||
},
|
||||
openPopup() {
|
||||
setTimeout(() => {
|
||||
this.showClass = 'show';
|
||||
this.showList = true;
|
||||
}, 100);
|
||||
},
|
||||
closePopup() {
|
||||
this.showClass = ''
|
||||
setTimeout(() => {
|
||||
this.showList = false
|
||||
}, 200);
|
||||
},
|
||||
close() {
|
||||
this.showClass = ''
|
||||
this.showList = false
|
||||
},
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
|
||||
li{
|
||||
list-style-type:none;
|
||||
}
|
||||
.dropdown-item__content{
|
||||
z-index: 10!important;
|
||||
}
|
||||
.dropdown-item {
|
||||
width: 100%;
|
||||
flex:1;
|
||||
position: relative;
|
||||
&__selected {
|
||||
position: relative;
|
||||
padding: 10rpx 0;
|
||||
box-sizing: border-box;
|
||||
color: #fff;
|
||||
.selected__name {
|
||||
font-size: 28rpx;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.selected__icon {
|
||||
margin-left: 20rpx;
|
||||
&.down {
|
||||
transition: transform .3s;
|
||||
transform: rotateZ(0);
|
||||
}
|
||||
&.up {
|
||||
transition: transform .3s;
|
||||
transform: rotateZ(-180deg);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
&__left{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-start;
|
||||
align-items: center;
|
||||
}
|
||||
&__right{
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: flex-end;
|
||||
align-items: center;
|
||||
}
|
||||
&__content {
|
||||
position: fixed;
|
||||
left: 0;
|
||||
right: 0;
|
||||
overflow: hidden;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
z-index: 1;
|
||||
.list {
|
||||
max-height: 400px;
|
||||
text-align: center;
|
||||
overflow-y: auto;
|
||||
position: absolute;
|
||||
z-index: 1200;
|
||||
background: #fff;
|
||||
transform: translateY(-100%);
|
||||
transition: all .3s;
|
||||
&.show {
|
||||
transform: translateY(0);
|
||||
}
|
||||
&__option {
|
||||
font-size:30rpx;
|
||||
padding: 18rpx;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
color: #303133;
|
||||
&:not(:last-child) {
|
||||
border-bottom: 1rpx solid #DDDDDD;
|
||||
}
|
||||
}
|
||||
}
|
||||
.dropdown-mask {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
right: 0;
|
||||
top: 0;
|
||||
bottom: 0;
|
||||
transition: all .3s;
|
||||
z-index: 1100;
|
||||
&.show {
|
||||
background:rgba(0,0,0,0.5);
|
||||
}
|
||||
}
|
||||
}
|
||||
&:not(:last-child):after {
|
||||
content: ' ';
|
||||
position: absolute;
|
||||
width: 2rpx;
|
||||
top: 36rpx;
|
||||
bottom: 36rpx;
|
||||
right: 0;
|
||||
background: $uni-border-color;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -0,0 +1,125 @@
|
||||
<template>
|
||||
<view>
|
||||
<view v-if="copyContent.length > 0" class="ranking">
|
||||
<view class="ranking-item" v-for="(content,index) in copyContent" :key="index" :style="{padding:progressPadding+'rpx'}">
|
||||
<view class="name">{{content.name}}</view>
|
||||
<view class="progress" >
|
||||
<text :style="{background:content.background,width:content.width + '%',height:progressWidth+'rpx'}"></text>
|
||||
</view>
|
||||
<view class="num">{{content.num}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default{
|
||||
name:'ranking-list',
|
||||
props:{
|
||||
content:{
|
||||
type: Array,
|
||||
default() {
|
||||
return []
|
||||
}
|
||||
},
|
||||
isPC:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
},
|
||||
isRank:{
|
||||
type:Boolean,
|
||||
default:false
|
||||
}
|
||||
},
|
||||
data(){
|
||||
return{
|
||||
progressWidth:24,
|
||||
progressPadding:10,
|
||||
maxNumber:0,
|
||||
culCount:0,
|
||||
copyContent:[]
|
||||
}
|
||||
},
|
||||
watch:{
|
||||
content(newV){
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
methods:{
|
||||
init(){
|
||||
this.copyContent = this.deepClone(this.content)
|
||||
if(this.copyContent && this.copyContent.length >0){
|
||||
if(this.isRank){
|
||||
this.copyContent = this.copyContent.sort((a,b) => b.num - a.num);
|
||||
this.maxNumber = this.copyContent[0].num;
|
||||
}else{
|
||||
this.maxNumber = Math.max.apply(Math,this.copyContent.map(item => { return item.num }));
|
||||
}
|
||||
this.copyContent.map((item,index) =>{
|
||||
item.width = this.computeWidth(this.maxNumber,item.num);
|
||||
});
|
||||
}
|
||||
},
|
||||
computeWidth(max,current){
|
||||
let num = (current / max) * 100;
|
||||
return num.toFixed(2);
|
||||
},
|
||||
deepClone(obj) {
|
||||
var cloneObj = new obj.constructor()
|
||||
if(obj === null) return obj
|
||||
if(obj instanceof Date) return new Date(obj)
|
||||
if(obj instanceof RegExp) return new RegExp(obj)
|
||||
if (typeof obj !== 'object') return obj
|
||||
for (var i in obj) {
|
||||
if (obj.hasOwnProperty(i)) {
|
||||
cloneObj[i] = this.deepClone(obj[i])
|
||||
}
|
||||
}
|
||||
return cloneObj
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
if(this.isPC){
|
||||
this.progressWidth = 40;
|
||||
this.progressPadding = 30;
|
||||
}
|
||||
this.init();
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
.ranking-item{
|
||||
display: flex;
|
||||
margin-bottom: 13rpx;
|
||||
align-content: center;
|
||||
height: 50rpx;
|
||||
|
||||
.name{
|
||||
padding-right: 10rpx;
|
||||
color: #868688;
|
||||
font-size: 20rpx;
|
||||
flex: 1;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
.progress{
|
||||
flex:5;
|
||||
text-align: left;
|
||||
padding-right: 10rpx;
|
||||
|
||||
text{
|
||||
display: inline-block;
|
||||
border-radius: 30rpx;
|
||||
vertical-align:top;
|
||||
}
|
||||
|
||||
}
|
||||
.num{
|
||||
font-size: 26rpx;
|
||||
color: #3EB2F5;
|
||||
flex: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user