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

Refactor(云灵AI):换一换动态效果实现

Browse Source
This commit is contained in:
lifizer
2026-04-27 15:42:01 +08:00
parent 0d1dfae3bd
commit 3b935811e3
4 changed files with 92 additions and 29 deletions
Download Patch File Download Diff File Expand all files Collapse all files
aiChat/mixins/chatMixinsV2.js
+19 -5
View File
@@ -252,7 +252,8 @@ export const chatMixinsV2 = {
type: -2,
showMoreInfo: {},
currentSwiperIndex: 0,
showChangeBtn: true
showChangeBtn: true,
changeIsRotate: false
})
_this.loading = true
_this.showCursor = false
@@ -408,6 +409,18 @@ export const chatMixinsV2 = {
this.chatMessageList[index].currentSwiperIndex = e.detail.current
},
analyzeKeywordsChangeHandle(conversationId, item) {
let idx = -1
this.chatMessageList.map((item, index) => {
if (item.conversationId === conversationId) {
idx = index
}
})
if (idx > -1) {
this.$set(this.chatMessageList[idx], 'changeIsRotate', true)
if (this.chatMessageList[idx].changeIsRotate) {
return
}
}
let listKey = ''
// 抽奖和订单查询没有换一换
if (item.goodsList.length > 0) {
@@ -431,17 +444,18 @@ export const chatMixinsV2 = {
const { success, data } = res
if (success) {
let changeList = []
let idx = -1
this.chatMessageList.map((item, index) => {
this.chatMessageList.map((item) => {
if (item.conversationId === conversationId) {
changeList = data.list || []
idx = index
}
})
if (idx > -1 && listKey) {
this.$set(this.chatMessageList[idx], 'listKey', changeList)
this.$set(this.chatMessageList[idx], listKey, changeList)
this.$forceUpdate()
}
setTimeout(() => {
this.$set(this.chatMessageList[idx], 'changeIsRotate', false)
}, 1000)
}
})
},
aiChat/views/history.vue
+13 -7
View File
@@ -320,12 +320,17 @@
"
class="change-btn"
>
<image
:src="webUrl + '/aiChat/icon-change.png'"
class="icon"
mode="widthFix"
@click="analyzeKeywordsChangeHandle(item.conversationId, item)"
/>
<view class="change-btn-content" @click="analyzeKeywordsChangeHandle(item.conversationId, item)">
<image
:src="webUrl + '/aiChat/icon-53.png'"
:class="{
'rotate': item.changeIsRotate
}"
class="icon"
mode="widthFix"
/>
换一换
</view>
</view>
</view>
<!-- 建议提问 -->
@@ -489,7 +494,8 @@ export default {
type: -2,
showMoreInfo: {},
currentSwiperIndex: 0,
showChangeBtn: false
showChangeBtn: false,
changeIsRotate: false
}
if (item.cardData) {
const { contentType, finish, items = [] } = item.cardData
aiChat/views/index.vue
+35 -11
View File
@@ -99,9 +99,12 @@
<view class="topic-wrap">
<view class="title">
<view class="title-left">大家都在问</view>
<view class="title-right" @click="loadData">
<view class="title-right" @click="loadData('click')">
<image
:src="webUrl + '/aiChat/icon-53.png'"
:class="{
'rotate': topicIsRotate
}"
class="icon"
mode="widthFix"
/>
@@ -433,12 +436,17 @@
"
class="change-btn"
>
<image
:src="webUrl + '/aiChat/icon-change.png'"
class="icon"
mode="widthFix"
@click="analyzeKeywordsChangeHandle(item.conversationId, item)"
/>
<view class="change-btn-content" @click="analyzeKeywordsChangeHandle(item.conversationId, item)">
<image
:src="webUrl + '/aiChat/icon-53.png'"
:class="{
'rotate': item.changeIsRotate
}"
class="icon"
mode="widthFix"
/>
换一换
</view>
</view>
</view>
<!-- 建议提问 -->
@@ -573,7 +581,8 @@ export default {
animationStr: '',
settingInfo: {},
topicList: [],
onlyOneToAddCart: false
onlyOneToAddCart: false,
topicIsRotate: false
}
},
onLoad(options) {
@@ -603,7 +612,11 @@ export default {
this.loadData()
})
},
loadData() {
loadData(type = '') {
if (this.topicIsRotate) return
if (type === 'click') {
this.topicIsRotate = true
}
getAiSystemInfoTopic().then(res => {
const { success, data } = res
if (success) {
@@ -619,6 +632,9 @@ export default {
}
list.sort(() => Math.random() - 0.5)
this.topicList = list.slice(0, 3)
setTimeout(() => {
this.topicIsRotate = false
}, 1000)
}
})
},
@@ -731,7 +747,7 @@ export default {
font-size: 34rpx;
}
.content {
padding: 30rpx 0 0 0;
padding: 30rpx 24rpx 0 24rpx;
color: #3D4CF0;
}
}
@@ -757,6 +773,10 @@ export default {
display: flex;
width: 40rpx;
height: 32rpx;
margin: 0 8rpx 0 0;
&.rotate {
animation: spin-icon 1s linear;
}
}
}
.list-wrap {
@@ -766,15 +786,19 @@ export default {
.list-cont {
padding: 0 24rpx;
box-sizing: border-box;
display: flex;
flex-direction: column;
align-items: flex-start;
.list-item {
display: flex;
align-items: center;
padding: 12rpx 18rpx;
padding: 6rpx 12rpx;
margin: 0 0 24rpx 0;
border-radius: 12rpx;
border: 1rpx solid #ddd;
font-size: 28rpx;
color: #666;
background-color: #fff;
.icon {
display: block;
width: 24rpx;
assets/css/aiChat.less
+25 -6
View File
@@ -12,9 +12,9 @@ page {
min-height: 100vh;
background: linear-gradient(155deg, rgba(61, 76, 241, 0.15) 0%, rgba(255,255,255,1) 25%, rgba(255,255,255,1) 75%, rgba(61, 76, 241, 0.15) 100%);
// background-color: #fff;
// background-size: 100% 100vh;
background-size: 100% calc(100vh - 160rpx);
// background-image: url(https://wxapp.xdd618.com/api/file/pic/aiChat/bg.png);
// background-repeat: no-repeat;
background-repeat: no-repeat;
// background-attachment: fixed;
.fix-tabbar-header {
position: fixed;
@@ -1081,10 +1081,20 @@ page {
align-items: center;
justify-content: center;
padding: 0 0 20rpx 0;
.icon {
display: block;
width: 124rpx;
height: 38rpx;
.change-btn-content {
display: flex;
align-items: center;
justify-content: center;
color: #3D4CF0;
.icon {
display: block;
width: 40rpx;
height: 32rpx;
margin: 0 8rpx 0 0;
&.rotate {
animation: spin-icon 1s linear;
}
}
}
}
}
@@ -1335,3 +1345,12 @@ page {
margin: 24rpx 0 0 0;
}
}
@keyframes spin-icon {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}