|
|
- <template>
- <view>
- <view class="tabs">
- <uv-tabs
- :list="tabs"
- :activeStyle="{
- 'font-family': 'PingFang SC',
- 'font-weight': 600,
- 'font-size': '28rpx',
- 'line-height': 1.5,
- 'color': '#FFFFFF',
- 'background-color': '#252545',
- 'border-radius': '32rpx',
- 'padding': '9rpx 40rpx',
- }"
- :inactiveStyle="{
- 'font-family': 'PingFang SC',
- 'font-weight': 400,
- 'font-size': '28rpx',
- 'line-height': 1.5,
- 'color': '#252545',
- 'background-color': '#E5E4EB',
- 'border-radius': '32rpx',
- 'padding': '9rpx 40rpx',
- }"
- lineWidth="0"
- lineHeight="0"
- @change="onLevel1TabChange"
- ></uv-tabs>
- <view v-if="tabs[level1] && tabs[level1].children && tabs[level1].children.length"
- class="tabs-second"
- >
- <uv-tabs
- :list="tabs[level1].children"
- :activeStyle="{
- 'font-family': 'PingFang SC',
- 'font-weight': 600,
- 'font-size': '28rpx',
- 'line-height': 1.5,
- 'color': '#7451DE',
- }"
- :inactiveStyle="{
- 'font-family': 'PingFang SC',
- 'font-weight': 400,
- 'font-size': '28rpx',
- 'line-height': 1.5,
- 'color': '#252545',
- }"
- lineWidth="0"
- lineHeight="0"
- @change="onLevel2TabChange"
- ></uv-tabs>
- </view>
- </view>
- <view class="content">
- <view v-for="item in list" :key="item.id">
- <productCard
- :data="item"
- cardStyle="width: 100%; height: 210px;"
- imgStyle="width: 100%; height: 110px;"
- ></productCard>
- </view>
- </view>
- </view>
- </template>
-
- <script>
- import productCard from '@/pages_order/product/productCard.vue'
-
- export default {
- components: {
- productCard,
- },
- data() {
- return {
- tabs: [],
- level1: 0,
- level2: null,
- list: [],
- }
- },
- mounted() {
- let children = [
- { name: '草本类' },
- { name: '蔬菜类' },
- { name: '维生素类' },
- { name: '草本类' },
- { name: '蔬菜类' },
- ]
-
- this.tabs = [
- { name: '全部' },
- { name: '皮肤', children, },
- { name: '身材管理', children, },
- { name: '精力', children, },
- ]
-
- this.list = [
- {
- id: '001',
- url: '/pages_order/static/index/recommend-pic.png',
- name: '月度装定制营养包',
- sales: 24770,
- price: 688.00,
- originalPrice: 1664,
- },
- {
- id: '002',
- url: '/pages_order/static/index/recommend-pic.png',
- name: '月度装定制营养包',
- sales: 24770,
- price: 688.00,
- originalPrice: 1664,
- },
- {
- id: '003',
- url: '/pages_order/static/index/recommend-pic.png',
- name: '月度装定制营养包',
- sales: 24770,
- price: 688.00,
- originalPrice: 1664,
- },
- ]
- },
- methods: {
- onLevel1TabChange(e) {
- console.log('level1', e.index)
- this.level1 = e.index
- this.level2 = this.tabs[this.level1].children?.length ? 0 : null
- // todo
- },
- onLevel2TabChange(e) {
- console.log('level2', e.index)
- this.level2 = e.index
- // todo
- },
- },
- }
- </script>
-
- <style scoped lang="scss">
- .tabs {
- margin: 0 5px;
-
- &-second {
- margin: 0 11px;
- padding-left: 9px;
- background: #E5E4EB;
- border-radius: 16rpx;
- }
- }
-
- .content {
- padding: 24rpx 32rpx;
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 32rpx;
- }
- </style>
|