front/pages/homepages/user/bmi_information/bmi_information.vue

<template>
    <view>
        <image class="background"  src="/static/homepages/user/bmi_information/pictures/background.png"></image>
		<image class="back_button" @click="goto_user()" src="/static/homepages/user/bmi_information/pictures/button.png"></image>
		<image class="text_background_one" src="/static/homepages/user/bmi_information/pictures/text_background.png"></image>
		<image class="text_background_two" src="/static/homepages/user/bmi_information/pictures/text_background.png"></image>
		<image class="text_background_three" src="/static/homepages/user/bmi_information/pictures/text_background.png"></image>
		<image class="text_background_four" src="/static/homepages/user/bmi_information/pictures/text_background.png"></image>
		<image class="text_background_five" src="/static/homepages/user/bmi_information/pictures/text_background.png"></image>
		<image class="write_one" src="/static/homepages/user/bmi_information/pictures/write.png"></image>
		<image class="write_two" src="/static/homepages/user/bmi_information/pictures/write.png"></image>
		<image class="write_three" src="/static/homepages/user/bmi_information/pictures/write.png"></image>
		<image class="write_four" src="/static/homepages/user/bmi_information/pictures/write.png"></image>
		<image class="write_five" src="/static/homepages/user/bmi_information/pictures/write.png"></image>
		<form class="bmi_form">
			<input class="hight_input" name="hight" type="text" placeholder="身高" v-model="formData.height"/>
			<input class="weight_input" name="weight" type="text" placeholder="体重" v-model="formData.weight"/>
			<input class="chest_input" name="chest" type="text" placeholder="胸围" v-model="formData.chest"/>
			<input class="waist_input" name="waist" type="text" placeholder="腰围" v-model="formData.waist"/>
			<input class="buttock_input" name="buttock" type="text" placeholder="臀围" v-model="formData.buttock"/>
		</form>
		<image class="submit_button" @click="submit()" src="/static/homepages/user/bmi_information/pictures/submit_button.png"></image>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				formData: {
				    height: '',
				    weight: '',
				     chest: '',
				    waist: '',
				    buttock: ''
				  }
			};
        },
		methods:{
			navigateTo(page) {
			  uni.navigateTo({
			    url: page
			  });
			},
			
			goto_user(){
				this.navigateTo(`/pages/homepages/user/user/user`);
			},
			
			submit(){
				 // 这里替换成你的后端API端点
				const url = app.globalData.fit_journey_ai_address+`/bmi`;
				
			 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);
			   }
			  });
			}
		}
    }
</script>

<style lang="scss">
.background {
	position: absolute;
	width: 100%;
	height: 100%;
	top: 0%;
	left: 0%;
}
.back_button {
	position: absolute;
	width:8%;
	height: 5%;
	top: 6%;
	left: 7%;
}
.text_background_one{
	position: absolute;
	width: 80%;
	height: 7%;
	top: 32%;
	left: 10%;
}
.text_background_two{
	position: absolute;
	width: 80%;
	height: 7%;
	top: 40%;
	left: 10%;
}
.text_background_three{
	position: absolute;
	width: 80%;
	height: 7%;
	top: 48%;
	left: 10%;
}
.text_background_four{
	position: absolute;
	width: 80%;
	height: 7%;
	top: 56%;
	left: 10%;
}
.text_background_five{
	position: absolute;
	width: 80%;
	height: 7%;
	top: 64%;
	left: 10%;
}
.write_one{
	position: absolute;
	width: 4%;
	height: 2%;
	top: 34.5%;
	left: 13%;
}
.write_two{
	position: absolute;
	width: 4%;
	height: 2%;
	top: 42.5%;
	left: 13%;
}
.write_three{
	position: absolute;
	width: 4%;
	height: 2%;
	top: 50.5%;
	left: 13%;
}
.write_four{
	position: absolute;
	width: 4%;
	height: 2%;
	top: 58.5%;
	left: 13%;
}
.write_five{
	position: absolute;
	width: 4%;
	height: 2%;
	top: 66.5%;
	left: 13%;
}
.bmi_form{
.hight_input{
	position: absolute;
	width: 70%;
	height: 6%;
	top: 32.5%;
	left: 18%;
}
.weight_input{
	position: absolute;
	width: 70%;
	height: 6%;
	top: 40.5%;
	left: 18%;
}
.chest_input{
	position: absolute;
	width: 70%;
	height: 6%;
	top: 48.5%;
	left: 18%;
}
.waist_input{
	position: absolute;
	width: 70%;
	height: 6%;
	top: 56.5%;
	left: 18%;
}
.buttock_input{
	position: absolute;
	width: 70%;
	height: 6%;
	top: 64.5%;
	left: 18%;
}
}
.submit_button{
	position: absolute;
	width: 50%;
	height: 12%;
	top: 75%;
	left: 25%;
}
</style>