吉鹏 / gulu-vue

Compare View

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