|
|
<template>
|
|
|
<view class="background">
|
|
|
<!-- human 图片，带有渐变效果 -->
|
|
|
<image
|
|
|
class="human"
|
|
|
:class="{ 'fade-in': isHumanVisible }"
|
|
|
src="/static/information/sex/pictures/human.png"
|
|
|
></image>
|
|
|
|
|
|
<!-- 男生按钮 -->
|
|
|
<image
|
|
|
class="boy_image"
|
|
|
@click="clickBoyImage"
|
|
|
v-if="!isBoySelected"
|
|
|
:class="{ 'slide-in-left': !isBoySelected }"
|
|
|
src="/static/information/sex/pictures/boy.png"
|
|
|
></image>
|
|
|
<image
|
|
|
class="boy_image"
|
|
|
@click="clickBoyImage"
|
|
|
v-else
|
|
|
:class="{ 'slide-in-left': !isBoySelected }"
|
|
|
src="/static/information/sex/pictures/shift_boy.png"
|
|
|
></image>
|
|
|
|
|
|
<!-- 女生按钮 -->
|
|
|
<image
|
|
|
class="girl_image"
|
|
|
@click="clickGirlImage"
|
|
|
v-if="!isGirlSelected"
|
|
|
:class="{ 'slide-in-right': !isGirlSelected }"
|
|
|
src="/static/information/sex/pictures/girl.png"
|
|
|
></image>
|
|
|
<image
|
|
|
class="girl_image"
|
|
|
@click="clickGirlImage"
|
|
|
v-else
|
|
|
:class="{ 'slide-in-right': !isGirlSelected }"
|
|
|
src="/static/information/sex/pictures/shift_girl.png"
|
|
|
></image>
|
|
|
|
|
|
<!-- 底部下一步按钮 -->
|
|
|
<image
|
|
|
class="button"
|
|
|
@click="goToNextPage"
|
|
|
src="/static/information/sex/pictures/button.png"
|
|
|
></image>
|
|
|
</view>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
export default {
|
|
|
data() {
|
|
|
return {
|
|
|
isBoySelected: false,
|
|
|
isGirlSelected: false,
|
|
|
isHumanVisible: false, // 控制 human 图片显示
|
|
|
sex:-1,//性别 用1表示男 0表示女
|
|
|
token:uni.getStorageSync("access_token")
|
|
|
|
|
|
};
|
|
|
},
|
|
|
mounted() {
|
|
|
const app = getApp();
|
|
|
console.log('Token:', app.globalData.token);
|
|
|
console.log('Address:', app.globalData.fit_journey_basic_address);
|
|
|
// 页面加载时延时显示 human 图片
|
|
|
setTimeout(() => {
|
|
|
this.isHumanVisible = true;
|
|
|
}, 100); // 延迟 100ms 开始渐变，可以根据需求调整
|
|
|
},
|
|
|
methods: {
|
|
|
|
|
|
goToNextPage() {
|
|
|
console.log('调用函数成功！'); // 确认方法被调用
|
|
|
// 获取全局变量
|
|
|
const app = getApp();
|
|
|
console.log('传递的token是:',this.token); // 打印 Token
|
|
|
console.log('后端的地址是', app.globalData.fit_journey_basic_address); // 打印地址
|
|
|
|
|
|
uni.request({
|
|
|
url: app.globalData.fit_journey_basic_address + '/sex/write_user_sex',
|
|
|
method: 'POST',
|
|
|
header: {
|
|
|
'content-type': 'application/x-www-form-urlencoded',
|
|
|
'Authorization': this.token
|
|
|
},
|
|
|
data: {
|
|
|
sex: this.sex
|
|
|
},
|
|
|
|
|
|
success: (res) => {
|
|
|
console.log('Response:', res.data); // 打印后端返回的数据
|
|
|
uni.showToast({
|
|
|
title: '提交成功',
|
|
|
icon: 'success',
|
|
|
})
|
|
|
console.log("开始跳转页面");
|
|
|
// 仅在请求成功后进行页面跳转
|
|
|
const targetPage = this.isBoySelected
|
|
|
? "/pages/information/boy_weight_start/boy_weight_start"
|
|
|
: "/pages/information/girl_weight_start/girl_weight_start";
|
|
|
uni.navigateTo({
|
|
|
url: targetPage,
|
|
|
});
|
|
|
},
|
|
|
fail: (err) => {
|
|
|
console.error('请求失败:', err); // 打印请求失败的错误信息
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
|
|
|
|
|
|
|
|
|
clickBoyImage() {
|
|
|
this.sex=1;//表示是男生
|
|
|
this.isBoySelected = true;
|
|
|
this.isGirlSelected = false;
|
|
|
},
|
|
|
clickGirlImage() {
|
|
|
this.sex=0;//表示是女生
|
|
|
this.isGirlSelected = true;
|
|
|
this.isBoySelected = false;
|
|
|
},
|
|
|
},
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss">
|
|
|
@import "@/static/information/sex/css/sex.css";
|
|
|
|
|
|
/* 渐变效果样式 */
|
|
|
.human {
|
|
|
opacity: 0; /* 初始透明 */
|
|
|
transition: opacity 1.5s ease-in-out; /* 渐变持续时间和效果 */
|
|
|
}
|
|
|
.fade-in {
|
|
|
opacity: 1; /* 最终完全显示 */
|
|
|
}
|
|
|
</style>
|
