webapp / GreenwayWeb

<template>
	<view class="page">
		<view class="page-info">
			<view class="info-box">
				<view class="title">参与时间</view>
				<radio-group v-model="participateTimeType">
					<label class="radio-label" v-for="(item, index) in timeOptions" :key="index">
						<radio :value="item.value" :color="item.value === 'sync' ? '#4CD964' : '#C8C9CC'"></radio>
						<view class="radio-text">{{ item.label }}</view>
					</label>
				</radio-group>
			</view>
			<view class="info-box">
				<view class="title">奖品设置</view>


			</view>
			<view class="info-box">
				<view class="title">规则介绍</view>


			</view>
		</view>


		<!-- 底部 -->
		<view style="height: 125rpx;"></view>
		<view class="page-footer">
			<view class="footer-btn">
				<u-button type="success" @click="baoShow">我要参与</u-button>
			</view>

		</view>
		<u-popup class="userForm" v-model="joinShow" mode="center" border-radius="20" :closeable="true" width="90%">
			<view style="padding: 30rpx;">
				<u-form class="form-box" :model="form" ref="uForm" :label-width="120">
					<view style="padding: 10rpx;">
						<view class="title">请填写您的报名信息</view>
						<u-form-item label="*姓名"><u-input v-model="form.userName" /></u-form-item>
						<u-form-item label="*电话"><u-input v-model="form.userPhone" /></u-form-item>
						<u-button type="success" @click="submit">提交</u-button>
					</view>
				</u-form>
			</view>
		</u-popup>
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		data() {
			return {
				tableData: {},
				list: ['标签', '标签', '标签'],
				participateTimeType: 'sync', // 默认选中同步活动周期
				timeOptions: [{
						value: 'sync',
						label: '同步活动周期'
					},
					{
						value: 'custom',
						label: '自定义时间'
					}
				],
				joinShow: false,
				form: {
					activityId: '',
					userId: '',
					createTime: '',
					createUser: '',
					userName: '',
					userPhone: '',
				},
				pagesize: {
					id: null,
				},
				imgurl: ''
			};
		},
		onLoad(option) {
			this.imgurl = this.$img
			this.pagesize.id = option.ids

			this.tableData = {
				id: 1,
				imageUrl: '/zsfwzxt/sp/bf83d7f7-6b30-494b-9d67-d56198d4612d-1.jpg', // 示例图片地址，需替换为实际地址
				title: '这里有标题这里有标题这里有标题',
				startTime: '2024-1-1',
				endTime: '2024-1-5',
				location: '锦江绿道',
				type: '打卡集字',
				participantNum: 20,
				status: '1',
				hasRecord: false
			}


		},
		methods: {
			baoShow() {
				uni.navigateTo({
					url: `/pagesA/PunchInAct/PunchInSetting?ids=${this.tableData.id}`
				})
			},
			submit() {
				if (!this.form.userName) {
					uni.showToast({
						icon: 'none',
						title: '请输入姓名'
					});
					return
				}


				if (!this.form.userPhone) {
					uni.showToast({
						icon: 'none',
						title: '请输入联系电话'
					});
					return
				}
				this.form.createTime = this.getCurrentDateTime()
				this.$http.sendRequest('/cereEventRegistration/add', 'POST', this.form, 1).then(res => {

					// uni.showToast({
					// 	title: res.data.message,
					// 	duration: 2000,

					// })
					this.$refs.uToast.show({
						title: res.data.message,
						url: '/pages/home/home'
					})
					// uni.switchTab({
					// 	url: '/pages/home/home'
					// })
				})
				this.joinShow = false


			},
			leaseAdd() {
				uni.navigateTo({
					url: '/pages/leaseAdd/leaseAdd'
				})
			},
			getCurrentDateTime() {
				const now = new Date();
				const year = now.getFullYear();
				const month = String(now.getMonth() + 1).padStart(2, '0'); // 月份是从0开始的，所以需要+1
				const day = String(now.getDate()).padStart(2, '0');
				const hours = String(now.getHours()).padStart(2, '0');
				const minutes = String(now.getMinutes()).padStart(2, '0');
				const seconds = String(now.getSeconds()).padStart(2, '0');

				return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
			},
		}
	};
</script>

<style scoped lang="scss">
	.page {
		position: relative;
		width: 100%;
		// height: 100%;
		overflow-x: hidden;
		// overflow-y: auto;
	}

	.page-info {
		width: 100%;
		padding: 24rpx;
	}

	// 活动详情
	.banner {
		width: 100%;
		margin-top: 10rpx;
		border-radius: 30rpx;
		background-color: #fff;
		padding: 24rpx 30rpx;
		color: #888D9C;

		.title {
			font-weight: 700;
			color: #3D3D3D;
			font-size: 34rpx;
			margin-bottom: 30rpx;
		}

		.banner-info-top {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 30rpx;

		}

		.times {
			white-space: nowrap;
			/* 不换行 */
			overflow: hidden;
			/* 隐藏超出部分 */
			text-overflow: ellipsis;
			/* 显示省略号 */
			width: 70%;
		}
	}

	// 活动信息
	.info-box {
		margin-top: 30rpx;
		background-color: #fff;
		padding: 10px;
		border-radius: 30rpx;

		.title {
			font-weight: 700;
			color: #3D3D3D;
			font-size: 34rpx;
			margin-bottom: 10rpx;
		}

		.info-item {
			font-size: 26rpx;
			line-height: 50rpx;
		}
	}

	/* 底部 */
	.page-footer {
		position: fixed;
		left: 0;
		bottom: 0;
		// display: flex;
		// align-items: center;
		// justify-content: center;
		width: 100%;
		height: 125rpx;
		background-color: #FFFFFF;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.footer-btn {
			padding: 0 20px;
			margin-top: 20rpx;
		}

		.footer-service {
			display: flex;
			flex-direction: column;
			align-items: center;

			text {
				margin-top: 6rpx;
				line-height: 42rpx;
			}
		}
	}

	.userForm {
		margin: 0 40rpx;

		.form-box {
			padding: 18rpx 30rpx;

		}

		.title {
			font-size: 32rpx;
			font-weight: 700;
		}
	}
	.participate-time-container {
	  background-color: #fff;
	  border-radius: 10px;
	  padding: 15px;
	  margin-bottom: 15px;
	}
	
	.section-title {
	  font-size: 18px;
	  font-weight: bold;
	  margin-bottom: 15px;
	}
	
	.radio-label {
	  display: flex;
	  align-items: center;
	  margin-bottom: 10px;
	}
	
	.radio-text {
	  margin-left: 10px;
	  font-size: 16px;
	  color: #333;
	}
	
	.tip-text {
	  font-size: 14px;
	  color: #999;
	  margin-top: 5px;
	}
</style>