wangys/urbanLifeline
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

聊天室创建逻辑修改和样式修正

Browse Source
This commit is contained in:
wangys
2025-12-30 20:55:25 +08:00
parent babfe9fb48
commit f287f36496
14 changed files with 591 additions and 312 deletions
Download Patch File Download Diff File Expand all files Collapse all files

303
urbanLifelineWeb/packages/workcase_wechat/pages/meeting/meetingCreate/MeetingCreate.uvue
View File

@@ -1,122 +1,136 @@
<template>
<view class="meeting-create-page">
<view class="page-header">
<text class="page-title">创建视频会议</text>
<!-- #ifdef APP -->
<scroll-view style="flex:1">
<!-- #endif -->
<view class="page">
<!-- 导航栏 -->
<view class="nav" :style="{ paddingTop: headerPaddingTop + 'px', height: headerTotalHeight + 'px' }">
<view class="nav-back" @tap="handleCancel">
<view class="nav-back-icon"></view>
</view>
<text class="nav-title">创建视频会议</text>
<view class="nav-capsule"></view>
</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>
<!-- 内容区域 -->
<scroll-view class="content" scroll-y="true" :style="{ marginTop: headerTotalHeight + 'px' }">
<!-- 表单区域 -->
<view class="section">
<view class="form-container">
<!-- 会议名称 -->
<view class="form-item">
<text class="form-label">会议名称</text>
<input
v-model="formData.meetingName"
class="form-input"
placeholder="请输入会议名称"
maxlength="50"
/>
</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 class="form-item">
<text class="form-label">开始时间<text class="required">*</text></text>
<picker
mode="multiSelector"
:value="startTimePickerValue"
:range="timePickerRange"
@change="handleStartTimeChange"
>
<view class="picker-content">
<text class="picker-text" :class="{ placeholder: !formData.startTime }">
{{ formData.startTime || '请选择开始时间' }}
</text>
<text class="picker-arrow">></text>
</view>
</picker>
</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 class="form-item">
<text class="form-label">结束时间<text class="required">*</text></text>
<picker
mode="multiSelector"
:value="endTimePickerValue"
:range="timePickerRange"
@change="handleEndTimeChange"
>
<view class="picker-content">
<text class="picker-text" :class="{ placeholder: !formData.endTime }">
{{ formData.endTime || '请选择结束时间' }}
</text>
<text class="picker-arrow">></text>
</view>
</picker>
</view>
<!-- 提前入会 -->
<view class="form-item">
<text class="form-label">提前入会（分钟）</text>
<input
v-model.number="formData.advance"
class="form-input"
type="number"
placeholder="提前入会时间"
/>
<text class="form-tip">用户可在会议开始前N分钟加入</text>
</view>
<!-- 会议密码 -->
<view class="form-item">
<text class="form-label">会议密码</text>
<input
v-model="formData.meetingPassword"
class="form-input"
type="text"
password
placeholder="可选，留空则无密码"
maxlength="20"
/>
</view>
<!-- 最大人数 -->
<view class="form-item">
<text class="form-label">最大人数</text>
<input
v-model.number="formData.maxParticipants"
class="form-input"
type="number"
placeholder="最大参与人数"
/>
</view>
</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="footer-placeholder"></view>
</scroll-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 class="footer-actions">
<view class="action-button" @tap="handleCancel">
<text class="button-text">取消</text>
</view>
<view class="action-button primary" @tap="handleSubmit">
<text class="button-text">创建会议</text>
</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>
<!-- #ifdef APP -->
</scroll-view>
<!-- #endif -->
</template>
<script setup lang="ts">
import { ref, reactive, computed } from 'vue'
import { ref, reactive, computed, onMounted } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { workcaseChatAPI } from '../../../api/workcase/workcaseChat'
import type { CreateMeetingParam } from '../../../types/workcase/chatRoom'
// 响应式数据
const headerPaddingTop = ref<number>(44)
const headerTotalHeight = ref<number>(88)
// 路由参数
const roomId = ref('')
const workcaseId = ref('')
@@ -136,8 +150,8 @@ const formData = reactive<CreateMeetingParam>({
const submitting = ref(false)
// 时间选择器数据
const startTimePickerValue = ref([0, 0, 0, 0])
const endTimePickerValue = ref([0, 0, 0, 0])
const startTimePickerValue = ref([0, 0, 0])
const endTimePickerValue = ref([0, 0, 0])
// 生成时间选择器范围
const timePickerRange = computed(() => {
@@ -179,6 +193,26 @@ onLoad((options: any) => {
}
})
onMounted(() => {
const windowInfo = uni.getWindowInfo()
const statusBarHeight = windowInfo.statusBarHeight || 44
// #ifdef MP-WEIXIN
try {
const menuButtonInfo = uni.getMenuButtonBoundingClientRect()
headerPaddingTop.value = menuButtonInfo.top
headerTotalHeight.value = menuButtonInfo.bottom + 8
} catch (e) {
headerPaddingTop.value = statusBarHeight
headerTotalHeight.value = statusBarHeight + 44
}
// #endif
// #ifndef MP-WEIXIN
headerPaddingTop.value = statusBarHeight
headerTotalHeight.value = statusBarHeight + 44
// #endif
})
// 处理开始时间选择
function handleStartTimeChange(e: any) {
const val = e.detail.value
@@ -214,69 +248,45 @@ function handleEndTimeChange(e: any) {
// 验证表单
function validateForm(): boolean {
if (!formData.startTime) {
uni.showToast({
title: '请选择开始时间',
icon: 'none'
})
uni.showToast({ title: '请选择开始时间', icon: 'none' })
return false
}
if (!formData.endTime) {
uni.showToast({
title: '请选择结束时间',
icon: 'none'
})
uni.showToast({ title: '请选择结束时间', icon: 'none' })
return false
}
const start = new Date(formData.startTime).getTime()
const end = new Date(formData.endTime).getTime()
const start = new Date(formData.startTime.replace(' ', 'T')).getTime()
const end = new Date(formData.endTime.replace(' ', 'T')).getTime()
if (start < Date.now()) {
uni.showToast({
title: '开始时间不能早于当前时间',
icon: 'none'
})
uni.showToast({ title: '开始时间不能早于当前时间', icon: 'none' })
return false
}
if (end <= start) {
uni.showToast({
title: '结束时间必须晚于开始时间',
icon: 'none'
})
uni.showToast({ title: '结束时间必须晚于开始时间', icon: 'none' })
return false
}
if (end - start < 5 * 60 * 1000) {
uni.showToast({
title: '会议时长不能少于5分钟',
icon: 'none'
})
uni.showToast({ title: '会议时长不能少于5分钟', icon: 'none' })
return false
}
if (end - start > 24 * 60 * 60 * 1000) {
uni.showToast({
title: '会议时长不能超过24小时',
icon: 'none'
})
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'
})
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'
})
uni.showToast({ title: '参与人数范围为2-100人', icon: 'none' })
return false
}
@@ -289,33 +299,24 @@ async function handleSubmit() {
return
}
try {
submitting.value = true
if (submitting.value) return
submitting.value = true
try {
const result = await workcaseChatAPI.createVideoMeeting(formData)
if (result.success && result.data) {
uni.showToast({
title: '会议创建成功',
icon: 'success'
})
uni.showToast({ title: '会议创建成功', icon: 'success' })
// 延迟返回，让用户看到成功提示
setTimeout(() => {
uni.navigateBack()
}, 1500)
} else {
uni.showToast({
title: result.message || '创建会议失败',
icon: 'none'
})
uni.showToast({ title: result.message || '创建会议失败', icon: 'none' })
}
} catch (error) {
console.error('创建会议失败:', error)
uni.showToast({
title: '创建会议失败，请重试',
icon: 'none'
})
uni.showToast({ title: '创建会议失败，请重试', icon: 'none' })
} finally {
submitting.value = false
}
@@ -327,6 +328,6 @@ function handleCancel() {
}
</script>
<style scoped lang="scss">
@import url('./MeetingCreate.scss')
<style lang="scss" scoped>
@import "./MeetingCreate.scss";
</style>