|
|
|
|
@ -1,94 +0,0 @@
|
|
|
|
|
<template>
|
|
|
|
|
<view class="container">
|
|
|
|
|
<picker-view @change="onPickerChange" class="picker-view">
|
|
|
|
|
<picker-view-column>
|
|
|
|
|
<view v-for="(item, index) in options" :key="index" class="item">
|
|
|
|
|
{{ item }}
|
|
|
|
|
</view>
|
|
|
|
|
</picker-view-column>
|
|
|
|
|
</picker-view>
|
|
|
|
|
|
|
|
|
|
<image class="button" @click="go_to_height" src="/static/information/boy_height/pictures/button.png"></image>
|
|
|
|
|
</view>
|
|
|
|
|
<!-- TODO:修改 -->
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// TODO:修改
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
options: this.generateHeightOptions(150, 200),
|
|
|
|
|
pickerValue: [15], // 默认选中项的索引
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
generateHeightOptions(start, end) {
|
|
|
|
|
const options = [];
|
|
|
|
|
for (let i = start; i <= end; i++) {
|
|
|
|
|
options.push(`${i} cm`);
|
|
|
|
|
}
|
|
|
|
|
return options;
|
|
|
|
|
},
|
|
|
|
|
onPickerChange(event) {
|
|
|
|
|
this.pickerValue = event.detail.value; // 更新选中的索引
|
|
|
|
|
},
|
|
|
|
|
navigateTo(page) {
|
|
|
|
|
uni.navigateTo({
|
|
|
|
|
url: page
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
|
|
|
|
|
go_to_height() {
|
|
|
|
|
const selectedValue = this.options[this.pickerValue[0]]; // 获取选中的值
|
|
|
|
|
this.navigateTo(`/pages/information/boy_height_end/boy_height_end?height=${selectedValue}`); // 跳转到 boy_height_end，并传递选中值
|
|
|
|
|
},
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
<style scoped>
|
|
|
|
|
.container {
|
|
|
|
|
display: flex;
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
align-items: center; /* 水平居中 */
|
|
|
|
|
justify-content: center; /* 垂直居中 */
|
|
|
|
|
height: 100vh; /* 使容器充满整个视口 */
|
|
|
|
|
padding: 20px;
|
|
|
|
|
background-image: url("/static/information/boy_height/pictures/bkg_roll.png");
|
|
|
|
|
background-size: cover;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.picker-view {
|
|
|
|
|
height: 200px; /* 设置 picker-view 的高度 */
|
|
|
|
|
width: 100%; /* 宽度自适应 */
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.item {
|
|
|
|
|
display: flex;
|
|
|
|
|
align-items: center; /* 垂直居中每个选项 */
|
|
|
|
|
justify-content: center; /* 水平居中每个选项 */
|
|
|
|
|
height: 40px; /* 每个选项的高度 */
|
|
|
|
|
color: #ffffff;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.button {
|
|
|
|
|
margin-top: 10px; /* 按钮与选择器之间的间距 */
|
|
|
|
|
position: absolute;
|
|
|
|
|
height: 13%;
|
|
|
|
|
width: 80%;
|
|
|
|
|
right: 10%; /* 距右边 10% */
|
|
|
|
|
bottom: 2%; /* 距底部 3.5% */
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
