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 community" v-if="community.show" @click="showCommunity">{{community.name}}</view>
			<view class="page-num cate" v-if="cate.show" @click="showCate">{{cate.name}}</view>
		</view>
		
		<view class="page-num" @click="setShow" v-if="index != -1">P{{index+1}}</view>
		
		<y-Fab :bottom="140" :right="40" :btnList="fabList" @click="handleFab" style="display:none;"/>
	</view>
</template>

<script>
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 {
			community : {
				name : '区',
				show : false,
			},
			cate : {
				name : '选',
				show : false,
			},
			//fab的设置
			fabList: [
				{
					bgColor: '#55ff7f',
					text: '选集',
					fontSize: 28,
					color: '#fff'
				},
				{
					bgColor: '#16C2C2',
					text: '御所',
					fontSize: 28,
					color: '#fff'
				},
				{
					bgColor: '#37b59d',
					text: '穿越',
					fontSize: 28,
					color: '#fff'
				}
			]
		}
	},
	methods:{
		setShow : function() {
			this.cate.show = !this.community.show;
			this.community.show = !this.community.show;
		},
		showCate : function() {
			this.$emit('cate');
		},
		showCommunity : function() {
			this.$emit('community');
		},
	},
	components:{
		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>