dreamland/pages/dream/view/dream.vue

<template name="dream">
	<view class="dream">
		<!--封面-->
		<view v-if="item.type == -1">
			<cover :index="index" :item="item" :control="control" :bottom="bottom" @showDrawer="showDrawer"></cover>
		</view>
		
		<!--文章-->
		<view v-if="item.type == 1">
			<news :index="index" :item="item.data" :control="control" :bottom="bottom"></news>
		</view>
		<!--普通图片-->
		<view v-else-if="item.type == 10">
			<pic :index="index" :item="item.data" :control="control" :bottom="bottom"></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" :bottom="bottom"></pic>
				</swiper-item>
			</swiper>
		</view>
		
		<!--四宫格图片-->
		<view v-else-if="item.type == 12">
			<picGrid :index="index" :item="item.data" :control="control" :bottom="bottom"></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" :bottom="bottom"></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" :bottom="bottom"></vod>
				</swiper-item>
			</swiper>
		</view>
		<!--短视频-->
		<view v-else-if="item.type == 21">
			<vodShort :index="index" :item="item.data" :control="control" :bottom="bottom"></vodShort>
		</view>
		<!--留言视频-->
		<view v-else-if="item.type == 22">
			<vodComment :index="index" :item="item.data" :control="control" :bottom="bottom"></vodComment>
		</view>
		
		
		<!--音频播放-->
		<view v-else-if="item.type == 30">
			<audioList :index="index" :item="item.data" :control="control" :bottom="bottom"></audioList>
		</view>
		<!--留言音频-->
		<view v-else-if="item.type == 31">
			<audioComment :index="index" :item="item.data" :control="control" :bottom="bottom"></audioComment>
		</view>
		
		<!--直播-->
		<view v-else-if="item.type == 40">
			<liveComment :index="index" :item="item.data" :control="control" :bottom="bottom"></liveComment>
		</view>
		
		<!--对话-->
		<view v-else-if="item.type == 60">
			<dialogue :index="index" :item="item.data" :control="control" :bottom="bottom"></dialogue>
		</view>
		
		<!--电商单个产品-->
		<view v-else-if="item.type == 70">
			<product :index="index" :item="item.data" :control="control" :bottom="bottom"></product>
		</view>
		
		<!--单个链接-->
		<view v-else-if="item.type == 80">
			<linkView :index="index" :item="item.data" :control="control" :bottom="bottom"></linkView>
		</view>
		
		<!--单页面-->
		<view v-else-if="item.type == 82">
			<webView :index="index" :item="item.data" :control="control" :bottom="bottom"></webView>
		</view>
		
		<!--<view class="page-num" @click="setShow" v-if="index != -1">P{{index+1}}</view>-->
		
		
	</view>
</template>

<script>
import cover from "@/pages/dream/view/cover.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
		},
		bottom : {
			type : Object,
			value : null
		},
		item : {
			type    : Object,
			value	: null
		},
		index : 0
	},
	data() {
		return {
			
		}
	},
	methods:{
		getData : function(page) {
			
		},
		showDrawer : function(key) {
			if (key) {
				this.$emit('showDrawer', key);
			} else {
				this.Dever.alert('您点错了吧~');
			}
		},
		handle : function(e) {
			this.showDrawer(this.button[e.index].key);
		}
	},
	components:{
		cover,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;
}

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

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

</style>