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">
			<!--dever-swiper class="swiper" :circular="circular" :vertical="vertical" :previous_margin="previous_margin" :next_margin="next_margin" @change="setMargin" :item="item.data" v-slot="{k,v}">
				<pic @show="show" :index="index" :pic_index="k" :item="v" :control="control" :bottom="bottom"></pic>
			</dever-swiper-->
			<swiper class="swiper" acceleration="true" :circular="circular" :vertical="vertical" :previous-margin="previous_margin" :next-margin="next_margin">
				<swiper-item v-for="(v, k) in item.data" :key="k" style="overflow: unset;">
					<pic @show="show" :index="index" :pic_index="k" :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">
			<!--dever-swiper class="swiper" :circular="circular" :vertical="vertical" :item="item.data" v-slot="{k,v}">
				<picGrid :index="index" :item="v" :control="control" :bottom="bottom"></picGrid>
			</dever-swiper-->
			<swiper class="swiper" :circular="circular" :vertical="vertical">
				<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">
			<!--dever-swiper class="swiper" :circular="circular" :vertical="vertical" :item="item.data" v-slot="{k,v}">
				<vod :index="index" :item="v" :control="control" :bottom="bottom"></vod>
			</dever-swiper-->
			<swiper class="swiper" :circular="circular" :vertical="vertical">
				<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 == 51">
			<moment :index="index" :item="item.data" :control="control" :bottom="bottom"></moment>
		</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>
</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";
import moment from "@/pages/dream/view/moment.vue";
import deverSwiper from '@/lib/dever/components/swiper.vue';
export default {
	name: "dream",
	props: {
		control : {
			type : Object,
			defalut : {}
		},
		bottom : {
			type : Object,
			defalut : {}
		},
		item : {
			type    : Object,
			defalut : {}
		},
		index : {
			type    : Number,
			default	: 0
		},
	},
	data() {
		return {
			circular : true,
			vertical : true,
			next_margin : '0px',
			previous_margin : '0px',
		}
	},
	methods:{
		getData : function(page) {
			
		},
		show : function(index) {
			this.setMargin(index);
		},
		showDrawer : function(key) {
			if (key) {
				this.$emit('showDrawer', key);
			} else {
				this.Dever.alert('您点错了吧~');
			}
		},
		showPage : function(index) {
			if (index > 0) {
				this.$emit('showPage', -1, index);
			}
		},
		handle : function(e) {
			this.showDrawer(this.button[e.index].key);
		},
		setMargin : function(index) {
			return;
			if (this.item.data[index] && this.item.data[index].pic_info) {
				var temp = this.item.data[index].pic_info.split(',');
				var width = parseFloat(temp[0]);
				var height = parseFloat(temp[1]);
				height = height / (width / this.Dever.config.system.windowWidth);
				var windowHeight = this.Dever.config.system.windowHeight;
				if (windowHeight > height) {
					height = windowHeight-height-3;
					this.next_margin = height + 'px';
				}
			}
		},
	},
	components:{
		cover,news,pic,picGrid,vod,vodComment,vodShort,audioList,audioComment,liveComment,dialogue,linkView,webView,product,moment,deverSwiper
	}
}
</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>