dreamland/pages/dream/view.vue

<template>
	<gracePage :customHeader="false">
		<view class="container" slot="gBody">
			<drawerPage :show="drawer.show ? 'left' : ''">
				<view class="container_main" slot="links">
					<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" @showDrawer="showDrawer" :index="k" :item="v" :control="control" class="item"></dream>
							</scroll-view>
						</swiper-item>
					</swiper>
				</view>
			</drawerPage>
			
			<drawerWindow v-for="(v, k) in drawer.item" :key="k" :show="v.show" :zIndex="v.index" padding="v.padding" :top="v.top" direction="v.direction" :width="v.width" v-on:closeDrawer="closeDrawer(k)">
				<view slot="links">
					<block v-if="k == 'cate'">
						<cate ref="cate" @goIndex="goIndex" :index="index" :content_id="content_id" :info_id="fetch.info_id" :page_id="fetch.page_id" :parent_page_id="fetch.parent_page_id" :width="v.width"  :param="v.param"></cate>
					</block>
					
					<block v-if="k == 'community'">
						<community ref="community" @goIndex="goIndex" :index="index" :content_id="content_id" :info_id="fetch.info_id" :page_id="fetch.page_id" :parent_page_id="fetch.parent_page_id" :width="v.width"  :param="v.param"></community>
					</block>
				</view>
			</drawerWindow>
			
			<y-Fab v-if="!drawer.show && fetch.user.avatar" :bottom="20" :right="20" :btnList="drawer.button" @click="clickDrawerButton" :text="`P`+(swiper.index+1)" :icon_o="fetch.user.avatar"></y-Fab>
		</view>
	</gracePage>
</template>
<script>
import cate from "@/pages/dream/view/cate.vue";
import community from "@/pages/dream/view/community.vue";
import dream from "@/pages/dream/view/dream.vue";
import drawerPage from "@/lib/dever/components/drawerPage.vue";
import drawerWindow from "@/lib/dever/components/drawerWindow.vue";
var graceRichText = require("@/lib/graceUI/jsTools/richText.js");
export default{
	data() {
		return {
			id : 1,
			page_id : 1,
			index : 0,
			content_id : 0,
			swiper : {
				index : 0,
				circular : false,
			},
			fetch: {
				items : [],
				user : {},
				info_id : 0,
				page_id : 0,
				parent_page_id : 0,
			},
			control : {},
			drawer : {
				// 是否显示
				show : '',
				button : [],
				item : {
					cate : {
						show : false,
						index : 5,
						top: 0,
						padding: '0rpx',
						width : '86%',
						direction : 'left',
						param : {},
						button : {
							bgColor: '#55ff7f',
							text: '选集',
							fontSize: 28,
							color: '#fff'
						}
					},
					
					community : {
						show : false,
						index : 5,
						top: 0,
						padding: '0rpx',
						width : '86%',
						direction : 'left',
						param : {
							type : 3,
							type_id : this.content_id,
						},
						button : {
							bgColor: '#16C2C2',
							text: '御所',
							fontSize: 28,
							color: '#fff'
						},
					}
				}
			}
		}
	},
	onLoad(option) {
		this.id = option.id;
		this.page_id = option.page_id;
		this.index = option.index;
		this.initDrawer();
		this.getData();
	},
	// 重新加载
	onPullDownRefresh: function() {
		if (this.drawer.show && this.drawer.item[this.drawer.show].show == true) {
			this.$refs[this.drawer.show].getData();
		} else {
			this.getData();
		}
	},
	// 触底刷新
	onReachBottom: function() {
		console.info(222);
	},
	methods:{
		change : function(e) {
			this.swiper.index = e.detail.current;
			if (this.control) {
				var i = 0;
				for (i in this.control) {
					if (this.control[i].load) {
						console.info(i);
						if (this.swiper.index == i) {
							console.info('start');
							this.control[i].start();
						} else {
							this.control[i].stop();
						}
					}
				}
			}
		},
		view : function() {
			this.Dever.location('dream/view?id=1');
		},
		initDrawer : function() {
			var i = '';
			for (i in this.drawer.item) {
				this.drawer.item[i].button.key = i;
				this.drawer.button.push(this.drawer.item[i].button);
			}
		},
		getData : function() {
			var self = this;
			this.Dever.get(this, 'app/collection/?l=api.getContent', {id:this.id, page_id:this.page_id}, function(t) {
				self.getCate(t);
			});
		},
		getCate : function(info) {
			var self = this;
			this.Dever.get(this, 'app/collection/?l=api.category', {id:info.info_id, parent_page_id:info.parent_page_id, page_id:info.page_id, noloading:1}, function(t) {
				self.drawer.item['cate'].param = t;
			});
		},
		goIndex : function(index) {
			this.index = index;
			if (this.drawer.show) {
				this.closeDrawer(this.drawer.show);
			}
		},
		showDrawer : function(key) {
			this.getContentId();
			this.drawer.item[key].show = !this.drawer.item[key].show;
			if (this.drawer.show) {
				this.drawer.show = '';
			} else {
				this.drawer.show = key;
			}
		},
		closeDrawer : function(key) {
			this.drawer.item[key].show = false;
			this.drawer.show = '';
		},
		getContentId : function() {
			this.content_id = this.fetch.items[this.swiper.index].id;
		},
		clickDrawerButton : function(e) {
			this.showDrawer(this.drawer.button[e.index].key);
		}
	},
	components:{
		dream,cate,community,drawerPage,drawerWindow
	}
}
</script>
<style>
.container {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch; 
}
.container_main {
	width: 750rpx;
	height: 100%;
}
.swiper {
	width: 750rpx;
	height: 100%;
}
swiper-item>view{
  height: 100%;
}
swiper-item image{
  width: 750rpx;
  height: 100%;
}
.scroll-height {
	height:100%;
}
</style>