新增:微信设置

Signed-off-by: skyselang <215817969@qq.com>
This commit is contained in:
skyselang 2021-04-26 23:44:18 +08:00
parent e91952b2e5
commit 7717a4fdcc
7 changed files with 383 additions and 335 deletions

View File

@ -1,168 +0,0 @@
# yylAdmin 快速、简单、轻量
- <a href="https://gitee.com/skyselang/yylAdmin">Gitee</a> | <a href="https://github.com/skyselang/yylAdmin">Github</a> | <a href="https://gitee.com/skyselang/yylAdmin/wikis">文档</a>
## 简介
yylAdmin是一个基于ThinkPHP6和Vue2极简后台管理系统只有登录退出、权限管理、日志管理等基础功能前后台基础框架你可以在此基础上根据你的业务需求进行开发扩展。简单轻量开箱即用前后分离免费开源。
- <a href="https://gitee.com/skyselang/yylAdmin">yylAdmin</a> | <a href="https://gitee.com/skyselang/yylAdminWeb">yylAdminWeb</a>
## 演示
- 地址:<a href="https://admin.yyladmin.top" target="_blank">yylAdmin demo</a>
- 账号yyladmin、admin、demo、php
- 密码123456
- 提示:演示账号只有部分权限,请安装体验全部功能
## 准备
- <a href="https://www.xp.cn" target="_blank">PhpStudy</a> |
<a href="https://www.phpcomposer.com" target="_blank">Composer</a> |
<a href="https://nodejs.org/zh-cn" target="_blank">Node</a> |
<a href="https://git-scm.com" target="_blank">Git</a> |
<a href="https://www.kancloud.cn/manual/thinkphp6_0/1037479" target="_blank">ThinkPHP</a> |
<a href="https://cn.vuejs.org/v2/guide/syntax.html" target="_blank">Vue</a> |
<a href="https://element.eleme.cn/#/zh-CN/component/installation" target="_blank">Element</a>
## 要求
- PHP >= 7.3
安装 fileinfo 扩展
开启 putenv、proc_open 函数
- MySQL >= 5.6
- Node >= 10.15.0
- npm >= 5.6.0
## 安装
- 前后分离,需分别安装
### 后端
```bash
# 克隆项目
git clone https://gitee.com/skyselang/yylAdmin.git
# 进入项目目录
cd yylAdmin
# 设置composer
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/
# 安装依赖
composer install
# 导入数据库
数据库文件public/private/yyladmin.sql
# 修改配置
重命名.env.example成.env环境变量文件修改里面配置或修改config文件夹里面的配置
# 环境配置phpStudy
根据你的实际情况配置
域名localhost
端口9526
根目录yylAdmin/public
PHP版本7.3
伪静态Nginx
location / {
if (!-e $request_filename){
rewrite ^(.*)$ /index.php?s=$1 last; break;
}
}
```
### 前端
```bash
# 克隆项目
git clone https://gitee.com/skyselang/yylAdminWeb.git
# 进入项目目录
cd yylAdminWeb
# 使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装依赖
cnpm install
# 修改配置
在.env.xxx环境变量文件里面修改接口地址后端环境配置域名端口
VUE_APP_BASE_API = 'http://localhost:9526'
# 本地开发 启动服务
cnpm run dev
# 开发完打包正式环境
cnpm run build:prod
# 开发完打包测试环境
cnpm run build:stage
```
### 访问
- 地址http://localhost:9527
- 账号yyladmin
- 密码123456
- 管理员skyselang
- 密码123456
## 目录
```bash
yylAdmin
├── app # 应用(核心目录)
│ │── admin # 后台接口
│ │ │── controller # 控制器(请求参数)
│ │ │── middleware # 中间件(拦截或过滤请求)
│ │ │── service # 业务逻辑
│ │ │── validate # 验证器(验证参数)
│ │── common # 公共(缓存、工具等)
│ └── index # 前台接口
│ ...
├── config # 配置目录admin、index其它为tp配置
├── extend # 扩展类库
├── public # 对外访问目录
│ │── private # 数据库文件在里面
│ │── static # 静态资源目录
│ │── storage # 上传目录(读写权限)
│ │── .htaccess # apache重写文件
│ │── index.php # 入口文件
│ └── nginx.htaccess # nginx重写文件
│ ...
├── route # 路由(没有用到路由)
├── runtime # 运行时目录(读写权限)
├── vendor # Composer类库目录
├── .env.example # 环境变量示例文件,重命名.env后使用
...
# 更多请参考thinkphp6目录结构
yylAdminWeb
├── build # 构建相关
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求接口
│ ├── assets # 主题字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局filter
│ ├── layout # 全局layout
│ ├── router # 路由
│ ├── store # 全局store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── views # 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件加载组件初始化等
│ ├── permission.js # 权限管理
│ └── setting.js # 基础设置
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint配置项
├── package.json # package.json
├── postcss.config.js # postcss配置
└── vue.config.js # vue-cli配置
...
```
## 预览
- <img width="100%" src="./public/static/img/yyladmin_login.jpg">
- <img width="100%" src="./public/static/img/yyladmin.jpg">
## 反馈
- 有任何疑问或者建议,请提 <a href="https://gitee.com/skyselang/yylAdmin/issues">Issue</a>
## 协议
- Apache-2.0许可协议,免费开源
- Copyright skyselang https://gitee.com/skyselang

169
README.md
View File

@ -1,168 +1,3 @@
# yylAdmin 快速、简单、轻量
- <a href="https://gitee.com/skyselang/yylAdmin">Gitee</a> | <a href="https://github.com/skyselang/yylAdmin">Github</a> | <a href="https://gitee.com/skyselang/yylAdmin/wikis">文档</a>
# yylAdminWeb
## 简介
yylAdmin是一个基于ThinkPHP6和Vue2极简后台管理系统只有登录退出、权限管理、日志管理等基础功能前后台基础框架你可以在此基础上根据你的业务需求进行开发扩展。简单轻量开箱即用前后分离免费开源。
- <a href="https://github.com/skyselang/yylAdmin">yylAdmin</a> | <a href="https://github.com/skyselang/yylAdminWeb">yylAdminWeb</a>
## 演示
- 地址:<a href="https://admin.yyladmin.top" target="_blank">yylAdmin demo</a>
- 账号yyladmin、admin、demo、php
- 密码123456
- 提示:演示账号只有部分权限,请安装体验全部功能
## 准备
- <a href="https://www.xp.cn" target="_blank">PhpStudy</a> |
<a href="https://www.phpcomposer.com" target="_blank">Composer</a> |
<a href="https://nodejs.org/zh-cn" target="_blank">Node</a> |
<a href="https://git-scm.com" target="_blank">Git</a> |
<a href="https://www.kancloud.cn/manual/thinkphp6_0/1037479" target="_blank">ThinkPHP</a> |
<a href="https://cn.vuejs.org/v2/guide/syntax.html" target="_blank">Vue</a> |
<a href="https://element.eleme.cn/#/zh-CN/component/installation" target="_blank">Element</a>
## 要求
- PHP >= 7.3
安装 fileinfo 扩展
开启 putenv、proc_open 函数
- MySQL >= 5.6
- Node >= 10.15.0
- npm >= 5.6.0
## 安装
- 前后分离,需分别安装
### 后端
```bash
# 克隆项目
git clone https://github.com/skyselang/yylAdmin.git
# 进入项目目录
cd yylAdmin
# 设置composer
composer config -g repo.packagist composer https://mirrors.aliyun.com/composer/
# 安装依赖
composer install
# 导入数据库
数据库文件public/private/yyladmin.sql
# 修改配置
重命名.env.example成.env环境变量文件修改里面配置或修改config文件夹里面的配置
# 环境配置phpStudy
根据你的实际情况配置
域名localhost
端口9526
根目录yylAdmin/public
PHP版本7.3
伪静态Nginx
location / {
if (!-e $request_filename){
rewrite ^(.*)$ /index.php?s=$1 last; break;
}
}
```
### 前端
```bash
# 克隆项目
git clone https://github.com/skyselang/yylAdminWeb.git
# 进入项目目录
cd yylAdminWeb
# 使用cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安装依赖
cnpm install
# 修改配置
在.env.xxx环境变量文件里面修改接口地址后端环境配置域名端口
VUE_APP_BASE_API = 'http://localhost:9526'
# 本地开发 启动服务
cnpm run dev
# 开发完打包正式环境
cnpm run build:prod
# 开发完打包测试环境
cnpm run build:stage
```
### 访问
- 地址http://localhost:9527
- 账号yyladmin
- 密码123456
- 管理员skyselang
- 密码123456
## 目录
```bash
yylAdmin
├── app # 应用(核心目录)
│ │── admin # 后台接口
│ │ │── controller # 控制器(请求参数)
│ │ │── middleware # 中间件(拦截或过滤请求)
│ │ │── service # 业务逻辑
│ │ │── validate # 验证器(验证参数)
│ │── common # 公共(缓存、工具等)
│ └── index # 前台接口
│ ...
├── config # 配置目录admin、index其它为tp配置
├── extend # 扩展类库
├── public # 对外访问目录
│ │── private # 数据库文件在里面
│ │── static # 静态资源目录
│ │── storage # 上传目录(读写权限)
│ │── .htaccess # apache重写文件
│ │── index.php # 入口文件
│ └── nginx.htaccess # nginx重写文件
│ ...
├── route # 路由(没有用到路由)
├── runtime # 运行时目录(读写权限)
├── vendor # Composer类库目录
├── .env.example # 环境变量示例文件,重命名.env后使用
...
# 更多请参考thinkphp6目录结构
yylAdminWeb
├── build # 构建相关
├── public # 静态资源
│ │── favicon.ico # favicon图标
│ └── index.html # html模板
├── src # 源代码
│ ├── api # 所有请求接口
│ ├── assets # 主题字体等静态资源
│ ├── components # 全局公用组件
│ ├── directive # 全局指令
│ ├── filters # 全局filter
│ ├── layout # 全局layout
│ ├── router # 路由
│ ├── store # 全局store管理
│ ├── styles # 全局样式
│ ├── utils # 全局公用方法
│ ├── views # 所有页面
│ ├── App.vue # 入口页面
│ ├── main.js # 入口文件加载组件初始化等
│ ├── permission.js # 权限管理
│ └── setting.js # 基础设置
├── .env.xxx # 环境变量配置
├── .eslintrc.js # eslint配置项
├── package.json # package.json
├── postcss.config.js # postcss配置
└── vue.config.js # vue-cli配置
...
```
## 预览
- <img width="100%" src="./public/static/img/yyladmin_login.jpg">
- <img width="100%" src="./public/static/img/yyladmin.jpg">
## 反馈
- 有任何疑问或者建议,请提 <a href="https://github.com/skyselang/yylAdmin/issues">Issue</a>
## 协议
- Apache-2.0许可协议,免费开源
- Copyright skyselang https://github.com/skyselang
## [yylAdmin](https://gitee.com/skyselang/yylAdmin) 后台前端

47
src/api/wechat-config.js Normal file
View File

@ -0,0 +1,47 @@
import request from '@/utils/request'
// ----------------微信配置-------------------
/**
* 公众号信息
* @param {array} params 请求参数
*/
export function offiInfo(params) {
return request({
url: '/admin/WechatConfig/offiInfo',
method: 'get',
params: params
})
}
/**
* 公众号修改
* @param {array} data 请求数据
*/
export function offiEdit(data) {
return request({
url: '/admin/WechatConfig/offiEdit',
method: 'post',
data
})
}
/**
* 小程序信息
* @param {array} params 请求参数
*/
export function miniInfo(params) {
return request({
url: '/admin/WechatConfig/miniInfo',
method: 'get',
params: params
})
}
/**
* 小程序修改
* @param {array} data 请求数据
*/
export function miniEdit(data) {
return request({
url: '/admin/WechatConfig/miniEdit',
method: 'post',
data
})
}

View File

@ -215,6 +215,16 @@ export const asyncRoutes = [
roles: ['admin/Setting/token']
},
component: () => import('@/views/setting/token')
},
{
path: 'wechat',
name: 'wechat',
meta: {
title: '微信设置',
icon: 'el-icon-s-grid',
roles: ['admin/WechatConfig/offiInfo']
},
component: () => import('@/views/setting/setting')
}
]
},

View File

@ -0,0 +1,132 @@
<template>
<el-card v-loading="loading" class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="12">
<el-form ref="ref" :model="model" :rules="rules" label-width="130px">
<el-form-item label="名称" prop="name">
<el-input v-model="model.name" />
</el-form-item>
<el-form-item label="原始ID" prop="origin_id">
<el-input v-model="model.origin_id" />
</el-form-item>
<el-form-item label="二维码" prop="qrcode">
<el-col :span="12">
<el-image shape="circle" fit="contain" style="height: 100px" :src="model.qrcode_url" :preview-src-list="[model.qrcode_url]">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</el-col>
<el-col :span="12">
<el-upload
name="file"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:data="uploadData"
:on-success="uploadSuccess"
:on-error="uploadError"
>
<el-button>上传</el-button>
</el-upload>
<span>jpgpng图片小于200KB宽高1:1</span>
</el-col>
</el-form-item>
<el-form-item label="AppID" prop="appid">
<el-input v-model="model.appid" />
</el-form-item>
<el-form-item label="AppSecret" prop="appsecret">
<el-input v-model="model.appsecret" />
</el-form-item>
<el-form-item>
<el-button @click="refresh()">刷新</el-button>
<el-button type="primary" @click="submit()">提交</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
</template>
<script>
import { miniInfo, miniEdit } from '@/api/wechat-config'
import { getAdminUserId, getAdminToken } from '@/utils/auth'
export default {
components: {},
data() {
return {
loading: false,
model: {
name: '',
origin_id: '',
qrcode: '',
appid: '',
appsecret: '',
qrcode_url: ''
},
uploadAction: process.env.VUE_APP_BASE_API + '/admin/WechatConfig/qrcode',
uploadHeaders: { AdminUserId: getAdminUserId(), AdminToken: getAdminToken() },
uploadData: { type: 'mini' },
rules: {
appid: [{ required: true, message: '请输入appid', trigger: 'blur' }],
appsecret: [{ required: true, message: '请输入appsecret', trigger: 'blur' }]
}
}
},
created() {
this.info()
},
methods: {
//
info() {
miniInfo().then((res) => {
this.model = res.data
})
},
//
refresh() {
this.loading = true
miniInfo()
.then((res) => {
this.model = res.data
this.loading = false
this.$message.success(res.msg)
})
.catch(() => {
this.loading = false
})
},
//
submit() {
this.$refs['ref'].validate((valid) => {
if (valid) {
this.loading = true
miniEdit(this.model)
.then((res) => {
this.info()
this.loading = false
this.$message.success(res.msg)
})
.catch(() => {
this.loading = false
})
}
})
},
//
uploadSuccess(res, file) {
if (res.code === 200) {
this.model.qrcode_url = res.data.file_url
this.model.qrcode = res.data.file_path
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
},
uploadError(res, file) {
this.$message.error('上传出错')
}
}
}
</script>

View File

@ -0,0 +1,155 @@
<template>
<el-card v-loading="loading" class="box-card">
<el-row :gutter="0">
<el-col :xs="24" :sm="12">
<el-form ref="ref" :model="model" :rules="rules" label-width="130px">
<el-form-item label="名称" prop="name">
<el-input v-model="model.name" />
</el-form-item>
<el-form-item label="原始ID" prop="origin_id">
<el-input v-model="model.origin_id" />
</el-form-item>
<el-form-item label="二维码" prop="qrcode">
<el-col :span="12">
<el-image shape="circle" fit="contain" style="height: 100px" :src="model.qrcode_url" :preview-src-list="[model.qrcode_url]">
<div slot="error" class="image-slot">
<i class="el-icon-picture-outline" />
</div>
</el-image>
</el-col>
<el-col :span="12">
<el-upload
name="file"
:show-file-list="false"
:action="uploadAction"
:headers="uploadHeaders"
:data="uploadData"
:on-success="uploadSuccess"
:on-error="uploadError"
>
<el-button>上传</el-button>
</el-upload>
<span>jpgpng图片小于200KB宽高1:1</span>
</el-col>
</el-form-item>
<el-form-item label="AppID" prop="appid">
<el-input v-model="model.appid" />
</el-form-item>
<el-form-item label="AppSecret" prop="appsecret">
<el-input v-model="model.appsecret" />
</el-form-item>
<el-form-item label="服务器地址(URL)" prop="url">
<el-input v-model="model.url" />
</el-form-item>
<el-form-item label="令牌(Token)" prop="token">
<el-input v-model="model.token" />
</el-form-item>
<el-form-item label="消息加解密密钥" prop="encoding_aes_key">
<el-input v-model="model.encoding_aes_key" />
</el-form-item>
<el-form-item label="消息加解密方式" prop="encoding_aes_type">
<el-radio-group v-model="model.encoding_aes_type">
<el-radio v-for="item in encoding_aes_types" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item>
<el-button @click="refresh()">刷新</el-button>
<el-button type="primary" @click="submit()">提交</el-button>
</el-form-item>
</el-form>
</el-col>
</el-row>
</el-card>
</template>
<script>
import { offiInfo, offiEdit } from '@/api/wechat-config'
import { getAdminUserId, getAdminToken } from '@/utils/auth'
export default {
components: {},
data() {
return {
loading: false,
encoding_aes_types: [
{ value: 1, label: '明文模式' },
{ value: 2, label: '兼容模式' },
{ value: 3, label: '安全模式' }
],
model: {
name: '',
origin_id: '',
qrcode: '',
appid: '',
appsecret: '',
url: '',
token: '',
encoding_aes_key: '',
encoding_aes_type: 1,
qrcode_url: ''
},
uploadAction: process.env.VUE_APP_BASE_API + '/admin/WechatConfig/qrcode',
uploadHeaders: { AdminUserId: getAdminUserId(), AdminToken: getAdminToken() },
uploadData: { type: 'offi' },
rules: {
appid: [{ required: true, message: '请输入appid', trigger: 'blur' }],
appsecret: [{ required: true, message: '请输入appsecret', trigger: 'blur' }]
}
}
},
created() {
this.info()
},
methods: {
//
info() {
offiInfo().then((res) => {
this.model = res.data
})
},
//
refresh() {
this.loading = true
offiInfo()
.then((res) => {
this.model = res.data
this.loading = false
this.$message.success(res.msg)
})
.catch(() => {
this.loading = false
})
},
//
submit() {
this.$refs['ref'].validate((valid) => {
if (valid) {
this.loading = true
offiEdit(this.model)
.then((res) => {
this.info()
this.loading = false
this.$message.success(res.msg)
})
.catch(() => {
this.loading = false
})
}
})
},
//
uploadSuccess(res, file) {
if (res.code === 200) {
this.model.qrcode_url = res.data.file_url
this.model.qrcode = res.data.file_path
this.$message.success(res.msg)
} else {
this.$message.error(res.msg)
}
},
uploadError(res, file) {
this.$message.error('上传出错')
}
}
}
</script>

View File

@ -0,0 +1,37 @@
<template>
<div class="app-container">
<el-tabs v-model="actTabName" @tab-click="tabClick">
<el-tab-pane v-if="checkPermission(['admin/WechatConfig/offiInfo'])" label="公众号" name="WechatOffi">
<wechat-offi v-if="WechatOffi" />
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin/WechatConfig/miniInfo'])" label="小程序" name="WechatMini">
<wechat-mini v-if="WechatMini" />
</el-tab-pane>
</el-tabs>
</div>
</template>
<script>
import checkPermission from '@/utils/permission' //
import WechatOffi from './components/WechatOffi'
import WechatMini from './components/WechatMini'
export default {
name: 'Map',
components: { WechatOffi, WechatMini },
data() {
return {
WechatOffi: true,
WechatMini: false,
actTabName: 'WechatOffi'
}
},
created() { },
methods: {
checkPermission,
tabClick(tab) {
this[tab.name] = true
}
}
}
</script>