dreamland/pages/dream/view.vue

<template>
	<gracePage :customHeader="false">
		<view class="container" slot="gBody">
			<ourLoading isFullScreen :active="pageLoading" :text="pageLoadingText" />
			<view v-if="fetch.items.length > 0">
				<dever-drawer-page :show="drawer.show ? 'left' : ''">
					<view class="container_main" slot="links" @click="closeDrawer()">
						<block v-if="show">
							<view class='cover' v-if="guide" @touchstart="closeGuide()">
								<view class='journal-guide'>
								  <view class='guide-center'></view>
								  <view class='guide-bottom'></view>
								</view>
							</view>
							<swiper class="swiper" @change="change" :circular="swiper.circular" :current="fetch.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" @scrolltolower="bottomCall">
										<dream ref="dream" @showDrawer="showDrawer" :index="k" :item="v" :control="control" :bottom="bottom" class="item"></dream>
									</scroll-view>
								</swiper-item>
							</swiper>
						</block>
						<block v-if="!show">
							<dream ref="dream" @showDrawer="showDrawer" :index="fetch.index" :item="fetch.items[fetch.index]" :control="control" :bottom="bottom" class="item"></dream>
						</block>
					</view>
				</dever-drawer-page>
				
				
				<dever-drawer-window v-for="(v, k) in drawer.item" :key="k" :type="k" :show="v.show" :zIndex="v.index" padding="v.padding" :top="v.top" :direction="v.direction" :width="v.width" v-on:closeDrawer="closeDrawer(k)" v-on:bottomFunc="bottomFunc">
					<view slot="links">
						<block v-if="k == 'cate'">
							<cate ref="cate" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param" :page_id="fetch.page_id"  @getCate="getCate"></cate>
						</block>
						
						<block v-if="k == 'community'">
							<community ref="community" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param"></community>
						</block>
						
						<block v-if="k == 'times'">
							<times ref="times" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param" :set="v.set" :times="fetch.times_id" @getTimes="getTimes"></times>
						</block>
						
						<block v-if="k == 'shop'">
							<shop ref="shop" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param"></shop>
						</block>
						
						<block v-if="k == 'my'">
							<my ref="my" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param"></my>
						</block>
						
						<block v-if="k == 'share'">
							<share ref="share" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param" :type="type"></share>
						</block>
					</view>
				</dever-drawer-window>
				
				<y-Fab v-if="!drawer.show && fetch.user.avatar && show" :bottom="20" :right="20" :btnList="drawer.button" :bgmPlay="bgm.playing" @click="clickDrawerButton" :text="`P`+(swiper.index+1)" :icon_o="fetch.user.avatar"></y-Fab>
				<y-Fab v-if="!show" :bottom="20" :right="20" @click="goHome" :text="`更多`"></y-Fab>
			</view>
			
			<dever-share ref="share" :data="fetch.share" v-if="fetch.share"></dever-share>
		</view>
	</gracePage>
</template>
<script>
import cate from "@/pages/dream/func/cate.vue";
import community from "@/pages/dream/func/community.vue";
import times from "@/pages/dream/func/times.vue";
import shop from "@/pages/dream/func/shop.vue";
import my from "@/pages/dream/func/my.vue";
import share from "@/pages/dream/func/share.vue";
import dream from "@/pages/dream/view/dream.vue";
import deverDrawerPage from "@/lib/dever/components/drawerPage.vue";
import deverDrawerWindow from "@/lib/dever/components/drawerWindow.vue";
import deverShare from '@/lib/dever/components/share.vue';
export default{
	data() {
		return {
			guide : false,
			bgm : {
				show : false,
				playing : false,
			},
			login : '',
			content_id : 0,
			type : -1,
			show : false,
			swiper : {
				index : 0,
				circular : true,
			},
			fetch: {
				items : [],
				user : {},
				index : 0,
				info_id : 0,
				page_id : 0,
				page_info : {
					bgmusic : '',
				},
				parent_page_id : 0,
				times_id : 0,
			},
			control : {},
			bottom : {},
			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) {
		if (!option.code) {
			this.Dever.location('index/index');
			return;
		}
		var g = this.Dever.data('guide');
		if (!g) {
			this.guide = true;
		} else {
			this.guide = false;
		}
		if (option && option.name) {
			uni.setNavigationBarTitle({
				title:option.name
			});
		}
		//this.Dever.login = 'user/login?code=' + option.code;
		//this.Dever.checkLogin();
		this.login = this.Dever.getToken();
		this.Dever.config.name = option.name;
		this.Dever.config.code = option.code;
		this.Dever.config.system = uni.getSystemInfoSync();
		this.getData();
	},
	// 重新加载
	onPullDownRefresh: function() {
		if (this.drawer.show && this.drawer.item[this.drawer.show].show == true) {
			this.$refs[this.drawer.show][0].getData();
		} else {
			this.getData();
		}
	},
	onShow : function() {
		this.controlHandle();
	},
	onHide() {
		//this.stop();
	},
	onBackPress(e) {
		this.stop();
	},
	beforeDestroy() {
		this.stop();
	},
	methods:{
		closeGuide : function() {
			this.guide = false;
			this.Dever.data('guide', 2);
		},
		stop : function() {
			if (this.control) {
				var i = 0;
				for (i in this.control) {
					if (this.control[i].load) {
						this.control[i].stop();
					}
				}
			}
			
			this.Dever.bgm().stop();
		},
		// 播放背景音乐
		bgmControl : function() {
			this.Dever.bgm().control();
		},
		// 页面触底刷新
		bottomCall: function() {
			if (this.bottom && this.bottom[this.swiper.index]) {
				this.bottom[this.swiper.index].getData(2);
			}
		},
		// drawer触底刷新
		bottomFunc : function() {
			if (this.drawer.show && this.drawer.item[this.drawer.show].show == true) {
				this.$refs[this.drawer.show][0].getInfo(2);
			}
		},
		record : function() {
			if (!this.login) {
				return;
			}
			var self = this;
			var content_id = this.fetch.items[this.swiper.index].id;
			this.Dever.post('app/user/?l=api.record', {noloading:1, code:this.Dever.config.code, index: this.swiper.index, content_id: content_id}, function(t) {
				self.Dever.config.code = t.code;
				if (self.Dever.source == 'h5') {
					
				}
			});
		},
		
		controlHandle : function() {
			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.Dever.bgm().stop();
							this.control[i].start();
						} else {
							this.control[i].stop();
						}
					}
				}
				
				if (this.control[this.swiper.index]) {
					this.bgm.show = false;
				} else if (this.fetch.page_info.bgmusic) {
					this.bgm.show = true;
				}
			}
		},
		change : function(e) {
			this.fetch.index = this.swiper.index = parseInt(e.detail.current);
			//用户记录
			this.record();
			this.controlHandle();
			if (this.swiper.index >= this.fetch.total) {
				
			}
		},
		view : function() {
			this.Dever.location('dream/view?id=1');
		},
		initDrawer : function() {
			//this.getContentId();
			var i = '';
			this.drawer.button = [];
			for (i in this.drawer.item) {
				this.drawer.item[i].button.key = i;
				this.drawer.item[i].param.type = 3;
				this.drawer.item[i].param.type_id = this.content_id;
				this.drawer.button.push(this.drawer.item[i].button);
			}
		},
		getData : function() {
			var self = this;
			self.drawer.item = {};
			this.Dever.get(this, 'app/collection/?l=api.getContent', {code:this.Dever.config.code}, function(t) {
				self.show = t.show;
				self.Dever.bgm().init(self, t.page_info.bgmusic, t.page_info.name, t.info.name, t.page_info.pic, t.page_info.bgmusic_autoplay);
				uni.setNavigationBarTitle({
					title:t.info.name
				});
				self.swiper.index = t.index ? parseInt(t.index) : 0;
				self.record();
				if (t && t['func']) {
					self.drawer.item = t['func'];
					self.initDrawer();
					if (t['func']['cate']) {
						self.getCate();
					}
					if (t['func']['times']) {
						self.getTimes();
					}
				}
			});
		},
		getCate : function() {
			if (!this.login) {
				return;
			}
			var self = this;
			this.Dever.get(this, 'app/collection/?l=api.getCategory', {code:this.Dever.config.code,noloading:1}, function(t) {
				self.drawer.item['cate'].param = t;
			});
		},
		getTimes : function() {
			if (!this.login) {
				return;
			}
			var self = this;
			this.Dever.get(this, 'app/collection/?l=api.getTimes', {code:this.Dever.config.code,noloading:1}, function(t) {
				if (t && t.times && t.times.length > 0) {
					self.drawer.item['times'].param = t;
				} else {
					delete self.drawer.item['times'];
					self.initDrawer();
				}
			});
		},
		goIndex : function(index) {
			this.fetch.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) {
			if (!key && this.drawer.show) {
				key = this.drawer.show;
			}
			if (!key) {
				return;
			}
			this.drawer.item[key].show = false;
			this.drawer.show = '';
		},
		getContentId : function() {
			this.content_id = this.fetch.items[this.swiper.index].id;
			this.type = this.fetch.items[this.swiper.index].type;
		},
		clickDrawerButton : function(e) {
			var key = this.drawer.button[e.index].key;
			if (key != 'bgm') {
				this.showDrawer(key);
			}
		},
		goHome : function() {
			this.Dever.location('dream/index?id='+this.fetch.info_id);
		}
	},
	components:{
		dream,cate,community,times,shop,my,share,deverDrawerPage,deverDrawerWindow,deverShare
	}
}
</script>
<style>
.container {
  position: absolute;
  height: 100%;
  width: 100%;
  left: 0;
  top: 0;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
}
.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%;
}
.journal-guide {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 300;
}

.journal-guide .guide-center {
  background: url(@/static/images/guide-center.png) no-repeat center;
  background-size: 628rpx 118rpx;
  width: 628rpx;
  height: 118rpx;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.journal-guide .guide-bottom {
  background: url(@/static/images/guide-bt.png) no-repeat center;
  background-size: 298rpx 105rpx;
  width: 298rpx;
  height: 105rpx;
  position: absolute;
  bottom: 86rpx;
  left: 50%;
  transform: translate3d(-50%, 0, 0);
}
</style>