feat: 增加上传图片逻辑+个人信息选择逻辑

This commit is contained in:
kenny
2025-10-06 21:12:25 +08:00
parent 34a82647fc
commit 121288b268
16 changed files with 1710 additions and 734 deletions
+792 -734
View File
File diff suppressed because it is too large Load Diff
+590
View File
@@ -0,0 +1,590 @@
<template>
<view class="questions">
<view class="question-item" v-for="(item, index) in options" :key="index">
<view class="title">{{ item.tip }}</view>
<view class="options">
<view
class="option-item"
@tap="onTap(v, item.key, item.multiply)"
v-for="v in item.options"
:key="v.image"
>
<image
:src="v.female"
mode="widthFix"
class="image"
:class="{
selected: item.multiply
? form[item.key].includes(v.label)
: form[item.key] === v.label,
}"
/>
<view class="tip">{{ v.label }}</view>
<view
class="circle-checkbox"
:style="{
background: (
item.multiply ? form[item.key].includes(v.label) : form[item.key] === v.label
)
? 'rgba(0, 0, 0, 0.8)'
: 'rgba(0, 0, 0, 0.3)',
}"
>
<view
class="checkmark"
v-show="item.multiply ? form[item.key].includes(v.label) : form[item.key] === v.label"
>
<image
src="https://oss.yz.zglvling.com/user/image/2025-07-23/1753234211808517.png"
mode="aspectFill"
class="img-1"
/>
</view>
</view>
</view>
</view>
</view>
<view class="btn-bottom">
<button class="next-btn" @tap="nextStep">下一步</button>
</view>
</view>
</template>
<script setup>
import { ref } from 'vue';
import { getAccessToken } from '@/sheep/request';
import { getUserInfo, saveUserInfo } from '@/sheep/api/user';
// const token = getAccessToken();
const pngUrl = ref('https://llshop.zglvling.com/shop/img/png/');
const options = ref([
{
tip: '您喜欢哪一种配色?',
key: 'color',
options: [
{
label: '鲜亮明媚',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754271277238202.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287516248040.png',
},
{
label: '柔雅清浅',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272479729897.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287559655454.png',
},
{
label: '暖郁厚重',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272516442235.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287643231837.png',
},
{
label: '冷峻高纯',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272584763306.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287666308662.png',
},
],
},
{
tip: '您更喜欢以下哪种量感类型的服装?',
key: 'feeling_of_quantity',
options: [
{
label: '成熟大气款',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272634205753.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287774865899.png',
},
{
label: '适中',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272667530388.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287797613307.png',
},
{
label: '轻盈活力款',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272732987598.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287823232319.png',
},
],
},
// {
// tip: '您更喜欢以下哪种轮廓类型的服装?',
// options: [
// {
// label: '成熟大气款',
// female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287774865899.png',
// male: pngUrl + 'choose/lg1.png',
// },
// {
// label: '适中',
// female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287797613307.png',
// male: pngUrl + 'choose/lg2.png',
// },
// {
// label: '轻盈活力款',
// female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287823232319.png',
// male: pngUrl + 'choose/lg3.png',
// },
// ],
// },
{
tip: '您更喜欢以下哪种轮廓类型的服装?',
key: 'right_and_wrong',
options: [
{
label: '突显女人味',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272769798751.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287860949325.png',
},
{
label: '适中',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272798749257.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287885715958.png',
},
{
label: '突显干练利落',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272825106455.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287910169893.png',
},
],
},
{
tip: '您更喜欢哪种设计类型的服装?',
key: 'dynamic_and_static',
options: [
{
label: '简约经典',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272863674867.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287959334463.png',
},
{
label: '设计感较强的',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272895680965.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287984354873.png',
},
],
},
{
tip: '您的体型更接近以下哪种类型?',
key: 'somatotype',
options: [
{
label: '苹果型(O型)',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272949584763.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288018865805.png',
},
{
label: '梨型(A型)',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272971243794.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288043986200.png',
},
{
label: '沙漏型(X型)',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754272999372681.png',
male: '',
},
{
label: '倒三角形(T型)',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754273036691620.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288079451868.png',
},
{
label: '矩形(H型)',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754273059748866.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288102506314.png',
},
],
},
{
tip: '存在的局部问题:(多选)',
key: 'question',
multiply: true,
options: [
{
label: '溜肩',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754273120704234.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288139214507.png',
},
{
label: '肩厚',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754284852257793.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288167419171.png',
},
{
label: '胸下移',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754284911394592.png',
male: '',
},
{
label: '腰部较粗',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754284957668185.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288192594927.png',
},
{
label: '小腹隆起',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754284994915538.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288225157426.png',
},
{
label: '胯部宽',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754285222281946.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288247671595.png',
},
{
label: '臀部下垂',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754285259781905.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288268495259.png',
},
{
label: '腿型不直',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754285643650291.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288294345526.png',
},
{
label: '大腿粗',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754301665703278.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288325253267.png',
},
{
label: '小腿粗',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754301720856355.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288345234792.png',
},
{
label: '五五分身',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754301753426645.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288366916893.png',
},
],
},
{
tip: '您希望服装对身材修饰的哪些方面?(多选)',
key: 'purpose',
multiply: true,
options: [
{
label: '显高',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754286910889889.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288419625082.png',
},
{
label: '显瘦',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754286945232084.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288448946805.png',
},
{
label: '勾勒腰线',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754286977631074.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288482351499.png',
},
{
label: '隐藏肚腩',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287016166568.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288506708844.png',
},
{
label: '修饰腿型',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287045333748.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288535402561.png',
},
{
label: '修饰假胯宽',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287075453655.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288558374677.png',
},
{
label: '显肩宽',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287105997760.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288586903302.png',
},
{
label: '显肩窄',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287129635192.png',
male: '',
},
],
},
{
tip: '选择需要的着装需求场合:(多选)',
key: 'occasion_dressing',
multiply: true,
options: [
{
label: '日常休闲',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287171556149.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288612659658.png',
},
{
label: '商务职场',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287204873496.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288635160572.png',
},
{
label: '隆重社交',
female: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754287241722206.png',
male: 'https://oss.yz.zglvling.com/user/image/2025-08-04/1754288657643527.png',
},
],
},
]);
// const form = ref({
// color: '',
// feeling_of_quantity: 轻盈活力款,
// right_and_wrong: 突显女人味,
// dynamic_and_static: 简约经典,
// somatotype: 梨型(A型),
// question: 肩厚,胸下移,腰部较粗,
// purpose: 显瘦,勾勒腰线,隐藏肚腩,
// occasion_dressing: 商务职场,隆重社交
// })
const form = ref({
color: '',
feeling_of_quantity: '',
right_and_wrong: '',
dynamic_and_static: '',
somatotype: '',
question: [],
purpose: [],
occasion_dressing: [],
});
const onTap = (item, key, multiply) => {
console.log('key: -----', key);
console.log('item.label: -----', item.label);
console.log('multiply: -----', multiply);
if (multiply) {
if (!form.value[key]) {
form.value[key] = [];
}
form.value[key] = form.value[key].includes(item.label)
? form.value[key].filter((i) => i !== item.label)
: [...form.value[key], item.label];
console.log('form.value[key]: ', form.value[key]);
return;
} else {
form.value[key] = form.value[key] === item.label ? '' : item.label;
}
};
// getUserInfo()
const nextStep = async () => {
if (!form.value.color) {
uni.showToast({
title: '请选择配色',
icon: 'none',
});
return;
}
if (!form.value.feeling_of_quantity) {
uni.showToast({
title: '请选择量感类型服饰',
icon: 'none',
});
return;
}
if (!form.value.right_and_wrong) {
uni.showToast({
title: '请选择轮廓类型服饰',
icon: 'none',
});
return;
}
if (!form.value.dynamic_and_static) {
uni.showToast({
title: '请选择设计类型服饰',
icon: 'none',
});
return;
}
if (!form.value.somatotype) {
uni.showToast({
title: '请选择您的体型',
icon: 'none',
});
return;
}
if (!form.value.question.length) {
uni.showToast({
title: '请选择存在的局部问题',
icon: 'none',
});
return;
}
if (!form.value.purpose.length) {
uni.showToast({
title: '请选择修饰哪些方面',
icon: 'none',
});
return;
}
if (!form.value.occasion_dressing.length) {
uni.showToast({
title: '请选择着装需求场合',
icon: 'none',
});
return;
}
const userInfo = await getUserInfo();
console.log('userInfo: ', userInfo.data.dataJson);
await saveUserInfo({
...JSON.parse(userInfo.data.dataJson),
...form.value,
question: form.value.question.toString(),
purpose: form.value.purpose.toString(),
occasion_dressing: form.value.occasion_dressing.toString(),
}).then(() => {
uni.chooseImage({
count: 1, //默认9
sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图,默认二者都有
sourceType: ['album'], //从相册选择
success: function (res) {
console.log(JSON.stringify(res.tempFilePaths));
uni.uploadFile({
url: 'https://puton.huimeimeta.com/app-api/cloth/uploadFace',
filePath: res.tempFilePaths[0],
name: 'file',
formData: {},
header: {
Authorization: getAccessToken()
},
success: (res) => {
console.log('上传成功',typeof res.data);
console.log('res.data.code: ', JSON.parse(res.data));
if(JSON.parse(res.data).code === 200) {
window.location.href = `https://face-canvas.huimeimeta.com/?img=${JSON.parse(res.data).result.fileUrl}`
}
},
});
},
fail: (fail) => {
console.log('fail: ', fail);
},
});
});
};
</script>
<style lang="scss" scoped>
.questions {
.question-item {
padding: 30rpx;
.title {
font-size: 32rpx;
line-height: 32rpx;
font-weight: 600;
padding: 20rpx 0rpx;
color: rgba(3, 28, 36, 1);
}
.options {
display: flex;
// flex-wrap: nowrap;
flex-wrap: wrap;
.option-item {
display: flex;
flex-direction: column;
align-items: center;
margin: 0 4rpx;
position: relative;
.image {
width: 160rpx;
height: 220rpx;
background: #eee;
border: 2rpx solid #eee;
box-sizing: border-box;
}
.selected {
border: 0.5px solid rgba(3, 28, 36, 1);
}
.tip {
margin-top: 20rpx;
font-size: 28rpx;
color: #22313f;
margin-bottom: 40rpx;
text-align: left;
}
.circle-checkbox {
position: absolute;
top: 12rpx;
right: 12rpx;
width: 40rpx;
height: 40rpx;
border-radius: 50%;
border: 2rpx solid rgba(255, 255, 255, 1);
background: rgba(0, 0, 0, 0.3);
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
.checkmark {
color: #fff; /* ✔ 白色 */
background: rgba(0, 0, 0, 0.3);
font-size: 24rpx;
font-weight: bold;
.img-1 {
width: 10.76px;
height: 6.59px;
margin-bottom: 2px;
}
}
}
}
}
}
.btn-bottom {
margin-top: 40rpx;
// padding-bottom: 40rpx;
padding: 20rpx 40rpx;
.next-btn {
height: 80rpx;
border-radius: 16rpx;
background-color: #0d232c;
color: white;
font-size: 32rpx;
}
}
}
</style>
+257
View File
@@ -0,0 +1,257 @@
<template>
<view class="base-info">
<view class="title">
<view>请输入并核对信息</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>
</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) => {
console.log('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>
+48
View File
@@ -0,0 +1,48 @@
<template>
<view class="index">
<image
v-for="i in 10"
:key="i"
:src="`/static/index/image_${i}.jpeg`"
mode="widthFix"
class="img"
/>
<view class="btn-bottom">
<button class="next-btn" @tap="nextStep">马上体验</button>
</view>
</view>
</template>
<script setup lang="ts">
import sheep from '@/sheep';
const nextStep = () => {
sheep.$router.go('/pages/base-info/index');
};
</script>
<style lang="scss" scoped>
.index {
.img {
display: block;
width: 100%;
}
.btn-bottom {
margin-top: -120rpx;
height: 300rpx;
// background-color: red;
.next-btn {
width: 80% !important;
height: 80rpx;
// border-radius: 16rpx;
background-color: #0d232c;
color: white;
font-size: 32rpx;
}
}
}
</style>
+17
View File
@@ -0,0 +1,17 @@
import request from '@/sheep/request';
export const saveUserInfo = (data) => {
return request({
url: '/digital/records/create',
data: { dataJson: JSON.stringify(data) },
method: 'post',
});
};
export const getUserInfo = (params) => {
return request({
url: '/digital/records/get-by-user-id',
params,
method: 'get',
});
};
+6
View File
@@ -94,8 +94,14 @@ http.interceptors.request.use(
// 增加 token 令牌、terminal 终端、tenant 租户的请求头
const token = config.custom.isToken ? getAccessToken() : undefined;
console.log('token: --------------', token);
if (token) {
config.header['Authorization'] = token;
// config.header['token'] = token;
}
config.header['terminal'] = getTerminal();
Binary file not shown.

After

Width:  |  Height:  |  Size: 91 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 65 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 78 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 42 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 63 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 48 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 73 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 69 KiB