category.html 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <!DOCTYPE html>
  2. <html lang="en" xmlns="" xmlns="">
  3. <head>
  4. <meta charset="UTF-8">
  5. <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
  6. <title>Title</title>
  7. <!-- <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">-->
  8. <link rel="stylesheet" href="https://unpkg.com/vant@2.12/lib/index.css"/>
  9. <script src="https://unpkg.com/vue@2.6/dist/vue.min.js"></script>
  10. <script src="https://unpkg.com/vant@2.12/lib/vant.min.js"></script>
  11. <!-- <script src="js/element-ui.js"></script>-->
  12. <style>
  13. html, body {
  14. margin: 0 5px;
  15. height: 118px;
  16. overflow: scroll;
  17. }
  18. .tab {
  19. margin: 4px 6px;
  20. }
  21. .van-tabs__content {
  22. margin-top: 10px;
  23. }
  24. /*.el-tab-pane {
  25. height: 56px;
  26. overflow-y: auto;
  27. }*/
  28. .van-tab__pane {
  29. height: 64px;
  30. overflow-y: auto;
  31. }
  32. </style>
  33. </head>
  34. <body>
  35. <div id="app">
  36. <!--<el-tabs type="border-card" v-model="currentTab" @tab-click="tabClick">
  37. <el-tab-pane v-for="(item, index) in category" :key="index" :label="item.name" :name="index">
  38. <el-tag class="tab" v-for="(tab, key) in item.list" :key="key" size="mini" :type="tab.choose ? `danger` : ''" @click="chooseTab(index, key, tab.choose)">{{tab.name}}</el-tag>
  39. </el-tab-pane>
  40. </el-tabs>-->
  41. <van-tabs class="tab-box" v-model="currentTab" @click="tabClick">
  42. <van-tab v-for="(item, index) in category" :key="index" :title="`${item.name}:${chooseLabel[index]}`">
  43. <van-tag class="tab" v-for="(tab, key) in item.list" :key="key" type="danger" size="large" :plain="! tab.choose" @click="chooseTab(index, key, tab.choose)" >{{tab.name}}</van-tag>
  44. </van-tab>
  45. </van-tabs>
  46. </div>
  47. <script>
  48. // eval(fy_bridge_app.getInternalJs())
  49. new Vue({
  50. el: '#app',
  51. data() {
  52. return {
  53. category: [],
  54. choose: [],
  55. chooseLabel: [],
  56. baseUrl: '',
  57. currentTab: 0,
  58. }
  59. },
  60. mounted() {
  61. this.getData()
  62. this.initData()
  63. },
  64. methods: {
  65. getQueryVariable(variable) {
  66. let query = window.location.search.substring(1)
  67. let vars = query.split("&");
  68. for (let i=0;i<vars.length;i++) {
  69. let pair = vars[i].split("=");
  70. if(pair[0] === variable) return pair[1]
  71. }
  72. return false
  73. },
  74. getData() {
  75. this.category = JSON.parse(fy_bridge_app.getVar('tab-panel'))
  76. this.baseUrl = fy_bridge_app.getVar('tab-base_url')
  77. this.currentTab = parseInt(fy_bridge_app.getVar('tab-current')) || 0
  78. let choose = this.getQueryVariable('filters')
  79. if (choose) this.choose = choose.split(',').map(_ => parseInt(_))
  80. },
  81. initData() {
  82. this.category.forEach((cate, index) => {
  83. cate.list.forEach((item, key) => {
  84. if (this.choose.length > 0) {
  85. if (this.choose.indexOf(parseInt(item.id)) > -1) {
  86. this.chooseLabel[index] = item.name
  87. item.choose = true
  88. } else {
  89. item.choose = false
  90. }
  91. } else {
  92. this.chooseLabel[index] = cate.list[0].name
  93. item.choose = key === 0
  94. }
  95. })
  96. })
  97. this.$forceUpdate()
  98. },
  99. tabClick(e) {
  100. // fy_bridge_app.putVar('tab-current', e.name)
  101. fy_bridge_app.putVar('tab-current', e)
  102. },
  103. chooseTab(index, key, status) {
  104. // if (! status) {
  105. this.choose = []
  106. this.category[index].list.forEach((item, current_index) => {
  107. item.choose = current_index === key
  108. })
  109. this.category.forEach((cate, index) => {
  110. cate.list.forEach((item, key) => {
  111. if (item.choose) {
  112. this.chooseLabel[index] = item.name
  113. this.choose.push(parseInt(item.id))
  114. }
  115. })
  116. })
  117. this.$forceUpdate()
  118. fy_bridge_app.putVar('tab-url', 'https://www.acfun.cn/bangumilist?filters='+this.choose.join(','))
  119. fy_bridge_app.refreshPage(true)
  120. // }
  121. },
  122. }
  123. })
  124. </script>
  125. </body>
  126. </html>