650 lines
20 KiB
Vue
650 lines
20 KiB
Vue
<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>
|
|
|
|
<div class="dialog" v-if="false">
|
|
<div class="dialog-main">
|
|
<input class="next-input" type="file" />
|
|
</div>
|
|
</div>
|
|
</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.showLoading({
|
|
icon: 'loading',
|
|
title: ''
|
|
})
|
|
|
|
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}&token=${getAccessToken()}`
|
|
}
|
|
},
|
|
|
|
complete:()=>{
|
|
uni.hideLoading()
|
|
},
|
|
});
|
|
},
|
|
|
|
fail: (fail) => {
|
|
console.log('fail: ', fail);
|
|
uni.showToast('上传图片报错了')
|
|
},
|
|
});
|
|
});
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.questions {
|
|
padding-bottom: 150rpx;
|
|
.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;
|
|
}
|
|
}
|
|
|
|
|
|
.dialog {
|
|
position: fixed;
|
|
inset: 0;
|
|
z-index: 100;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.dialog-main {
|
|
height: 80rpx;
|
|
border-radius: 16rpx;
|
|
background-color: #0d232c;
|
|
color: white;
|
|
font-size: 32rpx;
|
|
.next-input {
|
|
height: 80rpx;
|
|
border-radius: 16rpx;
|
|
background-color: #0d232c;
|
|
color: white;
|
|
font-size: 32rpx;
|
|
position: relative;
|
|
|
|
// &:after {
|
|
// content: '点击上传头像';
|
|
// position: absolute;
|
|
// left: 50%;
|
|
// top: 50%;
|
|
// color: white;
|
|
// font-size: 28rpx;
|
|
// transform: translate(-50%, -50%);
|
|
// font-weight: bolder;
|
|
// }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
|
|
</style>
|