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

2025-12-30 20:55:25 +08:00
parent babfe9fb48
commit f287f36496
14 changed files with 591 additions and 312 deletions
--- a/urbanLifelineWeb/packages/workcase_wechat/pages/index/index.scss
+++ b/urbanLifelineWeb/packages/workcase_wechat/pages/index/index.scss
@@ -696,3 +696,110 @@
        opacity: 1;
    }
 }
+
+// 设备代码输入弹窗样式
+.device-code-modal {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    z-index: 1000;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.modal-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+}
+
+.modal-content {
+    position: relative;
+    background-color: white;
+    border-radius: 16px;
+    width: 80%;
+    max-width: 320px;
+    padding: 20px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
+}
+
+.modal-header {
+    margin-bottom: 20px;
+}
+
+.modal-title {
+    font-size: 18px;
+    font-weight: 600;
+    color: #333;
+    text-align: center;
+    display: block;
+}
+
+.modal-body {
+    margin-bottom: 20px;
+}
+
+.device-code-input {
+    width: 100%;
+    height: 44px;
+    padding: 0 12px;
+    border: 1px solid #ddd;
+    border-radius: 8px;
+    font-size: 16px;
+    background-color: #f9f9f9;
+    box-sizing: border-box;
+}
+
+.device-code-input:focus {
+    border-color: #007AFF;
+    background-color: white;
+    outline: none;
+}
+
+.modal-footer {
+    display: flex;
+    flex-direction: row;
+    gap: 12px;
+}
+
+.modal-btn {
+    flex: 1;
+    height: 44px;
+    border-radius: 8px;
+    border: none;
+    font-size: 16px;
+    font-weight: 500;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all 0.2s;
+}
+
+.modal-btn.cancel {
+    background-color: #f5f5f5;
+    color: #666;
+}
+
+.modal-btn.cancel:active {
+    background-color: #e5e5e5;
+}
+
+.modal-btn.confirm {
+    background-color: #007AFF;
+    color: white;
+}
+
+.modal-btn.confirm:active {
+    background-color: #0056b3;
+}
+
+.modal-btn .btn-text {
+    font-size: 16px;
+}
--- a/urbanLifelineWeb/packages/workcase_wechat/pages/index/index.uvue
+++ b/urbanLifelineWeb/packages/workcase_wechat/pages/index/index.uvue
@@ -148,6 +148,33 @@
 		</view>

 	</view>
+
+	<!-- 设备代码输入弹窗 -->
+	<view class="device-code-modal" v-if="showDeviceCodeDialog">
+		<view class="modal-mask" @tap="cancelDeviceCodeInput"></view>
+		<view class="modal-content">
+			<view class="modal-header">
+				<text class="modal-title">请输入设备代码</text>
+			</view>
+			<view class="modal-body">
+				<input
+					class="device-code-input"
+					v-model="deviceCodeInput"
+					placeholder="请输入设备代码"
+					focus
+					@confirm="confirmDeviceCodeInput"
+				/>
+			</view>
+			<view class="modal-footer">
+				<button class="modal-btn cancel" @tap="cancelDeviceCodeInput">
+					<text class="btn-text">取消</text>
+				</button>
+				<button class="modal-btn confirm" @tap="confirmDeviceCodeInput">
+					<text class="btn-text">确定</text>
+				</button>
+			</view>
+		</view>
+	</view>
 </template>

 <script setup lang="ts">
@@ -194,6 +221,12 @@
 	const chatId = ref<string>('') // 当前会话ID
 	const currentTaskId = ref<string>('') // 当前任务ID（用于停止）

+	// 设备代码相关
+	const deviceCode = ref<string>('') // 设备代码
+	const showDeviceCodeDialog = ref<boolean>(false) // 是否显示设备代码输入弹窗
+	const deviceCodeInput = ref<string>('') // 弹窗中的设备代码输入
+	const pendingAction = ref<'workcase' | 'human' | ''>('') // 待执行的操作类型
+
 	// 初始化用户信息
 	async function initUserInfo() {
 		// #ifdef MP-WEIXIN
@@ -489,10 +522,54 @@
 		}
 	}

-	// 直接跳转到工单详情页的 create 模式（复用 workcaseDetail 页面）
-	async function showCreator() {
-		// 首页直接创建工单：为了让工单和聊天室绑定，这里先创建一个聊天室（workcase类型），再带 roomId 跳转
-		// 如果你希望“无聊天室也能创建工单”，后端 WorkcaseServiceImpl 也支持 roomId 为空时自动创建聊天室
+	// 检查并获取设备代码
+	function checkDeviceCode(action: 'workcase' | 'human') {
+		if (!deviceCode.value) {
+			// 如果没有设备代码，显示输入弹窗
+			pendingAction.value = action
+			deviceCodeInput.value = ''
+			showDeviceCodeDialog.value = true
+		} else {
+			// 如果已有设备代码，直接执行对应操作
+			if (action === 'workcase') {
+				doCreateWorkcase()
+			} else {
+				doContactHuman()
+			}
+		}
+	}
+
+	// 确认输入设备代码
+	function confirmDeviceCodeInput() {
+		if (!deviceCodeInput.value.trim()) {
+			uni.showToast({
+				title: '请输入设备代码',
+				icon: 'none'
+			})
+			return
+		}
+
+		deviceCode.value = deviceCodeInput.value.trim()
+		showDeviceCodeDialog.value = false
+
+		// 执行待处理的操作
+		if (pendingAction.value === 'workcase') {
+			doCreateWorkcase()
+		} else if (pendingAction.value === 'human') {
+			doContactHuman()
+		}
+		pendingAction.value = ''
+	}
+
+	// 取消输入设备代码
+	function cancelDeviceCodeInput() {
+		showDeviceCodeDialog.value = false
+		deviceCodeInput.value = ''
+		pendingAction.value = ''
+	}
+
+	// 实际创建工单
+	async function doCreateWorkcase() {
 		uni.showLoading({ title: '正在创建工单...' })
 		try {
 			const res = await workcaseChatAPI.createChatRoom({
@@ -501,6 +578,7 @@
 				roomName: `${userInfo.value.username || '访客'}的工单`,
 				roomType: 'workcase',
 				status: 'active',
+				deviceCode: deviceCode.value,
 				aiSessionId: chatId.value || ''
 			})
 			uni.hideLoading()
@@ -521,6 +599,51 @@
 		}
 	}

+	// 实际联系人工
+	async function doContactHuman() {
+		uni.showLoading({ title: '正在连接客服...' })
+		try {
+			// 创建聊天室
+			const res = await workcaseChatAPI.createChatRoom({
+				guestId: userInfo.value.userId || userInfo.value.wechatId,
+				guestName: userInfo.value.username || '访客',
+				roomName: `${userInfo.value.username || '访客'}的咨询`,
+				roomType: 'guest',
+				status: 'active',
+				deviceCode: deviceCode.value,
+				aiSessionId: chatId.value || ''
+			})
+			uni.hideLoading()
+
+			if (res.success && res.data) {
+				const roomId = res.data.roomId
+				console.log('创建聊天室成功:', roomId)
+				// 跳转到聊天室页面
+				uni.navigateTo({
+					url: `/pages/chatRoom/chatRoom/chatRoom?roomId=${roomId}&roomName=${encodeURIComponent(res.data.roomName || '人工客服')}`
+				})
+			} else {
+				uni.showToast({
+					title: res.message || '连接客服失败',
+					icon: 'none'
+				})
+			}
+		} catch (error: any) {
+			uni.hideLoading()
+			console.error('创建聊天室失败:', error)
+			uni.showToast({
+				title: '连接客服失败，请稍后重试',
+				icon: 'none'
+			})
+		}
+	}
+
+	// 直接跳转到工单详情页的 create 模式（复用 workcaseDetail 页面）
+	async function showCreator() {
+		// 检查设备代码
+		checkDeviceCode('workcase')
+	}
+
 	// 兼容旧逻辑：不再使用页面内工单创建器
 	function hideCreator() {
 		showWorkcaseCreator.value = false
@@ -557,40 +680,8 @@

 	// 联系人工客服 - 创建聊天室并进入
 	async function contactHuman() {
-		uni.showLoading({ title: '正在连接客服...' })
-		try {
-			// 创建聊天室
-			const res = await workcaseChatAPI.createChatRoom({
-				guestId: userInfo.value.userId || userInfo.value.wechatId,
-				guestName: userInfo.value.username || '访客',
-				roomName: `${userInfo.value.username || '访客'}的咨询`,
-				roomType: 'guest',
-				status: 'active',
-				aiSessionId: chatId.value || ''
-			})
-			uni.hideLoading()
-			
-			if (res.success && res.data) {
-				const roomId = res.data.roomId
-				console.log('创建聊天室成功:', roomId)
-				// 跳转到聊天室页面
-				uni.navigateTo({
-					url: `/pages/chatRoom/chatRoom/chatRoom?roomId=${roomId}&roomName=${encodeURIComponent(res.data.roomName || '人工客服')}`
-				})
-			} else {
-				uni.showToast({
-					title: res.message || '连接客服失败',
-					icon: 'none'
-				})
-			}
-		} catch (error: any) {
-			uni.hideLoading()
-			console.error('创建聊天室失败:', error)
-			uni.showToast({
-				title: '连接客服失败，请稍后重试',
-				icon: 'none'
-			})
-		}
+		// 检查设备代码
+		checkDeviceCode('human')
 	}

 	// 处理快速问题