front/pages/homepages/homes/ai_recognize_recipe/ai_recognize_recipe.vue

<template>
	<view>
		<image class="background" src="/static/homepages/homes/ai_recognize_recipe/pictures/background.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>


<!--

    &lt;!&ndash;   生成成功的弹窗 &ndash;&gt;
    <view class="create_success" v-if="is_create_success===true">
      <text class="ai_create_text">AI生成的结果是</text>
      &lt;!&ndash;    取消弹窗的按钮  &ndash;&gt;
      <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>

<script>
	export default {
		data() {
			return {
        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/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.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 scoped lang="scss">
.background {
  position: absolute;
  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 {
  position: absolute;
  width: 90%;
  height: 12%;
  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%;
  }
  .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; // 高度自适应
  top: 50%; // 根据实际需要调整垂直位置
  left: 50%; // 水平居中
  transform: translate(-50%, -50%); // 使用transform进行居中
  z-index: 10; // 确保图片显示在最顶层
}
</style>