feat(fittingRoom): 实现试穿结果展示与衣服上传编辑功能
- 新增试穿结果获取与展示逻辑，支持模特切换 - 实现衣服上传和编辑功能，包括分类和长度选择 - 优化上传页面UI布局，增加确认和删除操作按钮- 调整轮播组件数据源，使用试穿结果列表 - 修复上传接口调用逻辑，支持文件上传与数据提交 - 更新请求超时时间，提升接口稳定性 - 优化分类标签显示逻辑，修复索引映射问题 - 支持从衣橱进入编辑模式，传递文件URL和ID参数 - 移除旧版图片选择器，统一使用新上传逻辑 - 修复组件间数据传递与事件绑定问题
This commit is contained in:
liguigong
@@ -2,7 +2,7 @@
|
||||
* @Author: liguigong liguigong@shopline.com
|
||||
* @Date: 2025-09-23 09:41:10
|
||||
* @LastEditors: liguigong liguigong@shopline.com
|
||||
* @LastEditTime: 2025-09-25 18:01:03
|
||||
* @LastEditTime: 2025-09-26 17:56:13
|
||||
* @FilePath: sheep/api/fittingRoom/index.js
|
||||
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
|
||||
*/
|
||||
@@ -54,6 +54,43 @@ const FittingRoomApi = {
|
||||
});
|
||||
});
|
||||
},
|
||||
// 上传模特
|
||||
uploadCloth: (file, formData = {}) => {
|
||||
uni.showLoading({
|
||||
title: '上传中',
|
||||
});
|
||||
return new Promise((resolve, reject) => {
|
||||
uni.uploadFile({
|
||||
url: baseUrl + apiPath + '/cloth/uploadClothFile',
|
||||
filePath: file,
|
||||
name: 'file',
|
||||
header: {
|
||||
Accept: '*/*',
|
||||
Authorization: getAccessToken(),
|
||||
},
|
||||
formData,
|
||||
success: (uploadFileRes) => {
|
||||
console.log('🚀 ~ success 🐶43 ~ uploadFileRes: ', uploadFileRes);
|
||||
let result = JSON.parse(uploadFileRes.data);
|
||||
if (result.error === 1) {
|
||||
uni.showToast({
|
||||
icon: 'none',
|
||||
title: result.msg,
|
||||
});
|
||||
} else {
|
||||
return resolve(result);
|
||||
}
|
||||
},
|
||||
fail: (error) => {
|
||||
console.log('上传失败：', error);
|
||||
return resolve(false);
|
||||
},
|
||||
complete: () => {
|
||||
uni.hideLoading();
|
||||
},
|
||||
});
|
||||
});
|
||||
},
|
||||
|
||||
getModelList: (data) => {
|
||||
return request({
|
||||
@@ -69,6 +106,34 @@ const FittingRoomApi = {
|
||||
method: 'GET',
|
||||
});
|
||||
},
|
||||
|
||||
// 获取试穿结果
|
||||
getTestResults: (data) => {
|
||||
return request({
|
||||
url: '/digital/on-record/page',
|
||||
method: 'GET',
|
||||
params: data,
|
||||
});
|
||||
},
|
||||
|
||||
// 上传或者编辑衣服
|
||||
uploadAndEditCloth: (data) => {
|
||||
return request({
|
||||
url: '/cloth/uploadCloth',
|
||||
method: 'POST',
|
||||
data: data,
|
||||
});
|
||||
},
|
||||
|
||||
// 删除衣服
|
||||
deleteCloth: (data) => {
|
||||
return request({
|
||||
url: '/cloth/deleteCloth',
|
||||
method: 'POST',
|
||||
data: data,
|
||||
});
|
||||
},
|
||||
|
||||
addHairApi: (data) => {
|
||||
return request({
|
||||
url: '/userinfo/add_hair_data',
|
||||
|
||||
@@ -50,7 +50,7 @@ function closeLoading() {
|
||||
*/
|
||||
const http = new Request({
|
||||
baseURL: baseUrl + apiPath,
|
||||
timeout: 8000,
|
||||
timeout: 30000,
|
||||
method: 'GET',
|
||||
header: {
|
||||
Accept: 'text/json',
|
||||
|
||||
@@ -2,7 +2,7 @@ import { defineStore } from 'pinia';
|
||||
import app from './app';
|
||||
import FittingRoomApi from '../api/fittingRoom';
|
||||
|
||||
const tabsMap = [undefined, 'topCloth', 'bottomCloth', 'dress', 'suit', 'hair'];
|
||||
const _tabsMap = [undefined, 'topCloth', 'bottomCloth', 'dress', 'suit', 'hair'];
|
||||
|
||||
export const pattern = [
|
||||
{ value: 'body', label: '腰部以上' },
|
||||
@@ -26,12 +26,14 @@ const fittingRoom = defineStore({
|
||||
type: true, // true: 我的衣橱, false: 衣服库
|
||||
tab: 0, // 对应下面tabs的序号
|
||||
tabs: ['全部', '上衣', '下装', '连衣裙', '外套', '套装', '发型'],
|
||||
tabsMap: _tabsMap,
|
||||
disableTabs: [6], // 不允许上传图的tab索引
|
||||
clothes: [], // 接口返回的衣服数据
|
||||
currentClothes: [], // 当前选的衣服
|
||||
selectClothesType: 1, // 选中的衣服类型, 默认选中上衣
|
||||
selectPattern: pattern[0].value,
|
||||
selectPattern: pattern[0].value, // 上传或者编辑衣服的时候的长短
|
||||
sex: 'female',
|
||||
testResults: [], // 当前模特的试穿结果列表
|
||||
}),
|
||||
getters: {
|
||||
// 能上传图片的场景
|
||||
@@ -45,16 +47,46 @@ const fittingRoom = defineStore({
|
||||
// 获取衣服分类
|
||||
async getCategory(templateId = null) {
|
||||
const httpResponse = await FittingRoomApi.getCategory();
|
||||
this.clothes = httpResponse.result || [];
|
||||
let result = httpResponse.data[0]?.children;
|
||||
this.tabs = ['全部', ...result?.map((item) => item.name), '发型'];
|
||||
this.tabsMap = [undefined, ...result?.map((item) => item.id), 'hair'];
|
||||
this.selectClothesType = result[0].id;
|
||||
},
|
||||
|
||||
async getTestResults(modelId = '') {
|
||||
const httpResponse = await FittingRoomApi.getTestResults({
|
||||
modelId,
|
||||
pageNo: '1',
|
||||
pageSize: '30',
|
||||
});
|
||||
const result = httpResponse.data?.list ?? [];
|
||||
// 将模特放到最后一张
|
||||
result.push({
|
||||
id: 100000,
|
||||
modelId: modelId,
|
||||
modelImageUrl:
|
||||
'https://tupian05.oss-cn-beijing.aliyuncs.com/digital_cloth/1758853865858.png',
|
||||
clothingImageUrl:
|
||||
'https://tupian05.oss-cn-beijing.aliyuncs.com/digital_cloth/1758795488865.jpg',
|
||||
tryOnResultUrl: this.currentModel.thumbnailFileUrl,
|
||||
// "userId": 284,
|
||||
// "createTime": 1758857790000
|
||||
});
|
||||
this.testResults = result;
|
||||
console.log('🚀 ~ getTestResults 🐶76 ~ httpResponse: ', httpResponse.data?.list);
|
||||
},
|
||||
|
||||
// 获取衣服类型数据查询
|
||||
async getCloths(templateId = null) {
|
||||
const httpResponse = await FittingRoomApi.getClothList({
|
||||
sex: 'female',
|
||||
isPerson: this.type ? 'yes' : 'no',
|
||||
clothType: tabsMap[this.tab],
|
||||
clothType: this.tabsMap[this.tab],
|
||||
});
|
||||
this.clothes = httpResponse.result || [];
|
||||
// 如果我的衣橱就往前加个空数组
|
||||
this.clothes = this.canUpload
|
||||
? [{}, ...(httpResponse.result || [])]
|
||||
: httpResponse.result || [];
|
||||
},
|
||||
// 获取模特数据查询
|
||||
async getModelList(templateId = null) {
|
||||
@@ -64,27 +96,43 @@ const fittingRoom = defineStore({
|
||||
let modelList = (httpResponse.result || []).slice(0, 4);
|
||||
this.modelList = modelList;
|
||||
this.currentModel = modelList?.[0] ?? {};
|
||||
this.getTestResults(modelList?.[0].id);
|
||||
},
|
||||
// 切换模特
|
||||
switchModels(item) {
|
||||
if (item.id === this.currentModel.id) {
|
||||
return;
|
||||
}
|
||||
// TODO:
|
||||
console.log('🚀 ~ switchModels 🐶70 ~ item: ', item);
|
||||
console.log('🚀 ~ switchModels 🐶106 ~ item: ', item);
|
||||
this.currentModel = item;
|
||||
this.getTestResults(item.id);
|
||||
},
|
||||
async uploadAndEditCloth(data = {}) {
|
||||
await FittingRoomApi.uploadAndEditCloth({
|
||||
clothType: this.selectClothesType,
|
||||
isSync: 'yes',
|
||||
sex: this.sex,
|
||||
len: this.selectPattern,
|
||||
...data,
|
||||
});
|
||||
},
|
||||
setVisable(visable) {
|
||||
console.log('🚀 ~ setVisable 🐶77 ~ visable: ', visable);
|
||||
console.log('🚀 ~ setVisable ?1207 ~ visable: ', visable);
|
||||
this.visable = visable ?? !this.visable;
|
||||
},
|
||||
// 我的衣服库和衣橱的切换
|
||||
changeType(visable) {
|
||||
console.log('🚀 ~ setVisable 🐶82 ~ visable: ', visable);
|
||||
console.log('🚀 ~ setVisable ?1128 ~ visable: ', visable);
|
||||
this.type = visable ?? !this.type;
|
||||
this.getCloths();
|
||||
},
|
||||
|
||||
changeTheSelected(data) {
|
||||
console.log('🚀 ~ changeTheSelected ?1310 ~ data: ', data);
|
||||
this.selectPattern = data.selectPattern;
|
||||
this.selectClothesType = data.selectClothesType;
|
||||
},
|
||||
|
||||
changeTab(index) {
|
||||
console.log('切换tab');
|
||||
this.tab = index;
|
||||
|
||||
Reference in New Issue
Block a user