chore：智能客服加了商品的图标
This commit is contained in:
@@ -182,6 +182,9 @@
|
||||
<!-- 输入区域 -->
|
||||
<view class="input-area">
|
||||
<view class="input-tools">
|
||||
<button class="tool-btn" @click="selectProduct">
|
||||
<text class="iconfont icon-goods">🛍️</text>
|
||||
</button>
|
||||
<button class="tool-btn" @click="showMoreTools" style="display: none;">
|
||||
<text class="iconfont icon-plus">...</text>
|
||||
</button>
|
||||
@@ -279,6 +282,50 @@
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 商品选择弹窗 -->
|
||||
<view v-if="showProductSelector" class="product-selector-popup">
|
||||
<view class="product-selector-mask" @click="closeProductSelector"></view>
|
||||
<view class="product-selector-panel">
|
||||
<view class="product-selector-header">
|
||||
<text>选择商品</text>
|
||||
<button class="close-btn" @click="closeProductSelector">
|
||||
<text class="iconfont icon-close"></text>
|
||||
</button>
|
||||
</view>
|
||||
<view class="product-selector-content">
|
||||
<scroll-view class="category-list" scroll-y>
|
||||
<view
|
||||
v-for="(category, index) in productCategories"
|
||||
:key="category.id"
|
||||
class="category-item"
|
||||
:class="{ active: selectedCategoryIndex === index }"
|
||||
@click="selectCategory(index)">
|
||||
{{ category.category_name }}
|
||||
</view>
|
||||
</scroll-view>
|
||||
<scroll-view class="product-list" scroll-y>
|
||||
<view v-if="loadingProducts" class="loading">
|
||||
<text>加载商品中...</text>
|
||||
</view>
|
||||
<view v-else-if="selectedCategoryProducts.length === 0" class="empty">
|
||||
<text>该分类下暂无商品</text>
|
||||
</view>
|
||||
<view
|
||||
v-for="product in selectedCategoryProducts"
|
||||
:key="product.id"
|
||||
class="product-item"
|
||||
@click="selectProductItem(product)">
|
||||
<image :src="product.image" class="product-image" mode="aspectFill" />
|
||||
<view class="product-info">
|
||||
<text class="product-name">{{ product.goods_name }}</text>
|
||||
<text class="product-price">¥{{ product.price }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 头像选择弹窗 -->
|
||||
<view v-if="showAvatarSelector" class="avatar-selector-popup" style="pointer-events: auto;">
|
||||
<view class="avatar-selector-mask" @click="closeAvatarSelector"></view>
|
||||
@@ -410,22 +457,28 @@ export default {
|
||||
// 默认头像路径
|
||||
defaultAvatar: '/static/images/default-avatar.png',
|
||||
// 头像选择弹窗控制
|
||||
showAvatarSelector: false,
|
||||
// 新增：用户昵称相关
|
||||
localUserNickname: '', // 当前用户昵称
|
||||
defaultNickname: '我', // 默认昵称
|
||||
showNicknameEditor: false, // 昵称编辑弹窗控制
|
||||
tempNickname: '', // 昵称编辑临时值
|
||||
// Dify API相关
|
||||
currentConversationId: null,
|
||||
isAIServiceAvailable: true,
|
||||
aiServiceError: null,
|
||||
isLoadingHistory: false, // 新增：标记历史加载状态
|
||||
shouldScrollToBottom: false,
|
||||
scrollTimer: null,
|
||||
lastScrollTop: 0,
|
||||
historyOffset: 0,
|
||||
isFetchingHistory: false
|
||||
showAvatarSelector: false, // 头像选择弹窗控制
|
||||
// 新增：用户昵称相关
|
||||
localUserNickname: '', // 当前用户昵称
|
||||
defaultNickname: '我', // 默认昵称
|
||||
showNicknameEditor: false, // 昵称编辑弹窗控制
|
||||
tempNickname: '', // 昵称编辑临时值
|
||||
// 商品选择相关
|
||||
showProductSelector: false, // 商品选择弹窗控制
|
||||
productCategories: [], // 商品分类列表
|
||||
selectedCategoryIndex: 0, // 当前选中的分类索引
|
||||
selectedCategoryProducts: [], // 当前分类下的商品列表
|
||||
loadingProducts: false, // 商品加载状态
|
||||
// Dify API相关
|
||||
currentConversationId: null,
|
||||
isAIServiceAvailable: true,
|
||||
aiServiceError: null,
|
||||
isLoadingHistory: false, // 新增：标记历史加载状态
|
||||
shouldScrollToBottom: false,
|
||||
scrollTimer: null,
|
||||
lastScrollTop: 0,
|
||||
historyOffset: 0,
|
||||
isFetchingHistory: false
|
||||
}
|
||||
},
|
||||
onShow() {
|
||||
@@ -1466,6 +1519,111 @@ export default {
|
||||
})
|
||||
},
|
||||
|
||||
// 选择商品
|
||||
selectProduct() {
|
||||
this.hideToolsPanel()
|
||||
this.showProductSelector = true
|
||||
this.loadProductCategories()
|
||||
},
|
||||
|
||||
// 关闭商品选择弹窗
|
||||
closeProductSelector() {
|
||||
this.showProductSelector = false
|
||||
},
|
||||
|
||||
// 加载商品分类
|
||||
loadProductCategories() {
|
||||
uni.showLoading({ title: '加载商品分类中...' })
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goodscategory/tree',
|
||||
data: {
|
||||
level: 2
|
||||
},
|
||||
success: (res) => {
|
||||
uni.hideLoading()
|
||||
|
||||
if (res.code == 0 && res.data) {
|
||||
this.productCategories = res.data
|
||||
if (res.data.length > 0) {
|
||||
this.selectCategory(0)
|
||||
}
|
||||
} else {
|
||||
uni.showToast({
|
||||
title: '获取商品分类失败',
|
||||
icon: 'none'
|
||||
})
|
||||
this.closeProductSelector()
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
uni.hideLoading()
|
||||
uni.showToast({
|
||||
title: '网络错误，请稍后重试',
|
||||
icon: 'none'
|
||||
})
|
||||
this.closeProductSelector()
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 选择分类
|
||||
selectCategory(index) {
|
||||
this.selectedCategoryIndex = index
|
||||
const category = this.productCategories[index]
|
||||
if (category) {
|
||||
this.loadCategoryProducts(category.id)
|
||||
}
|
||||
},
|
||||
|
||||
// 加载分类商品
|
||||
loadCategoryProducts(categoryId) {
|
||||
this.loadingProducts = true
|
||||
this.selectedCategoryProducts = []
|
||||
|
||||
this.$api.sendRequest({
|
||||
url: '/api/goods/list',
|
||||
data: {
|
||||
category_id: categoryId,
|
||||
page: 1,
|
||||
limit: 50
|
||||
},
|
||||
success: (res) => {
|
||||
this.loadingProducts = false
|
||||
|
||||
if (res.code == 0 && res.data && res.data.list) {
|
||||
this.selectedCategoryProducts = res.data.list
|
||||
} else {
|
||||
this.selectedCategoryProducts = []
|
||||
}
|
||||
},
|
||||
fail: () => {
|
||||
this.loadingProducts = false
|
||||
this.selectedCategoryProducts = []
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
// 选择商品
|
||||
selectProductItem(product) {
|
||||
// 构建商品消息
|
||||
const productMessage = {
|
||||
id: ++this.messageId,
|
||||
role: 'user',
|
||||
type: 'text',
|
||||
content: `我想了解以下商品的信息：\n商品名称：${product.goods_name}\n价格：¥${product.price}\n商品ID：${product.id}`,
|
||||
timestamp: Date.now(),
|
||||
product: product
|
||||
}
|
||||
|
||||
this.messages.push(productMessage)
|
||||
this.closeProductSelector()
|
||||
this.$emit('product-selected', productMessage)
|
||||
|
||||
// 触发AI回复
|
||||
this.sendMessageWithContent(productMessage.content)
|
||||
},
|
||||
|
||||
// 清空聊天记录
|
||||
clearMessages() {
|
||||
// 清空消息数组
|
||||
@@ -2842,6 +3000,132 @@ $radius-lg: 36rpx;
|
||||
}
|
||||
}
|
||||
|
||||
/* 商品选择弹窗样式 */
|
||||
.product-selector-popup {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
z-index: 9999;
|
||||
|
||||
.product-selector-mask {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.product-selector-panel {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
width: 90%;
|
||||
max-width: 800rpx;
|
||||
max-height: 80vh;
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx;
|
||||
overflow: hidden;
|
||||
|
||||
.product-selector-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20rpx;
|
||||
border-bottom: 1rpx solid #e8edf3;
|
||||
|
||||
text {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
padding: 0;
|
||||
background: none;
|
||||
|
||||
.iconfont {
|
||||
font-size: 32rpx;
|
||||
color: #8492a6;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-selector-content {
|
||||
display: flex;
|
||||
height: 60vh;
|
||||
|
||||
.category-list {
|
||||
width: 200rpx;
|
||||
border-right: 1rpx solid #e8edf3;
|
||||
|
||||
.category-item {
|
||||
padding: 20rpx;
|
||||
text-align: center;
|
||||
border-bottom: 1rpx solid #e8edf3;
|
||||
|
||||
&.active {
|
||||
background-color: #f5f7fa;
|
||||
font-weight: bold;
|
||||
color: #6c8ebf;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.product-list {
|
||||
flex: 1;
|
||||
padding: 20rpx;
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #8492a6;
|
||||
}
|
||||
|
||||
.empty {
|
||||
text-align: center;
|
||||
padding: 40rpx;
|
||||
color: #8492a6;
|
||||
}
|
||||
|
||||
.product-item {
|
||||
display: flex;
|
||||
padding: 15rpx;
|
||||
border-bottom: 1rpx solid #e8edf3;
|
||||
|
||||
.product-image {
|
||||
width: 120rpx;
|
||||
height: 120rpx;
|
||||
border-radius: 8rpx;
|
||||
margin-right: 15rpx;
|
||||
}
|
||||
|
||||
.product-info {
|
||||
flex: 1;
|
||||
|
||||
.product-name {
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 2;
|
||||
-webkit-box-orient: vertical;
|
||||
overflow: hidden;
|
||||
margin-bottom: 10rpx;
|
||||
color: #4e5969;
|
||||
}
|
||||
|
||||
.product-price {
|
||||
color: #f56c6c;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 750rpx) {
|
||||
.ai-chat-container {
|
||||
|
||||
Reference in New Issue
Block a user