|
|
|
|
@ -1,9 +1,35 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view>
|
|
|
|
|
<image class="background" src="/static/homepages/homes/ai_recognize_recipe/pictures/background.png"></image>
|
|
|
|
|
<image class="back_button" src="/static/homepages/homes/ai_recognize_recipe/pictures/button.png"></image>
|
|
|
|
|
<image class="back_button" @click="go_back_to_home" src="/static/homepages/homes/ai_recognize_recipe/pictures/button.png" ></image>
|
|
|
|
|
<image v-if="recipeImage" class="recipe-image" :src="recipeImage"></image>
|
|
|
|
|
<image class="generate_button" @click="generate()" src="/static/homepages/homes/ai_recognize_recipe/pictures/generate.png"></image>
|
|
|
|
|
<image class="generate_button" @click="generate" src="/static/homepages/homes/ai_recognize_recipe/pictures/generate.png"></image>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!--
|
|
|
|
|
|
|
|
|
|
<!– 生成成功的弹窗 –>
|
|
|
|
|
<view class="create_success" v-if="is_create_success===true">
|
|
|
|
|
<text class="ai_create_text">AI生成的结果是</text>
|
|
|
|
|
<!– 取消弹窗的按钮 –>
|
|
|
|
|
<image class="go_back" src="@/static/homepages/homes/ai_recognize_recipe/pictures/go_back_button.png"></image>
|
|
|
|
|
<view class="result" v-text="result"></view>
|
|
|
|
|
</view>
|
|
|
|
|
-->
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 生成成功的弹窗 -->
|
|
|
|
|
<view class="create_fail" v-if="is_create_success===0">
|
|
|
|
|
<text class="ai_create_text">AI生成的结果是</text>
|
|
|
|
|
<view class="result_area">
|
|
|
|
|
<text class="result">{{ result }}</text>
|
|
|
|
|
</view>
|
|
|
|
|
<image class="go_back" @click="go_back" src="@/static/homepages/homes/ai_recognize_recipe/pictures/go_back_button.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
|
|
|
|
|
</view>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
@ -11,80 +37,184 @@
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
recipeImage: null // 用于存储图片的本地路径
|
|
|
|
|
is_create_success: -1,//0是失败，1是成功，-1是什么都没有
|
|
|
|
|
|
|
|
|
|
can_generate_button_click: true, // 控制生成按钮是否可点击
|
|
|
|
|
recipeImage: null, // 用于存储图片的本地路径
|
|
|
|
|
result: '这个',
|
|
|
|
|
token:uni.getStorageSync("access_token"),
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
go_back_to_home() {
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: '/pages/homepages/homes/home/home'
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
generate() {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title: '正在生成...',
|
|
|
|
|
icon: 'loading',
|
|
|
|
|
duration: 12000, // Toast 显示时间为 2 秒
|
|
|
|
|
});
|
|
|
|
|
//向后端发送请求生成结果
|
|
|
|
|
const app= getApp();
|
|
|
|
|
uni.request({
|
|
|
|
|
url: app.globalData.fit_journey_ai_address+`/ai/recipe`, // 请替换为实际的后端接口URL
|
|
|
|
|
method: 'GET',
|
|
|
|
|
url: app.globalData.fit_journey_ai_address + '/ai/recipe/generate',
|
|
|
|
|
method: 'POST',
|
|
|
|
|
header: {
|
|
|
|
|
'content-type': 'application/x-www-form-urlencoded',
|
|
|
|
|
'Authorization':this.token
|
|
|
|
|
},
|
|
|
|
|
data: {
|
|
|
|
|
},
|
|
|
|
|
success: (res) => {
|
|
|
|
|
if (res.data && res.data.base64) {
|
|
|
|
|
this.saveBase64Image(res.data.base64);
|
|
|
|
|
if(res.data.code===200){
|
|
|
|
|
console.log("请求成功！请求数据是", res);
|
|
|
|
|
this.result = res.data.data;
|
|
|
|
|
}else {
|
|
|
|
|
uni.showToast({
|
|
|
|
|
title:"AI生成失败",
|
|
|
|
|
icon: 'none',
|
|
|
|
|
duration: 2000
|
|
|
|
|
})
|
|
|
|
|
this.result = res.data.msg;
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
},
|
|
|
|
|
saveBase64Image(base64Data) {
|
|
|
|
|
// 创建文件系统对象
|
|
|
|
|
plus.io.resolveLocalFileSystemURL(plus.io.convertLocalFileSystemURL('_doc/'), (entry) => {
|
|
|
|
|
// 生成文件名
|
|
|
|
|
const fileName = `_doc/${new Date().getTime()}.png`;
|
|
|
|
|
// 创建文件
|
|
|
|
|
entry.getFile(fileName, {create: true}, (fileEntry) => {
|
|
|
|
|
// 将base64转换为Blob对象
|
|
|
|
|
const arr = base64Data.split(',');
|
|
|
|
|
const mime = arr[0].match(/:(.*?);/)[1];
|
|
|
|
|
const bstr = atob(arr[1]);
|
|
|
|
|
let n = bstr.length;
|
|
|
|
|
const u8arr = new Uint8Array(n);
|
|
|
|
|
while (n--) {
|
|
|
|
|
u8arr[n] = bstr.charCodeAt(n);
|
|
|
|
|
error: (res) => {
|
|
|
|
|
console.log("请求失败！请求数据是", res);
|
|
|
|
|
}
|
|
|
|
|
const blob = new Blob([u8arr], {type: mime});
|
|
|
|
|
// 写入文件
|
|
|
|
|
fileEntry.createWriter((fileWriter) => {
|
|
|
|
|
fileWriter.write(blob);
|
|
|
|
|
// 更新图片路径
|
|
|
|
|
this.recipeImage = plus.io.convertLocalFileSystemURL(fileName);
|
|
|
|
|
}, (e) => {
|
|
|
|
|
console.log("Write file failed: " + e.message);
|
|
|
|
|
});
|
|
|
|
|
}, (e) => {
|
|
|
|
|
console.log("Get file failed: " + e.message);
|
|
|
|
|
});
|
|
|
|
|
}, (e) => {
|
|
|
|
|
console.log("Resolve file system failed: " + e.message);
|
|
|
|
|
});
|
|
|
|
|
//延迟显示结果
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.can_generate_button_click= false;
|
|
|
|
|
this.is_create_success = 0;
|
|
|
|
|
}, 12000);
|
|
|
|
|
/* //在20秒的时候清空result
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.result="";
|
|
|
|
|
}, 20000);*/
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
go_back(){
|
|
|
|
|
this.is_create_success = -1;
|
|
|
|
|
this.can_generate_button_click=true;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style lang="scss">
|
|
|
|
|
.background {
|
|
|
|
|
<style scoped lang="scss">
|
|
|
|
|
.background {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 100%;
|
|
|
|
|
top: 0%;
|
|
|
|
|
left: 0%;
|
|
|
|
|
}
|
|
|
|
|
.back_button {
|
|
|
|
|
width: 102%;
|
|
|
|
|
height: 102%;
|
|
|
|
|
top: 0;
|
|
|
|
|
left: -1%;
|
|
|
|
|
z-index: -1;
|
|
|
|
|
}
|
|
|
|
|
.back_button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 3%;
|
|
|
|
|
height: 3%;
|
|
|
|
|
top: 4%;
|
|
|
|
|
left: 7%;
|
|
|
|
|
}
|
|
|
|
|
.generate_button {
|
|
|
|
|
}
|
|
|
|
|
.generate_button {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 70%;
|
|
|
|
|
width: 90%;
|
|
|
|
|
height: 12%;
|
|
|
|
|
top: 85%;
|
|
|
|
|
left: 14%;
|
|
|
|
|
top: 87%;
|
|
|
|
|
left: 5%;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.create_fail{
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 80%;
|
|
|
|
|
width: 90%;
|
|
|
|
|
top: 7%;
|
|
|
|
|
left: 5%;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
background-color: #92a9c6;
|
|
|
|
|
z-index: 1;
|
|
|
|
|
.ai_create_text{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 100%;
|
|
|
|
|
height: 10%;
|
|
|
|
|
top: 5%;
|
|
|
|
|
left: 0;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
text-align: center;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
.go_back{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 80%;
|
|
|
|
|
height: 13%;
|
|
|
|
|
top: 88.5%;
|
|
|
|
|
left: 10%;
|
|
|
|
|
}
|
|
|
|
|
.recipe-image {
|
|
|
|
|
.result_area{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 80%;
|
|
|
|
|
height: 75%;
|
|
|
|
|
top: 12%;
|
|
|
|
|
left: 10%;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
background-color: #e4dfdf;
|
|
|
|
|
color: #000000;
|
|
|
|
|
.result{
|
|
|
|
|
position: relative;
|
|
|
|
|
left: 2%;
|
|
|
|
|
font-size: 16px; /* 设置文字大小 */
|
|
|
|
|
font-weight: bold; /* 文字加粗 */
|
|
|
|
|
line-height: 1.5; /* 行间距 */
|
|
|
|
|
padding: 10px; /* 添加内边距，使文字不贴边 */
|
|
|
|
|
word-break: break-word; /* 长单词换行 */
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.create_success{
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 80%;
|
|
|
|
|
width: 80%;
|
|
|
|
|
top: 10%;
|
|
|
|
|
left: 10%;
|
|
|
|
|
border-radius: 20px;
|
|
|
|
|
background-color: #2C405A;
|
|
|
|
|
z-index: 10;
|
|
|
|
|
border: 2px solid #ffffff;
|
|
|
|
|
!* .go_back{
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 10%;
|
|
|
|
|
height: 10%;
|
|
|
|
|
top: 5%;
|
|
|
|
|
left: 85%;
|
|
|
|
|
}
|
|
|
|
|
.ai_create_text{
|
|
|
|
|
z-index: 100;
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}*!
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
*/
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.recipe-image {
|
|
|
|
|
position: absolute;
|
|
|
|
|
width: 80%; // 根据实际需要调整宽度
|
|
|
|
|
height: auto; // 高度自适应
|
|
|
|
|
@ -92,5 +222,5 @@
|
|
|
|
|
left: 50%; // 水平居中
|
|
|
|
|
transform: translate(-50%, -50%); // 使用transform进行居中
|
|
|
|
|
z-index: 10; // 确保图片显示在最顶层
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
</style>
|
Gary
4 days ago
