刘文博 / gulu-vue

Blame view

src/pages/index/index.vue 10.1 KB
edit raw normal view history
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   Adam   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   Adam   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   Adam   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   Adam   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   Adam   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   Adam   go 
78
c00dd2818   范牧   细节修改 
79
80
81
82
83
84
85
86
87
88
89
90
91
 
        <!-- 筛选菜单-->
        <view class="content-wrap skeleton-rect">
          <view>
            <HMfilterDropdown
              :filterData="categoryList"
              :defaultSelected="filterDropdownValue"
              :updateMenuName="true"
              @search="search"
              @getList="getList"
              data-format="Object"
            ></HMfilterDropdown>
            <!-- 商品列表 -->
            <!-- 		<scroll-view
967ce241a   喻鹏   合并冲突 
92
93
94
95
96
 
  		  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   Adam   go 
114
115
 
              </view>
            </view>
c00dd2818   范牧   细节修改 
116
 
            <!-- </scroll-view> -->
1003c53e8   Adam   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   BigBoss   “-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   wulunyi   feat(master): 加入 ... 
137
1003c53e8   Adam   go 
138
139
140
141
 
  export default {
    components: {
      UniDrawer: UniDrawer,
      HMfilterDropdown: HMfilterDropdown,
c00dd2818   范牧   细节修改 
142
143
 
      Card: Card,
      skeleton: skeleton,
1003c53e8   Adam   go 
144
 
    },
92d01cfd5   Adam   修正订单数据 
145
 
    data() {
1003c53e8   Adam   go 
146
 
      return {
c00dd2818   范牧   细节修改 
147
148
149
150
151
 
        indexArr: '',
        valueArr: '',
        isLoading: true, // 初始化加载状态
        loadingText: 'data loading...',
        loadedText: '~~暂无更多数据~~',
1003c53e8   Adam   go 
152
 
        filterDropdownValue: [],
c338b4909   BigBoss   完善页面跳转逻辑 
153
 
        filterData: [],
c00dd2818   范牧   细节修改 
154
155
 
        searchText: '',
        scrollTop: 0,
53bcba4f8   吉鹏   文件分包，首页添加骨架屏幕 
156
 
  	  showContent: true,
c00dd2818   范牧   细节修改 
157
158
159
 
        viewHeight: uni.getSystemInfoSync().windowHeight,
  	  showSkeleton: false, // 骨架屏显示隐藏
      }
1003c53e8   Adam   go 
160
 
    },
92d01cfd5   Adam   修正订单数据 
161
162
 
    onPageScroll({ scrollTop }) {
      // 传入scrollTop值并触发所有easy-loadimage组件下的滚动监听事件
c00dd2818   范牧   细节修改 
163
 
      this.scrollTop = scrollTop
967ce241a   喻鹏   合并冲突 
164
 
    },
843fce64e   wulunyi   feat(master): 加入 ... 
165
 
    computed: {
92d01cfd5   Adam   修正订单数据 
166
 
      goodsList() {
c300654f9   范牧   首页部分功能 
167
 
        // 也可以从 getters 获取
156736a2e   尹聃   样式修改 
168
 
        // console.log('index-list=====>',this.$store.state.index.list)
c00dd2818   范牧   细节修改 
169
170
171
172
173
 
        const list = this.$store.state.index.list
  	  if (list.length == 0) {
  		 this.isLoading = false
  	  }
  	  this.scrollTop = 0.1
e40e790a3   吉鹏   首页bug修改 
174
 
  	  return list
156736a2e   尹聃   样式修改 
175
 
      },
92d01cfd5   Adam   修正订单数据 
176
 
      categoryList() {
c00dd2818   范牧   细节修改 
177
178
 
        return this.$store.state.index.categoryList
      },
843fce64e   wulunyi   feat(master): 加入 ... 
179
 
    },
1003c53e8   Adam   go 
180
 
    filters: {
92d01cfd5   Adam   修正订单数据 
181
 
      outData(value) {
c00dd2818   范牧   细节修改 
182
183
184
185
186
187
188
189
 
        return JSON.stringify(value)
      },
    },
    /**
     *  页面载入完成后调用子组件的方法生成预加载效果
     */
    onReady: function() {
  	 this.getInitData()
1003c53e8   Adam   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   Adam   修正订单数据 
198
 
      showDrawer(e) {
c00dd2818   范牧   细节修改 
199
 
        this.$refs[e].open()
1003c53e8   Adam   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   Adam   修正订单数据 
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   Adam   修正订单数据 
235
 
      closeDrawer(e) {
c00dd2818   范牧   细节修改 
236
 
        this.$refs[e].close()
1003c53e8   Adam   go 
237
 
      },
92d01cfd5   Adam   修正订单数据 
238
 
      change(e, type) {
c00dd2818   范牧   细节修改 
239
 
        this[type] = e
1003c53e8   Adam   go 
240
 
      },
92d01cfd5   Adam   修正订单数据 
241
 
      onClickItem(e) {
1003c53e8   Adam   go 
242
 
        if (this.current !== e) {
c00dd2818   范牧   细节修改 
243
 
          this.current = e
1003c53e8   Adam   go 
244
245
 
        }
      },
92d01cfd5   Adam   修正订单数据 
246
 
      dropDown() {
c00dd2818   范牧   细节修改 
247
 
        console.log('下拉')
1003c53e8   Adam   go 
248
 
      },
92d01cfd5   Adam   修正订单数据 
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   Adam   修正订单数据 
258
 
      search(e) {
c00dd2818   范牧   细节修改 
259
260
261
 
        const { on, value, selectedData } = e
        let params = {}
        const selectedPayload = {}
467128613   范牧   筛选逻辑添加 
262
 
        for (const key in selectedData) {
323398550   范牧   若干功能添加 
263
 
          if (Object.prototype.hasOwnProperty.call(selectedData, key)) {
c00dd2818   范牧   细节修改 
264
 
            selectedPayload[key] = selectedData[key].toString()
467128613   范牧   筛选逻辑添加 
265
266
 
          }
        }
fb748734c   范牧   首页部分逻辑修改 
267
 
        if (on[0] === 1) {
7d6833f2c   范牧   地址列表 
268
 
          // 若点击全部
c00dd2818   范牧   细节修改 
269
270
 
          this.searchText = ''
          store.dispatch('index/list')
c300654f9   范牧   首页部分功能 
271
 
        } else {
92d01cfd5   Adam   修正订单数据 
272
273
274
275
 
          for (let i = 1; i <= on.length; i++) {
            // on[0]是全部
            if (on[i] === 1) {
              // 若该选项被选中
c00dd2818   范牧   细节修改 
276
 
              if (this.categoryList[i].value === 'filter') {
fb748734c   范牧   首页部分逻辑修改 
277
 
                params = {
323398550   范牧   若干功能添加 
278
 
                  ...selectedPayload,
c00dd2818   范牧   细节修改 
279
280
281
282
 
                  ...params,
                }
              } else if (this.categoryList[i].value === 'px') {
                params.orderby = value[i][0]
fb748734c   范牧   首页部分逻辑修改 
283
 
              } else {
c00dd2818   范牧   细节修改 
284
 
                params[`${this.categoryList[i].value}`] = value[i][0]
fb748734c   范牧   首页部分逻辑修改 
285
 
              }
c300654f9   范牧   首页部分功能 
286
287
 
            }
          }
c00dd2818   范牧   细节修改 
288
 
          store.dispatch('index/search', {
fb748734c   范牧   首页部分逻辑修改 
289
 
            params,
c00dd2818   范牧   细节修改 
290
291
 
            keyword: this.keyWords,
          })
c300654f9   范牧   首页部分功能 
292
 
        }
c00dd2818   范牧   细节修改 
293
294
295
 
      },
    },
  }
0db291810   BigBoss   “-mcomfirmOder页面 
296
297
298
 
  </script>
  
  <style lang="scss">
c00dd2818   范牧   细节修改 
299
300
 
  .content,
  .container {
1003c53e8   Adam   go 
301
302
303
304
 
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
5b12ec0b6   BigBoss   修改首页bug 
305
 
    width: 100%;
1003c53e8   Adam   go 
306
307
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
 
  }
  .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   BigBoss   “-mcomfirmOder页面 
365
1003c53e8   Adam   go 
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
 
  .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   范牧   细节修改 
384
385
 
        width: 48%;
        min-height: 120rpx;
1003c53e8   Adam   go 
386
387
388
389
390
391
 
        margin: 0 0 20rpx 0;
        background: #ffffff;
        border: 1px solid #f2f2f2;
      }
    }
  }
0db291810   BigBoss   “-mcomfirmOder页面 
392
 
  </style>