feat(fittingRoom): 实现衣服数据获取与tab切换功能
新增 fittingRoom 接口调用逻辑,支持根据 tab 类型加载对应衣服列表。 在 store 中增加 `clothes` 数据字段,并通过 `getCloths` 方法请求数据。页面组件中更新 tab 切换逻辑以触发数据刷新,并调整模板绑定方式。 添加 `tabsMap` 映射表用于匹配接口所需 clothType 参数。
This commit is contained in:
@@ -32,3 +32,6 @@ https://www.kdocs.cn/l/cdrvvpi9CKNe?f=301
|
|||||||
https://puton.huimeimeta.com
|
https://puton.huimeimeta.com
|
||||||
|
|
||||||
Authorization:94b8abbcb37c44f6aa74ec7678da8c2a
|
Authorization:94b8abbcb37c44f6aa74ec7678da8c2a
|
||||||
|
|
||||||
|
|
||||||
|
https://puton.meidaojia.com/
|
||||||
|
|||||||
@@ -2,7 +2,7 @@
|
|||||||
* @Author: liguigong liguigong@shopline.com
|
* @Author: liguigong liguigong@shopline.com
|
||||||
* @Date: 2025-09-19 16:26:36
|
* @Date: 2025-09-19 16:26:36
|
||||||
* @LastEditors: liguigong liguigong@shopline.com
|
* @LastEditors: liguigong liguigong@shopline.com
|
||||||
* @LastEditTime: 2025-09-19 17:56:16
|
* @LastEditTime: 2025-09-22 19:17:46
|
||||||
* @FilePath: pages/fittingRoom/components/STabs.vue
|
* @FilePath: pages/fittingRoom/components/STabs.vue
|
||||||
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
|
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
|
||||||
-->
|
-->
|
||||||
@@ -43,6 +43,7 @@
|
|||||||
|
|
||||||
function changeTab(index) {
|
function changeTab(index) {
|
||||||
console.log('当前选中的项:' + index);
|
console.log('当前选中的项:' + index);
|
||||||
|
fittingRoom.changeTab(index);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
|
|||||||
@@ -1,21 +1,25 @@
|
|||||||
<!--
|
<!--
|
||||||
* @Author: liguigong liguigong@shopline.com
|
* @Author: liguigong liguigong@shopline.com
|
||||||
* @Date: 2025-09-19 16:26:36
|
* @Date: 2025-09-19 16:26:36
|
||||||
* @LastEditors:
|
* @LastEditors: liguigong liguigong@shopline.com
|
||||||
* @LastEditTime: 2025-09-19 22:34:40
|
* @LastEditTime: 2025-09-22 19:35:35
|
||||||
* @FilePath: pages/fittingRoom/components/s-grid-clothes.vue
|
* @FilePath: pages/fittingRoom/components/s-grid-clothes.vue
|
||||||
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
|
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
|
||||||
-->
|
-->
|
||||||
<template>
|
<template>
|
||||||
<view class="tabContainer">
|
<view class="tabContainer">
|
||||||
<uni-grid :column="4" :highlight="true" :square="false" borderColor="#000" @change="change">
|
<uni-grid :column="4" :highlight="true" :square="false" borderColor="#000" @change="change">
|
||||||
<uni-grid-item v-for="(item, index) in 7" :key="index" :index="index + 100">
|
<uni-grid-item
|
||||||
|
v-for="(item, index) in fittingRoomStore.clothes"
|
||||||
|
:key="index"
|
||||||
|
:index="index + 100"
|
||||||
|
>
|
||||||
<view class="grid-item-box" style="background-color: #fff">
|
<view class="grid-item-box" style="background-color: #fff">
|
||||||
<view v-if="index == 3" class="inUse">
|
<view v-if="index == 3" class="inUse">
|
||||||
<view class="edit" @click="goEdit">编辑</view>
|
<view class="edit" @click="goEdit">编辑</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<template v-if="fittingRoom.canUpload && index === 0">
|
<template v-if="fittingRoomStore.canUpload && index === 0">
|
||||||
<image
|
<image
|
||||||
class="clothes"
|
class="clothes"
|
||||||
mode="aspectFill"
|
mode="aspectFill"
|
||||||
@@ -44,10 +48,10 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
|
|
||||||
const fittingRoom = sheep.$store('fittingRoom');
|
const fittingRoomStore = sheep.$store('fittingRoom');
|
||||||
|
|
||||||
function selectPic(...data) {
|
function selectPic(...data) {
|
||||||
console.log(fittingRoom.tab);
|
console.log(fittingRoomStore.tab);
|
||||||
console.log('🚀 ~ selectPic 🐶47 ~ data: ', data);
|
console.log('🚀 ~ selectPic 🐶47 ~ data: ', data);
|
||||||
}
|
}
|
||||||
|
|
||||||
@@ -64,7 +68,7 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
function change(e) {
|
function change(e) {
|
||||||
fittingRoom.changeClothes();
|
fittingRoomStore.changeClothes();
|
||||||
console.log('🚀 ~ change 🐶25 ~ index: ', e.detail.index);
|
console.log('🚀 ~ change 🐶25 ~ index: ', e.detail.index);
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
+15
-28
@@ -3,19 +3,19 @@
|
|||||||
<view class="uni-margin-wrap">
|
<view class="uni-margin-wrap">
|
||||||
<!-- https://ext.dcloud.net.cn/plugin?id=22930-->
|
<!-- https://ext.dcloud.net.cn/plugin?id=22930-->
|
||||||
<hbxw-stack-carousel
|
<hbxw-stack-carousel
|
||||||
@click="handleItemClick"
|
:key="state.info"
|
||||||
|
:height="680"
|
||||||
:interval="15000"
|
:interval="15000"
|
||||||
:list="state.info"
|
:list="state.info"
|
||||||
:width="430"
|
:width="430"
|
||||||
:height="680"
|
|
||||||
loop
|
|
||||||
:key="state.info"
|
|
||||||
indicatorStyle="line"
|
indicatorStyle="line"
|
||||||
|
loop
|
||||||
@change="handleChange"
|
@change="handleChange"
|
||||||
|
@click="handleItemClick"
|
||||||
>
|
>
|
||||||
<template #default="{ item, index }">
|
<template #default="{ item, index }">
|
||||||
<view class="custom-item">
|
<view class="custom-item">
|
||||||
<image class="swiper-image" :src="item.image" mode="aspectFill" />
|
<image :src="item.image" class="swiper-image" mode="aspectFill" />
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
</hbxw-stack-carousel>
|
</hbxw-stack-carousel>
|
||||||
@@ -35,9 +35,10 @@
|
|||||||
import sheep from '@/sheep';
|
import sheep from '@/sheep';
|
||||||
import SSelectMote from './components/s-select-mote.vue';
|
import SSelectMote from './components/s-select-mote.vue';
|
||||||
import STabs from './components/STabs.vue';
|
import STabs from './components/STabs.vue';
|
||||||
import SGridClothes from './components/s-grid-clothes.vue'; // 隐藏原生tabBar
|
import SGridClothes from './components/s-grid-clothes.vue';
|
||||||
|
import FittingRoomApi from '../../sheep/api/fittingRoom'; // 隐藏原生tabBar
|
||||||
|
|
||||||
const fittingRoom = sheep.$store('fittingRoom');
|
const fittingRoomStore = sheep.$store('fittingRoom');
|
||||||
|
|
||||||
sheep.$helper.toast('请选择是否同意协议');
|
sheep.$helper.toast('请选择是否同意协议');
|
||||||
// 隐藏原生tabBar
|
// 隐藏原生tabBar
|
||||||
@@ -49,23 +50,9 @@
|
|||||||
console.log(index, item, '12');
|
console.log(index, item, '12');
|
||||||
}
|
}
|
||||||
|
|
||||||
const carouselList = [
|
fittingRoomStore.getCloths().then((res) => {
|
||||||
{
|
console.log(res, 'res');
|
||||||
image: 'https://picsum.photos/600/300?random=1',
|
});
|
||||||
},
|
|
||||||
{
|
|
||||||
image: 'https://picsum.photos/600/300?random=2',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: 'https://picsum.photos/600/300?random=3',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: 'https://picsum.photos/600/300?random=4',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
image: 'https://picsum.photos/600/300?random=5',
|
|
||||||
},
|
|
||||||
];
|
|
||||||
|
|
||||||
const state = reactive({
|
const state = reactive({
|
||||||
info: [
|
info: [
|
||||||
@@ -77,14 +64,14 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
image: 'https://picsum.photos/600/300?random=3',
|
image: 'https://picsum.photos/600/300?random=3',
|
||||||
}
|
},
|
||||||
],
|
],
|
||||||
current: 0,
|
current: 0,
|
||||||
});
|
});
|
||||||
function handleChange(index, oldIndex) {
|
function handleChange(index, oldIndex) {
|
||||||
// state.current = index;
|
// state.current = index;
|
||||||
console.log('---- change ----', index, oldIndex)
|
console.log('---- change ----', index, oldIndex);
|
||||||
};
|
}
|
||||||
|
|
||||||
function dian() {
|
function dian() {
|
||||||
state.info = [
|
state.info = [
|
||||||
@@ -103,7 +90,7 @@
|
|||||||
{
|
{
|
||||||
image: 'https://picsum.photos/600/300?random=5',
|
image: 'https://picsum.photos/600/300?random=5',
|
||||||
},
|
},
|
||||||
]
|
];
|
||||||
}
|
}
|
||||||
const swiperChange = (e) => {
|
const swiperChange = (e) => {
|
||||||
state.current = e.detail.current;
|
state.current = e.detail.current;
|
||||||
|
|||||||
@@ -0,0 +1,69 @@
|
|||||||
|
/**
|
||||||
|
* @Author: liguigong liguigong@shopline.com
|
||||||
|
* @Date: 2025-09-23 09:41:10
|
||||||
|
* @LastEditors: liguigong liguigong@shopline.com
|
||||||
|
* @LastEditTime: 2025-09-23 09:41:23
|
||||||
|
* @FilePath: sheep/api/fittingRoom/index.js
|
||||||
|
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
|
||||||
|
*/
|
||||||
|
import request from '@/sheep/request';
|
||||||
|
|
||||||
|
const FittingRoomApi = {
|
||||||
|
getClothList: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/api/cloth/list',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
addHairApi: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/userinfo/add_hair_data',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
getStyleApi: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/userinfo/get_user_face_info',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
praiseTextApi: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/ai/praiseTexttwo',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
wardrobeListApi: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/wardrobe/clothes_list',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
exchangeHairApi: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/api/v1/test/exchangeHair',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
exchangeHairHistoryByTaskId: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/api/v1/test/exchangeHairHistoryByTaskId',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
hairStyleListApi: (data) => {
|
||||||
|
return request({
|
||||||
|
url: '/api/v1/test/getHairDetails',
|
||||||
|
method: 'POST',
|
||||||
|
data: data,
|
||||||
|
});
|
||||||
|
},
|
||||||
|
};
|
||||||
|
export default FittingRoomApi;
|
||||||
+17
-17
@@ -122,23 +122,23 @@ http.interceptors.response.use(
|
|||||||
response.config.custom.showLoading && closeLoading();
|
response.config.custom.showLoading && closeLoading();
|
||||||
|
|
||||||
// 自定义处理【error 错误提示】:如果需要显示错误提示,则显示错误提示
|
// 自定义处理【error 错误提示】:如果需要显示错误提示,则显示错误提示
|
||||||
if (response.data.code !== 0) {
|
// if (response.data.code !== 0) {
|
||||||
// 特殊:如果 401 错误码,则跳转到登录页 or 刷新令牌
|
// // 特殊:如果 401 错误码,则跳转到登录页 or 刷新令牌
|
||||||
if (response.data.code === 401) {
|
// if (response.data.code === 401) {
|
||||||
return refreshToken(response.config);
|
// return refreshToken(response.config);
|
||||||
}
|
// }
|
||||||
// 特殊:处理分销用户绑定失败的提示
|
// // 特殊:处理分销用户绑定失败的提示
|
||||||
if ((response.data.code + '').includes('1011007')) {
|
// if ((response.data.code + '').includes('1011007')) {
|
||||||
console.error(`分销用户绑定失败,原因:${response.data.msg}`);
|
// console.error(`分销用户绑定失败,原因:${response.data.msg}`);
|
||||||
} else if (response.config.custom.showError) {
|
// } else if (response.config.custom.showError) {
|
||||||
// 错误提示
|
// // 错误提示
|
||||||
uni.showToast({
|
// uni.showToast({
|
||||||
title: response.data.msg || '服务器开小差啦,请稍后再试~',
|
// title: response.data.msg || '服务器开小差啦,请稍后再试~',
|
||||||
icon: 'none',
|
// icon: 'none',
|
||||||
mask: true,
|
// mask: true,
|
||||||
});
|
// });
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
|
|
||||||
// 自定义处理【showSuccess 成功提示】:如果需要显示成功提示,则显示成功提示
|
// 自定义处理【showSuccess 成功提示】:如果需要显示成功提示,则显示成功提示
|
||||||
if (
|
if (
|
||||||
|
|||||||
@@ -1,5 +1,8 @@
|
|||||||
import { defineStore } from 'pinia';
|
import { defineStore } from 'pinia';
|
||||||
import app from './app';
|
import app from './app';
|
||||||
|
import FittingRoomApi from '../api/fittingRoom';
|
||||||
|
|
||||||
|
const tabsMap = [undefined, 'topCloth', 'bottomCloth', 'dress', 'suit', 'hair'];
|
||||||
|
|
||||||
export const pattern = [
|
export const pattern = [
|
||||||
{ value: 'body', label: '腰部以上'},
|
{ value: 'body', label: '腰部以上'},
|
||||||
@@ -21,7 +24,8 @@ const fittingRoom = defineStore({
|
|||||||
type: true, // true: 我的衣橱, false: 衣服库
|
type: true, // true: 我的衣橱, false: 衣服库
|
||||||
tab: 0, // 对应下面tabs的序号
|
tab: 0, // 对应下面tabs的序号
|
||||||
tabs: ['全部', '上衣', '下装', '连衣裙', '外套', '发型'],
|
tabs: ['全部', '上衣', '下装', '连衣裙', '外套', '发型'],
|
||||||
disableTabs: [5], // 不允许上传图的tab索引
|
disableTabs: [5], // 不允许上传图的tab索引
|
||||||
|
clothes: [], // 接口返回的衣服数据
|
||||||
currentClothes: [], // 当前选的衣服
|
currentClothes: [], // 当前选的衣服
|
||||||
selectClothesType: 1, // 选中的衣服类型, 默认选中上衣
|
selectClothesType: 1, // 选中的衣服类型, 默认选中上衣
|
||||||
selectPattern: pattern[0].value,
|
selectPattern: pattern[0].value,
|
||||||
@@ -35,13 +39,31 @@ const fittingRoom = defineStore({
|
|||||||
},
|
},
|
||||||
},
|
},
|
||||||
actions: {
|
actions: {
|
||||||
|
// 获取衣服类型数据查询
|
||||||
|
async getCloths(templateId = null) {
|
||||||
|
const httpResponse = await FittingRoomApi.getClothList({
|
||||||
|
sex: 'female',
|
||||||
|
isPerson: this.type ? 'yes' : 'no',
|
||||||
|
clothType: tabsMap[this.tab],
|
||||||
|
});
|
||||||
|
console.log('🚀 ~ getCloths 🐶33 ~ httpResponse: ', httpResponse.result);
|
||||||
|
this.clothes = httpResponse.result || [];
|
||||||
|
},
|
||||||
setVisable(visable) {
|
setVisable(visable) {
|
||||||
console.log('🚀 ~ setVisable 🐶15 ~ visable: ', visable);
|
console.log('🚀 ~ setVisable 🐶36 ~ visable: ', visable);
|
||||||
this.visable = visable ?? !this.visable;
|
this.visable = visable ?? !this.visable;
|
||||||
},
|
},
|
||||||
|
// 我的衣服库和衣橱的切换
|
||||||
changeType(visable) {
|
changeType(visable) {
|
||||||
console.log('🚀 ~ setVisable 🐶15 ~ visable: ', visable);
|
console.log('🚀 ~ setVisable 🐶40 ~ visable: ', visable);
|
||||||
this.type = visable ?? !this.type;
|
this.type = visable ?? !this.type;
|
||||||
|
this.getCloths();
|
||||||
|
},
|
||||||
|
|
||||||
|
changeTab(index) {
|
||||||
|
console.log('切换tab');
|
||||||
|
this.tab = index;
|
||||||
|
this.getCloths();
|
||||||
},
|
},
|
||||||
// 点击衣服
|
// 点击衣服
|
||||||
changeClothes() {
|
changeClothes() {
|
||||||
|
|||||||
Reference in New Issue
Block a user