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

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