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

<template>
	<view class="category-box">
		<Navbar title="全部分类" :showBack="false" background-color="transparent" color="#333"></Navbar>
		<view class="container">
			<view class="top-search" @click="toPage('/packages/goods/search')">
				<IconText :code="`\ue841`" color="#C4C4C4" size="14" style="margin-right: 5px;"></IconText>
				请输入商品名称进行搜索
			</view>
			<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.name}}
					</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.pic" mode="aspectFill"></image>
							<text>{{item.name}}</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- <TabBar></TabBar> -->
	</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.setTabBarIndex(1);
			this.getShareInfo();
			await this.getCategoryList();
			if (uni.getStorageSync('categoryId')) {
				this.handleFirst({
					id: +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, ...res.list];
					this.categoryList = res.list;
					// this.categoryList.unshift({
					// 	id: 0,
					// 	name: '全部商品',
					// 	second: [{
					// 		id: 0,
					// 		name: '全部商品',
					// 		pic: this.staticUrl ? this.staticUrl + 'all-goods.png' : ''
					// 	}]
					// });
					let obj: any = {},
						nameMap: any = {};
					res.list.forEach((item: any) => {
						obj[item.id] = item.second;
						nameMap[item.id] = item.name;
					})
					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 = this.categoryObj[item.id];
		}
		toSearch(item: any) {
			uni.setStorageSync('categoryId', item.fid);
			this.$Router.push({
				path: '/packages/goods/search',
				query: {
					name: item.name,
					id: item.id
				}
			})
		}
		toPage(path: any) {
			this.$Router.push({
				path: path
			})
		}
	}
</script>

<style lang="scss" scoped>
	.category-box {
		height: 100vh;
		background: #fff;
		@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: #F6F6F6;

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

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

						&.active {
							background: #fff;
							color: $btn-color;
						}

						.bar {
							width: vw(4);
							height: vw(24);
							background: $btn-color;
							position: absolute;
							left: 0;
						}
					}
				}

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

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

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

						.item {
							@include flex-y();
							@include word-vw(12, #333);
							width: 1/3 * 100%;
							margin-bottom: vw(10);

							.img {
								width: vw(72);
								height: vw(72);
								margin-bottom: vw(10);
							}
						}
					}
				}
			}
		}
	}
</style>