teambuy-front/pages/index/category.vue

const DEFAULT_OPEN = 1

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

		<!-- 搜索栏 -->
		<view class="search">
			<image src="/static/image/logo.webp" mode="aspectFill" class="search-img" />
			<view style="position: relative;">
				<uv-search placeholder="陕西苹果" bgColor="#fff" @search="search" @change="search" @custom="search"
					:searchIconSize="40" v-model="queryParams.title" height="75rpx" :showAction="false"
					actionText=" " />
				<text class="search-text" @tap="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"
					@tap="clickTabs"></uv-tabs>
			</view> -->

			<uv-vtabs :list="category" :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'
				}" :current="currentChildren" keyName="name" :chain="false" @change="change">

				<uv-vtabs-item>
					<view class="category-item">
						<!-- 这里加载更多数据需要你使用scroll-view 因为你的列表在uv-vtabs里面 -->
						
						<scroll-view 
							scroll-y="true" 
							@scrolltolower="loadMoreData"
							style="height: calc(100vh - 470rpx);"
						>
							<productItem 
								:item="pro" 
								:key="i"
								v-for="(pro, i) in list" 
								@tap="navigateToDetail(pro.id)"
								@purchase="navigateToDetail(pro.id, true)"
							 />

							 <view style="padding-top: 100rpx;">
								 <uv-empty v-if="list.length == 0"  text="还没有菜品哦" />
							 </view>
						</scroll-view>
						

					</view>
				</uv-vtabs-item>
			</uv-vtabs>
			
		</view>

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

<script>
import productItem from '@/components/product/productItem.vue';

// list再这里定义了
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: '',
			// current: 0,
			currentChildren: 0
		}
	},
	computed: {
		...mapState(['category']),
	},
	onLoad() {
		if(this.category[this.currentChildren]){
			this.queryParams.categoryId = this.category[this.currentChildren].id
		}else{
			this.$store.commit('getCategoryList', data => {
				this.queryParams.categoryId = data[this.currentChildren].id
				this.mixinsListApi = 'queryGoodsList'
				this.getData()
			})
		}
	},
	methods: {
		change(e) {
			this.currentChildren = e
			// 重新加载数据
			this.queryParams.categoryId = this.category[e].id
			this.getData()
		},
		search() {
			// for (let i = 0; i < 10; i++) {
			// 	delete this.queryParams[i]
			// }
			// this.queryParams.pageSize = 10
			this.getData()
		},
		navigateToDetail(id, open) {
			this.$utils.navigateTo(`/pages_order/product/productDetail?id=${id}&open=${open}`);
		}
	},
}
</script>

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

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

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

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

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

		.search-img {
			width: 120rpx;
			height: 120rpx;
			margin: 40rpx 0 10rpx 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>