建材商城系统20241014
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.

218 lines
4.2 KiB

7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
  1. <template>
  2. <view class="page">
  3. <navbar bgColor="#DC2828"/>
  4. <view class="category">
  5. <view class="tabs">
  6. <uv-tabs
  7. :list="category"
  8. :activeStyle="{color : '#f00', fontWeight : 600}"
  9. lineColor="#f00"
  10. :inactiveStyle="{color: 'rgba(0,0,0,.8)'}"
  11. lineHeight="8rpx"
  12. lineWidth="50rpx"
  13. keyName="title"
  14. :current="current"
  15. @click="clickTabs"></uv-tabs>
  16. </view>
  17. <uv-vtabs
  18. :chain="chain"
  19. :list="category[current].children"
  20. keyName="title"
  21. :barItemBadgeStyle="{right:'20px',top:'12px'}"
  22. @change="change">
  23. <uv-vtabs-item>
  24. <!-- <view class="category-title">
  25. 租赁
  26. </view>
  27. <view class="list">
  28. <view class="item" v-for="(item,index) in list" :key="index"
  29. @click="$utils.navigateTo(`/pages_order/product/productDetail?id=${item.id}`)">
  30. <view class="item-image">
  31. <image
  32. :src="item.image"
  33. mode="aspectFill"></image>
  34. </view>
  35. <view class="item-unit">
  36. <text class="text">{{item.name}}</text>
  37. </view>
  38. </view>
  39. </view> -->
  40. <productItem
  41. :btn="false"
  42. @click="$utils.navigateTo(`/pages_order/product/productDetail?id=${item.id}`)"
  43. :item="item" v-for="(item, index) in list" :key="index"/>
  44. </uv-vtabs-item>
  45. </uv-vtabs>
  46. </view>
  47. <quick-order-entry
  48. ref="quickOrderEntry"
  49. />
  50. <kefu/>
  51. <tabber select="category" />
  52. </view>
  53. </template>
  54. <script>
  55. import tabber from '@/components/base/tabbar.vue'
  56. import productItem from '@/components/productItem.vue'
  57. import QuickOrderEntry from '@/components/QuickOrderEntry.vue'
  58. export default {
  59. components: {
  60. tabber,
  61. productItem,
  62. QuickOrderEntry,
  63. },
  64. data() {
  65. return {
  66. current : 0,
  67. currentChildren : 0,
  68. category: [],
  69. list: [],
  70. chain: false,
  71. value: 0,
  72. }
  73. },
  74. computed: {
  75. categoryList(){
  76. return this.category[this.current].children[this.currentChildren]
  77. },
  78. },
  79. onLoad() {
  80. this.getCategory()
  81. },
  82. onShow() {
  83. if(uni.getStorageSync('token')){
  84. // 刷新快捷下单信息
  85. this.refreshQuickOrder()
  86. }
  87. },
  88. methods: {
  89. clickTabs({index}){
  90. this.current = index
  91. this.currentChildren = 0
  92. },
  93. // 获取分类列表
  94. getCategory() {
  95. this.$api('getClassify', res => {
  96. if(res.code == 200) {
  97. this.category = res.result
  98. if(this.category.length > 0) {
  99. this.$nextTick(() => {
  100. this.getProductList(this.categoryList.id)
  101. })
  102. }
  103. }
  104. })
  105. },
  106. // 获取商品列表
  107. getProductList(shopIconId) {
  108. this.$api('getProductList', {
  109. shopClassId: shopIconId,
  110. pageNo: 1,
  111. pageSize: 99999
  112. }, res => {
  113. if(res.code == 200) {
  114. this.list = res.result.records
  115. }
  116. })
  117. },
  118. change(index) {
  119. console.log('选项改变:', index)
  120. this.currentChildren = index;
  121. if(this.category[index]) {
  122. this.$nextTick(() => {
  123. this.getProductList(this.categoryList.id)
  124. })
  125. }
  126. }
  127. }
  128. }
  129. </script>
  130. <style scoped lang="scss">
  131. .page{
  132. /deep/ .uv-vtabs{
  133. height: calc(100vh - 360rpx) !important;
  134. }
  135. /deep/ .uv-vtabs__bar{
  136. height: calc(100vh - 360rpx) !important;
  137. }
  138. /deep/ .uv-vtabs__content{
  139. height: calc(100vh - 360rpx) !important;
  140. }
  141. }
  142. .category {
  143. font-size: 30rpx;
  144. color: #333;
  145. .category-title{
  146. position: relative;
  147. display: flex;
  148. justify-content: center;
  149. align-items: center;
  150. height: 120rpx;
  151. &::before,
  152. &::after {
  153. position: absolute;
  154. top: 50%;
  155. content: '';
  156. width: 10%;
  157. border-top: 2rpx solid black;
  158. }
  159. &::before {
  160. left: 25%;
  161. }
  162. &::after {
  163. right: 25%;
  164. }
  165. }
  166. .list{
  167. display: flex;
  168. flex-wrap: wrap;
  169. margin: 0 auto;
  170. width: 490rpx;
  171. .item {
  172. padding: 10rpx 20rpx;
  173. display: flex;
  174. flex-direction: column;
  175. justify-content: center;
  176. align-items: center;
  177. margin-bottom: 20rpx;
  178. .item-image {
  179. width: 120rpx;
  180. height: 120rpx;
  181. image{
  182. height: 100%;
  183. width: 100%;
  184. border-radius: 50%;
  185. }
  186. }
  187. .item-unit {
  188. font-size: 24rpx;
  189. margin-top: 15rpx;
  190. color: #555;
  191. }
  192. }
  193. .gap {
  194. padding: 0 30rpx;
  195. }
  196. }
  197. }
  198. </style>