|
|
@@ -1,41 +1,47 @@
|
|
|
<template>
|
|
|
<gracePage :customHeader="false">
|
|
|
- <view class="container" slot="gBody">
|
|
|
- <view class="DrawerPage" :class="drawer ? 'show':''">
|
|
|
- <swiper class="swiper" @change="change" :circular="swiper.circular" :current="index">
|
|
|
- <swiper-item v-for="(v, k) in fetch.items" v-if="v.data" :key="k" >
|
|
|
- <scroll-view scroll-y="true" scroll-x="true" class="scroll-height">
|
|
|
- <dream ref="dream" @cate="cate" @community="community" :index="k" :item="v" :control="control" class="item"></dream>
|
|
|
- </scroll-view>
|
|
|
- </swiper-item>
|
|
|
- </swiper>
|
|
|
- </view>
|
|
|
- <drawer :show="cate_drawer.show" :zIndex="cate_drawer.index" padding="cate_drawer.padding" :top="cate_drawer.top" direction="left" :width="drawer_width" v-on:closeDrawer="closeCate">
|
|
|
- <view slot="links">
|
|
|
- <cate ref="cate" @goIndex="goIndex" :index="index" :content_id="content_id" :info_id="fetch.info_id" :page_id="fetch.page_id" :parent_page_id="fetch.parent_page_id" :fetch="cate_drawer.data"></cate>
|
|
|
- </view>
|
|
|
- </drawer>
|
|
|
+ <view class="container" slot="gBody">
|
|
|
+ <drawerPage :show="drawer.show">
|
|
|
+ <view class="container_main" slot="links">
|
|
|
+ <swiper class="swiper" @change="change" :circular="swiper.circular" :current="index">
|
|
|
+ <swiper-item v-for="(v, k) in fetch.items" v-if="v.data" :key="k" >
|
|
|
+ <scroll-view scroll-y="true" scroll-x="true" class="scroll-height">
|
|
|
+ <dream ref="dream" :button="drawer.button" @showDrawer="showDrawer" :index="k" :item="v" :control="control" class="item"></dream>
|
|
|
+ </scroll-view>
|
|
|
+ </swiper-item>
|
|
|
+ </swiper>
|
|
|
+ </view>
|
|
|
+ </drawerPage>
|
|
|
+
|
|
|
+ <drawerWindow v-for="(v, k) in drawer.item" :key="k" :show="v.show" :zIndex="v.index" padding="v.padding" :top="v.top" direction="v.direction" :width="v.width" v-on:closeDrawer="closeDrawer(k)">
|
|
|
+ <view slot="links">
|
|
|
+ <block v-if="k == 'cate'">
|
|
|
+ <cate ref="cate" @goIndex="goIndex" :index="index" :content_id="content_id" :info_id="fetch.info_id" :page_id="fetch.page_id" :parent_page_id="fetch.parent_page_id" :width="v.width" :param="v.param"></cate>
|
|
|
+ </block>
|
|
|
+
|
|
|
+ <block v-if="k == 'community'">
|
|
|
+ <community ref="community" @goIndex="goIndex" :index="index" :content_id="content_id" :info_id="fetch.info_id" :page_id="fetch.page_id" :parent_page_id="fetch.parent_page_id" :width="v.width" :param="v.param"></community>
|
|
|
+ </block>
|
|
|
+ </view>
|
|
|
+ </drawerWindow>
|
|
|
|
|
|
- <drawer :show="community_drawer.show" :zIndex="community_drawer.index" padding="community_drawer.padding" :top="community_drawer.top" direction="right" :width="drawer_width" v-on:closeDrawer="closeCommunity">
|
|
|
- <view slot="links">
|
|
|
- <community :width="drawer_width" ref="community" @goIndex="goIndex" :index="index" :content_id="content_id" :info_id="fetch.info_id" :page_id="fetch.page_id" :parent_page_id="fetch.parent_page_id" :type="community_drawer.type" :type_id="content_id"></community>
|
|
|
- </view>
|
|
|
- </drawer>
|
|
|
+ <y-Fab v-if="!drawer.show && fetch.user.avatar" :bottom="20" :right="20" :btnList="drawer.button" @click="clickDrawerButton" :text="`P`+(swiper.index+1)" :icon_o="fetch.user.avatar"></y-Fab>
|
|
|
</view>
|
|
|
</gracePage>
|
|
|
</template>
|
|
|
-<script>
|
|
|
-import cate from "@/pages/dream/view/cate.vue";
|
|
|
+<script>
|
|
|
+import cate from "@/pages/dream/view/cate.vue";
|
|
|
import community from "@/pages/dream/view/community.vue";
|
|
|
-import dream from "@/pages/dream/view/dream.vue";
|
|
|
-import drawer from "@/lib/dever/components/drawer.vue";
|
|
|
+import dream from "@/pages/dream/view/dream.vue";
|
|
|
+import drawerPage from "@/lib/dever/components/drawerPage.vue";
|
|
|
+import drawerWindow from "@/lib/dever/components/drawerWindow.vue";
|
|
|
var graceRichText = require("@/lib/graceUI/jsTools/richText.js");
|
|
|
export default{
|
|
|
data() {
|
|
|
- return {
|
|
|
- id : 1,
|
|
|
- page_id : 1,
|
|
|
- index : 0,
|
|
|
+ return {
|
|
|
+ id : 1,
|
|
|
+ page_id : 1,
|
|
|
+ index : 0,
|
|
|
content_id : 0,
|
|
|
swiper : {
|
|
|
index : 0,
|
|
|
@@ -43,120 +49,142 @@ export default{
|
|
|
},
|
|
|
fetch: {
|
|
|
items : [],
|
|
|
- info_id : 0,
|
|
|
- page_id : 0,
|
|
|
+ user : {},
|
|
|
+ info_id : 0,
|
|
|
+ page_id : 0,
|
|
|
parent_page_id : 0,
|
|
|
- },
|
|
|
- control : {},
|
|
|
- cate_drawer : {
|
|
|
- index : 5,
|
|
|
- top: 0,
|
|
|
- padding: '0rpx',
|
|
|
- show : false,
|
|
|
- data : {},
|
|
|
- },
|
|
|
- community_drawer : {
|
|
|
- index : 5,
|
|
|
- top: 0,
|
|
|
- padding: '0rpx',
|
|
|
- show : false,
|
|
|
- type : 3,
|
|
|
- },
|
|
|
- drawer : false,
|
|
|
- drawer_width : '86%',
|
|
|
+ },
|
|
|
+ control : {},
|
|
|
+ drawer : {
|
|
|
+ // 是否显示
|
|
|
+ show : '',
|
|
|
+ button : [],
|
|
|
+ item : {
|
|
|
+ cate : {
|
|
|
+ show : false,
|
|
|
+ index : 5,
|
|
|
+ top: 0,
|
|
|
+ padding: '0rpx',
|
|
|
+ width : '86%',
|
|
|
+ direction : 'left',
|
|
|
+ param : {},
|
|
|
+ button : {
|
|
|
+ bgColor: '#55ff7f',
|
|
|
+ text: '选集',
|
|
|
+ fontSize: 28,
|
|
|
+ color: '#fff'
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ community : {
|
|
|
+ show : false,
|
|
|
+ index : 5,
|
|
|
+ top: 0,
|
|
|
+ padding: '0rpx',
|
|
|
+ width : '86%',
|
|
|
+ direction : 'left',
|
|
|
+ param : {
|
|
|
+ type : 3,
|
|
|
+ type_id : this.content_id,
|
|
|
+ },
|
|
|
+ button : {
|
|
|
+ bgColor: '#16C2C2',
|
|
|
+ text: '御所',
|
|
|
+ fontSize: 28,
|
|
|
+ color: '#fff'
|
|
|
+ },
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(option) {
|
|
|
+ this.id = option.id;
|
|
|
+ this.page_id = option.page_id;
|
|
|
+ this.index = option.index;
|
|
|
+ this.initDrawer();
|
|
|
+ this.getData();
|
|
|
+ },
|
|
|
+ // 重新加载
|
|
|
+ onPullDownRefresh: function() {
|
|
|
+ if (this.drawer.show && this.drawer.item[this.drawer.show].show == true) {
|
|
|
+ this.$refs[this.drawer.show].getData();
|
|
|
+ } else {
|
|
|
+ this.getData();
|
|
|
}
|
|
|
- },
|
|
|
- onLoad(option) {
|
|
|
- this.id = option.id;
|
|
|
- this.page_id = option.page_id;
|
|
|
- this.index = option.index;
|
|
|
- this.getData();
|
|
|
- },
|
|
|
- // 重新加载
|
|
|
- onPullDownRefresh: function() {
|
|
|
- if (this.cate_drawer.show == true) {
|
|
|
- this.$refs.cate.getData();
|
|
|
- } else if (this.community_drawer.show == true) {
|
|
|
- this.$refs.community.getData();
|
|
|
- } else {
|
|
|
- this.getData();
|
|
|
- }
|
|
|
- },
|
|
|
- // 触底刷新
|
|
|
- onReachBottom: function() {
|
|
|
- console.info(222);
|
|
|
- if (this.community_drawer.show == true) {
|
|
|
- this.$refs.community.getInfo(false, 2);
|
|
|
- }
|
|
|
+ },
|
|
|
+ // 触底刷新
|
|
|
+ onReachBottom: function() {
|
|
|
+ console.info(222);
|
|
|
},
|
|
|
methods:{
|
|
|
change : function(e) {
|
|
|
- this.swiper.index = e.detail.current;
|
|
|
- if (this.control) {
|
|
|
- var i = 0;
|
|
|
- for (i in this.control) {
|
|
|
- if (this.control[i].load) {
|
|
|
- console.info(i);
|
|
|
- if (this.swiper.index == i) {
|
|
|
- console.info('start');
|
|
|
- this.control[i].start();
|
|
|
- } else {
|
|
|
- this.control[i].stop();
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- if (this.swiper.index == this.fetch.items.length - 1) {
|
|
|
- //this.$refs.dream[this.swiper.index].setShow();
|
|
|
+ this.swiper.index = e.detail.current;
|
|
|
+ if (this.control) {
|
|
|
+ var i = 0;
|
|
|
+ for (i in this.control) {
|
|
|
+ if (this.control[i].load) {
|
|
|
+ console.info(i);
|
|
|
+ if (this.swiper.index == i) {
|
|
|
+ console.info('start');
|
|
|
+ this.control[i].start();
|
|
|
+ } else {
|
|
|
+ this.control[i].stop();
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
}
|
|
|
},
|
|
|
view : function() {
|
|
|
this.Dever.location('dream/view?id=1');
|
|
|
- },
|
|
|
- getData : function() {
|
|
|
- var self = this;
|
|
|
- this.Dever.get(this, 'app/collection/?l=api.getContent', {id:this.id, page_id:this.page_id}, function(t) {
|
|
|
- self.getCate(t);
|
|
|
- });
|
|
|
- },
|
|
|
- getCate : function(info) {
|
|
|
- var self = this;
|
|
|
- this.Dever.get(this, 'app/collection/?l=api.category', {id:info.info_id, parent_page_id:info.parent_page_id, page_id:info.page_id, noloading:1}, function(t) {
|
|
|
- self.cate_drawer.data = t;
|
|
|
- });
|
|
|
- },
|
|
|
- goIndex : function(index) {
|
|
|
+ },
|
|
|
+ initDrawer : function() {
|
|
|
+ var i = '';
|
|
|
+ for (i in this.drawer.item) {
|
|
|
+ this.drawer.item[i].button.key = i;
|
|
|
+ this.drawer.button.push(this.drawer.item[i].button);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ getData : function() {
|
|
|
+ var self = this;
|
|
|
+ this.Dever.get(this, 'app/collection/?l=api.getContent', {id:this.id, page_id:this.page_id}, function(t) {
|
|
|
+ self.getCate(t);
|
|
|
+ });
|
|
|
+ },
|
|
|
+ getCate : function(info) {
|
|
|
+ var self = this;
|
|
|
+ this.Dever.get(this, 'app/collection/?l=api.category', {id:info.info_id, parent_page_id:info.parent_page_id, page_id:info.page_id, noloading:1}, function(t) {
|
|
|
+ self.drawer.item['cate'].param = t;
|
|
|
+ });
|
|
|
+ },
|
|
|
+ goIndex : function(index) {
|
|
|
this.index = index;
|
|
|
- this.closeCate();
|
|
|
- this.closeCommunity();
|
|
|
- var dream = this.$refs.dream[this.swiper.index];
|
|
|
- dream.setShow();
|
|
|
- },
|
|
|
- cate : function() {
|
|
|
- this.getContentId();
|
|
|
- this.cate_drawer.show = !this.cate_drawer.show;
|
|
|
- this.drawer = !this.drawer;
|
|
|
- },
|
|
|
- closeCate : function() {
|
|
|
- this.cate_drawer.show = false;
|
|
|
- this.drawer = false;
|
|
|
- },
|
|
|
- community : function() {
|
|
|
- this.getContentId();
|
|
|
- this.community_drawer.show = !this.community_drawer.show;
|
|
|
- this.drawer = !this.drawer;
|
|
|
- },
|
|
|
- closeCommunity : function() {
|
|
|
- this.community_drawer.show = false;
|
|
|
- this.drawer = false;
|
|
|
+ if (this.drawer.show) {
|
|
|
+ this.closeDrawer(this.drawer.show);
|
|
|
+ }
|
|
|
+ },
|
|
|
+ showDrawer : function(key) {
|
|
|
+ this.getContentId();
|
|
|
+ this.drawer.item[key].show = !this.drawer.item[key].show;
|
|
|
+ if (this.drawer.show) {
|
|
|
+ this.drawer.show = '';
|
|
|
+ } else {
|
|
|
+ this.drawer.show = key;
|
|
|
+ }
|
|
|
+ },
|
|
|
+ closeDrawer : function(key) {
|
|
|
+ this.drawer.item[key].show = false;
|
|
|
+ this.drawer.show = '';
|
|
|
+ },
|
|
|
+ getContentId : function() {
|
|
|
+ this.content_id = this.fetch.items[this.swiper.index].id;
|
|
|
},
|
|
|
- getContentId : function() {
|
|
|
- this.content_id = this.fetch.items[this.swiper.index].id;
|
|
|
- }
|
|
|
-
|
|
|
+ clickDrawerButton : function(e) {
|
|
|
+ this.showDrawer(this.drawer.button[e.index].key);
|
|
|
+ }
|
|
|
},
|
|
|
components:{
|
|
|
- dream,cate,community,drawer
|
|
|
+ dream,cate,community,drawerPage,drawerWindow
|
|
|
}
|
|
|
}
|
|
|
</script>
|
|
|
@@ -166,8 +194,12 @@ export default{
|
|
|
height: 100%;
|
|
|
width: 100%;
|
|
|
left: 0;
|
|
|
- top: 0;
|
|
|
+ top: 0;
|
|
|
-webkit-overflow-scrolling: touch;
|
|
|
+}
|
|
|
+.container_main {
|
|
|
+ width: 750rpx;
|
|
|
+ height: 100%;
|
|
|
}
|
|
|
.swiper {
|
|
|
width: 750rpx;
|
|
|
@@ -179,106 +211,8 @@ swiper-item>view{
|
|
|
swiper-item image{
|
|
|
width: 750rpx;
|
|
|
height: 100%;
|
|
|
-}
|
|
|
-.scroll-height {
|
|
|
- height:100%;
|
|
|
-}
|
|
|
-.DrawerPage {
|
|
|
- position: fixed;
|
|
|
- width: 100vw;
|
|
|
- height: 100vh;
|
|
|
- left: 0vw;
|
|
|
- background-color: #f1f1f1;
|
|
|
- transition: all 0.4s;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerPage.show {
|
|
|
- transform: scale(0.9, 0.9);
|
|
|
- left: 85vw;
|
|
|
- box-shadow: 0 0 60upx rgba(0, 0, 0, 0.2);
|
|
|
- transform-origin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerWindow {
|
|
|
- position: absolute;
|
|
|
- width: 85vw;
|
|
|
- height: 100vh;
|
|
|
- left: 0;
|
|
|
- top: 0;
|
|
|
- transform: scale(0.9, 0.9) translateX(-100%);
|
|
|
- opacity: 0;
|
|
|
- pointer-events: none;
|
|
|
- transition: all 0.4s;
|
|
|
- padding: 100upx 0;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerWindow.show {
|
|
|
- transform: scale(1, 1) translateX(0%);
|
|
|
- opacity: 1;
|
|
|
- pointer-events: all;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerClose {
|
|
|
- position: absolute;
|
|
|
- width: 40vw;
|
|
|
- height: 100vh;
|
|
|
- right: 0;
|
|
|
- top: 0;
|
|
|
- color: transparent;
|
|
|
- padding-bottom: 30upx;
|
|
|
- display: flex;
|
|
|
- align-items: flex-end;
|
|
|
- justify-content: center;
|
|
|
- background-image: linear-gradient(90deg, rgba(0, 0, 0, 0.01), rgba(0, 0, 0, 0.6));
|
|
|
- letter-spacing: 5px;
|
|
|
- font-size: 50upx;
|
|
|
- opacity: 0;
|
|
|
- pointer-events: none;
|
|
|
- transition: all 0.4s;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerClose.show {
|
|
|
- opacity: 1;
|
|
|
- pointer-events: all;
|
|
|
- width: 15vw;
|
|
|
- color: #fff;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerPage .cu-bar.tabbar .action button.cuIcon {
|
|
|
- width: 64upx;
|
|
|
- height: 64upx;
|
|
|
- line-height: 64upx;
|
|
|
- margin: 0;
|
|
|
- display: inline-block;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerPage .cu-bar.tabbar .action .cu-avatar {
|
|
|
- margin: 0;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerPage .nav {
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerPage .nav .cu-item.cur {
|
|
|
- border-bottom: 0;
|
|
|
- position: relative;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerPage .nav .cu-item.cur::after {
|
|
|
- content: "";
|
|
|
- width: 10upx;
|
|
|
- height: 10upx;
|
|
|
- background-color: currentColor;
|
|
|
- position: absolute;
|
|
|
- bottom: 10upx;
|
|
|
- border-radius: 10upx;
|
|
|
- left: 0;
|
|
|
- right: 0;
|
|
|
- margin: auto;
|
|
|
- }
|
|
|
-
|
|
|
- .DrawerPage .cu-bar.tabbar .action {
|
|
|
- flex: initial;
|
|
|
- }
|
|
|
+}
|
|
|
+.scroll-height {
|
|
|
+ height:100%;
|
|
|
+}
|
|
|
</style>
|
dever