edit

pages/dream/view.vue

@@ -4,15 +4,21 @@
 			<swiper class="swiper" @change="change" :circular="swiper.circular" :current="index">
 				<swiper-item v-for="(v, k) in fetch.items"  v-if="v.data" :key="k" >
 					<scroll-view scroll-y="true" scroll-x="true" class="scroll-height">
-						<dream ref="dream" :index="k" :item="v" :control="control" class="item"></dream>
+						<dream ref="dream" @select="select" :index="k" :item="v" :control="control" class="item"></dream>
 					</scroll-view>
 				</swiper-item>
 			</swiper>
-
+			<graceDrawer :show="select_drawer.show" :zIndex="select_drawer.index" padding="select_drawer.padding" :top="select_drawer.top" width="100%" v-on:closeDrawer="closeSelect">
+				<view slot="links">
+					<cate @goIndex="goIndex" :info_id="fetch.info_id" :page_id="fetch.page_id" :parent_page_id="fetch.parent_page_id"></cate>
+				</view>
+			</graceDrawer>
 		</view>
 	</gracePage>
 </template>
-<script>
+<script>
+import cate from "@/pages/dream/view/cate.vue";
+import graceDrawer from '@/lib/graceUI/components/graceDrawer.vue';
 import gracePage from "@/lib/graceUI/components/gracePage.vue";
 import dream from "@/pages/dream/view/dream.vue";
 var graceRichText = require("@/lib/graceUI/jsTools/richText.js");
@@ -27,9 +33,18 @@ export default{
 				circular : false,
 			},
 			fetch: {
-				items : []
+				items : [],
+				info_id : 0,
+				page_id : 0,
+				parent_page_id : 0,
 			},
-			control : {}
+			control : {},
+			select_drawer : {
+				index : 5,
+				top: 0,
+				padding: '0rpx',
+				show : false,
+			},
 		}
 	},
 	onLoad(option) {
@@ -72,10 +87,16 @@ export default{
 		},
 		getData : function() {
 			this.Dever.get(this, 'app/collection/?l=api.getContent', {id:this.id, page_id:this.page_id});
+		},
+		goIndex : function(index) {
+			this.index = index;
+		},
+		select : function() {
+			this.select_drawer.show = !this.select_drawer.show;
 		}
 	},
 	components:{
-		gracePage,dream
+		gracePage,dream,cate,graceDrawer
 	}
 }
 </script>

pages/dream/view/cate.vue

@@ -1,8 +1,226 @@
-<template>
+<template name="cate">
+	<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" 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>
 </template>
 
-<script>
+<script>
+export default {
+	name: "cate",
+	props: {
+		info_id : {
+			type : String,
+			value : null
+		},
+		page_id : {
+			type : String,
+			value : null
+		},
+		parent_page_id : {
+			type : String,
+			value : null
+		},
+	},
+	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);
+			}
+		}
+	},
+}
 </script>
 
-<style>
+<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>

pages/dream/view/dream.vue

@@ -86,27 +86,14 @@
 		</view>
 		<view>
 			<view class="page-num comment" v-if="comment_show">评</view>
-			<view class="page-num select" v-if="select_show" @click="select">选</view>
+			<view class="page-num select" v-if="select_show" @click="select">{{select_name}}</view>
 		</view>
 		
-		<view class="page-num" @click="setShow" v-if="index != -1">P{{index+1}}</view>
-		
-		<graceDrawer :show="select_drawer_show" top="0" width="100%" v-on:closeDrawer="closeSelect">
-			<view slot="links">
-				<view class="grace-list">
-					<view style="text-align:center; padding:20px;">
-						您可以放置任何内容 ...
-					</view>
-				</view>
-			</view>
-		</graceDrawer>
+		<view class="page-num" @click="setShow" v-if="index != -1">P{{index+1}}</view>
 	</view>
 </template>
 
 <script>
-import cate from "@/pages/dream/view/cate.vue";
-import graceDrawer from '@/lib/graceUI/components/graceDrawer.vue';
-
 import news from "@/pages/dream/view/news.vue";
 import pic from "@/pages/dream/view/pic.vue";
 import picGrid from "@/pages/dream/view/picGrid.vue";
@@ -138,6 +125,7 @@ export default {
 	},
 	data() {
 		return {
+			select_name : '选',
 			comment_show : false,
 			select_show : false,
 			select_drawer_show : false,
@@ -151,16 +139,24 @@ export default {
 		setSelectShow : function(state) {
 			this.select_show = state;
 		},
-		select : function() {
-			//this.Dever.location('dream/cate?id=' + this.item.info_id + '&parent_page=' + this.item.parent_page_id);
-			this.select_drawer_show = true;
+		select : function() {
+			this.$emit('select');
+			this.select_drawer_show = !this.select_drawer_show;
+			if (this.select_drawer_show == true) {
+				this.select_name = '关';
+			} else {
+				this.select_name = '选';
+			}
 		},
 		closeSelect : function() {
 			this.select_drawer_show = false;
+		},
+		goIndex : function(index) {
+			this.$emit('goIndex', index);
 		}
 	},
 	components:{
-		cate,news,pic,picGrid,vod,vodComment,vodShort,audioList,audioComment,liveComment,dialogue,linkView,webView,product
+		news,pic,picGrid,vod,vodComment,vodShort,audioList,audioComment,liveComment,dialogue,linkView,webView,product
 	}
 }
 </script>