You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
137 lines
3.4 KiB
137 lines
3.4 KiB
<template>
|
|
<!-- 背景 -->
|
|
<view class="background">
|
|
|
|
<!-- 人物 -->
|
|
<image class="human" src="/static/information/boy_height/pictures/human.png"></image>
|
|
<!-- 滚动条 -->
|
|
<image class="roll" @click="go_to_roll()" src="/static/information/boy_height/pictures/roll.png"></image>
|
|
<!-- 按钮 跳转到目的的部分-->
|
|
<image class="button" @click="go_to_purpose()" src="/static/information/boy_height/pictures/button.png"></image>
|
|
<!-- 进度条 -->
|
|
<image class="progress" src="/static/information/boy_height/pictures/progress.png"></image>
|
|
<!-- 文本-->
|
|
<text class="text" @click="go_to_roll()">{{height}}</text>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data(){
|
|
return{
|
|
height:'',
|
|
token: uni.getStorageSync('access_token'),
|
|
};
|
|
},
|
|
onLoad(options){
|
|
this.height=options.height;
|
|
},
|
|
methods: {
|
|
|
|
|
|
go_to_purpose() {
|
|
const app = getApp();
|
|
console.log(app.globalData.token);
|
|
console.log(app.globalData.fit_journey_basic_address);
|
|
console.log("当前的身高是" + this.height);
|
|
// 转换 height 字符串为数字，去掉 "cm" 后缀
|
|
const numericHeight = parseFloat(this.height.replace('cm', '').trim());
|
|
console.log("本地存储的token是"+this.token)
|
|
// 向后端发送请求
|
|
uni.request({
|
|
url: app.globalData.fit_journey_basic_address + '/height/write_user_height',
|
|
method: 'POST',
|
|
header: {
|
|
'content-type': 'application/x-www-form-urlencoded',
|
|
'Authorization': this.token
|
|
},
|
|
data: {
|
|
height: numericHeight, // 发送数字类型
|
|
},
|
|
success: (res) => {
|
|
uni.showToast({
|
|
title: '提交成功',
|
|
icon: 'success',
|
|
})
|
|
console.log("请求成功！请求数据是", res);
|
|
// 如果成功则跳转到使用的目的界面
|
|
uni.navigateTo({
|
|
url: '/pages/information/purpose/purpose'
|
|
});
|
|
},
|
|
error: (res) => {
|
|
console.log("请求失败！请求数据是", res);
|
|
}
|
|
});
|
|
},
|
|
go_to_roll() {
|
|
uni.navigateTo({
|
|
url: '/pages/information/boy_height_end/boy_height_roll/boy_height_roll?height='+this.height,
|
|
})
|
|
},
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.background {
|
|
background-image: url("/static/information/boy_height/pictures/img.png");
|
|
background-size: cover;
|
|
background-position: center;
|
|
height: 100vh;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
position: relative;
|
|
}
|
|
|
|
|
|
.human {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 90%;
|
|
top:-10%;
|
|
object-fit: contain; /* 保持图片比例 */
|
|
}
|
|
|
|
.progress{
|
|
position: absolute;
|
|
width: 77%;
|
|
height: 7%;
|
|
object-fit: contain; /* 保持图片比例 */
|
|
opacity: 1;
|
|
top: 2%; /* 根据需要调整位置 */
|
|
}
|
|
|
|
/* Text 延迟显示 */
|
|
.roll {
|
|
position: absolute;
|
|
width: 77%;
|
|
height: 20%;
|
|
object-fit: contain; /* 保持图片比例 */
|
|
opacity: 1;
|
|
top: 55%; /* 根据需要调整位置 */
|
|
}
|
|
|
|
/* Button 延迟显示并加缩放特效，放在下方 */
|
|
.button {
|
|
position: absolute;
|
|
height: 13%;
|
|
width: 80%;
|
|
opacity: 1;
|
|
right: 10%; /* 距右边 10% */
|
|
bottom: 2%; /* 距底部 3.5% */
|
|
}
|
|
|
|
.text{
|
|
position: absolute;
|
|
text-align: center;
|
|
font-size: 1.5em;
|
|
width: 100%;
|
|
height: 20%;
|
|
top: 69%;
|
|
color:#ffffff;
|
|
}
|
|
</style> |