|
@@ -1,58 +1,66 @@
|
|
|
<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 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 == 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" :previous-margin="previous_margin" :next-margin="next_margin" @change="setMargin" circular="true">
|
|
|
- <swiper-item v-for="(v, k) in item.data" :key="k" style="overflow: unset;">
|
|
|
- <pic @setHeight="setHeight" :index="index" :pic_index="k" :item="v" :control="control" :bottom="bottom"></pic>
|
|
|
- </swiper-item>
|
|
|
+ <!--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 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" circular="true">
|
|
|
- <swiper-item v-for="(v, k) in item.data" :key="k">
|
|
|
- <picGrid :index="index" :item="v" :control="control" :bottom="bottom"></picGrid>
|
|
|
- </swiper-item>
|
|
|
+ <!--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">
|
|
|
- <swiper class="swiper" autoplay="false" vertical="true" interval="990000" circular="true">
|
|
|
- <swiper-item v-for="(v, k) in item.data" :key="k">
|
|
|
- <vod :index="index" :item="v" :control="control" :bottom="bottom"></vod>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
+ <!--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 == 22">
|
|
|
+ <vodComment :index="index" :item="item.data" :control="control" :bottom="bottom"></vodComment>
|
|
|
</view>
|
|
|
|
|
|
|
|
@@ -68,124 +76,121 @@
|
|
|
<!--直播-->
|
|
|
<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 == 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 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";
|
|
|
+<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 audioList from "@/pages/dream/view/audioList.vue";
|
|
|
import audioComment from "@/pages/dream/view/audioComment.vue";
|
|
|
-import liveComment from "@/pages/dream/view/liveComment.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";
|
|
|
-export default {
|
|
|
- name: "dream",
|
|
|
- props: {
|
|
|
- control : {
|
|
|
- type : Object,
|
|
|
- value : null
|
|
|
- },
|
|
|
- bottom : {
|
|
|
- type : Object,
|
|
|
- value : null
|
|
|
- },
|
|
|
- item : {
|
|
|
- type : Object,
|
|
|
- value : null
|
|
|
+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 : {}
|
|
|
},
|
|
|
- index : 0,
|
|
|
- },
|
|
|
- data() {
|
|
|
- return {
|
|
|
- item_height : {},
|
|
|
+ item : {
|
|
|
+ type : Object,
|
|
|
+ defalut : {}
|
|
|
+ },
|
|
|
+ index : {
|
|
|
+ type : Number,
|
|
|
+ default : 0
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ circular : true,
|
|
|
+ vertical : true,
|
|
|
next_margin : '0px',
|
|
|
- previous_margin : '0px',
|
|
|
- }
|
|
|
- },
|
|
|
- mounted() {
|
|
|
- this.item_height[this.index] = [];
|
|
|
- },
|
|
|
- methods:{
|
|
|
- setHeight : function(index, height) {
|
|
|
- this.item_height[this.index][index] = height;
|
|
|
- if (index == 0) {
|
|
|
- this.setMargin(false, index);
|
|
|
- }
|
|
|
- },
|
|
|
+ previous_margin : '0px',
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
getData : function(page) {
|
|
|
|
|
|
},
|
|
|
- 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);
|
|
|
+ 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(e, i) {
|
|
|
- var index = i >= 0 ? i : e.detail.current;
|
|
|
- /*
|
|
|
- if (this.item.type == 11 || this.item.type == 13 || this.item.type == 20) {
|
|
|
- this.showPage(index);
|
|
|
- }
|
|
|
- */
|
|
|
- if (this.item_height[this.index].length > 0 && this.item_height[this.index][index]) {
|
|
|
- var height = this.item_height[this.index][index];
|
|
|
+ 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
|
|
|
- }
|
|
|
-}
|
|
|
+ },
|
|
|
+ },
|
|
|
+ components:{
|
|
|
+ cover,news,pic,picGrid,vod,vodComment,vodShort,audioList,audioComment,liveComment,dialogue,linkView,webView,product,moment,deverSwiper
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<style>
|
|
@@ -196,14 +201,14 @@ export default {
|
|
|
top: 0;
|
|
|
left: 0;
|
|
|
z-index: 1;
|
|
|
-}
|
|
|
-.swiper{
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- position: relative;
|
|
|
- top: 0;
|
|
|
+}
|
|
|
+.swiper{
|
|
|
+ width: 100vw;
|
|
|
+ height: 100vh;
|
|
|
+ position: relative;
|
|
|
+ top: 0;
|
|
|
left: 0;
|
|
|
- z-index: 1;
|
|
|
+ z-index: 1;
|
|
|
}
|
|
|
.page-num {
|
|
|
position: fixed;
|
|
@@ -218,20 +223,20 @@ export default {
|
|
|
line-height: 80rpx;
|
|
|
text-align: center;
|
|
|
z-index: 2000;
|
|
|
-}
|
|
|
-
|
|
|
+}
|
|
|
+
|
|
|
.love {
|
|
|
bottom: 310rpx;
|
|
|
-}
|
|
|
-
|
|
|
-.community {
|
|
|
- bottom: 220rpx;
|
|
|
- background-color: #ff5500;
|
|
|
-}
|
|
|
-
|
|
|
-.cate {
|
|
|
- bottom: 130rpx;
|
|
|
- background-color: #3688ff;
|
|
|
-}
|
|
|
+}
|
|
|
+
|
|
|
+.community {
|
|
|
+ bottom: 220rpx;
|
|
|
+ background-color: #ff5500;
|
|
|
+}
|
|
|
+
|
|
|
+.cate {
|
|
|
+ bottom: 130rpx;
|
|
|
+ background-color: #3688ff;
|
|
|
+}
|
|
|
|
|
|
</style>
|