liguigong
dc2426936c
新增 fittingRoom 接口调用逻辑，支持根据 tab 类型加载对应衣服列表。 在 store 中增加 `clothes` 数据字段，并通过 `getCloths` 方法请求数据。页面组件中更新 tab 切换逻辑以触发数据刷新，并调整模板绑定方式。 添加 `tabsMap` 映射表用于匹配接口所需 clothType 参数。
97 lines
2.2 KiB
Vue
97 lines
2.2 KiB
Vue
<!--
|
|
* @Author: liguigong liguigong@shopline.com
|
|
* @Date: 2025-09-19 16:26:36
|
|
* @LastEditors: liguigong liguigong@shopline.com
|
|
* @LastEditTime: 2025-09-22 19:17:46
|
|
* @FilePath: pages/fittingRoom/components/STabs.vue
|
|
* @Description: 这是默认设置,可以在设置》工具》File Description中进行配置
|
|
-->
|
|
<template>
|
|
<view class="tabContainer">
|
|
<view class="tab-top">
|
|
<view class="parent-tab" @click="() => fittingRoom.changeType()"
|
|
>{{ !fittingRoom.type ? '我的衣橱' : '衣服库' }}
|
|
</view>
|
|
<view class="title">赴宴试衣间</view>
|
|
</view>
|
|
<view class="tab-bottom">
|
|
<view class="mainTitle"
|
|
>{{ fittingRoom.type ? '我的衣橱' : '衣服库' }}
|
|
<view class="slash">/</view>
|
|
</view>
|
|
<v-tabs
|
|
v-model="fittingRoom.tab"
|
|
:lineScale="0.2"
|
|
:tabs="fittingRoom.tabs"
|
|
activeColor="#fff"
|
|
bgColor="#000000"
|
|
color="#fff"
|
|
fontSize="24rpx"
|
|
height="50rpx"
|
|
lineColor="#fff"
|
|
lineHeight="2rpx"
|
|
paddingItem="0 18rpx"
|
|
@change="changeTab"
|
|
></v-tabs>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
<script setup>
|
|
import sheep from '@/sheep';
|
|
|
|
const fittingRoom = sheep.$store('fittingRoom');
|
|
|
|
function changeTab(index) {
|
|
console.log('当前选中的项：' + index);
|
|
fittingRoom.changeTab(index);
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.tabContainer {
|
|
height: 130rpx;
|
|
background: #000;
|
|
width: 100%;
|
|
|
|
.tab-top {
|
|
margin: 18rpx 0 14rpx;
|
|
color: rgba(255, 255, 255, 0.5);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
position: relative;
|
|
|
|
.parent-tab {
|
|
position: absolute;
|
|
font-size: 20rpx;
|
|
left: 0;
|
|
top: 0;
|
|
width: 180rpx;
|
|
text-align: center;
|
|
}
|
|
|
|
.title {
|
|
font-size: 24rpx;
|
|
}
|
|
}
|
|
|
|
.tab-bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.mainTitle {
|
|
flex: 0 0 180rpx;
|
|
color: #ffffff;
|
|
font-size: 26rpx;
|
|
text-align: center;
|
|
position: relative;
|
|
|
|
.slash {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 0;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|