massage-front/pages/index/category.vue

<template>
	<view class="page">
		<!-- 导航栏 -->
		<navbar title="商品" class="nav-bar"
			leftClick 
			@leftClick="$utils.navigateBack" 
			bgColor="#E3441A" 
			color="#fff" 
		/>

		<!-- 搜索栏 -->
		<view class="search">
			<uv-search 
				v-model="queryParams.title"
				placeholder="搜索项目名称" 
				bgColor="#F5F5F5" 
				inputAlign="center"
				:showAction="false"
				@search="search" 
				@change="search" 
				@custom="search"
			></uv-search>
		</view>
		
		<!-- 商品列表 -->
		<view v-if="queryParams.title" >
			<productCard v-for="item in list" :data="item" :key="item.id"></productCard>
		</view>

		<!-- 分类商品列表 -->
		<!-- todo: check chain? -->
		<view v-else class="" >

			<uv-vtabs
				:list="categoryList" 
				keyName="name" 
				:current="current"
				:chain="true"
				@change="change"
				
				barWidth="177rpx"
				barBgColor="#F5F5F5"
				:barItemStyle="{
					color: '#000000',
					fontSize: '28rpx',
					fontWeight: 700,
				}"
				:barItemActiveStyle="{
					color: '#84A73F',
					backgroundColor: '#FFFFFF',
				}"
				:barItemActiveLineStyle="{
					backgroundImage: 'linear-gradient(#84A73F, #D8FF8F)',
					margin: '25rpx 3rpx',
				}"
			>
				<uv-vtabs-item v-for="(item, index) in categoryList" :index="index" :key="item.id">
					<template v-if="item.childrens.length">
						<productCard 
							v-for="product in item.childrens" 
							:key="product.id"
							:data="product" 
							direction="vertical"
						></productCard>
					</template>
					<template v-else>
						<uv-empty text="还没有呢"/>
					</template>
				</uv-vtabs-item>
			</uv-vtabs>
		</view>

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

<script>
	import productCard from '@/components/product/productCard.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: {
			productCard,
			tabber,

			productList,
		},
		data() {
			return {
				current : 0,
				queryParams: {
					pageNo: 1,
					pageSize: 10,
					title: null,
				},
				categoryList: []
			}
		},
		computed: {
			mixinsListApi() {
				return this.queryParams.title ? 'queryProductList' : ''
			}
		},
		onShow() {

		},
		onLoad({
			search,
			cid
		}) {

			if (search) {
				this.queryParams.title = search
			}

			this.initList()

			return
			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: {
			async fetchCategoryList() {
				try {
					return (await this.$fetch('getCategoryList', { pageSize: 1000 }))?.records?.map(item => ({ id: item.id, name: item.name, childrens: [] }))
				} catch(err) {
					return []
				}
			},
			async queryProductList(categoryId) {
				try {
					return (await this.$fetch('queryProductList', { categoryId, pageSize: 1000 }))?.records || []
				} catch (err) {
					return []
				}
			},
			async initList() {
				this.categoryList = await this.fetchCategoryList()

				this.categoryList.forEach(async (category) => {
					category.childrens = await this.queryProductList(category.id)
				})
			},
			change(e) {
				this.current = e
			},
			search(){
				for(let i = 0;i < 10;i++){
					delete this.queryParams[i]
				}
				this.queryParams.pageSize = 10
				this.getData()
			},
		}
	}
</script>

<style scoped lang="scss">
	.page {
		
    min-height: 100vh;
		background-color: #FFFFFF;

		/deep/ .nav-bar__view {
			background-image: linear-gradient(#84A73F, #D8FF8F);
		}

		.search {
			position: relative;
			background: #F5F5F5;
			margin: 15rpx 30rpx;
			border-radius: 41rpx;
			padding: 10rpx 20rpx;
			display: flex;
			align-items: center;
		}

		$search-height: 108rpx;
		$list-height: calc(#{$body-height} - #{$search-height});

		/deep/ .uv-vtabs,
		/deep/ .uv-vtabs__bar,
		/deep/ .uv-vtabs__content {
			height: $list-height !important;
		}

		/deep/ .uv-vtabs {
			background-color: #F5F5F5;
			overflow: hidden;
		}

		/deep/ .uv-vtabs__bar {
			// box-shadow: 0rpx 3rpx 6rpx 0rpx rgba(0,0,0,0.16); 
			box-shadow: 0px 3px 6px 0px rgba(0,0,0,0.16); 
		}

		/deep/ .uv-vtabs__content {
			margin-left: 6px;
			margin-right: 10rpx;

			.product-card__view {
				width: calc(100vw - 177rpx - 6px - 10rpx);
			}
		}

		/deep/ .uv-vtabs__bar-item {
			padding: 25rpx 0 !important;
			text-align: center;
		}

		&::v-deep .uv-vtabs__content {
			background: #F5F5F5 !important;
			// overflow: hidden;
		}
	}

	.category {
		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%;
			}
		}
		
		&::v-deep .uv-vtabs {
			width: 750rpx;
			overflow: hidden;
		}
		
		.list {
			width: 100%;
			padding: 0rpx 20rpx;
			box-sizing: border-box;
		}

	}
</style>