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

239
urbanLifelineWeb/packages/workcase_wechat/pages/meeting/meetingCreate/MeetingCreate.scss
View File

@@ -1,116 +1,185 @@
.meeting-create-page {
min-height: 100vh;
background-color: #f5f7fa;
padding-bottom: 120rpx;
.page {
background: #f8fafc;
}
.page-header {
background-color: #fff;
padding: 32rpx;
border-bottom: 1px solid #ebeef5;
.nav {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
flex-direction: row;
align-items: flex-end;
padding-left: 24rpx;
padding-right: 24rpx;
padding-bottom: 16rpx;
z-index: 100;
border-bottom: 1rpx solid #e5e7eb;
}
.page-title {
font-size: 36rpx;
font-weight: 600;
color: #303133;
.nav-back {
width: 60rpx;
height: 64rpx;
align-items: center;
justify-content: center;
}
.nav-back-icon {
width: 20rpx;
height: 20rpx;
border-left-width: 4rpx;
border-left-style: solid;
border-left-color: #333;
border-bottom-width: 4rpx;
border-bottom-style: solid;
border-bottom-color: #333;
transform: rotate(45deg);
}
.nav-title {
flex: 1;
font-size: 34rpx;
font-weight: 500;
color: #333;
text-align: center;
line-height: 64rpx;
}
.nav-capsule {
width: 174rpx;
height: 64rpx;
}
.content {
padding: 24rpx;
padding-bottom: 140rpx;
}
.section {
background: #fff;
border-radius: 20rpx;
padding: 24rpx;
margin-bottom: 20rpx;
}
// 表单容器
.form-container {
background-color: #fff;
margin-top: 16rpx;
background: #fff;
border-radius: 16rpx;
overflow: hidden;
}
.form-item {
padding: 24rpx 32rpx;
border-bottom: 1px solid #ebeef5;
}
.form-item.required .label-text::after {
content: ' *';
color: #f56c6c;
padding: 24rpx;
border-bottom-width: 1rpx;
border-bottom-style: solid;
border-bottom-color: #f3f4f6;
}
.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;
font-size: 26rpx;
color: #6b7280;
margin-bottom: 16rpx;
font-weight: 500;
}
.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;
padding: 0 24rpx;
height: 68rpx;
background-color: #f9fafb;
border-width: 1rpx;
border-style: solid;
border-color: #e5e7eb;
border-radius: 8rpx;
font-size: 28rpx;
color: #111827;
}
.form-tip {
margin-top: 8rpx;
font-size: 24rpx;
color: #9ca3af;
margin-top: 12rpx;
}
.form-tip text {
font-size: 24rpx;
color: #909399;
.required {
color: #ef4444;
margin-left: 4rpx;
}
.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);
.picker-content {
flex-direction: row;
align-items: center;
justify-content: space-between;
height: 68rpx;
padding: 0 24rpx;
background-color: #f9fafb;
border-width: 1rpx;
border-style: solid;
border-color: #e5e7eb;
border-radius: 8rpx;
}
.btn {
flex: 1;
padding: 24rpx 0;
border-radius: 8rpx;
font-size: 32rpx;
text-align: center;
border: none;
.picker-text {
flex: 1;
font-size: 28rpx;
color: #111827;
}
.btn-cancel {
background-color: #f5f7fa;
color: #606266;
margin-right: 16rpx;
.picker-text.placeholder {
color: #9ca3af;
}
.btn-submit {
background-color: #409eff;
color: #fff;
.picker-arrow {
font-size: 28rpx;
color: #9ca3af;
margin-left: 16rpx;
}
.btn-submit[loading] {
opacity: 0.7;
}
// 底部占位
.footer-placeholder {
height: 120rpx;
}
// 底部操作栏
.footer-actions {
position: fixed;
left: 0;
right: 0;
bottom: 0;
background-color: #fff;
border-top-width: 1rpx;
border-top-style: solid;
border-top-color: #e5e7eb;
padding: 24rpx;
flex-direction: row;
z-index: 99;
}
.action-button {
flex: 1;
height: 80rpx;
border-radius: 8rpx;
align-items: center;
justify-content: center;
border-width: 1rpx;
border-style: solid;
border-color: #e5e7eb;
background-color: #fff;
margin-right: 24rpx;
}
.action-button.primary {
background-color: #4b87ff;
border-color: #4b87ff;
margin-right: 0;
}
.action-button.primary .button-text {
color: #fff;
}
.button-text {
font-size: 28rpx;
color: #6b7280;
font-weight: 500;
}

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>