108 lines
2.5 KiB
Vue
108 lines
2.5 KiB
Vue
<!--
|
|
* @Author: liguigong liguigong@shopline.com
|
|
* @Date: 2025-09-19 16:26:36
|
|
* @LastEditors: liguigong liguigong@shopline.com
|
|
* @LastEditTime: 2025-10-11 10:51:04
|
|
* @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="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');
|
|
|
|
const isOpened = window.location.href.includes('open=1')
|
|
console.log('isOpened: ', isOpened);
|
|
|
|
const tabs = isOpened ? fittingRoom.tabs.slice(-1):fittingRoom.tabs
|
|
|
|
|
|
|
|
console.log('fittingRoom.tab: ', fittingRoom.tab);
|
|
console.log('fittingRoom.tabs: ', fittingRoom.tabs);
|
|
|
|
function changeTab(index) {
|
|
console.log('当前选中的项：' + index);
|
|
fittingRoom.changeTab(index);
|
|
}
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.tabContainer {
|
|
height: 130rpx;
|
|
background: #000;
|
|
width: 100%;
|
|
overflow: hidden;
|
|
|
|
.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>
|