448 lines
9.4 KiB
Plaintext
448 lines
9.4 KiB
Plaintext
<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>
|