cashier_weapp/components/qiyue-category/qiyue-category.vue

<template>
	<view class="nav">
		<view class="nav-left">
			<scroll-view scroll-y>
				<view class="nav-left-item" v-for="(item, index) in categoryList"
					@click="categoryClickMain(item, index)" :key="index"
					:style="index == categoryActive ? 'color:' + activeTextColor + ';background-color:' + activeBackgroundColor : ''">
					{{ item[label] }}
				</view>
			</scroll-view>
		</view>
		<view class="nav-right" v-if="!subCategoryList.length == 0">
			<scroll-view scroll-y :scroll-top="scrollTop" @scroll="scroll" @scrolltolower="loadMore"
				scroll-with-animation>
				<view class="nav-right-item" v-for="(item, index2) in subCategoryList" :key="index2"
					@click="categoryClickSub(item)">
					<view>{{ item[label] }}</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		name: 'category',
		data() {
			return {
				h: null,
				namelang: '',
				keyword: '请输入相关行业',
				height: 0,
				scrollTop: 0,
				scrollHeight: 0,
				categoryActive: 0,
				activeStyle: {
					color: this.activeTextColor,
					backgroundColor: this.activeBackgroundColor
				}
			};
		},
		props: {
			//主分类激活索引
			merchant: {
				type: Number,
				default: 1
			},
			defaultActive: {
				type: Number,
				default: 0
			},
			//主分类List
			categoryList: {
				type: Array,
				default: () => {
					return null;
				}
			},
			//侧边分类List
			subCategoryList: {
				type: Array,
				default: () => {
					return null;
				}
			},
			activeTextColor: {
				type: String,
				default: '#FF981E'
			},
			activeBackgroundColor: {
				type: String,
				default: '#fff'
			},
			label: {
				type: String,
				default: 'name'
			},
			imgSrc: {
				type: String,
				default: 'logo'
			},
			//主分类点击事件
			categoryMainClick: {},
			//子分类点击事件
			categorySubClick: {}
		},
		methods: {
			async computed_h() {
				//获取div宽度
				let content_Icon = await uni.utils.info_distance('Box_top');
				let content_top_box = await uni.utils.info_distance('Box_text');
				let system_info = await uni.getSystemInfo();
				var h_ = system_info.windowHeight + 'px';
				this.h = {
					height: h_
				};
			},
			scroll(e) {
				this.scrollHeight = e.detail.scrollHeight;
			},
			categoryClickMain(category, index) {
				this.namelang = category.name
				this.$emit('categoryMainClick', {
					'category': category,
					'index': index
				});
				this.categoryActive = index;
				this.scrollTop = -this.scrollHeight * index;
			},
			loadMore(e) {
				console.log(e)
				this.$emit('loadMores');
			},
			categoryClickSub(category) {
				this.$emit('categorySubClick', category);
			},
			searchkeyword() {
				this.$emit('searchkeyword', this.keyword)
			},
		},
		mounted() {
			this.categoryActive = this.defaultActive;
			this.computed_h();
			// uni.getSystemInfo({
			// 	success: res => {
			// 		console.log(res);
			// 		this.height = res.windowHeight;
			// 	}
			// });
		},
		watch: {
			subCategoryList(newValue, oldValue) {}
		}
	};
</script>

<style scoped>
	.Box_top {
		padding: 32rpx 28rpx;
	}

	.Box_text {
		background: #f1f0f5;
		padding: 10rpx 28rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Regular, Source Han Sans CN;
		font-weight: 400;
		color: #999999;
	}

	.Box_texttext {
		margin-left: 16rpx;
		font-size: 28rpx;
		font-family: Source Han Sans CN-Medium, Source Han Sans CN;
		font-weight: 500;
		color: #333333;
	}

	.nav {
		display: flex;
		width: 100%;
	}

	.nav-left {
		max-height: 600rpx;
		width: 30%;
		overflow: auto;
	}

	.nav-left-item {
		padding: 10rpx 0;
		font-size: 14px;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.nav-right {
		width: 70%;
		max-height: 600rpx;
		overflow: auto;
	}

	.nav-right-item {
		width: 100%;
		border-left: solid 1px #e0e0e0;
		/* height: 100px; */
		text-align: left;
		padding: 24rpx 32rpx;
		font-size: 13px;
	}

	.nav-right-item image {
		width: 50px;
		height: 50px;
	}

	.active {
		color: #f24544;
	}

	.padding {
		height: var(--status-bar-height);
		width: 100%;
		top: 0;
		position: fixed;
		background-color: #f24544;
	}
</style>