dreamland/pages/dream/view/cate.vue

<template name="cate">
	<view slot="links">
	<view class="category" @touchstart="Dever.slide" @touchend="end">
		<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" v-if="v.content">
								<view class="product-item" v-for="(v1,k1) in v.content" :key="k1" @click="go(k1,v1.page_id)">
									<image class="product-img" :src="v1.pic"></image>
									<text class="product-title">{{v1.name}}</text>
								</view>
							</view>
							
							<view class="category-content" v-if="!v.content">
								敬请期待
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
	</view>
</template>

<script>
export default {
	name: "cate",
	props: {
		info_id : {
			type : String,
			value : null
		},
		content_id : {
			type : String,
			value : null
		},
		page_id : {
			type : String,
			value : null
		},
		parent_page_id : {
			type : String,
			value : null
		},
		index : 0
	},
	data() {
		return {
			fetch: {
				cate : [],
				show : {},
				child : [],
			},
			swiperList: [],
		}
	},
	mounted() {
		this.getData();
	},
	methods:{
		getData : function() {
			this.Dever.get(this, 'app/collection/?l=api.category', {id:this.info_id, parent_page_id:this.parent_page_id, page_id:this.page_id});
		},
		choose : function(id) {
			if (this.fetch.show[id] == 1) {
				return;
			}
			for(var i in this.fetch.show) {
				if (id == i) {
					this.fetch.show[id] = 1;
				} else {
					this.fetch.show[i] = 2;
				}
			}
		}, 
		go : function(index, page_id) {
			if (this.page_id != page_id) {
				this.Dever.location('dream/view?id=' + this.info_id + '&page_id='+page_id+'&index=' + index);
			} else {
				this.$emit('goIndex', index);
			}
		},
		end : function(e) {
			var type = this.Dever.slideEnd(e);
			if (type == 3 || type == 4) {
				this.go(this.index, this.page_id);
			}
		}
	},
}
</script>

<style lang="less">
	.category-content {
		margin-bottom: 20rpx;
	}
	.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>