urbanLifeline/urbanLifelineWeb/packages/workcase_wechat/pages/meeting/MeetingCreate.uvue

<template>
	<view class="meeting-create-page">
		<view class="page-header">
			<text class="page-title">创建视频会议</text>
		</view>

		<view class="form-container">
			<!-- 会议名称 -->
			<view class="form-item">
				<view class="form-label">
					<text class="label-text">会议名称</text>
				</view>
				<input
					v-model="formData.meetingName"
					class="form-input"
					placeholder="请输入会议名称"
					maxlength="50"
				/>
			</view>

			<!-- 开始时间 -->
			<view class="form-item required">
				<view class="form-label">
					<text class="label-text">开始时间</text>
					<text class="required-star">*</text>
				</view>
				<picker
					mode="multiSelector"
					:value="startTimePickerValue"
					:range="timePickerRange"
					@change="handleStartTimeChange"
				>
					<view class="picker-display">
						<text :class="formData.startTime ? '' : 'placeholder'">
							{{ formData.startTime || '请选择开始时间' }}
						</text>
					</view>
				</picker>
			</view>

			<!-- 结束时间 -->
			<view class="form-item required">
				<view class="form-label">
					<text class="label-text">结束时间</text>
					<text class="required-star">*</text>
				</view>
				<picker
					mode="multiSelector"
					:value="endTimePickerValue"
					:range="timePickerRange"
					@change="handleEndTimeChange"
				>
					<view class="picker-display">
						<text :class="formData.endTime ? '' : 'placeholder'">
							{{ formData.endTime || '请选择结束时间' }}
						</text>
					</view>
				</picker>
			</view>

			<!-- 提前入会 -->
			<view class="form-item">
				<view class="form-label">
					<text class="label-text">提前入会（分钟）</text>
				</view>
				<input
					v-model.number="formData.advance"
					class="form-input"
					type="number"
					placeholder="提前入会时间"
				/>
				<view class="form-tip">
					<text>用户可在会议开始前N分钟加入</text>
				</view>
			</view>

			<!-- 会议密码 -->
			<view class="form-item">
				<view class="form-label">
					<text class="label-text">会议密码</text>
				</view>
				<input
					v-model="formData.meetingPassword"
					class="form-input"
					type="text"
					password
					placeholder="可选，留空则无密码"
					maxlength="20"
				/>
			</view>

			<!-- 最大人数 -->
			<view class="form-item">
				<view class="form-label">
					<text class="label-text">最大人数</text>
				</view>
				<input
					v-model.number="formData.maxParticipants"
					class="form-input"
					type="number"
					placeholder="最大参与人数"
				/>
			</view>
		</view>

		<!-- 底部按钮 -->
		<view class="form-footer">
			<button class="btn btn-cancel" @click="handleCancel">取消</button>
			<button class="btn btn-submit" :loading="submitting" @click="handleSubmit">创建会议</button>
		</view>
	</view>
</template>

<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { workcaseChatAPI } from '../../api/workcase/workcaseChat'
import type { CreateMeetingParam } from '../../types/workcase/chatRoom'

// 路由参数
const roomId = ref('')
const workcaseId = ref('')

// 表单数据
const formData = reactive<CreateMeetingParam>({
	roomId: '',
	workcaseId: '',
	meetingName: '',
	startTime: '',
	endTime: '',
	advance: 5,
	meetingPassword: '',
	maxParticipants: 10
})

const submitting = ref(false)

// 时间选择器数据
const startTimePickerValue = ref([0, 0, 0, 0])
const endTimePickerValue = ref([0, 0, 0, 0])

// 生成时间选择器范围
const timePickerRange = computed(() => {
	const now = new Date()
	const currentYear = now.getFullYear()
	const currentMonth = now.getMonth()
	const currentDay = now.getDate()

	// 日期范围：今天到未来30天
	const dates: string[] = []
	for (let i = 0; i < 30; i++) {
		const date = new Date(currentYear, currentMonth, currentDay + i)
		const month = String(date.getMonth() + 1).padStart(2, '0')
		const day = String(date.getDate()).padStart(2, '0')
		dates.push(`${month}-${day}`)
	}

	// 小时：00-23
	const hours: string[] = []
	for (let i = 0; i < 24; i++) {
		hours.push(String(i).padStart(2, '0'))
	}

	// 分钟：00、15、30、45
	const minutes = ['00', '15', '30', '45']

	return [dates, hours, minutes]
})

// 页面加载时获取参数
onLoad((options: any) => {
	if (options.roomId) {
		roomId.value = options.roomId
		formData.roomId = options.roomId
	}
	if (options.workcaseId) {
		workcaseId.value = options.workcaseId
		formData.workcaseId = options.workcaseId
	}
})

// 处理开始时间选择
function handleStartTimeChange(e: any) {
	const val = e.detail.value
	startTimePickerValue.value = val

	const now = new Date()
	const selectedDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + val[0])
	const year = selectedDate.getFullYear()
	const month = String(selectedDate.getMonth() + 1).padStart(2, '0')
	const day = String(selectedDate.getDate()).padStart(2, '0')
	const hour = timePickerRange.value[1][val[1]]
	const minute = timePickerRange.value[2][val[2]]

	formData.startTime = `${year}-${month}-${day} ${hour}:${minute}:00`
}

// 处理结束时间选择
function handleEndTimeChange(e: any) {
	const val = e.detail.value
	endTimePickerValue.value = val

	const now = new Date()
	const selectedDate = new Date(now.getFullYear(), now.getMonth(), now.getDate() + val[0])
	const year = selectedDate.getFullYear()
	const month = String(selectedDate.getMonth() + 1).padStart(2, '0')
	const day = String(selectedDate.getDate()).padStart(2, '0')
	const hour = timePickerRange.value[1][val[1]]
	const minute = timePickerRange.value[2][val[2]]

	formData.endTime = `${year}-${month}-${day} ${hour}:${minute}:00`
}

// 验证表单
function validateForm(): boolean {
	if (!formData.startTime) {
		uni.showToast({
			title: '请选择开始时间',
			icon: 'none'
		})
		return false
	}

	if (!formData.endTime) {
		uni.showToast({
			title: '请选择结束时间',
			icon: 'none'
		})
		return false
	}

	const start = new Date(formData.startTime).getTime()
	const end = new Date(formData.endTime).getTime()

	if (start < Date.now()) {
		uni.showToast({
			title: '开始时间不能早于当前时间',
			icon: 'none'
		})
		return false
	}

	if (end <= start) {
		uni.showToast({
			title: '结束时间必须晚于开始时间',
			icon: 'none'
		})
		return false
	}

	if (end - start < 5 * 60 * 1000) {
		uni.showToast({
			title: '会议时长不能少于5分钟',
			icon: 'none'
		})
		return false
	}

	if (end - start > 24 * 60 * 60 * 1000) {
		uni.showToast({
			title: '会议时长不能超过24小时',
			icon: 'none'
		})
		return false
	}

	if (formData.advance !== undefined && (formData.advance < 0 || formData.advance > 60)) {
		uni.showToast({
			title: '提前入会时间范围为0-60分钟',
			icon: 'none'
		})
		return false
	}

	if (formData.maxParticipants !== undefined && (formData.maxParticipants < 2 || formData.maxParticipants > 100)) {
		uni.showToast({
			title: '参与人数范围为2-100人',
			icon: 'none'
		})
		return false
	}

	return true
}

// 提交表单
async function handleSubmit() {
	if (!validateForm()) {
		return
	}

	try {
		submitting.value = true

		const result = await workcaseChatAPI.createVideoMeeting(formData)

		if (result.success && result.data) {
			uni.showToast({
				title: '会议创建成功',
				icon: 'success'
			})

			// 延迟返回，让用户看到成功提示
			setTimeout(() => {
				uni.navigateBack()
			}, 1500)
		} else {
			uni.showToast({
				title: result.message || '创建会议失败',
				icon: 'none'
			})
		}
	} catch (error) {
		console.error('创建会议失败:', error)
		uni.showToast({
			title: '创建会议失败，请重试',
			icon: 'none'
		})
	} finally {
		submitting.value = false
	}
}

// 取消
function handleCancel() {
	uni.navigateBack()
}
</script>

<style scoped lang="scss">
.meeting-create-page {
	min-height: 100vh;
	background-color: #f5f7fa;
	padding-bottom: 120rpx;
}

.page-header {
	background-color: #fff;
	padding: 32rpx;
	border-bottom: 1px solid #ebeef5;
}

.page-title {
	font-size: 36rpx;
	font-weight: 600;
	color: #303133;
}

.form-container {
	background-color: #fff;
	margin-top: 16rpx;
}

.form-item {
	padding: 24rpx 32rpx;
	border-bottom: 1px solid #ebeef5;
}

.form-item.required .label-text::after {
	content: ' *';
	color: #f56c6c;
}

.form-label {
	display: flex;
	align-items: center;
	margin-bottom: 16rpx;
}

.label-text {
	font-size: 28rpx;
	color: #606266;
	font-weight: 500;
}

.required-star {
	color: #f56c6c;
	margin-left: 8rpx;
}

.form-input {
	width: 100%;
	padding: 16rpx 24rpx;
	border: 1px solid #dcdfe6;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #303133;
}

.picker-display {
	padding: 16rpx 24rpx;
	border: 1px solid #dcdfe6;
	border-radius: 8rpx;
	font-size: 28rpx;
	color: #303133;
}

.picker-display .placeholder {
	color: #c0c4cc;
}

.form-tip {
	margin-top: 8rpx;
}

.form-tip text {
	font-size: 24rpx;
	color: #909399;
}

.form-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	display: flex;
	justify-content: space-between;
	padding: 24rpx 32rpx;
	background-color: #fff;
	border-top: 1px solid #ebeef5;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.btn {
	flex: 1;
	padding: 24rpx 0;
	border-radius: 8rpx;
	font-size: 32rpx;
	text-align: center;
	border: none;
}

.btn-cancel {
	background-color: #f5f7fa;
	color: #606266;
	margin-right: 16rpx;
}

.btn-submit {
	background-color: #409eff;
	color: #fff;
}

.btn-submit[loading] {
	opacity: 0.7;
}
</style>