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 /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>