吉鹏 / gulu-vue

Download as
Browse Code »

Commit 5b12ec0b653979847e4af401470030c5ba5a5a50

Authored by BigBoss
1 parent 36e5592037
Exists in master

修改首页bug

Showing 1 changed file with 1 additions and 0 deletions   Show diff stats
src/pages/index/index.vue
Diff comments   View file @5b12ec0
1 <template> 1 <template>
2 <view class="container"> 2 <view class="container">
3 <view class="content skeleton" v-show="showContent"> 3 <view class="content skeleton" v-show="showContent">
4 <view class="header"> 4 <view class="header">
5 <!-- 搜索--> 5 <!-- 搜索-->
6 <view class="searchBar skeleton-rect"> 6 <view class="searchBar skeleton-rect">
7 <icon 7 <icon
8 class="searchIcon" 8 class="searchIcon"
9 type="search" 9 type="search"
10 size="14" 10 size="14"
11 ></icon> 11 ></icon>
12 <input 12 <input
13 v-model="searchText" 13 v-model="searchText"
14 class="searchIpt" 14 class="searchIpt"
15 placeholder="老花镜" 15 placeholder="老花镜"
16 confirm-type="search" 16 confirm-type="search"
17 @blur="searchKey" 17 @blur="searchKey"
18 /> 18 />
19 </view> 19 </view>
20 20
21 <!-- 筛选栏--> 21 <!-- 筛选栏-->
22 <!-- <view class="screenBar"> 22 <!-- <view class="screenBar">
23 <view 23 <view
24 v-for="item in screenItems" 24 v-for="item in screenItems"
25 :key="item.current" 25 :key="item.current"
26 @click="onClickItem(item.current)" 26 @click="onClickItem(item.current)"
27 > 27 >
28 <view 28 <view
29 class="screenItem" 29 class="screenItem"
30 v-bind:class="{ active: current === item.current }" 30 v-bind:class="{ active: current === item.current }"
31 v-if="item.current === 2" 31 v-if="item.current === 2"
32 @click="dropDown" 32 @click="dropDown"
33 > 33 >
34 {{ item.text }} 34 {{ item.text }}
35 <icon 35 <icon
36 type="info" 36 type="info"
37 size="14" 37 size="14"
38 ></icon> 38 ></icon>
39 </view> 39 </view>
40 <view 40 <view
41 class="screenItem" 41 class="screenItem"
42 v-bind:class="{ active: current === item.current }" 42 v-bind:class="{ active: current === item.current }"
43 v-if="item.current === 4" 43 v-if="item.current === 4"
44 @click="showDrawer('showRight')" 44 @click="showDrawer('showRight')"
45 > 45 >
46 {{ item.text }} 46 {{ item.text }}
47 <icon 47 <icon
48 type="info" 48 type="info"
49 size="14" 49 size="14"
50 ></icon> 50 ></icon>
51 </view> 51 </view>
52 <view v-if="item.current !== 2&&item.current!==4"> 52 <view v-if="item.current !== 2&&item.current!==4">
53 <view 53 <view
54 class="screenItem" 54 class="screenItem"
55 v-bind:class="{ active: current === item.current }" 55 v-bind:class="{ active: current === item.current }"
56 >{{ item.text }}</view> 56 >{{ item.text }}</view>
57 </view> 57 </view>
58 </view> 58 </view>
59 </view> --> 59 </view> -->
60 </view> 60 </view>
61 <Uni-drawer 61 <Uni-drawer
62 ref="showRight" 62 ref="showRight"
63 mask="true" 63 mask="true"
64 maskClick="true" 64 maskClick="true"
65 mode="right" 65 mode="right"
66 :width="320" 66 :width="320"
67 @change="change($event,'showRight')" 67 @change="change($event,'showRight')"
68 > 68 >
69 <view class="close"> 69 <view class="close">
70 <view @click="closeDrawer('showRight')"> 70 <view @click="closeDrawer('showRight')">
71 <text class="word-btn-white">关闭</text> 71 <text class="word-btn-white">关闭</text>
72 </view> 72 </view>
73 </view> 73 </view>
74 </Uni-drawer> 74 </Uni-drawer>
75 75
76 <!-- 筛选菜单--> 76 <!-- 筛选菜单-->
77 <view class="content-wrap skeleton-rect"> 77 <view class="content-wrap skeleton-rect">
78 <view> 78 <view>
79 <HMfilterDropdown 79 <HMfilterDropdown
80 :filterData="categoryList" 80 :filterData="categoryList"
81 :defaultSelected="filterDropdownValue" 81 :defaultSelected="filterDropdownValue"
82 :updateMenuName="true" 82 :updateMenuName="true"
83 @search="search" 83 @search="search"
84 @getList="getList" 84 @getList="getList"
85 data-format="Object" 85 data-format="Object"
86 ></HMfilterDropdown> 86 ></HMfilterDropdown>
87 <!-- 商品列表 --> 87 <!-- 商品列表 -->
88 <!-- <scroll-view 88 <!-- <scroll-view
89 enable-flex 89 enable-flex
90 @scrolltolower="handleScrolltolower" 90 @scrolltolower="handleScrolltolower"
91 scroll-y 91 scroll-y
92 style="height: 1000px;margin-bottom: 20px;" 92 style="height: 1000px;margin-bottom: 20px;"
93 > --> 93 > -->
94 <view class="goods-list"> 94 <view class="goods-list">
95 <view class="product-list"> 95 <view class="product-list">
96 <view 96 <view
97 class="product skeleton-rect" 97 class="product skeleton-rect"
98 v-for="(goods) in goodsList" 98 v-for="(goods) in goodsList"
99 :key="goods.id" 99 :key="goods.id"
100 > 100 >
101 <Card 101 <Card
102 :goods="goods" 102 :goods="goods"
103 :scrollTop="scrollTop" 103 :scrollTop="scrollTop"
104 :viewHeight="viewHeight" 104 :viewHeight="viewHeight"
105 ></Card> 105 ></Card>
106 </view> 106 </view>
107 </view> 107 </view>
108 <view class="loading-text"> 108 <view class="loading-text">
109 <text v-if="isLoading==true">{{loadingText}}</text> 109 <text v-if="isLoading==true">{{loadingText}}</text>
110 <text v-else>{{loadedText}}</text> 110 <text v-else>{{loadedText}}</text>
111 </view> 111 </view>
112 </view> 112 </view>
113 <!-- </scroll-view> --> 113 <!-- </scroll-view> -->
114 </view> 114 </view>
115 </view> 115 </view>
116 </view> 116 </view>
117 <!--引用组件--> 117 <!--引用组件-->
118 <skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton> 118 <skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF"></skeleton>
119 </view> 119 </view>
120 </template> 120 </template>
121 121
122 <script> 122 <script>
123 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; 123 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
124 import Card from "@/components/CommodityCard/CommodityCard.vue"; 124 import Card from "@/components/CommodityCard/CommodityCard.vue";
125 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; 125 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
126 import skeleton from "@/components/quick-skeleton/quick-skeleton.vue"; 126 import skeleton from "@/components/quick-skeleton/quick-skeleton.vue";
127 import store from "@/store"; 127 import store from "@/store";
128 128
129 129
130 export default { 130 export default {
131 components: { 131 components: {
132 UniDrawer: UniDrawer, 132 UniDrawer: UniDrawer,
133 HMfilterDropdown: HMfilterDropdown, 133 HMfilterDropdown: HMfilterDropdown,
134 Card: Card, 134 Card: Card,
135 skeleton: skeleton 135 skeleton: skeleton
136 }, 136 },
137 data() { 137 data() {
138 return { 138 return {
139 indexArr: "", 139 indexArr: "",
140 valueArr: "", 140 valueArr: "",
141 isLoading: true, //初始化加载状态 141 isLoading: true, //初始化加载状态
142 loadingText: "data loading...", 142 loadingText: "data loading...",
143 loadedText: "~~暂无更多数据~~", 143 loadedText: "~~暂无更多数据~~",
144 filterDropdownValue: [], 144 filterDropdownValue: [],
145 filterData: [], 145 filterData: [],
146 searchText: "", 146 searchText: "",
147 scrollTop: 0, 147 scrollTop: 0,
148 showContent: true, 148 showContent: true,
149 viewHeight: uni.getSystemInfoSync().windowHeight, 149 viewHeight: uni.getSystemInfoSync().windowHeight,
150 showSkeleton: false //骨架屏显示隐藏 150 showSkeleton: false //骨架屏显示隐藏
151 }; 151 };
152 }, 152 },
153 onPageScroll({ scrollTop }) { 153 onPageScroll({ scrollTop }) {
154 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 154 // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
155 this.scrollTop = scrollTop; 155 this.scrollTop = scrollTop;
156 }, 156 },
157 computed: { 157 computed: {
158 goodsList() { 158 goodsList() {
159 // 也可以从 getters 获取 159 // 也可以从 getters 获取
160 // console.log('index-list=====>',this.$store.state.index.list) 160 // console.log('index-list=====>',this.$store.state.index.list)
161 let list = this.$store.state.index.list; 161 let list = this.$store.state.index.list;
162 if(list.length == 0){ 162 if(list.length == 0){
163 this.isLoading = false; 163 this.isLoading = false;
164 } 164 }
165 this.scrollTop = 0.1; 165 this.scrollTop = 0.1;
166 return list 166 return list
167 }, 167 },
168 categoryList() { 168 categoryList() {
169 return this.$store.state.index.categoryList; 169 return this.$store.state.index.categoryList;
170 } 170 }
171 }, 171 },
172 filters: { 172 filters: {
173 outData(value) { 173 outData(value) {
174 return JSON.stringify(value); 174 return JSON.stringify(value);
175 } 175 }
176 }, 176 },
177 /** 177 /**
178 * 页面载入完成后调用子组件的方法生成预加载效果 178 * 页面载入完成后调用子组件的方法生成预加载效果
179 */ 179 */
180 onReady:function(){ 180 onReady:function(){
181 this.getInitData() 181 this.getInitData()
182 }, 182 },
183 methods: { 183 methods: {
184 async getInitData (){ 184 async getInitData (){
185 this.showSkeleton = true; 185 this.showSkeleton = true;
186 await Promise.all([store.dispatch("index/category"), store.dispatch("index/list")]) 186 await Promise.all([store.dispatch("index/category"), store.dispatch("index/list")])
187 this.showSkeleton = false; 187 this.showSkeleton = false;
188 this.showContent = true 188 this.showContent = true
189 }, 189 },
190 showDrawer(e) { 190 showDrawer(e) {
191 this.$refs[e].open(); 191 this.$refs[e].open();
192 }, 192 },
193 getList() { 193 getList() {
194 store.dispatch("index/list"); 194 store.dispatch("index/list");
195 this.isLoading = false; //TODO:::这里不知道怎么改，请同学帮忙写一下。 195 this.isLoading = false; //TODO:::这里不知道怎么改，请同学帮忙写一下。
196 //把data里的isLoading 改为false就可以了 196 //把data里的isLoading 改为false就可以了
197 }, 197 },
198 // search(params) { 198 // search(params) {
199 // this.$store.index. 199 // this.$store.index.
200 // }, 200 // },
201 closeDrawer(e) { 201 closeDrawer(e) {
202 this.$refs[e].close(); 202 this.$refs[e].close();
203 }, 203 },
204 change(e, type) { 204 change(e, type) {
205 this[type] = e; 205 this[type] = e;
206 }, 206 },
207 onClickItem(e) { 207 onClickItem(e) {
208 if (this.current !== e) { 208 if (this.current !== e) {
209 this.current = e; 209 this.current = e;
210 } 210 }
211 }, 211 },
212 dropDown() { 212 dropDown() {
213 console.log("下拉"); 213 console.log("下拉");
214 }, 214 },
215 searchKey(e) { 215 searchKey(e) {
216 const { value: keyword } = e.detail; 216 const { value: keyword } = e.detail;
217 this.keyWords = keyword; 217 this.keyWords = keyword;
218 store.dispatch("index/search", { 218 store.dispatch("index/search", {
219 params: {}, 219 params: {},
220 keyword 220 keyword
221 }); 221 });
222 }, 222 },
223 // 接收菜单结果 223 // 接收菜单结果
224 search(e) { 224 search(e) {
225 const { on, value, selectedData } = e; 225 const { on, value, selectedData } = e;
226 let params = {}; 226 let params = {};
227 const selectedPayload = {}; 227 const selectedPayload = {};
228 for (const key in selectedData) { 228 for (const key in selectedData) {
229 if (Object.prototype.hasOwnProperty.call(selectedData, key)) { 229 if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
230 selectedPayload[key] = selectedData[key].toString(); 230 selectedPayload[key] = selectedData[key].toString();
231 } 231 }
232 } 232 }
233 if (on[0] === 1) { 233 if (on[0] === 1) {
234 // 若点击全部 234 // 若点击全部
235 this.searchText = ""; 235 this.searchText = "";
236 store.dispatch("index/list"); 236 store.dispatch("index/list");
237 } else { 237 } else {
238 for (let i = 1; i <= on.length; i++) { 238 for (let i = 1; i <= on.length; i++) {
239 // on[0]是全部 239 // on[0]是全部
240 if (on[i] === 1) { 240 if (on[i] === 1) {
241 // 若该选项被选中 241 // 若该选项被选中
242 if (this.categoryList[i].value === "filter") { 242 if (this.categoryList[i].value === "filter") {
243 params = { 243 params = {
244 ...selectedPayload, 244 ...selectedPayload,
245 ...params 245 ...params
246 }; 246 };
247 } else { 247 } else {
248 params[`${this.categoryList[i].value}`] = value[i][0]; 248 params[`${this.categoryList[i].value}`] = value[i][0];
249 } 249 }
250 } 250 }
251 } 251 }
252 store.dispatch("index/search", { 252 store.dispatch("index/search", {
253 params, 253 params,
254 keyword: this.keyWords 254 keyword: this.keyWords
255 }); 255 });
256 } 256 }
257 } 257 }
258 } 258 }
259 }; 259 };
260 </script> 260 </script>
261 261
262 <style lang="scss"> 262 <style lang="scss">
263 .content,.container { 263 .content,.container {
264 display: flex; 264 display: flex;
265 flex-direction: column; 265 flex-direction: column;
266 align-items: center; 266 align-items: center;
267 justify-content: center; 267 justify-content: center;
268 width: 100%;
268 } 269 }
269 .header { 270 .header {
270 display: flex; 271 display: flex;
271 flex-direction: column; 272 flex-direction: column;
272 align-items: center; 273 align-items: center;
273 justify-content: center; 274 justify-content: center;
274 background-color: #f7f6f6; 275 background-color: #f7f6f6;
275 height: 178rpx; 276 height: 178rpx;
276 width: 100%; 277 width: 100%;
277 z-index: 999; 278 z-index: 999;
278 position: fixed; 279 position: fixed;
279 top: 0; 280 top: 0;
280 left: 0; 281 left: 0;
281 } 282 }
282 .searchBar { 283 .searchBar {
283 width: 670rpx; 284 width: 670rpx;
284 display: flex; 285 display: flex;
285 justify-content: center; 286 justify-content: center;
286 align-items: center; 287 align-items: center;
287 box-sizing: border-box; 288 box-sizing: border-box;
288 padding: 0rpx 16rpx; 289 padding: 0rpx 16rpx;
289 border: 1px solid #ff6b4a; 290 border: 1px solid #ff6b4a;
290 border-radius: 8rpx; 291 border-radius: 8rpx;
291 background-color: #ffffff; 292 background-color: #ffffff;
292 } 293 }
293 294
294 .searchIpt { 295 .searchIpt {
295 height: 68rpx; 296 height: 68rpx;
296 width: 670rpx; 297 width: 670rpx;
297 padding: 16rpx; 298 padding: 16rpx;
298 font-size: 28rpx; 299 font-size: 28rpx;
299 box-sizing: border-box; 300 box-sizing: border-box;
300 } 301 }
301 .screenBar { 302 .screenBar {
302 width: 670rpx; 303 width: 670rpx;
303 height: 110rpx; 304 height: 110rpx;
304 display: flex; 305 display: flex;
305 flex-direction: row; 306 flex-direction: row;
306 justify-content: space-between; 307 justify-content: space-between;
307 align-items: center; 308 align-items: center;
308 color: #333333; 309 color: #333333;
309 font-size: 32rpx; 310 font-size: 32rpx;
310 } 311 }
311 .active { 312 .active {
312 color: #ff6b4a; 313 color: #ff6b4a;
313 } 314 }
314 .screenItem { 315 .screenItem {
315 display: flex; 316 display: flex;
316 justify-content: center; 317 justify-content: center;
317 align-items: center; 318 align-items: center;
318 } 319 }
319 .content-wrap { 320 .content-wrap {
320 width: 100%; 321 width: 100%;
321 background-color: #ffffff; 322 background-color: #ffffff;
322 } 323 }
323 324
324 .HMfilterDropdown { 325 .HMfilterDropdown {
325 top: 178rpx !important; 326 top: 178rpx !important;
326 } 327 }
327 328
328 .goods-list { 329 .goods-list {
329 padding-top: 286rpx; 330 padding-top: 286rpx;
330 .loading-text { 331 .loading-text {
331 width: 100%; 332 width: 100%;
332 display: flex; 333 display: flex;
333 justify-content: center; 334 justify-content: center;
334 align-items: center; 335 align-items: center;
335 height: 30px; 336 height: 30px;
336 color: #979797; 337 color: #979797;
337 font-size: 12px; 338 font-size: 12px;
338 } 339 }
339 .product-list { 340 .product-list {
340 width: 92%; 341 width: 92%;
341 padding: 0 4% 3vw 4%; 342 padding: 0 4% 3vw 4%;
342 display: flex; 343 display: flex;
343 justify-content: space-between; 344 justify-content: space-between;
344 flex-wrap: wrap; 345 flex-wrap: wrap;
345 .product { 346 .product {
346 width: 48%; 347 width: 48%;
347 min-height: 120rpx; 348 min-height: 120rpx;
348 margin: 0 0 20rpx 0; 349 margin: 0 0 20rpx 0;
349 background: #ffffff; 350 background: #ffffff;
350 border: 1px solid #f2f2f2; 351 border: 1px solid #f2f2f2;
351 } 352 }
352 } 353 }
353 } 354 }
354 </style> 355 </style>
355 356