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-22 19:16:53 +08:00
parent ae16757984
commit cfb160cf09
70 changed files with 4697 additions and 1839 deletions
Download Patch File Download Diff File Expand all files Collapse all files

300
urbanLifelineWeb/packages/workcase_wechat/pages/index/index.scss
View File

@@ -19,27 +19,32 @@
right: 0;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
padding: 0 16px;
// background: linear-gradient(180deg, rgba(235, 245, 255, 0.8) 0%, rgba(255, 255, 255, 0.95) 100%);
// backdrop-filter: blur(10px);
z-index: 100;
box-sizing: border-box;
// paddingTop和height通过JS动态设置
// 小程序需要为右侧胶囊按钮留出空间
/* #ifdef MP-WEIXIN */
padding-right: 100px; // 为胶囊按钮留出空间
padding-right: 100px;
/* #endif */
}
.title {
font-size: 20px; // 调整字体大小以适配胶囊按钮高度
font-size: 20px;
font-weight: bold;
color: #000000;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
line-height: 1;
flex-shrink: 0;
}
.header-right {
flex: 1;
display: flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
gap: 6px;
}
.workcase-btn {
@@ -47,16 +52,21 @@
flex-direction: row;
align-items: center;
justify-content: center;
gap: 6px;
padding: 6px 12px;
height: 32px;
background: rgba(255, 255, 255, 0.2);
border: 1px solid rgba(255, 255, 255, 0.3);
border-radius: 16px;
backdrop-filter: blur(10px);
gap: 4px;
padding: 4px 10px;
height: 28px;
background: rgba(255, 255, 255, 0.8);
border: none;
border-radius: 14px;
box-sizing: border-box;
white-space: nowrap;
flex-shrink: 0; // 防止按钮被压缩
flex-shrink: 0;
margin: 0;
line-height: 1;
}
.workcase-btn::after {
border: none;
}
.btn-icon {
@@ -65,11 +75,114 @@
}
.btn-text {
color: #000000;
font-size: 14px;
color: #333333;
font-size: 12px;
font-weight: 500;
}
// 欢迎区域（机器人+浮动标签）
.hero {
position: relative;
height: 280px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 80px;
}
.rings {
position: absolute;
width: 100%;
height: 100%;
}
.ring {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
border-radius: 50%;
border: 1px solid rgba(100, 180, 255, 0.15);
}
.r1 { width: 260px; height: 260px; }
.r2 { width: 200px; height: 200px; border-color: rgba(100, 180, 255, 0.2); }
.r3 { width: 150px; height: 150px; border-color: rgba(100, 180, 255, 0.25); }
.r4 { width: 110px; height: 110px; border-color: rgba(100, 180, 255, 0.35); }
.robot {
position: relative;
z-index: 2;
}
.robot-face {
width: 100px;
height: 100px;
background: linear-gradient(145deg, #e8f7ff 0%, #c5e4ff 100%);
border-radius: 50%;
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
gap: 16px;
box-shadow: 0 10px 40px rgba(180, 220, 255, 0.5), inset 0 0 20px rgba(255, 255, 255, 0.8);
}
.eye {
width: 14px;
height: 24px;
background: linear-gradient(180deg, #7ec1ff 0%, #1846ff 100%);
border-radius: 10px;
}
.float-tag {
position: absolute;
padding: 6px 12px;
background: rgba(255, 255, 255, 0.8);
border: 1px solid rgba(200, 220, 255, 0.5);
border-radius: 16px;
font-size: 12px;
color: #666;
}
.t1 { right: 20px; top: 40px; }
.t2 { left: 20px; top: 80px; }
.t3 { right: 30px; bottom: 50px; }
.greeting {
text-align: left;
padding: 0 30px;
margin-top: 24px;
}
.greeting-title {
display: block;
font-size: 24px;
font-weight: 800;
color: #1d72d3;
margin-bottom: 10px;
}
.greeting-sub {
font-size: 15px;
color: #a2a9b7;
}
// AI初始消息
.ai-initial-msg {
background: #fff;
padding: 12px 16px;
border-radius: 12px;
margin: 16px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
.ai-msg-text {
font-size: 14px;
color: #333;
line-height: 1.5;
}
// 聊天消息区域
.chat-messages {
flex: 1;
@@ -216,132 +329,117 @@
bottom: 0;
left: 0;
right: 0;
// background: #FFFFFF;
// background: rgba(240, 241, 246, 0.95);
padding: 12px 16px;
padding-bottom: calc(12px + env(safe-area-inset-bottom));
// box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.05);
z-index: 50;
}
// 第一行容器
.top-row {
display: flex;
flex-direction: row;
align-items: center;
// 快捷按钮横向滚动
.quick-scroll {
white-space: nowrap;
margin-bottom: 12px;
}
// 主要操作按钮
.main-actions {
display: flex;
.quick-list {
display: inline-flex;
flex-direction: row;
gap: 8px;
flex-shrink: 0;
}
.action-btn {
height: 30px;
padding: 0 20px;
border-radius: 20px;
border: none;
font-size: 14px;
font-weight: 500;
display: flex;
align-items: center;
justify-content: center;
white-space: nowrap;
flex-shrink: 0;
}
.action-btn.primary {
background: #5B8FF9;
color: #FFFFFF;
}
.action-btn.secondary {
background: #F7F8FA;
color: #1F2329;
border: 1px solid #E5E6EB;
}
.action-text {
font-size: 14px;
font-weight: 500;
}
// 竖向分隔线
.divider-line {
width: 1px;
height: 30px;
background: #E5E6EB;
margin: 0 12px;
flex-shrink: 0;
}
// 快速问题区域
.quick-section {
display: flex;
flex-direction: row;
flex: 1;
gap: 8px;
}
.quick-btn {
// width: 100%;
height: 30px;
background: #F7F8FA;
border: 1px solid #E5E6EB;
border-radius: 20px;
display: flex;
margin: 0;
position: relative;
box-sizing: border-box;
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
align-content: stretch;
min-height: 0px;
min-width: 0px;
overflow: hidden;
align-items: center;
justify-content: center;
background: #fff;
border-radius: 24px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
border: none;
display: flex;
flex-direction: row;
padding: 10px 24px;
color: black;
}
.quick-btn.has-icon {
// background: linear-gradient(90deg, #173294 0%, #4a6fd9 100%);
border: none;
padding: 10px 24px;
}
.quick-btn.has-icon .quick-text {
// color: #fff;
font-weight: 500;
}
.quick-icon {
font-size: 14px;
margin-right: 6px;
color: #333;
}
.quick-divider {
width: 1px;
height: 20px;
background: #d0d5dd;
margin: 0 4px;
}
.quick-text {
font-size: 13px;
color: #646A73;
color: #333;
white-space: nowrap;
}
// 输入区域
.input-section {
.chat-input-wrap {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
background: #fff;
border-radius: 24px;
padding: 4px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}
.chat-input {
flex: 1;
height: 40px;
padding: 0 50px 0 16px;
background: #F7F8FA;
border: 1px solid #E5E6EB;
border-radius: 20px;
padding: 0 16px;
background: transparent;
border: none;
font-size: 14px;
color: #1F2329;
box-sizing: border-box;
color: #333;
}
.chat-input::placeholder {
color: #8F959E;
color: #999;
}
.add-btn {
position: absolute;
right: 4px;
width: 32px;
height: 32px;
border-radius: 16px;
border: 2px solid;
.send-btn {
width: 40px;
height: 40px;
border-radius: 20px;
background: linear-gradient(135deg, #e9f1ff 0%, #d4e4ff 100%);
border: 1px solid #8dbbff;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transform: scale(0.7);
}
.add-icon {
.send-icon {
font-size: 18px;
font-weight: 400;
color: #000000;
line-height: 1;
color: #4b87ff;
}

189
urbanLifelineWeb/packages/workcase_wechat/pages/index/index.uvue
View File

@@ -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)
}
// 显示上传选项