jewelry-front/pages_order/mine/moreCommodity.vue

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

		<view class="more-commodity-header">
			<!-- 搜索栏 -->
			<view class="search">
				<uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @search="getData" @custom="getData"
					v-model="queryParams.title"></uv-search>
			</view>

			<!-- 筛选过滤 -->
			<view class="filtration">
				<view v-for="(item,index) in filtrationList" :key="index"
					:class="{ 'filtration-acitve-item' : activeFiltration == index }" @click="changeFiltration(index)"
					class="filtration-item">
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 商品列表 -->
		<view class="product-list">
			<productList :list="list" />
		</view>
	</view>
</template>

<script>
	import mixinList from '@/mixins/list.js'
	import productList from '@/components/user/productList.vue'
	export default {
		name: "MoreCommodity",
		mixins: [mixinList],
		components: {
			productList
		},
		data() {
			return {
				filtrationList: ['综合', '销量', '价格', '上新'],
				activeFiltration: 0,
				mixinsListApi : "getClassShopPageList"
			}
		},
		methods: {
			//修改过滤条件
			changeFiltration(index) {
				this.activeFiltration = index;
				//重新获取数据逻辑

			}
		}
	}
</script>

<style lang="scss" scoped>
	.more-commodity {

		.more-commodity-header {
			background: white;
			padding: 20rpx;

			// 搜索栏
			.search {
				border: 1px solid #F0F0F0;
				border-radius: 41rpx;
				padding: 10rpx 20rpx;
				display: flex;
				align-items: center;

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

			// 筛选过滤
			.filtration {
				display: flex;
				justify-content: space-between;
				padding: 20rpx;

				.filtration-item {
					font-size: 28rpx;
				}

				.filtration-acitve-item {
					color: $uni-color;
				}
			}
		}

		// 商品列表
		.product-list {
			padding-top: 20rpx;
		}
	}
</style>