286 lines
6.8 KiB
Vue
286 lines
6.8 KiB
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';
|
||
import ReportApi from '@/sheep/api/report';
|
||
|
||
const { getToken } = ReportApi;
|
||
|
||
const form = ref({
|
||
// token: null,
|
||
sex: '女',
|
||
birthday: '',
|
||
age: 0,
|
||
height: null,
|
||
weight: null,
|
||
work: '',
|
||
});
|
||
|
||
const token = ref('');
|
||
|
||
onLoad(async (options) => {
|
||
const queryObj = Object.assign({}, options);
|
||
|
||
if (options.token) {
|
||
// queryObj.open = queryObj.open || 0;
|
||
|
||
if (!queryObj.open) {
|
||
queryObj.open = 0;
|
||
const queryStr = Object.entries(queryObj)
|
||
.map(([k, v]) => `${k}=${v}`)
|
||
.join('&');
|
||
window.location.href = `${window.location.href.replace(/\?.*$/g, '')}?${queryStr}`;
|
||
return;
|
||
}
|
||
} else {
|
||
const res = await getToken();
|
||
queryObj.open = queryObj.open || 1;
|
||
queryObj.token = res.data.accessToken;
|
||
const queryStr = Object.entries(queryObj)
|
||
.map(([k, v]) => `${k}=${v}`)
|
||
.join('&');
|
||
window.location.href = `${window.location.href.replace(/\?.*$/g, '')}?${queryStr}`;
|
||
return;
|
||
}
|
||
|
||
token.value = options.token;
|
||
uni.setStorageSync('token', options.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>
|