material-shop-user/pages/classification/index.vue

<template>
	<view class="classification">
		<main>
			<view class="left-class">
				<scroll-view :scroll-top="leftScroll" scroll-y="true" class="left-scroll">
					<view
						v-for="(item, index) in leftData" :key="index" class="class-item"
						:class="index == idx ? 'active' : ''" @click="leftClick(index, item.classifyId)"
					>
						{{ item.classifyName }}
					</view>
				</scroll-view>
			</view>
			<view class="right-scroll">
				<template v-if="ifEmpty">
					<div class="empty-box">
						<image src="../../static/images/new-business/shop/bgnull.png"></image>
						<span>该分类没有商品</span>
					</div>
				</template>
			</view>
		</main>
	</view>
</template>

<script>
import { getFirstClassifyApi } from '../../api/anotherTFInterface'
export default {
	data() {
		return {
			leftScroll: 0,
			leftData: [],
			idx: 0,
			classForm: {
				classifyId: ''
			},
			//  控制右边空状态的显示
			ifEmpty: true
		}
	},
	created() {
		this.getLeft()
	},
	methods: {
		leftClick(val, id) {
			this.idx = val
			this.classForm.classifyId = id
		},
		// 获取左边侧边栏的数据
		async getLeft() {
			const res = await getFirstClassifyApi(this.classForm)
			console.log(res)
			this.leftData = res.data
		}
	}
}
</script>

<style lang="scss" scoped>
uni-page-body {
	height: 100%;
}

.classification {
	height: 100%;

	main {
			display: flex;
			height: 100%;

			.left-class {
					width: 200rpx;
					background-color: #f8f8f8;
					padding-top: 20rpx;

					.left-scroll {
							white-space: nowrap;
							width: 100%;
							height: 100%;
							.class-item {
									width: 100%;
									height: 100rpx;
									text-align: center;
									line-height: 100rpx;
									font-size: 28rpx;
							}

							.active {
									background-color: #fff;
									color: #EF530E;
									font-weight: 700;
							}
					}
			}

			.right-scroll {
					flex: 1;
					position: relative;
					width: 100%;
					height: 100%;
					.empty-box{
							position: absolute;
							left: 50%;
							top: 30%;
							transform: translateX(-50%);
							display: flex;
							flex-direction: column;
							align-items: center;
							gap: 30rpx;
							color: #999;
							image{
									width: 200rpx;
									height: 200rpx;
							}
					}
			}
	}
}
</style>