微信修改
This commit is contained in:
@@ -3,18 +3,48 @@
|
||||
<!-- 顶部标题栏 -->
|
||||
<view class="header" :style="{ paddingTop: headerPaddingTop + 'px', height: headerTotalHeight + 'px' }">
|
||||
<text class="title">泰豪小电</text>
|
||||
<button class="workcase-btn" @tap="goToWorkList">
|
||||
<image class="btn-icon" src="/static/imgs/case.svg" />
|
||||
<text class="btn-text">我的工单</text>
|
||||
</button>
|
||||
<view class="header-right">
|
||||
<button class="workcase-btn" @tap="switchMockUser" v-if="isMockMode">
|
||||
<text class="btn-text">切换</text>
|
||||
</button>
|
||||
<button class="workcase-btn" @tap="goToChatRoomList">
|
||||
<text class="btn-text">聊天室</text>
|
||||
</button>
|
||||
<button class="workcase-btn" @tap="goToWorkList">
|
||||
<image class="btn-icon" src="/static/imgs/case.svg" />
|
||||
<text class="btn-text">工单</text>
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 欢迎区域（机器人+浮动标签） -->
|
||||
<view class="hero" v-if="messages.length === 0">
|
||||
<view class="rings">
|
||||
<view class="ring r1"></view>
|
||||
<view class="ring r2"></view>
|
||||
<view class="ring r3"></view>
|
||||
<view class="ring r4"></view>
|
||||
</view>
|
||||
<view class="robot">
|
||||
<view class="robot-face">
|
||||
<view class="eye left"></view>
|
||||
<view class="eye right"></view>
|
||||
</view>
|
||||
</view>
|
||||
<view class="float-tag t1">查询质保状态</view>
|
||||
<view class="float-tag t2">发动机无法启动</view>
|
||||
<view class="float-tag t3">申请上门维修</view>
|
||||
</view>
|
||||
|
||||
<view class="greeting" v-if="messages.length === 0">
|
||||
<text class="greeting-title">Hi~ 有什么可以帮您！</text>
|
||||
<text class="greeting-sub">泰豪小电为您服务：）</text>
|
||||
</view>
|
||||
|
||||
<!-- 聊天消息区域 -->
|
||||
<scroll-view class="chat-messages" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true">
|
||||
<!-- 默认欢迎界面 -->
|
||||
<view class="welcome-container" v-if="messages.length === 0">
|
||||
<image class="welcome-image" src="/static/imgs/defaultchat.png" />
|
||||
<text class="welcome-text-primary">Hi~ 有什么可以帮您！</text>
|
||||
<text class="welcome-text-secondary">泰豪小电为您服务：）</text>
|
||||
<scroll-view class="chat-messages" scroll-y="true" :scroll-top="scrollTop" scroll-with-animation="true" :class="{ started: messages.length > 0 }">
|
||||
<!-- AI初始消息 -->
|
||||
<view class="ai-initial-msg" v-if="messages.length === 0">
|
||||
<text class="ai-msg-text">您好，我是泰豪小电智能客服。请描述您的问题，我会尽力协助。</text>
|
||||
</view>
|
||||
<!-- 聊天消息列表 -->
|
||||
<view class="messages-list" v-else>
|
||||
@@ -44,34 +74,33 @@
|
||||
</scroll-view>
|
||||
<!-- 底部操作区域 -->
|
||||
<view class="bottom-area">
|
||||
<!-- 第一行：按钮和快速问题 -->
|
||||
<view class="top-row">
|
||||
<view class="main-actions">
|
||||
<button class="action-btn primary" @tap="contactHuman">
|
||||
<text class="action-text">联系人工</text>
|
||||
</button>
|
||||
<button class="action-btn secondary" @tap="showCreator">
|
||||
<text class="action-text">创建工单</text>
|
||||
</button>
|
||||
</view>
|
||||
|
||||
<!-- 竖向分隔线 -->
|
||||
<view class="divider-line"></view>
|
||||
|
||||
<!-- 快速问题 -->
|
||||
<view class="quick-section">
|
||||
<button class="quick-btn" @tap="handleQuickQuestion">
|
||||
<!-- 快捷按钮横向滚动 -->
|
||||
<scroll-view class="quick-scroll" scroll-x="true">
|
||||
<view class="quick-list">
|
||||
<view class="quick-btn has-icon" @tap="contactHuman">
|
||||
<text class="quick-icon">☎</text>
|
||||
<text class="quick-text">联系人工</text>
|
||||
</view>
|
||||
<view class="quick-btn has-icon" @tap="showCreator">
|
||||
<text class="quick-icon">⊕</text>
|
||||
<text class="quick-text">创建工单</text>
|
||||
</view>
|
||||
<view class="quick-divider"></view>
|
||||
<view class="quick-btn" @tap="handleQuickQuestion('查询质保状态')">
|
||||
<text class="quick-text">查询质保状态</text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="quick-btn" @tap="handleQuickQuestion('发动机无法启动')">
|
||||
<text class="quick-text">发动机无法启动</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 输入区域 -->
|
||||
<view class="input-section">
|
||||
<input class="chat-input" v-model="inputText" placeholder="输入问题来问我~" @confirm="sendMessage" />
|
||||
<button class="add-btn" @tap="showUploadOptions">
|
||||
<text class="add-icon">+</text>
|
||||
</button>
|
||||
<view class="chat-input-wrap">
|
||||
<input class="chat-input" v-model="inputText" placeholder="输入问题 来问问我~" @confirm="sendMessage" />
|
||||
<view class="send-btn" @tap="sendMessage">
|
||||
<text class="send-icon">➤</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 工单创建弹窗 -->
|
||||
@@ -111,8 +140,85 @@
|
||||
const headerPaddingTop = ref<number>(44) // header顶部padding，默认44px
|
||||
const headerTotalHeight = ref<number>(76) // header总高度，默认76px
|
||||
|
||||
// 用户信息
|
||||
const userInfo = ref({
|
||||
wechatId: '',
|
||||
username: '',
|
||||
phone: ''
|
||||
})
|
||||
const isMockMode = ref(true) // 开发环境mock模式
|
||||
|
||||
// 初始化用户信息
|
||||
function initUserInfo() {
|
||||
// #ifdef MP-WEIXIN
|
||||
// 正式环境：从微信获取用户信息
|
||||
// wx.login({
|
||||
// success: (loginRes) => {
|
||||
// // 使用code换取openid等信息
|
||||
// console.log('微信登录code:', loginRes.code)
|
||||
// }
|
||||
// })
|
||||
// #endif
|
||||
|
||||
// 开发环境：使用mock数据
|
||||
if (isMockMode.value) {
|
||||
userInfo.value = {
|
||||
wechatId: '17857100375',
|
||||
username: '测试用户',
|
||||
phone: '17857100375'
|
||||
}
|
||||
doIdentify()
|
||||
}
|
||||
}
|
||||
|
||||
// 切换mock用户（开发调试用）
|
||||
function switchMockUser() {
|
||||
uni.showActionSheet({
|
||||
itemList: ['员工 (17857100375)', '访客 (17857100376)'],
|
||||
success: (res) => {
|
||||
if (res.tapIndex === 0) {
|
||||
userInfo.value = { wechatId: '17857100375', username: '员工用户', phone: '17857100375' }
|
||||
} else {
|
||||
userInfo.value = { wechatId: '17857100376', username: '访客用户', phone: '17857100376' }
|
||||
}
|
||||
doIdentify()
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 调用identify接口
|
||||
function doIdentify() {
|
||||
uni.showLoading({ title: '登录中...' })
|
||||
uni.request({
|
||||
url: 'http://localhost:8180/urban-lifeline/system/guest/identify',
|
||||
method: 'POST',
|
||||
header: { 'Content-Type': 'application/json' },
|
||||
data: { wechatId: userInfo.value.wechatId, phone: userInfo.value.phone },
|
||||
success: (res : any) => {
|
||||
uni.hideLoading()
|
||||
if (res.statusCode === 200 && res.data?.success) {
|
||||
const loginDomain = res.data.data
|
||||
uni.setStorageSync('token', loginDomain.token || '')
|
||||
uni.setStorageSync('userInfo', JSON.stringify(loginDomain.user))
|
||||
uni.setStorageSync('wechatId', userInfo.value.wechatId)
|
||||
console.log('identify成功:', loginDomain)
|
||||
uni.showToast({ title: '登录成功', icon: 'success' })
|
||||
} else {
|
||||
console.error('identify失败:', res.data?.message)
|
||||
}
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading()
|
||||
console.error('identify请求失败:', err)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 生命周期
|
||||
onMounted(() => {
|
||||
// 初始化用户信息
|
||||
initUserInfo()
|
||||
|
||||
// 设置页面标题
|
||||
uni.setNavigationBarTitle({
|
||||
title: '智能助手'
|
||||
@@ -268,7 +374,14 @@
|
||||
// 跳转到工单列表
|
||||
function goToWorkList() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/workcase/list'
|
||||
url: '/pages/workcase/workcaseList/workcaseList'
|
||||
})
|
||||
}
|
||||
|
||||
// 跳转到聊天室列表
|
||||
function goToChatRoomList() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/chatRoom/chatRoomList/chatRoomList'
|
||||
})
|
||||
}
|
||||
|
||||
@@ -295,9 +408,9 @@
|
||||
}
|
||||
|
||||
// 处理快速问题
|
||||
function handleQuickQuestion() {
|
||||
addMessage('user', '查询质保状态')
|
||||
simulateAIResponse('查询质保状态')
|
||||
function handleQuickQuestion(question : string) {
|
||||
addMessage('user', question)
|
||||
simulateAIResponse(question)
|
||||
}
|
||||
|
||||
// 显示上传选项
|
||||
|
||||
Reference in New Issue
Block a user