teambuy-front/pages/index/category.vue

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

		<!-- 搜索栏 -->
		<view class="search">
			<image src="/static/image/logo.png" mode="aspectFill" class="search-img"></image>
			<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=" "></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[2].children" :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">
						<productItem :item="pro" v-for="(pro, i) in categoryList.shopList" :key="i"
							@click="navigateToDetail(pro.id)" />

						<uv-empty v-if="categoryList.shopList.length == 0" text="还没有呢" />
					</view>
				</uv-vtabs-item>
			</uv-vtabs>
		</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]
			return this.category[2].children[this.currentChildren]
		},
	},
	onLoad({
		search,
		cid
	}) {
		if (search) {
			this.queryParams.title = search
		}
		// this.$store.commit('getCategoryList')
		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
		},
		clickTabs({ index }) {
			this.current = index
			this.currentChildren = 0
		},
		search() {
			for (let i = 0; i < 10; i++) {
				delete this.queryParams[i]
			}
			this.queryParams.pageSize = 10
			this.getData()
		},
		navigateToDetail(id) {
			console.log('跳转到商品详情页:', id);
		// 	uni.navigateTo({
		// 		url: `/pages_order/product/productDetail?id=${id}`
		// 	})
			this.$utils.navigateTo(`/pages_order/product/productDetail?id=${id}`);
		}
	}
}
</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>