Blame view
src/pages/index/index.vue
10.2 KB
c00dd2818 细节修改 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<template> <view class="container"> <view class="content skeleton" v-show="showContent" > <view class="header"> <!-- 搜索--> <view class="searchBar skeleton-rect"> <icon class="searchIcon" type="search" size="14" ></icon> <input v-model="searchText" class="searchIpt" placeholder="老花镜" confirm-type="search" @blur="searchKey" /> </view> |
1003c53e8 go |
23 |
|
c00dd2818 细节修改 |
24 25 |
<!-- 筛选栏--> <!-- <view class="screenBar"> |
fb748734c 首页部分逻辑修改 |
26 27 28 29 30 |
<view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)" > |
1003c53e8 go |
31 32 33 34 35 36 37 |
<view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 2" @click="dropDown" > {{ item.text }} |
fb748734c 首页部分逻辑修改 |
38 39 40 41 |
<icon type="info" size="14" ></icon> |
1003c53e8 go |
42 43 44 45 46 47 48 49 |
</view> <view class="screenItem" v-bind:class="{ active: current === item.current }" v-if="item.current === 4" @click="showDrawer('showRight')" > {{ item.text }} |
fb748734c 首页部分逻辑修改 |
50 51 52 53 |
<icon type="info" size="14" ></icon> |
1003c53e8 go |
54 55 56 57 58 59 60 61 |
</view> <view v-if="item.current !== 2&&item.current!==4"> <view class="screenItem" v-bind:class="{ active: current === item.current }" >{{ item.text }}</view> </view> </view> |
fb748734c 首页部分逻辑修改 |
62 |
</view> --> |
1003c53e8 go |
63 |
</view> |
c00dd2818 细节修改 |
64 65 66 67 68 69 70 71 72 73 74 75 76 77 |
<Uni-drawer ref="showRight" mask="true" maskClick="true" mode="right" :width="320" @change="change($event,'showRight')" > <view class="close"> <view @click="closeDrawer('showRight')"> <text class="word-btn-white">关闭</text> </view> </view> </Uni-drawer> |
1003c53e8 go |
78 |
|
c00dd2818 细节修改 |
79 80 81 82 83 84 85 86 87 88 89 90 |
<!-- 筛选菜单--> <view class="content-wrap skeleton-rect"> <view> <HMfilterDropdown :filterData="categoryList" :defaultSelected="filterDropdownValue" :updateMenuName="true" @search="search" @getList="getList" data-format="Object" ></HMfilterDropdown> <!-- 商品列表 --> |
31b5bebd4 订单样式修改 |
91 92 93 94 95 96 |
<!-- <scroll-view enable-flex @scrolltolower="handleScrolltolower" scroll-y style="height: 1000px;margin-bottom: 20px;" > --> |
c00dd2818 细节修改 |
97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 |
<view class="goods-list"> <view class="product-list"> <view class="product skeleton-rect" v-for="(goods) in goodsList" :key="goods.id" > <Card :goods="goods" :scrollTop="scrollTop" :viewHeight="viewHeight" ></Card> </view> </view> <view class="loading-text"> <text v-if="isLoading==true">{{loadingText}}</text> <text v-else>{{loadedText}}</text> |
1003c53e8 go |
114 115 |
</view> </view> |
c00dd2818 细节修改 |
116 |
<!-- </scroll-view> --> |
1003c53e8 go |
117 118 |
</view> </view> |
c00dd2818 细节修改 |
119 120 121 122 123 124 125 126 127 128 |
</view> <!--引用组件--> <skeleton :show="showSkeleton" ref="skeleton" loading="chiaroscuro" selector="skeleton" bgcolor="#FFF" ></skeleton> </view> |
0db291810 “-mcomfirmOder页面 |
129 130 131 |
</template> <script> |
c00dd2818 细节修改 |
132 133 134 135 136 |
import UniDrawer from '@/components/UniDrawer/UniDrawer.vue' import Card from '@/components/CommodityCard/CommodityCard.vue' import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue' import skeleton from '@/components/quick-skeleton/quick-skeleton.vue' import store from '@/store' |
843fce64e feat(master): 加入 ... |
137 |
|
1003c53e8 go |
138 139 140 141 |
export default { components: { UniDrawer: UniDrawer, HMfilterDropdown: HMfilterDropdown, |
c00dd2818 细节修改 |
142 143 |
Card: Card, skeleton: skeleton, |
1003c53e8 go |
144 |
}, |
92d01cfd5 修正订单数据 |
145 |
data() { |
1003c53e8 go |
146 |
return { |
c00dd2818 细节修改 |
147 148 149 150 151 |
indexArr: '', valueArr: '', isLoading: true, // 初始化加载状态 loadingText: 'data loading...', loadedText: '~~暂无更多数据~~', |
1003c53e8 go |
152 |
filterDropdownValue: [], |
c338b4909 完善页面跳转逻辑 |
153 |
filterData: [], |
c00dd2818 细节修改 |
154 155 |
searchText: '', scrollTop: 0, |
31b5bebd4 订单样式修改 |
156 |
showContent: true, |
c00dd2818 细节修改 |
157 |
viewHeight: uni.getSystemInfoSync().windowHeight, |
31b5bebd4 订单样式修改 |
158 |
showSkeleton: false, // 骨架屏显示隐藏 |
c00dd2818 细节修改 |
159 |
} |
1003c53e8 go |
160 |
}, |
92d01cfd5 修正订单数据 |
161 162 |
onPageScroll({ scrollTop }) { // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件 |
c00dd2818 细节修改 |
163 |
this.scrollTop = scrollTop |
967ce241a 合并冲突 |
164 |
}, |
843fce64e feat(master): 加入 ... |
165 |
computed: { |
92d01cfd5 修正订单数据 |
166 |
goodsList() { |
c300654f9 首页部分功能 |
167 |
// 也可以从 getters 获取 |
156736a2e 样式修改 |
168 |
// console.log('index-list=====>',this.$store.state.index.list) |
c00dd2818 细节修改 |
169 |
const list = this.$store.state.index.list |
31b5bebd4 订单样式修改 |
170 171 172 173 174 |
if (list.length === 0) { this.isLoading = false } this.scrollTop = 0.1 return list |
156736a2e 样式修改 |
175 |
}, |
92d01cfd5 修正订单数据 |
176 |
categoryList() { |
c00dd2818 细节修改 |
177 178 |
return this.$store.state.index.categoryList }, |
843fce64e feat(master): 加入 ... |
179 |
}, |
1003c53e8 go |
180 |
filters: { |
92d01cfd5 修正订单数据 |
181 |
outData(value) { |
c00dd2818 细节修改 |
182 183 184 185 186 187 188 |
return JSON.stringify(value) }, }, /** * 页面载入完成后调用子组件的方法生成预加载效果 */ onReady: function() { |
31b5bebd4 订单样式修改 |
189 |
this.getInitData() |
1003c53e8 go |
190 |
}, |
c00dd2818 细节修改 |
191 192 193 194 195 196 197 |
methods: { async getInitData () { this.showSkeleton = true await Promise.all([store.dispatch('index/category'), store.dispatch('index/list')]) this.showSkeleton = false this.showContent = true }, |
92d01cfd5 修正订单数据 |
198 |
showDrawer(e) { |
c00dd2818 细节修改 |
199 |
this.$refs[e].open() |
1003c53e8 go |
200 |
}, |
2cd0b0f44 bug修复 |
201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 |
// 朋友圈设置页面 onShareAppMessage() { let myName = this.$store.state.user.userInfo.nickName if (myName === '' || myName.length < 1 || myName === '匿名用户' || typeof myName === 'undefined') { myName = '【神秘人】' } else { myName = '【' + myName + '】' } return { title: 'Hi,' + myName + '送你300元来试戴最新潮流眼镜!', // 默认是小程序的名称(可以写slogan等) path: '/pages/index/index', // imageUrl: '/static/img/details/d1.png', // 不传入 imageUrl 则使用默认截图。显示图片长宽比是 5:4 success: function (res) { if (res.errMsg === 'shareAppMessage:ok') { console.log('分享成功!', res) } }, fail: function (res) { if (res.errMsg === 'shareAppMessage:fail cancel') { console.log('fail', '放弃分享') } else if (res.errMsg === 'shareAppMessage:fail') { console.log('fail', '分享失败') } }, } }, |
92d01cfd5 修正订单数据 |
227 |
getList() { |
c00dd2818 细节修改 |
228 229 230 |
store.dispatch('index/list') this.isLoading = false // TODO:::这里不知道怎么改,请同学帮忙写一下。 // 把data里的isLoading 改为false就可以了 |
c300654f9 首页部分功能 |
231 232 233 234 |
}, // search(params) { // this.$store.index. // }, |
92d01cfd5 修正订单数据 |
235 |
closeDrawer(e) { |
c00dd2818 细节修改 |
236 |
this.$refs[e].close() |
1003c53e8 go |
237 |
}, |
92d01cfd5 修正订单数据 |
238 |
change(e, type) { |
c00dd2818 细节修改 |
239 |
this[type] = e |
1003c53e8 go |
240 |
}, |
92d01cfd5 修正订单数据 |
241 |
onClickItem(e) { |
1003c53e8 go |
242 |
if (this.current !== e) { |
c00dd2818 细节修改 |
243 |
this.current = e |
1003c53e8 go |
244 245 |
} }, |
92d01cfd5 修正订单数据 |
246 |
dropDown() { |
c00dd2818 细节修改 |
247 |
console.log('下拉') |
1003c53e8 go |
248 |
}, |
92d01cfd5 修正订单数据 |
249 |
searchKey(e) { |
c00dd2818 细节修改 |
250 251 252 |
const { value: keyword } = e.detail this.keyWords = keyword store.dispatch('index/search', { |
c300654f9 首页部分功能 |
253 |
params: {}, |
c00dd2818 细节修改 |
254 255 |
keyword, }) |
c300654f9 首页部分功能 |
256 |
}, |
fb748734c 首页部分逻辑修改 |
257 |
// 接收菜单结果 |
92d01cfd5 修正订单数据 |
258 |
search(e) { |
c00dd2818 细节修改 |
259 260 261 |
const { on, value, selectedData } = e let params = {} const selectedPayload = {} |
2a95c67cc 首页筛选以及分享修改 |
262 263 |
console.log('on-----', on) // 将传入数组字符串化 |
467128613 筛选逻辑添加 |
264 |
for (const key in selectedData) { |
323398550 若干功能添加 |
265 |
if (Object.prototype.hasOwnProperty.call(selectedData, key)) { |
c00dd2818 细节修改 |
266 |
selectedPayload[key] = selectedData[key].toString() |
467128613 筛选逻辑添加 |
267 268 |
} } |
fb748734c 首页部分逻辑修改 |
269 |
if (on[0] === 1) { |
7d6833f2c 地址列表 |
270 |
// 若点击全部 |
c00dd2818 细节修改 |
271 272 |
this.searchText = '' store.dispatch('index/list') |
c300654f9 首页部分功能 |
273 |
} else { |
92d01cfd5 修正订单数据 |
274 275 276 277 |
for (let i = 1; i <= on.length; i++) { // on[0]是全部 if (on[i] === 1) { // 若该选项被选中 |
c00dd2818 细节修改 |
278 |
if (this.categoryList[i].value === 'filter') { |
fb748734c 首页部分逻辑修改 |
279 |
params = { |
323398550 若干功能添加 |
280 |
...selectedPayload, |
c00dd2818 细节修改 |
281 282 283 284 |
...params, } } else if (this.categoryList[i].value === 'px') { params.orderby = value[i][0] |
fb748734c 首页部分逻辑修改 |
285 |
} else { |
c00dd2818 细节修改 |
286 |
params[`${this.categoryList[i].value}`] = value[i][0] |
fb748734c 首页部分逻辑修改 |
287 |
} |
c300654f9 首页部分功能 |
288 289 |
} } |
c00dd2818 细节修改 |
290 |
store.dispatch('index/search', { |
fb748734c 首页部分逻辑修改 |
291 |
params, |
c00dd2818 细节修改 |
292 293 |
keyword: this.keyWords, }) |
c300654f9 首页部分功能 |
294 |
} |
c00dd2818 细节修改 |
295 296 297 |
}, }, } |
0db291810 “-mcomfirmOder页面 |
298 299 300 |
</script> <style lang="scss"> |
c00dd2818 细节修改 |
301 302 |
.content, .container { |
1003c53e8 go |
303 304 305 306 |
display: flex; flex-direction: column; align-items: center; justify-content: center; |
5b12ec0b6 修改首页bug |
307 |
width: 100%; |
1003c53e8 go |
308 309 310 311 312 313 314 315 316 317 318 319 320 321 322 323 324 325 326 327 328 329 330 331 332 333 334 335 336 337 338 339 340 341 342 343 344 345 346 347 348 349 350 351 352 353 354 355 356 357 358 359 360 361 362 363 364 365 366 |
} .header { display: flex; flex-direction: column; align-items: center; justify-content: center; background-color: #f7f6f6; height: 178rpx; width: 100%; z-index: 999; position: fixed; top: 0; left: 0; } .searchBar { width: 670rpx; display: flex; justify-content: center; align-items: center; box-sizing: border-box; padding: 0rpx 16rpx; border: 1px solid #ff6b4a; border-radius: 8rpx; background-color: #ffffff; } .searchIpt { height: 68rpx; width: 670rpx; padding: 16rpx; font-size: 28rpx; box-sizing: border-box; } .screenBar { width: 670rpx; height: 110rpx; display: flex; flex-direction: row; justify-content: space-between; align-items: center; color: #333333; font-size: 32rpx; } .active { color: #ff6b4a; } .screenItem { display: flex; justify-content: center; align-items: center; } .content-wrap { width: 100%; background-color: #ffffff; } .HMfilterDropdown { top: 178rpx !important; } |
0db291810 “-mcomfirmOder页面 |
367 |
|
1003c53e8 go |
368 369 370 371 372 373 374 375 376 377 378 379 380 381 382 383 384 385 |
.goods-list { padding-top: 286rpx; .loading-text { width: 100%; display: flex; justify-content: center; align-items: center; height: 30px; color: #979797; font-size: 12px; } .product-list { width: 92%; padding: 0 4% 3vw 4%; display: flex; justify-content: space-between; flex-wrap: wrap; .product { |
c00dd2818 细节修改 |
386 387 |
width: 48%; min-height: 120rpx; |
1003c53e8 go |
388 389 390 391 392 393 |
margin: 0 0 20rpx 0; background: #ffffff; border: 1px solid #f2f2f2; } } } |
0db291810 “-mcomfirmOder页面 |
394 |
</style> |