liangxin/xdd-uniapp-new
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Feat(云灵AI):首页送礼重构&交互使用模拟数据书写对应逻辑

Browse Source
This commit is contained in:
lifizer
2026-05-28 18:03:38 +08:00
parent 9c6aa2351b
commit 4e0972f38a
5 changed files with 483 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aiChat/mixins/chatMixinsV2.js
+100 -20
View File
@@ -21,29 +21,35 @@ export const chatMixinsV2 = {
token: cookie.get('login_status'),
userInfo: cookie.get('userInfo'),
webUrl: this.$VUE_APP_RESOURCES_URL,
bottomTools: Object.freeze([
bottomTools: [
{
icon: 'icon-50',
text: '我要送礼',
type: 'prompt',
prompt: '我要送礼，请给我推荐一些平台的礼品',
url: ''
name: '我要送礼',
icon: 'https://resource.xdd618.com/3/20260526/1779781836792_icon-50.png',
navType: 'prompt',
promptContent: '我要送礼，请给我推荐一些平台的礼品',
url: '',
giftCardEnabled: 1,
display: true
},
{
icon: 'icon-51',
text: '订单查询',
type: 'prompt',
prompt: '帮我查询我的待发货、待收货订单信息',
url: ''
name: '订单查询',
icon: 'https://resource.xdd618.com/3/20260526/1779781836793_icon-51.png',
navType: 'prompt',
promptContent: '帮我查询我的待发货、待收货订单信息',
url: '',
giftCardEnabled: 0,
display: true
},
{
icon: 'icon-52',
text: '拍照识图',
type: 'link',
prompt: '',
url: '/aiChat/views/imageRecognition'
name: '拍照识图',
icon: 'https://resource.xdd618.com/3/20260526/1779781836794_icon-52.png',
navType: 'url',
promptContent: '',
url: '/aiChat/views/imageRecognition',
giftCardEnabled: 0,
display: true
}
]),
],
scrollData: {},
scrollTop: 0,
isScrollToBottom: false,
@@ -695,13 +701,32 @@ export const chatMixinsV2 = {
}
},
bottomToolClickHandle(item) {
if (item.type === 'prompt') {
// 非界面跳转的需要校验登录状态
if (!this.token && item.navType !== 'url') {
handleLoginFailure()
return
}
const idx = this.bottomTools.findIndex((i) => i.giftCardEnabled === 1)
if (item.giftCardEnabled === 1) {
// 新建会话
this.createNewHandle('giftChat')
this.$set(this, 'showGiftSteps', true)
if (idx > -1) {
this.$set(this.bottomTools[idx], 'display', false)
}
return
}
this.$set(this, 'showGiftSteps', false)
if (idx > -1) {
this.$set(this.bottomTools[idx], 'display', true)
}
if (item.navType === 'prompt') {
this.streamReq({
prompt: item.prompt,
prompt: item.promptContent,
init: 0
})
}
if (item.type === 'link') {
if (item.navType === 'url') {
uni.navigateTo({
url: item.url
})
@@ -711,6 +736,61 @@ export const chatMixinsV2 = {
uni.navigateTo({
url: '/pagesOrder/order/OrderDetails/index?id=' + order.orderId
})
},
isGiftOptionSelected(configId, optionId) {
if (!this.giftSelections[configId]) return false
return this.giftSelections[configId].includes(optionId)
},
toggleGiftOption(configId, optionId) {
if (!this.giftSelections[configId]) {
this.$set(this.giftSelections, configId, [])
}
const index = this.giftSelections[configId].indexOf(optionId)
if (index > -1) {
this.giftSelections[configId].splice(index, 1)
} else {
this.giftSelections[configId].push(optionId)
}
},
prevGiftStep() {
if (this.currentGiftStepIndex > 0) {
this.currentGiftStepIndex--
}
},
nextGiftStep() {
if (this.currentGiftStepIndex < this.giftBuyOptions.length - 1) {
this.currentGiftStepIndex++
} else {
this.finishGiftSteps()
}
},
skipGiftStep() {
if (this.currentGiftStepIndex < this.giftBuyOptions.length - 1) {
this.currentGiftStepIndex++
} else {
this.finishGiftSteps()
}
},
finishGiftSteps() {
let promptStr = '我想送礼'
this.giftBuyOptions.forEach(step => {
if (step.type === 'option_card') {
const selectedIds = this.giftSelections[step.id] || []
if (selectedIds.length > 0) {
const selectedNames = step.options.filter(opt => selectedIds.includes(opt.id)).map(opt => opt.optionName)
promptStr += `，${step.title.replace('？', '')}：${selectedNames.join('、')}`
}
} else if (step.type === 'price_input') {
if (this.giftBudget) {
promptStr += `，${step.title.replace('？', '')}：${this.giftBudget}`
}
}
});
this.showGiftSteps = false
this.streamReq({
prompt: promptStr,
init: 0
})
}
}
}
aiChat/views/history.vue
+18
View File
@@ -572,6 +572,24 @@ export default {
createNewHandle() {
uni.setStorageSync('addNewChat', '1')
uni.navigateBack()
},
bottomToolClickHandle(item) {
if (item.giftCardEnabled === 1) {
uni.setStorageSync('addNewChat', '2')
uni.navigateBack()
return
}
if (item.navType === 'prompt') {
this.streamReq({
prompt: item.promptContent,
init: 0
})
}
if (item.navType === 'url') {
uni.navigateTo({
url: item.url
})
}
}
}
}
aiChat/views/imageRecognitionResult.vue
+9
View File
@@ -66,6 +66,9 @@
lazy-load
/>
</view>
<view class="goods-desc">
相似度99%
</view>
</view>
</view>
</view>
@@ -301,6 +304,12 @@ export default {
align-items: flex-end;
justify-content: space-between;
}
.goods-desc {
padding: 10rpx 14rpx 20rpx 14rpx;
font-size: 24rpx;
color: #999;
line-height: 1;
}
.price-left {
display: flex;
aiChat/views/index.vue
+229 -19
View File
@@ -16,7 +16,7 @@
transparent="auto"
barPlaceholder="hidden"
title="云灵"
@click-left="clickBackHandle"
@click-left="pageContainerBeforeleave"
/>
<page-container
:show="true"
@@ -45,12 +45,12 @@
<view class="focus-guide-wrap">
<view class="guide-left">
<image
:src="webUrl + '/aiChat/logo-01.gif'"
class="avatar"
:src="webUrl + '/aiChat/logo-transition.png'"
class="avatar avatar-bounce"
mode="widthFix"
/>
</view>
<view class="guide-right">
<view v-if="!showGiftSteps" class="guide-right">
<view class="title">{{ settingInfo.helloMessageTitle }}</view>
<view class="content">{{ settingInfo.helloMessageContent }}</view>
</view>
@@ -99,7 +99,7 @@
</swiper-item>
</swiper>
</view> -->
<view class="topic-wrap">
<view v-if="!showGiftSteps" class="topic-wrap">
<view class="title">
<view class="title-left">大家都在问</view>
<view class="title-right" @click="loadData('click')">
@@ -133,6 +133,38 @@
</view>
</view>
</view>
<!-- 在这里实现送礼步骤 -->
<view v-if="showGiftSteps" class="gift-steps-wrap">
<view class="gift-step-title">{{ giftBuyOptions[currentGiftStepIndex].title }}</view>
<view v-if="giftBuyOptions[currentGiftStepIndex].type === 'option_card'" class="gift-options">
<view
v-for="opt in giftBuyOptions[currentGiftStepIndex].options"
:key="opt.id"
class="gift-option-item"
:class="{ active: isGiftOptionSelected(giftBuyOptions[currentGiftStepIndex].id, opt.id) }"
@click="toggleGiftOption(giftBuyOptions[currentGiftStepIndex].id, opt.id)"
>
{{ opt.optionName }}
<image v-if="isGiftOptionSelected(giftBuyOptions[currentGiftStepIndex].id, opt.id)" :src="webUrl + '/aiChat/gift-options-check.png'" class="icon-check" />
</view>
</view>
<view v-if="giftBuyOptions[currentGiftStepIndex].type === 'price_input'" class="gift-price-input">
<view class="input-wrap">
<text class="label">价格预算：</text>
<input v-model="giftBudget" placeholder="例如100以内/300~500元" class="input-budget" placeholder-style="color: #ccc;" />
</view>
</view>
<view class="gift-step-actions">
<view class="action-btn-group">
<view v-if="currentGiftStepIndex > 0" class="btn btn-prev" @click="prevGiftStep">上一步</view>
<view class="btn btn-next" :class="{'full-width': currentGiftStepIndex === 0}" @click="nextGiftStep">下一步</view>
</view>
<view class="btn-skip" @click="skipGiftStep">跳过</view>
</view>
</view>
</view>
</block>
<view v-if="chatMessageListLength > 0" class="chat-wrap">
@@ -502,7 +534,7 @@
</view>
<view class="container">
<view
v-if="chatNumber"
v-if="chatNumber || showGiftSteps"
class="new-chat"
@click="createNewHandle"
>
@@ -516,15 +548,18 @@
<view
v-for="(item, index) in bottomTools"
:key="index"
:class="{
'hide': !item.display
}"
class="bottom-tool-item"
@click="bottomToolClickHandle(item)"
>
<image
:src="webUrl + '/aiChat/' + item.icon + '.png'"
:src="item.icon"
class="tool-icon"
mode="widthFix"
/>
{{ item.text }}
{{ item.name }}
</view>
</view>
</view>
@@ -586,20 +621,175 @@ export default {
settingInfo: {},
topicList: [],
onlyOneToAddCart: false,
topicIsRotate: false
topicIsRotate: false,
showGiftSteps: false,
currentGiftStepIndex: 0,
giftSelections: {},
giftBudget: '',
giftBuyOptions: [
{
"id": 1,
"sort": 1,
"title": "礼品是送给谁的呢？",
"type": "option_card",
"status": 1,
"createTime": 1779777608000,
"updateTime": 1779850697000,
"options": [
{
"id": 1,
"configId": 1,
"optionName": "送长辈",
"sort": 1,
"createTime": 1779777924000
},
{
"id": 2,
"configId": 1,
"optionName": "送朋友",
"sort": 2,
"createTime": 1779777924000
},
{
"id": 3,
"configId": 1,
"optionName": "送同事",
"sort": 3,
"createTime": 1779777924000
},
{
"id": 4,
"configId": 1,
"optionName": "送亲戚",
"sort": 4,
"createTime": 1779777924000
},
{
"id": 5,
"configId": 1,
"optionName": "送爱人",
"sort": 5,
"createTime": 1779777924000
},
{
"id": 6,
"configId": 1,
"optionName": "送领导",
"sort": 6,
"createTime": 1779777924000
}
]
},
{
"id": 2,
"sort": 2,
"title": "有什么特别的场合吗？",
"type": "option_card",
"status": 1,
"createTime": 1779777608000,
"updateTime": 1779789421000,
"options": [
{
"id": 11,
"configId": 2,
"optionName": "生日",
"sort": 1,
"createTime": 1779789420000
},
{
"id": 12,
"configId": 2,
"optionName": "节日",
"sort": 2,
"createTime": 1779789420000
},
{
"id": 13,
"configId": 2,
"optionName": "乔迁",
"sort": 3,
"createTime": 1779789420000
},
{
"id": 14,
"configId": 2,
"optionName": "感谢",
"sort": 4,
"createTime": 1779789420000
}
]
},
{
"id": 3,
"sort": 3,
"title": "对礼品类型有什么偏好？",
"type": "option_card",
"status": 1,
"createTime": 1779777608000,
"updateTime": 1779789393000,
"options": [
{
"id": 7,
"configId": 3,
"optionName": "特色礼盒",
"sort": 1,
"createTime": 1779789393000
},
{
"id": 8,
"configId": 3,
"optionName": "商务",
"sort": 2,
"createTime": 1779789393000
},
{
"id": 9,
"configId": 3,
"optionName": "茶叶",
"sort": 3,
"createTime": 1779789393000
},
{
"id": 10,
"configId": 3,
"optionName": "精美实惠",
"sort": 4,
"createTime": 1779789393000
}
]
},
{
"id": 4,
"sort": 4,
"title": "预算大概在什么范围？",
"type": "price_input",
"status": 1,
"createTime": 1779777608000,
"updateTime": 1779777608000,
"options": []
}
]
}
},
onLoad(options) {
this.cityName = options.cityName || ''
},
onShow() {
const addNewChat = uni.getStorageSync('addNewChat') === '1'
// 1-新对话，2-我要送礼
const addNewChat = uni.getStorageSync('addNewChat') || ''
// 从历史界面点击新增对话
if (addNewChat && this.chatNumber) {
console.log(addNewChat)
uni.removeStorageSync('addNewChat')
if (addNewChat) {
if (addNewChat === '1' && (this.chatNumber || this.showGiftSteps)) {
this.createNewHandle()
}
if (addNewChat === '2') {
const giftOptionItem = this.bottomTools.find((i) => i.type === 'gift')
if (giftOptionItem) {
this.bottomToolClickHandle(giftOptionItem)
}
}
uni.removeStorageSync('addNewChat')
}
},
methods: {
createdCallbak() {
@@ -643,13 +833,12 @@ export default {
})
},
// 创建新会话
createNewHandle() {
createNewHandle(type = '') {
this.closeAttrWindow()
if (this.audioContext) {
this.audioContext.stop()
}
wx.getBackgroundAudioManager().stop()
if (!this.chatNumber) return
this.closeWsFn()
this.chatNumber = ''
this.showCursor = false
@@ -657,9 +846,17 @@ export default {
this.getConfigLoading = false
this.chatMessageList = []
this.loadData()
if (type !== 'giftChat') {
const idx = this.bottomTools.findIndex((i) => i.giftCardEnabled === 1)
this.$set(this, 'showGiftSteps', false)
if (idx > -1) {
this.$set(this.bottomTools[idx], 'display', true)
}
}
},
/*
clickBackHandle() {
if (!this.chatNumber) {
if (!this.chatNumber && !this.showGiftSteps) {
if (getCurrentPages().length > 1) {
uni.navigateBack()
} else {
@@ -671,8 +868,9 @@ export default {
this.createNewHandle()
}
},
*/
pageContainerBeforeleave() {
if (!this.chatNumber) {
if (!this.chatNumber && !this.showGiftSteps) {
if (getCurrentPages().length > 1) {
uni.navigateBack()
} else {
@@ -737,8 +935,10 @@ export default {
.guide-left {
.avatar {
display: block;
width: 230rpx;
height: 404rpx;
width: 430rpx;
}
.avatar-bounce {
animation: bounce 2s infinite ease-in-out;
}
}
.guide-right {
@@ -822,4 +1022,14 @@ export default {
transform: translateX(-50%);
}
}
@keyframes bounce {
0%, 100% {
transform: translateY(0);
}
50% {
transform: translateY(-20rpx);
}
}
</style>
assets/css/aiChat.less
+127
View File
@@ -161,6 +161,9 @@ page {
&:last-child {
margin-right: 0;
}
&.hide {
display: none;
}
.tool-icon {
display: block;
width: 32rpx;
@@ -1365,3 +1368,127 @@ page {
transform: rotate(720deg);
}
}
.gift-steps-wrap {
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
padding: 0 80rpx;
box-sizing: border-box;
.gift-step-title {
font-size: 36rpx;
font-weight: bold;
color: #333;
margin-bottom: 80rpx;
text-align: center;
}
.gift-options {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
width: 100%;
.gift-option-item {
width: 48%;
height: 72rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #f2f4ff;
color: #333;
border-radius: 12rpx;
margin-bottom: 24rpx;
font-size: 28rpx;
position: relative;
transition: all 0.2s;
&.active {
background-color: #3D4CF0;
color: #fff;
}
.icon-check {
margin-left: 8rpx;
width: 32rpx;
height: 32rpx;
}
}
}
.gift-price-input {
width: 100%;
margin-bottom: 40rpx;
.input-wrap {
display: flex;
align-items: center;
padding: 0 24rpx;
height: 88rpx;
background-color: #f2f4ff;
border-radius: 12rpx;
.label {
font-size: 28rpx;
color: #333;
white-space: nowrap;
}
.input-budget {
flex: 1;
font-size: 28rpx;
color: #333;
padding-left: 10rpx;
}
}
}
.gift-step-actions {
width: 100%;
display: flex;
flex-direction: column;
align-items: center;
margin-top: 20rpx;
.action-btn-group {
display: flex;
justify-content: space-between;
width: 100%;
margin-bottom: 30rpx;
.btn {
height: 62rpx;
line-height: 62rpx;
text-align: center;
border-radius: 12rpx;
font-size: 30rpx;
&-prev {
width: 48%;
background-color: #fff;
color: #3D4CF0;
border: 2rpx solid #3D4CF0;
box-sizing: border-box;
}
&-next {
width: 48%;
background-color: #3D4CF0;
color: #fff;
&.full-width {
width: 100%;
}
}
}
}
.btn-skip {
font-size: 28rpx;
color: #3D4CF0;
padding: 10rpx 20rpx;
}
}
}