刘文博 / gulu-vue

Download as
Browse Code »

Commit fb748734ca33c189fdde516d9af1e32f7a851337

Authored by 范牧
1 parent 058f060df9
Exists in master

首页部分逻辑修改

Showing 2 changed files with 982 additions and 901 deletions   Show diff stats
src/components/HMFilterDropdown/HMFilterDropdown.vue
Diff comments   View file @fb74873
1 <template> 1 <template>
2 <view class="HMfilterDropdown" @touchmove.stop.prevent="discard" @tap.stop="discard"> 2 <view
3 <view class="nav"> 3 class="HMfilterDropdown"
4 <block v-for="(item,index) in menu" :key="index"> 4 @touchmove.stop.prevent="discard"
5 <view 5 @tap.stop="discard"
6 class="first-menu" 6 >
7 :class="{'on':showPage==index || on[index] === 1}" 7 <view class="nav">
8 @tap="togglePage(index)" 8 <block
9 v-if="!item.isNoPull" 9 v-for="(item,index) in menu"
10 > 10 :key="index"
11 <text class="name">{{item.name}}</text> 11 >
12 <text 12 <view
13 class="iconfont triangle" 13 class="first-menu"
14 :style="'transform:rotate('+triangleDeg[index]+'deg);'" 14 :class="{'on':showPage==index || on[index] === 1}"
15 ></text> 15 @tap="togglePage(index)"
16 </view> 16 v-if="!item.isNoPull"
17 <view 17 >
18 class="first-menu" 18 <text class="name">{{item.name}}</text>
19 :class="{'on':showPage==index || on[index] === 1}" 19 <text
20 @tap="showAll()" 20 class="iconfont triangle"
21 v-else 21 :style="'transform:rotate('+triangleDeg[index]+'deg);'"
22 > 22 ></text>
23 <text class="name">{{item.name}}</text> 23 </view>
24 </view> 24 <view
25 </block> 25 class="first-menu"
26 </view> 26 :class="{'on':showPage==index || on[index] === 1}"
27 <view class="mask" :class="{'show':isShowMask,'hide':maskVisibility!=true}" @tap="togglePage(showPage)"></view> 27 @tap="showAll()"
28 <block v-for="(page,page_index) in subData" :key="page_index"> 28 v-else
29 <view class="sub-menu-class" :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}"> 29 >
30 <block v-if="page.type=='hierarchy'&& page.submenu.length>0"> 30 <text class="name">{{item.name}}</text>
31 <scroll-view class="sub-menu-list" :class="[activeMenuArr[page_index].length>1?'first':'alone']" 31 </view>
32 :scroll-y="true" :scroll-into-view="'first_id'+firstScrollInto"> 32 </block>
33 <block v-for="(sub,index) in page.submenu" :key="index"> 33 </view>
34 <view class="sub-menu" :id="'first_id'+index" :class="{'on':activeMenuArr[page_index][0]==index}" @tap="selectHierarchyMenu(page_index,index,null,null)"> 34 <view
35 <view class="menu-name"> 35 class="mask"
36 <text>{{sub.name}}</text> 36 :class="{'show':isShowMask,'hide':maskVisibility!=true}"
37 <text class="iconfont selected"></text> 37 @tap="togglePage(showPage)"
38 </view> 38 ></view>
39 </view> 39 <block
40 </block> 40 v-for="(page,page_index) in subData"
41 </scroll-view> 41 :key="page_index"
42 <block v-for="(sub,index) in page.submenu" :key="index"> 42 >
43 <scroll-view class="sub-menu-list not-first" :scroll-y="true" v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0" 43 <view
44 :scroll-into-view="'second_id'+secondScrollInto"> 44 class="sub-menu-class"
45 <block v-for="(sub_second,second_index) in sub.submenu" :key="second_index"> 45 :class="{'show':showPage==page_index,'hide':pageState[page_index]!=true}"
46 <view class="sub-menu" :id="'second_id'+second_index" :class="{'on':activeMenuArr[page_index][1]==second_index}"> 46 >
47 <view class="menu-name" @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)"> 47 <block v-if="page.type=='hierarchy'&& page.submenu.length>0">
48 <text>{{sub_second.name}}</text> 48 <scroll-view
49 <text class="iconfont selected"></text> 49 class="sub-menu-list"
50 </view> 50 :class="[activeMenuArr[page_index].length>1?'first':'alone']"
51 <view class="more-sub-menu" v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"> 51 :scroll-y="true"
52 <block v-for="(sub2,sub2_index) in sub_second.submenu" :key="sub2_index"> 52 :scroll-into-view="'first_id'+firstScrollInto"
53 <text v-if="sub_second.showAllSub || (sub2_index<8)" :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}" 53 >
54 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)">{{sub2.name}}</text> 54 <block
55 <text v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9" @tap="showMoreSub(second_index)">更多<text 55 v-for="(sub,index) in page.submenu"
56 class="iconfont triangle"></text></text> 56 :key="index"
57 </block> 57 >
58 </view> 58 <view
59 </view> 59 class="sub-menu"
60 </block> 60 :id="'first_id'+index"
61 </scroll-view> 61 :class="{'on':activeMenuArr[page_index][0]==index}"
62 </block> 62 @tap="selectHierarchyMenu(page_index,index,null,null)"
63 </block> 63 >
64 <block v-if="page.type=='filter'||page.type=='checkbox'"> 64 <view class="menu-name">
65 <view class="filter"> 65 <text>{{sub.name}}</text>
66 <scroll-view class="menu-box" :scroll-y="true"> 66 <text class="iconfont selected"></text>
67 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index"> 67 </view>
68 <view class="title">{{box.name}}</view> 68 </view>
69 <view class="labels"> 69 </block>
70 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectFilterLabel(page_index,box_index,label_index)" 70 </scroll-view>
71 :class="{'on':label.selected}">{{label.name}}</view> 71 <block
72 </view> 72 v-for="(sub,index) in page.submenu"
73 </view> 73 :key="index"
74 </scroll-view> 74 >
75 <view class="btn-box"> 75 <scroll-view
76 <view class="reset" @tap="resetFilterData(page_index)">重置</view> 76 class="sub-menu-list not-first"
77 <view class="submit" @tap="setFilterData(page_index)">确定</view> 77 :scroll-y="true"
78 </view> 78 v-if="activeMenuArr[page_index][0]==index&&sub.submenu.length>0"
79 </view> 79 :scroll-into-view="'second_id'+secondScrollInto"
80 </block> 80 >
81 <block v-if="page.type=='radio'"> 81 <block
82 <view class="filter"> 82 v-for="(sub_second,second_index) in sub.submenu"
83 <scroll-view class="menu-box" :scroll-y="true"> 83 :key="second_index"
84 <view class="box" v-for="(box,box_index) in page.submenu" :key="box_index"> 84 >
85 <view class="title">{{box.name}}</view> 85 <view
86 <view class="labels"> 86 class="sub-menu"
87 <view v-for="(label,label_index) in box.submenu" :key="label_index" @tap="selectRadioLabel(page_index,box_index,label_index)" 87 :id="'second_id'+second_index"
88 :class="{'on':label.selected}">{{label.name}}</view> 88 :class="{'on':activeMenuArr[page_index][1]==second_index}"
89 </view> 89 >
90 </view> 90 <view
91 </scroll-view> 91 class="menu-name"
92 <view class="btn-box"> 92 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,null)"
93 <view class="reset" @tap="resetFilterData(page_index)">重置</view> 93 >
94 <view class="submit" @tap="setFilterData(page_index)">确定</view> 94 <text>{{sub_second.name}}</text>
95 </view> 95 <text class="iconfont selected"></text>
96 </view> 96 </view>
97 </block> 97 <view
98 </view> 98 class="more-sub-menu"
99 </block> 99 v-if="sub_second.submenu&&sub.submenu.length>0&&sub_second.submenu.length>0"
100 </view> 100 >
101 <block
102 v-for="(sub2,sub2_index) in sub_second.submenu"
103 :key="sub2_index"
104 >
105 <text
106 v-if="sub_second.showAllSub || (sub2_index<8)"
107 :class="{'on':activeMenuArr[page_index][1]==second_index&&activeMenuArr[page_index][2]==sub2_index}"
108 @tap="selectHierarchyMenu(page_index,activeMenuArr[page_index][0],second_index,sub2_index)"
109 >{{sub2.name}}</text>
110 <text
111 v-if="sub_second.showAllSub!=true && sub2_index==8 && sub_second.submenu.length>9"
112 @tap="showMoreSub(second_index)"
113 >更多<text class="iconfont triangle"></text></text>
114 </block>
115 </view>
116 </view>
117 </block>
118 </scroll-view>
119 </block>
120 </block>
121 <block v-if="page.type=='filter' || page.type=='checkbox'">
122 <view class="filter">
123 <scroll-view
124 class="menu-box"
125 :scroll-y="true"
126 >
127 <view
128 class="box"
129 v-for="(box,box_index) in page.submenu"
130 :key="box_index"
131 >
132 <view class="title">{{box.name}}</view>
133 <view class="labels">
134 <view
135 v-for="(label,label_index) in box.submenu"
136 :key="label_index"
137 @tap="selectFilterLabel(page_index, box_index, label_index)"
138 :class="{'on': label.selected}"
139 >{{label.name}}</view>
140 </view>
141 </view>
142 </scroll-view>
143 <view class="btn-box">
144 <view
145 class="reset"
146 @tap="resetFilterData(page_index)"
147 >重置</view>
148 <view
149 class="submit"
150 @tap="setFilterData(page_index)"
151 >确定</view>
152 </view>
153 </view>
154 </block>
155 <block v-if="page.type=='radio'">
156 <view class="filter">
157 <scroll-view
158 class="menu-box"
159 :scroll-y="true"
160 >
161 <view
162 class="box"
163 v-for="(box,box_index) in page.submenu"
164 :key="box_index"
165 >
166 <view class="title">{{box.name}}</view>
167 <view class="labels">
168 <view
169 v-for="(label,label_index) in box.submenu"
170 :key="label_index"
171 @tap="selectRadioLabel(page_index,box_index,label_index)"
172 :class="{'on':label.selected}"
173 >{{label.name}}</view>
174 </view>
175 </view>
176 </scroll-view>
177 <view class="btn-box">
178 <view
179 class="reset"
180 @tap="resetFilterData(page_index)"
181 >重置</view>
182 <view
183 class="submit"
184 @tap="setFilterData(page_index)"
185 >确定</view>
186 </view>
187 </view>
188 </block>
189 </view>
190 </block>
191 </view>
101 </template> 192 </template>
102 <script> 193 <script>
103 export default { 194 export default {
104 data() { 195 data () {
105 return { 196 return {
106 subData: [], //菜单数据 197 subData: [], // 菜单数据
107 menu: [], //顶部横条数据 198 menu: [], // 顶部横条数据
108 showPage: -1, //菜单页面显示/隐藏动画控制 199 showPage: -1, // 菜单页面显示/隐藏动画控制
109 pageState: [], //页面的状态 200 pageState: [], // 页面的状态
110 activeMenuArr: [], //UI状态 201 activeMenuArr: [], // UI状态
111 shadowActiveMenuArr: [], //记录选中 202 shadowActiveMenuArr: [], // 记录选中
112 defaultActive:[], 203 defaultActive: [],
113 triangleDeg: [], //小三角形的翻转动画控制 204 triangleDeg: [], // 小三角形的翻转动画控制
114 isShowMask: false, //遮罩层显示/隐藏动画控制 205 isShowMask: false, // 遮罩层显示/隐藏动画控制
115 maskVisibility: false, //遮罩层显示/隐藏状态 206 maskVisibility: false, // 遮罩层显示/隐藏状态
116 //滚动区域定位 207 // 滚动区域定位
117 firstScrollInto: 0, 208 firstScrollInto: 0,
118 secondScrollInto: 0, 209 secondScrollInto: 0,
119 componentTop:0 ,//组件top 210 componentTop: 0, // 组件top
120 isReadNewSelect:false, 211 isReadNewSelect: false,
121 on: [1,0,0,0,0], 212 on: [1, 0, 0, 0, 0],
122 } 213 selectedData: {}
123 }, 214 }
124 props: { 215 },
125 filterData: { 216 props: {
126 value: Array, 217 filterData: {
127 default: [] 218 value: Array,
128 }, 219 default: []
129 defaultSelected:{ 220 },
130 value: Array, 221 defaultSelected: {
131 default: [] 222 value: Array,
132 }, 223 default: []
133 updateMenuName:{ 224 },
134 value: Boolean, 225 updateMenuName: {
135 default: true 226 value: Boolean,
136 }, 227 default: true
137 dataFormat:{ 228 },
138 value: String, 229 dataFormat: {
139 default: 'Array' 230 value: String,
140 } 231 default: 'Array'
141 }, 232 }
142 watch: { 233 },
143 filterData: { 234 watch: {
144 handler() { 235 filterData: {
145 this.initMenu(); //filterData重新赋值初始化菜单 236 handler () {
146 }, 237 this.initMenu() // filterData重新赋值初始化菜单
147 immediate: true 238 },
148 }, 239 immediate: true
149 defaultSelected(newVal) { 240 },
150 if(newVal.length==0){ 241 defaultSelected (newVal) {
151 return; 242 if (newVal.length === 0) {
152 } 243 return
153 this.defaultActive = JSON.parse(JSON.stringify(newVal)); 244 }
154 this.activeMenuArr = JSON.parse(JSON.stringify(newVal)); 245 this.defaultActive = JSON.parse(JSON.stringify(newVal))
155 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal)); 246 this.activeMenuArr = JSON.parse(JSON.stringify(newVal))
156 // if(this.updateMenuName){ 247 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(newVal))
157 // this.setMenuName(); 248 }
158 // } 249 },
159 } 250 methods: {
160 }, 251 initMenu () {
161 methods: { 252 let tmpMenuActiveArr = []
162 initMenu() { 253 const tmpMenu = []
163 let tmpMenuActiveArr=[]; 254 for (let i = 0; i < this.filterData.length; i++) {
164 let tmpMenu=[]; 255 let tmpitem = this.filterData[i]
165 for (let i = 0; i < this.filterData.length; i++) { 256 tmpMenu.push({
166 let tmpitem = this.filterData[i]; 257 // 如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name
167 tmpMenu.push({ 258 name: tmpitem.name || (tmpitem.type === 'filter' ? '筛选' : tmpitem.submenu[0].name),
168 //如果没有设置name，则取第一个菜单作为menu.name,filter类型则将"筛选"作为menu.name 259 type: tmpitem.type,
169 name: tmpitem.name || (tmpitem.type == "filter" ? "筛选" : tmpitem.submenu[0].name), 260 isNoPull: tmpitem.isNoPull
170 type: tmpitem.type, 261 })
171 isNoPull: tmpitem.isNoPull, 262 // 初始化选中项数组-ui状态
172 }); 263 tmpMenuActiveArr.push(this.processActive(tmpitem))
173 // 初始化选中项数组-ui状态 264 // 初始化角度数组
174 tmpMenuActiveArr.push(this.processActive(tmpitem)); 265 this.triangleDeg.push(0)
175 // 初始化角度数组 266 // 初始化控制显示状态数组
176 this.triangleDeg.push(0); 267 this.pageState.push(false)
177 // 初始化控制显示状态数组 268 // 递归处理子菜单数据
178 this.pageState.push(false); 269 tmpitem = this.processSubMenu(tmpitem)
179 // 递归处理子菜单数据 270 this.filterData[i] = tmpitem
180 tmpitem = this.processSubMenu(tmpitem); 271 if (tmpitem.type === 'filter') {
181 this.filterData[i] = tmpitem; 272 for (let i = 0; i < tmpitem.length; i++) {
182 } 273 this.selectedData[`${tmpitem.submenu[i].value}`] = []
183 this.menu = tmpMenu; 274 }
184 // 初始化选中项数组 275 }
185 tmpMenuActiveArr = this.defaultActive.length>0?this.defaultActive:this.activeMenuArr.length>0?this.activeMenuArr:tmpMenuActiveArr; 276 }
186 this.defaultActive = []; 277 console.log('this.selectedData', this.selectedData)
187 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)); 278 this.menu = tmpMenu
188 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr)); 279 // 初始化选中项数组
189 // 加载菜单数据 280 tmpMenuActiveArr = this.defaultActive.length > 0 ? this.defaultActive : this.activeMenuArr.length > 0 ? this.activeMenuArr : tmpMenuActiveArr
190 this.subData = this.filterData; 281 this.defaultActive = []
191 // 设定顶部菜单名字 282 this.activeMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
192 // if(this.updateMenuName){ 283 this.shadowActiveMenuArr = JSON.parse(JSON.stringify(tmpMenuActiveArr))
193 // this.setMenuName(); 284 // 加载菜单数据
194 // } 285 this.subData = this.filterData
195 }, 286 },
196 // setMenuName(){ 287 // 展开更多
197 // for(var i=0;i<this.activeMenuArr.length;i++){ 288 showMoreSub (index) {
198 // let row = this.activeMenuArr[i]; 289 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true
199 // if (typeof(row[0]) != 'object'){ 290 this.$forceUpdate()
200 // var tmpsub = false; 291 },
201 // if(row.length>0 && row[0]!=null){ 292 // 选中
202 // tmpsub = this.subData[i].submenu[row[0]]; 293 selectHierarchyMenu (page_index, level1_index, level2_index, level3_index) {
203 // if(row.length>1 && row[1]!=null){ 294 // 读取记录
204 // tmpsub = tmpsub.submenu[row[1]]; 295 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] === level1_index) {
205 // if(row.length>2 && row[2]!=null){ 296 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index])))
206 // tmpsub = tmpsub.submenu[row[2]]; 297 } else {
207 // } 298 this.activeMenuArr[page_index].splice(0, 1, level1_index);
208 // } 299 (level2_index != null || this.activeMenuArr[page_index].length >= 2) && this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1);
209 // }else{ 300 (level3_index != null || this.activeMenuArr[page_index].length >= 3) && this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1)
210 // tmpsub = false; 301 }
211 // } 302 // 写入结果
212 // if(tmpsub){ 303 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0)
213 // this.menu[i].name = tmpsub.name; 304 ) {
214 // } 305 const sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]
215 // } 306 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
216 // } 307 this.togglePage(this.showPage)
217 // }, 308 }
218 //展开更多 309 },
219 showMoreSub(index) { 310 // 写入结果，筛选
220 this.subData[this.showPage].submenu[this.activeMenuArr[this.showPage][0]].submenu[index].showAllSub = true; 311 setFilterData (page_index) {
221 this.$forceUpdate(); 312 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index]))
222 }, 313 this.togglePage(this.showPage)
223 //选中 314 },
224 selectHierarchyMenu(page_index, level1_index, level2_index, level3_index) { 315 // 重置结果和ui，筛选
225 //读取记录 316 resetFilterData (page_index) {
226 if (level1_index != null && level2_index == null && level3_index == null && this.shadowActiveMenuArr[page_index][0] == 317 const tmpArr = []
227 level1_index) { 318 let level = this.shadowActiveMenuArr[page_index].length
228 this.activeMenuArr.splice(page_index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[page_index]))); 319 while (level > 0) {
229 } else { 320 tmpArr.push([])
230 this.activeMenuArr[page_index].splice(0, 1, level1_index); 321 const box = this.subData[page_index].submenu[level - 1].submenu
231 (level2_index!=null||this.activeMenuArr[page_index].length>=2)&&this.activeMenuArr[page_index].splice(1, 1, level2_index) || this.activeMenuArr[page_index].splice(1, 1); 322 for (let i = 0; i < box.length; i++) {
232 (level3_index!=null||this.activeMenuArr[page_index].length>=3)&&this.activeMenuArr[page_index].splice(2, 1, level3_index) || this.activeMenuArr[page_index].splice(2, 1); 323 this.subData[page_index].submenu[level - 1].submenu[i].selected = false
233 } 324 }
234 //写入结果 325 level--
235 if (level3_index != null || level2_index != null || (level1_index != null && this.subData[page_index].submenu[level1_index].submenu.length == 0) 326 }
236 ) { 327 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr))
237 let sub = this.subData[page_index].submenu[level1_index].submenu[level2_index]; 328 this.$forceUpdate()
238 // if(this.updateMenuName){ 329 },
239 // this.menu[page_index].name = (level3_index != null && sub.submenu[level3_index].name) || (level2_index != null && sub.name) || this.subData[page_index].submenu[level1_index].name; 330 // 选中筛选类label-UI状态
240 // } 331 selectFilterLabel (page_index, box_index, label_index) {
241 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])); 332 const findIndex = this.activeMenuArr[page_index][box_index].indexOf(label_index)
242 this.togglePage(this.showPage); 333 console.log('select', page_index, box_index, label_index, findIndex)
243 } 334 const data = this.filterData[page_index].submenu
244 }, 335 const selected = this.selectedData[`${data[box_index].value}`]
245 //写入结果，筛选 336 if (findIndex > -1) {
246 setFilterData(page_index) { 337 this.activeMenuArr[page_index][box_index].splice(findIndex, 1)
247 this.shadowActiveMenuArr[page_index] = JSON.parse(JSON.stringify(this.activeMenuArr[page_index])); 338 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false
248 this.togglePage(this.showPage); 339 for (let i = 0; i < selected.length; i++) {
249 }, 340 if (selected[i] === data[box_index].submenu[label_index].value) {
250 //重置结果和ui，筛选 341 console.log('dd', this.selectedData[`${data[box_index].value}`], selected)
251 resetFilterData(page_index) { 342 this.selectedData[`${data[box_index].value}`] = selected.slice(1, 1)
252 let tmpArr = []; 343 console.log('dd2', this.selectedData[`${data[box_index].value}`], selected)
253 let level = this.shadowActiveMenuArr[page_index].length; 344 }
254 while (level > 0) { 345 }
255 tmpArr.push([]); 346 } else {
256 let box = this.subData[page_index].submenu[level - 1].submenu; 347 this.activeMenuArr[page_index][box_index].push(label_index)
257 for (let i = 0; i < box.length; i++) { 348 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true
258 this.subData[page_index].submenu[level - 1].submenu[i].selected = false; 349 if (!selected) {
259 } 350 this.selectedData[`${data[box_index].value}`] = []
260 level--; 351 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
261 } 352 } else {
262 this.activeMenuArr[page_index] = JSON.parse(JSON.stringify(tmpArr)); 353 this.selectedData[`${data[box_index].value}`].push(data[box_index].submenu[label_index].value)
263 this.$forceUpdate(); 354 }
264 }, 355 // this.selectedData[`${data[box_index].value}`].push(data[box_index][label_index])
265 //选中筛选类label-UI状态 356 console.log('---', data, this.filterData, this.selectedData)
266 selectFilterLabel(page_index, box_index, label_index) { 357 }
267 let find_index = this.activeMenuArr[page_index][box_index].indexOf(label_index); 358 this.$forceUpdate()
268 if (find_index > -1) { 359 },
269 this.activeMenuArr[page_index][box_index].splice(find_index, 1); 360 // 选中单选类label-UI状态
270 this.subData[page_index].submenu[box_index].submenu[label_index].selected = false; 361 selectRadioLabel (page_index, box_index, label_index) {
271 } else { 362 const activeIndex = this.activeMenuArr[page_index][box_index][0]
272 this.activeMenuArr[page_index][box_index].push(label_index); 363 if (activeIndex == label_index) {
273 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true; 364 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false
274 } 365 this.activeMenuArr[page_index][box_index][0] = null
275 this.$forceUpdate(); 366 } else {
276 }, 367 if (activeIndex != null && activeIndex < this.subData[page_index].submenu[box_index].submenu.length) {
277 //选中单选类label-UI状态 368 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false
278 selectRadioLabel(page_index, box_index, label_index) { 369 }
279
280 let activeIndex = this.activeMenuArr[page_index][box_index][0];
281 if(activeIndex == label_index){
282 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
283 this.activeMenuArr[page_index][box_index][0] = null;
284 }else{
285 if(activeIndex!=null && activeIndex<this.subData[page_index].submenu[box_index].submenu.length){
286 this.subData[page_index].submenu[box_index].submenu[activeIndex].selected = false;
287 }
288
289 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true;
290 this.activeMenuArr[page_index][box_index][0] = label_index;
291 }
292 this.$forceUpdate();
293 },
294 //菜单开关
295 togglePage(index) {
296 if (index == this.showPage) {
297 this.hidePageLayer(true);
298 this.hideMask();
299 this.showPage = -1;
300 } else {
301 if (this.showPage > -1) {
302 this.hidePageLayer(false);
303 }
304 this.showPageLayer(index);
305 this.showMask();
306 }
307 if(this.on[0] === 1) {
308 this.on[0] = 0;
309 }
310 this.on[index] = 1;
311 },
312 showAll() {
313 this.on = [1,0,0,0,0]
314 // 输出
315 this.$emit('search', {
316 index: {},
317 value: {},
318 on: this.on,
319 });
320 },
321 //hide遮罩层
322 hideMask() {
323 this.isShowMask = false;
324 setTimeout(() => {
325 this.maskVisibility = false;
326 }, 200);
327 },
328 //show遮罩层
329 showMask() {
330 this.maskVisibility = true;
331 this.$nextTick(() => {
332 setTimeout(() => {
333 this.isShowMask = true;
334 }, 0);
335 })
336 },
337 //hide菜单页
338 hidePageLayer(isAnimation) {
339 this.triangleDeg[this.showPage] = 0;
340 let tmpIndex = this.showPage;
341 if (isAnimation) {
342 setTimeout(() => {
343 this.pageState.splice(tmpIndex, 1, false);
344 }, 200);
345 this.confirm();
346 } else {
347 this.pageState.splice(tmpIndex, 1, false)
348 }
349 this.firstScrollInto = null;
350 this.secondScrollInto = null;
351 },
352 confirm() {
353 let index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
354 let value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr));
355
356 //对结果做一下处理
357 index.forEach((item, i) => {
358 if (typeof(item[0]) == 'object') {
359 //针对筛选结果过一个排序
360 item.forEach((s, j) => {
361 if(s!=null){
362 s.sort((val1, val2) => {
363 return val1 - val2;
364 });
365 item[j] = s;
366 s.forEach((v, k) => {
367 value[i][j][k] = (v==null||v>=this.subData[i].submenu[j].submenu.length)?null:this.subData[i].submenu[j].submenu[v].value;
368 if(this.subData[i].type == 'radio' && value[i][j][k] == null){
369 value[i][j] = [];
370 index[i][j] = [];
371 }
372 });
373 }
374 });
375 }else{
376 let submenu = this.subData[i].submenu[item[0]];
377 value[i][0] = submenu && submenu.value;
378 if(value[i].length>=2 && item[1]!=null){
379 if(submenu.submenu.length>0){
380 submenu = submenu.submenu[item[1]];
381 value[i][1] = submenu.hasOwnProperty('value')?submenu.value:null;
382 }else{
383 value[i][1] = null
384 }
385 if(value[i].length>=3 && item[2]!=null){
386 if(submenu.submenu.length>0){
387 submenu = submenu.submenu[item[2]];
388 value[i][2] = submenu.hasOwnProperty('value')?submenu.value:null;
389 }else{
390 value[i][2] = null;
391 }
392 }
393 }
394 }
395 index[i] = item;
396
397 });
398 // 输出
399 this.$emit('search', {
400 index: index,
401 value: value,
402 on: this.on,
403 });
404 },
405 //show菜单页
406 showPageLayer(index) {
407 this.processPage(index);
408 this.pageState.splice(index, 1, true);
409 this.$nextTick(() => {
410 setTimeout(() => {
411 this.showPage = index;
412 }, 0);
413 })
414 this.triangleDeg[index] = 180;
415 },
416 reloadActiveMenuArr(){
417 for (let i = 0; i < this.filterData.length; i++) {
418 let tmpitem = this.filterData[i];
419 let tmpArr = this.processActive(tmpitem);
420 tmpitem = this.processSubMenu(tmpitem);
421 if(this.activeMenuArr[i].length!=tmpArr.length){
422 this.filterData[i] = tmpitem;
423 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
424 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)));
425 }
426 }
427 this.subData = this.filterData;
428 this.$forceUpdate();
429 },
430 processPage(index) {
431 //check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
432 this.reloadActiveMenuArr();
433 //重置UI控制数组
434 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])));
435 if (this.menu[index].type == 'filter') {
436 //重载筛选页选中状态
437 let level = this.shadowActiveMenuArr[index].length;
438 for (let i = 0; i < level; i++) {
439 let box = this.subData[index].submenu[i].submenu;
440 for (let j = 0; j < box.length; j++) {
441 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
442 this.subData[index].submenu[i].submenu[j].selected = true;
443 } else {
444 this.subData[index].submenu[i].submenu[j].selected = false;
445 }
446 }
447 }
448 } else if (this.menu[index].type == 'hierarchy') {
449 this.$nextTick(() => {
450 setTimeout(() => {
451 //滚动到选中项
452 this.firstScrollInto = parseInt(this.activeMenuArr[index][0]);
453 this.secondScrollInto = parseInt(this.activeMenuArr[index][1]);
454 }, 0);
455 })
456 } else if (this.menu[index].type == 'radio') {
457 //重载筛选页选中状态
458 let level = this.shadowActiveMenuArr[index].length;
459 for (let i = 0; i < level; i++) {
460 let box = this.subData[index].submenu[i].submenu;
461 for (let j = 0; j < box.length; j++) {
462 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
463 this.subData[index].submenu[i].submenu[j].selected = true;
464 } else {
465 this.subData[index].submenu[i].submenu[j].selected = false;
466 }
467 }
468 }
469 }
470 },
471 processActive(tmpitem) {
472 let tmpArr = []
473 if (tmpitem.type == 'hierarchy'&&tmpitem.hasOwnProperty('submenu')&&tmpitem.submenu.length>0) {
474 let level = this.getMaxFloor(tmpitem.submenu);
475 while (level > 0) {
476 tmpArr.push(0);
477 level--;
478 }
479 } else if (tmpitem.type == 'filter') {
480 let level = tmpitem.submenu.length;
481 while (level > 0) {
482 tmpArr.push([]);
483 level--;
484 }
485 } else if (tmpitem.type == 'radio') {
486 let level = tmpitem.submenu.length;
487 while (level > 0) {
488 tmpArr.push([]);
489 level--;
490 }
491 }
492 return tmpArr;
493 },
494 processSubMenu(menu) {
495 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
496 for (let i = 0; i < menu.submenu.length; i++) {
497 menu.submenu[i] = this.processSubMenu(menu.submenu[i]);
498 }
499 } else {
500 menu.submenu = [];
501 }
502 return menu;
503 },
504 //计算菜单层级
505 getMaxFloor(treeData) {
506 let floor = 0
507 let max = 0
508 function each(data, floor) {
509 data.forEach(e => {
510 max = floor > max ? floor : max;
511 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
512 each(e.submenu, floor + 1)
513 }
514 })
515 }
516 each(treeData, 1)
517 return max;
518 },
519 discard() {
520 370
521 } 371 this.subData[page_index].submenu[box_index].submenu[label_index].selected = true
522 } 372 this.activeMenuArr[page_index][box_index][0] = label_index
523 } 373 }
374 this.$forceUpdate()
375 },
376 // 菜单开关
377 togglePage (index) {
378 if (index == this.showPage) {
379 this.hidePageLayer(true)
380 this.hideMask()
381 this.showPage = -1
382 } else {
383 if (this.showPage > -1) {
384 this.hidePageLayer(false)
385 }
386 this.showPageLayer(index)
387 this.showMask()
388 }
389 if (this.on[0] === 1) {
390 this.on[0] = 0
391 }
392 this.on[index] = 1
393 },
394 showAll () {
395 this.on = [1, 0, 0, 0, 0]
396 // 输出
397 this.$emit('search', {
398 index: {},
399 value: {},
400 on: this.on,
401 selectedData: this.selectedData
402 })
403 },
404 // hide遮罩层
405 hideMask () {
406 this.isShowMask = false
407 setTimeout(() => {
408 this.maskVisibility = false
409 }, 200)
410 },
411 // show遮罩层
412 showMask () {
413 this.maskVisibility = true
414 this.$nextTick(() => {
415 setTimeout(() => {
416 this.isShowMask = true
417 }, 0)
418 })
419 },
420 // hide菜单页
421 hidePageLayer (isAnimation) {
422 this.triangleDeg[this.showPage] = 0
423 const tmpIndex = this.showPage
424 if (isAnimation) {
425 setTimeout(() => {
426 this.pageState.splice(tmpIndex, 1, false)
427 }, 200)
428 this.confirm()
429 } else {
430 this.pageState.splice(tmpIndex, 1, false)
431 }
432 this.firstScrollInto = null
433 this.secondScrollInto = null
434 },
435 confirm () {
436 const index = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
437 const value = JSON.parse(JSON.stringify(this.shadowActiveMenuArr))
438
439 // 对结果做一下处理
440 index.forEach((item, i) => {
441 if (typeof (item[0]) === 'object') {
442 // 针对筛选结果过一个排序
443 item.forEach((s, j) => {
444 if (s != null) {
445 s.sort((val1, val2) => {
446 return val1 - val2
447 })
448 item[j] = s
449 s.forEach((v, k) => {
450 value[i][j][k] = (v == null || v >= this.subData[i].submenu[j].submenu.length) ? null : this.subData[i].submenu[j].submenu[v].value
451 if (this.subData[i].type == 'radio' && value[i][j][k] == null) {
452 value[i][j] = []
453 index[i][j] = []
454 }
455 })
456 }
457 })
458 } else {
459 let submenu = this.subData[i].submenu[item[0]]
460 value[i][0] = submenu && submenu.value
461 if (value[i].length >= 2 && item[1] != null) {
462 if (submenu.submenu.length > 0) {
463 submenu = submenu.submenu[item[1]]
464 value[i][1] = submenu.hasOwnProperty('value') ? submenu.value : null
465 } else {
466 value[i][1] = null
467 }
468 if (value[i].length >= 3 && item[2] != null) {
469 if (submenu.submenu.length > 0) {
470 submenu = submenu.submenu[item[2]]
471 value[i][2] = submenu.hasOwnProperty('value') ? submenu.value : null
472 } else {
473 value[i][2] = null
474 }
475 }
476 }
477 }
478 index[i] = item
479 })
480 // 输出
481 this.$emit('search', {
482 index: index,
483 value: value,
484 on: this.on,
485 selectedData: this.selectedData
486 })
487 },
488 // show菜单页
489 showPageLayer (index) {
490 this.processPage(index)
491 this.pageState.splice(index, 1, true)
492 this.$nextTick(() => {
493 setTimeout(() => {
494 this.showPage = index
495 }, 0)
496 })
497 this.triangleDeg[index] = 180
498 },
499 reloadActiveMenuArr () {
500 for (let i = 0; i < this.filterData.length; i++) {
501 let tmpitem = this.filterData[i]
502 const tmpArr = this.processActive(tmpitem)
503 tmpitem = this.processSubMenu(tmpitem)
504 if (this.activeMenuArr[i].length != tmpArr.length) {
505 this.filterData[i] = tmpitem
506 this.activeMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
507 this.shadowActiveMenuArr.splice(i, 1, JSON.parse(JSON.stringify(tmpArr)))
508 }
509 }
510 this.subData = this.filterData
511 this.$forceUpdate()
512 },
513 processPage (index) {
514 // check UI控制数组，结果数组,防止传入数据层级和UI控制数组不同步
515 this.reloadActiveMenuArr()
516 // 重置UI控制数组
517 this.activeMenuArr.splice(index, 1, JSON.parse(JSON.stringify(this.shadowActiveMenuArr[index])))
518 if (this.menu[index].type === 'filter') {
519 // 重载筛选页选中状态
520 const level = this.shadowActiveMenuArr[index].length
521 for (let i = 0; i < level; i++) {
522 const box = this.subData[index].submenu[i].submenu
523 for (let j = 0; j < box.length; j++) {
524 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
525 this.subData[index].submenu[i].submenu[j].selected = true
526 } else {
527 this.subData[index].submenu[i].submenu[j].selected = false
528 }
529 }
530 }
531 } else if (this.menu[index].type === 'hierarchy') {
532 this.$nextTick(() => {
533 setTimeout(() => {
534 // 滚动到选中项
535 this.firstScrollInto = parseInt(this.activeMenuArr[index][0])
536 this.secondScrollInto = parseInt(this.activeMenuArr[index][1])
537 }, 0)
538 })
539 } else if (this.menu[index].type === 'radio') {
540 // 重载筛选页选中状态
541 const level = this.shadowActiveMenuArr[index].length
542 for (let i = 0; i < level; i++) {
543 const box = this.subData[index].submenu[i].submenu
544 for (let j = 0; j < box.length; j++) {
545 if (this.shadowActiveMenuArr[index][i].indexOf(j) > -1) {
546 this.subData[index].submenu[i].submenu[j].selected = true
547 } else {
548 this.subData[index].submenu[i].submenu[j].selected = false
549 }
550 }
551 }
552 }
553 },
554 processActive (tmpitem) {
555 const tmpArr = []
556 if (tmpitem.type === 'hierarchy' && tmpitem.hasOwnProperty('submenu') && tmpitem.submenu.length > 0) {
557 let level = this.getMaxFloor(tmpitem.submenu)
558 while (level > 0) {
559 tmpArr.push(0)
560 level--
561 }
562 } else if (tmpitem.type === 'filter') {
563 let level = tmpitem.submenu.length
564 while (level > 0) {
565 tmpArr.push([])
566 level--
567 }
568 } else if (tmpitem.type === 'radio') {
569 let level = tmpitem.submenu.length
570 while (level > 0) {
571 tmpArr.push([])
572 level--
573 }
574 }
575 return tmpArr
576 },
577 processSubMenu (menu) {
578 if (menu.hasOwnProperty('submenu') && menu.submenu.length > 0) {
579 for (let i = 0; i < menu.submenu.length; i++) {
580 menu.submenu[i] = this.processSubMenu(menu.submenu[i])
581 }
582 } else {
583 menu.submenu = []
584 }
585 return menu
586 },
587 // 计算菜单层级
588 getMaxFloor (treeData) {
589 const floor = 0
590 let max = 0
591 function each (data, floor) {
592 data.forEach(e => {
593 max = floor > max ? floor : max
594 if (e.hasOwnProperty('submenu') && e.submenu.length > 0) {
595 each(e.submenu, floor + 1)
596 }
597 })
598 }
599 each(treeData, 1)
600
601 return max
602 },
603 discard () {
604
605 }
606 }
607 }
524 </script> 608 </script>
525 <style lang="scss"> 609 <style lang="scss">
526 .HMfilterDropdown { 610 .HMfilterDropdown {
527 flex-shrink: 0; 611 flex-shrink: 0;
528 width: 100%; 612 width: 100%;
529 height: 44px; 613 height: 44px;
530 position: fixed; 614 position: fixed;
531 z-index: 997; 615 z-index: 997;
532 flex-wrap: nowrap; 616 flex-wrap: nowrap;
533 display: flex; 617 display: flex;
534 flex-direction: row; 618 flex-direction: row;
535 top: var(--window-top); 619 top: var(--window-top);
536 left:0; 620 left: 0;
537 view { 621 view {
538 display: flex; 622 display: flex;
539 flex-wrap: nowrap; 623 flex-wrap: nowrap;
540 } 624 }
541 } 625 }
542 .region { 626 .region {
543 flex: 1; 627 flex: 1;
544 height: 44px; 628 height: 44px;
545 } 629 }
546 .nav { 630 .nav {
547 width: 100%; 631 width: 100%;
548 height: 44px; 632 height: 44px;
549 z-index: 12; 633 z-index: 12;
550 background-color: #ffffff; 634 background-color: #ffffff;
551 flex-direction: row; 635 flex-direction: row;
552 .first-menu { 636 .first-menu {
553 width: 100%; 637 width: 100%;
554 font-size: 16px; 638 font-size: 16px;
555 color: #333333; 639 color: #333333;
556 flex-direction: row; 640 flex-direction: row;
557 align-items: center; 641 align-items: center;
558 justify-content: center; 642 justify-content: center;
559 transition: color .2s linear; 643 transition: color 0.2s linear;
560 644
561 &.on { 645 &.on {
562 color: #FF6B4A; 646 color: #ff6b4a;
563 647
564 .iconfont { 648 .iconfont {
565 color: #FF6B4A; 649 color: #ff6b4a;
566 } 650 }
567 } 651 }
568 .name { 652 .name {
569 height: 20px; 653 height: 20px;
570 // font-size: 16px; 654 // font-size: 16px;
571 text-align: center; 655 text-align: center;
572 text-overflow: clip; 656 text-overflow: clip;
573 overflow: hidden; 657 overflow: hidden;
574 } 658 }
575 .iconfont { 659 .iconfont {
576 width: 13px; 660 width: 13px;
577 height: 13px; 661 height: 13px;
578 line-height: 16px; 662 line-height: 16px;
579 align-items: center; 663 align-items: center;
580 justify-content: center; 664 justify-content: center;
581 transition: transform .2s linear, color .2s linear; 665 transition: transform 0.2s linear, color 0.2s linear;
582 } 666 }
583 } 667 }
src/pages/index/index.vue
Diff comments   View file @fb74873
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 class="searchIcon" type="search" size="14"></icon> 6 <icon
7 class="searchIcon"
8 type="search"
9 size="14"
10 ></icon>
7 <input 11 <input
8 v-model="searchText" 12 v-model="searchText"
9 class="searchIpt" 13 class="searchIpt"
10 placeholder="老花镜" 14 placeholder="老花镜"
11 confirm-type="search" 15 confirm-type="search"
12 @blur="searchKey" 16 @blur="searchKey"
13 /> 17 />
14 </view> 18 </view>
15 19
16 <!-- 筛选栏--> 20 <!-- 筛选栏-->
17 <!-- <view class="screenBar"> 21 <!-- <view class="screenBar">
18 <view v-for="item in screenItems" :key="item.current" @click="onClickItem(item.current)"> 22 <view
23 v-for="item in screenItems"
24 :key="item.current"
25 @click="onClickItem(item.current)"
26 >
19 <view 27 <view
20 class="screenItem" 28 class="screenItem"
21 v-bind:class="{ active: current === item.current }" 29 v-bind:class="{ active: current === item.current }"
22 v-if="item.current === 2" 30 v-if="item.current === 2"
23 @click="dropDown" 31 @click="dropDown"
24 > 32 >
25 {{ item.text }} 33 {{ item.text }}
26 <icon type="info" size="14"></icon> 34 <icon
35 type="info"
36 size="14"
37 ></icon>
27 </view> 38 </view>
28 <view 39 <view
29 class="screenItem" 40 class="screenItem"
30 v-bind:class="{ active: current === item.current }" 41 v-bind:class="{ active: current === item.current }"
31 v-if="item.current === 4" 42 v-if="item.current === 4"
32 @click="showDrawer('showRight')" 43 @click="showDrawer('showRight')"
33 > 44 >
34 {{ item.text }} 45 {{ item.text }}
35 <icon type="info" size="14"></icon> 46 <icon
47 type="info"
48 size="14"
49 ></icon>
36 </view> 50 </view>
37 <view v-if="item.current !== 2&&item.current!==4"> 51 <view v-if="item.current !== 2&&item.current!==4">
38 <view 52 <view
39 class="screenItem" 53 class="screenItem"
40 v-bind:class="{ active: current === item.current }" 54 v-bind:class="{ active: current === item.current }"
41 >{{ item.text }}</view> 55 >{{ item.text }}</view>
42 </view> 56 </view>
43 </view> 57 </view>
44 </view>--> 58 </view> -->
45 </view> 59 </view>
46 <Uni-drawer 60 <Uni-drawer
47 ref="showRight" 61 ref="showRight"
48 mask="true" 62 mask="true"
49 maskClick="true" 63 maskClick="true"
50 mode="right" 64 mode="right"
51 :width="320" 65 :width="320"
52 @change="change($event,'showRight')" 66 @change="change($event,'showRight')"
53 > 67 >
54 <view class="close"> 68 <view class="close">
55 <view @click="closeDrawer('showRight')"> 69 <view @click="closeDrawer('showRight')">
56 <text class="word-btn-white">关闭</text> 70 <text class="word-btn-white">关闭</text>
57 </view> 71 </view>
58 </view> 72 </view>
59 </Uni-drawer> 73 </Uni-drawer>
60 74
61 <!-- 筛选菜单--> 75 <!-- 筛选菜单-->
62 <view class="content-wrap"> 76 <view class="content-wrap">
63 <view> 77 <view>
64 <HMfilterDropdown 78 <HMfilterDropdown
65 :filterData="categoryList" 79 :filterData="categoryList"
66 :defaultSelected="filterDropdownValue" 80 :defaultSelected="filterDropdownValue"
67 :updateMenuName="true" 81 :updateMenuName="true"
68 @search="search" 82 @search="search"
69 @getList="getList" 83 @getList="getList"
70 data-format="Object" 84 data-format="Object"
71 ></HMfilterDropdown> 85 ></HMfilterDropdown>
72 <!-- 商品列表 --> 86 <!-- 商品列表 -->
73 <view class="goods-list"> 87 <view class="goods-list">
74 <view class="product-list"> 88 <view class="product-list">
75 <view class="product" v-for="(goods) in goodsList" :key="goods.id"> 89 <view
90 class="product"
91 v-for="(goods) in goodsList"
92 :key="goods.id"
93 >
76 <Card :goods="goods"></Card> 94 <Card :goods="goods"></Card>
77 </view> 95 </view>
78 </view> 96 </view>
79 <view class="loading-text">{{loadingText}}</view> 97 <view class="loading-text">{{loadingText}}</view>
80 </view> 98 </view>
81 </view> 99 </view>
82 </view> 100 </view>
83 </view> 101 </view>
84 </template> 102 </template>
85 103
86 <script> 104 <script>
87 import UniDrawer from "@/components/UniDrawer/UniDrawer.vue"; 105 import UniDrawer from '@/components/UniDrawer/UniDrawer.vue'
88 import Card from "@/components/CommodityCard/CommodityCard.vue"; 106 import Card from '@/components/CommodityCard/CommodityCard.vue'
89 import HMfilterDropdown from "@/components/HMFilterDropdown/HMFilterDropdown.vue"; 107 import HMfilterDropdown from '@/components/HMFilterDropdown/HMFilterDropdown.vue'
90 import data from "@/common/data.js"; //筛选菜单数据 108 import store from '@/store'
91 import store from '@/store';
92 109
93 export default { 110 export default {
94 components: { 111 components: {
95 UniDrawer: UniDrawer, 112 UniDrawer: UniDrawer,
96 HMfilterDropdown: HMfilterDropdown, 113 HMfilterDropdown: HMfilterDropdown,
97 Card: Card 114 Card: Card
98 }, 115 },
99 data() { 116 data () {
100 return { 117 return {
101 // screenItems: [ 118 indexArr: '',
102 // { current: 0, text: "全部", hasIcon: false }, 119 valueArr: '',
103 // { current: 1, text: "销量", hasIcon: false }, 120 loadingText: '~~到底了~~',
104 // { current: 2, text: "价格", hasIcon: true },
105 // { current: 3, text: "折扣", hasIcon: false },
106 // { current: 4, text: "筛选", hasIcon: true }
107 // ],
108 // current: 0,
109 // showRight: false,
110 indexArr: "",
111 valueArr: "",
112 loadingText: "~~到底了~~",
113 filterDropdownValue: [], 121 filterDropdownValue: [],
114 filterData: [], 122 filterData: [],
115 searchText: '', 123 searchText: ''
116 // goodsList:[ 124 }
117 // { goods_id: 0, img: "/static/img/goods/p1.jpg", name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
118 // { goods_id: 1, img: '/static/img/goods/p2.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
119 // { goods_id: 2, img: '/static/img/goods/p3.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
120 // { goods_id: 3, img: '/static/img/goods/p4.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
121 // { goods_id: 4, img: '/static/img/goods/p5.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
122 // { goods_id: 5, img: '/static/img/goods/p6.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 },
123 // { goods_id: 6, img: '/static/img/goods/p7.jpg', name: '美瞳',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:3 },
124 // { goods_id: 7, img: '/static/img/goods/p8.jpg', name: '太阳镜',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:4 },
125 // { goods_id: 8, img: '/static/img/goods/p9.jpg', name: '镜片',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:1 },
126 // { goods_id: 9, img: '/static/img/goods/p10.jpg', name: '镜框',originCost:'￥198',price: '￥168', slogan:'1235人浏览',goodType:2 }
127 // ],
128 };
129 }, 125 },
130 computed: { 126 computed: {
131 goodsList() { 127 goodsList () {
132 // 也可以从 getters 获取 128 // 也可以从 getters 获取
133 return this.$store.state.index.list; 129 return this.$store.state.index.list
134 }, 130 },
135 categoryList(){ 131 categoryList () {
136 return this.$store.state.index.categoryList; 132 return this.$store.state.index.categoryList
137 // newData[0].submenu[0].submenu = categoryList[0].submenu 133 }
138 // newData[1].submenu[0].submenu = categoryList[3].submenu[5].submenu
139 // newData[2].submenu[0].submenu = categoryList[3].submenu[2].submenu
140 // newData[3].submenu[0].submenu = categoryList[3].submenu[4].submenu
141 // newData[4].submenu[0] = categoryList[3]
142 this.filterData = newData;
143 // this.filterData = categoryList;
144 },
145 }, 134 },
146 filters: { 135 filters: {
147 outData(value) { 136 outData (value) {
148 return JSON.stringify(value); 137 return JSON.stringify(value)
149 } 138 }
150 }, 139 },
151 onLoad() { 140 onLoad () {
152 store.dispatch('index/category'); 141 store.dispatch('index/category')
153 // this.getList(); 142 // this.getList();
154 store.dispatch('index/list'); 143 store.dispatch('index/list')
155 }, 144 },
156 methods: { 145 methods: {
157 showDrawer(e) { 146 showDrawer (e) {
158 this.$refs[e].open(); 147 this.$refs[e].open()
159 }, 148 },
160 getList() { 149 getList () {
161 store.dispatch('index/list'); 150 store.dispatch('index/list')
162 }, 151 },
163 // search(params) { 152 // search(params) {
164 // this.$store.index. 153 // this.$store.index.
165 // }, 154 // },
166 closeDrawer(e) { 155 closeDrawer (e) {
167 this.$refs[e].close(); 156 this.$refs[e].close()
168 }, 157 },
169 change(e, type) { 158 change (e, type) {
170 this[type] = e; 159 this[type] = e
171 }, 160 },
172 onClickItem(e) { 161 onClickItem (e) {
173 if (this.current !== e) { 162 if (this.current !== e) {
174 this.current = e; 163 this.current = e
175 } 164 }
176 }, 165 },
177 dropDown() { 166 dropDown () {
178 console.log("下拉"); 167 console.log('下拉')
179 }, 168 },
180 searchKey(e) { 169 searchKey (e) {
181 const { value: keyword } = e.detail; 170 const { value: keyword } = e.detail
182 this.keyWords = keyword; 171 this.keyWords = keyword
183 store.dispatch('index/search', { 172 store.dispatch('index/search', {
184 params: {}, 173 params: {},
185 keyword, 174 keyword
186 }); 175 })
187 }, 176 },
188 //接收菜单结果 177 // 接收菜单结果
189 search(e) { 178 search (e) {
190 const { on, value, index } = e; 179 const { on, value, selectedData } = e
191 let params = {} 180 let params = {}
192 if(on[0] === 1) { 181 if (on[0] === 1) {
193 // 若点击全部 182 // 若点击全部
194 this.searchText = ''; 183 this.searchText = ''
195 store.dispatch('index/list'); 184 store.dispatch('index/list')
196 } else { 185 } else {
197 for(let i = 1; i<=on.length; i++){ // on[0]是全部 186 for (let i = 1; i <= on.length; i++) { // on[0]是全部
198 if(on[i] === 1) { // 若该选项被选中 187 if (on[i] === 1) { // 若该选项被选中
199 params[`${this.categoryList[i].value}`] = value[i][0]; 188 if (this.categoryList[i].value === 'filter') {
189 console.log('dddd', params, selectedData)
190 params = {
191 ...selectedData,
192 ...params
193 }
194 } else {
195 params[`${this.categoryList[i].value}`] = value[i][0]
196 }
200 } 197 }
201 } 198 }
202 store.dispatch('index/search', { 199 store.dispatch('index/search', {
203 params, 200 params,
204 keyword: this.keyWords 201 keyword: this.keyWords
205 }); 202 })
206 } 203 }
207 } 204 }
208 }, 205 }
209 206
210 }; 207 }
211 </script> 208 </script>
212 209
213 <style lang="scss"> 210 <style lang="scss">
214 .content { 211 .content {
215 display: flex; 212 display: flex;
216 flex-direction: column; 213 flex-direction: column;
217 align-items: center; 214 align-items: center;
218 justify-content: center; 215 justify-content: center;
219 background-color: #f7f6f6; 216 background-color: #f7f6f6;
220 } 217 }
221 .header { 218 .header {
222 display: flex; 219 display: flex;
223 flex-direction: column; 220 flex-direction: column;
224 align-items: center; 221 align-items: center;
225 justify-content: center; 222 justify-content: center;
226 background-color: #f7f6f6; 223 background-color: #f7f6f6;
227 height: 178rpx; 224 height: 178rpx;
228 width: 100%; 225 width: 100%;
229 z-index: 999; 226 z-index: 999;
230 position: fixed; 227 position: fixed;
231 top: 0; 228 top: 0;
232 left: 0; 229 left: 0;
233 } 230 }
234 .searchBar { 231 .searchBar {
235 width: 670rpx; 232 width: 670rpx;
236 display: flex; 233 display: flex;
237 justify-content: center; 234 justify-content: center;
238 align-items: center; 235 align-items: center;
239 box-sizing: border-box; 236 box-sizing: border-box;
240 padding: 0rpx 16rpx; 237 padding: 0rpx 16rpx;
241 border: 1px solid #ff6b4a; 238 border: 1px solid #ff6b4a;
242 border-radius: 8rpx; 239 border-radius: 8rpx;
243 background-color: #ffffff; 240 background-color: #ffffff;
244 } 241 }
245 242
246 .searchIpt { 243 .searchIpt {
247 height: 68rpx; 244 height: 68rpx;
248 width: 670rpx; 245 width: 670rpx;
249 padding: 16rpx; 246 padding: 16rpx;
250 font-size: 28rpx; 247 font-size: 28rpx;
251 box-sizing: border-box; 248 box-sizing: border-box;
252 } 249 }
253 .screenBar { 250 .screenBar {
254 width: 670rpx; 251 width: 670rpx;
255 height: 110rpx; 252 height: 110rpx;
256 display: flex; 253 display: flex;
257 flex-direction: row; 254 flex-direction: row;
258 justify-content: space-between; 255 justify-content: space-between;
259 align-items: center; 256 align-items: center;
260 color: #333333; 257 color: #333333;
261 font-size: 32rpx; 258 font-size: 32rpx;
262 } 259 }
263 .active { 260 .active {
264 color: #ff6b4a; 261 color: #ff6b4a;
265 } 262 }
266 .screenItem { 263 .screenItem {
267 display: flex; 264 display: flex;
268 justify-content: center; 265 justify-content: center;
269 align-items: center; 266 align-items: center;
270 } 267 }
271 .content-wrap { 268 .content-wrap {
272 width: 100%; 269 width: 100%;
273 background-color: #ffffff; 270 background-color: #ffffff;
274 } 271 }
275 272
276 .HMfilterDropdown { 273 .HMfilterDropdown {
277 top: 178rpx !important; 274 top: 178rpx !important;
278 } 275 }
279 276
280 .goods-list { 277 .goods-list {