uniapp可视化-活动报名表单系统-代码生成器

活动报名表单系统小程序旨在为各类活动组织者提供一个便捷、高效的线上报名管理平台，同时为参与者提供简单易用的报名途径。

主要功能

• 活动发布：活动组织者可以发布活动的详细信息，包括活动名称、时间、地点、活动内容等。用户可以在小程序中浏览并了解活动的相关信息，从而决定是否参与。
• 个性化信息填写：针对不同活动，组织者可自定义预约时需填写的信息，支持多种自定义字段类型，如字符串、单选、复选、日期、列表、图片等。
• 报名管理：活动组织者可以查看所有提交的报名信息，并进行审核、拒绝或确认等操作。同时，还可以对报名数据进行统计和分析，如已报名人数、各时段报名人数分布等，为活动的后续工作提供参考依据。
• 新闻和动态：定期更新公司的新闻、行业动态和活动情况，让用户了解企业的最新进展。
• 联系方式：提供公司的联系方式，如电话、地址、电子邮件和在线联系表单等，方便用户与企业进行沟通和联系。部分小程序还支持地图定位功能，用户点击“联系我们”即可获取企业位置。
• 在线客服：提供在线客服功能，让用户可以直接与客服代表进行实时沟通和问题解答。
• 搜索功能：提供搜索功能，方便用户快速找到所需的信息。
• 用户互动：设置表单、留言等体系，方便企业与用户进行线上互动，收集用户线索。

软件架构

本系统使用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="/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="/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="/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="/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="/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(/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="diygw-col-0"> 新增活动 </text></view></view><view v-if="!showForm && globalData.isshow && list.code == 200 && list.total == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex-clz"><image src="/static/zwjl.png" class="image-size diygw-image diygw-col-0" mode="widthFix"></image><text class="diygw-col-0 text-clz"> 未找到任何数据 </text></view><u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" v-if="showForm" class="flex diygw-form diygw-col-24 form-clz"><u-form-item class="diygw-col-24" :required="true" label="活动标题" prop="title"><u-input placeholder="请输入活动标题" v-model="form.title"></u-input></u-form-item><u-form-item class="diygw-col-24" label="开始时间" :required="true" prop="starttime"><u-input @click="formData.showStarttime = true" class="" placeholder="请选择开始时间" v-model="form.starttime" type="select"></u-input><u-picker :defaultTime="form.starttime" v-model="formData.showStarttime" mode="time" :params="formData.paramsStarttime" @confirm="changeFormStarttime"></u-picker></u-form-item><u-form-item class="diygw-col-24" label="结束时间" :required="true" prop="endtime"><u-input @click="formData.showEndtime = true" class="" placeholder="请选择结束时间" v-model="form.endtime" type="select"></u-input><u-picker :defaultTime="form.endtime" v-model="formData.showEndtime" mode="time" :params="formData.paramsEndtime" @confirm="changeFormEndtime"></u-picker></u-form-item><u-form-item class="diygw-col-24" :required="true" label="活动地点" prop="address"><u-input placeholder="请输入活动地点" v-model="form.address"></u-input></u-form-item><u-form-item :required="true" class="diygw-col-24" label="活动封面" prop="img"><u-upload width="160" height="160" margin="0" maxCount="1" @on-success="uploadFormImg" @on-remove="delFormImg" action="/sys/storage/upload" v-model="form.img"> </u-upload></u-form-item><u-form-item :required="true" class="diygw-col-24" label="活动轮播图" prop="imgs"><u-upload width="160" height="160" maxCount="6" @on-success="uploadFormImgs" @on-remove="delFormImgs" action="/sys/storage/upload" v-model="form.imgs"> </u-upload></u-form-item><u-form-item labelWidth="auto" class="diygw-col-24" label="报名结束时间" :required="true" prop="baomingEndtime"><u-input @click="formData.showBaomingEndtime = true" class="" placeholder="请选择结束时间" v-model="form.baomingEndtime" type="select"></u-input><u-picker :defaultTime="form.baomingEndtime" v-model="formData.showBaomingEndtime" mode="time" :params="formData.paramsBaomingEndtime" @confirm="changeFormBaomingEndtime"></u-picker></u-form-item><u-form-item class="diygw-col-24" label="活动描述" prop="remark"><u-input maxlength="200" height="60px" class="" placeholder="请输入备注" v-model="form.remark" type="textarea"></u-input></u-form-item><u-form-item :borderBottom="false" class="diygw-col-24" labelPosition="top" prop="content"><diy-editor height="400px" v-model="form.content"></diy-editor></u-form-item></u-form><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: { isshow: false },listNum: 1,list: {rows: [],total: 0,code: 200,msg: 'success'},del: {code: 200,msg: '删除成功'},title: '',showForm: false,formRules: {title: [{trigger: ['change', 'blur'],required: true,message: '标题不能为空'}],starttime: [{trigger: ['change', 'blur'],required: true,message: '结束时间不能为空哟'}],endtime: [{trigger: ['change', 'blur'],required: true,message: '结束时间不能为空哟'}],address: [{trigger: ['change', 'blur'],required: true,message: '标题不能为空'}],img: [{trigger: ['change', 'blur'],required: true,message: '请上传图片哟'}],imgs: [{trigger: ['change', 'blur'],required: true,message: '请上传图片哟'}],baomingEndtime: [{trigger: ['change', 'blur'],required: true,message: '结束时间不能为空哟'}]},form: {title: '',starttime: '',endtime: '',address: '',img: '',imgs: '',baomingEndtime: '',remark: '',content: ''},formData: {paramsStarttime: {year: true,month: true,day: true,hour: true,minute: true,second: false},showStarttime: false,paramsEndtime: {year: true,month: true,day: true,hour: true,minute: true,second: false},showEndtime: false,paramsBaomingEndtime: {year: true,month: true,day: true,hour: true,minute: true,second: false},showBaomingEndtime: false}};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},onReady() {this.$refs.formRef?.setRules(this.formRules);},methods: {async init() {await this.listApi();await this.initResetform();},// 列表数据 API请求方法async listApi(param) {let thiz = this;param = param || {};//如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象if (param.refresh || typeof param != 'object') {this.listNum = 1;}//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = '/cms/huodong/list';let http_data = {pageNum: this.listNum,pageSize: 10,title_like: param.title_like || this.title,isself: param.isself || '1'};let http_header = {};//如果是管理员，可以看见所有的活动if (this.userInfo.username == 'admin') {delete http_data.isself;}let list = await this.$http.post(http_url, http_data, http_header, 'json');let datarows = list.rows;if (http_data.pageNum == 1) {this.list = list;} else if (datarows) {let rows = this.list.rows.concat(datarows);list.rows = rows;this.list = Object.assign(this.list, list);}if (datarows && datarows.length > 0) {this.listNum = this.listNum + 1;}this.globalData.isshow = true;},// 删除数据 API请求方法async delApi(param) {let thiz = this;param = param || {};//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = '/cms/huodong/del';let http_data = {id: param.id || this.item.id,index: param.index || this.index};let http_header = {};let flag = await this.showModal('是否确定删除该数据');if (!flag) {this.showToast('你已取消删');return;}let del = await this.$http.post(http_url, http_data, http_header, 'json');this.del = del;if (del.code == 200) {this.list.rows.splice(param.index, 1);this.list.total = this.list.rows.length;this.showToast('删除数据成功');} else {this.showToast('删除数据失败', 'error');}},// 修改数据 自定义方法async editFunction(param) {let thiz = this;let index = param && (param.index || param.index == 0) ? param.index : thiz.index || '';this.form = JSON.parse(JSON.stringify(this.list.rows[param.index]));this.showForm = true;},changeFormStarttime(evt) {this.form.starttime = evt.year + '-' + evt.month + '-' + evt.day + ' ' + evt.hour + ':' + evt.minute;},changeFormEndtime(evt) {this.form.endtime = evt.year + '-' + evt.month + '-' + evt.day + ' ' + evt.hour + ':' + evt.minute;},changeFormImg(index, lists) {},delFormImg(index, lists) {this.changeFormImg(index, lists);},uploadFormImg(res, index, lists) {this.changeFormImg(index, lists);},changeFormImgs(index, lists) {},delFormImgs(index, lists) {this.changeFormImgs(index, lists);},uploadFormImgs(res, index, lists) {this.changeFormImgs(index, lists);},changeFormBaomingEndtime(evt) {this.form.baomingEndtime = evt.year + '-' + evt.month + '-' + evt.day + ' ' + evt.hour + ':' + evt.minute;},initResetform() {this.initform = JSON.stringify(this.form);//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form//this.form = this.$tools.changeRowToForm(row,this.form)},resetForm() {this.form = JSON.parse(this.initform);},async submitForm(e) {this.$refs.formRef?.setRules(this.formRules);this.$nextTick(async () => {let valid = await this.$refs.formRef.validate();if (valid) {//保存数据let param = this.form;let header = {};let url = '/cms/huodong/add';if (this.form.id) {url = '/cms/huodong/update';}uni.showLoading({title: '正在保存...'});let res = await this.$http.post(url, param, header, 'json');uni.hideLoading();if (res.code == 200) {//更新列表数据this.listNum = 1;this.listApi();if (this.form.id) {this.showToast('更新成功');//关闭窗口this.showForm = false;} else {//提示是否继续新增let flag = await this.showModal('是否继续新增');if (flag) {//重置表单this.resetForm();} else {//关闭窗口this.showForm = false;}}} else {this.showModal(res.msg, '提示', false);}} else {console.log('验证失败');}});}},onPullDownRefresh() {// 列表数据 API请求方法this.listNum = 1;this.listApi();uni.stopPullDownRefresh();},onReachBottom() {// 列表数据 API请求方法this.listApi();}};
</script><style lang="scss" scoped>.title-clz {background-color: #ffffff;margin-left: 16rpx;border-bottom-left-radius: 12rpx;overflow: hidden;width: calc(100% - 16rpx - 16rpx) !important;border-top-left-radius: 12rpx;margin-top: 16rpx;border-top-right-radius: 12rpx;border-bottom-right-radius: 12rpx;margin-bottom: 16rpx;margin-right: 16rpx;}.flex4-clz {padding-top: 10rpx;border-bottom-left-radius: 12rpx;padding-left: 10rpx;padding-bottom: 10rpx;border-top-right-radius: 12rpx;margin-right: 20rpx;background-color: #ffffff;margin-left: 20rpx;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: 10rpx;}.text1-clz {padding-top: 10rpx;padding-left: 10rpx;font-size: 28rpx !important;padding-bottom: 10rpx;padding-right: 10rpx;}.text2-clz {padding-top: 10rpx;color: #7c7c7c;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.flex2-clz {border-top: 2rpx solid #eee;padding-top: 10rpx;color: #6b6b6b;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.text7-clz {border: 2rpx solid #038af2;padding-top: 10rpx;border-bottom-left-radius: 10rpx;color: #038af2;padding-left: 20rpx;padding-bottom: 10rpx;border-top-right-radius: 10rpx;margin-right: 10rpx;background-color: #f0f1ff;margin-left: 10rpx;overflow: hidden;border-top-left-radius: 10rpx;margin-top: 10rpx;border-bottom-right-radius: 10rpx;margin-bottom: 10rpx;padding-right: 20rpx;}.text5-clz {border: 2rpx solid #038af2;padding-top: 10rpx;border-bottom-left-radius: 10rpx;color: #038af2;padding-left: 20rpx;padding-bottom: 10rpx;border-top-right-radius: 10rpx;margin-right: 10rpx;background-color: #f0f1ff;margin-left: 10rpx;overflow: hidden;border-top-left-radius: 10rpx;margin-top: 10rpx;border-bottom-right-radius: 10rpx;margin-bottom: 10rpx;padding-right: 20rpx;}.text4-clz {border: 2rpx solid #038af2;padding-top: 10rpx;border-bottom-left-radius: 10rpx;color: #038af2;padding-left: 20rpx;padding-bottom: 10rpx;border-top-right-radius: 10rpx;margin-right: 10rpx;background-color: #f0f1ff;margin-left: 10rpx;overflow: hidden;border-top-left-radius: 10rpx;margin-top: 10rpx;border-bottom-right-radius: 10rpx;margin-bottom: 10rpx;padding-right: 20rpx;}.text13-clz {border: 2rpx solid #ffb08f;padding-top: 10rpx;border-bottom-left-radius: 10rpx;color: #ff592c;padding-left: 20rpx;padding-bottom: 10rpx;border-top-right-radius: 10rpx;margin-right: 10rpx;background-color: #fff4f0;margin-left: 10rpx;overflow: hidden;border-top-left-radius: 10rpx;margin-top: 10rpx;border-bottom-right-radius: 10rpx;margin-bottom: 10rpx;padding-right: 20rpx;}.flex3-clz {padding-top: 16rpx;border-bottom-left-radius: 0rpx;color: #747474;bottom: 0rpx;padding-left: 16rpx;padding-bottom: 16rpx;border-top-right-radius: 20rpx;background-color: #ffffff;overflow: hidden;left: 0rpx;border-top-left-radius: 20rpx;border-bottom-right-radius: 0rpx;padding-right: 16rpx;}.button-button-clz {margin: 6rpx !important;}.flex20-clz {padding-top: 16rpx;border-bottom-left-radius: 200rpx;overflow: hidden;font-weight: bold;padding-left: 10rpx;font-size: 28rpx !important;padding-bottom: 16rpx;border-top-left-radius: 200rpx;border-top-right-radius: 200rpx;border-bottom-right-radius: 200rpx;padding-right: 10rpx;}.icon2 {font-size: 40rpx;}.flex-clz {padding-top: 20rpx;padding-left: 20rpx;padding-bottom: 20rpx;padding-right: 20rpx;}.image-size {height: 400rpx !important;width: 400rpx !important;}.text-clz {color: #969696;font-size: 28rpx !important;}.form-clz {padding-top: 10rpx;border-bottom-left-radius: 12rpx;padding-left: 10rpx;padding-bottom: 10rpx;border-top-right-radius: 12rpx;margin-right: 20rpx;background-color: #ffffff;margin-left: 20rpx;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: 10rpx;}.container335134 {padding-bottom: 160rpx;background-color: #f5f5f5;}
</style>

活动表单自定义字段

自定义表单字段，支持多种字段类型

<template><view class="container container335134"><u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" class="flex diygw-form diygw-col-24"><u-form-item class="diygw-col-24 hidden" label="标题" prop="input"><u-input placeholder="由于表单验证至少保留一个输入" v-model="form.input"></u-input></u-form-item><view v-if="isData && form.fields.length > 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center flex8-clz"><text class="diygw-col-0"> 已存在预约数据，不要修改变量字段类型。 </text></view><view class="flex flex-wrap diygw-col-24 flex-direction-column flex2-clz"><view class="flex flex-wrap diygw-col-24"><view class="diygw-col-24" v-for="(fieldsItem, fieldsIndex) in form.fields" :key="fieldsItem"><u-form class="diygw-col-24" :model="form.fields[fieldsIndex]" :errorType="['message', 'toast']" ref="fieldsRef" :rules="fieldsItemRules"><view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz"><text class="diygw-col-24 text1-clz"> 字段{{ fieldsIndex + 1 }} </text><u-form-item class="diygw-col-24 diygw-form-border diygw-uform-item" label="字段标题" prop="title"><view class="flex flex-sub padding-top-xs padding-bottom-xs align-center solid"><u-input placeholder="请输入字段标题" v-model="fieldsItem.title"></u-input></view></u-form-item><u-form-item class="diygw-col-24" label="是否必填" prop="required"><view class="flex diygw-col-24 justify-end"><u-switch :size="44" :activeValue="1" :inactiveValue="0" inactiveTextColor="#000000" activeTextColor="#ffffff" v-model="fieldsItem.required" slot="right"></u-switch></view></u-form-item><u-form-item v-if="!isData || (isData && !fieldsItem.field)" class="diygw-col-24 diygw-uform-item diygw-form-border" label="字段类型" prop="type"><diy-selectinput @click="formData.fieldsItemDatas[fieldsIndex].showType = true" class="diygw-col-24 solid" valueName="value" labelName="label" :list="formData.fieldsItemDatas[fieldsIndex].typeDatas" placeholder="请选择" v-model="fieldsItem.type" type="select"></diy-selectinput><u-select mode="single-column" valueName="value" labelName="label" :list="formData.fieldsItemDatas[fieldsIndex].typeDatas" isDefaultSelect :defaultSelectValue="fieldsItem.type" v-model="formData.fieldsItemDatas[fieldsIndex].showType" @confirm="changeFieldsItemType($event, fieldsIndex, fieldsItem)"></u-select></u-form-item><view v-if="isData && fieldsItem.field" class="flex flex-wrap diygw-col-24 flex9-clz"><text class="diygw-col-0 text-clz"> 字段类型 </text><text class="diygw-col-0 text5-clz">{{ getType(fieldsItem) }}</text></view><view v-if="['radio', 'checkbox', 'select'].includes(fieldsItem.type)" class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz"><view class="flex flex-wrap diygw-col-24 flex-direction-column"><text class="diygw-col-24 text3-clz"> 选项值 </text><view class="flex flex-wrap diygw-col-24 datas-clz"><view class="diygw-col-24" v-for="(datasItem, datasIndex) in fieldsItem.datas" :key="datasItem"><u-form class="diygw-col-24" :model="fieldsItem.datas[datasIndex]" :errorType="['message', 'toast']" ref="datasRef" :rules="datasItemRules"><view class="flex flex-wrap diygw-col-24 flex5-clz"><u-form-item class="diygw-col-0 value-clz diygw-form-border diygw-uform-item diygw-form-item-notpadding" labelPosition="top" prop="value"><view class="flex flex-sub padding-top-xs padding-bottom-xs align-center solid"><u-input placeholder="请输入选项值" v-model="datasItem.value"></u-input></view></u-form-item><view class="flex flex-wrap diygw-col-0 flex4-clz"><text @tap="navigateTo" data-type="upDatasItemFunction" :data-index="datasIndex" :data-fields-index="fieldsIndex" class="flex icon diygw-col-0 icon-clz diy-icon-fold"></text><text @tap="navigateTo" data-type="downDatasItemFunction" :data-index="datasIndex" :data-fields-index="fieldsIndex" class="flex icon3 diygw-col-0 icon3-clz diy-icon-unfold"></text><text @tap="navigateTo" data-type="addDatasItemFunction" :data-fields-index="fieldsIndex" class="flex icon2 diygw-col-0 icon2-clz diy-icon-add"></text><text @tap="navigateTo" data-type="delDatasItemFunction" :data-fields-index="fieldsIndex" :data-index="datasIndex" class="flex icon1 diygw-col-0 icon1-clz diy-icon-close"></text></view></view></u-form></view></view></view></view></view></u-form><view class="formfieldstools flex justify-end"><button @tap="upFieldsItem" :data-index="fieldsIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-fold"></text></button><button @tap="downFieldsItem" :data-index="fieldsIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-unfold"></text></button><button @tap="addFieldsItem" :data-index="fieldsIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-add"></text></button><button @tap="delFieldsItem" :data-index="fieldsIndex" class="diygw-btn flex-sub radius margin-xs"><text class="button-icon diy-icon-close"></text></button></view></view></view></view></u-form><view v-if="isshow && form.fields.length == 0" class="flex flex-wrap diygw-col-24 flex-direction-column items-center"><text class="diygw-col-0"> 字段为空，是否添加自定义活动字段 </text><button @tap="addFieldsItem" class="diygw-col-24 btn-clz diygw-btn-default">新增字段</button></view><view v-if="form.fields.length > 0" class="flex flex-wrap diygw-col-24 justify-start diygw-bottom flex7-clz"><view class="flex diygw-col-24"><button @tap="$tools.backpage()" 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><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {},data: {code: 200,msg: 'success',data: {id: 5,title: 'cms',remark: 'cmscmscms',endtime: '2025-02-12 00:00:00',num: 0,img: 'http://sell.t.com/storage/image/20250212/fe98841d27ec081580410b325ecf552903d33e0b.png',content: '<p>cmscmscmscmscmscmscms</p>',fields: null,userId: 1,createTime: '2025-02-12 16:57:07',updateTime: '2025-02-12 16:57:07',deleteTime: null}},huodongDataNum: 1,huodongData: {rows: [{id: 0,title: '',img: '',remark: '',data: '',huodongId: 0,huodongTitle: '',userId: 0,createTime: '',updateTime: '',deleteTime: null}],total: 0,code: 0,msg: ''},isData: false,isshow: false,datasItem: {value: ''},datasItemRules: {},form: {input: '',fields: []},fieldsItem: {title: '',required: 1,type: 'input',datasItemDatas: [],datas: []},formRules: {},fieldsItemData: {showType: false,typeDatas: [{ value: 'input', label: '单选文本' },{ value: 'textarea', label: '多行文本' },{ value: 'phone', label: '手机号码' },{ value: 'number', label: '数字' },{ value: 'img', label: '图片' },{ value: 'date', label: '日期' },{ value: 'datetime', label: '年月日时分' },{ value: 'radio', label: '单选' },{ value: 'checkbox', label: '复选' },{ value: 'select', label: '下拉' },{ value: 'sign', label: '手写签名' }]},formData: {fieldsItemDatas: []},fieldsItemRules: {}};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},onReady() {this.$refs.formRef?.setRules(this.formRules);this.initDatasData();},methods: {async init() {await this.dataApi();await this.initResetform();},// 获取数据 API请求方法async dataApi(param) {let thiz = this;param = param || {};//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = '/cms/huodong/get';let http_data = {id: param.id || this.globalOption.id || '5'};let http_header = {};if (!this.globalOption.id) {this.isshow = true;return;}let data = await this.$http.post(http_url, http_data, http_header, 'json');this.data = data;if (data.code == 200 && data.data.fields) {this.form.fields = JSON.parse(data.data.fields);let fieldsItemDatas = [];this.form.fields.forEach((item) => {fieldsItemDatas.push(JSON.parse(JSON.stringify(this.fieldsItemData)));});this.formData.fieldsItemDatas = fieldsItemDatas;}this.isChange = false;await this.huodongDataApi({});this.isshow = true;},// 预约数据 API请求方法async huodongDataApi(param) {let thiz = this;param = param || {};//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = '/cms/api.huodongData/list';let http_data = {pageNum: this.huodongDataNum,pageSize: 10,huodongId: param.huodongId || this.globalOption.id,pageSize: param.pageSize || '1'};let http_header = {};let huodongData = await this.$http.post(http_url, http_data, http_header, 'json');this.huodongData = huodongData;this.isData = huodongData.total;},// 新增选项值 自定义方法async addDatasItemFunction(param) {let thiz = this;let fieldsIndex = param && (param.fieldsIndex || param.fieldsIndex == 0) ? param.fieldsIndex : thiz.fieldsIndex || '0';//由于默认生成的不支持多层嵌套，所以选项值这些自定义实现let fieldsItem = this.form.fields[fieldsIndex];fieldsItem.datas.push(JSON.parse(JSON.stringify(this.datasItem)));this.fieldsItemData.datasItemDatas.push(JSON.parse(JSON.stringify(this.datasItemData)));this.initDatasValid();},// 下移子表单 自定义方法async downDatasItemFunction(param) {let thiz = this;let index = param && (param.index || param.index == 0) ? param.index : thiz.datasIndex || '';let fieldsIndex = param && (param.fieldsIndex || param.fieldsIndex == 0) ? param.fieldsIndex : thiz.fieldsIndex || '';let fieldsItem = this.form.fields[fieldsIndex];if (index == fieldsItem.datas.length - 1) {this.navigateTo({type: 'tip',tip: '已经是最后一个'});return false;}fieldsItem.datas[index] = fieldsItem.datas.splice(index + 1, 1, fieldsItem.datas[index])[0];this.fieldsItemData.datasItemDatas[index] = this.fieldsItemData.datasItemDatas.splice(index + 1, 1, this.fieldsItemData.datasItemDatas[index])[0];this.initDatasValid();},// 上移子表单 自定义方法async upDatasItemFunction(param) {let thiz = this;let index = param && (param.index || param.index == 0) ? param.index : thiz.datasIndex || '';let fieldsIndex = param && (param.fieldsIndex || param.fieldsIndex == 0) ? param.fieldsIndex : thiz.fieldsIndex || '';let fieldsItem = this.form.fields[fieldsIndex];if (index == 0) {this.navigateTo({type: 'tip',tip: '已经是第一个'});return false;}fieldsItem.datas[index] = fieldsItem.datas.splice(index - 1, 1, fieldsItem.datas[index])[0];this.fieldsItemData.datasItemDatas[index] = this.fieldsItemData.datasItemDatas.splice(index - 1, 1, this.fieldsItemData.datasItemDatas[index])[0];this.initDatasValid();},// 删除子表单 自定义方法async delDatasItemFunction(param) {let thiz = this;let fieldsIndex = param && (param.fieldsIndex || param.fieldsIndex == 0) ? param.fieldsIndex : thiz.fieldsIndex || '';let index = param && (param.index || param.index == 0) ? param.index : thiz.datasIndex || '';let fieldsItem = this.form.fields[fieldsIndex];fieldsItem.datas.splice(index, 1);this.fieldsItemData.datasItemDatas.splice(index, 1);this.initDatasValid();},//子表单验证initFieldsValid() {this.$nextTick(() => {this.$refs['fieldsRef']?.forEach((subform) => {subform.setRules(this.fieldsItemRules);});});},//验证所有的子表单checkFieldsValid() {let flag = true;this.$refs['fieldsRef']?.forEach((subform) => {subform.validate((valid) => {if (!valid) {flag = false;return false;}});});return flag;},//上移子表单upFieldsItem(evt) {let { index } = evt.currentTarget.dataset;if (index == 0) {this.navigateTo({type: 'tip',tip: '已经是第一个'});return false;}this.form.fields[index] = this.form.fields.splice(index - 1, 1, this.form.fields[index])[0];this.formData.fieldsItemDatas[index] = this.formData.fieldsItemDatas.splice(index - 1, 1, this.formData.fieldsItemDatas[index])[0];this.initFieldsValid();},//下移子表单downFieldsItem(evt) {let { index } = evt.currentTarget.dataset;if (index == this.form.fields.length - 1) {this.navigateTo({type: 'tip',tip: '已经是最后一个'});return false;}this.form.fields[index] = this.form.fields.splice(index + 1, 1, this.form.fields[index])[0];this.formData.fieldsItemDatas[index] = this.formData.fieldsItemDatas.splice(index + 1, 1, this.formData.fieldsItemDatas[index])[0];this.initFieldsValid();},//删除子表单delFieldsItem(evt) {let { index } = evt.currentTarget.dataset;this.form.fields.splice(index, 1);this.formData.fieldsItemDatas.splice(index, 1);this.initFieldsValid();},//增加子表单addFieldsItem() {this.form.fields.push(JSON.parse(JSON.stringify(this.fieldsItem)));this.formData.fieldsItemDatas.push(JSON.parse(JSON.stringify(this.fieldsItemData)));this.initFieldsValid();},changeFieldsItemType(evt, fieldsIndex, fieldsItem) {evt.map((val, index) => {fieldsItem.type = val.value;});},getType(item) {let find = this.fieldsItemData.typeDatas.find((type) => {return type.value == item.type;});return find ? find.label : '单行文本';},//初始化显示子表单数据条数initDatasData() {for (let i = 0; i < 1; i++) {this.fieldsItem.datas.push(JSON.parse(JSON.stringify(this.datasItem)));}this.initDatasValid();},//子表单验证initDatasValid() {this.$nextTick(() => {this.$refs['datasRef']?.forEach((subform) => {subform.setRules(this.datasItemRules);});});},//验证所有的子表单checkDatasValid() {let flag = true;this.$refs['datasRef']?.forEach((subform) => {subform.validate((valid) => {if (!valid) {flag = false;return false;}});});return flag;},initResetform() {this.initform = JSON.stringify(this.form);//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form//this.form = this.$tools.changeRowToForm(row,this.form)},resetForm() {this.form = JSON.parse(this.initform);},async submitForm(e) {this.$refs.formRef?.setRules(this.formRules);this.initFieldsValid();this.initDatasValid();this.$nextTick(async () => {let fieldsvalid = await this.checkFieldsValid();let datasvalid = await this.checkDatasValid();let valid = await this.$refs.formRef.validate();if (valid && fieldsvalid && datasvalid) {//保存数据let param = this.form;let header = {'Content-Type': 'application/json'};let url = '/cms/huodong/update';let find = this.form.fields.find((item) => {return !item.title;});if (find) {this.showToast('字段标题不能为空');return;}/*let finds = []this.form.fields.forEach(item=>{if(['radio', 'checkbox', 'select'].includes(item.type)){find = item.datas.find(data=>{return !data.value})if(find){finds.push(item)}}})if(finds.length>0){this.showToast(finds[0].title+"选项值不能为空")return}*/let time = new Date().getTime();this.form.fields.forEach((item, index) => {item.field = item.field ? item.field : 'field' + time + index;});param = {id: this.globalOption.id,fields: this.form.fields};let res = await this.$http.post(url, param, header, 'json');if (res.code == 200) {this.showToast(res.msg, 'success');uni.navigateBack();} else {this.showModal(res.msg, '提示', false);}if (res.code == 200) {this.showToast(res.msg, 'success');} else {this.showModal(res.msg, '提示', false);}} else {console.log('验证失败');}});}}};
</script><style lang="scss" scoped>.flex8-clz {padding-top: 10rpx;color: #ff0000;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.flex2-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.formfieldstools {position: absolute;z-index: 1;right: 12rpx;top: 12rpx;}.formfieldstools .diygw-btn {padding: 5px;height: auto;flex: inherit;border-radius: 20px;}.flex-clz {background-color: #ffffff;margin-left: 10rpx;border-bottom-left-radius: 12rpx;box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.16);overflow: hidden;width: calc(100% - 10rpx - 10rpx) !important;border-top-left-radius: 12rpx;margin-top: 10rpx;border-top-right-radius: 12rpx;border-bottom-right-radius: 12rpx;margin-bottom: 10rpx;margin-right: 10rpx;}.text1-clz {padding-top: 20rpx;font-weight: bold;flex: 1;padding-left: 30rpx;padding-bottom: 20rpx;padding-right: 30rpx;}.flex9-clz {margin-left: 20rpx;width: calc(100% - 20rpx - 20rpx) !important;margin-top: 10rpx;margin-bottom: 10rpx;border-bottom: 2rpx solid #ebedf0;margin-right: 20rpx;}.text-clz {padding-top: 20rpx;font-weight: bold;padding-left: 10rpx;padding-bottom: 20rpx;padding-right: 10rpx;}.text5-clz {margin-left: 20rpx;padding-top: 20rpx;flex: 1;padding-left: 36rpx;padding-bottom: 20rpx;margin-top: 0rpx;margin-bottom: 0rpx;margin-right: 30rpx;padding-right: 16rpx;}.flex1-clz {background-color: #ffffff;margin-left: 20rpx;border-bottom-left-radius: 12rpx;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;}.text3-clz {padding-top: 20rpx;font-weight: bold;flex: 1;padding-left: 16rpx;padding-bottom: 20rpx;padding-right: 16rpx;}.datas-clz {padding-top: 20rpx;font-weight: bold;flex: 1;padding-left: 16rpx;padding-bottom: 20rpx;padding-right: 16rpx;}.flex5-clz {margin-left: 0rpx;width: calc(100% - 0rpx - 0rpx) !important;margin-top: 10rpx;margin-bottom: 10rpx;margin-right: 0rpx;}.value-clz {flex: 1;}.flex4-clz {color: #989898;}.icon-clz {margin-left: 10rpx;padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;margin-right: 10rpx;padding-right: 10rpx;}.icon {font-size: 28rpx;}.icon3-clz {margin-left: 10rpx;padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;margin-right: 10rpx;padding-right: 10rpx;}.icon3 {font-size: 28rpx;}.icon2-clz {margin-left: 10rpx;padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;margin-right: 10rpx;padding-right: 10rpx;}.icon2 {font-size: 28rpx;}.icon1-clz {margin-left: 10rpx;padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;margin-right: 10rpx;padding-right: 10rpx;}.icon1 {font-size: 28rpx;}.btn-clz {padding-top: 16rpx;border-bottom-left-radius: 120rpx;color: #fff;padding-left: 20rpx;font-size: 28rpx !important;padding-bottom: 16rpx;border-top-right-radius: 120rpx;margin-right: 30rpx;background-color: #07c160;margin-left: 30rpx;overflow: hidden;width: calc(100% - 30rpx - 30rpx) !important;border-top-left-radius: 120rpx;margin-top: 10rpx;border-bottom-right-radius: 120rpx;margin-bottom: 10rpx;text-align: center;padding-right: 20rpx;}.flex7-clz {padding-top: 16rpx;border-bottom-left-radius: 0rpx;color: #747474;bottom: 0rpx;padding-left: 16rpx;padding-bottom: 16rpx;border-top-right-radius: 20rpx;background-color: #ffffff;overflow: hidden;left: 0rpx;border-top-left-radius: 20rpx;border-bottom-right-radius: 0rpx;padding-right: 16rpx;}.button-button-clz {margin: 6rpx !important;}.container335134 {padding-bottom: 160rpx;background-color: #f5f5f5;}
</style>

活动详情

活动展示页

活动详情包括轮播、签到时间、距活动结束

活动表单可视化

活动表单根据活动自定义的表单可视化、自定义表单字段。

<template><view class="container container335134"><u-form :model="form" :rules="formRules" :errorType="['message', 'toast']" ref="formRef" v-if="showForm" class="flex diygw-form diygw-col-24 form-clz"><u-form-item class="diygw-col-24" :required="true" label="联系人" prop="title"><u-input placeholder="请输入联系人" v-model="form.title"></u-input></u-form-item><u-form-item class="diygw-col-24" label="备注" prop="remark"><u-input maxlength="200" height="60px" class="" placeholder="请输入备注" v-model="form.remark" type="textarea"></u-input></u-form-item><view v-for="(item, index) in data.data.fields" :key="index" class="flex flex-wrap diygw-col-24 flex-direction-column"><u-form-item v-if="item.type == 'kaiguang'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="kaiguang"><view class="flex diygw-col-24"><u-switch :size="44" :activeValue="1" :inactiveValue="0" inactiveTextColor="#000000" activeTextColor="#ffffff" v-model="item.kaiguang" slot="right"></u-switch></view></u-form-item><u-form-item v-if="item.type == 'date'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="date"><u-input @click="item.showDate = true" class="" placeholder="请选择" v-model="item.date" type="select"></u-input><u-calendar maxDate="2050-12-31" v-model="item.showDate" mode="date" @change="changeItemDate($event, index, item)"></u-calendar></u-form-item><u-form-item v-if="item.type == 'input'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="input"><u-input id="diyid" placeholder="请输入提示信息" v-model="item.input"></u-input></u-form-item><u-form-item v-if="item.type == 'phone'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="phone"><u-input placeholder="请输入提示信息" v-model="item.phone"></u-input></u-form-item><u-form-item v-if="item.type == 'sign'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="sign"><diy-signature v-model="item.sign"></diy-signature></u-form-item><u-form-item v-if="item.type == 'datetime'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="datetime"><u-input @click="item.showDatetime = true" class="" placeholder="请选择" v-model="item.datetime" type="select"></u-input><u-picker :defaultTime="item.datetime" v-model="item.showDatetime" mode="time" :params="item.paramsDatetime" @confirm="changeItemDatetime($event, index, item)"></u-picker></u-form-item><u-form-item v-if="item.type == 'img'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="img"><u-upload :index="index" width="160" height="160" maxCount="6" @on-success="uploadItemImg" @on-remove="delItemImg" action="/sys/storage/upload" v-model="item.img"> </u-upload></u-form-item><u-form-item v-if="item.type == 'rate'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="rate"><view class="flex diygw-col-24"><u-rate activeColor="#07c160" active-icon="starfill" inactive-icon="starfill" custom-prefix="diy-icon" size="48" inactiveColor="#eee" :count="5" @change="changeItemRate($event, index, item)" v-model="item.rate"></u-rate></view></u-form-item><u-form-item v-if="item.type == 'textarea'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="textarea"><u-input maxlength="200" height="60px" class="" placeholder="请输入提示信息" v-model="item.textarea" type="textarea"></u-input></u-form-item><u-form-item v-if="item.type == 'select'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="select"><diy-selectinput @click="item.showSelect = true" class="diygw-col-24" valueName="value" labelName="value" :list="item.datas" placeholder="请选择" v-model="item.select" type="select"></diy-selectinput><u-select mode="single-column" valueName="value" labelName="value" :list="item.datas" isDefaultSelect :defaultSelectValue="item.select" v-model="item.showSelect" @confirm="changeItemSelect($event, index, item)"></u-select></u-form-item><u-form-item v-if="item.type == 'slider'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="slider"><view class="flex1 flex align-center diygw-col-24"><u-slider class="flex1" active-color="#07c160" blockWidth="50" @change="changeItemSlider($event, index, item)" name="slider" v-model="item.slider" :min="0" :max="100" :step="1" /></view></u-form-item><u-form-item class="diygw-col-24" v-if="item.type == 'checkbox'" :required="item.required" :newprop="item.field" :label="item.title" prop="checkbox"><u-checkbox-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" v-model="item.checkbox"><u-checkbox class="diygw-col-24" v-for="(checkboxitem, checkboxindex) in item.datas" :key="checkboxindex" :name="checkboxitem.value">{{ checkboxitem.value }}</u-checkbox></u-checkbox-group></u-form-item><u-form-item v-if="item.type == 'radio'" :required="item.required" :newprop="item.field" class="diygw-col-24" :label="item.title" prop="radio"><u-radio-group class="flex flex-wrap diygw-col-24 justify-between" wrapClass=" justify-between" v-model="item.radio"><u-radio class="diygw-col-24" shape="circle" v-for="(radioitem, radioindex) in item.datas" :key="radioindex" :name="radioitem.value">{{ radioitem.value }}</u-radio></u-radio-group></u-form-item></view></u-form><view v-if="data.code == 200 && !showForm" class="flex flex-wrap diygw-col-24 flex-direction-column"><view class="flex diygw-col-24"><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 data.data.imgs" :key="index" class="diygw-swiper-item"><view class="diygw-swiper-item-wrap"><image :src="item" class="diygw-swiper-image"></image></view></swiper-item></swiper></view><view class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex6-clz"><text class="diygw-text-line3 diygw-col-24 text20-clz">{{ data.data.title }}</text><view class="flex flex-wrap diygw-col-24 justify-between items-center flex4-clz"><view class="flex flex-wrap diygw-col-0 justify-between items-baseline flex9-clz"><text class="flex icon1 diygw-col-0 diy-icon-attention"></text><text class="diygw-text-line3 diygw-col-0"> 浏览: </text><text class="diygw-text-line3 diygw-col-0">{{ data.data.views }}</text></view><view class="flex flex-wrap diygw-col-0 justify-between items-baseline flex10-clz"><text class="flex icon3 diygw-col-0 diy-icon-people"></text><text class="diygw-text-line3 diygw-col-0"> 报名: </text><text class="diygw-text-line3 diygw-col-0">{{ data.data.baomingnum }}</text></view></view></view><view v-if="!data.data.isover" class="flex flex-wrap diygw-col-24 justify-between items-center flex16-clz"><view class="flex flex-wrap diygw-col-24 items-center flex17-clz"><text class="flex icon6 diygw-col-0 icon6-clz diy-icon-titles"></text><text class="diygw-text-line1 diygw-col-0 text11-clz"> 距活动结束 </text><view class="flex flex-direction-column diygw-col-0 countdown-clz"><u-count-down ref="refCountdown" :timestamp="data.data.countdown" format="DD天HH时mm分ss秒" @end="finishCountdown"> </u-count-down></view></view></view><view class="flex flex-wrap diygw-col-24 justify-between items-center flex7-clz"><view class="flex flex-wrap diygw-col-24 items-center flex34-clz"><text class="flex icon diygw-col-0 icon-clz diy-icon-titles"></text><text class="diygw-text-line1 diygw-col-0 text26-clz"> 签到时间 </text></view><view class="flex flex-wrap diygw-col-24 items-center flex8-clz"><text class="flex icon2 diygw-col-0 diy-icon-time"></text><text class="diygw-text-line1 diygw-col-0 text1-clz"> {{ data.data.starttime }} 至 {{ data.data.endtime }} </text></view></view><view class="flex flex-wrap diygw-col-24 justify-between items-center flex11-clz"><view class="flex flex-wrap diygw-col-24 items-center flex12-clz"><text class="flex icon4 diygw-col-0 icon4-clz diy-icon-titles"></text><text class="diygw-text-line1 diygw-col-0 text2-clz"> 活动地点 </text></view><view class="flex flex-wrap diygw-col-24 items-center flex13-clz"><text class="flex icon5 diygw-col-0 diy-icon-location"></text><text class="diygw-text-line1 diygw-col-0 text4-clz">{{ data.data.address }}</text></view></view><view v-if="data.data.content" class="flex flex-wrap diygw-col-24 flex-direction-column justify-center items-center flex5-clz"><view class="flex flex-wrap diygw-col-24 items-center flex14-clz"><view class="flex diygw-col-0 line1-clz"><view class="diygw-pzx" style="border-bottom: 1px solid #eee"></view></view><text class="diygw-text-line1 diygw-col-0 text5-clz"> 活动详情 </text><view class="flex diygw-col-0 line-clz"><view class="diygw-pzx" style="border-bottom: 1px solid #eee"></view></view></view><mp-html :content="data.data.content" class="diygw-col-24 ucontent1-clz"></mp-html></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 button1-button-clz">取消</button><button @click="submitForm" class="diygw-btn green radius flex-sub margin-xs button1-button-clz">预约</button></view><view v-if="!showForm && data.data.isover" class="flex flex-wrap diygw-col-24 justify-center items-center flex20-clz" @tap="showForm = true"><text class="diygw-col-0"> 活动已结束 </text></view><view v-if="!showForm && !data.data.isover && data.data.isuser" class="flex flex-wrap diygw-col-24 justify-center items-center flex15-clz" @tap="showForm = true"><text class="diygw-col-0"> 已报名 </text></view><view v-if="!showForm && !data.data.isover && !data.data.isuser" class="flex flex-wrap diygw-col-24 justify-center items-center green flex2-clz" @tap="navigateTo" data-type="addFunction"><text class="diygw-col-0"> 立即预约 </text></view></view><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {datas: [{field: 'radio',options: [{ id: 'A', content: '微信小程序' },{ id: 'B', content: '支付宝小程序' },{ id: 'C', content: 'UniApp小程序' },{ id: 'D', content: 'UniApp-uView小程序' }],title: '单选标题',type: 'radio',radio: ''},{select: '',field: 'select',options: [{ id: 'A', content: '微信小程序' },{ id: 'B', content: '支付宝小程序' },{ id: 'C', content: 'UniApp小程序' },{ id: 'D', content: 'UniApp-uView小程序' }],title: '下拉标题',type: 'select'},{field: 'checkbox',options: [{ id: 'A', content: 'UniApp' },{ id: 'B', content: '微信小程序' },{ id: 'C', content: '支付宝小程序' },{ id: 'D', content: 'QQ小程序' }],checkbox: [],title: '多选标题',type: 'checkbox'},{ input: '', field: 'input', title: '单行输入', type: 'input' },{ kaiguang: '', field: 'kaiguang', title: '开关标题', type: 'kaiguang' },{ slider: '', field: 'slider', title: '滑块', type: 'slider' },{ field: 'textarea', textarea: '', title: '多行输入', type: 'textarea' },{ field: 'rate', rate: '', title: '评分', type: 'rate' },{ date: '', field: 'date', title: '日期', type: 'date' }]},dataNum: 1,data: {code: 0,msg: '',data: {id: 0,title: '',remark: '',starttime: '',endtime: '',address: '',num: 0,views: 0,baomingnum: 0,imgs: [],img: '',content: '',fields: [],userId: 0,createTime: '',updateTime: '',deleteTime: null,baomingEndtime: ''}},huodongDataNum: 1,huodongData: {rows: [{id: 0,title: '',img: '',remark: '',data: null,huodongId: 0,huodongTitle: '',userId: 0,createTime: '',updateTime: '',deleteTime: null}],total: 0,code: 0,msg: ''},viewNum: 1,view: {code: 200,msg: '设置成功'},swiperIndex: 0,showForm: false,item: {kaiguang: 1,showDate: false,date: '',input: '',phone: '',sign: '',paramsDatetime: {year: true,month: true,day: true,hour: true,minute: true,second: false},showDatetime: false,datetime: '',img: '',rateCount: 5,rate: 3,textarea: '',showSelect: false,select: '',slider: 66,checkbox: [],radio: ''},formRules: {title: [{trigger: ['change', 'blur'],required: true,message: '不能为空哟'}]},form: {title: '',remark: ''}};},watch: {data: {handler(newVal, oldVal) {newVal.data.fields.forEach((item) => {this.form[item.field] = item[item.type];});},deep: true}},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},onReady() {this.$refs.formRef?.setRules(this.formRules);},methods: {async init() {this.dataApi();await this.initResetform();},// 文章数据 API请求方法async dataApi(param) {let thiz = this;param = param || {};//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = '/cms/api.huodong/get';let http_data = {pageNum: this.dataNum,pageSize: 10,id: param.id || this.globalOption.id};let http_header = {};let data = await this.$http.post(http_url, http_data, http_header, 'json');if (!data.data) {this.showToast('详情不存在');uni.navigateBack();return;}data.data.imgs = data.data.imgs ? data.data.imgs.split(',') : [];data.data.fields = data.data.fields ? JSON.parse(data.data.fields) : [];data.data.isover = new Date(data.data.baomingEndtime).getTime() < new Date().getTime();data.data.countdown = data.data.isover ? 0 : new Date(data.data.baomingEndtime).getTime() - new Date().getTime();data.data.isuser = false;data.data.fields.forEach((item) => {item['show' + item.type.charAt(0).toUpperCase() + item.type.slice(1)] = false;if (item.required) {let rule = {trigger: ['change', 'blur'],required: true,message: item.title + '不能为空哟'};if (item.type == 'checkbox') {rule.type = 'array';}if (['checkbox', 'radio', 'select', 'date', 'datetime'].includes(item.type)) {rule.message = '请选择' + item.title;} else if (['img'].includes(item.type)) {rule.message = '请上传' + item.title;}this.formRules[item.field] = [rule];}if (item.type == 'datetime') {item.paramsDatetime = {year: true,month: true,day: true,hour: true,minute: true,second: false};}if (item.type == 'checkbox') {item['checkbox'] = [];this.form[item.field] = [];} else if (item.type == 'number') {item['number'] = undefined;this.form[item.field] = undefined;} else {item[item.type] = '';this.form[item.field] = '';}});this.form.title = this.userInfo.nickname;this.data = data;if (this.userInfo.token) {await this.huodongDataApi({});}await this.viewApi({});this.data.data.view = this.data.data.view + 1;this.globalData.isshow = true;uni.setNavigationBarTitle({title: data.data.title});},// 查询用户是否已报名 API请求方法async huodongDataApi(param) {let thiz = this;param = param || {};//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = '/cms/api.huodongData/list';let http_data = {pageNum: this.huodongDataNum,pageSize: 10,huodongId: param.huodongId || this.globalOption.id,isself: param.isself || '1'};let http_header = {};let huodongData = await this.$http.post(http_url, http_data, http_header, 'json');this.huodongData = huodongData;this.data.data.isuser = huodongData.total > 0;},// 查看数据增加 API请求方法async viewApi(param) {let thiz = this;param = param || {};//如果请求要重置页面，请配置点击附加参数refresh=1  增加判断如输入框回调param不是对象if (param.refresh || typeof param != 'object') {this.viewNum = 1;}//请求地址及请求数据，可以在加载前执行上面增加自己的代码逻辑let http_url = '/cms/api.huodong/incOrDec';let http_data = {pageNum: this.viewNum,pageSize: 10,id: param.id || this.globalOption.id,key: param.key || 'views',value: param.value || '1'};let http_header = {};let view = await this.$http.post(http_url, http_data, http_header, 'json');let datarows = view.rows;if (http_data.pageNum == 1) {this.view = view;} else if (datarows) {let rows = this.view.rows.concat(datarows);view.rows = rows;this.view = Object.assign(this.view, view);}if (datarows && datarows.length > 0) {this.viewNum = this.viewNum + 1;}},// 倒计时结束 自定义方法async overFunction(param) {let thiz = this;this.data.data.isover = true;},// 新增预约 自定义方法async addFunction(param) {let thiz = this;if (!this.$session.getToken()) {//比如未登录，转身到其他页面等this.showToast('请先登录');this.navigateTo({type: 'page',url: 'login'});return;}this.showForm = true;this.$nextTick(() => {if (this.$refs.formRef) {this.$refs.formRef.setRules(this.formRules);}});},changeItemDate(evt, index, item) {item.date = evt.result;},changeItemDatetime(evt, index, item) {item.datetime = evt.year + '-' + evt.month + '-' + evt.day + ' ' + evt.hour + ':' + evt.minute;},changeItemImg(index, lists, dataindex) {},delItemImg(index, lists, dataindex) {this.changeItemImg(index, lists, index);},uploadItemImg(res, index, lists, dataindex) {this.changeItemImg(index, lists, dataindex);},changeItemRate(evt, index, item) {},changeItemSelect(evt, index, item) {evt.map((val, index) => {item.select = val.value;});},changeItemSlider(evt, index, item) {},initResetform() {this.initform = JSON.stringify(this.form);//如果想给表单默认初始值，其中row为某一行数据也可能是API返回的结果集，然后给到this.form//this.form = this.$tools.changeRowToForm(row,this.form)},resetForm() {this.form = JSON.parse(this.initform);},async submitForm(e) {this.$refs.formRef?.setRules(this.formRules);this.$nextTick(async () => {let valid = await this.$refs.formRef.validate();if (valid) {//保存数据let param = this.form;let header = {};let url = '/cms/huodongData/add';param.huodongId = this.data.data.id;param.huodongTitle = this.data.data.title;param.img = this.data.data.img;param.data = JSON.stringify(param);param.fields = JSON.stringify(this.data.data.fields);let res = await this.$http.post(url, param, header, 'json');this.data.data.isuer = true;this.showForm = false;this.data.data.baomingnum = this.data.data.baomingnum + 1;if (res.code == 200) {this.showToast('预约成功', 'success');} else {this.showModal(res.msg, '提示', false);}} else {console.log('验证失败');}});},changeSwiper(evt) {let swiperIndex = evt.detail.current;this.setData({ swiperIndex });},finishCountdown() {this.navigateTo({ type: 'overFunction' });}},onPullDownRefresh() {// 查看数据增加 API请求方法this.viewNum = 1;this.viewApi();uni.stopPullDownRefresh();},onReachBottom() {// 查看数据增加 API请求方法this.viewApi();}};
</script><style lang="scss" scoped>.form-clz {background-color: #ffffff;margin-left: 10rpx;border-bottom-left-radius: 12rpx;overflow: hidden;width: calc(100% - 10rpx - 10rpx) !important;border-top-left-radius: 12rpx;margin-top: 10rpx;border-top-right-radius: 12rpx;border-bottom-right-radius: 12rpx;margin-bottom: 10rpx;margin-right: 10rpx;}.swiper-title {background-color: rgba(0, 0, 0, 0.281);}.flex6-clz {background-color: #fcfcfc;}.text20-clz {padding-top: 20rpx;font-weight: bold;padding-left: 20rpx;font-size: 28rpx !important;padding-bottom: 20rpx;border-bottom: 2rpx solid #eee;padding-right: 20rpx;}.flex4-clz {padding-top: 20rpx;padding-left: 20rpx;font-size: 28rpx !important;padding-bottom: 20rpx;padding-right: 20rpx;}.flex9-clz {padding-top: 10rpx;padding-left: 0rpx;padding-bottom: 10rpx;padding-right: 0rpx;}.icon1 {font-size: 32rpx;}.flex10-clz {padding-top: 10rpx;padding-left: 0rpx;padding-bottom: 10rpx;padding-right: 0rpx;}.icon3 {font-size: 32rpx;}.flex16-clz {background-color: #ffffff;margin-left: 0rpx;width: calc(100% - 0rpx - 0rpx) !important;margin-top: 20rpx;margin-bottom: 0rpx;border-bottom: 2rpx solid #eee;margin-right: 0rpx;}.flex17-clz {padding-top: 16rpx;padding-left: 10rpx;padding-bottom: 16rpx;border-bottom: 2rpx solid #eee;padding-right: 20rpx;}.icon6-clz {color: #00bc25;}.icon6 {font-size: 32rpx;}.text11-clz {padding-top: 0rpx;flex: 1;padding-left: 0rpx;font-size: 28rpx !important;padding-bottom: 0rpx;padding-right: 0rpx;}.countdown-clz {font-weight: bold;font-size: 28rpx !important;}.flex7-clz {background-color: #ffffff;margin-left: 0rpx;width: calc(100% - 0rpx - 0rpx) !important;margin-top: 20rpx;margin-bottom: 0rpx;border-bottom: 2rpx solid #eee;margin-right: 0rpx;}.flex34-clz {padding-top: 16rpx;padding-left: 10rpx;padding-bottom: 16rpx;border-bottom: 2rpx solid #eee;padding-right: 10rpx;}.icon-clz {color: #00bc25;}.icon {font-size: 32rpx;}.text26-clz {padding-top: 0rpx;flex: 1;padding-left: 0rpx;font-size: 28rpx !important;padding-bottom: 0rpx;padding-right: 0rpx;}.flex8-clz {padding-top: 16rpx;padding-left: 20rpx;padding-bottom: 16rpx;padding-right: 20rpx;}.icon2 {font-size: 32rpx;}.text1-clz {padding-top: 0rpx;flex: 1;padding-left: 0rpx;font-size: 28rpx !important;padding-bottom: 0rpx;padding-right: 0rpx;}.flex11-clz {background-color: #ffffff;margin-left: 0rpx;width: calc(100% - 0rpx - 0rpx) !important;margin-top: 20rpx;margin-bottom: 0rpx;border-bottom: 2rpx solid #eee;margin-right: 0rpx;}.flex12-clz {padding-top: 16rpx;padding-left: 10rpx;padding-bottom: 16rpx;border-bottom: 2rpx solid #eee;padding-right: 10rpx;}.icon4-clz {color: #00bc25;}.icon4 {font-size: 32rpx;}.text2-clz {padding-top: 0rpx;flex: 1;padding-left: 0rpx;font-size: 28rpx !important;padding-bottom: 0rpx;padding-right: 0rpx;}.flex13-clz {padding-top: 16rpx;padding-left: 20rpx;padding-bottom: 16rpx;padding-right: 20rpx;}.icon5 {font-size: 32rpx;}.text4-clz {padding-top: 0rpx;flex: 1;padding-left: 0rpx;font-size: 28rpx !important;padding-bottom: 0rpx;padding-right: 0rpx;}.flex5-clz {background-color: #ffffff;margin-left: 0rpx;width: calc(100% - 0rpx - 0rpx) !important;margin-top: 20rpx;margin-bottom: 0rpx;border-bottom: 2rpx solid #eee;margin-right: 0rpx;}.flex14-clz {padding-top: 16rpx;padding-left: 10rpx;padding-bottom: 16rpx;border-bottom: 2rpx solid #eee;padding-right: 10rpx;}.line1-clz {flex: 1;}.text5-clz {margin-left: 10rpx;font-size: 28rpx !important;margin-top: 10rpx;margin-bottom: 10rpx;margin-right: 10rpx;}.line-clz {flex: 1;}.ucontent1-clz {padding-top: 16rpx;padding-left: 20rpx;padding-bottom: 16rpx;border-bottom: 2rpx solid #eee;padding-right: 20rpx;}.flex3-clz {border-top: 2rpx solid #eee;padding-top: 16rpx;border-bottom-left-radius: 0rpx;color: #747474;bottom: 0rpx;padding-left: 16rpx;padding-bottom: 16rpx;border-top-right-radius: 20rpx;background-color: #ffffff;box-shadow: 0rpx 2rpx 6rpx rgba(31, 31, 31, 0.21);overflow: hidden;left: 0rpx;border-top-left-radius: 20rpx;border-bottom-right-radius: 0rpx;padding-right: 16rpx;}.button1-button-clz {margin: 6rpx !important;}.flex20-clz {background-color: #d6d6d6;padding-top: 16rpx;border-bottom-left-radius: 200rpx;overflow: hidden;font-weight: bold;padding-left: 10rpx;font-size: 28rpx !important;padding-bottom: 16rpx;border-top-left-radius: 200rpx;border-top-right-radius: 200rpx;border-bottom-right-radius: 200rpx;padding-right: 10rpx;}.flex15-clz {background-color: #d6d6d6;padding-top: 16rpx;border-bottom-left-radius: 200rpx;overflow: hidden;font-weight: bold;padding-left: 10rpx;font-size: 28rpx !important;padding-bottom: 16rpx;border-top-left-radius: 200rpx;border-top-right-radius: 200rpx;border-bottom-right-radius: 200rpx;padding-right: 10rpx;}.flex2-clz {padding-top: 16rpx;border-bottom-left-radius: 200rpx;overflow: hidden;font-weight: bold;padding-left: 10rpx;font-size: 28rpx !important;padding-bottom: 16rpx;border-top-left-radius: 200rpx;border-top-right-radius: 200rpx;border-bottom-right-radius: 200rpx;padding-right: 10rpx;}.container335134 {padding-bottom: 160rpx;background-color: #f5f5f5;}
</style>

个人中心

个人中心把其他功能串起来，方便发布其他内容 

<template><view class="container container335134"><!-- #ifdef MP-WEIXIN --><u-navbar @change="changeNavbarHeight" :isFixed="true" :isMarginRight="false" :borderBottom="false" title="" :background="{}" :backTextStyle="{ color: 'inherit' }" backIconColor="#fff" titleColor="inherit" :isHome="false" :isBack="false"><view class="flex align-center diygw-text-md text-bold align-center flex-nowrap diygw-col-24"> </view></u-navbar><!--  #endif --><view class="flex diygw-col-24 flex-direction-column items-start flex-nowrap flex73-clz"><view class="flex flex-wrap diygw-col-24 items-center flex74-clz"><image :src="userInfo.avatar || '/static/avatar.png'" class="image8-size diygw-image diygw-col-0 image8-clz" mode="widthFix"></image><view class="flex flex-wrap diygw-col-0 justify-between flex3-clz"><text class="diygw-text-line1 diygw-col-0 text5-clz">{{ userInfo.nickname || '请先登录' }}</text></view></view><view class="flex flex-wrap diygw-col-24 flex-direction-column flex-clz"><view class="flex flex-wrap diygw-col-24"><view class="flex flex-wrap diygw-col-8 flex-direction-column items-center" @tap="navigateTo" data-type="page" data-url="/pages/cms/cate"><image src="/static/sc.png" class="image7-size diygw-image diygw-col-0" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0"> 我的收藏 </text></view><view class="flex flex-wrap diygw-col-8 flex-direction-column items-center" @tap="navigateTo" data-type="page" data-url="/pages/huodong/mydata"><image src="/static/bmjl.png" class="image10-size diygw-image diygw-col-0" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0"> 我的报名 </text></view><view class="flex flex-wrap diygw-col-8 flex-direction-column items-center" @tap="navigateTo" data-type="page" data-url="/pages/article" data-id="1"><image src="/static/gy.png" class="image11-size diygw-image diygw-col-0" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0"> 关于我们 </text></view></view></view><view class="flex flex-wrap diygw-col-24 flex-direction-column flex1-clz"><view class="flex flex-wrap diygw-col-24"><view class="flex flex-wrap diygw-col-24 items-center flex2-clz" @tap="navigateTo" data-type="page" data-url="/pages/huodong/index"><image src="/static/yy.png" class="image17-size diygw-image diygw-col-0" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text-clz"> 我的活动 </text></view><view class="flex flex-wrap diygw-col-24 items-center flex27-clz" @tap="navigateTo" data-type="phone" data-phone="15913132246"><image src="/static/kfdh.png" class="image12-size diygw-image diygw-col-0" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text18-clz"> 客服电话 </text></view><view class="flex flex-wrap diygw-col-24 items-center flex30-clz" @tap="navigateTo" data-type="page" data-url="/pages/msg/edit"><image src="/static/fkjl.png" class="image19-size diygw-image diygw-col-0" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text21-clz"> 在线预约 </text></view><view class="flex flex-wrap diygw-col-24 items-center flex5-clz" @tap="navigateTo" data-type="page" data-url="/pages/article" data-id="1"><image src="/static/gy.png" class="image-size diygw-image diygw-col-0" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text1-clz"> 关于我们 </text></view></view></view><view v-if="userInfo.username == 'admin'" class="flex flex-wrap diygw-col-24 flex-direction-column flex7-clz"><text class="diygw-col-24 text17-clz"> 管理员管理功能 </text><view class="flex flex-wrap diygw-col-24"><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center" @tap="navigateTo" data-type="page" data-url="/pages/cms/cate"><image src="/static/cl.png" class="image2-size diygw-image diygw-col-0 image2-clz" mode="widthFix"></image><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" @tap="navigateTo" data-type="page" data-url="/pages/cms/article"><image src="/static/zxxjsbbf.png" class="image9-size diygw-image diygw-col-0 image9-clz" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text11-clz"> 文章管理 </text></view><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center" @tap="navigateTo" data-type="page" data-url="/pages/cms/product"><image src="/static/zxxjsbbf.png" class="image13-size diygw-image diygw-col-0 image13-clz" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text14-clz"> 产品管理 </text></view><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center" @tap="navigateTo" data-type="page" data-url="/pages/cms/swiper"><image src="/static/cb.png" class="image14-size diygw-image diygw-col-0 image14-clz" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text15-clz"> 轮播管理 </text></view><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center" @tap="navigateTo" data-type="page" data-url="/pages/cms/notice"><image src="/static/cb.png" class="image15-size diygw-image diygw-col-0 image15-clz" mode="widthFix"></image><text class="diygw-text-line1 diygw-col-0 text16-clz"> 消息管理 </text></view></view></view></view><view class="flex flex-wrap diygw-col-24 items-end diygw-bottom flex6-clz"><view class="flex flex-wrap diygw-col-6 flex-direction-column items-center flex8-clz" @tap="navigateTo" data-type="page" data-url="/pages/index" data-redirect="1"><view class="flex flex-wrap diygw-col-0 flex-direction-column items-center"><image src="/static/sy3.png" class="image1-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 flex10-clz" @tap="navigateTo" data-type="page" data-url="/pages/huodong" data-redirect="1"><view class="flex flex-wrap diygw-col-0 flex-direction-column items-center"><image src="/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 flex14-clz" @tap="navigateTo" data-type="page" data-url="/pages/articles" data-redirect="1"><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 text7-clz"> </text><image src="/static/xw1.png" class="image4-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 flex15-clz"><view class="flex flex-wrap diygw-col-0 flex-direction-column items-center"><image src="/static/wd1.png" class="image5-size diygw-image diygw-col-0" mode="widthFix"></image></view><text class="diygw-text-line1 diygw-col-0 text9-clz"> 我的 </text></view></view><view class="clearfix"></view></view>
</template><script>export default {data() {return {//用户全局信息userInfo: {},//页面传参globalOption: {},//自定义全局变量globalData: {},navbarHeight: 0};},onShow() {this.setCurrentPage(this);},onLoad(option) {this.setCurrentPage(this);if (option) {this.setData({globalOption: this.getOption(option)});}this.init();},methods: {async init() {await this.isloginFunction();},// 判断是否登录 自定义方法async isloginFunction(param) {let thiz = this;if (!this.$session.getToken()) {//比如未登录，转身到其他页面等this.showToast('请先登录');this.navigateTo({type: 'page',url: 'login'});return;}},changeNavbarHeight(val) {this.navbarHeight = val;}}};
</script><style lang="scss" scoped>.flex73-clz {margin-left: 10rpx;padding-top: 20rpx;padding-left: 20rpx;width: calc(100% - 10rpx - 10rpx) !important;padding-bottom: 20rpx;margin-top: 10rpx;margin-bottom: 10rpx;margin-right: 10rpx;padding-right: 20rpx;}.flex74-clz {margin-left: 0rpx;width: calc(100% - 0rpx - 0rpx) !important;margin-top: 10rpx;margin-bottom: 10rpx;margin-right: 0rpx;}.image8-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image8-size {height: 96rpx !important;width: 96rpx !important;}.flex3-clz {padding-top: 10rpx;flex: 1;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.text5-clz {font-weight: bold;font-size: 40rpx !important;}.flex-clz {padding-top: 20rpx;border-bottom-left-radius: 12rpx;padding-left: 10rpx;padding-bottom: 20rpx;border-top-right-radius: 12rpx;margin-right: 0rpx;background-color: #ffffff;margin-left: 0rpx;overflow: hidden;width: calc(100% - 0rpx - 0rpx) !important;border-top-left-radius: 12rpx;margin-top: 20rpx;border-bottom-right-radius: 12rpx;margin-bottom: 20rpx;padding-right: 10rpx;}.image7-size {height: 72rpx !important;width: 72rpx !important;}.image10-size {height: 72rpx !important;width: 72rpx !important;}.image11-size {height: 72rpx !important;width: 72rpx !important;}.flex1-clz {padding-top: 10rpx;border-bottom-left-radius: 12rpx;padding-left: 10rpx;padding-bottom: 10rpx;border-top-right-radius: 12rpx;margin-right: 0rpx;background-color: #ffffff;margin-left: 0rpx;overflow: hidden;width: calc(100% - 0rpx - 0rpx) !important;border-top-left-radius: 12rpx;margin-top: 20rpx;border-bottom-right-radius: 12rpx;margin-bottom: 20rpx;padding-right: 10rpx;}.flex2-clz {margin-left: 10rpx;padding-top: 10rpx;padding-left: 10rpx;width: calc(100% - 10rpx - 10rpx) !important;padding-bottom: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;border-bottom: 2rpx solid #eee;margin-right: 10rpx;padding-right: 10rpx;}.image17-size {height: 60rpx !important;width: 60rpx !important;}.text-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.flex27-clz {margin-left: 10rpx;padding-top: 10rpx;padding-left: 10rpx;width: calc(100% - 10rpx - 10rpx) !important;padding-bottom: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;border-bottom: 2rpx solid #eee;margin-right: 10rpx;padding-right: 10rpx;}.image12-size {height: 60rpx !important;width: 60rpx !important;}.text18-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.flex30-clz {margin-left: 10rpx;padding-top: 10rpx;padding-left: 10rpx;width: calc(100% - 10rpx - 10rpx) !important;padding-bottom: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;border-bottom: 2rpx solid #eee;margin-right: 10rpx;padding-right: 10rpx;}.image19-size {height: 64rpx !important;width: 64rpx !important;}.text21-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.flex5-clz {margin-left: 10rpx;padding-top: 10rpx;padding-left: 10rpx;width: calc(100% - 10rpx - 10rpx) !important;padding-bottom: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;border-bottom: 2rpx solid #eee;margin-right: 10rpx;padding-right: 10rpx;}.image-size {height: 64rpx !important;width: 64rpx !important;}.text1-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.flex7-clz {padding-top: 10rpx;border-bottom-left-radius: 12rpx;padding-left: 10rpx;padding-bottom: 10rpx;border-top-right-radius: 12rpx;margin-right: 0rpx;background-color: #ffffff;margin-left: 0rpx;overflow: hidden;width: calc(100% - 0rpx - 0rpx) !important;border-top-left-radius: 12rpx;margin-top: 20rpx;border-bottom-right-radius: 12rpx;margin-bottom: 20rpx;padding-right: 10rpx;}.text17-clz {margin-left: 10rpx;padding-top: 10rpx;font-weight: bold;padding-left: 10rpx;width: calc(100% - 10rpx - 10rpx) !important;font-size: 28rpx !important;padding-bottom: 10rpx;margin-top: 10rpx;margin-bottom: 10rpx;margin-right: 10rpx;padding-right: 10rpx;}.image2-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image2-size {height: 80rpx !important;width: 80rpx !important;}.text3-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.image9-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image9-size {height: 80rpx !important;width: 80rpx !important;}.text11-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.image13-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image13-size {height: 80rpx !important;width: 80rpx !important;}.text14-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.image14-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image14-size {height: 80rpx !important;width: 80rpx !important;}.text15-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.image15-clz {border-bottom-left-radius: 120rpx;overflow: hidden;border-top-left-radius: 120rpx;border-top-right-radius: 120rpx;border-bottom-right-radius: 120rpx;}.image15-size {height: 80rpx !important;width: 80rpx !important;}.text16-clz {padding-top: 10rpx;padding-left: 10rpx;padding-bottom: 10rpx;padding-right: 10rpx;}.flex6-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;}.image1-size {height: 48rpx !important;width: 48rpx !important;}.flex10-clz {flex: 1;}.image3-size {height: 48rpx !important;width: 48rpx !important;}.flex14-clz {flex: 1;}.text7-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;}.image4-size {height: 48rpx !important;width: 48rpx !important;}.flex15-clz {flex: 1;}.image5-size {height: 48rpx !important;width: 48rpx !important;}.text9-clz {color: #031aeb;}.container335134 {background-image: url(/static/loginbg.png);background-position: top center;background-size: cover;background-repeat: no-repeat;}
</style>