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

张春 · 2025-2-18 03:28:32

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

您需要登录才可以下载或查看，没有账号？立即注册

x

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

主要功能

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

软件架构

本系统使用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">
<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>
<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>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

		自动登录	找回密码
密码			立即注册

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

马上注册，结交更多好友，享用更多功能，让你轻松玩转社区。

0 个回复

快速回复

楼主热帖

标签云

浏览过的版块