add-team-activity.vue

<template>
	<view class="add-school-activity">
		<view class="nav-bar-back">
			<image class="nav-bar-back-icon" src="/static/discover/back.png" @click="goBack"></image>
			<view class="nav-bar-title">发起活动</view>
			<image class="nav-bar-add" src="../../static/post/发送.png" @click="submit"></image>
		</view>
		<view class="school-activity-icon-wrapper">
			<image class="school-activity-icon" src="/static/discover/activity-icon.png"></image>
		</view>
		<view class="school-activity-item-wrapper">
			<view class="form-group">
				<image class="form-icon" src="/static/discover/name.png"></image>
				<input class="form-input" type="text" placeholder="请输入活动名称" v-model="name">
			</view>
			<view class="form-group">
				<image class="form-icon" src="/static/discover/content.png"></image>
				<textarea class="form-input1" placeholder="请输入活动内容" v-model="content"></textarea>
			</view>
			<view class="form-group">
				<image class="form-icon" src="/static/discover/activity-time.png"></image>
				<view class="input-wrapper">
					<view class="form-input2-wrapper">
						<view class="form-input2">
							<picker mode="date" start="1970-01-01" end="2100-12-31" @change="handleDateChange1">
								<view class="picker">{{ start_date }}</view>
							</picker>
						</view>
						<view class="form-input2">
							<picker mode="time" start="00:00" end="23:59" @change="handleTimeChange1">
								<view class="picker">{{ start_time }}</view>
							</picker>
						</view>
					</view>
					<view class="form-input2-wrapper">

						<view class="form-input2">
							<picker mode="date" start="1970-01-01" end="2100-12-31" @change="handleDateChange2">
								<view class="picker">{{ end_date }}</view>
							</picker>
						</view>
						<view class="form-input2">
							<picker mode="time" start="00:00" end="23:59" @change="handleTimeChange2">
								<view class="picker">{{ end_time }}</view>
							</picker>
						</view>
					</view>
				</view>
			</view>
			<view class="form-group">
				<image class="form-icon" src="/static/discover/activity-object.png"></image>
				<input class="form-input" type="number" placeholder="请输入参与人数" v-model="object">
			</view>
			<view class="form-group">
				<image class="form-icon" src="/static/discover/activity-place.png"></image>
				<input class="form-input" type="text" placeholder="请输入活动地点" v-model="place">
			</view>
			<view class="form-group">
				<image class="form-icon" src="/static/discover/activity-contact.png"></image>
				<input class="form-input" type="text" placeholder="请输入活动联系方式" v-model="contact">
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userId: '',
				name: '',
				content: '',
				object: '',
				place: '',
				contact: '',
				start_date: '2023-05-10',
				end_date: '2023-05-10',
				start_time: '18:00',
				end_time: '18:00',
			}
		},
		methods: {
			goBack() {
				uni.reLaunch({
					url: '/pages/team/main',
					animationType: 'pop-in',
					animationDuration: 300
				})
			},
			onLoad() {
				this.userId = getApp().globalData.userId
			},
			async submit() {
				if (this.name == '' || this.content == '' || this.start_date == '' || this.end_date == '' || this
					.place == '' || this.object == '' || this.contact == '') {
					uni.showToast({
						title: '信息填写不完整',
						icon: 'none'
					});
					return;
				}
				this.start_date=this.start_date+' '+this.start_time
				this.end_date=this.end_date+' '+this.end_time
				console.log(this.userId, 'this.userId')
				uniCloud.callFunction({
						name: 'fe-team-createActivity',
						data: {
							title: this.name,
							content: this.content,
							startDate: this.start_date,
							endDate: this.end_date,
							userId: this.userId,
							place: this.place,
							participants: this.object,
							contact: this.contact,
						}
					})
					.then(res => {
						console.log(res)
						uni.showToast({
							title: '提交成功',
							icon: 'success'
						});
					})
			},
			handleDateChange1(event) {
				this.start_date = event.detail.value
			},
			handleDateChange2(event) {
				this.end_date = event.detail.value
			},
			handleTimeChange1(event) {
				this.start_time = event.detail.value
			},
			handleTimeChange2(event) {
				this.end_time = event.detail.value
			},
		}
	}
</script>

<style>
	.add-school-activity {
		position: absolute;
		width: 100%;
		height: 100%;
	}

	.nav-bar-back {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 100%;
		height: 60px;
		background-color: #EDEEF0;
	}

	.nav-bar-back-icon {
		width: 40px;
		height: 30px;
		margin-left: 20rpx;
		margin-right: auto;
	}

	.nav-bar-title {
		flex: 1;
		text-align: center;
		font-size: 24px;
		font-weight: bold;
		color: #F1992D;
	}

	.nav-bar-add {
		width: 30px;
		height: 30px;
		margin-top: 10px;
		float: right;
		margin-right: 10px;
	}

	.school-activity-icon-wrapper {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.school-activity-icon {
		width: 50%;
		height: 80px;
		margin: 0px;
		padding: 0px;
	}

	.school-activity-item-wrapper {
		margin-top: 20px;
	}

	.form-group {
		display: flex;
		align-items: center;
		margin-top: 15px;
	}

	.form-icon {
		width: 40px;
		height: 30px;
		margin-left: 30px;
	}

	.form-input {
		margin-left: 5px;
		width: 70%;
		height: 35px;
		border: none;
		outline: none;
		font-size: 14px;
		color: #333;
		padding: 0 10px;
		background-color: #edeef0;
	}

	.form-input1 {
		margin-left: 5px;
		width: 70%;
		height: 70px;
		border: none;
		outline: none;
		font-size: 14px;
		color: #333;
		padding: 0 10px;
		background-color: #edeef0;
	}

	.input-wrapper {
		flex-direction: column;
		display: flex;
		width: 100%;
	}

	.form-input2-wrapper {
		display: flex;
		flex-direction: row;
	}

	.form-input2 {
		margin-top: 5px;
		margin-left: 10px;
		width: 30%;
		height: 35px;
		border: none;
		outline: none;
		font-size: 14px;
		color: #333;
		background-color: #edeef0;
		padding: 0 10px;
	}
</style>