普兆健康管家前端代码仓库
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.

158 lines
3.7 KiB

  1. <template>
  2. <view>
  3. <view class="tabs">
  4. <uv-tabs
  5. :list="tabs"
  6. :activeStyle="{
  7. 'font-family': 'PingFang SC',
  8. 'font-weight': 600,
  9. 'font-size': '28rpx',
  10. 'line-height': 1.5,
  11. 'color': '#FFFFFF',
  12. 'background-color': '#252545',
  13. 'border-radius': '32rpx',
  14. 'padding': '9rpx 40rpx',
  15. }"
  16. :inactiveStyle="{
  17. 'font-family': 'PingFang SC',
  18. 'font-weight': 400,
  19. 'font-size': '28rpx',
  20. 'line-height': 1.5,
  21. 'color': '#252545',
  22. 'background-color': '#E5E4EB',
  23. 'border-radius': '32rpx',
  24. 'padding': '9rpx 40rpx',
  25. }"
  26. lineWidth="0"
  27. lineHeight="0"
  28. @change="onLevel1TabChange"
  29. ></uv-tabs>
  30. <view v-if="tabs[level1] && tabs[level1].children && tabs[level1].children.length"
  31. class="tabs-second"
  32. >
  33. <uv-tabs
  34. :list="tabs[level1].children"
  35. :activeStyle="{
  36. 'font-family': 'PingFang SC',
  37. 'font-weight': 600,
  38. 'font-size': '28rpx',
  39. 'line-height': 1.5,
  40. 'color': '#7451DE',
  41. }"
  42. :inactiveStyle="{
  43. 'font-family': 'PingFang SC',
  44. 'font-weight': 400,
  45. 'font-size': '28rpx',
  46. 'line-height': 1.5,
  47. 'color': '#252545',
  48. }"
  49. lineWidth="0"
  50. lineHeight="0"
  51. @change="onLevel2TabChange"
  52. ></uv-tabs>
  53. </view>
  54. </view>
  55. <view class="content">
  56. <view v-for="item in list" :key="item.id">
  57. <productCard
  58. :data="item"
  59. cardStyle="width: 100%; height: 210px;"
  60. imgStyle="width: 100%; height: 110px;"
  61. ></productCard>
  62. </view>
  63. </view>
  64. </view>
  65. </template>
  66. <script>
  67. import productCard from '@/pages_order/product/productCard.vue'
  68. export default {
  69. components: {
  70. productCard,
  71. },
  72. data() {
  73. return {
  74. tabs: [],
  75. level1: 0,
  76. level2: null,
  77. list: [],
  78. }
  79. },
  80. mounted() {
  81. let children = [
  82. { name: '草本类' },
  83. { name: '蔬菜类' },
  84. { name: '维生素类' },
  85. { name: '草本类' },
  86. { name: '蔬菜类' },
  87. ]
  88. this.tabs = [
  89. { name: '全部' },
  90. { name: '皮肤', children, },
  91. { name: '身材管理', children, },
  92. { name: '精力', children, },
  93. ]
  94. this.list = [
  95. {
  96. id: '001',
  97. url: '/pages_order/static/index/recommend-pic.png',
  98. name: '月度装定制营养包',
  99. sales: 24770,
  100. price: 688.00,
  101. originalPrice: 1664,
  102. },
  103. {
  104. id: '002',
  105. url: '/pages_order/static/index/recommend-pic.png',
  106. name: '月度装定制营养包',
  107. sales: 24770,
  108. price: 688.00,
  109. originalPrice: 1664,
  110. },
  111. {
  112. id: '003',
  113. url: '/pages_order/static/index/recommend-pic.png',
  114. name: '月度装定制营养包',
  115. sales: 24770,
  116. price: 688.00,
  117. originalPrice: 1664,
  118. },
  119. ]
  120. },
  121. methods: {
  122. onLevel1TabChange(e) {
  123. console.log('level1', e.index)
  124. this.level1 = e.index
  125. this.level2 = this.tabs[this.level1].children?.length ? 0 : null
  126. // todo
  127. },
  128. onLevel2TabChange(e) {
  129. console.log('level2', e.index)
  130. this.level2 = e.index
  131. // todo
  132. },
  133. },
  134. }
  135. </script>
  136. <style scoped lang="scss">
  137. .tabs {
  138. margin: 0 5px;
  139. &-second {
  140. margin: 0 11px;
  141. padding-left: 9px;
  142. background: #E5E4EB;
  143. border-radius: 16rpx;
  144. }
  145. }
  146. .content {
  147. padding: 24rpx 32rpx;
  148. display: grid;
  149. grid-template-columns: repeat(2, 1fr);
  150. gap: 32rpx;
  151. }
  152. </style>