front/pages/homepages/user/exercise_plans/exercise_plans.vue

<template>
    <view>
        <image class="background"  src="/static/homepages/user/exercise_plans/pictures/background.png"></image>
		<image class="back_button" src="/static/homepages/user/exercise_plans/pictures/button.png"></image>
		<text class="date" style="color: black;">{{todayDate}}</text>
		<image class="text_background_one" src="/static/homepages/user/exercise_plans/pictures/text_background.png"></image>
		<image class="text_background_two" src="/static/homepages/user/exercise_plans/pictures/text_background.png"></image>
		<image class="text_background_three" src="/static/homepages/user/exercise_plans/pictures/text_background.png"></image>
		<image class="write_one" src="/static/homepages/user/exercise_plans/pictures/write.png"></image>
		<image class="write_two" src="/static/homepages/user/exercise_plans/pictures/write.png"></image>
		<image class="write_three" src="/static/homepages/user/exercise_plans/pictures/write.png"></image>
		<form class="bmi_form">
			 <input class="sport_input" v-model="formData.sport" type="text" placeholder="运动项目"/>
			<input class="location_input" v-model="formData.location" type="text" placeholder="运动地点"/>
			 <input class="time_input" v-model="formData.time" type="text" placeholder="运动时间"/>
		</form>
		<image class="submit_button" @click="submit()" src="/static/homepages/user/exercise_plans/pictures/submit_button.png"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				 todayDate:'',// 调用函数获取今日日期
				  formData: {
				 sport: '',
				 location: '',
				   time: ''
			 }
			};
        },
		methods:{
			submit(){
				 // 这里替换成你的后端API端点
				const url = app.globalData.fit_journey_ai_address+`/exercise`;
				
				  uni.request({
				  url: url,
				 method: 'POST',
			    data: this.formData,
				   success: (res) => {
				      // 处理成功响应
				        console.log('Data sent successfully:', res.data);
				     },
				     fail: (err) => {
				   // 处理失败响应
				       console.error('Failed to send data:', err);
				      }
				 });
			},
			//todo 没成功显示日期！！
			getTodayDateString() {
			      const today = new Date();
			      const year = today.getFullYear();
			      const month = today.getMonth() + 1;
			      const day = today.getDate();
			      const monthString = month < 10 ? '0' + month : month;
			      const dayString = day < 10 ? '0' + day : day;
			      return `${year}-${monthString}-${dayString}`;
		},
		created(){
		     this.todayDate = this.getTodayDateString(); // 在组件创建时设置日期
			 console.log('Today\'s date:', this.todayDate); // 打印日期以检查其值
					
		}
    },
	}
</script>

<style lang="scss">
.background {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
}
.back_button {
	position: absolute;
	width:9%;
	height: 5%;
	top: 6%;
	left: 7%;
}
.date{
	position: absolute;
	width:40%;
	height: 5%;
	top: 20%;
	left: 20%;
	 display: block; /* 确保是块级元素 */
    visibility: visible; /* 确保可见 */
}
.text_background_one{
	position: absolute;
	width: 80%;
	height: 7%;
	top: 32%;
	left: 10%;
}
.text_background_two{
	position: absolute;
	width: 80%;
	height: 7%;
	top: 42%;
	left: 10%;
}
.text_background_three{
	position: absolute;
	width: 80%;
	height: 7%;
	top: 52%;
	left: 10%;
}
.write_one{
	position: absolute;
	width: 7%;
	height: 3%;	
	top: 34.5%;
	left: 12%;	
}
.write_two{
	position: absolute;
	width: 7%;
	height: 3%;	
	top: 44.5%;
	left: 12%;	
}
.write_three{
	position: absolute;
	width: 7%;
	height: 3%;	
	top: 54.5%;
	left: 12%;	
}
.sport_input{
	position: absolute;
	width: 80%;
	height: 3%;	
	top: 34.2%;
	left: 19%;	
}
.location_input{
	position: absolute;
	width: 80%;
	height: 3%;	
	top: 44.2%;
	left: 19%;	
}
.time_input{
	position: absolute;
	width: 80%;
	height: 3%;	
	top: 54.2%;
	left: 19%;	
}
.submit_button{
	position: absolute;
	width: 50%;
	height: 12%;
	top: 64%;
	left: 24%;	
}
</style>