liguigong
cad438514d
- 新增上传模特图片接口及调用逻辑- 更新模特展示组件，支持动态显示模特缩略图 - 添加获取衣服分类接口及初始化调用- 配置.editorconfig统一代码风格 - 移除调试用的console.log及token写死逻辑 - 修复部分组件引用及生命周期调用问题
109 lines
3.2 KiB
JavaScript
109 lines
3.2 KiB
JavaScript
import { defineStore } from 'pinia';
|
|
import app from './app';
|
|
import FittingRoomApi from '../api/fittingRoom';
|
|
|
|
const tabsMap = [undefined, 'topCloth', 'bottomCloth', 'dress', 'suit', 'hair'];
|
|
|
|
export const pattern = [
|
|
{ value: 'body', label: '腰部以上' },
|
|
{ value: 'waist', label: '腰' },
|
|
{ value: 'thigh', label: '跨' },
|
|
{ value: 'thigh1', label: '大腿上部1/3' },
|
|
{ value: 'thigh2', label: '大腿中部' },
|
|
{ value: 'knee', label: '膝盖' },
|
|
{ value: 'leg', label: '小腿' },
|
|
{ value: 'leg1', label: '小腿上部1/3' },
|
|
{ value: 'foot', label: '脚踝' },
|
|
{ value: 'mopping', label: '拖地' },
|
|
];
|
|
|
|
const fittingRoom = defineStore({
|
|
id: 'fittingRoom',
|
|
state: () => ({
|
|
visable: false, // 上传模特, 选模特的
|
|
modelList: [], // 模特列表
|
|
currentModel: {},
|
|
type: true, // true: 我的衣橱, false: 衣服库
|
|
tab: 0, // 对应下面tabs的序号
|
|
tabs: ['全部', '上衣', '下装', '连衣裙', '外套', '套装', '发型'],
|
|
disableTabs: [6], // 不允许上传图的tab索引
|
|
clothes: [], // 接口返回的衣服数据
|
|
currentClothes: [], // 当前选的衣服
|
|
selectClothesType: 1, // 选中的衣服类型, 默认选中上衣
|
|
selectPattern: pattern[0].value,
|
|
sex: 'female',
|
|
}),
|
|
getters: {
|
|
// 能上传图片的场景
|
|
canUpload(state) {
|
|
console.log(this.type, this.tab, state.type, '123');
|
|
// 除了发型其他都能上传
|
|
return this.type && !this.disableTabs.includes(this.tab);
|
|
},
|
|
},
|
|
actions: {
|
|
// 获取衣服分类
|
|
async getCategory(templateId = null) {
|
|
const httpResponse = await FittingRoomApi.getCategory();
|
|
this.clothes = httpResponse.result || [];
|
|
},
|
|
// 获取衣服类型数据查询
|
|
async getCloths(templateId = null) {
|
|
const httpResponse = await FittingRoomApi.getClothList({
|
|
sex: 'female',
|
|
isPerson: this.type ? 'yes' : 'no',
|
|
clothType: tabsMap[this.tab],
|
|
});
|
|
this.clothes = httpResponse.result || [];
|
|
},
|
|
// 获取模特数据查询
|
|
async getModelList(templateId = null) {
|
|
const httpResponse = await FittingRoomApi.getModelList({
|
|
sex: this.sex,
|
|
});
|
|
let modelList = (httpResponse.result || []).slice(0, 4);
|
|
this.modelList = modelList;
|
|
this.currentModel = modelList?.[0] ?? {};
|
|
},
|
|
// 切换模特
|
|
switchModels(item) {
|
|
if (item.id === this.currentModel.id) {
|
|
return;
|
|
}
|
|
// TODO:
|
|
console.log('🚀 ~ switchModels 🐶70 ~ item: ', item);
|
|
this.currentModel = item;
|
|
},
|
|
setVisable(visable) {
|
|
console.log('🚀 ~ setVisable 🐶77 ~ visable: ', visable);
|
|
this.visable = visable ?? !this.visable;
|
|
},
|
|
// 我的衣服库和衣橱的切换
|
|
changeType(visable) {
|
|
console.log('🚀 ~ setVisable 🐶82 ~ visable: ', visable);
|
|
this.type = visable ?? !this.type;
|
|
this.getCloths();
|
|
},
|
|
|
|
changeTab(index) {
|
|
console.log('切换tab');
|
|
this.tab = index;
|
|
this.getCloths();
|
|
},
|
|
// 点击衣服
|
|
changeClothes() {
|
|
console.log('切换衣服');
|
|
},
|
|
},
|
|
persist: {
|
|
enabled: true,
|
|
strategies: [
|
|
{
|
|
key: 'fittingRoom-store',
|
|
},
|
|
],
|
|
},
|
|
});
|
|
|
|
export default fittingRoom;
|