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

aiChat/mixins/chatMixinsV2.js

@@ -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) => {
-          this.chatMessageList.map((item, index) => {
             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

@@ -320,12 +320,17 @@
                   "
                   class="change-btn"
                 >
-                  <image
+                  <view class="change-btn-content" @click="analyzeKeywordsChangeHandle(item.conversationId, item)">
-                    :src="webUrl + '/aiChat/icon-change.png'"
+                    <image
-                    class="icon"
+                      :src="webUrl + '/aiChat/icon-53.png'"
-                    mode="widthFix"
+                      :class="{
-                    @click="analyzeKeywordsChangeHandle(item.conversationId, item)"
+                        '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

@@ -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
+                  <view class="change-btn-content" @click="analyzeKeywordsChangeHandle(item.conversationId, item)">
-                    :src="webUrl + '/aiChat/icon-change.png'"
+                    <image
-                    class="icon"
+                      :src="webUrl + '/aiChat/icon-53.png'"
-                    mode="widthFix"
+                      :class="{
-                    @click="analyzeKeywordsChangeHandle(item.conversationId, item)"
+                        '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

@@ -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 {
+		.change-btn-content {
-			display: block;
+			display: flex;
-			width: 124rpx;
+			align-items: center;
-			height: 38rpx;
+			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);
+	}
+}