BJ_ZTEITS-Developers / parking-cloud-yudao

Commit 082c686739c4bd2d1b6840919d536004b3299b35

Authored by sfmind
1 parent 7c6e0b09

分类页面：多级分类布局

Inline Side-by-side
Showing 1 changed file with 100 additions and 134 deletions
yudao-ui-app/pages/category/category.vue
  View file @082c686
... ... @@ -17,25 +17,19 @@
17 17 <view class="category-image">
18 18 <u--image :showLoading="true" :src="categoryList[currentIndex].image" width="530rpx" height="160rpx" @click="click"></u--image>
19 19 </view>
20   - <view>
21   - <u-list class="prod-list" @scrolltolower="scrolltolower">
22   - <u-list-item v-for="(item, index) in productList" :key="item.id">
23   - <view class="prod-item" @click="handleProdItemClick(item.id)">
24   - <u--image class="prod-image" width="140rpx" height="140rpx" :src="item.image"></u--image>
25   - <view class="item-info">
26   - <view class="info-text">
27   - <u--text :lines="1" size="14px" color="#333333" :text="item.title"></u--text>
28   - <u-gap height="2px"></u-gap>
29   - <u--text :lines="1" size="12px" color="#939393" :text="item.desc"></u--text>
30   - </view>
31   - <view class="price-and-cart">
32   - <custom-text-price color="red" size="12" intSize="18" :price="item.price"></custom-text-price>
33   - <u-icon name="shopping-cart" color="#2979ff" size="28"></u-icon>
34   - </view>
35   - </view>
  20 + <view class="sub-category-box" v-for="(item, index) in categoryList[currentIndex].children" :key="item.id">
  21 + <view class="sub-category-header">
  22 + <view class="title">{{ item.title }}</view>
  23 + <view class="more">查看更多</view>
  24 + </view>
  25 + <u-grid class="sub-category-grid" col="3">
  26 + <u-grid-item v-for="(subItem, index) in item.category" :key="subItem.id">
  27 + <view class="sub-category-item">
  28 + <u-icon name="photo" :size="80"></u-icon>
  29 + <text class="sub-category-title">{{ subItem.title }}</text>
36 30 </view>
37   - </u-list-item>
38   - </u-list>
  31 + </u-grid-item>
  32 + </u-grid>
39 33 </view>
40 34 </view>
41 35 </view>
... ... @@ -43,119 +37,85 @@
43 37 </template>
44 38  
45 39 <script>
46   -import UText from '../../uni_modules/uview-ui/components/u-text/u-text'
47 40 export default {
48   - components: { UText },
49 41 data() {
50 42 return {
51 43 currentIndex: 0,
52   - categoryList: [
53   - {
54   - id: 1,
55   - image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
56   - name: '关注'
57   - },
58   - {
59   - id: 2,
60   - image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
61   - name: '推荐'
62   - },
63   - {
64   - id: 3,
65   - image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
66   - name: '电影'
67   - },
68   - {
69   - id: 4,
70   - image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
71   - name: '科技'
72   - },
73   - {
74   - id: 5,
75   - image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
76   - name: '音乐'
77   - },
78   - {
79   - id: 6,
80   - image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
81   - name: '美食'
82   - },
83   - {
84   - id: 7,
85   - image: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
86   - name: '文化'
87   - },
88   - {
89   - id: 8,
90   - image: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
91   - name: '财经'
92   - },
93   - {
94   - id: 9,
95   - image: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
96   - name: '手工'
97   - }
98   - ],
99   - productList: [
100   - {
101   - id: 0,
102   - image: 'https://cdn.uviewui.com/uview/album/1.jpg',
103   - title: '山不在高，有仙则名。水不在深，有龙则灵。斯是陋室，惟吾德馨。',
104   - desc: '山不在于高，有了神仙就会有名气。水不在于深，有了龙就会有灵气。这是简陋的房子，只是我品德好就感觉不到简陋了。',
105   - price: '13.00'
106   - },
107   - {
108   - id: 2,
109   - image: 'https://cdn.uviewui.com/uview/album/2.jpg',
110   - title: '商品222',
111   - desc: '',
112   - price: '23.00'
113   - },
114   - {
115   - id: 3,
116   - image: 'https://cdn.uviewui.com/uview/album/3.jpg',
117   - title: '商品333',
118   - desc: '商品描述信息2',
119   - price: '33.00'
120   - },
121   - {
122   - id: 4,
123   - image: 'https://cdn.uviewui.com/uview/album/4.jpg',
124   - title: '商品444',
125   - desc: '商品描述信息4',
126   - price: '43.00'
127   - },
128   - {
129   - id: 5,
130   - image: 'https://cdn.uviewui.com/uview/album/5.jpg',
131   - title: '商品555',
132   - desc: '商品描述信息5',
133   - price: '53.00'
134   - }
135   - ]
  44 + categoryList: []
  45 + }
  46 + },
  47 + onLoad() {
  48 + for (let i = 0; i < 10; i++) {
  49 + this.categoryList.push({
  50 + id: i,
  51 + image: '',
  52 + name: '商品分类' + i,
  53 + children: [
  54 + {
  55 + id: 0,
  56 + title: '分类' + i + '-1',
  57 + category: [
  58 + {
  59 + id: 0,
  60 + image: '',
  61 + title: '分类' + i + '-1-1'
  62 + },
  63 + {
  64 + id: 2,
  65 + image: '',
  66 + title: '分类' + i + '-1-2'
  67 + },
  68 + {
  69 + id: 3,
  70 + image: '',
  71 + title: '分类' + i + '-1-3'
  72 + }
  73 + ]
  74 + },
  75 + {
  76 + id: 1,
  77 + title: '分类' + i + '-2',
  78 + category: [
  79 + {
  80 + id: 0,
  81 + image: '',
  82 + title: '分类' + i + '-2-1'
  83 + },
  84 + {
  85 + id: 2,
  86 + image: '',
  87 + title: '分类' + i + '-2-2'
  88 + },
  89 + {
  90 + id: 3,
  91 + image: '',
  92 + title: '分类' + i + '-2-3'
  93 + }
  94 + ]
  95 + }
  96 + ]
  97 + })
136 98 }
137 99 },
138   - onLoad() {},
139 100 methods: {
140 101 handleSearchClick(e) {
141   - console.log('监听点击准备跳转页面')
  102 + uni.$u.route('/pages/search/search')
142 103 },
143 104 handleCategoryClick(index) {
144 105 if (this.currentIndex !== index) {
145 106 this.currentIndex = index
146   - // TODO 查询下分类商品
147 107 }
148   - },
149   - handleProdItemClick(productId) {
150   - uni.$u.route('/pages/product/product', {
151   - productId: productId
152   - })
153 108 }
154 109 }
155 110 }
156 111 </script>
157 112  
158 113 <style lang="scss" scoped>
  114 +.container {
  115 + height: calc(100vh - 50px);
  116 + overflow: hidden;
  117 +}
  118 +
159 119 .search-wrap {
160 120 background: $custom-bg-color;
161 121 padding: 20rpx;
... ... @@ -181,37 +141,43 @@ export default {
181 141 }
182 142 }
183 143 .box-right {
184   - width: 550rpx;
185   - padding-right: 20rpx;
  144 + width: 570rpx;
186 145 .category-image {
187 146 padding: 20rpx;
188 147 }
189 148  
190   - .prod-list {
191   - height: auto !important;
192   -
193   - .prod-item {
194   - padding: 10rpx 20rpx;
195   - background: #fff;
  149 + .sub-category-box {
  150 + .sub-category-header {
196 151 @include flex-space-between;
197   - border-bottom: $custom-border-style;
  152 + padding: 20rpx;
198 153  
199   - .prod-image {
200   - border-radius: 10rpx;
201   - /deep/ * {
202   - border-radius: 10rpx;
203   - }
  154 + .title {
  155 + font-size: 28rpx;
  156 + font-weight: 700;
  157 + }
  158 + .more {
  159 + font-size: 22rpx;
  160 + color: #939393;
204 161 }
  162 + }
  163 +
  164 + .sub-category-grid {
  165 + padding: 0 15rpx;
  166 +
  167 + .sub-category-item {
  168 + @include flex-center(column);
  169 + background: #fff;
205 170  
206   - .item-info {
207   - width: 350rpx;
208   - padding: 5rpx;
209   - .info-text {
210   - height: 70rpx;
211   - padding-bottom: 10rpx;
  171 + .sub-category-image {
  172 + border-radius: 10rpx;
  173 + /deep/ * {
  174 + border-radius: 10rpx;
  175 + }
212 176 }
213   - .price-and-cart {
214   - @include flex-space-between;
  177 +
  178 + .sub-category-title {
  179 + margin: 15rpx 0;
  180 + font-size: 24rpx;
215 181 }
216 182 }
217 183 }
... ...