小说小程序前端代码仓库(小程序)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

240 lines
5.0 KiB

3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
  1. <template>
  2. <view class="page">
  3. <!-- 导航栏 -->
  4. <navbar title="书城"
  5. leftClick
  6. @leftClick="$utils.navigateBack"
  7. />
  8. <!-- 分类商品列表 -->
  9. <view class="category"
  10. >
  11. <view class="tabs">
  12. <uv-tabs
  13. :list="category"
  14. :activeStyle="{color : '#0A2463', fontWeight : 600}"
  15. lineColor="#0A2463"
  16. :inactiveStyle="{color: 'rgba(0,0,0,.8)'}"
  17. lineHeight="8rpx"
  18. lineWidth="50rpx"
  19. :current="current"
  20. keyName="title"
  21. @click="clickTabs"></uv-tabs>
  22. </view>
  23. <uv-vtabs
  24. :list="categoryList"
  25. :current="currentChildren"
  26. keyName="title"
  27. :chain="false"
  28. :barItemActiveLineStyle="{background : '#0A2463'}"
  29. :barItemActiveStyle="{color : '#0A2463', fontWeight : 600}"
  30. @change="change">
  31. <uv-vtabs-item>
  32. <view class="category-item">
  33. <view class="novel-list" v-if="list.length > 0">
  34. <novelItem
  35. v-for="(book, index) in list"
  36. :key="index"
  37. :book="book">
  38. </novelItem>
  39. </view>
  40. <uv-empty v-if="list.length == 0" text="还没有呢"/>
  41. </view>
  42. </uv-vtabs-item>
  43. </uv-vtabs>
  44. </view>
  45. <!-- tabbar -->
  46. <tabber select="category" />
  47. </view>
  48. </template>
  49. <script>
  50. import {
  51. mapState
  52. } from 'vuex'
  53. import tabber from '@/components/base/tabbar.vue'
  54. import novelItem from '@/components/novel/novelItem.vue'
  55. import mixinsList from '@/mixins/list.js'
  56. export default {
  57. mixins: [mixinsList],
  58. components: {
  59. tabber,
  60. novelItem
  61. },
  62. data() {
  63. return {
  64. mixinsListApi: 'getRecommendList',
  65. current : 0,
  66. currentChildren : 0,
  67. categoryList: [],
  68. category: [],
  69. }
  70. },
  71. computed: {
  72. },
  73. onLoad({
  74. search,
  75. cid
  76. }) {
  77. if (search) {
  78. this.queryParams.title = search
  79. }
  80. // 初始化默认分类的书籍列表
  81. if (this.category.length > 0) {
  82. if (cid) {
  83. // 如果有指定分类ID,则显示对应分类
  84. let foundCategory = false
  85. this.category.forEach((n, i) => {
  86. if (n.id == cid) {
  87. this.current = i
  88. foundCategory = true
  89. }
  90. })
  91. if (foundCategory) {
  92. this.updateBookList(this.category[this.current].children[0].id)
  93. } else {
  94. // 如果未找到指定分类,显示第一个分类
  95. this.updateBookList(this.category[0].children[0].id)
  96. }
  97. } else {
  98. // 没有指定分类ID,显示第一个分类
  99. this.updateBookList(this.category[0].children[0].id)
  100. }
  101. }
  102. // this.$store.commit('getCategoryList')
  103. // if(this.category.length > 0 && cid){
  104. // this.category.forEach((n, i) => {
  105. // if(n.id == cid){
  106. // this.current = i
  107. // }
  108. // })
  109. // // this.queryParams.classId = cid
  110. // }else if (this.category.length > 0) {
  111. // // this.queryParams.classId = this.category[0].id
  112. // }
  113. },
  114. onShow() {
  115. this.getCategoryList()
  116. this.getBookAreaList()
  117. },
  118. methods: {
  119. change(e) {
  120. // this.queryParams.classId = this.category[e].id
  121. this.currentChildren = e
  122. // 更新对应分类的书籍列表
  123. this.getData(this.category[this.current].children[e].id)
  124. },
  125. clickTabs({index}){
  126. this.current = index
  127. this.currentChildren = 0
  128. // 更新对应分类的书籍列表
  129. this.getData(this.category[index].children[0].id)
  130. },
  131. search(){
  132. this.getData()
  133. },
  134. async getCategoryList() {
  135. const data = await this.$fetch('getCategoryList')
  136. this.category = data
  137. },
  138. async getBookAreaList() {
  139. const data = await this.$fetch('getBookAreaList')
  140. this.categoryList = data
  141. },
  142. }
  143. }
  144. </script>
  145. <style scoped lang="scss">
  146. .page {
  147. /deep/ .uv-vtabs {
  148. height: calc(100vh - 600rpx) !important;
  149. }
  150. /deep/ .uv-vtabs__bar {
  151. height: calc(100vh - 600rpx) !important;
  152. }
  153. /deep/ .uv-vtabs__content {
  154. height: calc(100vh - 600rpx) !important;
  155. }
  156. .search {
  157. position: relative;
  158. background: #FFFFFF;
  159. margin: 20rpx;
  160. border-radius: 41rpx;
  161. padding: 10rpx 20rpx;
  162. display: flex;
  163. align-items: center;
  164. /deep/ .uv-search__action {
  165. background-color: $uni-color;
  166. color: #FFFFFF;
  167. padding: 10rpx 20rpx;
  168. border-radius: 30rpx;
  169. }
  170. }
  171. &::v-deep .uv-vtabs__content {
  172. background: transparent !important;
  173. overflow: hidden;
  174. }
  175. }
  176. .category {
  177. font-size: 30rpx;
  178. color: #333;
  179. .category-title{
  180. position: relative;
  181. display: flex;
  182. justify-content: center;
  183. align-items: center;
  184. height: 120rpx;
  185. &::before,
  186. &::after {
  187. position: absolute;
  188. top: 50%;
  189. content: '';
  190. width: 10%;
  191. border-top: 2rpx solid black;
  192. }
  193. &::before {
  194. left: 25%;
  195. }
  196. &::after {
  197. right: 25%;
  198. }
  199. }
  200. &::v-deep .uv-vtabs {
  201. width: 750rpx;
  202. overflow: hidden;
  203. }
  204. .list {
  205. width: 100%;
  206. padding: 0rpx 20rpx;
  207. box-sizing: border-box;
  208. }
  209. .category-item {
  210. padding: 0 20rpx;
  211. .novel-list {
  212. width: 100%;
  213. display: flex;
  214. flex-direction: column;
  215. gap: 10rpx;
  216. }
  217. }
  218. }
  219. </style>