xdd-uniapp-new/aiChat/views/imageRecognitionResult.vue

<template>
  <view class="image-recognition-result-page">
    <view
      class="page-body"
    >
      <view class="header">
        <view
          class="header-bg"
          :style="{ 'background-image': imageUrl ? `url(${imageUrl})` : '' }"
        />
        <view class="header-mask" />
        <view class="scan-wrap">
          <image
            v-if="imageUrl"
            :src="imageUrl"
            class="scan-image"
            mode="aspectFill"
          />
          <view class="corner tl" />
          <view class="corner tr" />
          <view class="corner bl" />
          <view class="corner br" />
        </view>
      </view>

      <view class="sheet">
        <view class="sheet-thumb-row">
          <image
            v-if="imageUrl && confidenceFlag"
            :src="imageUrl"
            class="sheet-thumb"
            mode="aspectFill"
            lazy-load
          />
          <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"
            :key="index"
            class="goods-card"
            @click="goGoods(item)"
          >
            <image
              :src="item.img"
              class="goods-img"
              mode="aspectFill"
              lazy-load
            />
            <view class="goods-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>
              </view>
              <image
                :src="webUrl + '/home/icon-cart.png'"
                class="cart-btn"
                mode="aspectFit"
                lazy-load
              />
            </view>
            <view class="goods-desc">
              相似度99%
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</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: [],
      confidenceFlag: true
    }
  },
  onLoad(options) {
    const urlFromQuery = options.imageUrl || ''
    const urlFromStorage = uni.getStorageSync('recognitionImage') || ''
    this.imageUrl = urlFromQuery || urlFromStorage || ''
    if (urlFromStorage) {
      // uni.removeStorageSync('recognitionImage')
    }
    this.init()
  },
  methods: {
    init() {
      this.loaded = false
      getAnalyzeByImageV3({
        imageUrl: this.imageUrl
      }).then(res => {
        const { data, success } = res
        if (success) {
          this.goodsList = data.cards || []
          this.confidenceFlag = data.success
        }
      }).finally(() => {
        this.loaded = true
      })
    },
    goGoods(item) {
      if (!item || !item.id) return
      uni.navigateTo({
        url: `/pages/shop/GoodsCon/index?id=${item.id}`
      })
    },
    addToCart() {
    }
  }
}
</script>

<style lang="scss" scoped>
.image-recognition-result-page {
  min-height: 100vh;
  background: #fff;

  .page-body {
    min-height: 100vh;
  }

  .header {
    position: relative;
    height: 480rpx;
    overflow: hidden;
  }

  .header-bg {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #DDE6FF;
    background-size: cover;
    background-position: center;
    filter: blur(18rpx);
    transform: scale(1.2);
  }

  .header-mask {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.18);
  }

  .scan-wrap {
    position: absolute;
    left: 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);
  }

  .scan-image {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
    transform: scale(0.8);
  }

  .corner {
    position: absolute;
    width: 44rpx;
    height: 44rpx;
    border: 6rpx solid rgba(255, 255, 255, 0.95);
  }

  .corner.tl {
    left: 16rpx;
    top: 16rpx;
    border-right: 0;
    border-bottom: 0;
  }
  .corner.tr {
    right: 16rpx;
    top: 16rpx;
    border-left: 0;
    border-bottom: 0;
  }
  .corner.bl {
    left: 16rpx;
    bottom: 16rpx;
    border-right: 0;
    border-top: 0;
  }
  .corner.br {
    right: 16rpx;
    bottom: 16rpx;
    border-left: 0;
    border-top: 0;
  }

  .sheet {
    position: relative;
    margin-top: -70rpx;
    background: #FFFFFF;
    border-top-left-radius: 42rpx;
    border-top-right-radius: 42rpx;
    padding-bottom: calc(env(safe-area-inset-bottom) + 28rpx);
  }

  .sheet-thumb-row {
    padding: 28rpx 0 18rpx 0;
    display: flex;
    justify-content: center;
  }

  .sheet-thumb {
    width: 100rpx;
    height: 100rpx;
    border-radius: 18rpx;
    display: block;
    box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.12);
  }

  .sheet-divider {
    height: 2rpx;
    background: #EDEDED;
    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;
    flex-wrap: wrap;
    justify-content: space-between;
  }

  .goods-card {
    width: 344rpx;
    background: #FFFFFF;
    border-radius: 22rpx;
    overflow: hidden;
    margin-bottom: 22rpx;
    box-shadow: 0 10rpx 24rpx rgba(0, 0, 0, 0.06);
  }

  .goods-img {
    width: 344rpx;
    height: 344rpx;
    display: block;
  }

  .goods-title {
    padding: 14rpx 14rpx 0 14rpx;
    font-size: 28rpx;
    line-height: 38rpx;
    color: #333;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    min-height: 76rpx;
  }

  .goods-price-row {
    padding: 10rpx 14rpx 16rpx 14rpx;
    display: flex;
    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;
    align-items: flex-end;
  }

  .price-symbol {
    font-size: 26rpx;
    color: #C52733;
    line-height: 1;
    margin-right: 2rpx;
  }

  .price-val {
    font-size: 40rpx;
    font-weight: bold;
    color: #C52733;
    line-height: 1;
  }

  .origin-price {
    font-size: 24rpx;
    color: #999;
    line-height: 1;
    margin-left: 12rpx;
    text-decoration: line-through;
  }

  .cart-btn {
    width: 52rpx;
    height: 52rpx;
    display: block;
  }
}
</style>