dreamland/pages/dream/view/dream.vue

<template name="dream">
	<view class="dream">
		<!--文章-->
		<view v-if="item.type == 1">
			<news :index="index" :item="item.data" :control="control"></news>
		</view>
		<!--普通图片-->
		<view v-else-if="item.type == 10">
			<pic :index="index" :item="item.data" :control="control"></pic>
		</view>
		<!--多张图片-->
		<view v-else-if="item.type == 11">
			<swiper class="swiper" autoplay="false" vertical="true" interval="990000">
				<swiper-item v-for="(v, k) in item.data" :key="k">
					<pic :index="index" :item="v" :control="control"></pic>
				</swiper-item>
			</swiper>
		</view>
		
		<!--四宫格图片-->
		<view v-else-if="item.type == 12">
			<picGrid :index="index" :item="item.data" :control="control"></picGrid>
		</view>
		
		<!--多张四宫格图片-->
		<view v-else-if="item.type == 13">
			<swiper class="swiper" autoplay="false" vertical="true" interval="990000">
				<swiper-item v-for="(v, k) in item.data" :key="k">
					<picGrid :index="index" :item="v" :control="control"></picGrid>
				</swiper-item>
			</swiper>
			
		</view>
		
		
		<!--视频-->
		<view v-else-if="item.type == 20">
			<swiper class="swiper" autoplay="false" vertical="true" interval="990000">
				<swiper-item v-for="(v, k) in item.data" :key="k">
					<vod :index="index" :item="v" :control="control"></vod>
				</swiper-item>
			</swiper>
		</view>
		<!--短视频-->
		<view v-else-if="item.type == 21">
			<vodShort :index="index" :item="item.data" :control="control"></vodShort>
		</view>
		<!--留言视频-->
		<view v-else-if="item.type == 22">
			<vodComment :index="index" :item="item.data" :control="control"></vodComment>
		</view>
		
		
		<!--音频播放-->
		<view v-else-if="item.type == 30">
			<audioList :index="index" :item="item.data" :control="control"></audioList>
		</view>
		<!--留言音频-->
		<view v-else-if="item.type == 31">
			<audioComment :index="index" :item="item.data" :control="control"></audioComment>
		</view>
		
		<!--直播-->
		<view v-else-if="item.type == 40">
			<liveComment :index="index" :item="item.data" :control="control"></liveComment>
		</view>
		
		<!--对话-->
		<view v-else-if="item.type == 60">
			<dialogue :index="index" :item="item.data" :control="control"></dialogue>
		</view>
		
		<!--电商单个产品-->
		<view v-else-if="item.type == 70">
			<product :index="index" :item="item.data" :control="control"></product>
		</view>
		
		<!--单个链接-->
		<view v-else-if="item.type == 80">
			<linkView :index="index" :item="item.data" :control="control"></linkView>
		</view>
		
		<!--单页面-->
		<view v-else-if="item.type == 82">
			<webView :index="index" :item="item.data" :control="control"></webView>
		</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>
		
		<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>
</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";
import vod from "@/pages/dream/view/vod.vue";
import vodComment from "@/pages/dream/view/vodComment.vue";
import audioList from "@/pages/dream/view/audioList.vue";
import audioComment from "@/pages/dream/view/audioComment.vue";
import liveComment from "@/pages/dream/view/liveComment.vue";
import vodShort from "@/pages/dream/view/vodShort.vue";
import dialogue from "@/pages/dream/view/dialogue.vue";
import linkView from "@/pages/dream/view/linkView.vue";
import webView from "@/pages/dream/view/webView.vue";
import product from "@/pages/dream/view/product.vue";
export default {
	name: "dream",
	props: {
		control : {
			type : Object,
			value : null
		},
		item : {
			type    : Object,
			value	: null
		},
		index : {
			type    : Number,
			value	: null
		},
	},
	data() {
		return {
			comment_show : false,
			select_show : false,
			select_drawer_show : false,
		}
	},
	methods:{
		setShow : function() {
			this.select_show = !this.comment_show;
			this.comment_show = !this.comment_show;
		},
		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;
		},
		closeSelect : function() {
			this.select_drawer_show = false;
		}
	},
	components:{
		cate,news,pic,picGrid,vod,vodComment,vodShort,audioList,audioComment,liveComment,dialogue,linkView,webView,product
	}
}
</script>

<style>
.dream {
	width: 100vw;
	height: 100vh;	
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
}
.swiper{
	width: 100vw;
	height: 100vh;	
	position: relative;
	top: 0;
	left: 0;
	z-index: 1;
}
.page-num {
  position: fixed;
  right: 30rpx;
  bottom: 30rpx;
  width: 80rpx;
  height: 80rpx;
  background-color: rgba(0, 0, 0, 0.75);
  border-radius: 80rpx;
  color: #fff;
  font-size: 30rpx;
  line-height: 80rpx;
  text-align: center;
  z-index: 2000;
}

.love {
  bottom: 310rpx;
}

.comment {
  bottom: 220rpx;
  background-color: #ff5500;
}

.select {
  bottom: 130rpx;
  background-color: #3688ff;
}

</style>