From 4c26c806f3e4c661a478a42b6ac1265b8de2cf14 Mon Sep 17 00:00:00 2001
From: monkeyhouyi <m19382021374@163.com>
Date: Fri, 11 Oct 2024 18:01:06 +0800
Subject: [PATCH] 活动参与，活动申请

---
 pages.json                             |   3 ++-
 pages/activityAdd/activityAdd.scss     |   6 +++++-
 pages/activityAdd/activityAdd.vue      | 174 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++-----------------------------------------------------------------------------------------------
 pages/participation/participation.scss |  81 +++++++++++++++++++++++++++++++++++++++++++++++++++------------------------------
 pages/participation/participation.vue  | 128 +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++---------------------------------------------------
 5 files changed, 214 insertions(+), 178 deletions(-)

diff --git a/pages.json b/pages.json
index f499329..c41ba9f 100644
--- a/pages.json
+++ b/pages.json
@@ -111,7 +111,8 @@
 			"path": "pages/participation/participation",
 			"style": {
 				"navigationBarTitleText": "活动参与",
-				"navigationBarBackgroundColor": "#fff"
+				"navigationBarBackgroundColor": "#fff",
+				"enablePullDownRefresh": true
 			}
 		},
 		{
diff --git a/pages/activityAdd/activityAdd.scss b/pages/activityAdd/activityAdd.scss
index a9722a7..239be65 100644
--- a/pages/activityAdd/activityAdd.scss
+++ b/pages/activityAdd/activityAdd.scss
@@ -65,10 +65,14 @@
 	bottom: 0;
 	display: flex;
 	width: 100%;
-	height: 100rpx;
+	height: 120rpx;
 	background-color: #FFFFFF;
+	padding: 20rpx 20rpx;
 	padding-bottom: constant(safe-area-inset-bottom);
 	padding-bottom: env(safe-area-inset-bottom);
+	.u-btn {
+		flex: 1;
+	}
 	.footer-buy{
 		display: flex;
 		align-items: center;
diff --git a/pages/activityAdd/activityAdd.vue b/pages/activityAdd/activityAdd.vue
index c19be51..fe5a1a6 100644
--- a/pages/activityAdd/activityAdd.vue
+++ b/pages/activityAdd/activityAdd.vue
@@ -1,103 +1,45 @@
 <template>
 	<view class="page">
-		<view class="add-list">
-			<view class="list">
-				<view class="title">
-					<text>活动名称</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请输入">
-				</view>
+		<u-form :model="form" ref="uForm" label-position="left" :label-width="150">
+			<view class="add-list" style="padding-bottom: 0;">
+				<u-form-item label="封面图片" borderBottom labelPosition="top">
+					<u-upload :active="active" :file-list="form.fileList" :max-count="1"></u-upload>
+				</u-form-item>
 			</view>
-			<view class="list">
-				<view class="title">
-					<text>开始时间</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="2024-07-01">
-				</view>
+			<view class="add-list" style="padding-bottom: 0;">
+				<u-form-item label="活动名称" borderBottom>
+					<u-input v-model="form.name" />
+				</u-form-item>
+				<u-form-item label="开始时间" borderBottom>
+					<u-input v-model="form.startTime" type="select" @click="startShow = true" placeholder="请选择"/>
+					<u-picker mode="time" v-model="startShow" :params="params" @confirm="startTimeChange"></u-picker>
+				</u-form-item>
+				<u-form-item label="结束时间" borderBottom>
+					<u-input v-model="form.endTime" type="select" @click="endShow = true" placeholder="请选择"/>
+					<u-picker mode="time" v-model="endShow" :params="params" @confirm="endTimeChange"></u-picker>
+				</u-form-item>
+				<u-form-item label="活动类型" borderBottom>
+					<u-input v-model="form.type" type="select" @click="typeShow = true" placeholder="请选择"/>
+					<u-select v-model="typeShow" :list="typeList" @confirm="typeChange"></u-select>
+				</u-form-item>
+				<u-form-item label="可参与人数" borderBottom>
+					<u-number-box v-model="form.num" :input-width="'100%'" :min="0"></u-number-box>
+				</u-form-item>
+				<u-form-item label="举办区域" borderBottom>
+					<u-input v-model="form.name" />
+				</u-form-item>
 			</view>
-			<view class="list">
-				<view class="title">
-					<text>结束时间</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="2024-07-30">
-				</view>
-			</view>
-			<view class="list">
-				<view class="title">
-					<text>活动内容</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请输入">
-				</view>
-			</view>
-			<view class="list">
-				<view class="title">
-					<text>活动类型</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请选择">
-					<image :src="$imgUrl('/right2.png')" ></image>
-				</view>
-			</view>
-			<view class="list">
-				<view class="title">
-					<text>可参与人数</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请选择">
-					<image :src="$imgUrl('/right2.png')"></image>
-				</view>
-			</view>
-			<view class="list">
-				<view class="title">
-					<text>意向区域</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请选择">
-					<image :src="$imgUrl('/right2.png')"></image>
-				</view>
-			</view>
-			<view class="list">
-				<view class="title">
-					<text>意向位置</text>
-					<text class="star">*</text>
-				</view>
-				<view class="content">
-					<input type="text" placeholder="请选择">
-					<image :src="$imgUrl('/right2.png')"></image>
-				</view>
-			</view>
-			<view class="feedback-data">
-				<view>
-					<view class="title">
-						<text>活动图片</text>
-						<text class="star">*</text>
-					</view>
-				</view>
-				<view class="voucher-img">
-					<view class="voucher-list">
-						<image :src="$imgUrl('/voucher_bg.png')"></image>
-					</view>
-				</view>
-			</view>
-		</view>
+			<!-- <view class="add-list" style="padding-bottom: 0;">
+				<u-form-item label="活动内容" borderBottom labelPosition="top">
+					<u-upload :active="active" :file-list="form.fileList" :max-count="1"></u-upload>
+				</u-form-item>
+			</view> -->
+		</u-form>
+		<u-toast ref="uToast" />
 		<!-- 保存按钮 -->
+		<view style="height: 120rpx;"></view>
 		<view class="page-footer">
-		  <view class="footer-buy">
-		    <view class="cart-add">
-		      <text>提交</text>
-		    </view>
-		  </view>
+			<u-button type="success">提交</u-button>
 		</view>
 	</view>
 </template>
@@ -106,10 +48,52 @@
 	export default {
 		data() {
 			return {
-				
+				form: {
+					fileList: [],
+					name: '',
+					type: '',
+					num: 0,
+					startTime: '',
+					endTime: '',
+				},
+				active: '', // 文件上传地址
+				startShow: false,
+				endShow: false,
+				params: {
+					year: true,
+					month: true,
+					day: true,
+					hour: true,
+					minute: true,
+					second: true
+				},
+				typeShow: false,
+				typeList: [{ value: '1', label: '类型1' }, { value: '2', label: '类型2' }],
 			};
 		},
 		methods:{
+			startTimeChange(val) {
+				this.form.startTime = this.timeChange(val);
+				this.form.endTime = '';
+			},
+			endTimeChange(val) {
+				const time = this.timeChange(val);
+				if(new Date(time).getTime() > new Date(this.form.startTime).getTime()) {
+					this.form.endTime = time
+				} else {
+					this.$refs.uToast.show({
+						title: '结束时间不能小于开始时间',
+						type: 'error',
+					})
+				}
+			},
+			timeChange(val) {
+				const { year, month, day, hour, minute, second } = val;
+				return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
+			},
+			typeChange(val) {
+				this.form.type = val[0].name;
+			}
 		}
 	}
 </script>
diff --git a/pages/participation/participation.scss b/pages/participation/participation.scss
index 19ee78a..add3268 100644
--- a/pages/participation/participation.scss
+++ b/pages/participation/participation.scss
@@ -4,39 +4,38 @@
 	top: 0;
 	width: 100%;
 	height: 100%;
-	padding: 0 40rpx;
+	padding: 0 24rpx;
+}
+.more {
+	width: 100%;
+	height: 74rpx;
 	background-color: #fff;
+	border-radius: 21rpx;
+	padding: 24rpx 32rpx 18rpx;
+	margin-top: 26rpx;
 }
 .head-search{
-		display: flex;
-		align-items: center;
-		justify-content: space-between;
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	position: relative;
+	margin: 20rpx 0;
+	background-color: #FFFFFF;
+	border-radius: 35rpx;
+	padding: 0 10rpx;
+	border: 2rpx solid #E8E8E8;
+	.u-search {
 		position: relative;
-		margin: 20rpx 0;
-		.search{
-			
-			display: flex;
-			align-items: center;
-			width: 100%;
-			height: 72rpx;
-			
-			border: 2rpx solid #E8E8E8;
-			justify-content: space-between;
-			padding: 0 10rpx 0 30rpx;
-			.icon{
-				display: flex;
-				align-items: center;
-				
-				margin-left: 20rpx;
-				margin-right: 15rpx;
-				image{
-					width: 29rpx;
-					height: 29rpx;
-				}
-			}
-
-		}
 	}
+	.u-btn {
+		border: unset;
+		border: 0px transparent;
+		height: 46rpx;
+		width: 88rpx;
+		font-size: 24rpx;
+		border-radius: 35rpx;
+	}
+}
 /* 订单列表 */
 .screen-list {
 		display: flex;
@@ -66,9 +65,27 @@
 
 .goods-data{
 	width: 100%;
+	// height: calc(100% - 300rpx - 120rpx);
+	// overflow-y: scroll;
 	.goods-list{
 		width: 100%;
-	
+		// height: 100%;
+		.good-item {
+			.info {
+				margin: 20rpx 10rpx 26rpx;
+				.title {
+					line-height: 36rpx;
+					color: #000;
+					margin-bottom: 10rpx;
+				}
+				.name {
+					font-size: 24rpx;
+					line-height: 30rpx;
+					color: #3D3D3D;
+					margin-bottom: 12rpx;
+				}
+			}
+		}
 		.list{
 			display: flex;
 			margin-bottom: 40rpx;
@@ -121,11 +138,15 @@
 }
 /* 保存按钮 */
 .page-footer{
+	position: fixed;
+	left: 0;
+	bottom: 0;
 	width: 100%;
+	height: 120rpx;
 	background-color: #FFFFFF;
+	padding: 20rpx 20rpx;
 	padding-bottom: constant(safe-area-inset-bottom);
 	padding-bottom: env(safe-area-inset-bottom);
-	margin:40rpx 0 80rpx 0;
 	.footer-buy{
 		display: flex;
 		align-items: center;
diff --git a/pages/participation/participation.vue b/pages/participation/participation.vue
index ef149cb..3ebb559 100644
--- a/pages/participation/participation.vue
+++ b/pages/participation/participation.vue
@@ -1,28 +1,28 @@
 <template>
+	<!-- 活动参与 -->
 	<view class="page">
-		<!-- 搜索 -->
-		<view class="head-search" @click="myativity">
-			<view class="search">
-				<view class="">
-					 我创建的活动
-				</view>
-				<view class="icon">
-					<image :src="$imgUrl('/search.png')" ></image>
+		<view class="more page-box">
+			<u-section :bold="false" title="我的活动申请" sub-title='' :show-line="false" color="#0FBB59" @click="toMyAdd">
+				<view slot="right">
+					<u-icon name="arrow-rightward" color="#0FBB59" size="28"></u-icon>
 				</view>
-				
-			</view>
+			</u-section>
+		</view>
+		<!-- 搜索 -->
+		<view class="head-search">
+			<u-search bg-color="#fff" placeholder="请输入关键词" v-model="keyword" :show-action="false" @search="search"></u-search>
+			<u-button type="success" @click="search">搜索</u-button>
 		</view>
-		<!-- 创建按钮 -->
-		<!-- <view class="page-footer" @click="createWen">
-		  <view class="footer-buy">
-		    <view class="cart-add">
-		      <text>创建活动</text>
-		    </view>
-		  </view>
-		</view> -->
-		
 		<view class="screen-list">
 			<view class="list">
+				<text>默认排序</text>
+				<image :src="$imgUrl('/down.png')"></image>
+			</view>
+			<view class="list">
+				<text>进行中</text>
+				<image :src="$imgUrl('/down.png')"></image>
+			</view>
+			<!-- <view class="list">
 				<text>区域</text>
 				<image :src="$imgUrl('/down.png')"></image>	
 			</view>
@@ -31,45 +31,29 @@
 				<image :src="$imgUrl('/down.png')" ></image>
 			</view>
 			<view class="list">
-				<text>默认排序</text>
-				<image :src="$imgUrl('/down.png')"></image>
-			</view>
-			<view class="list">
 				<text>筛选</text>
 				<image :src="$imgUrl('/down.png')" ></image>
-			</view>
+			</view> -->
 		</view>
 		<!-- 订单列表 -->
 		<view class="goods-data">
-			<view class="goods-list">
-				<view class="list goods-border" v-for="(item,index) in 1" :key="index">
-					<view class="thumb">
-						<image :src="$imgUrl('/img/2.jpg')"></image>
-					</view>
-					<view class="item">
-						<view class="">
-							<text class="one-omit">名称：绿道好物节</text>
+			<u-row gutter="16" class="goods-list">
+				<u-col span="6" v-for="(item,index) in list" :key="index">
+					<view class="demo-layout good-item">
+						<image :src="$imgUrl('/img/2.jpg')" style="width: 315rpx; height: 315rpx; border-radius: 10rpx;"></image>
+						<view class="info">
+							<view class="title">绿道好物节</view>
+							<view class="name">绿道好物节</view>
+							<u-tag text="进行中" type="success" mode="dark" />
 						</view>
-						<view class="title">
-							<text class="one-omit color">活动时间：2024-10-10至2024-10-20</text>
-						</view>
-						<view class="title">
-							<text class="one-omit color">参与商家：1人</text>
-						</view>
-						<view class="title">
-							<text class="one-omit color">活动状态：待开始</text>
-						</view>
-						<view class="title">
-							<text class="one-omit color">举办方：绿道</text>
-						</view>
-						
-						<view class="canyu" @click='join'>
-							<view>我要参与</view>
-						</view>
-						
 					</view>
-				</view>
-			</view>
+				</u-col>
+				<u-loadmore :status="status" @loadmore='loading' style="width: 100%; text-align: center;"/>
+			</u-row>
+		</view>
+		<view style="height: 120rpx;"></view>
+		<view class="page-footer">
+			<u-button type="success" @click="toAdd">活动申请</u-button>
 		</view>
 	</view>
 </template>
@@ -78,9 +62,46 @@
 	export default {
 		data() {
 			return {
+				keyword: '', // 搜索项
+				status: 'loadmore',
+				list: 1,
+				page: 0,
+				total: 1,
 			};
 		},
+		onLoad() {
+			this.status = 'nomore';
+		},
+		onPullDownRefresh(e) {
+			let that = this
+			that.status = 'loading';
+			this.page = 0;
+			setTimeout(() => {
+				that.list = 1;
+				that.status = that.list >= that.total ? 'nomore' : 'loadmore';
+				uni.stopPullDownRefresh();
+			}, 1000);
+		},
+		onReachBottom(e) {
+			this.loading();
+		},
 		methods: {
+			toMyAdd() {
+				// 跳转我的活动申请
+			},
+			search() {
+				// 搜索
+			},
+			loading() {
+				let that = this
+				if(that.status == 'nomore') return;
+				that.status = 'loading';
+				that.page = ++that.page;
+				setTimeout(() => {
+					that.list += 10;
+					that.status = that.list >= that.total ? 'nomore' : 'loadmore';
+				}, 300)
+			},
 			myativity() {
 				uni.navigateTo({
 					url: '/pages/mycreated/mycreated'
@@ -90,6 +111,11 @@
 				uni.navigateTo({
 					url: '/pages/mycreated/mycreated?id=1'
 				})
+			},
+			toAdd() {
+				uni.navigateTo({
+					url: '/pages/activityAdd/activityAdd'
+				})
 			}
 		}
 	}
--
libgit2 0.21.4