吉鹏 / gulu-vue

Blame view

src/pages/index/index.vue 8.63 KB
edit raw normal view history
0db291810   BigBoss   “-mcomfirmOder页面 
1
 
  <template>
1003c53e8   Adam   go 
2
3
4
5
6
 
    <view class="content">
      <view class="header">
        <!-- 搜索-->
        <view class="searchBar">
          <icon class="searchIcon" type="search" size="14"></icon>
c300654f9   mullins   首页部分功能 
7
8
9
10
11
12
13
 
          <input
           v-model="searchText"
           class="searchIpt"
           placeholder="老花镜"
           confirm-type="search"
           @blur="searchKey"
          />
1003c53e8   Adam   go 
14
15
16
 
        </view>
  
        <!-- 筛选栏-->
c300654f9   mullins   首页部分功能 
17
 
        <!-- <view class="screenBar">
1003c53e8   Adam   go 
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
 
          <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)">
            <view
              class="screenItem"
              v-bind:class="{ active: current === item.current }"
              v-if="item.current === 2"
              @click="dropDown"
            >
              {{ item.text }}
              <icon type="info" size="14"></icon>
            </view>
            <view
              class="screenItem"
              v-bind:class="{ active: current === item.current }"
              v-if="item.current === 4"
              @click="showDrawer('showRight')"
            >
              {{ item.text }}
              <icon type="info" size="14"></icon>
            </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>
c300654f9   mullins   首页部分功能 
44
 
        </view>-->
1003c53e8   Adam   go 
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
 
      </view>
      <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>
  
      <!-- 筛选菜单-->
      <view class="content-wrap">
        <view>
c300654f9   mullins   首页部分功能 
64
65
 
         <HMfilterDropdown
            :filterData="categoryList"
1003c53e8   Adam   go 
66
67
 
            :defaultSelected="filterDropdownValue"
            :updateMenuName="true"
c300654f9   mullins   首页部分功能 
68
69
 
            @search="search"
            @getList="getList"
1003c53e8   Adam   go 
70
71
72
73
74
75
76
77
78
79
80
81
82
83
 
            data-format="Object"
          ></HMfilterDropdown>
          <!-- 商品列表 -->
          <view class="goods-list">
            <view class="product-list">
              <view class="product" v-for="(goods) in goodsList" :key="goods.id">
                <Card :goods="goods"></Card>
              </view>
            </view>
            <view class="loading-text">{{loadingText}}</view>
          </view>
        </view>
      </view>
    </view>
0db291810   BigBoss   “-mcomfirmOder页面 
84
85
86
 
  </template>
  
  <script>
9ff2df1bf   mullins   文件名称规范 
87
88
89
 
  import UniDrawer from "@/components/UniDrawer/UniDrawer.vue";
  import Card from "@/components/CommodityCard/CommodityCard.vue";
  import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue";
1003c53e8   Adam   go 
90
 
  import data from "@/common/data.js"; //筛选菜单数据
843fce64e   wulunyi   feat(master): 加入 ... 
91
92
 
  import store from '@/store';
1003c53e8   Adam   go 
93
94
95
96
97
98
99
100
 
  export default {
    components: {
      UniDrawer: UniDrawer,
      HMfilterDropdown: HMfilterDropdown,
      Card: Card
    },
    data() {
      return {
c300654f9   mullins   首页部分功能 
101
102
103
104
105
106
107
108
109
 
        // screenItems: [
        //   { current: 0, text: "全部", hasIcon: false },
        //   { current: 1, text: "销量", hasIcon: false },
        //   { current: 2, text: "价格", hasIcon: true },
        //   { current: 3, text: "折扣", hasIcon: false },
        //   { current: 4, text: "筛选", hasIcon: true }
        // ],
        // current: 0,
        // showRight: false,
1003c53e8   Adam   go 
110
111
 
        indexArr: "",
        valueArr: "",
0508098fe   BigBoss   首页筛选列表接口获取 
112
 
        loadingText: "~~到底了~~",
1003c53e8   Adam   go 
113
 
        filterDropdownValue: [],
c338b4909   BigBoss   完善页面跳转逻辑 
114
 
        filterData: [],
c300654f9   mullins   首页部分功能 
115
 
        searchText: '',
7a2dda446   BigBoss   首页逻辑修改 
116
117
118
119
120
121
122
123
124
125
126
127
 
  	  // goodsList:[
  	  // 	{ goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
  	  // 	{ goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
  	  // 	{ goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
  	  // 	{ goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
  	  // 	{ goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
  	  // 	{ goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
  	  // 	{ goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
  	  // 	{ goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
  	  // 	{ goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
  	  // 	{ goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
  	  // ],
1003c53e8   Adam   go 
128
129
 
      };
    },
843fce64e   wulunyi   feat(master): 加入 ... 
130
 
    computed: {
c300654f9   mullins   首页部分功能 
131
132
133
134
 
      goodsList() {
        // 也可以从 getters 获取
        return this.$store.state.index.list;
      },
7a2dda446   BigBoss   首页逻辑修改 
135
 
  	  categoryList(){
c300654f9   mullins   首页部分功能 
136
 
        return this.$store.state.index.categoryList;
600d4968f   BigBoss   修改冲突 
137
138
139
140
141
 
  				// newData[0].submenu[0].submenu = categoryList[0].submenu
  				// newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu
  				// newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu
  				// newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu
  				// newData[4].submenu[0] = categoryList[3]
7a2dda446   BigBoss   首页逻辑修改 
142
143
 
  				this.filterData = newData;
  				// this.filterData = categoryList;
c300654f9   mullins   首页部分功能 
144
 
  	  },
843fce64e   wulunyi   feat(master): 加入 ... 
145
 
    },
1003c53e8   Adam   go 
146
147
148
149
150
 
    filters: {
      outData(value) {
        return JSON.stringify(value);
      }
    },
c300654f9   mullins   首页部分功能 
151
 
    onLoad() {
c300654f9   mullins   首页部分功能 
152
153
154
 
      store.dispatch('index/category');
      // this.getList();
      store.dispatch('index/list');
1003c53e8   Adam   go 
155
156
157
158
159
 
    },
    methods: {
      showDrawer(e) {
        this.$refs[e].open();
      },
c300654f9   mullins   首页部分功能 
160
161
162
163
164
165
 
      getList() {
        store.dispatch('index/list');
      },
      // search(params) {
      //   this.$store.index.
      // },
1003c53e8   Adam   go 
166
167
168
169
170
171
172
173
174
175
176
177
178
179
 
      closeDrawer(e) {
        this.$refs[e].close();
      },
      change(e, type) {
        this[type] = e;
      },
      onClickItem(e) {
        if (this.current !== e) {
          this.current = e;
        }
      },
      dropDown() {
        console.log("下拉");
      },
c300654f9   mullins   首页部分功能 
180
181
182
 
      searchKey(e) {
        const { value: keyword } = e.detail;
        this.keyWords = keyword;
c300654f9   mullins   首页部分功能 
183
184
185
186
187
 
        store.dispatch('index/search', {
          params: {},
          keyword,
        });
      },
1003c53e8   Adam   go 
188
 
      //接收菜单结果
c300654f9   mullins   首页部分功能 
189
 
      search(e) {
c300654f9   mullins   首页部分功能 
190
191
192
 
        const { on, value, index  } = e;
        let params = {}
        if(on[0] === 1) {
7d6833f2c   mullins   地址列表 
193
 
          // 若点击全部
c300654f9   mullins   首页部分功能 
194
195
196
197
198
 
          this.searchText = '';
          store.dispatch('index/list');
        } else {
          for(let i = 1; i<=on.length; i++){ // on[0]是全部
            if(on[i] === 1) { // 若该选项被选中
c300654f9   mullins   首页部分功能 
199
200
201
202
203
204
205
206
 
              params[`${this.categoryList[i].value}`] = value[i][0];
            }
          }
          store.dispatch('index/search', {
            params, 
            keyword: this.keyWords
          });
        }
1003c53e8   Adam   go 
207
208
 
      }
    },
0508098fe   BigBoss   首页筛选列表接口获取 
209
1003c53e8   Adam   go 
210
 
  };
0db291810   BigBoss   “-mcomfirmOder页面 
211
212
213
 
  </script>
  
  <style lang="scss">
1003c53e8   Adam   go 
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
 
  .content {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #f7f6f6;
  }
  .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页面 
279
1003c53e8   Adam   go 
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
 
  .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 {
        width: 48%;
        margin: 0 0 20rpx 0;
        background: #ffffff;
        border: 1px solid #f2f2f2;
      }
    }
  }
0db291810   BigBoss   “-mcomfirmOder页面 
305
 
  </style>