xsl/meida_front
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(fittingRoom): 新增发型优化试穿功能并-模型选择逻辑Api 在 FittingRoom 中新增发型试穿接口 hairstyleTryOnApi

Browse Source 
- 修改 getModelList 方法支持根据 modelId 初始化当前模型
-优化试穿逻辑，根据 tab 切换调用不同试穿接口- 页面加载时根据 URL 参数初始化模型和测试结果
-修复 swiper 组件当前索引绑定问题
-限制模型列表显示数量为 4个
- 更新 README 文档，添加发型试穿链接和测试地址
This commit is contained in:
liguigong
2025-10-13 15:21:47 +08:00
parent 8fca9979b5
commit 757b562aee
5 changed files with 64 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files
README.md
+3
View File
@@ -52,3 +52,6 @@ https://docs.qq.com/sheet/DS0pybm5Yc1ViakNj
换发型: https://leops128e7.feishu.cn/docx/HVCHdCAV8ok4bkxcaXVc6q6enXb
http://localhost:3000/pages/fittingRoom/index?modelId=1976890366293254145&id=1977565196601040912
pages/fittingRoom/components/s-select-mote.vue
+5 -1
View File
@@ -24,7 +24,11 @@
>选择
</uni-file-picker>
</view>
<view v-for="item of fittingRoom.modelList" class="item" @click="switchModels(item)">
<view
v-for="item of fittingRoom.modelList.slice(0, 4)"
class="item"
@click="switchModels(item)"
>
<view class="item-text"></view>
<image :src="item.thumbnailFileUrl" class="item-image" mode="aspectFill"></image>
</view>
pages/fittingRoom/index.vue
+20 -13
View File
@@ -11,13 +11,13 @@
>
<swiper
:autoplay="false"
:current="fittingRoomStore.swiperCurrentIndex"
:duration="500"
:interval="5000"
:next-margin="'160rpx'"
:previous-margin="'160rpx'"
circular
class="swiper"
current="0"
@change="swiperChange"
>
<swiper-item v-for="(item, index) in fittingRoomStore.testResults" :key="index">
@@ -76,16 +76,7 @@
fittingRoomStore.swiperCurrentIndex = event.detail.current;
}
onMounted(() => {
fittingRoomStore.getCategory();
fittingRoomStore.getCloths();
fittingRoomStore.getModelList();
timer = setInterval(() => {
// TODO: 检测到还有没生成图的, 获取最新数据
// fittingRoomStore.generatingLoading &&
// fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id);
}, 6000);
});
onMounted(() => {});
onUnload(() => {
// 移除全局监听
clearInterval(timer);
@@ -112,8 +103,24 @@
// const template = computed(() => sheep.$store('app').template?.home);
onLoad((options) => {
uni.setStorageSync('token', options?.token ?? '92d2805a85ca422e90dd7d50eef49a85');
uni.setStorageSync('token', options?.token ?? '86e0032580ac4ca8b1f4f5e9395d1cf8');
console.log('🚀 ~ URL上的token ~ options?.token: ', options?.token);
fittingRoomStore.getCategory();
fittingRoomStore.getCloths();
timer = setInterval(() => {
// TODO: 检测到还有没生成图的, 获取最新数据
// fittingRoomStore.generatingLoading &&
// fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id);
}, 6000);
if (options?.modelId && options?.id) {
fittingRoomStore.getModelList(options?.modelId);
fittingRoomStore.getTestResults(options?.modelId).then((res) => {
console.log('🚀 ~ index.vue ~ L118');
fittingRoomStore.swiperCurrentIndex = res.findIndex((res) => res.id === options?.id);
});
} else {
fittingRoomStore.getModelList();
}
});
// 下拉刷新
@@ -121,7 +128,7 @@
// sheep.$store('app').init();
if (fittingRoomStore.currentModel?.id) {
fittingRoomStore.getTestResults(fittingRoomStore.currentModel?.id).then(() => {
console.log('➤➤➤ ~ index.vue ~ L124');
console.log('➤➤➤ ~ index.vue ~ L127');
uni.stopPullDownRefresh();
});
} else {
sheep/api/fittingRoom/index.js
+10 -1
View File
@@ -2,7 +2,7 @@
* @Author: liguigong liguigong@shopline.com
* @Date: 2025-09-23 09:41:10
* @LastEditors: liguigong liguigong@shopline.com
* @LastEditTime: 2025-09-28 16:27:38
* @LastEditTime: 2025-10-13 14:30:53
* @FilePath: sheep/api/fittingRoom/index.js
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
*/
@@ -148,6 +148,15 @@ const FittingRoomApi = {
});
},
//发型试穿
hairstyleTryOnApi: (data) => {
return request({
url: '/digital/on-record/exchange-hair',
method: 'POST',
data: data,
});
},
addHairApi: (data) => {
return request({
url: '/userinfo/add_hair_data',
sheep/store/fittingRoom.js
+26 -9
View File
@@ -79,6 +79,7 @@ const fittingRoom = defineStore({
// "createTime": 1758857790000
});
this.testResults = result;
return result;
console.log('🚀 ~ getTestResults 🐶76 ~ httpResponse: ', httpResponse.data?.list);
},
@@ -95,12 +96,17 @@ const fittingRoom = defineStore({
: httpResponse.result || [];
},
// 获取模特数据查询
async getModelList(templateId = null) {
async getModelList(modelId = undefined) {
const httpResponse = await FittingRoomApi.getModelList({
sex: this.sex,
});
let modelList = (httpResponse.result || []).slice(0, 4);
let modelList = httpResponse.result || [];
this.modelList = modelList;
if (modelId) {
this.currentModel = modelList.find((item) => item.id === modelId);
// this.getTestResults(modelId);
return;
}
this.currentModel = modelList?.[0] ?? {};
this.getTestResults(modelList?.[0]?.id);
},
@@ -115,13 +121,24 @@ const fittingRoom = defineStore({
return;
}
// 那改成 clothUrl 和 kuziUrl 吧，当 kuziUrl 有值时，再传个 suit: true
const httpResponse = await FittingRoomApi.tryOnApi({
modelId: this.currentModel.id,
modelImageUrl: this.currentModel.fileUrl,
clothUrl: this.currentClothes[0]?.fileUrl,
kuziUrl: this.currentClothes?.[1]?.fileUrl ? this.currentClothes[1]?.fileUrl : undefined,
suit: this.currentClothes?.[1]?.fileUrl ? true : undefined,
});
const httpResponse =
this.tab === 6
? await FittingRoomApi.hairstyleTryOnApi({
modelId: this.currentModel.id,
files: this.currentModel.fileUrl,
isHr: true,
hairIds: this.currentClothes[0]?.clothId,
sex: 'female',
})
: await FittingRoomApi.tryOnApi({
modelId: this.currentModel.id,
modelImageUrl: this.currentModel.fileUrl,
clothUrl: this.currentClothes[0]?.fileUrl,
kuziUrl: this.currentClothes?.[1]?.fileUrl
? this.currentClothes[1]?.fileUrl
: undefined,
suit: this.currentClothes?.[1]?.fileUrl ? true : undefined,
});
if (httpResponse.code !== 0) {
sheep.$helper.toast(httpResponse.msg);
return;