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

aiChat/mixins/chatMixinsV2.js

@@ -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',
+            name: '我要送礼',
-          text: '我要送礼',
+            icon: 'https://resource.xdd618.com/3/20260526/1779781836792_icon-50.png',
-          type: 'prompt',
+            navType: 'prompt',
-          prompt: '我要送礼，请给我推荐一些平台的礼品',
+            promptContent: '我要送礼，请给我推荐一些平台的礼品',
-          url: ''
+            url: '',
+            giftCardEnabled: 1,
+            display: true
         },
         {
-          icon: 'icon-51',
+            name: '订单查询',
-          text: '订单查询',
+            icon: 'https://resource.xdd618.com/3/20260526/1779781836793_icon-51.png',
-          type: 'prompt',
+            navType: 'prompt',
-          prompt: '帮我查询我的待发货、待收货订单信息',
+            promptContent: '帮我查询我的待发货、待收货订单信息',
-          url: ''
+            url: '',
+            giftCardEnabled: 0,
+            display: true
         },
         {
-          icon: 'icon-52',
+            name: '拍照识图',
-          text: '拍照识图',
+            icon: 'https://resource.xdd618.com/3/20260526/1779781836794_icon-52.png',
-          type: 'link',
+            navType: 'url',
-          prompt: '',
+            promptContent: '',
-          url: '/aiChat/views/imageRecognition'
+            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

@@ -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

@@ -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

@@ -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'"
+                  :src="webUrl + '/aiChat/logo-transition.png'"
-                  class="avatar"
+                  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,19 +621,174 @@ 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) {
+    if (addNewChat) {
-      console.log(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')
-      this.createNewHandle()
     }
   },
   methods: {
@@ -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;
+      width: 430rpx;
-      height: 404rpx;
+    }
+    .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

@@ -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;
+    }
+  }
+}