Refactor(云灵AI):以图搜索接口对接

aiChat/views/imageRecognition.vue

@@ -116,7 +116,7 @@ export default {
       })
     },
     performRecognition(imageUrl) {
-      // 存储识别到的图片 URL，并返回上一页
+      // 存储识别到的图片URL
       uni.setStorageSync('recognitionImage', imageUrl)
       uni.navigateTo({
         url: '/aiChat/views/imageRecognitionResult'

aiChat/views/imageRecognitionResult.vue

@@ -1,18 +1,7 @@
 <template>
   <view class="image-recognition-result-page">
-    <hx-navbar
-      :back="true"
-      :fixed="true"
-      :statusBar="true"
-      left-icon="arrowleft"
-      color="#333"
-      transparent="auto"
-      barPlaceholder="hidden"
-      title="识别结果"
-    />
     <view
       class="page-body"
-      :style="{ 'padding-top': (44 + statusBarHeight) + 'px' }"
     >
       <view class="header">
         <view
@@ -37,14 +26,17 @@
       <view class="sheet">
         <view class="sheet-thumb-row">
           <image
-            v-if="imageUrl"
+            v-if="imageUrl && confidence > 0"
             :src="imageUrl"
             class="sheet-thumb"
             mode="aspectFill"
           />
+          <view v-else class="empty-state">
+            <view class="empty-text">未识别到物品，请重新尝试</view>
+            <view class="empty-title">为你推荐</view>
+          </view>
         </view>
         <view class="sheet-divider" />
-
         <view class="goods-grid">
           <view
             v-for="(item, index) in goodsList"
@@ -58,19 +50,17 @@
               mode="aspectFill"
             />
             <view class="goods-title">
-              {{ item.title }}
+              {{ item.name }}
             </view>
             <view class="goods-price-row">
               <view class="price-left">
                 <text class="price-symbol">￥</text>
                 <text class="price-val">{{ item.price }}</text>
-                <text v-if="item.originPrice" class="origin-price">￥{{ item.originPrice }}</text>
               </view>
               <image
                 :src="webUrl + '/home/icon-cart.png'"
                 class="cart-btn"
                 mode="aspectFit"
-                @click.stop="addToCart(item)"
               />
             </view>
           </view>
@@ -81,71 +71,50 @@
 </template>
 
 <script>
+import { getAnalyzeByImageV3 } from '@/api/chat'
+import Recommend from '@/components/Recommend'
+
 export default {
   name: 'AiChatImageRecognitionResultPage',
+  components: {
+    Recommend
+  },
   data() {
     return {
       webUrl: this.$VUE_APP_RESOURCES_URL,
       statusBarHeight: 20,
       imageUrl: '',
-      goodsList: []
+      goodsList: [],
+      confidence: 0
     }
   },
   onLoad(options) {
-    this.initSystemInfo()
     const urlFromQuery = options.imageUrl || ''
     const urlFromStorage = uni.getStorageSync('recognitionImage') || ''
     this.imageUrl = urlFromQuery || urlFromStorage || ''
     if (urlFromStorage) {
-      uni.removeStorageSync('recognitionImage')
+      // uni.removeStorageSync('recognitionImage')
     }
-    this.goodsList = this.buildMockGoods(this.imageUrl)
+    this.init()
   },
   methods: {
-    initSystemInfo() {
-      uni.getSystemInfo({
-        success: (e) => {
-          this.statusBarHeight = e.statusBarHeight || 20
+    init() {
+      this.loaded = false
+      getAnalyzeByImageV3({
+        imageUrl: this.imageUrl
+      }).then(res => {
+        const { data, success } = res
+        if (success) {
+          this.goodsList = data.cards || []
         }
+      }).finally(() => {
+        this.loaded = true
       })
     },
-    buildMockGoods(fallbackImg) {
-      const img = fallbackImg || (this.webUrl + '/home/no-data-bg.png')
-      return [
-        {
-          id: 0,
-          img,
-          title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
-          price: '39.8',
-          originPrice: '40.00'
-        },
-        {
-          id: 1,
-          img,
-          title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
-          price: '39.8',
-          originPrice: '40.00'
-        },
-        {
-          id: 2,
-          img,
-          title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
-          price: '39.8',
-          originPrice: '40.00'
-        },
-        {
-          id: 3,
-          img,
-          title: '西双版纳独有酸蚀蜂种一年一采 不一样的美味',
-          price: '39.8',
-          originPrice: '40.00'
-        }
-      ]
-    },
     goGoods(item) {
-      if (!item || !item.productId) return
+      if (!item || !item.id) return
       uni.navigateTo({
-        url: `/pages/shop/GoodsCon/index?id=${item.productId}`
+        url: `/pages/shop/GoodsCon/index?id=${item.id}`
       })
     },
     addToCart() {
@@ -165,7 +134,7 @@ export default {
 
   .header {
     position: relative;
-    height: 520rpx;
+    height: 480rpx;
     overflow: hidden;
   }
 
@@ -194,19 +163,21 @@ export default {
   .scan-wrap {
     position: absolute;
     left: 50%;
-    top: 50%;
+    top: 45%;
     width: 320rpx;
     height: 320rpx;
     transform: translate(-50%, -52%);
     border-radius: 24rpx;
     overflow: hidden;
-    box-shadow: 0 18rpx 48rpx rgba(0, 0, 0, 0.18);
+    // box-shadow: 0 18rpx 48rpx rgba(0, 0, 0, 0.18);
   }
 
   .scan-image {
+    display: block;
     width: 100%;
     height: 100%;
-    display: block;
+    border-radius: 12rpx;
+    transform: scale(0.8);
   }
 
   .corner {
@@ -214,7 +185,6 @@ export default {
     width: 44rpx;
     height: 44rpx;
     border: 6rpx solid rgba(255, 255, 255, 0.95);
-    border-radius: 10rpx;
   }
 
   .corner.tl {
@@ -271,6 +241,22 @@ export default {
     margin: 0 32rpx;
   }
 
+  .empty-state {
+    text-align: center;
+  }
+
+  .empty-text {
+    font-size: 28rpx;
+    color: #999;
+    margin-bottom: 20rpx;
+  }
+  .empty-title {
+    font-size: 32rpx;
+    font-weight: bold;
+    color: #333;
+    margin-bottom: 20rpx;
+  }
+
   .goods-grid {
     padding: 28rpx 24rpx 0 24rpx;
     display: flex;

api/chat/index.js

@@ -54,3 +54,8 @@ export function getCompletionsV3(params) {
 export function getAnalyzeKeywordsChangeV3(data) {
   return request.post('/v1/chat/goods/refresh', data, { login: true })
 }
+
+// 以图搜索商品
+export function getAnalyzeByImageV3(data) {
+  return request.post('/v1/chat/image/recognition', data, { login: true })
+}

pages.json

@@ -909,9 +909,7 @@
         {
           "path": "views/imageRecognitionResult",
           "style": {
-            "navigationBarTitleText": "识别结果",
-            "navigationStyle": "custom",
-            "navigationBarTextStyle": "white"
+            "navigationBarTitleText": "云灵"
           }
         }
       ]