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

aiChat/mixins/chatMixinsV2.js

@@ -416,10 +416,10 @@ export const chatMixinsV2 = {
         }
       })
       if (idx > -1) {
-        this.$set(this.chatMessageList[idx], 'changeIsRotate', true)
         if (this.chatMessageList[idx].changeIsRotate) {
           return
         }
+        this.$set(this.chatMessageList[idx], 'changeIsRotate', true)
       }
       let listKey = ''
       // 抽奖和订单查询没有换一换
@@ -457,6 +457,8 @@ export const chatMixinsV2 = {
             this.$set(this.chatMessageList[idx], 'changeIsRotate', false)
           }, 1000)
         }
+      }).catch(error => {
+        this.$set(this.chatMessageList[idx], 'changeIsRotate', false)
       })
     },
     productItemClickHandle(item) {

aiChat/views/index.vue

@@ -1,6 +1,9 @@
 <template>
   <view
-    :class="scrollTop > 0 ? 'page-scroll' : ''"
+    :class="{
+      'page-scroll': scrollTop > 0,
+      'new-chat': chatMessageListLength === 0
+    }"
     class="fix-tabbar-page"
   >
     <hx-navbar
@@ -771,7 +774,7 @@ export default {
     }
     .icon {
       display: flex;
-      width: 40rpx;
+      width: 32rpx;
       height: 32rpx;
       margin: 0 8rpx 0 0;
       &.rotate {

assets/css/aiChat.less

@@ -12,10 +12,14 @@ 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% calc(100vh - 160rpx);
+	// 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;
+	&.new-chat {
+		background-size: 100% calc(100vh - 160rpx);
+	  background-repeat: no-repeat;
+	}
 	.fix-tabbar-header {
 		position: fixed;
 		top: 0;
@@ -1086,9 +1090,10 @@ page {
 			align-items: center;
 			justify-content: center;
 			color: #3D4CF0;
+			font-size: 28rpx;
 			.icon {
 				display: block;
-				width: 40rpx;
+				width: 32rpx;
 				height: 32rpx;
 				margin: 0 8rpx 0 0;
 				&.rotate {
@@ -1351,6 +1356,6 @@ page {
 		transform: rotate(0deg);
 	}
 	100% {
-		transform: rotate(360deg);
+		transform: rotate(720deg);
 	}
 }