珠宝小程序前端代码
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.

139 lines
2.7 KiB

5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
5 months ago
  1. <template>
  2. <view class="page">
  3. <!-- 导航栏 -->
  4. <navbar title="商品列表"
  5. leftClick
  6. @leftClick="$utils.navigateBack"
  7. bgColor="#E3441A"
  8. color="#fff" />
  9. <!-- 搜索栏 -->
  10. <view class="search">
  11. <uv-search placeholder="搜你喜欢的产品" bgColor="#fff" @search="getData" @custom="getData"
  12. v-model="queryParams.title"></uv-search>
  13. </view>
  14. <!-- 分类商品列表 -->
  15. <view class="category">
  16. <uv-vtabs :list="category"
  17. :current="current"
  18. keyName="title" @change="change">
  19. <view class="list">
  20. <uv-vtabs-item>
  21. <productItem v-for="(item, index) in list" :key="index" :item="item"
  22. @click="$utils.navigateTo(`/pages_order/product/productDetail?id=${item.id}`)" />
  23. <uv-empty mode="list" v-if="list.length == 0"></uv-empty>
  24. </uv-vtabs-item>
  25. </view>
  26. </uv-vtabs>
  27. </view>
  28. <!-- tabbar -->
  29. <tabber select="category" />
  30. </view>
  31. </template>
  32. <script>
  33. import productItem from '@/components/product/productItem.vue';
  34. import mixinsList from '@/mixins/list.js'
  35. import {
  36. mapState
  37. } from 'vuex'
  38. import tabber from '@/components/base/tabbar.vue'
  39. export default {
  40. mixins: [mixinsList],
  41. components: {
  42. productItem,
  43. tabber,
  44. },
  45. data() {
  46. return {
  47. mixinsListApi: 'getClassShopPageList',
  48. current : 0,
  49. }
  50. },
  51. computed: {
  52. ...mapState(['category'])
  53. },
  54. onLoad({
  55. search,
  56. cid
  57. }) {
  58. if (search) {
  59. this.queryParams.title = search
  60. }
  61. this.$store.commit('getCategoryList')
  62. if(this.category.length > 0 && cid){
  63. this.category.forEach((n, i) => {
  64. if(n.id == cid){
  65. this.current = i
  66. }
  67. })
  68. this.queryParams.classId = cid
  69. }else if (this.category.length > 0) {
  70. this.queryParams.classId = this.category[0].id
  71. }
  72. },
  73. methods: {
  74. change(e) {
  75. this.queryParams.classId = this.category[e].id
  76. this.getData()
  77. },
  78. }
  79. }
  80. </script>
  81. <style scoped lang="scss">
  82. .page {
  83. /deep/ .uv-vtabs {
  84. height: calc(100vh - 470rpx) !important;
  85. }
  86. /deep/ .uv-vtabs__bar {
  87. height: calc(100vh - 470rpx) !important;
  88. }
  89. /deep/ .uv-vtabs__content {
  90. height: calc(100vh - 470rpx) !important;
  91. }
  92. .search {
  93. position: relative;
  94. background: #FFFFFF;
  95. margin: 20rpx;
  96. border-radius: 41rpx;
  97. padding: 10rpx 20rpx;
  98. display: flex;
  99. align-items: center;
  100. /deep/ .uv-search__action {
  101. background-color: $uni-color;
  102. color: #FFFFFF;
  103. padding: 10rpx 20rpx;
  104. border-radius: 30rpx;
  105. }
  106. }
  107. &::v-deep .uv-vtabs__content {
  108. background: transparent !important;
  109. overflow: hidden;
  110. }
  111. }
  112. .category {
  113. font-size: 30rpx;
  114. color: #333;
  115. &::v-deep .uv-vtabs {
  116. width: 750rpx;
  117. overflow: hidden;
  118. }
  119. .list {
  120. width: 100%;
  121. padding: 0rpx 20rpx;
  122. box-sizing: border-box;
  123. }
  124. }
  125. </style>