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