dreamland/pages/dream/cate.vue

<template>
	<view class="category">
		<view class="category-wrapper" v-if="fetch.cate.length>0">
			<!-- 左边导航 -->
			<scroll-view scroll-y="true" class="left-wrapper" scroll-with-animation="true">
				<view class="left-content">
					<view class="title-content" :class="fetch.show[v.id] == 1?'onSelected':''" v-for="(v,k) in fetch.cate" :key="v.id" @click="choose(v.id)">{{v.name}}</view>
				</view>
			</scroll-view>
			<!-- 右边内容 -->
			<scroll-view scroll-y="true" class="right-wrapper" scroll-with-animation="true">
				<view class="right-content">
					<!-- banner区域 -->
					<view class="banner-wrapper" v-if="swiperList.length > 0">
						<swiper class="swiper-content" :autoplay="true" :interval="3000" :circular="true">
							<swiper-item class="swiper-item" v-for="imgs in swiperList" :key="imgs.id">
								<image class="swiper-img" :src="imgs.src"></image>
							</swiper-item>
						</swiper>
					</view>
					<!-- 产品区 -->
					<view class="product-wrapper">
						<view class="category-item" :id="'list'+v.id" v-for="(v,k) in fetch.child" :key="k" v-if="fetch.show[v.page_id] == 1">
							<view class="category-title">{{v.name}}</view>
							<view class="category-content">
								<view class="product-item" v-for="(v1,k1) in v.content" :key="k1" @click="go(v1.id,v1.page_id)">
									<image class="product-img" :src="v1.pic"></image>
									<text class="product-title">{{v1.name}}</text>
								</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				fetch: {
					cate : [],
					show : {},
					child : [],
				},
				cur : 0,
				swiperList: [],
				parent_page: 0,
				page : 0,
				id : 0,
			}
		},
		onLoad(option) {
			this.id = option.id;
			this.parent_page = option.parent_page;
			this.page = option.page;
			this.cur = this.parent_page;
			this.getData();
		},
		methods: {
			getData : function() {
				this.Dever.get(this, 'app/collection/?l=api.category', {id:this.id, parent_page:this.parent_page, page:this.page});
			},
			choose : function(id) {
				if (this.fetch.show[id] == 1) {
					return;
				}
				this.fetch.show[id] = 1;
				this.fetch.show[this.cur] = 2;
				this.cur = id;
			}, 
			go : function(id, page_id) {
				this.Dever.location('dream/view?id=' + this.id + '&page_id='+page_id+'&index=' + id);
			}
		}
	}
</script>

<style lang="less">
	.category {

		.category-wrapper {
			width: 100%;
			display: flex;
			flex-direction: row;
			position: absolute;
			top: 0;
			bottom: 0;

			.left-wrapper {
				width: 200rpx;
				flex: 0 0 200rpx;
				background-color: #f6f6f6;

				.left-content {

					.title-content {
						width: 100%;
						height: 100rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 25rpx;
						border-bottom: 1px solid #dedede;
						cursor: pointer;

						&:last-child {
							border-bottom: 0;
						}

						&.onSelected {
							background-color: #fff;
							position: relative;
							color: #feb436;

							&::before {
								content: '';
								position: absolute;
								left: 0;
								top: 0;
								width: 10rpx;
								height: 100%;
								background: linear-gradient(124deg, #feb436 0%, #fb7c22 100%);
							}
						}
					}
				}
			}

			.right-wrapper {
				flex: 1;

				.right-content {
					width: 100%;
					padding: 20rpx 0;
					border-left: 1rpx solid #efefef;
					box-sizing: border-box;

					.banner-wrapper {
						padding: 0 20rpx;

						.swiper-content {
							width: 100%;
							height: 180rpx;
							margin-bottom: 20rpx;

							.swiper-item {
								.swiper-img {
									width: 100%;
									height: 180rpx;
								}
							}
						}
					}

					.product-wrapper {
						.category-item {

							.category-title {
								height: 60rpx;
								font-size: 26rpx;
								line-height: 60rpx;
								font-weight: 500;
								background-color: #f6f6f6;
								padding-left: 20rpx;
								color: #000;
							}

							.category-content {
								display: flex;
								flex-direction: row;
								flex-flow: wrap;
								padding: 20rpx 20rpx 0;


								.product-item {
									width: 33%;
									display: flex;
									flex-direction: column;
									justify-content: center;
									align-items: center;
									margin-bottom: 20rpx;

									.product-img {
										width: 120rpx;
										height: 140rpx;
										margin-bottom: 10rpx;
									}

									.product-title {
										font-size: 23rpx;
									}
								}
							}
						}
					}
				}
			}
		}

	}
</style>