apply-assistant-v3/root/home/components/AiApply.vue

<template>
  <div class="g_p_10 g_position_rela">
    <div class="g_bg_f g_p_10 g_radius_8">
      <u-line-progress class="g_position_abso" v-if="ailoading" style="position: fixed; width: 100%; top: -2px; left: 0px; z-index: 99999" active-color="#3578f6" :percent="defaultPercent" :round="false" height="8" :show-percent="false" inactiveColor="#f5f5f5"></u-line-progress>
      <gao-ChatSSEClient ref="sseTest" @onOpen="openCore" @onError="errorCore" @onMessage="messageCore" @onFinish="finishCore" />
      <div class="g_pb_8" v-if="currentImg" @click="currentImg = ''">
        <img :src="currentImg" class="g_w_48 g_h_48 g_radius_8" alt />
      </div>
      <textarea class data-type="desp" v-model="aitext" placeholder="粘贴老乡信息, 用AI识别 " placeholder-style="color:#999" :maxlength="-1" :style="{ width: '100%', 'min-height': true ? '104px' : '104px' }"></textarea>
      <div class>
        <view class="g_flex_row_end flex_center">
          <view class="iconfont icon-jia1 g_c_9 g_mr_8 g_fs_20 g_position_rela biggerSize" @click="chooseImgShow = true"></view>
          <view class="g_mr_8 g_w_72 g_fw_600">
            <g-button size="small_auto" type="none" height="24" :fontSize="12" @clickBtn="getClipboard" :btnText="(aitext ? '清空' : '粘贴') + '内容'"></g-button>
          </view>
          <view class="g_w_72 g_fw_600">
            <g-button size="small_auto" gradual="linear-gradient(-130deg, #5c6cf7, #9963f9)" icon="icon-aitubiao" type="gradual" height="24" :fontSize="12" btnText="AI识别" @clickBtn="getCoze"></g-button>
          </view>
        </view>
      </div>
    </div>
    <u-popup v-model="chooseImgShow" mode="bottom" z-index="999999" border-radius="12" :closeable="false" :mask-close-able="true" @close="chooseImgShow = false">
      <div class="g_text_c g_bg_f_5 g_fs_17">
        <div class="g_bg_f">
          <div class="g_c_3">
            <div class="g_p_16 g_border_e_t" @click="uploadPhoto('camera')">拍照</div>
            <div class="g_p_16 g_border_e_t" @click="uploadPhotoByChat">从会话上传</div>
            <div class="g_p_16 g_border_e_t" @click="uploadPhoto('album')">从相册选择</div>
          </div>
        </div>
        <div class="g_p_16 g_mt_10 g_bg_f" style="padding-bottom: calc(constant(safe-area-inset-bottom) + 16px); padding-bottom: calc(env(safe-area-inset-bottom) + 16px)" @click="chooseImgShow = false">取消</div>
      </div>
    </u-popup>
  </div>
</template>


<script>
export default {
  data() {
    return {
      aitext: '',
      timer: null,
      timer1: null,
      defaultPercent: 0,
      ailoading: false,
      aiConfig: {
        token: '',
        id: '',
      },
      chooseImgShow: false,
      currentImg: '',
    }
  },
  created() {
    this.getAiToken()
  },

  methods: {
    openCore(respons) {
      console.log('open sse：', respons)
    },
    errorCore(err) {
      console.log('error sse：', err)
    },
    messageCore(msg) {
      let that = this
      console.log('message sse：', msg)
      if (msg.event == 'Done') {
        clearInterval(that.timer)
        that.ailoading = false
      } else if (msg.event == 'Message') {
        let info = JSON.parse(msg.data)
        if (info.node_type == 'End') {
          this.setInfo(info)
        }
      }
    },
    getAiToken() {
      let that = this
      that.G.Get('/yishoudan/common/structure/getConfig', {}, (res) => {
        console.log('res', res)
        that.aiConfig = {
          token: res.token,
          id: res.workflowId,
        }
      })
    },
    uploadPhoto($sourceType) {
      let that = this
      console.log('$sourceType', $sourceType)
      uni.chooseImage({
        count: 1, //默认9
        sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
        sourceType: [$sourceType], //album 从相册选图，camera 使用相机
        success: function (res) {
          console.log('选取文件数据：', res)
          that.uploadCozeFile(res.tempFilePaths[0])
        },
      })
    },
    uploadCozeFile(tempFilePath) {
      let that = this
      that.chooseImgShow = false
      that.currentImg = tempFilePath
      uni.uploadFile({
        url: 'https://api.coze.cn/v1/files/upload',
        method: 'POST',
        filePath: tempFilePath,
        name: 'file',
        header: {
          Authorization: 'Bearer ' + that.aiConfig.token,
          'Content-Type': 'multipart/form-data',
        },
        formData: {},
        success: function (res) {
          console.log('文件', res)
          let data = JSON.parse(res.data)
          that.appCoze(data.data.id)
        },
        fail: function (err) {
          console.log(err)
        },
      })
    },
    uploadPhotoByChat() {
      let that = this
      uni.chooseMessageFile({
        count: 1,
        type: 'image',
        success(res) {
          console.log('resresresresresres', res)
          if (res.errMsg == 'chooseMessageFile:ok') {
            console.log('res', res)
            that.uploadCozeFile(res.tempFiles[0].path)
          }
        },
      })
    },
    getClipboard() {
      let that = this
      if (this.aitext) {
        this.aitext = ''
      } else {
        uni.getClipboardData({
          success(res) {
            console.log(res)
            if(res.data){
              that.aitext = res.data
            }else{
              uni.showToast({
                title: '请先复制内容',
                icon: 'none',
              })
            }
          },
          fail() {
            uni.showToast({
              title: '读取剪切板失败',
              icon: 'none',
            })
          },
        })
      }
    },
    setInfo(parsed) {
      let that = this
      const finalData = JSON.parse(parsed.content)
      if (finalData) {
        console.log('解析后的用户信息:', finalData)
        let info = {
          idCard: finalData.idcard,
          address: finalData.address,
          name: finalData.username,
          nation: finalData.nation,
          userName: finalData.username,
          sex: finalData.sex ? (finalData.sex == '男' ? 1 : 2) : '',
          age: finalData.age,
          tel: finalData.tel,
        }
        // uni.$emit('getTownsman', { info })
        that.$emit('outputInfo', info)
        // 将解析后的信息填充到表单中
        that.ailoading = false
      } else {
        that.ailoading = false
      }
      clearInterval(that.timer)
    },
    getCoze() {
      let that = this
      if (!that.aitext) {
        uni.showToast({
          title: '请粘贴内容',
          icon: 'none',
        })
        return false
      }

      this.appCoze()
    },
    appCoze(_id) {
      let that = this
      let parameters = {}
      // 重置内容
      that.ailoading = true
      that.defaultPercent = 3

      that.timer = setInterval(() => {
        that.defaultPercent = that.defaultPercent < 15 ? (that.defaultPercent = 15) : that.defaultPercent + 3
        // console.log('12313123123123123')
        if (that.defaultPercent >= 99) {
          clearInterval(that.timer)
        }
      }, 150)
      that.timer1 = setTimeout(() => {
        console.log('5687678678678678678')
        that.ailoading = false
        clearInterval(that.timer)
        // setLoading()
      }, 30000)
      if (_id) {
        parameters = {
          img: {
            file_id: _id,
          },
        }
      } else {
        parameters = {
          txt: that.aitext,
        }
      }
      this.$refs.sseTest.startChat({
        /**
         * 将它换成你的地址
         * 注意：
         * 如果使用 sse-server.js 要在手机端使用的话，请确保你的手机和电脑处在一个局域网下并且是正常的ip地址
         */
        url: 'https://api.coze.cn/v1/workflow/stream_run',
        // 请求头
        headers: {
          // that.aiConfig.token
          Authorization: 'Bearer ' + that.aiConfig.token,
          'Content-Type': 'application/json',
        },
        // 默认为 post
        method: 'post',
        body: {
          parameters,
          // workflow_id: that.aiConfig.id,
          workflow_id: '7520814905613664310',
          // workflow_id: '7492238568816656410',
        },
      })
    },
  },
}
</script>

<style>
</style>