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

<template>
  <view
    :style="{ 'background-image': 'url(' + webUrl + '/aiChat/bg-05.png)' }"
    class="image-recognition-page"
  >
    <hx-navbar
      :back="true"
      :fixed="true"
      :statusBar="true"
      left-icon="arrowleft"
      color="#333"
      transparent="auto"
      barPlaceholder="hidden"
      title="云灵"
    />
    
    <view 
      class="main-content" 
      :style="{ 'padding-top': (44 + statusBarHeight) + 'px' }"
    >
      <!-- 拍照区域 -->
      <view class="camera-section" @click="takePhoto">
        <view class="dashed-border-box">
          <view class="icon-wrap">
            <image 
              :src="webUrl + '/aiChat/icon-55.png'" 
              class="camera-icon" 
              mode="widthFix"
            />
          </view>
          <view class="main-title">对准商品拍照</view>
          <view class="sub-tip">示例：特产/零食/茶叶/纪念品</view>
        </view>
      </view>
      
      <!-- 底部相册上传按钮 -->
      <view class="bottom-action">
        <button class="album-btn" @click="chooseImage">
          <image 
            :src="webUrl + '/aiChat/icon-56.png'" 
            class="upload-icon" 
            mode="widthFix"
          />
          <text>从相册上传图片进行识别</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script>
import { chatMixins } from '../mixins/chatMixins.js'
import { VUE_APP_API_URL } from '@/config'

export default {
  name: 'AiChatImageRecognitionPage',
  mixins: [chatMixins],
  data() {
    return {
    }
  },
  methods: {
    createdCallbak() {
      // 覆盖 mixins 中的 createdCallbak，避免触发默认逻辑
    },
    takePhoto() {
      if (this.loading) return
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['camera'],
        success: (res) => {
          this.handleUpload(res.tempFilePaths[0])
        }
      })
    },
    chooseImage() {
      if (this.loading) return
      uni.chooseImage({
        count: 1,
        sizeType: ['compressed'],
        sourceType: ['album'],
        success: (res) => {
          this.handleUpload(res.tempFilePaths[0])
        }
      })
    },
    handleUpload(filePath) {
      const _this = this
      uni.showLoading({ title: '识别中...' })
      _this.loading = true
      
      uni.uploadFile({
        url: `${VUE_APP_API_URL}/api/upload`,
        filePath: filePath,
        header: {
          Authorization: 'Bearer ' + (_this.token || '')
        },
        name: 'file',
        success: (uploadRes) => {
          const resData = JSON.parse(uploadRes.data)
          if (resData.link) {
            _this.performRecognition(resData.link)
          } else {
            uni.hideLoading()
            _this.loading = false
            _this.$toast('上传失败，请重试')
          }
        },
        fail: (err) => {
          console.log('Upload Error:', err)
          uni.hideLoading()
          _this.loading = false
          _this.$toast('网络异常，请重试')
        }
      })
    },
    performRecognition(imageUrl) {
      // 存储识别到的图片 URL，并返回上一页
      uni.setStorageSync('recognitionImage', imageUrl)
      uni.navigateTo({
        url: '/aiChat/views/imageRecognitionResult'
      })
      uni.hideLoading()
      this.loading = false
    }
  }
}
</script>

<style lang="scss" scoped>
.image-recognition-page {
  height: 100vh;
  background-size: 100% 100%;
  
  .main-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60rpx 40rpx;
    height: 100vh;
    box-sizing: border-box;
  }
  
  .camera-section {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 60rpx;
    
    .dashed-border-box {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      height: 600rpx;
      width: 100%;
      margin-top: 80rpx;
      border: 2rpx dashed #DCDFE6;
      border-radius: 24rpx;
      background-color: rgba(255, 255, 255, 0.5);
      
      .icon-wrap {
        width: 160rpx;
        height: 160rpx;
        border-radius: 50%;
        border: 6rpx solid #7A3DF1;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 40rpx;
        
        .camera-icon {
          width: 80rpx;
          height: 80rpx;
        }
      }
      
      .main-title {
        font-size: 36rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 20rpx;
      }
      
      .sub-tip {
        font-size: 28rpx;
        color: #999;
      }
    }
  }
  
  .bottom-action {
    width: 100%;
    padding-bottom: 60rpx;
    
    .album-btn {
      width: 100%;
      height: 100rpx;
      background: #3D4CF1;
      border-radius: 20rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #FFFFFF;
      font-size: 32rpx;
      border: none;
      box-shadow: 0 8rpx 20rpx rgba(61, 76, 241, 0.3);
      
      .upload-icon {
        width: 36rpx;
        height: 36rpx;
        margin-right: 16rpx;
      }
      
      &::after {
        border: none;
      }
      
      &:active {
        opacity: 0.8;
      }
    }
  }
}
</style>