lingfeng-c/src/packages/goods/category.vue

<template>
	<view class="category-box">
		<Navbar title="商品分类" background-color="#fff" color="#333"></Navbar>
		<view class="container">
			<view class="bottom-category">
				<view class="left">
					<view class="item" @click="handleFirst(item)" :class="{active: firstActive === item.id}"
						v-for="item in categoryList" :key="item.id">
						<view class="bar" v-if="firstActive === item.id"></view>
						{{item.oneName}}
					</view>
				</view>
				<view class="right">
					<view class="first-name">
						{{nameMap[firstActive] || ''}}
					</view>
					<view class="second-box">
						<view class="item" v-for="item in secondList" :key="item.id" @click="toSearch(item)">
							<!-- <image class="img" :src="item.twoPic" mode="aspectFill"></image> -->
							<text>{{item.twoName}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts">
	import {
		Component,
		Prop,
		Vue,
		Mixins
	} from 'vue-property-decorator';
	import {
		namespace
	} from 'vuex-class';
	import {
		types
	} from '@/common/store/index';
	const baseModule = namespace('base');
	import loginMixin from '@/common/mixins/loginMixin.ts';
	@Component({})
	export default class Category extends Mixins(loginMixin) {
		@baseModule.Mutation(types.SET_TABBARINDEX) setTabBarIndex: any;
		categoryList: any = [];
		firstActive: any = null;
		categoryObj: any = {};
		secondList: any = [];
		nameMap: any = {};
		staticUrl: string = this.$oss_url; //oss地址
		shareInfo: any = {};
		async onShow() {
			this.$nextTick(function() {
				uni.hideTabBar();
			});
			// this.getShareInfo();
			await this.getCategoryList();
			if (uni.getStorageSync('categoryId')) {
				this.handleFirst({
					id: +uni.getStorageSync('categoryId'),
					twoSort: this.categoryObj[+uni.getStorageSync('categoryId')]
				});
				uni.setStorageSync('categoryId', '');
			}
		}
		onShareAppMessage() {
			// return {
			// 	title: '东方智选',
			// 	path: '/pages/front/front?s=1&uid=' + this._userInfo.uid,
			// 	imageUrl: this.shareInfo.pic
			// };
		}
		//获取商品分类
		getCategoryList() {
			// uni.showLoading({
			// 	title: '加载中',
			// });
			return this.$http
				.get({
					url: this.$api.getCategoryList
				})
				.then((res: any) => {
					this.categoryList = res.list;
					let obj: any = {},
						nameMap: any = {};
					res.list.forEach((item: any) => {
						obj[item.id] = item.twoSort;
						nameMap[item.id] = item.oneName;
					})
					this.nameMap = nameMap;
					this.categoryObj = obj;
					this.handleFirst(res.list[0]);
					// uni.hideLoading();
				}, (err: any) => {
					console.log(err);
					// uni.hideLoading();
				});
		}
		// getShareInfo() {
		// 	this.$http
		// 		.get({
		// 			url: this.$api.getShareInfo
		// 		})
		// 		.then((res: any) => {
		// 			this.shareInfo = res.info;
		// 		}, (err: any) => {
		// 			console.log(err);
		// 		});
		// }
		handleFirst(item: any) {
			this.firstActive = item.id;
			this.secondList = item.twoSort;
		}
		toSearch(item: any) {
			// uni.setStorageSync('categoryId', item.fid);
			this.$Router.push({
				path: '/packages/goods/search2',
				query: {
					sortOneId: this.firstActive,
					sortTwoId: item.id,
					name: this.nameMap[this.firstActive]
				}
			})
		}
		toPage(path: any) {
			this.$Router.push({
				path: path
			})
		}
	}
</script>

<style lang="scss" scoped>
	.category-box {
		height: 100vh;
		background: #F8F8F8;
		@include flex-y();

		.container {
			width: 100%;
			@include flex-y();
			flex: 1;
			padding-bottom: vw(64);
			box-sizing: border-box;
			overflow: hidden;

			.top-search {
				width: vw(335);
				height: vw(32);
				background: #F6F6F6;
				border-radius: vw(16);
				@include flex-x(flex-start);
				@include word-vw(14, #999);
				padding: 0 vw(12);
				box-sizing: border-box;
				margin-top: vw(3);
			}

			.bottom-category {
				flex: 1;
				width: 100%;
				@include flex-x(flex-start);
				// padding-top: vw(20);
				box-sizing: border-box;
				overflow: hidden;

				.left {
					width: vw(88);
					height: 100%;
					overflow-y: auto;
					flex-shrink: 0;
					background: #fff;

					/deep/ ::-webkit-scrollbar {
						/* 隐藏滚动条，但依旧具备可以滚动的功能 */
						display: none
					}

					.item {
						background: #fff;
						height: vw(50);
						width: 100%;
						@include flex-x(center);
						@include word-vw(13, #333);
						position: relative;

						&.active {
							background: #F8F8F8;
							color: #2A5CE9;
						}

						.bar {
							width: vw(2);
							height: vw(16);
							background: #2A5CE9;
							position: absolute;
							left: 0;
						}
					}
				}

				.right {
					flex: 1;
					height: 100%;
					padding: vw(10) vw(15) 0;
					overflow-y: auto;
					box-sizing: border-box;

					.first-name {
						height: vw(36);
						line-height: vw(36);
						@include word-vw(14, #333);
						font-weight: bold;
					}

					.second-box {
						@include flex-x(flex-start);
						// margin-top: vw(12);
						flex-wrap: wrap;

						.item {
							@include flex-y();
							@include word-vw(12, #333);
							margin-bottom: vw(10);
							background: #fff;
							height: vw(32);
							padding: 0 vw(10);
							border-radius: vw(5);
							line-height: vw(32);
							margin-right: vw(5);
						}
					}
				}
			}
		}
	}
</style>