teambuy-front/pages/index/category-test.vue

<template>
    <view class="page">
        <!-- 导航栏 -->
        <!-- <navbar   bgColor="#019245" color="#fff" /> -->

        <!-- 搜索栏 -->
        <view class="search">
            <image src="/static/image/中森明菜.webp" mode="aspectFill" class="search-img"></image>
            <view style="position: relative;">
                <uv-search placeholder="陕西苹果" bgColor="#fff" @search="search" @change="search" @custom="search"
                    v-model="queryParams.title" height="70rpx" :showAction="false" actionText=" "></uv-search>
                <text class="search-text" @click="search">搜索</text>
            </view>
        </view>

        <!-- 商品列表 -->
        <view style="position: 20rpx;" v-if="queryParams.title">
            <productList :list="list" />
        </view>

        <!-- 分类商品列表 -->
        <view class="category" v-else>

            <view class="tabs">
                <uv-tabs :list="category" :activeStyle="{ color: '#f00', fontWeight: 600 }" lineColor="#f00"
                    :inactiveStyle="{ color: 'rgba(0,0,0,.8)' }" lineHeight="8rpx" lineWidth="50rpx" :current="current"
                    @click="clickTabs"></uv-tabs>
            </view>

            <!-- 原来的选择框 -->
            <uv-vtabs :list="category[current].children" :current="currentChildren" keyName="name" :chain="false"
                @change="change">
                <!-- 可有可无 -->
                <!-- <view class="list">
					<template v-for="(item, index) in category[current].children">
						<uv-vtabs-item :index="index" :key="index">
							<view class="category-item">
								<view class="category-title">
									{{ item.name }}
								</view>
								
								<productItem :item="pro"
								v-for="(pro, i) in item.shopList" :key="i"
								@click="$utils.navigateTo(`/pages_order/product/productDetail?id=${pro.id}`)" />
							</view>
						</uv-vtabs-item>
					</template>
</view> -->

                <uv-vtabs-item>
                    <view class="category-item">
                        <productItem :item="pro" v-for="(pro, i) in categoryList.shopList" :key="i"
                            @click="$utils.navigateTo(`/pages_order/product/productDetail?id=${pro.id}`)" />

                        <uv-empty v-if="categoryList.shopList.length == 0" text="还没有呢" />
                    </view>
                </uv-vtabs-item>
            </uv-vtabs>
            <!-- <view class="content">
				<uv-vtabs :chain="chain" :list="list" 
					:barItemBadgeStyle="{ 
						right: '20rpx', 
						top: '12rpx' 
					}"
					:barStyle="{
						boxShadow: '0 0 18rpx 0rpx rgba(0, 0, 0, 0.1)',
						fontWeight: '600',
						textAlign: 'center',
						backgroundColor: '#F5F5F5',
						
					}"
					:barItemStyle="{
						color: 'black'
					}"	
					:barItemActiveLineStyle="{ 
						height: '35%',
						top: '32.5%',
						bottom: 'auto',
						left: '2%',
						borderRadius: '4rpx',
						width: '8rpx'
					}"
					@change="tabChange" height="1100rpx">
					<uv-vtabs-item>
						 <view class="item" v-for="(item2, index2) in list2" :key="index2">
							<view class="item-title">
								<text class="text">{{ item2.name }}</text>
							</view>
							<view class="item-content">
								<text class="text">{{ item2.desc }}</text>
							</view>
						</view> -->
            <view class="category-item">
                <productItem :item="item2" v-for="(item2, i) in list2" :key="i"
                    @click="$utils.navigateTo(`/pages_order/product/productDetail?id=${item2.id}`)" />

                <uv-empty v-if="list2.length == 0" text="还没有呢" />
            </view>
            </uv-vtabs-item>
            </uv-vtabs>
        </view>
    </view>

    <!-- tabbar -->
    <tabber select="category" />
    </view>
</template>

<script>
import productItem from '@/components/product/productItem.vue';
import mixinsList from '@/mixins/list.js'
import {
    mapState
} from 'vuex'
import tabber from '@/components/base/tabbar.vue'
import productList from '@/components/user/productList.vue'
export default {
    mixins: [mixinsList],
    components: {
        productItem,
        tabber,
        productList,
    },
    data() {
        return {
            mixinsListApi: 'getClassShopPageList',
            current: 0,
            currentChildren: 0,
        }
    },
    computed: {
        ...mapState(['category']),
        categoryList() {
            return this.category[this.current]?.children?.[this.currentChildren] || {};
        },
    },
    onLoad({
        search,
        cid
    }) {
        console.log('我是cid', cid);
        console.log('我是category', this.category);
        if (search) {
            this.queryParams.title = search
        }


        if (this.category.length > 0 && cid) {
            this.category.forEach((n, i) => {
                if (n.id == cid) {
                    this.current = i
                }
            })
            // this.queryParams.classId = cid
        } else if (this.category.length > 0) {
            // this.queryParams.classId = this.category[0].id
        }
    },
    methods: {
        change(e) {
            // this.queryParams.classId = this.category[e].id
            this.currentChildren = e

        },
        tabChange(index) {
            console.log('选项改变：', index);
            this.value = index
        },
        clickTabs({ index }) {
            this.current = index
            this.currentChildren = 0
            console.log(this.category, this.category[index].children);

        },
        search() {
            for (let i = 0; i < 10; i++) {
                delete this.queryParams[i]
            }
            this.queryParams.pageSize = 10
            this.getData()
        },
    }
}
</script>

<style scoped lang="scss">
.page {

    // background-color: #f5f5ff;
    /deep/ .uv-vtabs {
        height: calc(100vh - 470rpx) !important;
    }

    // /deep/ .uv-vtabs__bar {
    // 	height: calc(100vh - 600rpx) !important;
    // }

    /deep/ .uv-vtabs__content {
        height: calc(100vh - 500rpx) !important;
    }

    .search {
        background: $uni-color;
        height: 280rpx;
        padding-left: 20rpx;

        .search-img {
            width: 120rpx;
            height: 120rpx;
            margin: 40rpx 0 0 10rpx;
            border-radius: 50%;
        }

        .search-text {
            position: absolute;
            right: 80rpx;
            top: 50%;
            transform: translateY(-50%);
            color: $uni-color;
        }

        /deep/ .uv-search__action {
            background-color: $uni-color;
            color: #FFFFFF;
            padding: 10rpx 20rpx;
            border-radius: 30rpx;
        }
    }

    /deep/ .uv-vtabs__content {
        background: transparent !important;
        overflow: hidden;
    }
}

.header {
    padding: 30rpx;
    font-size: 30rpx;
    color: #333;
}

.item {
    padding: 10rpx 20rpx;

    &-title {
        .text {
            font-weight: 700;
            font-size: 32rpx;
            color: #111;
        }
    }

    &-content {
        padding: 20rpx 0;

        .text {
            line-height: 48rpx;
            font-size: 30rpx;
            color: #111;
            /* #ifndef APP-NVUE */
            word-break: break-all;
            /* #endif */
        }
    }
}

.gap {
    padding: 0 30rpx;
}

.category {
    /* background-color: green; */
    font-size: 30rpx;
    color: #333;

    .category-title {
        position: relative;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 120rpx;

        &::before,
        &::after {
            position: absolute;
            top: 50%;
            content: '';
            width: 10%;
            border-top: 2rpx solid black;
        }

        &::before {
            left: 25%;
        }

        &::after {
            right: 25%;
        }
    }

    /deep/ .uv-vtabs {
        width: 750rpx;
        overflow: hidden;
    }

    .list {
        width: 100%;
        padding: 0rpx 20rpx;
        box-sizing: border-box;
    }

}

.header {
    padding: 30rpx;
    font-size: 30rpx;
    color: #333;
}

.item {
    padding: 10rpx 20rpx;

    &-title {
        .text {
            font-weight: 700;
            font-size: 32rpx;
            color: #111;
        }
    }

    &-content {
        padding: 20rpx 0;

        .text {
            line-height: 48rpx;
            font-size: 30rpx;
            color: #111;
            /* #ifndef APP-NVUE */
            word-break: break-all;
            /* #endif */
        }
    }
}

.gap {
    padding: 0 30rpx;
}
</style>