Javascript

thinkphp后台管理系统+vue前端H5 app

本文主要是介绍thinkphp后台管理系统+vue前端H5 app,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!

thinkphp后台管理系统+vue前端H5 app
众包接单型App
全部源码已发布,欢迎star,
移步码云

前言

1.帮朋友做的一个接单类型的后台管理系统(朋友的需求是淘宝好评刷管理)
2.目前利用空闲时间改造成了接单众包类型的后台管理系统并且利用vue做了个手机端H5App
3.目前没有服务器提供演示(具体我都会截图看效果)

业务场景介绍

当前十分火热的众包模式如美团众包,阿里众包等,国外已经火了很久了witkee模式
简单来讲就是用户可以在app中发布自己的需求让其他有能力的用户替自己办事并获得相应的佣金报酬

1.后管的功能:

—后管主要是通过对用户数据的详细分析从而精准的推广和营销

2.前端功能

—前端负责展示接单任务并在用户接单和完成之后将用户提交数据传给后台,既然涉及到前端,那良好的用户体验和友好的界面是必须的,这里我只是随意写了一个,ui的话见仁见智不喜勿喷,拿到后可以自行修改
原型图axure也一起提供,方便某些做产品的先行专业修改再进行开发
在这里插入图片描述

演示效果图

后台管理系统

1.登录界面(三主题选择)

在这里插入图片描述

2.首页界面

输入图片说明

3.系统设置

—自定义变量(主要是给管理员动态设置一些前端App的场景值如:提现平台收取手续费, 发布任务平台收取手续费比例,网站显示名,网站标题等,高度自定义化,让客户使用起来更加便捷)
输入图片说明
输入图片说明
—菜单配置(后台view中新建菜单文件,在这边填入正确的路径地址即可展示)
输入图片说明
—数据库备份还原(这个就不过多介绍了,知道后台代码有这功能就可以了)

4.用户及权限管理

—用户管理(简单的增删改查)
输入图片说明
—权限分配(这也是每一个后管的核心功能,这里面详细的对每一个菜单事件的处理添加了权限可以自定义修改)
输入图片说明

5.任务管理(管理员后台可以手动发布任务,也可以审核用户发布的任务)

输入图片说明
输入图片说明
输入图片说明

6.信息管理

—首页轮播图管理(自行修改轮播图以及轮播图跳转连接)
输入图片说明
—通知公告(添加公告可以实时下发到用户手机app端)
输入图片说明
—客服信息(在这里可以添加客服信息)
输入图片说明
—商务合作(添加邮箱等信息在前端App展示)
—会员动态(这里是实时监听前端App用户的一些重要信息展示给后台管理员如:接单,发布任务,充值会员,提现等一系列操作)
输入图片说明

7.资金监控(这也是涉及到资金管理平台最核心的功能之一,清晰的资金流水能更好的帮助管理员分析和合理的推广自己的app)

—会员收益(用户的所有接单或者邀请新人的奖励都会显示在这里)
—资金监控:实时分析了用户的账户余额变动等信息
—用户提现:显示了用户提现的明细(管理员在这里对用户的提现进行审核和驳回)
输入图片说明
—收款类型:设置用户的提现方式如支付宝微信或者银行卡
输入图片说明

8.会员管理(这也是十分重要的功能,详细分析用户的数据都在这里)

输入图片说明
—定向推送功能:我们可以针对某一个用户的活跃程度定向推送一些活动信息
输入图片说明
—会员数据监控:可以实时监控用户的行为如登录次数,最近登录时间,充值按钮发布按钮等点击次数热力图,可以精准的把握用户的行为更有利于精准营销
—会员等级设置:后台可以直接自定义会员等级,会员卡图片已经会员等级徽章等信息
输入图片说明

9.团队等级(指的是用户通过推广码邀请的新人自动编入一个团队,团队成员的活动都可以查看,并且可以设置团队的等级,有点类似战队或者帮会的功能)

输入图片说明

10.后管通知功能(用户前端app的一些通知会发送到管理员后管,方便管理员实时处理如发布任务审核,接单审核,用户提现审核等)

输入图片说明

前端手机H5App界面

(时间有限,截图繁琐,陆续更新!着急的话可以去原型图先行查看大概效果)

1.注册(验证码采用的是第三方平台获取的,直接接入第三方Api就行)

输入图片说明

2.登录

输入图片说明

3.首页

输入图片说明

4.任务页面

输入图片说明

5.附加板块(用户社区建设)

输入图片说明
------聊天室功能(增加用户与平台的粘度)
输入图片说明

------其他模块(待完善)

6.发布任务页面

输入图片说明

7.个人中心页面

输入图片说明

8.邀请新人奖励页面

输入图片说明

9.推广页面

输入图片说明

10.查看收益页面

输入图片说明

11.接单页面

输入图片说明

12.完成任务提交页面

输入图片说明

13.消息页面

输入图片说明

14.开通会员页面

输入图片说明

15.定向推送弹窗页面

输入图片说明

代码架构

1.前端vue H5页面(可直接封装H5版本的安卓&&ios App),主要用的vant组件
2.后台管理系统:thinkphp,数据库mysql
3.可以满足h5封装安卓苹果并分发给用户使用

安装教程(考虑到完全的新手也想用,我这里尽量详细,如果你有基础,请别嫌弃啰嗦)

1. 下载代码dianzan
2. 电脑安装php环境并配置,mysql数据库(这里推荐phpStudy一键部署环境:下载phpStudy–>安装php,mysql)

输入图片说明

3. mysql新建数据库(用户名密码见代码config中的配置),然后导入sql文件(sql文件会放在项目的DB文件夹)

输入图片说明

4. 配置nginx环境,直接代码放进去新建一个本地web网站就可以运行

输入图片说明

结尾

1.php相对来说比较简单,如果部署运行有问题,可以随时联系(1760609433@qq.com)
这篇关于thinkphp后台管理系统+vue前端H5 app的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!