meida_front/pages/base-info/index.vue

<template>
  <s-layout :bgStyle="{ color: '#FFF' }" title="">
    <view class="base-info">
      <view class="title">
        <view>Face++ AI美学检测</view>
        <!-- <view>便于AI算法优化</view> -->
      </view>
      <view class="sub-title">我们会保障您的个人信息安全，请放心填写</view>

      <view class="baseinfo">基本信息</view>

      <view class="form">
        <view class="form-item">
          <view class="label">性别</view>

          <view class="sex-group">
            <view :class="{ active: form.sex === '男' }" class="sex-btn" @tap="onTap('sex', '男')"
              >男</view
            >
            <view :class="{ active: form.sex === '女' }" class="sex-btn" @tap="onTap('sex', '女')"
              >女</view
            >
          </view>
        </view>

        <view class="form-item">
          <view class="label">出生日期</view>
          <!-- <view class="tip">请输入实际年龄</view> -->
          <view class="tip">
            <picker mode="date" @change="onAgeChange" start="1900-01-01" end="2052-12-31">
              <view class="tip">{{ form.birthday || '请输入实际年龄' }}</view>
            </picker>
          </view>
        </view>

        <view class="form-item">
          <view class="label">身高（cm）</view>
          <!-- <view class="tip">请输入身高</view> -->
          <input
            class="tip"
            placeholder="请输入身高"
            placeholder-class="custom-input-ph"
            :value="form.height"
            @input="(e) => onTap('height', e.detail.value)"
            style="width: 80px"
            type="number"
          />
        </view>

        <view class="form-item">
          <view class="label">体重（KG）</view>
          <!-- <view class="tip">请输入体重</view> -->
          <input
            class="tip"
            placeholder="请输入体重"
            placeholder-class="custom-input-ph"
            :value="form.weight"
            @input="(e) => onTap('weight', e.detail.value)"
            style="width: 80px"
            type="number"
          />
        </view>

        <view class="form-item">
          <view class="label">职业</view>
          <!-- <view class="tip">请输入职业</view> -->
          <input
            class="tip"
            placeholder="请输入职业"
            placeholder-class="custom-input-ph"
            :value="form.work"
            @input="(e) => onTap('work', e.detail.value)"
            style="width: 80px"
            type="text"
          />
        </view>
      </view>

      <view class="btn-bottom">
        <button class="next-btn" @tap="nextStep">下一步</button>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { ref } from 'vue';
  import dayjs from 'dayjs';
  // import { saveUserInfo } from './api';
  import {saveUserInfo} from '@/sheep/api/user'
  import { onLoad } from '@dcloudio/uni-app';

  const form = ref({
    // token: null,
    sex: '女',
    birthday: '',
    age: 0,
    height: null,
    weight: null,
    work: '',
  });

  const token = ref('');

  onLoad((e) => {
    token.value = e.token;
    uni.setStorageSync('token', e.token);
  });

  const onTap = (key, value) => {
    form.value[key] = value;
  };

  const onAgeChange = (e) => {
    const birthday = e.detail.value;
    console.log('birthday: ', birthday);
    const age = dayjs().diff(e.detail.value, 'year');
    console.log('age: ', age);

    form.value['birthday'] = birthday;
    form.value['age'] = age;
  };

  // const onHeightInput = (e) => {
  //   console.log('onHeightInput e: ', e);
  // };

  const nextStep = () => {
    console.log('下一步: ');

    if (!form.value.birthday) {
      uni.showToast({
        title: '请输入真实出生日期',
        icon: 'none',
      });

      return;
    }

    if (!form.value.height) {
      uni.showToast({
        title: '请输入正确的身高',
        icon: 'none',
      });

      return;
    }

    if (!form.value.weight) {
      uni.showToast({
        title: '请输入正确的体重',
        icon: 'none',
      });

      return;
    }

    if (!form.value.work) {
      uni.showToast({
        title: '请输入职业',
        icon: 'none',
      });

      return;
    }

    saveUserInfo(form.value).then((res) => {
      if (res.code === 0) {
        sheep.$router.go(`/pages/base-info-more/index?token=${token.value}`);
      }
    });
  };
</script>

<style lang="scss" scoped>
  .base-info {
    margin: 40rpx;

    .title {
      font-size: 48rpx;
      color: #031c24;
      font-weight: 400;
    }

    .sub-title {
      margin-top: 20rpx;
      font-size: 24rpx;
      color: #031c24;
    }

    .baseinfo {
      margin-top: 64rpx;
      font-size: 32rpx;
      color: #031c24;
    }

    .form {
      margin-top: 16rpx;
      // background-color: pink;
      .form-item {
        height: 148rpx;
        border-bottom: 1rpx solid #e6e6e6;
        display: flex;
        align-items: center;
        justify-content: space-between;

        .label {
          font-size: 28rpx;
          color: #031c24;
        }

        .tip {
          color: #999;
          text-align: right;
        }

        .custom-input-ph {
          width: 80px;
          text-align: right;
        }

        .sex-group {
          display: flex;
          align-items: center;
          //   background-color: red;
          width: 170rpx;
          height: 48rpx;

          .sex-btn {
            flex: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 0.5rpx solid #e6e6e6;
          }

          .active {
            background-color: black;
            color: white;
          }
        }
      }
    }

    .btn-bottom {
      margin-top: 40rpx;

      .next-btn {
        height: 80rpx;
        border-radius: 16rpx;
        background-color: #0d232c;
        color: white;
        font-size: 32rpx;
      }
    }
  }
</style>