front/pages/homepages/homes/ai_recognize_plan/ai_recognize_plan.vue

<template>
	<view>
		<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>
	</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 ,// 用于存储图片的本地路径
        is_create_success : -1,//-1表示显示 正数表示显示
        token: uni.getStorageSync("access_token"),
        result:""
			};
		},
		methods: {
      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: 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>