view.vue 21 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415
  1. <template>
  2. <gracePage :customHeader="false">
  3. <view class="container" slot="gBody">
  4. <ourLoading isFullScreen :active="pageLoading" :text="pageLoadingText" />
  5. <view v-if="fetch.items.length > 0">
  6. <dever-drawer-page :show="drawer.show ? 'left' : ''">
  7. <view class="container_main" slot="links" @click="closeDrawer()">
  8. <block v-if="show">
  9. <swiper class="swiper" @change="change" :circular="swiper.circular" :current="fetch.index">
  10. <swiper-item v-for="(v, k) in fetch.items" v-if="v.data" :key="k" >
  11. <scroll-view scroll-y="true" scroll-x="true" class="scroll-height" @scrolltolower="bottomCall">
  12. <dream ref="dream" @showDrawer="showDrawer" :index="k" :item="v" :control="control" :bottom="bottom" class="item"></dream>
  13. </scroll-view>
  14. </swiper-item>
  15. </swiper>
  16. </block>
  17. <block v-if="!show">
  18. <dream ref="dream" @showDrawer="showDrawer" :index="fetch.index" :item="fetch.items[fetch.index]" :control="control" :bottom="bottom" class="item"></dream>
  19. </block>
  20. </view>
  21. </dever-drawer-page>
  22. <dever-drawer-window v-for="(v, k) in drawer.item" :key="k" :type="k" :show="v.show" :zIndex="v.index" padding="v.padding" :top="v.top" :direction="v.direction" :width="v.width" v-on:closeDrawer="closeDrawer(k)" v-on:bottomFunc="bottomFunc">
  23. <view slot="links">
  24. <block v-if="k == 'cate'">
  25. <cate ref="cate" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param" :page_id="fetch.page_id" @getCate="getCate"></cate>
  26. </block>
  27. <block v-if="k == 'community'">
  28. <community ref="community" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param"></community>
  29. </block>
  30. <block v-if="k == 'times'">
  31. <times ref="times" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param" :set="v.set" :times="fetch.times_id" @getTimes="getTimes"></times>
  32. </block>
  33. <block v-if="k == 'shop'">
  34. <shop ref="shop" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param"></shop>
  35. </block>
  36. <block v-if="k == 'my'">
  37. <my ref="my" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param"></my>
  38. </block>
  39. <block v-if="k == 'share'">
  40. <share ref="share" @goIndex="goIndex" :index="fetch.index" :content_id="content_id" :width="v.width" :param="v.param" :type="type"></share>
  41. </block>
  42. </view>
  43. </dever-drawer-window>
  44. <view v-if="fetch.page_info.bgmusic" :class="!bgm_playing ? `bgm bgm-paused` : `bgm`" @click="bgmControl"></view>
  45. <y-Fab v-if="!drawer.show && fetch.user.avatar && show" :bottom="20" :right="20" :btnList="drawer.button" @click="clickDrawerButton" :text="`P`+(swiper.index+1)" :icon_o="fetch.user.avatar"></y-Fab>
  46. <y-Fab v-if="!show" :bottom="20" :right="20" @click="goHome" :text="`更多`"></y-Fab>
  47. </view>
  48. </view>
  49. </gracePage>
  50. </template>
  51. <script>
  52. import cate from "@/pages/dream/func/cate.vue";
  53. import community from "@/pages/dream/func/community.vue";
  54. import times from "@/pages/dream/func/times.vue";
  55. import shop from "@/pages/dream/func/shop.vue";
  56. import my from "@/pages/dream/func/my.vue";
  57. import share from "@/pages/dream/func/share.vue";
  58. import dream from "@/pages/dream/view/dream.vue";
  59. import deverDrawerPage from "@/lib/dever/components/drawerPage.vue";
  60. import deverDrawerWindow from "@/lib/dever/components/drawerWindow.vue";
  61. export default{
  62. data() {
  63. return {
  64. bgm_playing : true,
  65. login : '',
  66. content_id : 0,
  67. type : -1,
  68. show : false,
  69. swiper : {
  70. index : 0,
  71. circular : false,
  72. },
  73. fetch: {
  74. items : [],
  75. user : {},
  76. index : 0,
  77. info_id : 0,
  78. page_id : 0,
  79. page_info : {
  80. bgmusic : '',
  81. },
  82. parent_page_id : 0,
  83. times_id : 0,
  84. },
  85. control : {},
  86. bottom : {},
  87. drawer : {
  88. // 是否显示
  89. show : '',
  90. button : [],
  91. item : {
  92. cate : {
  93. show : false,
  94. index : 5,
  95. top: 0,
  96. padding: '0rpx',
  97. width : '86%',
  98. direction : 'left',
  99. param : {},
  100. button : {
  101. bgColor: '#55ff7f',
  102. text: '选集',
  103. fontSize: 28,
  104. color: '#fff'
  105. }
  106. },
  107. community : {
  108. show : false,
  109. index : 5,
  110. top: 0,
  111. padding: '0rpx',
  112. width : '86%',
  113. direction : 'left',
  114. param : {
  115. type : 3,
  116. type_id : this.content_id,
  117. },
  118. button : {
  119. bgColor: '#16C2C2',
  120. text: '社区',
  121. fontSize: 28,
  122. color: '#fff'
  123. },
  124. }
  125. }
  126. }
  127. }
  128. },
  129. onLoad(option) {
  130. if (!option.code) {
  131. this.Dever.location('index/index');
  132. return;
  133. }
  134. if (option && option.name) {
  135. uni.setNavigationBarTitle({
  136. title:option.name
  137. });
  138. }
  139. //this.Dever.login = 'user/login?code=' + option.code;
  140. //this.Dever.checkLogin();
  141. this.Dever.bgm = false;
  142. this.login = this.Dever.getToken();
  143. this.Dever.config.name = option.name;
  144. this.Dever.config.code = option.code;
  145. this.getData();
  146. },
  147. // 重新加载
  148. onPullDownRefresh: function() {
  149. if (this.drawer.show && this.drawer.item[this.drawer.show].show == true) {
  150. this.$refs[this.drawer.show][0].getData();
  151. } else {
  152. this.getData();
  153. }
  154. },
  155. onShow : function() {
  156. this.controlHandle();
  157. },
  158. methods:{
  159. // 播放背景音乐
  160. bgmControl : function() {
  161. if (this.Dever.bgm_playing) {
  162. this.bgmStop();
  163. } else {
  164. this.bgmStart();
  165. }
  166. },
  167. bgmStart : function() {
  168. if (this.Dever.bgm) {
  169. if (this.control) {
  170. var i = 0;
  171. for (i in this.control) {
  172. if (this.control[i].load) {
  173. this.control[i].stop();
  174. }
  175. }
  176. }
  177. this.Dever.bgm.play();
  178. this.Dever.bgm_playing = true;
  179. }
  180. },
  181. bgmStop : function() {
  182. if (this.Dever.bgm) {
  183. this.Dever.bgm.pause();
  184. this.Dever.bgm_playing = false;
  185. }
  186. },
  187. // 初始化背景音乐
  188. bgmInit : function() {
  189. if (this.fetch.page_info.bgmusic) {
  190. if (this.Dever.source == 'h5') {
  191. this.Dever.bgm = uni.createInnerAudioContext()
  192. this.Dever.bgm.src = this.fetch.page_info.bgmusic;
  193. this.Dever.bgm.obeyMuteSwitch = false;
  194. this.Dever.bgm.loop = true;
  195. } else {
  196. this.Dever.bgm = uni.getBackgroundAudioManager()
  197. this.Dever.bgm.title = this.fetch.page_info.name;
  198. this.Dever.bgm.singer = this.fetch.info.name;
  199. this.Dever.bgm.coverImgUrl = this.fetch.page_info.pic;
  200. this.Dever.bgm.src = this.fetch.page_info.bgmusic;
  201. this.Dever.bgm.loop = true;
  202. }
  203. if (this.fetch.page_info.bgmusic_autoplay == 1) {
  204. this.bgmStart();
  205. } else {
  206. this.bgmStop();
  207. }
  208. }
  209. },
  210. // 页面触底刷新
  211. bottomCall: function() {
  212. if (this.bottom && this.bottom[this.swiper.index]) {
  213. this.bottom[this.swiper.index].getData(2);
  214. }
  215. },
  216. // drawer触底刷新
  217. bottomFunc : function() {
  218. if (this.drawer.show && this.drawer.item[this.drawer.show].show == true) {
  219. this.$refs[this.drawer.show][0].getInfo(2);
  220. }
  221. },
  222. record : function() {
  223. if (!this.login) {
  224. return;
  225. }
  226. var self = this;
  227. var content_id = this.fetch.items[this.swiper.index].id;
  228. this.Dever.post('app/user/?l=api.record', {noloading:1, code:this.Dever.config.code, index: this.swiper.index, content_id: content_id}, function(t) {
  229. self.Dever.config.code = t.code;
  230. if (self.Dever.source == 'h5') {
  231. }
  232. });
  233. },
  234. controlHandle : function() {
  235. if (this.control) {
  236. var i = 0;
  237. for (i in this.control) {
  238. if (this.control[i].load) {
  239. //console.info(i);
  240. if (this.swiper.index == i) {
  241. //console.info('start');
  242. this.control[i].start();
  243. } else {
  244. this.control[i].stop();
  245. }
  246. }
  247. }
  248. }
  249. },
  250. change : function(e) {
  251. this.fetch.index = this.swiper.index = parseInt(e.detail.current);
  252. //用户记录
  253. this.record();
  254. this.controlHandle();
  255. if (this.swiper.index >= this.fetch.total) {
  256. }
  257. },
  258. view : function() {
  259. this.Dever.location('dream/view?id=1');
  260. },
  261. initDrawer : function() {
  262. //this.getContentId();
  263. var i = '';
  264. this.drawer.button = [];
  265. for (i in this.drawer.item) {
  266. this.drawer.item[i].button.key = i;
  267. this.drawer.item[i].param.type = 3;
  268. this.drawer.item[i].param.type_id = this.content_id;
  269. this.drawer.button.push(this.drawer.item[i].button);
  270. }
  271. },
  272. getData : function() {
  273. var self = this;
  274. self.drawer.item = {};
  275. this.Dever.get(this, 'app/collection/?l=api.getContent', {code:this.Dever.config.code}, function(t) {
  276. self.show = t.show;
  277. self.bgmInit();
  278. uni.setNavigationBarTitle({
  279. title:t.info.name
  280. });
  281. self.swiper.index = t.index ? parseInt(t.index) : 0;
  282. self.record();
  283. if (t && t['func']) {
  284. self.drawer.item = t['func'];
  285. self.initDrawer();
  286. if (t['func']['cate']) {
  287. self.getCate();
  288. }
  289. if (t['func']['times']) {
  290. self.getTimes();
  291. }
  292. }
  293. });
  294. },
  295. getCate : function() {
  296. console.info(1);
  297. if (!this.login) {
  298. return;
  299. }
  300. var self = this;
  301. this.Dever.get(this, 'app/collection/?l=api.getCategory', {code:this.Dever.config.code,noloading:1}, function(t) {
  302. self.drawer.item['cate'].param = t;
  303. });
  304. },
  305. getTimes : function() {
  306. if (!this.login) {
  307. return;
  308. }
  309. var self = this;
  310. this.Dever.get(this, 'app/collection/?l=api.getTimes', {code:this.Dever.config.code,noloading:1}, function(t) {
  311. if (t && t.times && t.times.length > 0) {
  312. self.drawer.item['times'].param = t;
  313. } else {
  314. delete self.drawer.item['times'];
  315. self.initDrawer();
  316. }
  317. });
  318. },
  319. goIndex : function(index) {
  320. this.fetch.index = index;
  321. if (this.drawer.show) {
  322. this.closeDrawer(this.drawer.show);
  323. }
  324. },
  325. showDrawer : function(key) {
  326. this.getContentId();
  327. this.drawer.item[key].show = !this.drawer.item[key].show;
  328. if (this.drawer.show) {
  329. this.drawer.show = '';
  330. } else {
  331. this.drawer.show = key;
  332. }
  333. },
  334. closeDrawer : function(key) {
  335. if (!key && this.drawer.show) {
  336. key = this.drawer.show;
  337. }
  338. if (!key) {
  339. return;
  340. }
  341. this.drawer.item[key].show = false;
  342. this.drawer.show = '';
  343. },
  344. getContentId : function() {
  345. this.content_id = this.fetch.items[this.swiper.index].id;
  346. this.type = this.fetch.items[this.swiper.index].type;
  347. },
  348. clickDrawerButton : function(e) {
  349. this.showDrawer(this.drawer.button[e.index].key);
  350. },
  351. goHome : function() {
  352. this.Dever.location('dream/index?id='+this.fetch.info_id);
  353. }
  354. },
  355. components:{
  356. dream,cate,community,times,shop,my,share,deverDrawerPage,deverDrawerWindow
  357. }
  358. }
  359. </script>
  360. <style>
  361. .container {
  362. position: absolute;
  363. height: 100%;
  364. width: 100%;
  365. left: 0;
  366. top: 0;
  367. -webkit-overflow-scrolling: touch;
  368. overflow: hidden;
  369. }
  370. .container_main {
  371. width: 750rpx;
  372. height: 100%;
  373. }
  374. .swiper {
  375. width: 750rpx;
  376. height: 100%;
  377. }
  378. swiper-item>view{
  379. height: 100%;
  380. }
  381. swiper-item image{
  382. width: 750rpx;
  383. height: 100%;
  384. }
  385. .scroll-height {
  386. height:100%;
  387. }
  388. .bgm{
  389. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJBQTMwRUZGNTcwMTFFODk1QzlBNDg3MzAwOTNBRTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUJBQTMwRjBGNTcwMTFFODk1QzlBNDg3MzAwOTNBRTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkFBMzBFREY1NzAxMUU4OTVDOUE0ODczMDA5M0FFMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkFBMzBFRUY1NzAxMUU4OTVDOUE0ODczMDA5M0FFMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Prb3w+IAAArqSURBVHja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) no-repeat;
  390. width: 80rpx;
  391. height: 80rpx;
  392. position: fixed;
  393. background-size: 80rpx 80rpx;
  394. left: 30rpx;
  395. bottom: 30rpx;
  396. }
  397. .bgm-paused{
  398. background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQwIDc5LjE2MDQ1MSwgMjAxNy8wNS8wNi0wMTowODoyMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTggKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6QUJBQTMwRjNGNTcwMTFFODk1QzlBNDg3MzAwOTNBRTEiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6QUJBQTMwRjRGNTcwMTFFODk1QzlBNDg3MzAwOTNBRTEiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQkFBMzBGMUY1NzAxMUU4OTVDOUE0ODczMDA5M0FFMSIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQkFBMzBGMkY1NzAxMUU4OTVDOUE0ODczMDA5M0FFMSIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pj3u49UAAAtDSURBVHja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) no-repeat;
  399. background-size: 80rpx 80rpx;
  400. }
  401. </style>