活动报名表单系统小程序旨在为各类活动组织者提供一个便捷、高效的线上报名管理平台，同时为参与者提供简单易用的报名途径。
主要功能
- 活动发布：活动组织者可以发布活动的详细信息，包括活动名称、时间、地点、活动内容等。用户可以在小程序中浏览并了解活动的相关信息，从而决定是否参与。
- 个性化信息填写：针对不同活动，组织者可自定义预约时需填写的信息，支持多种自定义字段类型，如字符串、单选、复选、日期、列表、图片等。
- 报名管理：活动组织者可以查看所有提交的报名信息，并进行审核、拒绝或确认等操作。同时，还可以对报名数据进行统计和分析，如已报名人数、各时段报名人数分布等，为活动的后续工作提供参考依据。
- 新闻和动态：定期更新公司的新闻、行业动态和活动情况，让用户了解企业的最新进展。
- 联系方式：提供公司的联系方式，如电话、地址、电子邮件和在线联系表单等，方便用户与企业进行沟通和联系。部分小程序还支持地图定位功能，用户点击“联系我们”即可获取企业位置。
- 在线客服：提供在线客服功能，让用户可以直接与客服代表进行实时沟通和问题解答。
- 搜索功能：提供搜索功能，方便用户快速找到所需的信息。
- 用户互动：设置表单、留言等体系，方便企业与用户进行线上互动，收集用户线索。
软件架构
本系统使用thinkphp8+uniapp来实现。移动端APP所有界面功能都是DIYGW可视化开发完成，后台使用diygw-ui-php集成活动报名表单系统。
首页可视化
自定义公告、轮播、列表可视化内容
API可视化
快速对接API接口
数据绑定
生成的源码
<template>
<view class="container container335134">
<view class="flex flex-wrap diygw-col-24 items-center flex13-clz">
<view class="flex flex-wrap diygw-col-0 flex-direction-column flex14-clz">
<text class="diygw-col-0 text7-clz"> 最新 </text>
<text class="diygw-col-0"> 公告 </text>
</view>
<view class="flex diygw-col-0 noticebar-clz">
<diy-noticebar class="flex1 diy-notice-bar" :remote="true" :list="notices.rows" color="#00d6b9" bgColor="#fff" :speed="80" leftIcon="diy-icon-notification">
<block v-slot:content>
<text class="diy-notice-item" v-for="(item, index) in notices.rows" :key="index">
{
{ item.title }}
</text>
</block>
</diy-noticebar>
</view>
</view>
<view class="flex diygw-col-24 swiper-clz">
<swiper :current="swiperIndex" class="swiper swiper-indicator_rect_radius" @change="changeSwiper" indicator-color="rgba(51, 51, 51, 0.39)" indicator-active-color="#fff" indicator-dots="true" autoplay interval="3000" circular="true" style="height: 300rpx">
<swiper-item v-for="(item, index) in swipers.rows" :key="index" @tap="navigateTo" data-type="openFunction" :data-path="item.path" class="diygw-swiper-item">
<view class="diygw-swiper-item-wrap">
<image :src="item.img" class="diygw-swiper-image"></image>
<view class="diygw-swiper-item-title swiper-title">
{
{ item.title }}
</view>
</view>
</swiper-item>
</swiper>
</view>
<view class="flex flex-wrap diygw-col-24 justify-between items-center flex32-clz">
<view class="flex flex-wrap diygw-col-0 items-center">
<view class="flex flex-wrap diygw-col-0 flex-direction-column">
<text class="diygw-col-0 text19-clz"> </text>
<text class="diygw-col-0 text24-clz"> </text>
<text class="diygw-text-line1 diygw-col-0 text26-clz"> 为你推荐 </text>
</view>
<text class="diygw-text-line1 diygw-col-0 text27-clz"> 报名预约参加 </text>
</view>
<view class="flex flex-wrap diygw-col-0 items-center" @tap="navigateTo" data-type="page" data-url="/pages/huodong">
<text class="diygw-col-0 text44-clz"> 查看更多 </text>
<text class="flex icon1 diygw-col-0 icon1-clz diy-icon-right"></text>
</view>
</view>
<view v-if="huodongs.total > 0" class="flex flex-wrap diygw-col-24 flex-direction-column">
<view v-for="(item, index) in huodongs.rows" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column items-stretch flex6-clz" @tap="navigateTo" data-type="page" data-url="/pages/huodong/page" :data-id="item.id">
<view class="flex flex-wrap diygw-col-24 items-center">
<image :src="item.img" class="response diygw-col-24" mode="widthFix"></image>
</view>
<view class="flex flex-wrap diygw-col-0 items-center flex20-clz">
<view class="flex flex-wrap diygw-col-0 flex-direction-column flex35-clz">
<text class="diygw-col-0 text22-clz">
{
{ item.title }}
</text>
<view class="flex flex-wrap diygw-col-24 items-center flex9-clz">
<text class="flex icon2 diygw-col-0 diy-icon-time"></text>
<text class="diygw-text-line1 diygw-col-0 text2-clz"> {
{ item.starttime }} 至 {
{ item.endtime }} </text>
</view>
<view class="flex flex-wrap diygw-col-24 items-center flex15-clz">
<text class="flex icon5 diygw-col-0 diy-icon-location"></text>
<text class="diygw-text-line1 diygw-col-0 text8-clz">
{
{ item.address }}
</text>
</view>
</view>
</view>
</view>
</view>
<view v-if="globalData.isshow && huodongs.code == 200 && huodongs.total == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex1-clz">
<image src="/https/blog.csdn.net/static/zwjl.png" class="image1-size diygw-image diygw-col-0" mode="widthFix"></image>
<text class="diygw-col-0 text-clz"> 未找到任何数据 </text>
</view>
<view class="flex flex-wrap diygw-col-24 items-end diygw-bottom flex2-clz">
<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex8-clz">
<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
<image src="/https/blog.csdn.net/static/sy.png" class="image2-size diygw-image diygw-col-0" mode="widthFix"></image>
</view>
<text class="diygw-text-line1 diygw-col-0 text3-clz"> 首页 </text>
</view>
<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex4-clz" @tap="navigateTo" data-type="page" data-url="/pages/huodong">
<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
<image src="/https/blog.csdn.net/static/cp1.png" class="image3-size diygw-image diygw-col-0" mode="widthFix"></image>
</view>
<text class="diygw-text-line1 diygw-col-0"> 活动 </text>
</view>
<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex11-clz" @tap="navigateTo" data-type="page" data-url="/pages/articles">
<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
<text class="diygw-text-line1 diygw-col-0 animate__animated animate__heartBeat animate__infinite text15-clz"> </text>
<image src="/https/blog.csdn.net/static/xw1.png" class="image8-size diygw-image diygw-col-0" mode="widthFix"></image>
</view>
<text class="diygw-text-line1 diygw-col-0"> 新闻资讯 </text>
</view>
<view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex12-clz" @tap="navigateTo" data-type="page" data-url="/pages/user">
<view class="flex flex-wrap diygw-col-0 flex-direction-column items-center">
<image src="/https/blog.csdn.net/static/wd.png" class="image4-size diygw-image diygw-col-0" mode="widthFix"></image>
</view>
<text class="diygw-text-line1 diygw-col-0"> 我的 </text>
</view>
</view>
<view class="clearfix"></view>
</view>
</template>
<script>
export default {
data() {
return {
//用户全局信息
userInfo: {},
//页面传参
globalOption: {},
//自定义全局变量
globalData: { isshow: false },
swipersNum: 1,
swipers: {
rows: [
{
id: 0,
title: '',
remark: '',
img: '',
path: null,
userId: 0,
createTime: '',
updateTime: '',
deleteTime: null
}
],
total: 0,
code: 0,
msg: ''
},
noticesNum: 1,
notices: {
rows: [
{
id: 0,
title: '',
remark: '',
userId: 0,
createTime: '',
updateTime: '',
deleteTime: null
}
],
total: 0,
code: 0,
msg: ''
},
huodongsNum: 1,
huodongs: {
rows: [
{
id: 0,
title: '',
remark: '',
starttime: null,
endtime: '',
address: null,
num: 0,
views: 0,
baomingnum: 0,
imgs: null,
img: '',
content: '',
fields: '',
userId: 0,
createTime: '',
updateTime: '',
deleteTime: null,
baomingEndtime: null
}
],
total: 0,
code: 0,
msg: ''
},
swiperIndex: 0
};
},
onShow() {
this.setCurrentPage(this);
},
onLoad(option) {
this.setCurrentPage(this);
if (option) {
this.setData({
globalOption: this.getOption(option)
});
}
this.init();
},
methods: {
async init() {
this.swipersApi();
this.noticesApi();
await this.huodongsApi();
},
// 轮播数据 API请求方法
async swipersApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/cms/api.swiper/list';
let http_data = {
pageNum: this.swipersNum,
pageSize: 10,
pageSize: param.pageSize || '5'
};
let http_header = {};
let swipers = await this.$http.post(http_url, http_data, http_header, 'json');
this.swipers = swipers;
this.globalData.isshow = true;
},
// 公告数据 API请求方法
async noticesApi(param) {
let thiz = this;
param = param || {};
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/cms/api.notice/list';
let http_data = {
pageNum: this.noticesNum,
pageSize: 10,
pageSize: param.pageSize || '5'
};
let http_header = {};
let notices = await this.$http.post(http_url, http_data, http_header, 'json');
this.notices = notices;
},
// 活动数据 API请求方法
async huodongsApi(param) {
let thiz = this;
param = param || {};
//如果请求要重置页面，请配置点击附加参数refresh=1 增加判断如输入框回调param不是对象
if (param.refresh || typeof param != 'object') {
this.huodongsNum = 1;
}
//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑
let http_url = '/cms/api.huodong/list';
let http_data = {
pageNum: this.huodongsNum,
pageSize: 10
};
let http_header = {};
http_data.baomingEndtime_gt = this.$tools.formatDateTime(new Date());
let huodongs = await this.$http.post(http_url, http_data, http_header, 'json');
let datarows = huodongs.rows;
if (http_data.pageNum == 1) {
this.huodongs = huodongs;
} else if (datarows) {
let rows = this.huodongs.rows.concat(datarows);
huodongs.rows = rows;
this.huodongs = Object.assign(this.huodongs, huodongs);
}
if (datarows && datarows.length > 0) {
this.huodongsNum = this.huodongsNum + 1;
}
this.globalData.isshow = true;
},
// 打开链接 自定义方法
async openFunction(param) {
let thiz = this;
let path = param && (param.path || param.path == 0) ? param.path : thiz.item.path || '';
if (path) {
this.navigateTo({
type: 'page',
url: path
});
}
},
changeSwiper(evt) {
let swiperIndex = evt.detail.current;
this.setData({ swiperIndex });
}
},
onPullDownRefresh() {
// 活动数据 API请求方法
this.huodongsNum = 1;
this.huodongsApi();
uni.stopPullDownRefresh();
},
onReachBottom() {
// 活动数据 API请求方法
this.huodongsApi();
}
};
</script>
<style lang="scss" scoped>
.flex13-clz {
padding-top: 6rpx;
border-bottom-left-radius: 12rpx;
padding-left: 0rpx;
padding-bottom: 6rpx;
border-top-right-radius: 12rpx;
margin-right: 20rpx;
background-color: #ffffff;
margin-left: 20rpx;
box-shadow: 0rpx 0rpx 12rpx 2px rgba(219, 219, 219, 0.31);
overflow: hidden;
width: calc(100% - 20rpx - 20rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 10rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 10rpx;
padding-right: 0rpx;
}
.flex14-clz {
margin-left: 10rpx;
padding-top: 0rpx;
z-index: 1;
font-weight: bold;
letter-spacing: 4rpx !important;
padding-left: 10rpx;
padding-bottom: 0rpx;
margin-top: 0rpx;
font-style: italic;
margin-bottom: 0rpx;
margin-right: -20rpx;
padding-right: 10rpx;
}
.text7-clz {
color: #00d6b9;
}
.noticebar-clz {
flex: 1;
}
.swiper-clz {
background-color: #ffffff;
margin-left: 20rpx;
border-bottom-left-radius: 12rpx;
box-shadow: 0rpx 0rpx 12rpx 2px rgba(219, 219, 219, 0.31);
overflow: hidden;
width: calc(100% - 20rpx - 20rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 10rpx;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 10rpx;
margin-right: 20rpx;
}
.swiper-title {
background-color: rgba(0, 0, 0, 0.281);
color: #e6e6e6;
}
.flex32-clz {
margin-left: 20rpx;
padding-top: 10rpx;
padding-left: 10rpx;
width: calc(100% - 20rpx - 20rpx) !important;
padding-bottom: 10rpx;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 20rpx;
padding-right: 10rpx;
}
.text19-clz {
background-color: #7feadb;
flex-shrink: 0;
transform: translate(0rpx, 0rpx) skew(-9deg, 0deg);
top: -4rpx;
width: 24rpx !important;
position: absolute;
right: -10rpx;
height: 24rpx !important;
}
.text24-clz {
background-color: #7feadb;
flex-shrink: 0;
transform: translate(0rpx, 0rpx) skew(-9deg, 0deg);
left: -10rpx;
bottom: -4rpx;
width: 24rpx !important;
position: absolute;
height: 24rpx !important;
}
.text26-clz {
padding-top: 0rpx;
font-weight: bold;
flex: 1;
padding-left: 0rpx;
font-size: 32rpx !important;
padding-bottom: 0rpx;
padding-right: 0rpx;
}
.text27-clz {
margin-left: 30rpx;
color: #b3b2b2;
margin-top: 0rpx;
margin-bottom: 0rpx;
margin-right: 0rpx;
}
.text44-clz {
color: #666666;
text-align: right;
}
.icon1-clz {
color: #666666;
}
.icon1 {
font-size: 24rpx;
}
.flex6-clz {
background-color: #ffffff;
margin-left: 20rpx;
border-bottom-left-radius: 12rpx;
box-shadow: 0rpx 0rpx 12rpx 2px rgba(219, 219, 219, 0.31);
overflow: hidden;
width: calc(100% - 20rpx - 20rpx) !important;
border-top-left-radius: 12rpx;
margin-top: 10rpx;
border-top-right-radius: 12rpx;
border-bottom-right-radius: 12rpx;
margin-bottom: 10rpx;
margin-right: 20rpx;
}
.flex20-clz {
padding-top: 10rpx;
flex: 1;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.flex35-clz {
padding-top: 10rpx;
flex: 1;
padding-left: 10rpx;
padding-bottom: 10rpx;
padding-right: 10rpx;
}
.text22-clz {
font-weight: bold;
font-size: 28rpx !important;
}
.flex9-clz {
margin-left: 0rpx;
width: calc(100% - 0rpx - 0rpx) !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 0rpx;
}
.icon2 {
font-size: 32rpx;
}
.text2-clz {
padding-top: 0rpx;
flex: 1;
padding-left: 0rpx;
font-size: 28rpx !important;
padding-bottom: 0rpx;
padding-right: 0rpx;
}
.flex15-clz {
margin-left: 0rpx;
width: calc(100% - 0rpx - 0rpx) !important;
margin-top: 10rpx;
margin-bottom: 10rpx;
margin-right: 0rpx;
}
.icon5 {
font-size: 32rpx;
}
.text8-clz {
padding-top: 0rpx;
flex: 1;
padding-left: 0rpx;
font-size: 28rpx !important;
padding-bottom: 0rpx;
padding-right: 0rpx;
}
.flex1-clz {
padding-top: 20rpx;
padding-left: 20rpx;
padding-bottom: 20rpx;
padding-right: 20rpx;
}
.image1-size {
height: 400rpx !important;
width: 400rpx !important;
}
.text-clz {
color: #969696;
font-size: 28rpx !important;
}
.flex2-clz {
border-top: 2rpx solid #e4e4e4;
padding-top: 16rpx;
border-bottom-left-radius: 0rpx;
bottom: 0rpx;
padding-left: 16rpx;
padding-bottom: 16rpx;
border-top-right-radius: 24rpx;
background-color: #ffffff;
box-shadow: 0rpx 4rpx 12rpx rgba(31, 31, 31, 0.16);
overflow: visible;
left: 0rpx;
border-top-left-radius: 24rpx;
border-bottom-right-radius: 0rpx;
padding-right: 16rpx;
}
.flex8-clz {
flex: 1;
}
.image2-size {
height: 48rpx !important;
width: 48rpx !important;
}
.text3-clz {
color: #031aeb;
}
.flex4-clz {
flex: 1;
}
.image3-size {
height: 48rpx !important;
width: 48rpx !important;
}
.flex11-clz {
flex: 1;
}
.text15-clz {
border: 2rpx solid #eee;
border-bottom-left-radius: 40rpx;
-webkit-animation-duration: 5000ms;
color: #ffffff;
animation-delay: 1000ms;
-webkit-animation-delay: 1000ms;
border-top-right-radius: 40rpx;
right: -8rpx;
background-color: rgba(255, 17, 17, 0.91);
animation-duration: 5000ms;
flex-shrink: 0;
overflow: hidden;
top: -8rpx;
width: 16rpx !important;
border-top-left-radius: 40rpx;
border-bottom-right-radius: 40rpx;
position: absolute;
height: 16rpx !important;
}
.image8-size {
height: 48rpx !important;
width: 48rpx !important;
}
.flex12-clz {
flex: 1;
}
.image4-size {
height: 48rpx !important;
width: 48rpx !important;
}
.container335134 {
padding-bottom: 160rpx;
background-color: #f5f5f5;
background-image: url(/https/blog.csdn.net/static/loginbg.png);
background-size: cover;
background-repeat: no-repeat;
}
</style>
活动发布
活动CRUD
活动发布CRUD功能发布，表单可视化
活动表单
活动表单可视化拖拉表单字段拖拉设计
<template>
<view class="container container335134">
<u-form-item :borderBottom="false" v-if="!showForm && globalData.isshow" class="diygw-col-24 title-clz" labelPosition="top" prop="title">
<u-input @blur="listApi" :data-title_like="title" data-isself="1" placeholder="请输入活动标题" v-model="title"></u-input>
<text @tap="navigateTo" data-type="listApi" :data-title_like="title" data-isself="1" class="diy-icon-search" style="color: #363636; font-size: 32rpx"></text>
</u-form-item>
<view v-if="!showForm && list.total > 0" class="flex flex-wrap diygw-col-24 flex-direction-column">
<view v-for="(item, index) in list.rows" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column flex4-clz">
<view class="flex flex-wrap diygw-col-24 flex-direction-column items-center" @tap="navigateTo" data-type="page" data-url="/pages/huodong/page" :data-id="item.id">
<text class="diygw-text-line2 diygw-col-24 text1-clz">
{
{ item.title }}
</text>
<text v-if="item.remark" class="diygw-text-line3 diygw-col-24 text2-clz">
{
{ item.remark }}
</text>
</view>
<view class="flex flex-wrap diygw-col-24 justify-between items-center flex2-clz">
<text @tap="navigateTo" data-type="page" data-url="/pages/huodong/data" :data-id="item.id" class="diygw-col-0 text7-clz"> 报名数据 </text>
<text @tap="navigateTo" data-type="page" data-url="/pages/huodong/field" :data-id="item.id" class="diygw-col-0 text5-clz"> 表单字段 </text>
<text @tap="navigateTo" data-type="editFunction" :data-index="index" class="diygw-col-0 text4-clz"> 修改 </text>
<text @tap="navigateTo" data-type="delApi" :data-id="item.id" :data-index="index" class="diygw-col-0 text13-clz"> 删除 </text>
</view>
</view>
</view>
<view v-if="globalData.isshow" class="flex flex-wrap diygw-col-24 justify-start diygw-bottom flex3-clz">
<view v-if="showForm" class="flex diygw-col-24">
<button @tap="showForm = false" class="diygw-btn red radius flex-sub margin-xs button-button-clz">取消</button>
<button @click="submitForm" class="diygw-btn green radius flex-sub margin-xs button-button-clz">保存</button>
</view>
<view v-if="!showForm" class="flex flex-wrap diygw-col-24 justify-center items-center green flex20-clz" @tap="showForm = true">
<text class="flex icon2 diygw-col-0 diy-icon-add"></text>
<text class="di
最低0.47元/天 解锁文章
扫一扫
396
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
