yinyao-uniapp/pages/subject/category/category.vue

<template>
	<view class="productSort">
		<div class="index">
			<view class="header acea-row row-center-wrapper">
				<u-search @search="onSearch"  bgColor="#FFFFFF" borderColor="#eb3729" :showAction="false"></u-search>
				<view class="select-type">
					<u-button size="small" type="info" icon="arrow-down" hairline plain @click="showTypePicker = true" :text="currentType" color="#eb3729"></u-button>
					<u-picker @confirm="onTypeConfirm" @close="showTypePicker = false" :show="showTypePicker" :columns="typeList" closeOnClickOverlay></u-picker>
				</view>
				
				
			</view>
		</div>
		<view class="aside">
			<view class="item acea-row row-center-wrapper" :class="categoryDivindex === navActive ? 'on' : ''"
				v-for="(item, categoryDivindex) in currentCategoryList" :key="categoryDivindex"
				@click="asideTap(categoryDivindex)">
				<text>{{ item.cateName }}</text>
			</view>
		</view>
		<view class="conter">
			<view style="height: 100rpx;"></view>
			<u-subsection @change="onLevelChange" :list="levelList" :current="currLevelIndex" mode="button" active-color="#eb3729"></u-subsection>
			<view @click="toDetail(item)" class="subject" v-for="(item, eq) in currentVolumeList" :key="eq">
				<image class="poster" :src="item.poster" mode="aspectFill"></image>
				<view class="volume">
					<view class="volume-name u-line-2">{{ item.volumeName }}</view>
					<view class="volume-desc u-line-1">{{ currentCategoryList[navActive].cateName}} | {{ item.sales + item.fakeSales }}人在学</view>
				</view>
			</view>
		</view>
		<view style="height:100rpx;"></view>
	</view>
</template>
<script>
	import {
		getSubjectCategoryList,
		getSubjectList,
		getSubjectVolumeList,
		getTypeList
	} from "@/api/subject.js";
	import {
		trim
	} from "@/utils";

	export default {
		name: "GoodsClass",
		components: {},
		props: {},
		data: function() {
			return {
				currentType: '',
				typeList: [],
				categoryList: [],
				currentCategoryList: [],
				subjectList: [],
				volumeList: [],
				levelList: ["全部", "基础班", "提升班", "研修班"],
				currLevelIndex: 0,
				navActive: undefined,
				search: "",
				lock: false,
				showTypePicker: false
			};
		},
		watch: {
			"$yroute.query.id": function(n) {
				if (n) {
					this.activeCateId(n);
				}
			}
		},
		computed: {
			currentVolumeList() {
				console.log('currentVolumeList: ' ,1);
				let arr = [];
				if(this.currLevelIndex > 0) {
					arr = this.volumeList.filter(item => item.level == this.levelList[this.currLevelIndex])
				}else {
					arr = this.volumeList
				}
				return arr;
			}
		},
		onLoad(options) {
			if(options && options.type) {
				this.currentType = options.type
			}
			this.loadCategoryData();
		},
		methods: {
			onLevelChange(e) {
				this.currLevelIndex = e
			},
			onTypeConfirm(e) {
				this.currentType = e.value[0]
				this.showTypePicker = false
				this.onTypeChange()
			},
			onSearch() {
				this.$yrouter.push("/pages/shop/GoodSearch/index");
			},
			toDetail(item) {
				this.$yrouter.push({
					path: "/pages/subject/detail/detail",
					query: {
						sid: item.subjectId,
						vid: item.id
					}
				});
			},
			goGoodsList(categoryId) {
				
				getSubjectVolumeList({
					categoryId
				}).then(res => {
					this.volumeList = res.data
				})
			},
			activeCateId(n) {
				let index = 0;
				n = parseInt(n);
				if (!n) return;
				if (index !== this.navActive) {
					this.asideTap(index);
				}
			},
			async loadCategoryData() {
				
				const cRes = await getSubjectCategoryList()
				this.categoryList = cRes.data;
				
				const tRes = await getTypeList()
				this.typeList = [tRes.data]
				if(!this.currentType) {
					 this.currentType= tRes.data[0]
				}
				
				this.onTypeChange()
			},
			onTypeChange() {
				this.volumeList = []
				this.navActive = undefined
				this.currentCategoryList = this.categoryList.filter(item => item.type == this.currentType)
				if(this.currentCategoryList.length > 0) {
					this.activeCateId(this.currentCategoryList[0].id)
				}
			},
			submitForm: function() {
				var val = trim(this.search);
				if (val) {
					this.$yrouter.push({
						path: "/pages/shop/GoodsList/index",
						query: {
							s: val
						}
					});
					setTimeout(() => (this.search = ""), 500);
				}
			},
			asideTap(index) {
				this.navActive = index
				this.goGoodsList(this.currentCategoryList[index].id)
			}
		}
	}
</script>

<style lang="scss">
	.productSort {
		height: 100%;
	}
	.header{
		display: flex;
		.search{
			width: 50%;
		}
		.select-type{
			padding: 0 0 0 20rpx;
		}
	}

	.subject {
		display: flex;
		padding: 10rpx;
		.volume{
			position: relative;
			height: 140rpx;
			box-sizing: border-box;
			padding: 10rpx 0;
		}
		.poster {
			width: 250rpx;
			height: 140rpx;
			border-radius: 8rpx;
		}
		.volume-name{
			width: 250rpx;
			font-size: 28rpx;
			padding: 4rpx 10rpx;
		}
		
		.volume-desc {
			position: absolute;
			bottom: 10rpx;
			left: 10rpx;
			font-size: 20rpx;
			color: #666666;
		}
	}
</style>