front/pages/information/sex/sex.vue

<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>