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',
				},
			});
		},
		ressetAitext() {
			this.aitext = "";
		},
	},
};
</script>

<style></style>