Gary
19 hours ago
parent
5a1e37bc96
commit
d8d79bacc6
@ -1,96 +1,198 @@
|
||||
<template>
|
||||
<view>
|
||||
<image class="background" src="/static/homepages/homes/ai_recognize_plan/pictures/background.png"></image>
|
||||
<image class="back_button" src="/static/homepages/homes/ai_recognize_plan/pictures/button.png"></image>
|
||||
<image class="background" src="@/static/homepages/homes/ai_recognize_plan/pictures/background.png"></image>
|
||||
<image class="back_button" @click="go_back_to_home" src="@/static/homepages/homes/ai_recognize_plan/pictures/button.png"></image>
|
||||
<image v-if="planImage" class="plan-image" :src="planImage"></image>
|
||||
<image class="generate_button" @click="generate()" src="/static/homepages/homes/ai_recognize_plan/pictures/generate.png"></image>
|
||||
<image class="generate_button" @click="generate()" src="@/static/homepages/homes/ai_recognize_plan/pictures/generate.png"></image>
|
||||
</view>
|
||||
|
||||
<!-- 生成成功的弹窗 -->
|
||||
<view class="create_fail" v-if="is_create_success===1">
|
||||
<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>
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
planImage: null // 用于存储图片的本地路径
|
||||
planImage: null ,// 用于存储图片的本地路径
|
||||
is_create_success : -1,//-1表示显示 正数表示显示
|
||||
token: uni.getStorageSync("access_token"),
|
||||
result:""
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
generate() {
|
||||
uni.request({
|
||||
url: app.globalData.fit_journey_ai_address+`/ai/plan`, // 请替换为实际的后端接口URL
|
||||
method: 'GET',
|
||||
success: (res) => {
|
||||
if (res.data && res.data.base64) {
|
||||
this.saveBase64Image(res.data.base64);
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
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);
|
||||
}
|
||||
const blob = new Blob([u8arr], {type: mime});
|
||||
// 写入文件
|
||||
fileEntry.createWriter((fileWriter) => {
|
||||
fileWriter.write(blob);
|
||||
// 更新图片路径
|
||||
this.planImage = 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);
|
||||
});
|
||||
}
|
||||
go_back_to_home() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/homepages/homes/home/home'
|
||||
});
|
||||
},
|
||||
generate() {
|
||||
uni.showToast({
|
||||
title: '正在生成...',
|
||||
icon: 'loading',
|
||||
duration: 15000, // Toast 显示时间为 2 秒
|
||||
});
|
||||
//向后端发送请求生成结果
|
||||
const app= getApp();
|
||||
uni.request({
|
||||
url: app.globalData.fit_journey_ai_address + '/exercise_plan/ai/recipe/generate',
|
||||
method: 'POST',
|
||||
header: {
|
||||
'content-type': 'application/x-www-form-urlencoded',
|
||||
'Authorization':this.token
|
||||
},
|
||||
data: {
|
||||
},
|
||||
success: (res) => {
|
||||
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;
|
||||
}
|
||||
|
||||
},
|
||||
error: (res) => {
|
||||
console.log("请求失败！请求数据是", res);
|
||||
}
|
||||
});
|
||||
//延迟显示结果
|
||||
setTimeout(() => {
|
||||
this.is_create_success = 1;
|
||||
}, 15000);
|
||||
},
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
go_back(){
|
||||
this.is_create_success = -1;
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.background {
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
top: 0%;
|
||||
left: 0%;
|
||||
}
|
||||
.back_button {
|
||||
position: absolute;
|
||||
width: 3%;
|
||||
height: 3%;
|
||||
top: 4%;
|
||||
left: 7%;
|
||||
}
|
||||
.generate_button {
|
||||
position: absolute;
|
||||
width: 70%;
|
||||
height: 12%;
|
||||
top: 85%;
|
||||
left: 14%;
|
||||
}
|
||||
.plan-image {
|
||||
position: absolute;
|
||||
width: 80%; // 根据实际需要调整宽度
|
||||
height: auto; // 高度自适应
|
||||
top: 50%; // 根据实际需要调整垂直位置
|
||||
left: 50%; // 水平居中
|
||||
transform: translate(-50%, -50%); // 使用transform进行居中
|
||||
z-index: 10; // 确保图片显示在最顶层
|
||||
}
|
||||
.background {
|
||||
position: absolute;
|
||||
width: 102%;
|
||||
height: 102%;
|
||||
|
||||
left: -1%;
|
||||
}
|
||||
.back_button {
|
||||
position: absolute;
|
||||
width: 3%;
|
||||
height: 3%;
|
||||
top: 4%;
|
||||
left: 7%;
|
||||
}
|
||||
.generate_button {
|
||||
position: absolute;
|
||||
width: 90%;
|
||||
height: 12%;
|
||||
top: 87%;
|
||||
left: 5%;
|
||||
}
|
||||
.plan-image {
|
||||
position: absolute;
|
||||
width: 80%; // 根据实际需要调整宽度
|
||||
height: auto; // 高度自适应
|
||||
top: 50%; // 根据实际需要调整垂直位置
|
||||
left: 50%; // 水平居中
|
||||
transform: translate(-50%, -50%); // 使用transform进行居中
|
||||
z-index: 10; // 确保图片显示在最顶层
|
||||
}
|
||||
|
||||
.create_fail{
|
||||
position: absolute;
|
||||
height: 80%;
|
||||
width: 90%;
|
||||
top: 7%;
|
||||
left: 5%;
|
||||
border-radius: 20px;
|
||||
background-color: #b694d1;
|
||||
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%;
|
||||
}
|
||||
.result_area{
|
||||
position: absolute;
|
||||
width: 80%;
|
||||
height: 75%;
|
||||
top: 12%;
|
||||
left: 10%;
|
||||
border-radius: 20px;
|
||||
background-color: #cec1e4;
|
||||
color: #000000;
|
||||
.result{
|
||||
position: relative;
|
||||
left: 2%;
|
||||
font-size: 16px; /* 设置文字大小 */
|
||||
font-weight: bold; /* 文字加粗 */
|
||||
line-height: 1.5; /* 行间距 */
|
||||
padding: 10px; /* 添加内边距，使文字不贴边 */
|
||||
word-break: break-word; /* 长单词换行 */
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
</style>
|
||||
|
After Width: | Height: | Size: 139 KiB |
Loading…
Reference in new issue