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

feat(fittingRoom): 实现试穿结果展示与衣服上传编辑功能

Browse Source 
- 新增试穿结果获取与展示逻辑，支持模特切换
- 实现衣服上传和编辑功能，包括分类和长度选择
- 优化上传页面UI布局，增加确认和删除操作按钮- 调整轮播组件数据源，使用试穿结果列表
- 修复上传接口调用逻辑，支持文件上传与数据提交
- 更新请求超时时间，提升接口稳定性
- 优化分类标签显示逻辑，修复索引映射问题
- 支持从衣橱进入编辑模式，传递文件URL和ID参数
- 移除旧版图片选择器，统一使用新上传逻辑
- 修复组件间数据传递与事件绑定问题
This commit is contained in:
liguigong
2025-09-26 18:29:33 +08:00
parent cad438514d
commit d3f8ec3576
6 changed files with 251 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files
pages/uploadClothes/index.vue
+101 -52
View File
@@ -1,53 +1,56 @@
<template>
<view v-if="template">
<SelectPic v-if="!imageUrl" @onChange="onChange" />
<view v-if="imageUrl" class="clothes-box">
<image
class="clothes"
mode="aspectFill"
:src="imageUrl"
@click="uploadFile"
></image>
</view>
<view class="warp">
<view class="container">
<view class="title">分类：</view>
<uv-radio-group v-model="fittingRoomStore.selectClothesType">
<template v-for="(item, index) in fittingRoomStore.tabs">
<uv-radio
shape="square"
:customStyle="{margin: '12rpx'}"
v-if="index !== 0 && index !== 5"
:key="index"
:label="item"
size="26rpx"
iconSize="20rpx"
activeColor="#606060"
:name="index">
</uv-radio>
</template>
</uv-radio-group>
<template v-if="imageUrl">
<view class="clothes-box">
<image :src="imageUrl" class="clothes" mode="aspectFill" @click="uploadFile"></image>
</view>
</view>
<view class="warp">
<view class="container">
<view class="title">长度：</view>
<uv-radio-group v-model="fittingRoomStore.selectPattern">
<view class="warp">
<view class="container">
<view class="title">分类：</view>
<uv-radio-group v-model="fittingRoomStore.selectClothesType">
<template v-for="(item, index) in fittingRoomStore.tabs">
<uv-radio
v-if="index !== 0 && index !== 6"
:key="fittingRoomStore.tabsMap[index]"
:customStyle="{ margin: '12rpx' }"
:label="item"
:name="fittingRoomStore.tabsMap[index]"
activeColor="#606060"
iconSize="20rpx"
shape="square"
size="26rpx"
>
</uv-radio>
</template>
</uv-radio-group>
</view>
</view>
<view class="warp">
<view class="container">
<view class="title">长度：</view>
<uv-radio-group v-model="fittingRoomStore.selectPattern">
<uv-radio
v-for="(item, index) in pattern"
shape="square"
:customStyle="{margin: '12rpx'}"
:key="index"
:customStyle="{ margin: '12rpx' }"
:label="item.label"
size="26rpx"
iconSize="20rpx"
:name="item.value"
activeColor="#606060"
:name="item.value">
iconSize="20rpx"
shape="square"
size="26rpx"
>
</uv-radio>
</uv-radio-group>
</uv-radio-group>
</view>
</view>
</view>
<view class="operating">
<view class="delete" @click="deleteClothes">删除</view>
<view class="delete" @click="confirmClothes">确认</view>
</view>
</template>
</view>
</template>
@@ -57,13 +60,31 @@
import sheep from '@/sheep';
import SelectPic from '@/pages/uploadClothes/SelectPic.vue';
import { pattern } from '@/sheep/store/fittingRoom';
import FittingRoomApi from '../../sheep/api/fittingRoom';
const fittingRoomStore = sheep.$store('fittingRoom');
const imageUrl = ref('https://picsum.photos/600/300?random=3')
function selectColthesType(val) {
console.log("🚀 ~ selectColthesType ~ val: ", val);
}
const imageUrl = ref('');
const clothesId = ref('');
const isEdit = ref(false);
function confirmClothes() {
fittingRoomStore
.uploadAndEditCloth({
clothFileList: [clothesId.value],
isUpdate: isEdit ? true : undefined,
})
.then((res) => {
sheep.$router.go('/pages/fittingRoom/index');
});
}
function deleteClothes() {
FittingRoomApi.deleteCloth({ id: clothesId.value }).then((res) => {
sheep.$router.go('/pages/fittingRoom/index');
});
}
// 隐藏原生tabBar
uni.hideTabBar({
fail: () => {},
@@ -71,12 +92,23 @@ function selectColthesType(val) {
function onChange(e) {
console.log(e, 12345);
imageUrl.value = e[0].tempFilePaths[0]
FittingRoomApi.uploadCloth(e[0].tempFiles[0].path).then((res) => {
console.log('🚀 ~ 🐶97 ~ res: ', res.result.thumbnailFileUrl);
imageUrl.value = res.result.thumbnailFileUrl;
clothesId.value = res.result.id;
});
}
const template = computed(() => sheep.$store('app').template?.home);
onLoad((options) => {
console.log('🚀 ~ 🐶106 ~ options: ', options);
if (options?.fileUrl) {
isEdit.value = true;
}
// const data = JSON.parse(options.data);
imageUrl.value = options?.fileUrl ?? '';
clothesId.value = options?.clothId ?? '';
// #ifdef MP
// 小程序识别二维码
if (options.scene) {
@@ -114,6 +146,22 @@ function selectColthesType(val) {
</script>
<style lang="scss" scoped>
.operating {
display: flex;
justify-content: space-around;
margin-top: 200rpx;
padding: 0 20rpx;
}
.delete {
width: 250rpx;
height: 80rpx;
line-height: 80rpx;
text-align: center;
color: #ffffff;
background: #000;
font-size: 28rpx;
letter-spacing: 10rpx;
}
.warp {
display: flex;
justify-content: center;
@@ -123,7 +171,7 @@ function selectColthesType(val) {
font-size: 28rpx;
}
.container {
width: 323*2rpx;
width: 323 * 2rpx;
display: flex;
justify-content: center;
align-items: flex-start;
@@ -137,12 +185,13 @@ function selectColthesType(val) {
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 60rpx;
}
.clothes {
width: 480rpx;
height: 700rpx;
background: #000;
border: 0.5px solid #000;
margin-top: 50rpx;
}
.clothes {
width: 480rpx;
height: 700rpx;
background: #000;
border: 0.5px solid #000;
margin-top: 50rpx;
}
</style>