作者主页:编程指南针
作者简介:Java领域优质创作者、CSDN博客专家 、CSDN内容合伙人、掘金特邀作者、阿里云博客专家、51CTO特邀作者、多年架构师设计经验、腾讯课堂常驻讲师
主要内容:Java项目、Python项目、前端项目、人工智能与大数据、简历模板、学习资料、面试题库、技术互助
收藏点赞不迷路 关注作者有好处
文末获取源码
项目编号:BS-XCX-015
一,环境介绍
语言环境:Java: jdk1.8
数据库:Mysql: mysql5.7
应用服务器:Tomcat: tomcat8.5.31
开发工具:IDEA或eclipse
前台开发技术:微信小程序+Vue+ElementUI
后台开发技术:SSM开发框架
二,项目简介
2.1 系统介绍
改革开放四十年来最大的成就就是让全国的老百姓都能吃得饱,穿得暖,过上物质生活相对优越的生活。人们也从最初追求基本的温饱问题转而追求更高的生活品质,包括更好的健康追求。最近这些年随着健身需求的迸发,培养出了一个新的行业,那就是陪练行业。它主要解决有些人想锻炼又怕自己坚持不住,或者需要一定的指导的客户需求,本次课题主要就是研究如何通过信息化技术有效的解决陪练行业的相关的预约等服务问题。
本课题主要实现通过小程序进行在线预约陪练,下单支付,信息反馈,对陪练行业员工及其它信息的相关管理功能。系统利用所学的JAVA开发技术,利用Springboot框架实现系统的后台接口服务开发,使用VUE完成系统的前端页面开发,并通过微信小程序客户端来让用户进行在线使用更加方便,采用前后端分离的开发方式来实现。数据库采用MYSQL对陪你动系统中的业务数据进行存储,最终实现一个前后端分离的并结合微信小程序一起使用的陪练信息化系统。
2.2 需求分析
本次开发设计的陪你动小程序,使用的用户主要分为三类角色,一是系统管理员,二是公司员工,三是前端客户。这三类用户登陆系统后进行的操作权限是不同的,其中前端客户主要通过微信小程序进行登陆使用相关的预约下单等服务,管理员和员工通过后台管理系统进入可以管理相应的数据信息。
前端用户登陆系统后主要进行的操作如下:
(1)注册登陆:用户可以在微信小程序上注册个人账户并进行登陆,登陆后可以操作相关的模块。
(2)个人信息管理:查看自己所在的宿舍情况以及个人信息情况,并可以对个人信息进行相应的管理操作。
(3)陪练员浏览:可以浏览陪练人员的相关信息,根据相关条件进行搜索查看等。
(4)在线预约服务:对于指定的陪练员,用户可以在线预约陪练人员,指定陪练的时间信息并在线下单,同时可以在个人中心中查看自己的预约记录。
(5)查看陪练排行:可以查看陪练员工的各项排行指标信息,并对陪练人员进行在线评论等操作。
(6)反馈留言:可以在线实现相应的留言反馈功能。
(7)交流论坛:可以小程序中发布各种交流探讨的贴子,为各位喜欢健身的朋友提供一个交流场所。
(8)反馈留言:可以在线实现相应的留言反馈功能。
(9)资讯查看:可以查看后台管理员发布的相关资讯信息。
陪你动平台管理员登陆后台管理系统后进行的操作如下:
(1)轮播图管理模块:主要管理在微信小程序端展现的轮播图片。
(2)公告管理模块:主要管理在小程序端展现的系统公告信息。
(3)资讯管理模块:主要包含行业资讯信息管理和资讯分类管理。
(4)交流管理模块:主要管理交流论坛的主题分类和交流贴子信息。
(5)用户管理模块:主要管理系统管理员、员工管理、前端注册用户的信息。
(6)陪练人员管理模块:用户管理陪练公司的陪练人员信息。
(7)预约记录管理模块:主要管理前端用户预约下单的订单信息。
(8)排行管理模块:由平台系统管理员在后台平台管理前端展示的陪练人员排行信息。
(9)留言管理模块:主要管理前端用户在线留言信息。
(10)打分管理模块:由系统管理员在后台平台查看前端用户的打分信息。
陪你动员工登陆后台系统可以进行的操作如下:
(1)预约记录管理模块:主要管理前端用户预约下单的订单信息。
(2)排行管理模块:由员工在后台平台管理前端展示的陪练人员排行信息。
(3)打分管理模块:由员工在后台平台查看前端用户的打分信息。
2.3 核心业务功能
核心业务流程
功能结构图:
下面根据分析出来的三类用户,来将他们对应的核心功能结构图进行展示:
图2 前端用户功能模块图
图3 管理员后台功能模块图
图4 员工后台功能模块图
2.4 数据库设计
下面根据业务实体数据模型的抽取,设计出相关数据库表的物理逻辑字段及相关结构,具体如下面所列数据表所示。
表1 appointment_record (预约记录)
列名 |
数据类型 |
长度 |
默认值 |
说明 |
|
appointment_record_id |
int |
10 |
预约记录ID |
||
employee_information |
int |
10 |
0 |
员工信息 |
|
employee_name |
varchar |
64 |
员工姓名 |
||
employee_id |
varchar |
64 |
员工工号 |
||
type_of_sparring |
varchar |
64 |
陪练类型 |
||
sparring_price |
varchar |
64 |
陪练价格 |
||
customer_information |
int |
10 |
0 |
客户信息 |
|
customer_name |
varchar |
64 |
客户姓名 |
||
contact_number |
varchar |
64 |
联系电话 |
||
appointment_duration |
int |
10 |
0 |
预约时长 |
|
total_reservation_price |
varchar |
64 |
预约总价 |
||
time_of_appointment |
datetime |
19 |
预约时间 |
||
appointment_remarks |
text |
65535 |
预约备注 |
||
appointment_status |
varchar |
64 |
预约状态 |
||
appointment_reply |
text |
65535 |
预约回复 |
||
pay_state |
varchar |
16 |
未支付 |
支付状态 |
|
pay_type |
varchar |
16 |
支付类型: 微信、支付宝、网银 |
||
recommend |
int |
10 |
0 |
智能推荐 |
|
create_time |
datetime |
19 |
CURRENT_TIMESTAMP |
创建时间 |
|
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间 |
表2 article (文章:用于内容管理系统的文章)
名称 |
数据类型 |
长度 |
说明 |
article_id |
mediumint |
8 |
文章id:[0,8388607] |
title |
varchar |
125 |
标题:[0,125]用于文章和html的title标签中 |
type |
varchar |
64 |
文章分类:[0,1000]用来搜索指定类型的文章 |
hits |
int |
10 |
点击数:[0,1000000000]访问这篇文章的人次 |
praise_len |
int |
10 |
点赞数 |
create_time |
timestamp |
19 |
创建时间: |
update_time |
timestamp |
19 |
更新时间: |
source |
varchar |
255 |
来源:[0,255]文章的出处 |
url |
varchar |
255 |
来源地址:[0,255]用于跳转到发布该文章的网站 |
tag |
varchar |
255 |
标签:[0,255]用于标注文章所属相关内容,多个标签用空格隔开 |
content |
longtext |
2147483647 |
正文:文章的主体内容 |
img |
varchar |
255 |
封面图 |
description |
text |
65535 |
文章描述 |
表3 article_type (文章分类)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
type_id |
smallint |
5 |
分类ID:[0,10000] |
|
display |
smallint |
5 |
100 |
显示顺序:[0,1000]决定分类显示的先后顺序 |
name |
varchar |
16 |
分类名称:[2,16] |
|
father_id |
smallint |
5 |
0 |
上级分类ID:[0,32767] |
description |
varchar |
255 |
描述:[0,255]描述该分类的作用 |
|
icon |
text |
65535 |
分类图标: |
|
url |
varchar |
255 |
外链地址:[0,255]如果该分类是跳转到其他网站的情况下,就在该URL上设置 |
|
create_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
创建时间: |
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间: |
表4 comment (评论)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
comment_id |
int |
10 |
评论ID: |
|
user_id |
int |
10 |
0 |
评论人ID: |
reply_to_id |
int |
10 |
0 |
回复评论ID:空为0 |
content |
longtext |
2147483647 |
内容: |
|
nickname |
varchar |
255 |
昵称: |
|
avatar |
varchar |
255 |
头像地址:[0,255] |
|
create_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
创建时间: |
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间: |
source_table |
varchar |
255 |
来源表: |
|
source_field |
varchar |
255 |
来源字段: |
|
source_id |
int |
10 |
0 |
来源ID: |
表5 customer_user (客户用户)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
customer_user_id |
int |
10 |
客户用户ID |
|
customer_name |
varchar |
64 |
客户姓名 |
|
customer_gender |
varchar |
64 |
客户性别 |
|
customer_age |
varchar |
64 |
客户年龄 |
|
examine_state |
varchar |
16 |
已通过 |
审核状态 |
recommend |
int |
10 |
0 |
智能推荐 |
user_id |
int |
10 |
0 |
用户ID |
create_time |
datetime |
19 |
CURRENT_TIMESTAMP |
创建时间 |
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间 |
表6 employee_user (员工用户)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
employee_user_id |
int |
10 |
员工用户ID |
|
employee_name |
varchar |
64 |
员工姓名 |
|
employee_gender |
varchar |
64 |
员工性别 |
|
employee_id |
varchar |
64 |
员工工号 |
|
examine_state |
varchar |
16 |
已通过 |
审核状态 |
recommend |
int |
10 |
0 |
智能推荐 |
user_id |
int |
10 |
0 |
用户ID |
create_time |
datetime |
19 |
CURRENT_TIMESTAMP |
创建时间 |
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间 |
表6 forum (论坛)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
forum_id |
mediumint |
8 |
论坛id |
|
display |
smallint |
5 |
100 |
排序 |
user_id |
mediumint |
8 |
0 |
用户ID |
nickname |
varchar |
16 |
昵称:[0,16] |
|
praise_len |
int |
10 |
0 |
点赞数 |
hits |
int |
10 |
0 |
访问数 |
title |
varchar |
125 |
标题 |
|
keywords |
varchar |
125 |
关键词 |
|
description |
varchar |
255 |
描述 |
|
url |
varchar |
255 |
来源地址 |
|
tag |
varchar |
255 |
标签 |
|
img |
text |
65535 |
封面图 |
|
content |
longtext |
2147483647 |
正文 |
|
create_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
创建时间: |
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间: |
avatar |
varchar |
255 |
发帖人头像: |
|
type |
varchar |
64 |
0 |
论坛分类:[0,1000]用来搜索指定类型的论坛帖 |
表6 message_feedback (留言反馈)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
message_feedback_id |
int |
10 |
留言反馈ID |
|
title_name |
varchar |
64 |
标题名称 |
|
customer_user |
int |
10 |
0 |
客户用户 |
customer_name |
varchar |
64 |
客户姓名 |
|
message_content |
text |
65535 |
留言内容 |
|
reply_content |
text |
65535 |
回复内容 |
|
recommend |
int |
10 |
0 |
智能推荐 |
create_time |
datetime |
19 |
CURRENT_TIMESTAMP |
创建时间 |
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间 |
表7 notice (公告)
名称 |
数据类型 |
长度 |
小数位 |
默认值 |
说明 |
notice_id |
mediumint |
8 |
0 |
公告id: |
|
title |
varchar |
125 |
0 |
标题: |
|
content |
longtext |
2147483647 |
0 |
正文: |
|
create_time |
timestamp |
19 |
0 |
CURRENT_TIMESTAMP |
创建时间: |
update_time |
timestamp |
19 |
0 |
CURRENT_TIMESTAMP |
更新时间: |
表8 ranking_information (排行信息)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
ranking_information_id |
int |
10 |
排行信息ID |
|
title_name |
varchar |
64 |
标题名称 |
|
employee_information |
int |
10 |
0 |
员工信息 |
employee_name |
varchar |
64 |
员工姓名 |
|
employee_id |
varchar |
64 |
员工工号 |
|
type_of_sparring |
varchar |
64 |
陪练类型 |
|
comprehensive_score |
varchar |
64 |
综合评分 |
|
employee_photo |
varchar |
255 |
员工照片 |
|
ranking_content |
longtext |
2147483647 |
排行内容 |
|
praise_len |
int |
10 |
0 |
点赞数 |
recommend |
int |
10 |
0 |
智能推荐 |
create_time |
datetime |
19 |
CURRENT_TIMESTAMP |
创建时间 |
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间 |
表9 scoring_record (打分记录)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
scoring_record_id |
int |
10 |
打分记录ID |
|
employee_information |
int |
10 |
0 |
员工信息 |
employee_name |
varchar |
64 |
员工姓名 |
|
employee_id |
varchar |
64 |
员工工号 |
|
type_of_sparring |
varchar |
64 |
陪练类型 |
|
customer_information |
int |
10 |
0 |
客户信息 |
customer_name |
varchar |
64 |
客户姓名 |
|
contact_number |
varchar |
64 |
联系电话 |
|
the_customer_gave_a_score |
varchar |
64 |
客户打分 |
|
scoring_remarks |
text |
65535 |
打分备注 |
|
recommend |
int |
10 |
0 |
智能推荐 |
create_time |
datetime |
19 |
CURRENT_TIMESTAMP |
创建时间 |
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间 |
表4-10 slides (轮播图)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
slides_id |
int |
10 |
轮播图ID: |
|
title |
varchar |
64 |
标题: |
|
content |
varchar |
255 |
内容: |
|
url |
varchar |
255 |
链接: |
|
img |
varchar |
255 |
轮播图: |
|
hits |
int |
10 |
0 |
点击量: |
create_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
创建时间: |
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间: |
表11 sparring_personnel (陪练人员)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
sparring_personnel_id |
int |
10 |
陪练人员ID |
|
employee_information |
int |
10 |
0 |
员工信息 |
employee_name |
varchar |
64 |
员工姓名 |
|
employee_id |
varchar |
64 |
员工工号 |
|
type_of_sparring |
varchar |
64 |
陪练类型 |
|
sparring_price |
int |
10 |
0 |
陪练价格 |
working_hours |
varchar |
64 |
工作时间 |
|
employee_photo |
varchar |
255 |
员工照片 |
|
employee_profile |
longtext |
2147483647 |
员工简介 |
|
hits |
int |
10 |
0 |
点击数 |
praise_len |
int |
10 |
0 |
点赞数 |
recommend |
int |
10 |
0 |
智能推荐 |
create_time |
datetime |
19 |
CURRENT_TIMESTAMP |
创建时间 |
update_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
更新时间 |
表12 user (用户账户:用于保存用户登录信息)
名称 |
数据类型 |
长度 |
默认值 |
说明 |
user_id |
mediumint |
8 |
用户ID:[0,8388607]用户获取其他与用户相关的数据 |
|
state |
smallint |
5 |
1 |
账户状态:[0,10](1可用|2异常|3已冻结|4已注销) |
user_group |
varchar |
32 |
所在用户组:[0,32767]决定用户身份和权限 |
|
login_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
上次登录时间: |
phone |
varchar |
11 |
手机号码:[0,11]用户的手机号码,用于找回密码时或登录时 |
|
phone_state |
smallint |
5 |
0 |
手机认证:[0,1](0未认证|1审核中|2已认证) |
username |
varchar |
16 |
用户名:[0,16]用户登录时所用的账户名称 |
|
nickname |
varchar |
16 |
昵称:[0,16] |
|
password |
varchar |
64 |
密码:[0,32]用户登录所需的密码,由6-16位数字或英文组成 |
|
|
varchar |
64 |
邮箱:[0,64]用户的邮箱,用于找回密码时或登录时 |
|
email_state |
smallint |
5 |
0 |
邮箱认证:[0,1](0未认证|1审核中|2已认证) |
avatar |
varchar |
255 |
头像地址:[0,255] |
|
create_time |
timestamp |
19 |
CURRENT_TIMESTAMP |
创建时间: |
三,系统展示
小程序端登录
陪练员列表展示
公告 信息展示
在线预约管理
陪练排行榜
反馈留言
论坛交流
后台管理功能
轮播图管理
公告管理
资讯管理
预约记录管理
四,核心代码展示
小程序首页核心代码
<template>
<view id="home" class="home--new">
<!-- 广告模块(开始) -->
<view>
<list_ad :list="list_ad" location="店招"></list_ad>
</view>
<!-- 广告模块(结束) -->
<!-- 轮播图模块(开始) -->
<view class="swiper">
<Slide :list="list_slide" />
</view>
<!-- 轮播图模块(结束) -->
<!-- 菜单模块(开始) -->
<view class="menu">
<list_menu :list="list_menu"></list_menu>
</view>
<!-- 菜单模块(结束) -->
<!-- 公告模块(开始) -->
<view class="notice">
<navigator url="/pages/notice/list">
<Notice :list="list_notice" />
</navigator>
</view>
<!-- 公告模块(结束) -->
<!-- 广告模块(开始) -->
<view>
<list_ad :list="list_ad" location="顶部广告"></list_ad>
</view>
<!-- 广告模块(结束) -->
<!-- 资讯中心模块(开始) -->
<Card
title="资讯中心"
url="/pages/article/list"
:list="list_article"
v-if="$check_action('/article/list', 'get')"
class="article_list"
>
<list_article :list="list_article"></list_article>
</Card>
<!-- 资讯中心模块(结束) -->
<!-- 广告模块(开始) -->
<view>
<list_ad :list="list_ad" location="中部广告"></list_ad>
</view>
<!-- 广告模块(结束) -->
<!-- 推荐陪练人员模块(开始) -->
<Card
class="list_diy"
title="陪练人员推荐"
url="/pages/sparring_personnel/list"
:list="list_article"
v-if="$check_action('/sparring_personnel/list', 'get')"
>
<list_sparring_personnel :list="list_sparring_personnel"></list_sparring_personnel>
</Card>
<!-- 推荐陪练人员模块(结束) -->
<!-- 广告模块(开始) -->
<view>
<list_ad :list="list_ad" location="底部广告"></list_ad>
</view>
<!-- 广告模块(结束) -->
<!-- 链接模块(开始) -->
<!-- <view>
<list_link :list="list_link"></list_link>
</view> -->
<!-- 链接模块(结束) -->
<!-- 版权模块(开始) -->
<view class="copyright">
<text>@版权归属 XX 所有</text>
</view>
<!-- 版权模块(结束) -->
</view>
</template>
<script>
import list_sparring_personnel from "@/components/diy/list_sparring_personnel.vue";
import Card from "@/components/common/card.vue";
import bar_title from "@/components/diy/bar_title.vue";
import list_menu from "@/components/diy/list_menu.vue";
import list_ad from "@/components/diy/list_ad.vue";
import list_article from "@/components/diy/list_article.vue";
import list_link from "@/components/diy/list_link.vue";
import Slide from "@/components/common/slide.vue";
import Notice from "@/components/common/notice.vue";
import mixin from "@/libs/mixins/page.js";
export default {
mixins: [mixin],
components: {
list_sparring_personnel,
Card,
bar_title,
list_ad,
list_menu,
list_article,
list_link,
Slide,
Notice,
},
data() {
return {
isSmall: false,
sendValue: "",
chatList: [],
showChat: false,
isAdmin: false,
token: "",
scrollTop: 0,
oldScrollTop: 0,
str: "<div>测试一下</div>",
list_sparring_personnel: [],
list_ad: [],
list_slide: [],
list_article: [],
list_menu: [],
list_link: [],
list_notice: [],
};
},
methods: {
// toggle
toToggle() {
this.isAdmin = !this.isAdmin;
},
/**
* 获取陪练人员
*/
get_sparring_personnel() {
let url = "~/api/sparring_personnel/get_list?";
url = "~/api/sparring_personnel/get_list?orderby=hits desc";
this.$get(url, {
}, (json) => {
if (json.result && json.result.list) {
console.log("陪练人员" ,json.result.list);
this.list_sparring_personnel = json.result.list;
this.list_sparring_personnel.map((o)=>{
o["praise_len"];
});
this.get_praise(this.list_sparring_personnel ,"sparring_personnel" ,"11514");
}
});
},
/**
* 当前年月日时分秒方法
* @param {Object} fmt
*/
dateFormat(fmt) {
var myDate = new Date();
var o = {
"M+": myDate.getMonth() + 1, // 月份
"d+": myDate.getDate(), // 日
"h+": myDate.getHours(), // 小时
"m+": myDate.getMinutes(), // 分
"s+": myDate.getSeconds(), // 秒
"q+": Math.floor((myDate.getMonth() + 3) / 3), // 季度
S: myDate.getMilliseconds(), // 毫秒
};
if (/(y+)/.test(fmt))
fmt = fmt.replace(
RegExp.$1,
(myDate.getFullYear() + "").substr(4 - RegExp.$1.length)
);
for (var k in o)
if (new RegExp("(" + k + ")").test(fmt))
fmt = fmt.replace(
RegExp.$1,
RegExp.$1.length == 1
? o[k]
: ("00" + o[k]).substr(("" + o[k]).length)
);
return fmt;
},
/**
* 获取轮播图
*/
get_slides() {
this.$get("~/api/slides/get_list?", {}, (json) => {
if (json.result && json.result.list) {
console.log("轮播图", json.result.list);
this.list_slide = json.result.list;
this.list_slide.map((o) => {
o["praise_len"];
});
this.get_praise(this.list_slides, "slides", "slides_id");
}
});
},
/**
* 获取导航栏
*/
get_menu() {
var user_group = this.$store.state.user.user_group;
console.log(user_group,6666)
this.$get(
"~/api/auth/get_list?",
{ size: "0", get: "", user_group, get: 1, position: "top" },
(json) => {
if (json.result && json.result.list) {
this.list_menu = json.result.list;
this.list_menu.map((o) => {
o["praise_len"];
});
this.get_praise(this.list_auth, "auth", "auth_id");
}
}
);
},
/**
* 获取文章
*/
get_article() {
this.$get("~/api/article/get_list?", { page: 1, size: 5 }, (json) => {
console.log(json, 5666);
if (json.result && json.result.list) {
console.log("文章", json.result.list);
this.list_article = json.result.list;
this.list_article.map((o) => {
o["praise_len"];
});
this.get_praise(this.list_article, "article", "article_id");
}
});
},
/**
* 获取广告
*/
get_ad() {
this.$get("~/api/ad/get_list?", { page: 1, size: 5 }, (json) => {
if (json.result && json.result.list) {
console.log("广告", json.result.list);
this.list_ad = json.result.list;
this.list_ad.map((o) => {
o["praise_len"];
});
this.get_praise(this.list_ad, "ad", "ad_id");
}
});
},
/**
* 获取链接列表
*/
get_link() {
this.$get("~/api/link/get_list?", { page: 1, size: 3 }, (json) => {
if (json.result && json.result.list) {
console.log("链接", json.result.list);
this.list_link = json.result.list;
this.list_link.map((o) => {
o["praise_len"];
});
this.get_praise(this.list_link, "link", "link_id");
}
});
},
/**
* 获取公告列表
*/
get_notice() {
this.$get("~/api/notice/get_list?", { page: 1, size: 3 }, (json) => {
if (json.result && json.result.list) {
console.log("公告", json.result.list);
this.list_notice = json.result.list;
this.list_notice.map((o) => {
o["praise_len"];
});
this.get_praise(this.list_notice, "notice", "notice_id");
console.log(this.list_notice);
}
});
},
/**
* 获取点赞数
* @param {Object} list
*/
get_praise(list, table, idName) {
this.$get(
"~/api/praise/count_group?source_table=" + table + "&groupby=source_id",
{},
(res) => {
if (res.result) {
res.result.map((o) => {
for (let i = 0; i < list.length; i++) {
let oj = list[i];
if (oj[idName] === o["source_id"]) {
oj["praise_len"] = o["count"];
break;
}
}
});
} else if (res.error) {
console.error(res.error);
}
}
);
},
},
onShow() {
this.get_sparring_personnel();
this.get_menu();
this.get_slides();
this.get_article();
this.get_link();
this.get_notice();
this.get_ad();
this.get_praise();
},
};
</script>
<style lang="scss" scoped>
.support_icon {
width: 50px;
height: 50px;
position: fixed;
right: 0%;
bottom: 10%;
z-index: 9999;
}
.support_module .container{
height: 64%;
width: 19.4rem;
border-radius: 4px;
border: 0.5px solid #e0e0e0;
background-color: #f5f5f5;
overflow: hidden;
position: fixed;
padding: 0;
margin-left: -9.7rem;
z-index: 99999999;
}
.support_module .small_css{
height: 40px;
width: 200px;
right: -15px;
bottom: 0px;
}
.support_module .big_css{
top: 12%;
left: 50%;
}
.support_module .content{
width: calc(100% - 0px);
overflow-y: scroll;
height: 64%;
padding: 0 10px 10px 0;
}
.support_module .content::-webkit-scrollbar{
display: none
}
.support_module_title{
text-align: right;
height: 40px;
line-height: 40px;
border-bottom: 1px solid #ccc;
}
.support_module_title .title_btn{
font-size: 20px;
cursor: pointer;
margin-right: 20px;
color: #888;
}
.support_module .content:hover::-webkit-scrollbar-thumb{
background:rgba(0,0,0,0.1);
}
.support_module .bubble{
max-width: 182px;
padding: 10px;
border-radius: 5px;
position: relative;
color: #000;
word-wrap:break-word;
word-break:normal;
font-size: 12px;
}
.support_module .item_left .bubble{
margin-left: 10px;
background-color: #fff;
}
.support_module .item_left .bubble:before{
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 10px solid transparent;
border-top: 10px solid transparent;
border-right: 10px solid #fff;
border-bottom: 10px solid transparent;
left: -20px;
}
.support_module .item_right .bubble{
margin-right: 10px;
background-color: #9eea6a;
}
.support_module .item_right .bubble:before{
content: "";
position: absolute;
width: 0;
height: 0;
border-left: 10px solid #9eea6a;
border-top: 10px solid transparent;
border-right: 10px solid transparent;
border-bottom: 10px solid transparent;
left: none;
right: -20px;
}
.support_module .item{
margin-top: 15px;
display: flex;
width: 100%;
}
.support_module .item.item_right{
justify-content: flex-end;
}
.support_module .item.item-center{
justify-content: center;
}
.support_module .item.item-center span{
font-size: 12px;
padding: 2px 4px;
color: #fff;
background-color: #dadada;
border-radius: 3px;
-moz-user-select:none; /*火狐*/
-webkit-user-select:none; /*webkit浏览器*/
-ms-user-select:none; /*IE10*/
-khtml-user-select:none; /*早期浏览器*/
user-select:none;
}
.support_module .avatar image{
width: 42px;
height: 42px;
border-radius: 50%;
}
.support_module .input-area{
border-top:0.5px solid #e0e0e0;
height: 15%;
background-color: #fff;
}
.support_module textarea{
flex: 1;
padding: 10px;
font-size: 12px;
border: none;
overflow-y: auto;
overflow-x: hidden;
outline:none;
resize:none;
width: 102%;
height: 100%;
min-height: 100%;
max-height: 100%;
box-sizing: border-box;
}
.support_module .button-area{
display: flex;
height: 50px;
line-height: 50px;
padding: 5px;
justify-content: flex-end;
text-align: right;
width: 100%;
background: #fff;
}
.support_module .button-area .send-btn{
width: 80px;
height: 28px;
line-height: 28px;
border: none;
outline: none;
border-radius: 4px;
float: right;
cursor: pointer;
background: #9eea6a;
font-size: 12px;
color: #333;
margin: 0px;
text-align: center;
}
</style>
五,相关作品展示
基于Java开发、Python开发、PHP开发、C#开发等相关语言开发的实战项目
基于Nodejs、Vue等前端技术开发的前端实战项目
基于微信小程序和安卓APP应用开发的相关作品
基于51单片机等嵌入式物联网开发应用
基于各类算法实现的AI智能应用
基于大数据实现的各类数据管理和推荐系统
文章来源:https://www.toymoban.com/news/detail-527877.html
文章来源地址https://www.toymoban.com/news/detail-527877.html
到了这里,关于微信小程序开发|基于微信小程序的健身陪练系统的设计与实现的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!